We can use Micro Interactions within our work to help create a more engaging experience for the user by providing feedback and a sense of satisfaction. I think it is hard to remember when you see the work of those around you that it is not always about having the nicest illustrations but being able to create something that allows your product to be more engaging and give users an element of feedback or satisfaction when completing a task.
Some of the best known micro interactions would be the pull to refresh, tapping an Instagram post to like it or scrollbars when using a page however most users now subconsciously do these actions demonstrating that they serve the important process of communicating feedback to users. Without them, users would be lost and not know if their actions did anything or made a difference which causes confusion and frustration among users.
An example by WIXSTUDIO is the micro interaction of liking a post on Instagram. A user would not know if they had liked a post if the white heart didn’t pop up and the heart below didn’t turn red as they require some sort of visual or physical feedback to process the fact their action worked as expecting feedback is human tendency!
Before adding micro interactions, we need to think about what we want them to do such as will it increase engagement, display system status or provide error prevention. By using a micro interaction we could help prevent the user from making a mistake that might lead to a negative experience. Some other possible used for micro interactions are:
Loading
Using micro interactions can make the boring process of waiting for it to load a lot more engaging. You can use it to inform users that the product is still working to respond to their actions and provides a real time status of a process. Loading micro interactions can be as simple or complex as you want but they all the same outcome of engaging users.
Data input
Data inputting is not only an important but necessary component for most products whether it be for logging in, signing up or a contact form. These data inputs cause a lot of frustration among users as when they for example enter a password they just receive an error message saying you didn't meet the requirements. However whenever we add micro interactions we can provide feedback to users and tell them how they can correct their data input to the correct format or to meet requirements. A great example is how Mailchimp implements micro interactions in their sign up form to decrease the chances of errors occurring.
Support undo
Mistakes are easily made and everybody makes them so we should be making it easy for the user to undo any action that they didn’t mean to do in the first place or that they changed their mind about. By implementing micro interactions we can communicate the state of the UI elements and give the user an opportunity to reverse any prior actions done. A simple example of this would be allowing the user to add an item to their wish list or favourites by clicking on a heart icon and also removing it again.
Fast Response Time
Micro Interactions should provide feedback immediately after the activation of the trigger as if it takes too long users might not associate it with the action, making the micro interaction pointless and possibly confusing.
Be purposeful
By avoiding adding features or elements that have no purpose or meaning to the product or user experience we can improve our micro interactions and add value to the product instead of improving the aesthetics of the product.
Be consistent
By creating a consistent style for all interactions across the product especially through your micro interactions, users will only have to learn them once and will then be able to start enjoying your product.