“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.
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:
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
In short, micro-interactions improve the UX by making the user interface less machine and more human. A lot of times we think about the look & feel and how it relates to design. When we think about micro-interactions, they pretty much make up a balance on how users feel about the product, service or brand. Microinteractions fine-tune human-centered design by:
Micro interaction animation is also good for:
Because micro-interactions are brief in nature, they must be designed for repeated use. Well-designed micro-interactions are able to create:
Overall, to explain the meaning of micro-interactions, I would need to break down their work into four parts, including the Trigger, Rules, Feedback, and Loops (or Modes). Their teamwork is what makes the whole process so effective. Here is how it works, step by step:
Below, I will include a short tutorial on how to create micro-interactions. In general, well-designed micro-interactions are creators of:
Microinteractions are the key components of habit loops. Habits are formed when people perform the same actions repeatedly. The typical habit loop consists of three elements:
The stronger the reward, the stronger the habit becomes.
Facebook’s notification about new friend requests is a good example of a habit loop: red badge and whitened icon (cue) indicate there’s a new request, which makes the user click the icon (routine) to see information about the person (reward). After a while, users automatically click on the icon when they see the red badge.
If done well, micro-interactions can be signature moments that increase customer loyalty. Signature moments are micro-interactions that have been elevated to be part of the brand. Think about Facebook’s Like button. It becomes a natural part of the Facebook interface. If Facebook suddenly removes this feature, users will notice it and will think that the app is broken.
Part of the beauty of micro-interactions is that they can be inserted in a variety of places, around any potential action. Microinteractions are good for:
Navigate through an app and direct user attention. In many cases, animations are used for attracting user’s attention to important details (i.e. notifications).
Image credits: Rajat Sudan
Autocomplete is a great example of micro-interaction. Typing has high interaction cost; it’s error-prone and time consuming even with a full keyboard (and even more so on a touch screen). Autocomplete helps the user to provide the right answer faster and without typographical errors. As you type each letter, the system will make its best guesses as to the words you’re trying to find.
Image credits: fancy.surge.sh
Microinteractions can reinforce the actions a user is performing. By following the principle “show, don’t tell”, you can use animated feedback to show what’s been accomplished. In Stripe’s example below, when the user clicks “Pay”, a spinner briefly appears before the app shows the success state. Checkmark animation makes the user feel like they easily did the payment and users do appreciate such important details.
Image credits: Stripe via Michaël Villar
The first usability heuristic principle by Jakob Nielsen states: the system should always keep users informed about what is going on. Typing indicator in the chat is a great example of micro-interactions that provides status information. It appears on your buddy’s screen while you’re composing a message in chat.
Image credits: Mariya Yukhimenko
One of the most important and often overlooked aspects parts of form design is error handling. It’s human nature to make mistakes though, and your form probably isn’t exempt to human error. Users dislike when they go through the process of filling out a form only to find out at submission, that they’ve made an error. This is where validation micro-interaction plays it’s part in a user-friendly form. Real-time inline validation immediately informs users about the correctness of the provided data. This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors. When done right, it can turn an ambiguous interaction into a clear one.
Image credits: Paul Macgregor
In order to build the right element, there are some critical rules and principles to follow. Here are a few tips on designing details that are worth mentioning:
The design is in the details. Even minor details deserve close attention because all these little moments make up the feel, they come together to form a beautiful holistic product.
“The difference between the products we love and those we simply tolerate are often the micro-interactions we have with them.” — Dan Saffer
If you care about user experience, you must care about micro-interactions. Because your product is only as good as the least micro-interaction that people have with it.