Microinteractions: Why do they matter?

Manit Rana
6 min readApr 10, 2020

--

Microinteractions haven’t recieved the popularity they deserve in the world of design. A lot of designers these days tend to ignore the focus on creating meaningful microinteractions in the process of designing an application.

Let me take a step back! Without proper explanation of what microinteractions even are, I went on my whole rant (sorry!).

So, why are these Microinteractions important in the first place? What role do they even play? Are they even neccessary in application and interface design……?

Microinteraction example in a mobile application. Credit: behance.net

Microinteractions, what are they?

Microinteractions are events inside an application that serve the single purpose of delighting the user by creating an engaging, welcoming, and ‘human’ moment!

Micro-interactions: why, when and how to use them to improve the user experience by Vamsi Batchu

Let’s go into nerd mode 🤓 for a second and try and undersand the official definition (given by Nielsen Norman Group):

Microinteractions are trigger-feedback pairs in which:

(1) the trigger can be a user action or an alteration in the system’s state;

(2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.

So, let’s take an example to break down these two points from the above definition:

https://dribbble.com/shots/3505561-UX-can-be-enhanced-even-in-toggle-switch

I love this little microinteraction for a toggle between AM & PM. Could be a great addition to an alarm clock app design maybe?

Here, the trigger is a user action i.e. clicking on the toggle button to toggle between AM and PM times. The feedback, a narrowly targeted response to the trigger, is the visual change of the sphere inside the toggle button to appear like a Moon when AM hours are selected, and change into a Sun when PM hours are selected. Further, another feedback through a visual change is the change in the background of the toggle when switching between the two options.

To me, this is a perfect example of a great microinteraction. The feedback provided to the user is very intuitive and visually appealing for just a small element such as a toggle button.

Below is a process flow diagram that indicates the working of Microinteractions:

A process flow indicating how microinteractions are either user- or system- triggered, and result in feedback communicated to the user by a small change in the user interface (Courtesy of Nielsmen Norman Group)

The flow describes how microinteractions are either user or system triggered resulting in feedback communicated by a change (often visual) in the system’s interface.

These distinct animations are not the only type of microinteractions. Even static elements like Scroll Bar can stand as a microinteraction inside the application. The scroll bar is user-triggered and visually provides feedback by communicating where the user is positioned on the page.

During my reseach on the subject, I came across some very informative and intelligent articles. One of these is written by Vamsi Batchu. His research on the topic is amazing and commendable. This article is referenced above and below is a piece derived from his work which describes each aspect of a microinteraction in detail:

Micro interactions have four parts:

Triggers initiate a microinteraction. Triggers can be user-initiated or system initiated.

In a user-initiated trigger, the user has to initiate an action.

In a system-initiated trigger, software detects certain qualifications are being met and initiates an action.

Rules determine what happens once a microinteraction is triggered.

Feedback lets people know what’s happening. Anything a user sees, hears, or feels while a microinteraction is happening is feedback.

Loops and Modes determine the meta-rules of the microinteraction. What happens to a microinteraction when conditions change?

Now that we have a proper understanding of what a microinteraction actually is, we can proceed to discuss more about these little magic tricks to make your user feeling satisfied and happy!

What role do Microinteractions play inside an application design?

Emotional Impact on User:

Microinteractions can have a huge impact on the emotional aspect of the system or application. Microinteractions supplement Emotional User Experience Design which strives to create application and systems that elicit appropriate emotions in order to create a positive user experience (https://www.interaction-design.org/literature/topics/emotional-design).

Communicating System Status:

Communication of the current state of the system is very important to engage users and improve their overall experience. Microinetractions play a key role in presenting this information to the user. An example of such is Progress Indicators and Loading bars. Whether they are cirular loading bars or traditional horizontal progress bars, the communication of the current state of the applicaton is important in making users feel fulfilled and not having the feeling of being lost when the application is doing its thing!

Error Prevention

Imagine you’re on a shopping website’s page. You are prompted to sign up to get the best recommedations and discounts. You start with registering your email, creating a password, re-typing to confirm it and then further proceeding. The website then asks you to specify your size, likings, and other specfications to show you the best options. You futher complete the whole form and proceed. You are then prompted with further questions to specify your delivery address. You complete the whole process and press finish. Suddenly, the website tells you that you didn’t meet the required criteria of password creation all the way back on the first screen.

Umm…shouldn’t have I been informed about this before!

To avoid such rework, take the example of password input fields which communicate the specifications of the password criteria. You type it in and if you don’t meet the requirements, the field immediately communicates some feedback to you saying that you don’t meet the criteria because of this reason.

https://capturly.com/blog/sign-up-form-mistakes-that-kill-conversion-rate/

This is a great example of using microinteractions for error prevention! The trigger here is the user action of inputting the password, and the feedback is communicating if the password meets the critieria or not.

Conclusion: Are Microinteractions important? Do I actually need to worry about them in my designs?

I hope I was able to provide a clear answer to why microinteractions can play a huge role in Interface Design in the previous section. For me, Microinteractions hold a key value. Their power to affect the overall emotional impact of the application is commendable and their further uses such as communication of brand, prevention of rework, and communication of the current sysem status is commendable. I believe every designer can make the use of microinteractions very productively to provide a greater, more beautiful, and ‘fun’ experience to the application!

Below are some really cool microinteractions for you to check out!

Keep designing and keep inspiring folks :)

--

--

Manit Rana
Manit Rana

Written by Manit Rana

Product Designer & Researcher

No responses yet