Micro-interactions are everywhere. We use our phones and computers daily – for scrolling through articles, swiping on Instagram, or reacting to posts on Facebook. Most of us don’t realise that we’re engaging with micro- interactions just by performing these trivial tasks.
What exactly are micro-interactions, and why are they important?
Micro-interactions are any small moments where the user and design interact. They’re what the user sees, feels or hears. They make it easier for users to interact with websites, encourage likes, shares and comments on content, and keep everything just a bit more human.
A micro-interaction may be a sound effect after performing an action, like the sound on a chat window on WhatsApp after sending a message, or a subtle animation after double-tapping to like a picture on Instagram. These design elements serve only one purpose: to make the user experience as engaging, delightful and natural as possible.
Standard micro-interactions like scroll bars tend to be easier to design visually than their ‘innovative’ modern counterparts (such as pull-torefresh elements). It takes more thought and effort to create a straightforward, well-designed user experience with the new microinteractions. That’s why good ones are valued so much. They allow a user to immediately understand what to do and whether their action was correct and approved by the system.
What makes it effective for audiences?
There are four parts of effective micro-interactions:
A trigger initiates interaction with a user. It should be something visible that a user can easily interact with. For example, if you want to wash your hands with a sensor tap, you wave your hand over the sensor.
Rules determine what happens once a micro-interaction is triggered.
Feedback is the verification of the micro-interaction. Sticking with the tap example, the tap starts running once you wave your hand past the sensor.
Loops and modes is the final step. It determines the meta-rules of the micro-interaction. If the micro-interactions need to be repeated, then it will loop – like a refrigerator alarm that won’t stop beeping until you close the door. Or it can change when used repeatedly. For example, in e-commerce, a ‘buy it now’ button might change to ‘buy it again’.
One app that consistently delivers great micro-interactions is Instagram.
Pull to refresh feature
On the home page, I know to use ‘pull-to-refresh’ without unnecessary signposting, as it’s a common interaction on most smart devices and apps.
Saving posts to the collection
When I see a post that I want to save to my collection, I click the bookmark icon beneath the post. It fills with colour, and the movement of the thumbnail temporarily stops, which attracts my line of sight. I instantly know my micro-interaction was successful and the post is stored beneath my profile screen.
Indicator in Stories
When I view a story, depending on how many stories are posted by the user that day, I see an indicator that follows a lateral movement, informing me how long each individual story is, and how many there are.
‘Liking‘ a post
Double-tapping on a post will initiate a ‘like’ with a big, animated heart.
‘Quick Emoji Reactions’
Instagram also introduced ‘Quick Reactions’ when viewing stories to show people how you feel about certain content. The choice of reactions is limited to a set of 8 emojis, and feedback comes in the form of an emoji which animates on screen. The person on the other side will receive a notification and the same animation will appear when they open the message.
Swiping through multiple photos
There are indicators for swiping through multiple photos in a single post. The indicator fits into a fixed width and implies there are more images by gradually decreasing the size of the dot.
How we approach micro-interactions at Six
We believe in unlocking the way people think, feel, and act, helping organisations connect with people on a more human level. We want to make that possible through every product we produce.
As humans, we’re hardwired to seek instant gratification. Although it’s easy to overlook micro-interactions, they’re a very important tool for getting your users hooked. Attention to detail is what elevates an exceptional website above an ordinary one, and small experiences and design features – like toggling between screens, or highlighting a feature, or popping a new notification – can make a huge difference in enhancing user experience.
As designers at Six, we create with care for the users, taking into consideration how people work with and use their devices.
Micro-interactions are vitally important to every app, website, and device. Well-created micro-interactions make the user experience smooth and enjoyable – and offer opportunities for moments of delight. In 2022, it’s safe to predict users will want more and more delight from their interactions. Give it to them by paying attention to the details, sweating the small stuff, and never missing an opportunity for a great micro-interaction.