It’s all about the little things you know 😉
Have you ever paid close attention to the little interactions on your devices? Like the feedback that you get on plugging/unplugging your phone from charging? Maybe the little notification sound every time you activate your voice assistant? What about the disappearance and reappearance of the desktop icons every time you hit refresh? The ‘ding’ sound when the microwave is done? Or even the light on your toaster that goes from green to red?
Well, these actions account for Micro-interactions. I’m sure you’ve heard the term thrown around a lot but do you really know just how magical it is. I really do believe that these tiny little magical things can really elevate a user’s experience.
Open your camera on your phone, take a picture and observe the micro-interaction you see on clicking the capture button. Is it the captured sound? Is it the fade-out transition? Or is it the slide-out transition on the bottom placeholder of your pictures?
“Sometimes, little things make a big difference…” ― Nino Varsimashvili
Imagine if these little things did not exist. How would you know the status of your actions? These are what micro-interactions are all about. They are tiny interactions that often go unnoticed but make a big difference in your user experience.
Let’s get to know them
What are micro-interactions?
Micro-interactions are the little things, micro-details you may say 😉 that can make a big difference in your user experience. We often encounter micro-interactions almost every day. They could be simple animations like the bubbles that come up when you are texting or they could be some fairly noticeable animations like the confetti that pops on the screen upon applying a promo code on Zomato.
A really big part of micro-interactions is, adding these small moments in our day-to-day tasks that can delight the users in a fun way and make them smile. But most importantly, it’s about informing the users about what’s happening with their experience on the platform. When well designed, micro-interactions can improve customer satisfaction and increase retention.
The Zomato example mentioned above very well explains how micro-interactions add value in terms of adding joy by celebrating the user’s gain and at the same time providing feedback to the user that the promo code has been applied.
“Look and feel: Microinteractions are the feel” — Dan Saffer
Micro-interactions by definition
When you try to understand micro-interactions by definition, you might come across the term trigger-feedback pairs. Every micro-interaction has a trigger and there could be two types of triggers :
a) The trigger could be a user. For example, a user interacting with a button or performing some gestural or voice command.
b) Or the trigger could be the system when the system meets a set of predetermined conditions.
Why do we need to give more importance to micro-interactions??
1. They are rooted in human psychology
The term ‘Micro-interactions’ was actually coined for a sociological purpose. It focused on human social behavior, social interactions, and aspects associated with everyday life. For example, a person’s body language affects how we feel about interacting with them.
So when we talk about micro-interactions in the context of digital platforms, our focus should mainly be to mimic the interactions of the real world in order to smoothen the user’s path through the design and make each step easier.
“A poorly designed interface is like interacting with someone at a helpdesk who is rude, unhelpful and unwilling to do their job”. — Lana Miller
People generally like knowing if they have performed an action correctly. They like having control over their actions. This is the psychological factor that makes micro-interactions meaningful as they quickly and efficiently convey feedback to the users. A minor action like an animated icon movement does a great job in conveying system status and also humanizes the part of the process. Stephen Moyers has beautifully expressed it as closing the gap between humans and machines.
2. They serve usability
Micro-interactions can smoothen a user’s journey, guiding them throughout the process by giving hints on how to proceed or how to go back, convey the results of their action, alert them when an error has occurred, and even keep the users in loop by showing the status when something is being processed. As a result, they provide the user with constant feedback.
There are many types of micro-interactions and the list keeps growing with the advancements in technology. But some of the most common and most used micro-interactions are listed below.
- Tap effects
- Swipe effects
- Pull to refresh
- Progress bars
- Errors
3. They enhance branding
Well-designed micro-interactions that are unique to the brand can make a product memorable and increase brand awareness. For example, the two voice assistants, Siri and Google assistant have their own unique way of conveying to the user that the assistant is listening. Siri has a bouncing wave animation while Google assistant has four little balls that float on the screen idling. And upon the voice trigger, they elongate and start bouncing in a wave pattern.
A few things to keep in mind while crafting micro-interactions
While micro-interactions are fun, enjoyable, and immersive, they can push the users away if designed poorly. A few things to keep in mind while crafting them are :
Less is more
When designing micro-interactions it is easy to get carried away and overcomplicate them. This can drive the users away which is the polar opposite of its intended purpose.
Hence while crafting them, simplicity should be the principle and the interactions should not be any more complex than the action itself and should give the users just enough feedback to be effective.
Purpose and necessity
It is also easy to get carried away and include micro-interactions in every way possible on a single screen. It is important to consider whether it is even needed. Too many of these can frustrate the user leaving them with a negative impression. One thing that could help is to logically evaluate the purpose and decide where the micro-interactions are most needed.
“Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible.” — Dan Saffer
Speed and duration
When elements change their state, the change of state should be slow enough for the human brain to perceive the change but fast enough to avoid the users having to wait.
Many researchers have found that the ideal speed for interface animation is between 200 to 500 ms depending on the size of the device. Any animation below 200 ms is too quick and goes unrecognized while an animation above 500 ms is considered too long and boring.
Components of a micro-interaction
In his book, ‘Microinteractions: Designing with detail’, Dan Saffer breaks down the four components of micro-interactions (Trigger, Rules, Feedback, Loops & modes). Each of these components is critical in crafting a successful micro-interaction.
Trigger
Triggers initiate a micro-interaction, They can be user-initiated (when a user interacts and takes an action) or system initiated (when the system automatically triggers when a set of conditions are met).
Rules
Rules define what happens when a micro-interaction is triggered. They subsequently occur with the micro-interaction and determine “what can and cannot be done” and in what order they occur.
Feedback
This is the stage where a user is acknowledged for their action. It conveys what the rules are to the user and informs them of what will happen as a result of their trigger.
Loops and Modes
Loops determine the length and the frequency of a micro-interaction and also decide whether it needs to repeat or change.
Modes define critical but infrequent actions. For example, the Do not disturb mode on the phone or the change of location in a weather app.
Final thoughts
Animations and micro-interactions are some of the most effective ways of conveying information. When we learn how to craft them well, we can create unique and engaging digital platforms that can in some way make a difference in the stakeholder’s experience.
“Mies van der Rohe’s mantra of “less is more” should be the micro-interaction designer’s mantra as well.”― Dan Saffer
