Designing for Micro-interactions
As part of UX Singapore MeetUp #20, I posted (and eventually hosted) the topic “Are micro-interactions important?”. As a young UX designer, I am fascinated by the intricacy of micro-interactions. On a larger scale, I’m curious how firms and products consider them — how they tie-in with business and user goals, while keeping in mind the extra time and effort when designing for small details.
The discussions left me with a greater appreciation for what micro-interactions are, why they are integral to the user experience and tips on how we should be designing for them.
What are Micro-interactions?
My skewed perception of micro-interactions was initially limited to fancy animations and cutesy brand personalities.
There’s definitely a lot more to it.
Essentially, micro-interactions are contained product moments that revolve around a single use case. We perform such interactions everyday — from snoozing an alarm, to adjusting the volume of a Youtube video.
One way to think of how micro-interactions work is through the 4-step framework by Dan Saffer: Triggers, Rules, Feedback, Modes and Loops.
Micro-interactions are simple and integral, yet invisible to the user. Therein lies its magic — through conscious design and attention to details, we can influence the user experience in a subtle, yet significant way.
Little Big Details is great inspiration for such easter eggs from the products we love.
Why are micro-interactions important?
Thankfully, all of us came to a consensus that yes, micro-interactions are important. But how do we get buy in?
Apart from delighting the user, I was pleasantly enlightened about the direct impact that micro-interactions could have on business goals as well. Some of the reasons cited include:
Amongst the many products out there in the market, micro-interactions allow for a brand to stand out. By spending effort on personal touches, it gives identity, increases adoption and promotes brand loyalty. It keeps users coming back!
“The difference between a product you love and a product you tolerate is often the micro-interactions you have with it.”
— Dan Saffer
E.g. Slack’s ability to add custom emojis adds a layer of delight — being able to create emojis for everyone in the office is one of the many tools that makes Slack a favourite amongst team collaboration tools.
Useful data can be gathered based on micro-interactions that increase engagement e.g. Facebook has built an insight dashboard that analyses data based on ‘Like’ (and share) buttons. What was originally a micro-moment of casual affinity is now also a gold mine for market research and engagement tracking.
Improves User Experience
Micro-interactions are key to UX. A good framework to follow is LEMErS (Learnability, Efficiency, Memorability, Error Management, Satisfaction).
Here are some examples highlighted during the session:
- Translate a frustrating moment to a delightful experience
E.g. error and loading states. These are also prime opportunities to push brand personality!
- Facilitate learnability through subtle instructions and prompts
- Visibility of system status
E.g. A recent update from the Paypal team involved a redesign of the call-to-action button for making payments. With a simple PAY → PAID transition, it provides the user with greater assurance and trust in the transaction service.
Good Practices of Micro-interactions
Here are some tips gathered:
Work Closely with Developers
Developers help designers in understanding technical challenges and constraints, as well as estimating the amount of time and effort needed. Luke mentioned how while working in Yahoo, he experimented and prototyped a small feature with a developer, to minimise friction when proposing a design change/tweak.
Keep in Context
Always keep micro-interactions in context to the task at hand, while ensuring a smooth flow. The use of affordances also help!
Use Existing Interface Elements
A good micro-interaction integrates seamlessly with existing interfaces.
Be Cautious of Page Bloat
Many micro-interactions involve animations, which may lead to greater bandwidth. It’s important then to consider loading speed and how it may affect your design.
Micro-interactions are part and parcel of a user journey. It’s great to know that designing for micro-interactions may often involve more user research and insight, than developmental effort. Empathy, personal touch, as well as adherence to existing design guidelines are good practices to follow to achieve great designs and business success.
To those who participated in this session, thanks for sharing your experiences and opinions!