The Magic of Microinteractions

‍The very nature of Micro Interactions appeals to the addictive human need for instant gratification and reward. They’re small, quick, dopamine-releasing rewards that we get for completing a task or action.

What are Microinteractions?

Microinteractions (MIs) are small, instant animations that serve a single purpose during user action points. Let’s look at an example: refreshing an app on a phone. When you drag the screen down and release to instigate the refresh, a small refresh animation wheel animation will appear to indicate the fact that the page refresh request has been registered by the software and it is currently undertaking this task. This animation serves a single purpose – to demonstrate to the user that the page is currently being refreshed as a result of your action as a user.

The line between Microinteractions and prompts is a difficult one to navigate. The best way to discern between a prompt and a Microinteraction is to establish the purpose of the animation. If the purpose of the animation is to incite action from a user, then the animation is a prompt. If the purpose is to indicate the completion, or progress of an action (refreshing a page) then the animation is a Microinteraction.

‍

The structure of Microinteractions

Trigger

The ‘trigger’ is the first step in the MI flow – this initiates the interaction e.g. button or toggle switch. To simplify the difference between a CTA and a trigger, if you had a button displaying “sign up”, the CTA is to sign up, however the trigger to start the Microtransaction is the button itself.

Rules

Rules determine the sequence of events that occur after the Microinteraction has been triggered. For example, the torch on your phone uses the button as the switch to turn the torch on and off.

Feedback

Feedback communicates the outcome of an action to the user. Using the example of unlocking a phone, if the password is entered incorrectly, then the keypad may shake or the text box may turn red or green depending on whether the password was correct or incorrect to communicate this outcome to the user.

Loops and modes

Loops and modes refers to the meta-rules of the MI and how those rules change if the interaction is instigated multiple times. For example, if you’ve inserted your password incorrectly multiple times, there may be a counter on the button for how many tries you have left to enter your password correctly before being locked out.

‍

The psychology of Microinteractions

Addictive Rewards

So, how do MIs interact with us? The very nature of MIs appeals to the addictive human need for instant gratification and reward. They’re small, quick, dopamine-releasing rewards that we get for completing a task or action (pressing on a button or swiping). As technology has advanced and MIs have become more integral to the design of websites, we often see these MIs as small easter eggs to find throughout our website journey. The attention that we give to colour and movement is an innate trait that humans have evolved to have. Colourful animations attract initial engagement and play an important role in maintaining interest. The MI animations help designers to make the simplest of processes (switching between features on a site) engaging and addictive. All this to keep us scrolling, swiping, clicking, tapping and ultimately converting.

Microinteractions and the customer journey

The first few seconds that a user spends on your website can make or break their visit, and therefore their chances of converting. Effective MI can change a disengaged user into an engaged user, and therefore increase your conversation rates. That’s not to say that if your website isn’t doing what you need it to, throwing MIs at the problem will fix it. They can be overused and become a hindrance to your user’s journey through your site. Much like the humble 00’s flashing prompts, although an eye-catching feature (in the 00’s), having too many of them will distract the user from their goal on your site and can deter them from further use.

Confirmation of completion

Confirmation of completion, or current system status, is critical to keeping the user engaged and informed about the current progress of an initiated action. A lack of feedback from a user performing an action leads to the assumption that the link/button is broken. It doesn’t satisfy that innate need for reward and gratification. Furthermore, if the user does not receive this feedback and can actually be confusing. Think about when you submit a form or proceed with a payment – if there isn’t a Microinteraction letting you know that action is occurring, you can be left in some sort of purgatory. Do you press it again and run the risk of submitting it twice, or do you leave and await a confirmation email that may or may not come? Forget the missed dopamine hit, Microinteractions can help prevent frustration.

‍

Design and Implementation

The responsibility for the design and implementation of MIs on your site is split between  and developer. They will work closely together to find a balance of what’s needed and what’s necessary. Whilst a designer may get caught up in the aesthetics of a beautiful MI, a developer can be more attentive to what’s actually achievable and how it’ll affect the running of your website. The MI may be beautiful, but may also be complicated and will slow down the load speed of your website. When 53% of mobile users abandon a site that takes more than 3 seconds to load, every split second counts.

‍

Summary

Engaging, maintaining and exploiting user interest through the use of MIs alongside great content is sure to enhance your user’s experience on your site. However, it’s important to remain on the right side of the engaging/cluttered scale. So by all means, use MIs to help make your website a place that users want to return to, but make sure that your website is a place that users want to stay on by using MIs in conjunction with great content and good SEO practices.

‍

‍