MicroInteractions are small animations which accomplish the user’s main action. microInteractions not only makes a product human-friendly but also helps to create a very delightful and engaging user experience for the end-users.
microInteractions are one of the core fundamentals of Interaction Design (a system which defines how machines behave with humans across different environments).
A small microInteraction for a state where a user performed some sort of action and got a behavioural response from the system can be seen right below –
We can also use microInteractions to seek user’s attention.A set of microInteractions helps a user to understand the product better and navigate across a different set of sections with an ease.A lo-fi product prototype with set of continuous microInteractions is shown below –
We can add microInteractions to different entities like to a form’s field validation or a custom on/off switch. microInteractions can also create a smooth delight to the morphed state elements. You can see a few more examples below for different cases.
MicronInteractions should go in contrast with the main process and should support the user’s action.
For example, if a user clicks over a hamburger icon and waits for the off-canvas content to appear, we can simply add a microInteraction to hamburger icon to help a user understand the button’s behaviour have now be toggled and it will now instead act as a trigger to close or hide the off-canvas data.
