The brand philosophy of the most popular Design House Stockholm says “Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful”. So, the basic idea of Microinteractions are to focus on the details that can truly transform the basic user experience of an application. There are many practices to enhance the overall user experience such as well-structured information, meaningful content, attractive design, responsive and fast loading pages etc. But apart from all these high-level technicalities, there are micro level interaction details that can that can keep the users delighted and increase retention.
In short, Microinteractions are those tiny enticing moments built into the application, which stimulates a feeling of happiness to the end users. As a designer, identifying the micro interactions in the application is equally important as designing them. It’s the meticulous attention to detail that differentiates an outstanding website from the rest.
Definition
Dan Saffer, the famous Interaction Designer & the author of the book Microinteractions, defines micro-interactions as “contained product moments that revolve around a single use case - they have one main task”. According to Saffer effective Microinteractions follow a four step process mentioned below.
Triggers:
This is what initiates the Microinteraction. A trigger can be a floating icon that enourages a user to click, swipe, tap, pull, scroll.
Rules:
The trigger engages the rules. This is what happens during the interaction and it needs to feel natural for a user.
Feedback:
This lets the user know what exactly is happening. For example, it can be loading animation, pop-up, color fill an icon or any other range of interaction.
Loops and modes:
This determines the length of a Microinteractions as well if the user will need to repeat it or change it over time.
Instant Feedback:
An input feedback should work instantly in a good UI system. Imagine a scenario where the user is filling a huge web form and when he clicks the ‘submit’ button after completing all the fields, the form is throwing an error message. This will make the user instantly frustrated. Besides the irritation of finding the fault input field, there is a big chance that some of the fields get empty, making you putting the whole information again. Providing information, automatically appearing when needed, will ease the frustrating process of filling rules. For most of the people, this information would be unnecessary, they don’t want to see a bunch of text before each empty field. Thus, that info can be hidden in a small icon, which expands to a small box in case you hover or tap on it.
When the user fills in form, the system instantly checks for the input text and kindly reminds the user to correct the fields if there is a mistake. The process of feedback is given straight after the users leaves that input field. The validation or help message appear only when there is a mistake, sliding from the top and colouring the filed red to attract the user’s eye.
Examples
Here are some cool microinteraction techniques created by smart UI guys which I found from various sources on the web.
Quick Reference
Conclusion
Microinteractions are a great way to enhance the overall user experience of an application. Along with other tiny techniques, animations can also bring in a lot of personality which enhances the brand experience. Microinteractions can also make the app user experience easier and more seamless which is a very important aspect of product branding.
In UI/UX, it is highly important to study the behaviour of end-users and how they feel about a particular product. Even very small things require proper attention as it can turn the things in your favour. This is where Microinteractions come into play as they acknowledge the users and give them the necessary feedback and understanding of the current process, thereby making the interface more interactive and usable.
About The Author
