Microinteractions: Designing with Details

by Dan Saffer

It’s the little things that turn a good digital product into a great one. With this practical book, you’ll learn how to design effective the small details that exist inside and around features. How can users change a setting? How do they turn on mute, or know they have a new email message? Through vivid, real-world examples from today’s devices and applications, author Dan Saffer walks you through a microinteraction’s essential parts, then shows you how to use them in a mobile app, a web widget, and an appliance. You’ll quickly discover how microinteractions can change a product from one that’s tolerated into one that’s treasured.

Genres: Design, Nonfiction, Business, Technology, Psychology, Programming, Usability

170 pages, Paperback

First published June 3, 2013

About the author

Dan Saffer is a product design leader and the author of four books: Designing Devices (2011), Designing Gestural Interfaces (2008), Designing for Interaction (2006, 2009) and the best-selling Microinteractions (2013).

Reviews

[Karen Mardahl · Rating 4 out of 5]

This is definitely going on my "recommend to all my developers" list. It is a book that they should all read. As should all in UX or technical communication.

In fact, this book is going to achieve the same fame for me as The Inmates are running the asylum. With Inmates, I run around shouting "apologist" to anyone who takes a shortcut and dumps a guilt trip on the user, claiming that the software is always right. Now, I will do something similar with this book. I will start to see microinteractions everywhere I go. In fact, I experienced microinteraction issues while reading this on my iPad. I decided to buy the The Craft of Words: Part Two: Microcopy from Five Simple Steps because of a trigger in this book. That buying experience was very smooth. Getting it into iBooks on the iPad was less so. Getting the part one of that book (Macrocopy) from my other computer onto the iPad was also problematic. I had a goal, but I lack assurance along the way that the system was fulfilling my wish. I kept having to tell the system what hoops to put in place so I could jump through them. That is not the idea! I also recalled a friend's tale of a fancy ventilation system in place over her stove. After she cleaned it the first time, an alarm on the vent went off at odd hours of the day or night. This went on for ages until she solved the problem by basically hitting lots of buttons again and again until it shut off. We had even tried searching the internet for a user manual for these settings, but it didn't exist. So yes, the viability of this book is easily proven. :)

I liked adding the words geon and poka-yoke to my vocabulary. They role nicely off the tongue and will be fun to flaunt in meetings. :) Geons is basically about our own recognition of patterns. Not an easy word to toss into a conversation, to be honest, but fun to consider. Poka-yoke comes from the world of lean and is about "mistake proofing". That is, helping users avoid mistakes. You do this by ensuring that some step is fool-proof. That is a worthy challenge to take up!

Saffer goes through the anatomy of a microinteraction (triggers, rules, feedback, loops) and provides plenty of examples for explanation and inspiration. The book is easily read on a lazy Sunday afternoon and then kept handy for future reference.

One issue I had with the book was the examples. A paragraph would explain something and contain a link to a given figure. Fine. Around the middle of the book, the figures did not match the text as I expected it to. In one case, he discussed a problem in a microinteraction in Photoshop, but the example in the figure was in a Microsoft problem. In technical communication, we talk about expectations with hyperlinks. When you click hyperlink A, you expect to land on something about A. For example, the link text reads "how to crop an image". You click that link and expect the page you land on to be titled "how to crop an image". If you land on a page titled "tips and tricks" or "advanced editing of images", you are uncertain whether you landed in the right spot. You might hop back and forth before you are sure all is well. I had that happen here. The figures that jarred me were additional examples, but the spartan link of "figure x-x" led me to believe I would see the exact thing just discussed. I found entirely different examples and had to work hard to ensure they were indeed alternate examples of what was discussed. In a couple of cases, I could not do this. I simply wrote off the example. I even checked oreilly.com to see whether the book had errata, but there was nothing. This violates the idea Steve Krug pushes: don't make me think. I expected the reading to flow, but some of the figures caused me to stumble and slow down. A simple text like "figure x-x shows additional examples" would be all I needed. In other words, the use of hyperlinks to figures was sometimes bad microinteractions in action.This was enough to knock 1 star off my rating.

Speaking of links, the links in the digital edition of the Index were styled nicely. Instead of the item just just being hyperlinked, the sections in which the item appeared were listed. They were the hyperlinks. They took you straight to where the item was used. Nice touch from O'Reilly.

