In our digital life, we are almost always surrounded by them. From mobile alarm clocks to payment apps and instant messengers to online shopping – microinteractions are used to improve our user experience. But what exactly are these small interactions between humankind and machines? And how are they used effectively?
Microinteractions: The Key to Successful UXD?
Microinteractions are small animations that are activated in different situations and interact with the user. Admittedly, not everyone will be able to immediately imagine something when reading this definition – therefore, we have prepared some examples of microinteractions just for you:
Used correctly, microinteractions improve the user experience and thus contribute to people using the product frequently and with pleasure. Furthermore, processes such as the purchasing procedure can be made more efficient through clear communication. But be careful! Used incorrectly, microinteractions turn into real UX killers.
Microinteractions: Four Steps to UX Success
If you want to use the power of microinteractions for your project, you should be very familiar with the stages of a microinteraction:
A microinteraction always starts with a trigger. A trigger is an object or an action that initiates the animation. A distinction is made between user-side triggers such as clicking on a purchase button, and system-side triggers such as push notifications.
After activating a trigger, predefined rules are followed. They describe what the animation looks like and how it behaves.
Feedback is the animation itself which is displayed to the user.
4.) Loops & Modes
Loops and modes take effect as soon as the conditions for the animation change.
Microinteractions: What Makes Good Microinteractions?
If you want to use microinteractions profitably, there are some rules you should follow:
- Microinteractions must not distract from the actual purpose of your website
- Microinteractions should always communicate clearly what is going on
- Microinteractions have to be simple and subtle
- Microinteractions have to be used when displaying product details
- Microinteractions should be kept short to avoid annoying the user
- Microinteractions should follow anchored patterns, e.g. red = wrong, green = right
Microinteractions: Not Only Used in the Digital World
Microinteractions are a powerful tool to drastically improve the user experience. In today’s world, they are almost essential to good UX and should be used on every website and in every app. However, microinteractions are not only used in the digital world. They can also be found in physical products – for example in Amazon’s and Google’s smart home assistants which show via LED whether they are currently listening to the user or in standby mode.
The use of microinteractions should be well planned and adjusted to your interface. Here are some examples of how good microinteractions complement the user interface:
Shopping Basket Animation
Our 5 Reading Tips Of The Week
How microinteractions improve your UX design [Inside Design]
10 microinteractions that will inspire your next project [Inside Design]