Your user’s experience can be mapped almost directly to the performance of your web or mobile application. You’ve likely heard how slow load speeds can negatively impact engagement and retention of users, but you may not have considered how fast load speeds can impact user experience.

We’ve all had that moment when we flip a switch and … drumroll … nothing. Usually this means the light bulb burned out, the power is out, or some other fundamental failure in technology. But imagine a customer is checking out online and when they click the final buy button … nothing happens. “Did it work?”

This hypothetical narrative is why microinteractions are important to user experience. Microinteractions help improve the perceived execution of a desired action. Let’s first cover the basics of what a microinteraction even is.

What are Microinteractions?

Microinteractions are subtle movements in the UI of a web or mobile application. You click a button and the switch literally flips. Let’s take the bathroom on the airplane as a helpful analogous example. When someone enters the bathroom and locks the door, an indicator light is lit to signal the action that has been taken, revealing to users that a change has taken place.

As a more literal example, let’s say you are browsing Facebook or Instagram and you come across a post you really like. You tap the thumbs-up or double tap the screen to show your love, and the animated expressions, whether various emoji reactions to choose from or an animated heart, you know the desired action took place.

When to Implement Microinteractions 

There is a time and a place for microinteractions. Too many microinteractions can overwhelm and confuse users.

Although you may want to add the metaphorical bells and whistles to your mobile app, use restraint when adding complexity to the UI. Microinteractions are to be used sparingly to add emphasis to anything you think would be unclear, including form validation, calls-to-action, and more.

Information Validation

One of the common implementations of microinteractions is to alert users whether their execution of a form, button, or other interaction with the application was successful or not. You may have seen this before when attempting to log in to your favorite app and a green arrow is animated to show success.

Or maybe when you were signing up for a new account and your password is measured for it’s strength in security, you see an interactive progress bar update from weak to safe as your password becomes more secure.

Call-To-Action 

Another common use case for microinteractions is drawing more attention to a call-to-action button. When applications try to draw your attention to a certain button or other function, they could implement a minor vibration, rotation, or other motion to raise awareness.

For example, a customer service agent’s message pops up in the lower right hand corner and periodically pops up to grab the visitor’s attention. If a demo or other customer inquiry is the goal of your web/mobile experience, this subtle animation on the call-to-action will be helpful for more customers to understand how to get in touch.

Microinteractions and You

Whether your mobile app or site needs to educate users on how to use the product, verify that an action was successful or draw attention to your goal for them, microinteractions are a great tool.

Below is an infographic from CleverTap all about microinteractions including animated examples (of course).

Thanks for reading the Tapadoo blog. We've been building iOS and Android Apps since 2009. If your business needs an App, or you want advice on anything mobile, please get in touch