I was intrigued by this book some time ago (I forget who and why, etc.). Today, I read it for the upcoming meeting of my local UX book club. I look forward to our discussion.

[Mikal · Rating 4 out of 5]

Microinteractions is a great example of how to write a book. It takes a topic, focuses on the topic and doesn't try to cover knowledge outside of its scope.

To get value out of microinteractions you must first agree with the premise: microinteractions are not features, they are "a contained product moment that revolves around a single use case — a tiny piece of functionality that only does one thing". Vague? Yes. But it's clear on a spectrum from scenario to interaction; at somepoint a scenario becomes a feature and a feature becomes an interaction and an interaction becomes something less than an interaction. Dan Saffer refers to these as microinteractions and they encompass everything from logging experiences to silencing your iPhone (which Saffer covers in depth within the book but never quite resolves).

Assuming you agree with this premise (which I do), Saffer takes you on a focused journey of the components of what a microinteraction is made of and how to construct a microinteraction. Here is where the book really shines. Saffer clearly has thought about the details of a microinteraction and the book flows like a well constructed talk or seminar about how to craft signature experiences.

Many a UX practitioner speaks of signature experiences, moments of truth and 'delta moments' (from the book Habit: The 95% of Behavior Marketers Ignore) but we speak in generalities that are never broken down into the core components, or focused as something that can be solved for. Microinteractiosn changes this.

Breaking these experiences into the triggers, rules and feedback that create them. Further as a book for user experience practitioners he at the end provides thoughts on how to user research test microinteractions. Additionally Dan's efforts to walkthrough his framework with three examples at the end are commendable. While I would have preferred he show screenshots of his design example and in his example focus more on the 'process' of designing the microinteraction as opposed to the outcomes (for example we researched blah, and had a meeting where we decided Y; vs. for triggers lets say we do X and for rules lets say we did Y).

In the end Dan Saffer comes as close to providing a out of the box usable framework as any author I have read. Indi Young's Mental Models and Donna Spencer's information architecture are other books that standout for their focus on application in practice.

[Graham Herrli · Rating 3 out of 5]

This book is full of common sense advice. Be brief. Be consistent. Keep things simple. Yawn frequently. (That last one was my reaction, not actual advice from the book.)

A refrain repeated throughout the book is "don't start from zero." Microinteractions are about using the bits of information you already have about users to provide a more personalized interaction, such as using a device's location and a weather API to customize entertainment search results based on local weather.

Saffer also repeatedly emphasizes the importance of bringing data forward and of attaching additional information to often overlooked interface elements. For example, you could show the current temperature on a button used to launch a weather app.

Some other things this book says are:

*It's a good practice to place the status of a trigger on the trigger itself (p. 38). For example, show how much of a song has played on the play button itself (39) or show the current weather when hovering over an icon that launches a weather app (37).
*Tesler's Law of the Conservation of Complexity states that each activity has an inherent complexity. The complexity can be handled by the system or the user. It's best to err on the side of handling complexity within the system at the cost of taking control from the user (67).
*By constraining interaction so that a user cannot do anything wrong, you should only need to present error messages when the system itself encounters a problem (75).
*Feedback is a good element of an interaction to add a bit of personality too, but adding too much feedback may push the application toward the uncanny valley (95).
*Mode switches can cause confusion, but "spring-loaded" modes (which require a continuous physical action to maintain) and one-off modes (which switch back after completing a microinteraction) are quick ways of changing functionality without causing confusion (113-4).

[Davy · Rating 4 out of 5]

It's very reassuring to know that most recently in the past few years, I've been paying more attention to the lesser glamorous portions of my job, designing and improving interactions and designs little by little. UX becomes aware to me all the time, whether it's how my alarm clock works or how we can improve this review form I'm currently typing in right now.

I enjoyed the large range of screenshots and footnotes for further reading. One of my favorite things is the portion about Loops and Modes (Ch 5). It really does put into perspective how difficult our jobs as UX designers can be. Breaking down these smaller designs into frames and states that are logical and painless does equal delight, and hopefully users recommending your product to friends. The section regarding "Putting it All Together" also stuck out to me in regards to explaining how real world appliances utilize triggers > rules > feedback > loops.

[Camilo Metaute · Rating 4 out of 5]

