Best Practices for Microinteractions
by Nick Babich
Microinteractions are subtle moments centered around accomplishing a single task. Almost all products around us (both physical and digital) are filled in with microinteractions. Here are just a few examples:
- Visual feedback that confirms the fact that a new item is added to cart
- Pull-to-refresh that helps us update content
- Interface animation that acknowledges certain action (e.g. toggle button)
Every one of these tiny moments forms a microinteraction. When we interact with products we rarely focus on them, but we certainly feel their presence. However, these tiny moments when they well-designed can enhance your user experience by making the user interface less machine and more human.
In this article, I’ll desribe 5 useful techniques for microinteractions and provide some helpful examples.
1. Create a Habit Loop
Microinteractions have a direct impact on user engagement. Well-designed microinteractions have the power to encourage users to interact more with a product because they create habit loops. Habits are formed when people perform the same actions repeatedly and consist of three elements:
- Cue — Trigger that initiates action
- Routine — In response to the cue, you perform an action
- Reward — A benefit you get from completing the routine, reason for completing action
Facebook’s notification about incoming message is a good example of habit loop: red badge and whitened icon (cue) indicate there’s a new message, which makes the user click the icon (routine) to read the message from their friend (reward). After a while, users automatically click on icon when they see the red badge.
Tip: The stronger the reward, the more stronger the habit becomes.
2. String Together with a Theme
Microinteractions should be natural part of your product design. Here area two simple ways to introduce microinteractions in your design:
- Principle of continuity. You probably heard about the term user journey. When users interact with a product, they go through a series of steps and each step in this process is a logical continuation of a previous step. It’s possible to make the interaction with a product more comfortable by animate the transition between different states so that transition looks smooth, not discontinuous.
- Predictability of user interfaces. Human-computer interactions are much more comfortable for users when they can tell what will happen next. Well designed microinteractions can guide users and help them make sense of content and functionality.
3. Use Animated Feedback
Animation can contribute heavily to the user experience if used correctly. Both functional and delightful animations can be used to deliver a feedback:
- Functional animation can help to reduces cognitive load.
- Delightful animated details introduced in microinteractions make the interaction more fun because motion brings user interface to life.
4. Use Humor
Humor plays an important role in human-computer interaction. When products create positive emotional responses from end users, it has a better chance to create a loyal audience. For example, MailChimp, a web service for creating and sending emails, rewards users for creating and scheduling their first e-mails by adding unexpected humor and positivity throughout the process. By adding small and delightful surprises throughout the user journey, MailChimp makes sending e-mails a lot more fun.
5. Avoid Unwanted Interactions
When you design microinteractions, always make sure the visual cues and animations are appropriate. Many designers in an attempt to make UI more delightful overload UIs with animated microinteractions, and this often creates too complex interactions. The later can be seen in the example below — it’s a beautiful but not really valuable interaction.
Imagine seeing such an animated effect each time you tap on the floating action button. It can be really annoying. That’s why it’s vital to follow KISS principle when you design screens. So when planning our microinteractions we should focus only on practical things the microinteraction does for the user.
Learn how to design user interfaces
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
Conclusion
When you design a product, you should focus both on macro- and micro-details. Even minor details deserve close attention, because attention to every detail is key to your success, making human-computer interaction easy to use.
Thank you!
Originally published at babich.biz
