Microinteractions – All you need to know

Design, Interaction Design, Opinion, Top tips, UX

Microinteractions

I recently attended a workshop from the inimitable Dan Saffer on Microintactions; a little corner of interaction design that he’s made his own.

Microinteractions have been nicely described as “contained product moments that do one small task” (ref Nick Babich).

Here’s a more visual example from an app we designed at RMA called Kids Sleep Doctor.

 

This app was designed to allow parents whose child has sleep disorders to easily keep a ‘sleep diary’.  The thing is when you’re surviving on next to no sleep and have only just managed to get your kid to sleep again – the last thing you want to do is struggle with a fiddly mobile input form.  So we created a new microinteraction to allow people to easily paint time with a simple gesture.  Sounds simple… but getting it right took a lot of work.  Such is the world of microinteractions.
Anyway… to get back to Dan Saffer.  I enjoyed the Microinteractions workshop; I wanted to use what I learned in my daily practice, so I went on to read the book: Microinteractions: Full Color Edition: Designing with Details

And while it’s great an all… I do have a bit of a grumble.

I can’t help but think that, like so many UX books, a lot of content here is essentially time honoured UI design best practice with a shiny new title.

Don’t get me wrong, I am totally behind Dan Saffer’s call for us to Focus on the Details, to realise that it’s often the signature moments in the experiences we design that make the real difference.

But…well I just don’t think it’s quite enough goodness to fill a whole book.

So… cheekily, I thought I’d compress all the goodness into this post

Here goes…

The Microinteraction design approach

Dan Saffer’s approach is essentially focused on the Rules of the micro interaction.

  • You start by writing down the basic rules.
  • You then do another pass refining, and perhaps diagramming them if they have a lot of conditional complexity.
  • As you refine, consider the Triggers, the Feedback, and the Loops and Modes.  Keep in mind the principles for each of these, to craft a powerful and compelling set of behaviours.

Rules

The rules are (generally) an ordered list of statements that describe how the interaction operates.

  • Start with a clear statement of the goal.
  • Think about the ’Nouns’ (the objects) ’Verbs’ (the actions).  These are the atomic elements of your experience.
  • Define the states for your objects.

Principles for Rules

  • Don’t start from zero – Use what you know about the user, platform or environment.
  • Remove complexity – reduce controls. do more with less.
  • Reduce options, use smart defaults.
  • Prevent errors.

Triggers

Triggers are what initiate the microinteraction. There are manual triggers (e.g. buttons) and system triggers (e.g. errors, location etc).

Principles for Triggers

  • Design affordances that are recognisably Triggers and have predictable, consistent effects.
  • Bring the data forward, into the trigger UI.
  • Prioritise trigger placement based on likely usage.  Consider using rules to hide them until needed.

Feedback

Give feedback to communicate the rules, particularly upon triggers, errors and state changes.

Principles for Feedback

  • Be human.  Give the feedback personality.
  • Use the overlooked.  Leverage pre-existing UI elements for feedback.

Modes

Modes are a fork in the rules for the interaction, where none of the previous actions and nouns apply (e.g. settings).

Principles for Modes

  • Avoid modes.  But use them for infrequent interactions that would otherwise create clutter.
  • For rapid actions create ‘spring loaded’ modes (e.g. via a modifier key).

Loops

Loops in the interaction determine the interaction’s pace. You can loop based on counts (e.g. password attempts), conditions (e.g. network availability), or items in a collection (e.g. unread mails).

Look for long loops to:

  • Give the interaction a memory, to add value during successive interactions (e.g. recent searches)
  • Progressively disclose or simplify over time.