The Origins of Famous Microinteractions

Fun stories and trivia about the origins of well-known microinteractions:

AOL’s You’ve Got Mail

Autocomplete

Blue Screen of Death

Control-Alt-Delete

Cut and Paste

In 1974, a young engineer named Larry Tesler began working on an application called Gypsy for the Xerox Alto computer. Gypsy was one of the first word-processing applications ever, and the successor to the groundbreaking Bravo, the first true WYSIWYG word-processing program and the first program that could have the ability to change fonts. Even though it was still a word-processing program, Gypsy was a different kind of application altogether: it made use of a mouse and a graphical user interface (GUI). Larry’s mission—and what would become his rallying cry for decades to come—was to reduce the modality of the interface, so that users wouldn’t have to switch to a separate mode to perform actions. (His website is http://www.nomodes.com, his Twitter handle is @nomodes, and even his license plate reads NOMODES.) Larry wanted users, when they typed a character key, to always have that character appear onscreen as text—not an unreasonable expectation for a word-processing application. This wasn’t the case in Bravo: typing only worked in a particular mode; other times it triggered a function.

One of those functions was moving text from one part of the document to another. In Bravo, users had to first select the destination, then press the “I” or “R” keys to enter Insert or Replace modes, then find and select the text to move, then finally press the Escape key to execute the copy. Larry knew there was a better way to perform this action, so he designed one that not only made use of the mouse, but radically simplified this microinteraction. In Gypsy, the user could select a piece of text, press the “Copy” function key, then select the destination, and finally press the “Paste” function key. No mode required. And thus, cut and paste was born.
—from Microinteractions

Facebook’s Like

Hamburger Menu

Pull To Refresh

Scrollbars

Microinteractions Quick Reference

The Microinteractions book is great and all, but there’s so many words! What if there was a quick reference guide to hang up? Well, say no more!

Microinteractions_QuickRef

Suitable for printing, framing, hanging up on your wall, etc. Download (7mb pdf)

Best. Review. Ever.

From Scott Berkun:

Dan Saffer’s book Microinteractions is the best book I’ve read about design in ages. I’ve been working in design for 20 years and often have younger designers ask me for advice, or how to achieve their grand design dreams. Most books about design are similarly grand and presume that everyone knows the basics well enough to do the little things well. The world proves this not to be true. Spend an afternoon strolling around town with a gaggle of caffeinated interaction designers and you’ll hear an endless commentary on the details the designers of the world have gotten wrong.

The book itself is a wonderfully self-consistent: it’s short, concise, well designed and brilliant. The fun and salient examples nail Saffer’s points, and his writing is sharp, incisive and with just enough comedic curmudgeonry to keep you smiling most of the way through.

This is the book many designers will begrudgingly pick up, thinking it’s beneath them, but by the time they get to page 25 they’ll be thinking “oh, this is fun” and then by page 50 they’ll realize “oh dear, I make that mistake, or have peers that do” and when they’re finished they’ll know “I now have a language to describe these important problems that have bothered people for ages but were hard to describe, and I have the knowledge now to fix them properly.” What more can you ask for from a book about designing things?

Read the whole review

Advance Praise

Nice things people have been saying:

Microinteractions is a book I’ve wanted for a very long time. I’ve needed a thoughtful, insightful, and concise understanding how to look at interaction design at the atomic level. Dan’s delivered that in spades.”
Jared Spool

Microinteractions is an essential guide to designing in today’s world where a typical person touches a hundred different user experiences each day, and only the clearest interactions will turn a new user experience into a cherished product. In this book, Dan Saffer turns the Cognitive Walkthrough on its head and takes it to the next level, creating a new model for defining interactions and illustrating the strength of designing for moments rather than systems. An easy jargon-free read and an invaluable reference, Microinteractions is packed with vital principles backed up by a wide spectrum of useful real-world examples of what to do, and what not to do. You’ll get something out of reading any two pages, and get even more out of reading them again. The book is an example of its own teachings. Approachable, but with deeper insights as needed.
Kevin Fox
Designer of Gmail

Saffer has written a excellent, compact, and eminently readable volume on a subject under-valued and under-discussed in our industry: the art and science of creating small, delightful moments in our daily interactions with technology. I recommend it to any designer or programmer looking to enhance the desirability and polish the utility of their apps, sites or services, one interaction at a time.
Robert Reimann
Founding President of the Interaction Design Association (IxDA)
Principal Interaction Designer at PatientsLikeMe and Co-author of
About Face 3

Dariel Fitzkee, the famous magician’s magician once stated, “Magic is both in the details and in the performance.” Interaction design is just like that. It is in reality creating a user illusion out of many tiny nuanced, interesting moments. Dan’s book, Microinteractions shines a magnifying glass on these moments and teases out how to go from a good to a great “user illusion.” I highly recommend this book to every designer and implementer of user experiences in any medium.
Bill Scott
Sr. Director, PayPal

I have never before seen a book drill down to this level of detail into how interactions (let alone microinteractions) actually work. It is one of the better books on interaction design I’ve read. I’m going to give copies to my designers and product managers and require that they read it and explain it back to me.
Christian Crumlish
Director of Product, CloudOn

With this book, Saffer’s new concept of microinteraction creates a valuable new design tool: filling in that vast middle ground between “Design Thinking” at the strategy level and “User Guidelines” at the very detailed level. It is an excellent book that should be read not only by designers but everyone involved in bringing a product to market.
Scott Jenson
Head of Design, Parlay Labs

Foreword by Don Norman

Yes, Don Norman. I can’t believe it either. A sample:

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.

Read the whole foreword on Don’s site