Co.Design

The Future Of UX Design: Tiny, Humanizing Details

Designer Dan Saffer’s new book, Microinteractions, makes the case that design is in the details--the very small details that make systems friendlier.

Dan Saffer, like many designers, likes to quote Charles Eames. But unlike many designers, Saffer--Director of Interaction Design at Smart Design--wrote a whole book inspired by one of his favorite Eames quotes: "The details are not the details. They make the design." Saffer’s book, titled Microinteractions, takes Eames’s maxim to heart and then some. "For the last decade or so, designers have been encouraged to tackle 'wicked problems’ and to address systems," he tells Co.Design. "But when you’re working on such a macro scale, the details sometimes get lost, and it’s the details that make systems feel more human, and more humane. So I wanted to write a book that took a look, almost at the atomic level of design, of what makes details work."

So what is a "microinteraction," anyway? According to Saffer, it’s a product use case boiled down to a single moment, focused on a single task. Unlocking your smartphone is a microinteraction; so is the chiming sound that plays when you boot up Windows or OS X. But microinteractions aren’t restricted to computers. "They are everywhere: in the devices we carry, the appliances in our house, even embedded in the environments we live and work in," Saffer writes. "Most appliances and some apps are built entirely around one microinteraction."

These atomic design moments, Saffer argues, are what whole products, and even whole systems and "wicked problems," ultimately boil down to. If microinteractions are delightful, humane, and effective, then their success accretes and trickles up into the broader user experience in general. "Most good designers have been doing this for decades, especially some of the great industrial designers like the Eameses and Dieter Rams," Saffer says. "The on/off switch is often the first microinteraction people encounter with a product."

When microinteractions succeed--even invisibly, which is how most of them do--they make an emotional difference that’s greater than the sum of their tiny parts. Saffer’s current favorite microinteraction is in the Waze navigation app: "When I leave work, get into my car, and launch Waze, it asks me, 'Are you going home?' I never had to tell it that at a certain time, in a certain place, that’s where I usually go, but it observed my routine and makes a smart suggestion." His least favorite is the smiley face that Gmail displays when you have no new mail in your inbox. "It’s a weird tone for an event that’s not necessarily positive. 'No one likes you, you’ve got no mail…but have a great day!'"

And that’s what’s tough about designing these micro-moments: They can be so subtle and fleeting that ultimately their success or failure may come down to personal taste. (I personally find Gmail’s inbox-zero smiley face kind of cute.) Luckily, Saffer’s book provides a well-defined framework for analyzing and developing successful microinteractions, so you don’t just have to go by gut feeling. There’s even a handy cheat sheet, created by Saffer’s colleagues at Smart Design.

In the end, Saffer’s mission is less about defining what kinds of microinteractions are "good" or "bad" than about providing a useful way to pay attention to them and iterate on the process of creating them. Microinteractions are a lens for design--one of many--but this one is becoming ever more relevant as we expect our products to become "smarter." "We’ve had microinteractions going back to the 1800s and electric "push-button" technology," Saffer says. "In the last decade alone, think of all the microinteractions around touch screens, gestural UIs, setting up wi-fi, syncing to the Cloud, and probably dozens of others. Microinteractions are here to stay."

[Read more about Microinteractions here]

[Image: Sand Dune via Shutterstock]

Add New Comment

12 Comments

  • Ian

    Interesting article. And I like the design of this site and have no problem reading it. Remember most design is subjective.

  • CattyLina

    Thin yellow links on white is nearly impossible to read unless you're 20 years old or younger with perfect vision. It's, um, disrespectful to just about everyone who isn't a really cool graphic designer.

  • bonehead

    Question : Why on earth would someone post about UX design when the link styling here turns yellow on a white background ... Come on guys.

  • unspecified

    I find it amusing that an article on micro-elements of UX design uses pale yellow text (in a spidery font, no less) for header text. It's the ultimate victory of style over usability.

  • Jstncn

    So true...and: 1) I can't scroll up and down on the graphic once it is enlarged, so I can't read it, and 2) I am having a really hard time understanding the language here, despite it recommending to "speak human"

  • Bonehead

    That's hilarious, I just added a comment thats similar to your response with the same inquiry.  It boggles my mind they have the most disgusting yellow colored font on a white background I've ever seen.  This just as bad, if not worse, than to use bright neon pink comic sans.

  • Mike Voss

    Interesting article, even more so because it unintentionally shows a violation of the principle in action which may help to illustrate the point.

    When clicking on the image to enlarge it, a lightbox-like viewer opens, in which the keyboard and mouse interactions are changed quite radically compared to the interactions on the article view.The down arrow moves the content down, i.e. effectively scrolling up, not, as you would expect from the previous context, down. The scroll-wheel of your mouse will zoom in or out, as opposed to scrolling up or down, as you would expect, coming from the reading experience - i.e. being in the "context" - of a normal webpage.Just some food for though, dear fastcodesign team... :)

  • Hollywood Inc

    Excellent article, right on target. Unfortunately, the critical micro transactions get lost in the demand to show a quantitative value, or quantify the business impact from execs, so far too often the micro transactions never get implemented. 

  • David N. Hingston

    I like the approach a great deal.  But I really wish the designers of the "handy cheat sheet" had read the book before they designed it.  1-3-2-4?  "Loops and Modes that make up its meta rules?"  Really......And the fonts and colors are nigh impossible to read.

  • $57745524

    I think FC should stop writing about UX until you fix this terrible site.