Billions of people around the world interact with smartphones every day to perform various actions, Example: Turning off the sound of a phone or pressing the play button of the youtube video, sign in to a social networking site, sliding down the screen to refresh a page…the possibilities are endless. Each of these actions occurs micro-interaction.
Briefly speaking, micro-interactions are tiny enticing moments built into the application, which stimulates a feeling of well-being once it is discovered by users. It is one of the best artistry technique for giving instant delightful feedback, improve customer satisfaction and increase retention.
Microinteraction in action;
According to Dan Saffer (Interaction Designer) effective Microinteractions follow the following 4 step process.
A Trigger initiates a micro-interaction. The Rules determine what happens, while Feedback lets people know what’s happening. Loops and Modes determine the meta-rules of the micro-interaction. Detailed part can be read Here
Importance of Micro Interaction
Designing micro-interactions with great attention to detail is key to the success of any great application. It meets the user’s natural desire for acknowledgment. It improves the UX by making the UI less machine and more human-centered.
Essentials of Micro Interaction
Feedback to users actions should primarily address 3 fundamental things. Orchestrated them well, can create a very enticing user experience and less guesswork.
1. What might happen
Communicate clearly to users what might happen if an action will be taken. In the example below, dragging the contact over trash icon indicates it will delete the contact.
2. What is happening
It is to keep a user informed about their action. Example; Signup button progression clearly hints what is happening & avoids any possible confusion.
3. What happened
Show the confirmation or a result of a user’s action. Twitter “Follow” button is a fantastic example in this case.
How I build my first Design System: https://medium.com/@mudasirwali/building-the-talabat-design-system-e94283dda6c3