How to use microinteractions to improve engagement

24/12/2020

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.

Similarly, most of us will be familiar with ecommerce websites that offer the ability to add products to a wish list. A common scenario that occurs with wish list functionality is for a heart icon to change colour upon click, signifying a product has been added to a wish list successfully. Like the Facebook example, this microinteraction is both minimal, yet essential to user experience. 

If you have a smartphone and are accustomed to browsing the web with it, another great example of a subtle microinteraction you will likely use day-to-day can be found with the menu icon (sometimes referred to as the 'hamburger' icon, constituting three horizontal lines), which is commonly found 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 and microinteractions are therefore commonly used to help indicate to the user that they've successfully opened or closed this menu system. As with our previous examples, typically this occurs with a very subtle, but vitally important change, since tapping the menu icon is typically one of the first things a user will do when landing on a website and could therefore be the first interaction they perform on your website. Microinteractions on menu icons come in a wide range of forms, sometimes as simple as moving position or changing colour, and sometimes morphing into a close button instead.

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 your 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.