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.

TL;DR of the session, broken down to (1) tools, (2) examples, (3) good practices (4) use cases

What are Micro-interactions?

My skewed perception of micro-interactions was initially limited to fancy animations and cutesy brand personalities.

Upload /via Colin Garven

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.

Slack — When entering a hex code in a message, the color corresponding to the hex will render inline with the text. /via Samihah

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:

Brand Perception

Personality
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

Product differentiator
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.

Data Collection

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!
IMDb — Shows movie quotes on its 500 error page. /via Little Big Details
  • Facilitate learnability through subtle instructions and prompts
Twitter for web — When you tab across buttons to the ‘Tweet’ button after typing it, it tells you you can do the same hitting ctrl+enter /via Little Big Details
  • 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.


Takeaways

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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.