Microinteractions: why details matter

Dan Saffer
Dan Saffer
April 15, 2014

The best products do two things well: features and details. Features are what draw people to your product; details are what keep them there. Microinteractions are those details. Details are a delivery system for emotions. They are the “feel” part of “look and feel.”

Microinteractions are the contained product moments that do one small task. Whenever you mute your phone, rate an app, or set a status message, you are engaging with a microinteraction. They exist around and inside of features, in every app, website, and appliance. They’re often overlooked unless something goes wrong or something works surprisingly well.

And if a microinteraction does work surprisingly well, it can become a Signature Moment. Signature Moments are microinteractions that have been elevated to be part of the brand. Facebook’s Like is a famous example, as is Microsoft’s Start button and Google’s “I’m Feeling Lucky.”

The Microinteractions Model

Microinteractions have four parts: a Trigger, the Rules, Feedback, and Loops/Modes. The Trigger is what starts a microinteraction. This can be a manual control, such as when a user clicks a button or an icon, or it can be the system trigger that goes off when a set of conditions has been met. Every time a text message arrives and your phone vibrates, that’s a system trigger.

A trigger engages Rules. Rules determine the flow of the microinteraction by defining the sequence of events, as well as what can and cannot be done when you’re playing the microinteraction “game.”

Since Rules are invisible, users understand them through Feedback, the third part of microinteractions. Feedback (and the lack of feedback) is how we understand the Rules and how the microinteraction works.

Loops and Modes are the last part of microinteractions. Modes should only be used when there is a critical but infrequent action that would otherwise disrupt the flow of the microinteraction, such as picking your city to get weather data. Loops determine how long the microinteraction goes on for, if it repeats, and how it changes over time.

Principles for Designing Details

There are some handy guidelines to keep in mind while designing microinteractions.

Don’t start from zero. You almost always know something about the user, the platform, or the context, and that knowledge can make your product better.

Bring the data forward. Determine what information is inside your product that users might be interested in, then design how that information could be shown (usually in the manual Trigger).

Prevent human error. Don’t allow (or better yet, fix) actions that would break the microinteraction.

Use the Overlooked. Why add one more thing on screen? Use what is already there—the cursor, the scrollbar, a dial, a button state—to convey feedback.

Speak human. Talk to people how they expect to be spoken to: as human beings. If your users use technical jargon, use it back. But otherwise, speak to them simply and directly.

Long Loops. Adapt your microinteraction over time. Long loops can stretch your microinteraction into the future, asking you to consider what happens when the user returns the second time, then 10th time, or the 1,000th time.

Download the Microinteraction Quick Reference Guide to help remember the principles.

Why Businesses Should Think Small

Microinteractions don’t often get a lot of attention, from consumers or companies, which makes sense because no one uses an app to enjoy changing settings. But ignoring this so-called “product hygiene” is a mistake, especially in competitive marketplaces. The difference between products we love and those we simply tolerate are often the microinteractions we have with them. A well-designed microinteraction can increase adoption and customer loyalty by taking what could be dull and difficult and turning it into something enjoyable. If you care about user experience, you should care about microinteractions.

Since the book was published, we’ve had many great discussions on the importance of microinteractions. Please view two of our Smart Salon panel discussions below.

Buy the book