Hire us

“The best products do two things well: features and details. Features are what draw people to your product; details are what keep them there” says Dan Saffer. The importance of details can’t be over-emphasized. Details make users love or hate an app or website. Microinteractions are those details. They might be easily overlooked in the global design scheme, but they actually hold the entire experience together.

In this article, I’ll explain what is a micro-interaction, why they are important and provide some great examples.

What is Micro-interaction?

Microinteractions are subtle moments centered around accomplishing a single task, by providing the users with helpful feedback and positive experience. They are used as effective tools for creating easy navigation through the app in a playful way, so that a person would be encouraged to repeat the same action, again and again. Almost all applications around us are filled in with micro-interactions.

The most well-known example of a micro-interaction has existed long before computers were ever invented. The on/off switch is often the first micro-interaction people encounter with a product.

Image credits: Vimeo

Some other examples of specific micro-interactions include:

  • The vibration notification together with the silent mode icon on display when you switch an iPhone to mute.
  • The pull-to-refresh UI pattern. By connecting the user’s desire to finding more content with the action of refreshing, the experience becomes more seamless.
  • The ’like’ button on social networks which highlights changes by using interactive animations. Such feedback informs users that they are in the list of those who liked the post.

Therefore, a micro-interaction is a way that a person engages with an application, and is a bridge between technology and a user. The best practice for such a connection is by giving micro-interaction design an emotional appeal, making them a little more warm and human. A good example of this is Facebook, and how it designed its red heart emoji in mobile messenger. Once the heart appears in the dialog window, it explodes into dozens of floating hearts, covering the entire phone screen, and accompanied by sound effects. Anyone in the chat can repeat this action by tapping the heart emoji again. Such moments of pleasant surprise and joy create a warm feeling towards the app, making the overall experience more delightful and encouraging people to come back for more.

Though a micro-interaction should not necessarily be too obvious, it should still be fun and appealing. This includes the minor animations inside the app’s features whenever a person receives a message, mutes the phone or completes a task. They show users whether they do everything right or wrong.

Image credits: Chris Bannister