How to use microinteractions to improve engagement
Microinteractions are usually subtle animations that help users appreciate a website or app has understood and responded to their action. They can be used to both encourage users to make an interaction (e.g. a bouncing arrow that tells a user they can scroll down the page), or, to avoid making errors (e.g. a validation bar that shows you if the password you are creating is strong enough).
Well thought-out microinteractions can boost the level of enjoyment users have when using an app or website, making it more a memorable experience and increasing the chances of them returning.
The process of creating an effective microinteraction can be broken down into four-steps: Trigger, Rules, Feedback, Loops and Models.
- A trigger is the event that starts the microinteraction.
- The rules decide what happens after the trigger has been activated.
- The feedback is the change that users see to validate their action.
- Loops and Modes determine the length of an interaction and if it should repeat itself.
Using microinteractions to improve engagement
There are many subtle but effective ways microinteractions can be deployed to help a user progress through a web journey. These can often be almost transparent and yet simultaneously essential. A great example of this is the “like” button that millions of people use every day on Facebook to show support to friends and family. Here we see a microinteraction occur when the button colour changes from grey to blue to confirm that the user has successfully interacted with the post. Although the change is subtle and not something we consciously think about, without this microinteraction, users would be confused about whether their interaction was successful and would likely keep pressing the button instead of continuing their journey. In this way, although incredibly simple, microinteractions can be seen to help users engage with content in a way that can profoundly impact their overall experience.
Another great example of a subtle microinteraction that most people with a smartphone will be familiar with is the hamburger menu (or the three little lines you may see in the header area of a website or app). We have all learnt that if you tap this icon, a menu of some variety will appear, which will often be one of the first taps a user makes when landing on a website. The menu icon also usually turns into a close button once the menu is open, which prompts you to tap this to close the menu if needed. If the menu button was a different shape we did not recognise, we would be far more inclined to either disregard the icon completely or become confused by the unfamiliarity and leave.
If you have a wish list or favourites function, you could implement the infamous heart icon on your product range page to promote the feature which users can click to immediately add the product to their wish list without having to leave their place while browsing and can click it again to remove this item from their list. You could also give this a nice animation such as filling up or beating once it has been clicked.
Using microinteractions to prevent user error
You may recall instances when filling out an online form where once a field is complete, a tick or perhaps some form of error appears. This type of microinteraction is used to communicate something called real-time validation, which provides users with instant feedback so they know whether the data they have input is ok or not. In this scenario, microinteractions are used to aid the user in completing what can sometimes be a complex task, whilst minimising the chances of them making a mistake or having to go back and find the error after continuing in their journey. Going backwards in a journey can be frustrating, so implementing these small additions can help to reassure the user that they are safe to continue or they need to fix something before they get too far ahead. This very subtle form of user feedback can have a big impact upon overall levels of satisfaction.
Another example of the way microinteractions can be used to help prevent user error includes button animations that help inform the user whether they are able to proceed or not. This can be utilised when it’s important to alert the user that something’s wrong and needs to be addressed before they can proceed, for example, a ‘Proceed’ button becoming greyed out to communicate that it’s not functional and then changing back to its original colour when the right requirements are met. This deployment of microinteractions is often seen around password creation or entry areas, where animations are used to help inform the user if their password is correct or secure enough. In these instances, something as simple as a colour change can provide the user with very important feedback without asking them to do conscious processing.
Using microinteractions to promote your brand
Outside of the functional role microinteractions can play, they can also be used to provide further depth to the way your website is branded and the impact that branding has. Although using them in this way may not be as important for enhancing usability, it can help to make a website visit more memorable and enjoyable for the user. Because of the wide range of ways microinteractions can be used, there’s enormous scope to tailor them to compliment the style and personality of your brand, whether it’s slick and professional, or fun and playful. This can help to re-enforce your brand identity, without having to be overly explicit about it.
A great example of this could be if your business provides party planning services and you want customers to appreciate the energy and fun you will bring to their special occasion. In this instance you could create a fun animation of some confetti falling when they interact with a key call-to-action on their website, such as the “Subscribe to Newsletter” button. This kind of simple animation is easy to implement and provides a dual purpose in letting the user know they have completed an interaction successfully, as well as reinforcing important aspects of your brand and company values. In contrast, if you perhaps sold high-end jewellery and wanted to give your users a feeling of luxury when using your website, you could run a subtle shine across your buttons when the user interacted with them.
Although microinteractions on the web generally rely on animating content, it does not mean these animations have to be big and flashy – in fact, they should not be used in a way that will disrupt a user’s journey, only in a way that will enhance it. Similar to how you might go about setting the tone of voice for the copy on your website, microinteractions should complement the personality of your brand, re-enforcing those key messages in a subtle way.
Using microinteractions to communicate status
Microinteractions can also be used to help the user appreciate what is happening during important moments in their website journey. This can be useful in reducing frustration and garnering more trust with users. An easy example of this is when the user is required to perform an interaction that may not provide an instant result, for example when adding something to basket, or downloading a large file. In instances when you know there is a potential for a delay between the user making an interaction and the result of that interaction being complete, a simple microinteraction such as a loading bar or spinner can have a significant impact in reducing potential confusion or frustration while they wait. Another great example of this being deployed is in apps that allow you to drag down to refresh the screen; here a microinteraction can show the user that their interaction was successful and help them wait more patiently, confident that their request will be completed as soon as possible.
The use of progression bars during multi-step journeys (such as a checkout journey) have also been found to have a significant impact of improving user experience, and microinteractions can be used in these instances to provide a bit of subtle animation to reward the user for the progress they make. This could be as simple as showing a progress bar growing as they complete steps, showing the user how much longer their journey will take, keeping them engaged for longer.
If you would like to find out more about applying some microinteractions to your website, contact us to find out how we could help.