When you are listening to your favorite song… Let’s stop here: what makes this song your favorite? Small details that your ear catches. So the same with devices or apps. Microinteractions are small moments of the user’s interaction with a device or an app that make him feel good.

The devil is in the details, as we all know

Search icon interaction. Designed by Oleg Frolov

The Great Why

Let’s define the great “why” for brands to pay attention to micro-interactions. The reason is that micro-interactions are:

  • fun
  • functional

Liquid animation and microinteractions by Outcrowd

While using an app or a device the user “picks up”, maybe unconsciously, some small details that satisfy him in two main ways: they entertain him and give feedback on what’s going on. The sense of control over the situation, if you want. Let us explain it with a small and cute example: when you switch on your iPhone’s mute mode, you feel the vibration and see a small icon that tells you that the mission is completed. So how do you feel? Satisfied, maybe. Because you not only know that you did it, but you felt it. And you know what makes this micro-interaction good? You can turn the vibration off if you don’t like it or don’t need it.

Microinteractions make a brand's product more fun and functional. What else do we need?! Well-organized micro-interactions build ways for the brand to satisfy customers’ needs and make them feel that the brand takes care of them. 

The Structure 

Let’s analyze the structure of a micro-interaction. We will rely on Dan Saffer’s book “Microinteractions”. He reduced a micro-interaction to its elements, such as: 

  • triggers initiated by users or a system triggers “launch” micro-interactions
  • the rules that define the response of a system - how an app or device will react
  • feedback - the response from a system - what user sees and feels
  • loops and modes regulate the rules that define the response of a system in special cases 

So let’s analyze a micro-interaction step by step. We will take an email notification. And the trigger is someone’s letter. The feedback of a system, regulated by the rules, is an icon of a letter with a certain number we see. We have just had the 4th letter, for instance. And if we don’t open our email box, the micro-interaction lasts. As far as we can see that number. Our device doesn’t hide it, just gently reminds us about that letter - loops and modes.

Interaction by Mauricio Bucardo

So … How to Micro Interact?

We love our devices not because we use them, but because they make us feel good. For instance, once we asked Siri a really deep question, and you know what, she answered well. So, a micro-interaction in this case - the way she answered. Her exact words. Because they made us feel good.

She might just give us a bunch of links, but she did answer our question with “her” words. Not exactly her words, of course, but at that moment we were like wow, they (developers) put efforts to make our experience a bit funnier.

So the main rule to “micro interact” like a pro is to think about customers and make them feel good when they use your app or device. Fun and functional, don’t forget. And never forget this: micro-interactions should be simple and fast. The nice thing about micro-interactions is that you can put them everywhere and make each user’s interaction fun and functional. Let’s look at some great examples of micro-interactions and define for ourselves what makes them so.

10 Сute Examples of Microinteractions

Tab bar interaction

 several icons on the screen
Efran shows how the tab bar in the App Store can look more fun with microinteraction

Web interaction

Website concept created by Minh Pham

Upload window

Designed by Ariuka

Note app

Designed by Ariuka

Product page

Microinteraction for the Foodcard App created by Stan Yakusevich

Shopping bag

Designed by N. Braisch

Page loading

Freelance app user profile designed by Jordan Hughes

Scrolling

UI Interaction for photographers gallery. Designed by Tamo Kipshidze

Blog

Earthplorer Blog design by The Glyph

Hotel website

Designed by Alisha Chef

And, of course, the automotive industry

Designed by Sang Nguyen

How to Destroy a Microinteraction?

Some things to avoid if you don’t want microinteractions to become a traumatic experience:

  • you didn’t test the triggers, so now they annoy users
  • you didn’t include the rejection system to turn off some feedback’s effects like annoying sounds, etc
  • the user feels bored by interacting with the device
  • the interface doesn’t show the progress of a process, so it feels like the process has crashed
  • the user doesn’t feel that he controls the process
  • microinteractions don’t serve the main goal: it’s only fun without functionality

Conclusion

Details are the main reason why users love the product. Or don’t. So create designs with care. It can help you to win competitions where the prize is the user's attention and loyalty. Well-thought-out details help customers to engage with the product and live together happily ever after. So wisely create visual and sound effects, make micro-interactions simple, fun, and functional.