Muy buen libro, profundiza muy bien en los tipos de microinteracciones, normalmente en artículos y demás las microinteracciones se ven como elementos con mucha animación y con este libro se aprende a verlas como elementos más simples, que tienen una función y lo que más me gustó fue que desgranan los detalles de interfaz para aprender a pensar más granular, algo que llaman a través de los capítulos: "Think small". Recomendado.

[Ran · Rating 4 out of 5]

Very interesting framework dissecting a micro-interaction in design. It's a really high-level book with lots of real-life examples to explain the guidelines and concepts. REALLY enjoyed the examples. Two biggest takeaways for me are: bring data forward and don't start from zero. Recommend for all fellow interaction designers if you like to put some system thinking around your designs.

[Heatherlee Nguyen · Rating 5 out of 5]

This book is now one of my favorite design books. Without over-explanation Saffer does a good job of defining microinteractions as we see them today, the good and the bad, with real-world scenarios and visuals to drive the point.

All too often we think about the grand experience of whatever we're building, and this book does a great job of reminding us to 'design with details,' that every tiny experience is greater than the sum. When you read this you will shake your head in agreement.. you'll think about your current projects and what you've forgotten about or overlooked. It provides a great framework for new discussions and thought processes. I really enjoyed reading it even when I could only read 3-4 pages at a time, it was time well spent. I found myself applying what I had learned each day in my work.

I highly recommend this book to UX practitioners and designers. Microinteractions is filled with practical advice that resonates with you when you put it down. If you want to push your work.. if you are passionate about the end user, give this book a read for inspiration and validation. It's a fast, enjoyable read.

[Stringy · Rating 4 out of 5]

Microinteractions is one of my favourite type of design books: one that avoids the extremes of dogma and fuzzy platitudes to find a practical middle ground.

There's no hard and fast rules for designing the little mini-interactions that we deal with each day, like volume controls or star ratings. But there are best practices, and doing it wrong can lead to worse consequences than just annoying a few customers.

Saffer provides a process you can use to make sure you've thought of everything, backed up with a fair bit of research. I'll definitely be following it next time I've got a few microinteractions to work on. I particularly liked the advice on microcopy, which has previously been a problem for me.

Visual and interaction designers should definitely give this book some attention.

[Justin · Rating 3 out of 5]

It's a fantastic book filled with rich examples of craftsmanship in product and interaction design. He establishes a lexicon and process around which one can define such details in product design. Still, it hits a level of marketing gimmick in its existence, a need to coin a term that does not need to be coined. Craftsmanship is craftsmanship. Recommended reading for all designers, and probably of greater value to those starting out in the field. I can see it providing most value to people unable to deconstruct the experiences they find elegant / clever / thoughtful and helping them learn to make such decisions themselves.

[Jess · Rating 4 out of 5]

I consider this a 102-level book about interaction design. It’s not a 101-level introduction. It’s also not as advanced as I thought it would be.

What I appreciate most from the book is the many examples the author uses to illustrate effective (and ineffective) micro interactions. I dog-eared many examples for later reference.

[Parhum Khoshbakht · Rating 5 out of 5]

This book include good example of Microinteractions that inspire readers.
I wrote about this book in my blog: https://www.goodreads.com/book/show/1...

[Livinda · Rating 5 out of 5]

It was a pleasure to read the content and have an in-depth understanding of micro-interactions explained in detail. It is well-written, well-structured, and well-organized. A number of good examples of micro-interactions are provided by the author as well.

A great micro-interaction design requires understanding the people who use the product, what they aim to achieve, and how they need to proceed in order to achieve their goals, according to the foreword by Don Norman. It requires understanding the context of those interactions.

My favorite parts are designing rules and feedback. Before designing the rules, you need to determine in the simplest, clearest terms what the goal of the micro-interactions is. The rules determine:
- How the micro-interaction responds to the trigger being activated
- What controls the user has (if any) over a micro-interaction in the process
- The sequence in which actions take place and the timing thereof
- What data is being used and from where
- The configuration and parameters of any algorithms
- What feedback is delivered and when
- What mode the micro-interaction is in
- If the micro-interaction repeats and how often
- What happens when the micro-interaction ends

This book is an invaluable resource for all fellow designers and practitioners so that they can have a better understanding of micro-interactions.

