The Origins of Famous Microinteractions

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

AOL’s You’ve Got Mail

Autocomplete

“I don’t feel when I look at a search box that it’s something I did,” Gibbs said of Google Suggest. “It feels like this is just how the world’s supposed to work. I don’t feel any personal attachment to it unless I stop to think about it.”

Autocorrect

The notion of autocorrect was born when Hachamovitch began thinking about a functionality that already existed in Word. Thanks to Charles Simonyi, the longtime Microsoft executive widely recognized as the father of graphical word processing, Word had a “glossary” that could be used as a sort of auto-expander. You could set up a string of words—like insert logo—which, when typed and followed by a press of the F3 button, would get replaced by a JPEG of your company’s logo. Hachamovitch realized that this glossary could be used far more aggressively to correct common mistakes. He drew up a little code that would allow you to press the left arrow and F3 at any time and immediately replace teh with the. His aha moment came when he realized that, because English words are space-delimited, the space bar itself could trigger the replacement, to make correction … automatic! Hachamovitch drew up a list of common errors, and over the next years he and his team went on to solve many of the thorniest. Seperate would automatically change to separate. Accidental cap locks would adjust immediately (making dEAR grEG into Dear Greg). One Microsoft manager dubbed them the Department of Stupid PC Tricks.

Blue Screen of Death

Control-Alt-Delete

“It was a mistake,” Gates admits to an audience left laughing at his honesty. “We could have had a single button, but the guy who did the IBM keyboard design didn’t wanna give us our single button.” David Bradley, an engineer who worked on the original IBM PC, invented the combination which was originally designed to reboot a PC.

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

The aggregation of the sentiment “I like this” makes room in the comments section for longer accolades.

Hamburger Menu

It turns out that the burger comes from the Xerox “Star” personal workstation, one of the earliest graphical user interfaces. Its designer, Norm Cox, was responsible for the entire system’s interface—including the icons that would effectively communicate functionality to the earliest computer users. The hamburger, which looks like a list, seemed like a good way to remind users of a menu list.

Pull To Refresh

Why make the user stop scrolling, lift their finger, then tap a button? Why not have them continue the gesture that they are already in the process of making? When I want to see newer stuff, I scroll up. So I made scrolling itself the gesture.

Scrollbars

It was first implemented at Xerox’s Palo Alto Research Center as part of the Smalltalk operating environment that was installed on the lab’s bitmapped computer systems. “I first saw it there around 1975,” says Larry Tesler, then a PARC researcher. “There were no arrows—just a bar with an elevator. You clicked above or below it to move a chunk of text.”

Typing Indicator in Chat

Back then, chatting in real time via text was for most people a very new thing. A good chunk of communication is knowing when it is and isn’t your turn to speak (another chunk is vocal nuance, which is partly addressed by emoticons); on a half-duplex line (where only one person can speak at a time) like a walkie-talkie, you really do have to say “over” to make sure your partner doesn’t miss anything. But latent full-duplex (where people can talk at the same time but transmission is delayed until you, say, hit Enter), like instant messaging, has its own problems. If your chat partner’s gone silent, it might be hard to know whether they were typing some huge message or if she was waiting for you to say something. We couldn’t enforce any particular etiquette among users, hence the typing indicator.

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