Dan Saffer on the Importance of Microinteractions

At Digital Telepathy we value artisanry. We aspire to infuse each and every pixel we design with meaning and craft. This means paying attention to the details; the small stuff that makes a big impact.

You can see several examples of our obsession over at Filament, an open community we’re developing with the goal of taking great ideas from the concept phase all way through to completion. All with a simple yet lofty goal of making the web a better place.

Naturally we’re always on the lookout for likeminded people and every once in awhile we’re able to discover and connect with others on the web who have the same or similar values. Dan Saffer is one of those people. He’s taken his own obsession of “sweating the small stuff” and developed a precise language for expressing the importance of those details. In fact, he’s written a whole book about it!

Dan calls these details Microinteractions; contained product moments that revolve around a single use case. Examples include adjusting the volume on a music player, turning a feature on or off, adjusting a setting, accomplishing a task, etc.

Because we feel so strongly about creating memorable experiences through design, we recently reached out to Dan via email and asked if he’d share some insight with our community.

Dan Saffer on the Importance of Microinteractions

Jared Spool called Microinteractions “design at the atomic level,” what does that mean?

Over the last decade or so, designers have been extolled to think big and take on these massive, systemic problems. But if we ask, “What’s the smallest thing I can affect?” it’s going to be something like microinteractions: tiny pieces of functionality that do one thing and (hopefully) do it well. Microinteractions can be as small as a sound, a single phrase of text, or an animation. Small stuff…but very important. Like atoms, the small stuff all adds up.

When designing Microinteractions what are the cardinal rules, or things you have to think about to be successful in creating those that matter?

I outline a lot of them in the book. A few key ones are these:

Don’t Start From Zero. What do you know about the user, the context, or the platform that can change the product for the better? You almost always know something, and with some effort, you can know more, especially behavioral data so the product can adapt to use without resorting to manual settings.

Bring The Data Forward. What information is inside the microinteraction that you can pull forward so that users can see it at a glance? Why do I need to go inside my weather app to see what the temperature is?

Speak Human. Feedback is for human beings, so address them as such. Use the words your users use.

Use Long Loops. How does your product adapt over time? What’s it like when the user comes back tomorrow? Or the 10th time? Or the 1000th time?

Where does Microinteraction ideation and design occur in the overall design process?

It varies. Sometimes, it’s really easy to find them at the beginning of a project. For example, a music player is probably going to have a volume control. You know that right from the start. It can either be standard and nondescript or you can spend some time designing it. But others appear later in the process, sometimes during testing and development, when you discover there’s something missing, or that you can make a piece of functionality better. Animation is an example of this. You can really only get the timing of animation right once you start developing it and trying it.

What are some Microinteractions that are often neglected, but that could make a real difference if they received the attention they deserved? Where does it make sense to dial in Microinteractions? Are there some experiences that are more important than others?

Pretty much every microinteraction you can think of is neglected. Log in, settings, on/off buttons…you name it, they’re neglected. Often because those are the last things we design. The trick—the strategy of microinteractions—is to figure out which of these SHOULD get some attention.

Like features, you have to prioritize. Some microinteractions are going to be forgettable and under-designed, while some you might want to be what I call Signature Moments: microinteractions that are heightened so that they become part of the brand. Think of Facebook’s “Like” or Microsoft’s “Start” button. These are microinteractions that can be marketed, that increase adoption and customer loyalty.

In Conclusion

Hopefully this short Q&A was a good introduction to a term and ideology we plan on exploring more here. I know I plan on picking up Dan’s book and digging into a more nuanced study of the subject. What about you? Do you find the emphasis on small details as important as we do? Tell us all about it in the comments below!

Author Recommended Reading

Hi, I'm Nathan B Weller. I spend my time living and working at the intersection of web design, UX/UI and digital publishing. If you'd like to connect with me please feel free to hit me up on Google+, Twitter, Facebook or even my personal site. I'm here to help you get the most out of our blog and online resources so don't be afraid to start a conversation :)

7 Responses

Great insights. I have used the term microinteractions for years. The most widely used microinteraction is the Like button. In an increasingly mobile society where design ans ease of use is critical, microinteractions will play a more prominent role. everything is becoming a tap away and microinteractions will play an ever increasing and important role. Nice work and chalk this up to another book sold.

I’m considering some type of regular Google+ Hangout or Broadcast to discuss books/resources like this that come up in the course of blogging about design and UX/UI. Would you be interested in something like this?

Best,

Nathan

Jun 12 2013

fermata

Nice article! I eslecially love the bits about bringing data forward. This really forces you to think about who your users are and what brought them to you. I think several microinteractions get ignored/overlooked because its not original or unique to the project. This forces us to think about how they play a part in the entire experience, and making it a good one for the user. Good stuff. I’m going to have to hunt down this book!

Thanks Jason! I think there’s some interest here among the commenters to go through the books (and future books) together(ish) via some Google+ hangouts. If we’re able to put that together in the near future should I drop you a line?

Jul 03 2013

David O’Callaghan

Hi Nathan,

Great post, I noticed you mentioning the Google+ hangouts in the comments. Would you be able to let me know if you get these set up please?

About the Blog

The goal of this blog is simple: promote the betterment of the web through design and craft. We focus on betterment because we've seen first hand that innovation and improvement can have a powerful and lasting effect. Read more...

Join Filament

Join a growing number of innovators who are collaborating with us on new products that make the web a better place.