What are micro-interactions?
Everytime you click “like” on a post, change the ‘off’ button to ‘on’, swipe to unlock your phone, add an item to your shopping cart or wishlist, or even a loading page, you are actioning a micro-interaction.
A micro-interaction is a small, somewhat delightful design element that occurs when the user interacts with an element on the web page. For example: When a user taps on a button in a mobile app, and the button brings up a form, that’s a micro-interaction.
How do they work?
Micro-interactions follow a pattern for them to work…
- Micro-interactions are actioned by a Trigger, which can be initiated by a user (who clicks or swipes to activate the micro-interaction) or the system (which is triggered through specific elements being met).
- Once these micro-interactions are triggered, there are Rules which are the parameters the microinteraction follows and defines exactly what happens after a trigger is performed.
- Feedback is the recognition of the micro-interaction which can be a sound, vibration, movement, a visual cue, or something else. The action is ‘feeding back’ the results of the trigger to the users.
- Finally, Loops and Modes are the final effects of micro-interaction. The Loops determine how long the micro-interaction goes on for, whether it repeats or if it will change. Modes change the typical way things function and operate. Example: When you change your phone settings to dark mode, it’s changing the whole appearance of the phone display.
To sum up: The trigger sets off the feedback, the rules establish what type of feedback occurs, and the loops and modes help define special cases where that feedback occurs or not.
When do we use them?
Keeping a user engaged on your website or mobile app is an important factor in the user experience. You want them to interact with your content, and through these little micro-interactions, it provides simple satisfaction when the user engages with a Trigger.
Standard micro-interactions such as scrollbars are relatively easy to design, but compared to the demand for interesting and exciting features to keep users engaged, they’re slightly more difficult for our hard-working design team. But the results definitely pay off!
Ensuring the micro-interaction is natural and intuitive, it bridges the gap between the user and a product, creating a flow between pages. If the animations take too long to load or are too complex which distracts the user, the user can be left feeling confused. Even though you might have an awesome design, subtlety is important.
Animations and Micro-interactions…
Micro-interactions serve one purpose only, while animations are useful add-ons that enhance the interactions. The micro-interaction doesn’t need to be complex, they’re simply there to send a message without actually saying anything.
However, although these small animations can seem enjoyable and the best features ever, involving too many can lead to the user being distracted or losing sight of the real function of the website.
As we already know, mobile users want quick information. We recommend micro-animations lasting no longer than 400 milliseconds.
Why do we use them?
Micro-interactions make it easier for users to interact with your website. Swipe navigation on mobile apps, and scroll navigation for desktop removes the endless tapping through the website and provides a smoother transition between pages. Swiping and scrolling is also a subconscious gesture as it’s one of the most common movements (social media feeds and the Search Engine results pages involve this motion).
Online users want to accomplish their goals with a fun and humanized experience, boosting the user’s satisfaction and for them to feel ‘rewarded’. They gain a fun animation for completing an action and they’ll return to repeat the action.
Your micro-interactions can easily convey your brand through the animations used and should be present from the moment they open up your app or website. We advise avoiding too many colours or icons in your micro-interactions as it can distract your user if there are a variety of mismatched animations.
If your branding is playful or takes a laid-back approach, fun micro-interactions are perfect. However, if your brand is perceived as professional and ‘white-collar’, using comical aspects in your microinteractions maybe isn’t the best option. Your content has a tone of voice, and your microinteractions has a tone as well.
Lets users be in control
When you let the user feel like they’re in control, they don’t feel trapped by your website as they can make the changes they need. Allowing the user to edit their own actions on an interface can be completed through small micro-interactions to help them. A classic example is whenever a user chooses to delete social posts and is asked by the interface is they’re sure that is what they want. Usually as a ‘bin’, once the user selects yes, they post will be sucked into the bin to show it has been removed. That simple popup with a button that reads “cancel” is a microinteraction.
While microinteractions aren’t the whole solution for a perfect UI, it can serve as a great tool to improve on your interface and user experience.