The nature of Microinteractions

Microinteraction is one of the key moments in UI / UX Design. This is one of the best pieces of evidence that paying attention to small details can give great results. Most of the books and articles on UI / UX Design have the same basic idea: what you get at the end of the design process should not only be beautiful, but also useful and easy.

The designer must consider the end user at all times. Applications should “talk” to users in their everyday-life language. The interface should become a friend for the user, one that is ready to give advice and seeks to please.

Microinteraction is a part of the product that fulfills one small, simple task.

The functions of Microinteractions:

• showing a response to user input;
• performing a specific task;
• reinforcing the sense of direct manipulation;
• helps to visualize the results of users’ actions and avoid mistakes.

Structure of Microinteractions

Trigger. This initiates Microinteractions. For example, clicking an icon in the form of a heart adds an item to your favorites.

Rules. This is the behavior of Microinteractions. The user can’t "see" the rules, but can understand them through feedback.

Feedback. Microinteractions convey a message. For example, when a heart icon changes its color, it is accompanied by a message, informing the user of the action.

Loops and modes. This is the determination of a Microinteraction’s duration and the way in which it is repeated. For example, a microinteraction may provide content from the "chosen" page and even remind six months later, when “Like” to the page was put.

Areas of use

The animation of a guide

The animation can help users understand the app after its launch by highlighting the key features and controls that are needed for future use.

 Example of guide animation

System’s status display

Users always want to be aware of what is going on and expect to receive a response immediately. In cases when an app takes time for data to upload, or to synchronize with the server to complete the action, the interface has to inform the user of what is happening. This can be displayed with the help of animation.

Example of system’s status display

Response to pressing

The various states of buttons shouldn’t be ignored. Selectors help users understand whether the press has worked or not. 

Example of response to pressing

Display of changes

Notifications should be displayed from time to time, in order to ensure that the user can see the information. In this case, animation can help. It will attract the users’ attention and keep them from missing out on important information.

Example of changes displaying 

Visualization of data entry

Data entry is one of the most important elements of any app. Microinteractions turn this process into something special. You can use the existing elements to demonstrate the response.

Example of data entry visualization

Navigating through the app

A user always wants to know where he is. Animations or visual displays of articles’ scroll or section can help.

Example of  navigating 1

Also, Microinteractions can help users navigate through an application with an unusual layout.

Example of  navigating 2

Call to action

Microinteractions are able to prompt the user to interact with the app. They can also inspire empathy in the user’s experience with the product. However, make sure that animations and visual signals are relevant for your users. Also, remember durability! Microinteractions should not irritate users with a large number of repetitions.

In the best products, two things are worked out properly: functionality and details. 

Functionality - this is what leads people to your product.

Details - this is what keeps them loyal to your product for a long time. Details are what, in fact, distinguish your application from its competitors.