You built an app with an amazing look and feel and that according to your opinion offers a really impressive visual design. You have loaded it with a design that is visually pleasing and thoroughly functional. But do you think that is enough to make a solid impact on your audience that stays with them? No, it is still missing an important element to make an impact on the audience. Time and again, mobile app designers must remember that an app needs to connect users with elements which we call micro-interactions.
What are micro-interactions?
Several times throughout the day we come across various types of micro-interactions. Each of these interactions serves a specific purpose and some of them even delight users. Hashtag feature in Twitter and ‘Like’ feature in Facebook are good examples of how micro-interactions play a crucial role in driving popularity and creating brand statement.
Here are some of the functions that micro-interactions help fulfill.
- Communicating user status or feedback quickly.
- Offering visual feedback and informing users about the consequence of an action.
- Allowing users to manipulate on-screen elements.
Four elements of micro-interactions
- Trigger: This element actually initiates the micro-interaction. For example, to mark a page as a favorite you can click on a star icon.
- Rules: Rules specifies the way the micro-interactions will behave. While the roles are in the background they only dictate the way we experience micro-interactions. So, users only understand them through the feedback or next step followed by the interaction. For example, the animation used for informing users during page loading follows a background rule but users only see the animation.
- Feedback: Feedback is the area where the design elements help communicating the micro-interaction to the user. This is basically to inform users about what happened through the interactions. For example, through the moving graphic figure, the users are informed that the page is loading.
- Loops and Modes: Loops and Modes play a decisive role in determining the span of microinteraction, its repetition and the evolution of the microinteraction with time. For instance, reminding us of our last interactions months ago comes under this. For example, Facebook ‘Likes’ through repeated use became a signature micro-interaction over time.
Some examples of micro-interactions that really became big
Over the years, a few micro-interactions became part and parcel of our computing, the web, and social media experience. There cannot be a better way to get an idea of how small details make a big impression than just giving some attention to them. Here are some instances of most successful micro-interactions.
Google auto-complete: This alone is responsible for most rewarding search experience, though it remains subtle enough to evade attention.
Auto-correct: First utilized in a big way by Microsoft in its text app named Word, it has become now popular for most web apps and office suites. It continues to offer effortless correction and we became so accustomed to it while writing that it became a signature of Microsoft Word.
Control-Alt-Delete: This combination of buttons originally conceived by IBM to reboot a computer later evolved in capacity to allow instant access to task manager. It is a great example of device level microinteraction.
‘Like’ from Facebook: We all instantly recognize this tiny button referring to “I like this” opinion for any contents on Facebook or connected to it. It became the most popular signature interaction on social media.
Hamburger Menu: This little menu icon swept the web interfaces and mobile apps in recent times because of allowing a smarter way to hide the clutter of menu buttons. Today it is instantly recognized as a menu list.
Pull to Refresh: Pulling the fingers downwards to refresh the page is more natural as it is done in the same way of scrolling. So it instantly became popular gesture for refreshing a page on touch devices.
10 effective micro-interaction design tips
Let us now provide here 10 time-tested micro-interaction design tips that worked for too many successful apps.
- Micro-interactions should be designed simple and interesting to survive repeated use over time. For instance, simple hovering effect on a CTA button can easily suggest an action.
- Allow utmost simplicity and hit the bull’s eye without pretension. Adopt straightforward language, clean and crisp typeface, emotional colors, and useful design.
- Micro-interaction must be lively and human with easy to understand text and emotional elements.
- Micro-interactions should expressly focus on keeping users informed about whatever’s going on in response to their actions. For instance, if a page is loading, users can be informed intuitively with a moving animation or graphics.
- Micro-interaction should be thoroughly contextual. Clear the clutter and stay relevant to the user contexts. For instance, if the user switched to sleep mode, there is no point sending an alarm.
- Make optimum use of Call to Action through micro-interaction to keep users on board and push them for desirable actions. Does your micro-interactions are actually leading them to positive actions like clicking on the CTA buttons? If not, micro-interactions are not helping business conversion.
- Let users always be clearly informed about the changes in micro-interactions and avoid creating confusion when any changes are done. For example, suddenly you have changed app layout and menu and users are finding a hard time to get to the things they need. In the case of such changes, offer guidance to help them find what they need.
- The copy used in micro-interaction should relate to the user moment with lighthearted and respecting tone. For example, the notification text should relate to the user movement and a warm tone will garner more engagement.
- Finally, the design should give vent to the harmony of various elements to make a visual connection with the overall app design.
Lastly, we must advise not to get too obsessed with micro-interaction design as it may lead to over design which would kill the natural effectiveness. If you could communicate the message with the right tone and simple easy to use design, you should not worry anymore.
