Microinteractions – How devices talks with people

On my final thesis at YRGO Digital Design I studied microinteractions. I worked with another Digital Designer and we came up with examples of when micro-interactions work well (green example) and when it works poorly (red example).

The purpose of the work was to understand the impact micro-interactions have on people and how to enable user control. To get the user to find and reach the goal, and to act without having to think.

The goal with the work was to create micro-animations in After Effects, as part of the overall concept of microinteractions. Make micro-animations within a mobile interface and see how the effect of the use would be. Furthermore, we also wanted to develop our knowledge in After Effects.

The full report of Micro-interactions

Micro-interactions report (Swedish)

My role

My role as a Digital Designer in this project was to create illustrations and animations for the examples of the micro-interactions and to make a report together with my study-partner about the concept.

The animated examples

The bad example shows a static motion when opening an article. The good example shows a smooth motion when opening an article. The search result in the form of an article presenters so users know where it has pressed and follows the object’s curve into next page view. Here all parts are presented in its initial stage and you want to animate as little as possible to get the focus on the main object, which is the picture in the article, to show which article have been opened.

The bad example shows a download button not responding and making the user unsure if the download started or not. The good example shows a download button that ensures the user the download started and when the it is done.

The bad example shows an error message but doesn’t inform the user what the problem is. The good example shows an error message and informs the user what kind of a problem has occurred. The user has a button where it can try again and when the problem is solved a message shows that the user can continue. It guides the user through the problem.

In the bad example the information bar in the bottom is hidden for the user and it would be easy for the user to miss. The good example have a button with an information symbol attached to the bar in the bottom. When new information occurs, it will have a soft pulsing effect to drag the users attention towards it. Easy for the user to notice.

In the bad example the loadingbar is empty and the user doesn’t know what is happening to the page. Is it stuck or is it loading? In the good example the loading animation informs the user that the page is loading.

In the bad example the menu is static and feels mechanic. In the good example the menu feels more human and smooth. The animation grows from the original button which ensures the user where it pressed.

In the bad example the password bar doesn’t informs the user if it’s a good password or not. In the good example the user is guided to create a strong password and gets direct feedback on how strong or weak the password is. In order to safely move on to the next step.

In the bad example the search result occurs first if you wright a word spelled right and press the search icon. In the good example the search function has an animated icon that gives the user the choice to easily undo their selection in the search. The result presented directly below the search bar when the user enters the search word. The user does not need to actively enter the whole word to get a result which helps the user to reach their goal faster.