Microinteractions are often overlooked features when you’re busy designing and building a website. When searching for “Key factors to consider when building a website”, none of the searches returned results on the first page of the SERPs even mentioned Microinteractions. This is despite the fact that they’re one of the key pieces of functionality. They provide useful feedback to users when they interact with (and become initially involved with) your business online.
What are Microinteractions?
Microinteractions (MIs) are small, instant animations that serve a single purpose during user action points. All sound a bit too technical? 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.
Microinteractions vs Prompts
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.
Source: Md. Rayhanul Islam
Microinteraction Examples:
- Scrollbar
- Pull-to-refresh animation
- Digital alarm
- Swipe animation
- Email notification
- Button – if there is feedback when the button is clicked
Why are Microinteractions Important?
Microinteractions can improve user experience by:
- Guiding users
- Providing feedback
- Increasing and encouraging engagement
- Showing system status
- Communicating brand personality
What are the 4 parts of a Microinteraction?
- Trigger
- Rules
- Feedback
- Loops and modes
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.
Source: Sidharth Pratheep
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 in web design
The first few seconds that a user spends on your website can make or break their visit, and therefore their chances of converting. Effective microinteractions 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 microinteractions 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.
Microinteraction Design and Implementation
The responsibility for the design and implementation of microinteractions on your site is split between your web designer and your 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.
Microinteractions FAQs
Which is the most useful element of a microinteraction?
Feedback during the microinteraction helps to keep the user informed on the status of the input. This can include an alert if something is incorrect or if certain conditions have not been met. This can include actions such as creating a password.
What are the benefits of microinteractions?
Microinteractions can improve user experience by helping to guide users, providing feedback and showing system status.
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 microinteractions 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 microinteractions in conjunction with great content and good SEO practices. Discover more about what to consider when redesigning your website in our guide.
Yellowball is a London Based Web Design Agency! Contact us to discover more about our services.
