jnd.org

Foreword to

Saffer, D. (2013). Microinteractions: Designing with Details. Sebastopol, CA: O’Reilly Media. (Microinteractions at Amazon.)

I first encountered Dan Saffer’s interest in microinteractions at a conference in Brazil. I was immediately captivated. Dan started his talk with the story of the ringing cellphone at a symphony concert that forms the opening pages of Chapter 1. It was very clear that by focusing upon the small, Dan had discovered something very big.

I next encountered the importance of getting the details right through my own frustrations with Apple’s photographic application Aperture. I was putting together the illustrations for a book when suddenly my computer froze: I had to force a reboot. But when I tried to open Aperture  it announced that the database was corrupted and promptly shut down. Huh? Of what use is an error message that provides no remedy? What was I supposed to do?

I searched the Aperture help files. No luck. I searched Apple’s support website. No luck. I was annoyed and concerned: How could I get the photos back? The program wouldn’t even launch. I keep a backup on another computer, but my synchronization program was far too efficient: the corrupted file had been transferred to the other computer.

Finally, after much travail, an internet search yielded the solution, described in a very nicely formatted set of instructions from Apple. I followed the instructions and 15 minutes later, all my photos were restored. (Note that I couldn’t find this from the Apple site: I found a discussion group where someone had posted the link to the proper location at Apple.)

Why am I telling you this? Because if only Apple’s programmers had read this book, I wouldn’t have had to go through any agony. Microinteraction. Get the details right.

That error message? Why didn’t it contain the answer as well as the problem? After all, Apple had a very nice message explaining the problem and saying just what to do about it. Suppose the error message had said “The database is corrupted: to correct this, follow these steps” (with active buttons on thin the message dialog box that would initiate the process). Why didn’t Apple do this? Was it because the programmers for this part of the program didn’t consider it part of their responsibility? Or was it because this group of programmers came from a different group that maintained the database, so they only knew there was a problem and not how to fix it? Or is it because it is not in the culture of error-message writers to also provide the solution? (My best bet is that all three factors played a role.) But whatever the reason, the result is an inferior user experience, one that now has me extremely happy with Aperture, searching for a better alternative. This can’t be the response Apple wants to produce in its customers. If only they had read this book.

Are microinteractions details? Damn right: The magic is all in the details.

The “micro” in “microinteractions” implies it is about the small things. Small? Yes. Unimportant? Absolutely not! Microinteractions is about those critical details that make the difference between a friendly experience and traumatic anxiety. As Dan Saffer points out in his Preface, designers love to get the big picture right. It’s a wonderful feeling. No problem is too large. But even if the big picture is done right, unless the details are also handled properly, the solution fails: the details are what control the moment to moment experience. It is timely details that lead to seamless interaction with our products. Alternatively, it is the lack of attention to those details that lead to frustration, irritation, and eventually an intense dislike of the product. Yes, the big picture matters, but so too does the detailed picture. It is attention to details that creates a smooth feeling of accomplishment.

There are several steps to great microinteractions. The first, and for many developers, the hardest, is to identify the situations properly. This requires great observational skills: watching people interact, watching yourself interact, identifying the pain points, identifying logical sequences, and then determining what things make sense to bring together. Obvious candidates are to be found in error messages and dialog boxes. Each presents some information, thus implying the next step to be performed. Why not make that next step part of the present step?

Great microinteraction design requires understanding the people who use the product, what they are trying to accomplish, and the steps they need to take. it requires understanding the context of those interactions. It is essential to develop empathy with the user, to develop observational skills of users and the knowledge of how to combine different aspects of your product – perhaps the results of different programming teams or even different divisions – into a single, smooth microinteraction? Chapter 1 does a great job of introducing the principles of how to do this. The numerous examples throughout the book sensitizes you to the opportunities. After that it is up to you, to continual observation that leads to discovery of the opportunities. And it is essential not to be blocked, as Apple’s developers apparently were, if the solutions require cutting across company organizational structures. After all, doing things right for the user is what great products are all about.

The second step to great microinteraction is the implementation. There are lots of design issues here: triggers, rules, feedback, loops, and modes — all nicely described within the chapters of this book.

Are microinteractions important? Well, let me tell you of my last major purchase: a new automobile. When I walk up to it and put my hand around the door handle, the handles light up and an interior light turns on. The door unlocks, and as I enter the car, the seat, mirrors, and even the programming of the radio resets itself to my preferences. When I open the door, the ceiling light for the seat comes on. If my passenger opens their door, that light comes on. As my wife and I take turns driving, the car resets itself each time to the settings each of us prefers. How did the car designers decide upon this sequence? How did they decide which things to control or not control? By clever, intelligent microdesign. Are these small things? Yes. Could we have manually done all of this? Yes. But when the car does it for us, it provides a sense of delight in the car, a feeling of pride of ownership. Isn’t that what all manufacturers of products should want for their customers?

Hurrah for the small, which is where we spend most of our lives. Those many seconds and minutes spent seeking how to do the next step, the frustrations of inelegant transitions. Hurrah for Dan Saffer and this book, where the friendly writing style is enhanced through copious examples. I considered myself skilled at observing people interacting with technology, but after reading this book, my skills have improved. Now I look more closely at the details, at the missed opportunities. I also see when products do things right. Learning to see is the first step toward making thing better.

Now it is your turn: go out and conquer. Make our lives simpler, more enjoyable. Put microinteraction into practice.

Microinteractions: Designing with Details