August 1st, 2014
User Experience is really all about delighting your users. You want them to accomplish tasks with ease and not encounter any roadblocks that are a direct result of your design. Many of the delightful things about an app or interface go unnoticed because they are the tiniest of features. These microinteractions can set the tone for your users and dictate the feel and performance of your design.
Dan Saffer is an expert on microinteractions. In fact, he wrote the book on it. He says that microinteractions essentially operate based on triggers, rules, feedback, loops, and modes. For example, when you engage a scrollbar, how fast does it scroll? Or when you click a volume up button, what percent increase is each click?
Just think of a car. In the broadest terms, a car is a car. But the styling of the interior, leather seats, placement of cupholders, and how the in car stereo system works all help differentiate one car from another. These are often subtle differences, but as with microinteractions, these small differences are crucial to the overall feel and experience.
Attend a daylong workshop with Dan at UI19
Dan’s UI19 workshop, Designing Microinteractions, in Boston October 29 will help you design those often-overlooked UX elements—like microcopy, form controls, and system defaults—to increase your user engagement.
Register with promotion code DANCAST and get $300 off the current conference price.
|Explore Dan’s workshop|
Jared Spool: Welcome everyone to another episode of the SpoolCast. Today, we’re talking microinteractions with Mr. Dan Saffer.
He’s going to be giving a full day workshop on how to design microinteractions at the user interface conference which is going to be October 27th through 29th in Boston, Massachusetts.
Today, we’re going to talk about the book he wrote which is cleverly named “Microinteractions” and what they are and how they work and all those good things. Dan, how are you?
Dan Saffer: I am great, Jared.
Jared: You sound great.
Dan: It’s good to be back and talking microinteractions again.
Jared: Yeah, of course.
Dan: It’s a sunny, happy day here in San Francisco so, what could be ill?
Jared: There you go. One of the things I’ve been really interested in lately is the language that is beginning to form around the more subtle and nuance parts of design.
Microinteractions is one of these things where before your book came out, before I had a chance to read it, it never even occurred to me that this was a thing. Then it turns out that as I’m reading the book, I’m realizing it’s not a thing, it’s like all this different stuff.
You’ve got triggers and feedback and all these things. You’ve had to come up with a language to describe this. I’m curious how much of what you put in the book was language that you’d taken that you’d found in other places and how much of it you had to create on your own.
I was reminded of Grey’s Anatomy, not the TV show but the big book written by Henry Grey in the 1850s, which is still in use today.
Dan: You’re not a fan of McDreamy or McSteamy or whatever the…
Jared: No. I watched the first season because I was dating a woman who was very into in. Then we stopped dating and, for some reason, I stopped watching it.
Dan: Let me know when that happens, right?
Jared: [laughs] Yeah. I don’t even know what happened beyond the first season. As far as I can tell, probably the same thing that happened in the first season.
Dan: People fell in love and they fell out of love. There was tragedies and people died and people lived.
Jared: Right. In every episode, there’s some crazy surgery thing that happens or somebody comes in to the ER with aliens coming out of their bellies.
Dan: I have never seen a single episode, and it’s a badge of honor for me.
Jared: Dude, you…
Dan: Back to the original Grey’s Anatomy.
Jared: There are brain cells that you have still intact that I have lost. Back to the original Grey’s Anatomy, so have you read this? The plot’s a little thin but the characters are great.
Now, it’s this giant book. It’s got every piece of the body in it, both inside and out. The thing about it was, and I remember reading this, was that, Grey and Carter, Carter was the illustrator.
Grey was the creator, they struggled because it turned out that there were lots of parts of the body that had no name. I’m wondering if that’s what you run into as you were putting the book together.
Dan: Definitely. There certainly were a lot that I made up but, certainly not the term microinteractions which has been around for several decades now. The very first instance of people using it was in sociology where people were using it as microinteractions between individuals.
Dan: Starting back in the 1970s, there was a wave of these microinteractions. There’s also people using today particularly in things like service design. The HCI community started to pick it up in the 1980s, early 1990s. You start to see it started to appear in the literature of that.
Luckily, I didn’t have to make up the term microinteractions. That was already out there and waiting for me to start to appropriate and grab and flesh out. When I started to put together the model, that’s when I started to have to think about at least what the general pieces were.
That’s when I had to think of things like trigger, rules, feedback, and loops and modes. Now, certainly, some of those…feedback and those were certainly out there.
Modes were certainly out there. So, really, it was all about triggers, rules, and loops were the biggest pieces that I had to start to put a name around.
To add and above high level, one of the reasons I wrote the book was so that we did have in the general design lexicon a term that everyone used and thought about when it came time to design these little details.
Because often, I was finding in my own work that, I’d be like, “Well, I need some time to work on this little thing” or “I need time to polish this.” I didn’t have a good term for it.
When I started thinking about what the things were that I really liked about products, a lot of them turned out to be these microinteractions. Lo and behold, there was already a name for it.
Jared: What were some of the microinteractions that stood out that made you really like the products you were using?
Dan: Some of them stood out because they were clever or they did something in a way that was unexpected and unexpectedly delightful. There was something fun about them or there was something about them that had a really deep connection to the activity that I was doing.
I used the example of the Breville toaster a lot. The Breville toaster, it’s this really nice toaster. Like every other toaster, it toasts. But when the toast pops up and you look at it and you’re like, “Oh, I need a little bit more toasting,” there’s a button that says, “A little bit more” and you press the button, it toasts a little bit more.
What I love about it was that someone thought about the activity and said, “You know what? What would be something really interesting and delightful here that shows this deep understanding of the activity of toasting?”
Which is something that you could be like, “It’s toasting. How hard could it be?” But somebody thought about that activity and thought about what would really make it something interesting, something special, and something premium.
That’s the thing that I think about. These Breville toasters are $125. You can go to Target and get a toaster for $20. But the thing that’s really setting it apart is this attention to detail.
When I started looking around the things that I really loved and enjoyed using, it was all about that attention to detail.
Jared: I have a Breville Smart Oven, and I love it. One of the things that’s cool is that in addition to bake, it also has roast which is cool. It also has cookies and pizza, right? They figured out what you need to do for cookies. They figured out what you need to do for pizza. There are pre-set setups.
The pizza one, instead of putting in how long you want it to cook, you put in whether the pizza is frozen or fresh and how many inches in diameter it is. Then it figures out the rest.
Again, it’s a simple little preset but it’s brilliant in terms of it takes a lot of the thought out of it. Again, it feels like someone has really thought about the task and what people are doing.
Dan: It’s a more sophisticated popcorn button on your..
Jared: Yeah. I was thinking that but, the thing is, is that all the little packages of microwave popcorn tell you to never use the popcorn button. Because every microwave.
Even though they have all have popcorn, they all implement it differently and they emit a different pattern of radiation or whatever it is they’re doing, and the popcorn doesn’t work. It’s not designed for that.
Dan: Interesting. I use it here for our office at work and it works perfectly. It is exactly right.
Jared: That’s interesting. You know what? Maybe it’s the office popcorn microwaves that are good because our office one here works perfectly too now that you mentioned it.
It’s interesting to me that you had to create this language. Was that something that, as an author, you struggled with a little?
Because you don’t want to put words out there or terms that have completely other meanings that everybody is using and then suddenly find yourself constantly say, “No, no, no, not that type of loop, this type of loop.”
Dan: Yeah. Loop was the one term that did bump into some existing adjacent areas where people had already thought about loops, and that was in programming. There’s a programming term for doing a loop.
The loops that I talk about in the book are slightly different, so that’s where technical editors come into play where a lot of my technical editors said, “Hey, this is slightly different than the loops that we talk about in development.”
I was able to at least, in the book, talk about how the two terms differ in using them. But others, I simply stole from other adjacent areas. I had read the book “The Power of Habit” right before I was working on the Microinteractions book.
One of the terms that they used is trigger, a trigger for a habit. I thought that was a great term for what I was looking for the start of a microinteraction. Then I to differentiate between manual triggers and system triggers.
Manual triggers being the button pushes or the clicks on links or the clicks on an icon or a wave or those things that people do to start a microinteraction versus a system trigger which is a set of conditions that happens.
When a system detects that, “Oh, here’s the number of things that are going on,” and they match this pattern and so then I’m going to go launch this microinteraction.
After the book came out, I found out that there was a lot of literature talking about explicit versus implicit triggers. That’s certainly something that this maps directly to that I hadn’t really heard that language, but there was definitely something out there already that fit that existing pattern.
It’s funny, side note on triggers, since I have the word triggers on the Microinteractions website, for the reason that people thought it was a gun enthusiast website, it was blocked from a lot of people’s firewalls.
They wouldn’t let them out to see it because it had the word trigger in it. Unexpected consequence of naming something that I felt was fairly innocuous but apparently Google thinks that mircrointeractions.com is a gun site.
Jared: That’s crazy. For many years, we had an article…we still have the article, but for many years, it would show up in the top five most Googled articles on our website.
For no real reason, it turned out that article was about using the multiple personalities of persona’s to make design decisions.
Because it had the phrase “multiple personalities,” a lot of people are looking for multiple personalities into Google apparently and end up on our website and then, I’m sure, are horribly disappointed when they realized that they’re going to have to build something to deal with it.
Dan: Right. “Weird. I can solve all of my problems with these six pieces of paper?” And then, the last one that I came up with, in general, was rules, and that was because a lot of the stuff I was influenced by was thinking about these little bits in game design.
I was thinking like, “Wow, how do these little things work?” The original term that I was going to use for rules was interaction. But I thought that might be too confusing because…
Jared: What’s an example of a rule?
Dan: An example of a rule is, once a microinteraction has been triggered, it’s what happens, it’s…
Jared: OK, that makes perfect sense.
Dan: Exactly. Once something gets started, what happens? What’s the sequence of events and the invisible constraints about what you can and can’t do in this microinteraction? Here’s where the data is coming from.
Here’s what happens when you press this button. Or if you notch the slider up, every notch is increasing the volume by one percent or three percent.
The rules are defining what happens and the sequence of what happens. That’s why I tried to call them rules. They’re like the rules of a game. Here’s how you play this micro-interaction.
Jared: Part of that is the display but part of that is also what’s happening behind the scenes.
Dan: Yeah. The rules, for the most part, are completely invisible. You don’t exactly know what’s happening except for the feedback that you get. The next part is the feedback is showing how the rules work.
So, if you have bad feedback or misleading feedback, it leads you to think that how something works is different from how it does work.
Jared: I would guess another way people surface the rules is through preference settings, those plethora of settings of, “Do you want me to beep three times or two times when you get this message?”
Dan: Yeah. There’s definitely ways that you can alter the rules through settings. Through modes, it would be another thing. You’re going to go into a special mode where the rules are slightly different. A lot of the interactions that…I’m not huge fun of modes…
Dan: …that I emphasized using them sparingly but they can occasionally be really helpful.
Jared: I was thinking about the way iOS 7′s notifications work. Sometimes, the notifications appear at the top of the screen and sometimes the notifications stop what you’re doing and have this dialog box that you have to dismiss.
Those would be two separate sets of rules for notifications in, I guess, deciding which way you’re going to go. One is modal, one is non-modal.
Dan: Exactly. There are definitely tons of rules behind the scenes about where it appears and what happens when it appears and how the users dismiss them. What happens if you ignore them?
What happens if you’re offline when it happens? So, more sophisticated piece of functionality is the more rules that are generally embedded inside it.
Jared: When people are designing these things, part of this feels like, “Well, that’s the programming behind it,” but there’s a lot of intentional design that you want to think through.
And I would think the designer would really probably, in conjunction with whoever is doing the implementation and other people in the team, wants to have a say and be talking through, what happens when we’re offline and what happens.
When we don’t have a good Internet connection and all those types of things that feel…at the outset is being, “Well, that’s a technical detail. I don’t have to worry about that as a designer.” But there is a lot of subtlety and nuance there, right?
Dan: Yeah, for sure. It all impacts the user experience as a general thing. The question is, who’s doing the user experience? Who’s designing it? Is it going to be you or is it going to be the developer who’s putting it together?
Ultimately, it’s a going be a mash of both. But who’s doing those initial parameter settings and definitions of the rules? I would hope that designers would take the lead on that and help to define these things because it does make a big difference to the user experience.
I don’t know about you but I can almost always tell when a piece of functionality has been neglected and left. Somebody else is going figure that out.
Some of the pieces, it doesn’t feel it’s polished, it feels clunky. Sometimes it’s around error messages. Sometimes it is around these odd edge cases that people haven’t thought through in a careful way or tried to design around, so all of a sudden you get this very strange error message.
These are things that when people bump into them or they have to engage with them, it makes you question the quality of the overall product that you’re like, “Oh, wow, this is really clunky” or “this is a not great experience.” You’re mentioning the iOS 7 notifications, and to me, that’s a mess.
Jared: It feels like a mess.
Dan: It definitely does. There’s multiple places where you can change the notifications. I don’t know. It does not feel like it has been thought through all the way.
Jared: Michael Lopp who writes those Rands in Repose had this fabulous piece a few weeks ago called “Designing for Gullible” which talked about how the basic frustration I have, which is I get this notification on my phone and I swipe the phone for whatever reason.
And now the notification is gone but I don’t know what app it came from and I don’t know how to find it again. There is this thing, this notifications panel that I can bring up but I can’t ever find anything useful in it. It’s really crazy.
Dan: That’s exactly right. It feels like a mess.
Jared: Every app, the minute I start, the app says, “Would you like me to be able to push notifications to you?” I’m like, “OK, why would you ever do that? Explain to me why I want this. Why is my supermarket checkout app,” the supermarket I go to is Stop and Shop here in Boston.
They have a fabulous app that lets me scan things as I go. And then I walk up to their self-serve register and I swipe my key-chain tag and it says, “Oh, here is all the things you’ve put in your cart.
Here’s the total. Pay.” And I don’t have to go through the actual checkout process. It’s figured that all out as I’ve been going. I love this thing.
But the first thing it says to me is, “Would you like notifications?” I’m like, “What notifications would you want to be telling me?” Are they going to tell me that there’s cheeses on sale at the deli? I don’t know what it is. But, no, I don’t want your notifications. There’s no explanation.
Dan: You don’t know what the value of it to…
Dan: If it said like, “Here’s the kinds of things that we’re going be showing you that, hey, you’re right here and here’s something that will save you money” or blah, blah, blah. You might say yes.
With the lack of knowledge, the first time you open it, especially before you’ve ever even used the app, you have no idea what you’re agreeing to.
Jared: Yeah. It’s like the first time you and I were introduced at an event, I walked up to you and I shook your hand and I said, “Would you like push notifications from me?”
Dan: Right. Can you give me the key to your house?
Jared: That’s right. I’m going to come in and shout at you in the middle of the night. Would it be fair to say that microinteractions have really been in the design of online digital systems forever, but only recently, have we started explicitly thinking about their design?
And before, we left it up either to chance or to the technical person who had their fingers in the code and said, “Well, what am I going to do when this error happens?” Well, I guess I’ll pull up this message that says “system error.”
Dan: Would be partially true. They had certainly been in every digital product that has existed. Going back in time to the late ’60s, early ’70s.
And even all the way up to through the early ’80s, so much of what people were trying to figure out was the microinteractions for operating systems, so things like scroll-bars and cut and paste, and how you open a window, how a window closes, how a page scrolls.
Jared: Yeah, I was there for all that. We were trying to figure out all those little interactions, and there was a huge debate on which direction the scroll-bars should work and which side of the screen they should be on.
There was a contingent that believed that the scroll-bar should be on the left side of the screen because that’s where the text was.
Dan: I hadn’t heard that little piece.
Jared: Yeah. The MIT crowd, so if you look at X windows and the Andrew system that came out of CMU, they have all the scroll-bars on the left, and the Stanford Xerox folks all have them on the right. It was an East Coast/West Coast thing.
Dan: There was a battle, yeah.
Jared: So the left coast wanted them on the right and the right coast wanted them on the left.
Dan: We won that one, I suppose.
Jared: You did. You did.
Dan: Interesting. I’ve seen a list of…you can look at the scroll-bars and how they’ve evolved over time. You could really say that the history of technology has got this shadow history of microinteractions that manage and control and live alongside this technology as to how you manipulate it.
Jared: Right. And one of the big advantages of the scroll-bars, I remember this, was it had nonlinear movement. So if you have a really big document in the early days, scrolling down was the same amount of text.
That meant that if you pulled down really hard, it took forever to get to the bottom of the document. It was not the same speed.
Then they’d said, “OK, well, if I pull down really fast, I’ll get to the bottom of the document,” but that became really hard to pinpoint a specific place, like if I want to go down two screen worth and I have a really long document, that was really hard to do.
Somebody at, it was Xerox, though it might have been Microsoft, I’m pretty sure it was Xerox, came up with the idea of, if you scroll really fast.
So if the mouse is moving really fast, it moves a large piece of document. But if it’s really slow, the amount of document it moves is a percentage of that. It was an exponential graph, not a linear graph.
As a result, it gave you gross control and fine control, and that seems to me to be a microinteraction that’s really complicated, that people don’t realize. If you play with a long document or a long Web page, you’ll see it, but it feels natural the way it works and you don’t think about it.
Dan: What you’re describing right now is going back five minutes into this podcast, is a rule. They [inaudible 0:23:22] with a rule until it made sense for the context of it.
Jared: What I was describing was that I’m a really old dude.
Dan: Yeah. You and me both, man.
Dan: We reached the point where sometime in the early ’80s where a lot of the GUI conventions were set, and then there was another burst of people thinking about microinteractions around the time that the Web was new and trying to figure out.
Once again, people started thinking like, “Well, how does a scroll-bar work? How does a back bar work? What are the conventions of the Web?”
And then we’ve had another burst when mobiles really started to take off. How do you this in mobile, how do you go back, how do you go forward, how do you launch an app, all those kinds of things.
There had been times when people have definitely focused on micro-interactions as being part of the overall operating system or the overall flow of how things work.
What is, I don’t want to say new, but what causing a resurgence of microinteractions are the fact that so many products now, the features set are very commoditized.
It’s like there’s not a lot of huge differentiators and features across all of these different kinds of products. And what the differentiators end up being is all about the user experience. What the user experience can be boiled to are these big features obviously.
But also the microinteractions that surround and control and make them into something interesting. We talk a lot about look and feel, but microinteractions, they are the feel part of look and feel.
And so you see these companies that are trying to use microinteractions as the strategy. They say, “Well, we may have an app that is for sending and receiving mail.
But we’re gonna make it a really polished like the best in breed that we possibly can, and that means we’re gonna focus on every microinteraction,” and this is what Mail Box app did. They were acquired practically before they even launched.
It is microinteractions as a strategy, like looking at “How can we make this thing of such high quality that it becomes a differentiators in the marketplace for us?” And some technique that feels new.
This is not to say, of course, that there hasn’t been products of quality in the past. Of course, there had been. But it’s a deliberate focus on that that is really something that is really exciting and interesting and we’re seeing a lot of right now.
Jared: That’s really interesting to me. The idea that it’s these little details that are making the difference between one product and another, it feels very much like what we’ve seen in architecture.
In the automotive industry, or…a car is a car is a car for most consumers but, the cup holders and the ease of the radio system or how the GPS works or the styling of the dashboard starts to make a difference from one car to the next.
Dan: It is definitely a way of working that, particularly a lot of industrial designers have done for many, many years. I mean a chair is a chair is a chair, except the details really make an iron chair different from another chair.
Jared: A plastic lawn chair.
Dan: Exactly. There are big differences and really thinking about those, it’s definitely something that people like the aims were certainly big into that.
Dieter Rams, that detail is his whole thing. The details are the differentiators for him. That’s what he focuses on in order to make his products really stand out and make them really great.
Jared: So maybe the reason that micro-interactions has become such a hot topic lately is because we’ve matured to the point where this is now something we can focus on.
We’re not trying to teach a horse to talk as the old joke goes, but now we care about what it says and how it says it.
Dan: That’s right. We’ve reached a level of technical sophistication. There’s very few things that can’t be done in some way now.
Obviously, there’s new technologies and new stuff always coming down the pipe. But that there’s a plethora of really amazing digital technology in particular.
Things that were tremendously hard even 10 years ago are now extremely possible. Moore’s Law is making things go crazy practically because we’re so much than we were back in the ’90s or back in the ’80s.
You have hundreds and hundreds of times processing power in your phone than they did to send a man to the moon, those kinds of crazy statistics that are out there.
Dan: Now that we have reached this level of technical sophistication, yeah. The idea of, what are you going to do with and how are things done, becomes much more of a thing. I can we saw this starting in consumer but I specifically see it now a lot in enterprise.
A lot of people are saying like, “Why is all this consumer stuff? They focus on how nice the details are and how nice things are.
But, I’m stuck with this enterprise system from 10 years ago and it’s really clunky. Why can’t it feel as polished and as quality as the consumer stuff that I have all around me?”
Jared: Right. Dan, thank you so much for talking to me about this. This has been really fascinating.
Dan: Yeah. This has been a whirlwind tour through design history and technology.
Jared: Yes, it has been. If you guys are interested in learning more about micro-interactions, first, go out, buy Dan’s book with the clever name of Micro-interactions. It’s a fabulous book to read and it will change the way you think about all this.
And then, if you’re still excited about this, here is what I want you to do. I want you to go to uiconf.com, that’s UI conf dot com, and check out Dan’s full day workshop on micro-interactions.
Last year, he gave this workshop and it was really the highlight of the conference. It really was so much fun. There are all sorts of exercises and stuff, and Dan does a fabulous job.
You want to go explain to your boss that for you guys to be competitive in the world, you have to learn about this stuff and be really awesome at it.
Dan: It is definitely a very fun day, one that’s been road-tested around the world now. Whatever they’d like about it and what I heard a lot from attendees about is how practical it is and how hands-on it is and how they can take it back to their work the next day and start to apply it.
And start to think about it, which is really great. And that’s the whole point of this, is that it As meant to be a practical, hands-on talk but also one that should expand your mind into thinking about how you could take your product to the next level.
I’m really happy that attendees are coming away with that.
Jared: It’s a great mind-expanding thing. So much so that people told us they needed to change the little strap on their hats to be one size bigger. Now we’re getting silly. Dan, thanks for talking with me.
Dan: Hey, thanks for having me. This was fun discussion.
Jared: I want to thank our audience for listening. Again, check out Dan’s workshop at uiconf.com. That will be October 27th to 29th, Boston, Massachusetts. Thanks for encouraging our behavior. We’ll talk to you soon. Take care.