[Sean Savage · Rating 5 out of 5]

Useful points, well thought out, structured and presented.

A quibble: I thought the author didn't do haptic feedback justice – he focused on how limited the range of touch feedback that humans can perceive is vs. the range of visual and auditory feedback we can perceive.

But this seems to focus on a single physical *point* of feedback, which overlooks how we can discern touch across many points of our bodies – which isn't true for sound or light. So for example: A steering wheel or handlebars might convey haptic signals to the right and left hands to indicate an upcoming turn or to warn about an obstacle. Haptics, there, might work better than just sound or light (which can be drowned out by the sights and sounds of traffic, and – worse – can distract the user from paying attention to those sights and sounds).

If you have any doubt there's an *ocean* of overlooked opportunity in the realm of designing for touch, please read http://worrydream.com/#!/ABriefRantOn...

Anyway, that was a tiny portion of the book and overall it's useful stuff.

[Sora]

I loved this book, easy to read and a lot how to organize ideas and improve a product. For me, the details were always the priority when developing a software. They can enhance the user experience but if your design is not well done, it can be a mess. And the most important I learned from this book and makes me feel very satisfied is to let the micro-interactions be the last part to do when you are developing. Even though I knew that fact beforehand, it was until I read the book that I realized that I was not wrong caring about the details but I was really bad focusing on that over structuring the project, even if it was not polished. It motivated me to implement the techniques described in the book and it had given me a better performance in my work. Quiet interesting thing is that these techniques can be applied even when I write the documentation!!!
This is really worth reading by any professional, not only from IT related industry. Key point is to be familiar with the concepts.

[Nick Wedd · Rating 4 out of 5]

"Microinteractions" is written as a guide for designers of user interfaces. It certainly has some useful advice for them. But I found it more interesting for its insight into the weird warped mind of such designers - or at least, of Dan Saffer, its author.

In chapter 1 the book gives an account of how the quiet movement of a symphony was ruined for its audience by the interruption of a mobile phone. The phone's owner thought that he'd turned it to silent. He'd found the button that silences it, and clicked it (and I assume that its appearance had changed accordingly). But the phone played its alarm anyway. I see this as a disaster in interface design. Saffer sees it differently, and agrees that "alarms still need to sound even when the ringer is turned off". I believe that if a "silent" button does not silence the phone, and does not make this clear to the user, the interface designer has slipped up badly.

[Tessa · Rating 4 out of 5]

4 stars: very solid book with lots of examples.

The information: the only thing that was really missing to me, was the difference between an interaction and a micorinteraction. Other than that, it was a good explanation of what a microinteraction is and the parts it consists of. It showed great examples that really explained what the book was talking about.

The readability: good way of writing, not really exceptional.

The structure: I liked the division of the information in sort of chronological order, it made it clear what happened. The chapters themselves were also quite structured. The only downside is that the book explained different 'principles of microinteraction design', but didn't make them stand out or provide a list or anything.

best part: the part about triggers is very interesting.

[Franti Saúl Huamán Mera · Rating 5 out of 5]

What a wonderful book!. I learned the importance of micro-interactions in the developing process of software. It takes hours (developing and testing them) but with micro-interactions we can generare more engagement on our users.

[Miguel Pinto · Rating 5 out of 5]

I totally recommend this read.
Dan walks us through a journey on how the details of micro-interactions are pivotal to the success of an application.
Most importantly he helped me to understand that good micro-interactions are important and we don't notice them, but we do notice their absence.

[Plop Cristian · Rating 3 out of 5]

This book is about fundamentals of good user experience design, especially micro-interaction - A core thing of success product.

[Thomas Cooper · Rating 3 out of 5]

Good for understanding UX design and terms used to build function into web apps.

[Tanya · Rating 5 out of 5]

I think this is one of the best books written on interaction design.

[Simon Langkjær · Rating 4 out of 5]

Plenty of useful ways of thinking about what goes into the design of interactions. Although a bit cluttered at times the concepts in this book work great individually.

[Sam Levatich · Rating 3 out of 5]

nearly exclusive use of images to highlight real world design snippets was charming

[Bea · Rating 4 out of 5]

Microinteractions. Effortlessness requires a rigour, and at the same time, a constraint.

[Emiel · Rating 3 out of 5]

