Micro-Interactions: making people love your products

Dan Saffer says it is the way to create “The difference between products we love and products we tolerate”. Some say it is “The way to explain a lot without using words”. But I know them as Micro-Interactions. I’m convinced we should pay more attention to micro-interactions in our design, so I hope I can convince you as well.

So what are micro-interactions?

Micro-interactions are tiny interactions we perform continuously during the day. While setting an alarm you already perform 3-5 micro-interactions. Clicking the “add” button, setting the right time, turn snooze off, save the alarm and turn the alarm on. But pressing buttons, adding stuff to your online shopping cart, and removing things from your shopping cart, are examples of micro-interactions as well.

But why should I use them?

You might think, how can this go wrong and why you claim we should pay more attention to it? Well, there are a lot of situations where things go really wrong. Imagine a download button on a random website. You move your mouse to the button, but nothing happens, no hover-state. You click anyway and again nothing happens. You click again and suddenly you get the same file twice into your download folder. Terrible? No. But a correct button would create products we love, instead of just tolerate how bad they are and move on.

“The difference between products we love and products we tolerate”.

How does one create a good micro-interaction?

There are four steps which need careful thinking while creating micro-interactions.

1. Trigger: what does trigger the micro-interaction? A click or a swipe? And is this clear for the user as well?
2. Rules: what are the rules for the micro-interaction? Lets take the Apple alarm and their “silence switch” on the side of the iPhone as an example. If you have an alarm ON, and the “silence switch” to SILENCE. The alarm will go off anyway. Why? Because their rule is: sounds you have control over and have decided to go yourself, will go off no matter what. Sounds that you have no influence on, like text messages, will make no sound.
3. Feedback: give the users good feedback after using a micro-interaction? Is it clear that the click or swipe has been received?
4. Loops & Modes: how does a micro-interaction work when used multiple times? Adding things to your “shopping cart” for example is a repeated micro-interaction. How does this change the animation or the shopping cart?

But what about micro-animations?

We now know that micro-interactions are, why we should use them and how to create good ones. But what are micro-animations? Because online those terms get mixed up too often. But it’s rather simple. “A micro-animation is the animation of a micro-interaction”.

1. Highlight change. Example: if you click on a menu icon and a menu appears. You usually look directly at the menu. But you actually wanna keep the attention on the menu icon just a little longer so the user notices the change of the menu icon. This way the user also knows how to close the menu again.
   
2. Keep context: users should always know where they are relative to things around them. In a supermarket for example you walk towards the groceries instead of suddenly appearing in front of the groceries. Because you actually walked there you know what is around the groceries and how to get to other aisles within the supermarket. The web is rather strange in that matter, because websites teleport you all around their website all the time. Without giving you a  good feeling of where you actually are relatively to other pages.
   
3. Draw attention: if you want to use a button, you can animate it to increase clicks. People’s eyes are drawn to movement, so why not use this online as well. Be careful though not to overuse use it. I think one animated item on your screen is enough.
   

   Source: http://unitid.nl/english/why-use-micro-animations-in-your-design/

4. Feedback: as we talked about before, if you click a button, you want to get a confirmation that your click has been received and is being processes.
   
5. Look & Feel of your brand: with animation you can also expand your brand experience. On a website for mountainbiking or any other active sports, I can imagine that the animations are totally different than on a website for an elegant and classy clothing brand. Quick and energetic movement compared to slow and elegant movement. Google this is as well:
   

   Source: Google

Conclusion

Lets all pay  more attention to the details in our design. Because the details are what make products great. Are products instantly great after applying this information? No. Because great products need a lot more obviously. But thinking carefully about the micro-interactions and other details in the design is a great start, towards product people will love.