A couple of years ago, we came across the below micro-interactions animation, which was very interesting. We love innovating and improving user experiences and this piqued our interest. It is a classic example of a micro-interaction. It communicates status and provides feedback and helps people see the result of their actions.
So what are Micro-interactions?
Micro-interactions are events or tasks which have a single purpose – to delight a user. They can be found all over our mobiles and mobile applications. Any moment that is engaging, welcoming and human can be called Micro-interactions. These elevate the user experience to another level. Micro-interactions generally has four parts.
Triggers
Triggers initiate micro-interactions and can be user or system initiated. A floating or attractive icon which urges users to click, swipe, press, tap or hold which triggers a micro-interaction is Triggers.
Rules
Rules help define what happens when a micro-interaction is triggered.
Feedback
Feedback is anything which the user feels or sees or hears upon execution of the micro-interactions. A tiny pop-up or animation which would catch the users eyes ensures that they are engrossed in the application or website.
Loops and Modes
They help determine the meta-rules for the micro-interactions. Should the micro-interaction change when the conditions change or should they be repeated is something to be set for micro-interactions.
Why and how can you make these micro-interactions engross your users?
Micro-interactions may be tiny, but they will help improve a mobile application or website immensely. Undoubtedly, they help users with the navigation and interactions in the website or mobile application, provide instant and relevant feedback, give tips to users, communicate whether an element is interactive or not, encourages interacting with your content by sharing, liking and commenting, etc. In short, it will make your website or mobile application more human.
It also lets your users know that you care about their experience with the website or mobile application. Moreover, it can increase your brand value, makes your brand more positive and influence users to interact more with your brand.
Few things to keep in mind while making micro-interactions are:
• Try to keep it simple and engaging
• Be prompt for user interactions
• Create actions for emotions
• Be Innovative
The best instances for using micro-interactions are for swipe action while inputting data, simple animations, while showing system status updates, in tutorials to make them interesting, for the call to action buttons and other buttons that can be animated. Furthermore, if you are a designer, you can familiarize yourself with After Effects, Adobe CC, Xcode, Android Studio, Invision etc for creating Micro-interactions.
Here are two examples of Micro-animations we like:
Zomato:
Zomato is one of the most popular food delivery applications available in India. However, what sets it apart is the Micro-interactions that they have used. Moreover, there are numerous interactions that they have used. Besides, they have made sure that they haven’t gone overboard with it.
Garny
Garny is an application which helps users preview, schedule and plans their Instagram feed. It has simple features. What we liked is the micro-interaction they have at the bottom right corner where users can select what they want to do next.