An interesting read about the design of the smallest parts that make up all of our applications. Saffer explains the principles and rules for every microinteraction, and provides a vocabulary to talk about them. In the grand scheme of designing a large application, details like the ones described in the book are often overlooked, or deemed not important enough because of lack of budget or time. I believe the devil is in the details, and that having these details done right can contribute a lot to the application having a pleasant user experience (which entails more than just being easy to use), which will help with adoption.

The book does have a tendency to stretch the definition of a microinteraction, and call every interaction, or even a set of interactions, big or small, a microinteraction. It’s also a kind of messy read: important principles are only italicized and are often drowning in a big chunk of text, without their own heading, and are hard or impossible to find again using the table of contents or the index. I’m going to have to write a summary for this.

[Juanjo Fernandez · Rating 5 out of 5]

I'm going to talk about a book that will make you to pay special attention to details that went unnoticed for you on applications, web sites or gadgets you use every day.

These details are called microinteractions and Dan Saffer defines them as "tiny piece of functionality
that only does one thing".

An example given in the book is the case of silencing a phone: only offers one functionality, but you can do it in multiple ways.

Throughout the book you will learn the most important aspects comprising a microinteraction, which are divided between triggers, rules, feedback loops and modes.

To easily understand the concepts, Dan uses functionalities that you've ever used in your life or real news in which microinteractions has had a starring role.

Following the example of the functionality (or microinteraction) responsible for silencing a phone, this can have a physical button as trigger, some rules like the phone vibrates or not when muted, feedback as an icon in the status bar to indicate if enabled, a loop to cause the phone to remain silent until you tell it otherwise, and a mode to configure the microinteraction so that vibrates or not when receiving a message.

Once you know all these items individually, you'll see how they work together to provide a compelling user experience for the end user.

It's an entertaining and easy to read book. The concepts you will learn are useful for many different professional profiles. I'm sure that at the end of the book you will want to reuse some of your favorite applications or gadgets to discover which microinteractions have and you've been using usually without being aware of it.

You can find the book here: http://shop.oreilly.com/product/06369...

[Jenn · Rating 3 out of 5]

A good overview book, mostly software/web based.

[Shuan · Rating 4 out of 5]

"Microinteractions" - the tiny details of how a product or its user interface interacts with its user. These details differentiate between a good, useful product and a great, delightful one. The is a very cool topic to look into, and Dan has done a good job in starting the conversation.

Dan provides a framework for discussing microinteractions: 1) triggers, 2) rules, 3) feedback, and 4) loops and modes. Personally, I find this framework somewhat analogous to, but less well defined than, Don Norman's "human action cycle". Dan also provides several guidelines for designing microinteractions, such as: 1) bring the data forward and 2) don't start from zero. Simple ideas but often overlooked in design, and I appreciate that.

The book provides many interesting examples of well-designed microinteractions, which is what makes the book a good read. However, I do find some of the ideas and discussions somewhat weakly structured, vague, or verbose.

[Kars · Rating 3 out of 5]

My hope is that formally trained interaction designers know 80% of what's in this book. But it's the 20% that makes it worth picking up. Because as with the microinteractions Saffer discusses, the pleasures of this book are in the details. Passing words of advice, catchphrases and questions that are worth pondering and mentally filing for when next you sit down to figure out the details of an interactive product's design.

The focus here is on structure and behavior. Quite a bit of attention is devoted to appearance (visual, aural, tactile as well as motion) and content (microcopy, labels and instruction). Don't expect too much on context.

So yeah. Very useful, a quick read, but a little dry sometimes and really ultimately entry level stuff for the most part. But I'm grateful Saffer took the trouble to write it all up because someone had to at some point, right?

[Arnold Saputra · Rating 4 out of 5]

Very inspiring book for learning Microinteraction and how to improve your product by using more microinteraction. Microinteraction is around us and most of it We didn't realize but, it gave pleasant feeling to user. Microinteraction is a little detail that proved increase user engadgment, satisfactions and make your product more unique. Microinteraction must designed carefully and it needs enermous quantitative testing to the targeted user. What I mean enermous is tested to 1000-200k users using analytics.

This book is made for UX designer, Product Manager and Front-end developer that want to improve user engadgement and retetions to the apps/product. Dan Saffer also explain theory and best practices to achieve it.