Microinteractions in Digital Design: 10+ Сases of Using the Top Design Trend of 2021
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
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
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.
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.
Сases of Using Microinteractions
Tab bar interaction
Web interaction
Upload window
Note app
Product page
Shopping bag
Scrolling
Blog
Hotel website
And, of course, the automotive industry
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.