Microinteractions: Full Color Edition

Preface

Dan Saffer

What Is This Book About?

Microinteractions are all around us, from the turning on of an appliance to logging in to an online service to getting the weather in a mobile app. They are the single use-case features that do one thing only. They can be stand-alone apps or parts of larger features. The best of them perform with efficiency, humor, style, and an understanding of user needs and goals. The difference between a product we love and a product we just tolerate are often the microinteractions we have with it.

This book dissects microinteractions in order to help readers design their own. Starting with a model of microinteractions, each chapter closely examines each part of the model, and provides guiding principles to get the most out of every microinteraction. By doing so, your products will improve and your users will enjoy using them more, building customer (and brand) loyalty.

Who Should Read This Book

This book is for anyone who cares about making better products, particularly digital products. Designers of all stripes, developers, researchers, product managers, critics, and entrepreneurs will hopefully find much to think about, use, and emulate here.

This book is especially for anyone who has struggled to convince their client, developers, the product or project managers that this small thing is really worth doing, that it’ll make the product so much better. Now that small thing has a name—microinteractions—and can be argued for more effectively.

How This Book Is Organized

This is a small book about a small but important topic.

Chapter 1, Designing Microinteractions

Introduces microinteractions and discusses why something seemingly so insignificant is so important. The structure of microinteractions is discussed, laying out the overall pattern that all microinteractions follow. Lastly, this chapter looks at how microinteractions can be incorporated into projects.

Chapter 2, Triggers

Introduces triggers, the moment that microinteractions begin. Both manual (user-initiated) and system triggers are reviewed. The principle of Bring the Data Forward is discussed.

Chapter 3, Rules

Presents a discussion of rules, the hidden parameters and characteristics that define a microinteraction: how rules are created and what they should encompass, including the principle of Don’t Start from Zero.

Chapter 4, Feedback

Discusses feedback, or how the rules are understood by the user. When to use feedback, as well as the three major types of feedback: visual, audio, and haptic. The principles of Thinking Human and Using What Is Often Overlooked are introduced.

Chapter 5, Loops and Modes

Discusses loops and modes, the “meta” parts of microinteractions. The types of modes and loops are discussed, as well as how to use long loops.

Chapter 6, Putting It All Together

Puts together all the pieces of the microinteractions model to design three sample microinteractions: one for a mobile app, another for an online app, and the third for an appliance. This is also where we’ll discuss linking microinteractions together to form features.

Appendix A

Touches on the process of testing microinteractions.

Why Write a Book About Microinteractions?

Over the last decade, designers have been encouraged to think big, to solve “wicked problems,” to use “design thinking” to tackle massive, systemic issues in business and in government. No problem is too large to not apply the tools of design to, and design engagements can involve everything from organizational restructuring to urban planning.

The results of this refocusing of design efforts are unclear. But by working at such a macro scale, an important part of design is often lost: the details that delight. Products that we love show an attention to detail: the beautiful curve, the satisfying click, the understandable mental model.

This is another way to work: not through grand, top-down design projects, but from the bottom up, by crafting—lovingly, with care—small things. This is something designers can do quite well, with immediate, tangible results. This is another way to change the world: by making seemingly inconsequential moments into instances of pleasure.

There is a joy in tiny things that are beautiful and work well. This joy is both on the part of the user and in the creator, even though it certainly takes skill, time, and thought to make it so. It’s hard work, and as admirable in its own way as tackling the Big Problems. After all, who doesn’t need more joy in their life?

Conventions Used in This Book

The following typographical convention is used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Tip

This icon signifies a tip, suggestion, or general note.

Caution

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, if this book includes code examples, you may use the code in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Microinteractions by Dan Saffer (O’Reilly). Copyright 2014 Dan Saffer, 978-1-491-94592-6.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Safari® Books Online

Note

Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/Microinteractions_full_color.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Content Updates

October 3, 2013

• Changed Windows Mobile to Windows Phone

• Fixed grammatical errors

• Removed extraneous figure callouts

Acknowledgments

I am extremely grateful for Floris Dekker and Andrew McCarthy, the editors and collectors of the tremendous blog Little Big Details, where most of the images in this book are drawn. Without question, I don’t think this book would have been written without the examples so readily available to me there. My thanks to them, and particularly to the many contributors to their site. I have tried to credit them whenever I could track down their names.

Jack Moffett, writer of the “Design A Day” blog, should also get a nod of appreciation. Not only did I draw many examples from his “In the Details” section, but how he dissected those details has long been inspirational to me and led indirectly to this book.

My technical reviewers have greatly improved this book with their encouragement, wisdom, and keen eyes: Robert Reimann, Christopher Fahey, Dani Malik, Nick Remis, Dave Hoffer, Bill Scott, and Scott Jenson.

Despite the less-than-stellar performance of my last (before its time) O’Reilly book, I’m grateful for my editor Mary Tresler and everyone at O’Reilly for giving me another shot with this book, and being unfailingly supportive about a small book on a strange topic.

As always, the fortitude of the women (human and canine) I live with cannot be underestimated. This book in particular tested the patience of our house, as I could only write it in the club chair that sits in the middle of our TV room. This book is dedicated to them.

Lastly, a hat tip to the teachers and designers I have worked with and learned from, past and present, who have taught me—sometimes forcibly—the value of focusing on the details. Always, always, it has been some clever little bit they’ve imagined or have encouraged me to invent that brings the product we’re working on to life. It’s that spark I hoped to capture here.