Microinteractions: Make Your Systems Delightful & Effective

“The details are not the details, they make the design.”
Charles Eames

What are microinteractions?

Microinteractions are a small piece of functionality. They are a use case boiled down to a single moment, focused on a single task. Microinteractions provide delightful visual feedback, making the interface feel smoother thanks to the transitions.

The difference between a product you love and one you just tolerate is often how you interact with it. One of the most famous microinteractions is the Like button on Facebook, and this article by Geoff Tehan shows how much thought went into the recent changes to this button.

A good practice is to try to treat everything as a microinteraction

Where and how

There are a lot of potential opportunities for microinteractions. Where and how we implement them is basically defined by the specific needs of the interface.

Examples:

  • Accomplishing a single task
  • Managing an ongoing task
  • Viewing or writing a small piece of content (i.e., status message, comment)
  • Connecting one device to another (i.e., computer to phone)
  • Uploading and downloading
  • Notifications
  • Switching on/off (features, functions, or the entire UI itself)
  • Social media sharing
  • Pull-down and hidden menus
  • Showing changes (i.e., an animation to show the Play button changed to a Pause)
  • Highlighting calls-to-action
  • Adjusting setting preferences or continual elements (i.e., volume)
  • Preventing user error

Structure

When we talk about microinteractions we have to mention Dan Saffer (Interaction Designer). He explains that an effective microinteraction follow the following structure:

Trigger

The trigger is the starting point, it is whatever initiates or motivates a microinteraction. Pushing a button is a trigger.

An important aspect about triggers is that the more frequently the microinteraction is used, the more visible it should be. The best triggers are those that launch users into the actual interaction: the rules.

Rules

Rules are what happen when a user triggers the microinteraction.

They determine how the interaction works. Basically, rules are what the microinteraction does. For example: if you push the button of a lamp, the lamp turns on.

Rules must reflect constraints. Business, contextual, and technical constraints must be handled. Do not start from scratch. The most prominent default should be the action that most people do most of the time.

Feedback

The feedback is the verification that you get from the system. In other words, it is the indicator of the result of the microinteraction.

An important aspect of the feedback is that we must understand what information the user needs and when. All feedback relies on this understanding. Also, it is important to use common UI elements to provide feedback messages. Do not make feedback arbitrary. Link the feedback to the control and/or the resulting behavior.

A typical example of a microinteraction feedback is a progress bar

The feedback should not always be visible, it can also be a sound. 
Another important point is to always try to speak human language.

Loops & modes

Microinteractions are brief in nature, and they must be designed for repeated use.

The loops are considerations about how the microinteraction is reused, including how long it lasts and how it changes for different uses. Use loops to extend the life of a microinteraction.

Modes

Most microinteractions should be mode-free, but sometimes they are necessary. If you must have a mode, make it its own screen when possible.

Examples

Tooltips

Switch controls

Hidden navigation

Contextual alerts

Yelp reminds us that today is a holiday and hours might be affected

Delightful details

Uber cars looking scary during Halloween

This article is inspired in Dan Saffer’s speak session Microinteractions: Design with Detail at the UX Lx Conference.

Other sources: UX Pin, Dribbble

One clap, two clap, three clap, forty?

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