Dan Saffer – Designing Microinteractions

Sean Carmichael

June 14th, 2013

Play

[ Transcript Available ]

Dan Saffer

According to Jared Spool, design is best when it’s invisible. Just like air conditioning. People only notice it when it’s not working, or too hot, or too cold. No one ever mentions how great the air conditioning is when it’s working perfectly. Microinteractions work in a similar way.

Do you think about the ringer on your phone and the ability to turn it off? Dan Saffer uses this example to kick off his book Microinteractions. Silencing the ringer on your phone is a common feature. If that feature is clunky or hard to find it interferes with needing to silence it quickly, in a crowded movie theatre for example. These tiny interactions that surround the main functionality are integral to rounding out the entire experience.

Microinteractions work best when you don’t think about them. If your product or experience is riddled with minor annoyances it detracts from the overall functionality. But effortless and elegant microinteractions allow for a streamlined experience.

Recorded: May, 2013
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Full Transcript.


Jared Spool: Hello there. Thanks for joining us again on the SpoolCast. Today is going to be a fabulous day. You’ve chosen the right podcast to listen to today because we have with us Mr. Dan Saffer, who is one of the brilliant designers over at Smart Design. He just came out with a fabulous new book called “Microinteractions.” We’re going to talk about microinteractions today.

He is also teaching a workshop at the User Interface 18 Conference, which is going to be October 21st to 23rd in Boston. He’s speaking on the 23rd, a full day of designing microinteractions. I’m very excited about the workshop and the new book and talking to Dan today. Hi, Dan.

Dan Saffer: Hello, Jared. Glad to be here.

Jared: Thank you for joining us. This is just so awesome. What is this microinteractions thing that you speak of here?

Dan: What is microinteraction? Microinteractions are the small pieces of functionality that exist around or sometimes in place of larger features. The example that I give and I start the book off with is turning the ringer off on your phone.

Nobody is buying your phone because you can turn the ringer off, but it’s still this little important piece of functionality that if it’s not there can cause a lot of problems. People, if they’re struggling to find it, will return the phone. There are all these little pieces of things that can be really important to the overall user experience of your product.

Jared: It’s an interesting thing, that ringer-off button. I remember having generations of phones that didn’t have that. You would discover in the middle of a movie that you hadn’t turned off your ringer and have to dig the phone out and struggle and find the software menu.

Even on my iPhone, I’ve noticed that a lot of people don’t know that if you press the lower-volume button or the little button on the top when a phone is ringing, it actually makes it quiet. You just have to find that button and press it. You don’t have to do anything else but a lot of people don’t know that, so they fumble with the screen.

Dan: Right. That’s it’s own microinteraction right there. It’s another little piece of functionality. It has what I call in the book these invisible triggers. It’s something that you may never discover, ever. How do you make that a little more discoverable or at least learnable? How do you latch onto something like that? How did you find that out, just by trial and error or was it something that you read online. Did someone mention, “Oh, you could do this.”

Jared: I don’t know. I think a lot of these are what I’ve been calling, “Socially transmitted functionality.” You find out, it’s drag and drop. You find out about it. You’re sitting there are you’re watching somebody.

I was watching somebody I was working with work a keynote. We were working on a presentation together. She just grabbed from the little color palette. She just grabbed the color and dragged it over to a word that was in the keynote slide and dropped it.

Suddenly, the word changed into that color. I’m like, “Whoa, whoa, whoa, what did you just do?” We had this sudden “Oh, my gosh, I didn’t know you could do that” thing.

Dan: There’s all, God, my phone is just chock full of those kinds of things. Your operating system is full of all those kinds of things. I mean, they’re just everywhere. It’s “Wait, I didn’t know that.” Socially transmitted is a funny way to put it, but yes.

Jared: I remember having, years and years and years ago, someone gave me one of these Casio watches that had 16 different functions. It had a built in thermometer and barometer, all these crazy things but it only had four buttons.

You had to know the right magic sequence of buttons. Of course, none of the buttons were labeled. There’s a button on the top left. There’s a button on the bottom left, a button on the top right, a button on the bottom right.

You had to find the right sequence to do anything. It was really overloaded, in terms of its functionality. I’m going to guess that a lot of micro interactions live in the land of overloaded functionality.

Dan: I think that’s probably true. As you were talking, I was remember back the little strips that you would put on your computer keyboards that you would remember, “Oh, this is what F9 does.” All those kinds of crazy things.

Jared: You know the craziness still happens. I’ve been working in Google Docs or as I like to call it, “The Land of Never Finding Your Document.” I notice that they now have keyboard shortcuts for bullets and numbers, but the keyboard shortcut is command shift seven for numbered lists.

For bullet lists, it’s command shift eight. I’m like, “How the hell am I going to remember that?” I have to move my mouse over the thing to get the tip, only to, “Well my mouse is already there. I might as well just click on it.”

Dan: There you go. [laughs]

Jared: Let’s go back to the buttons. Microinteractions isn’t limited purely to just buttons, right? It’s gestures and mouse movements and it’s even things that the device does on its own.

Dan: There are two ways that any kind of microinteraction gets triggered. One is a manual way where you are pushing a button, clicking on something, waving or a voice command, or any of those physical ways that you’re doing things. The other way is a more system-initiated trigger, where a certain set of conditions are met. When I get near my Nest thermostat, it has a proximity sensor. It turns on and shows me what the temperature is.

Some of the examples I give in the book are when you’re reading on Instapaper on your phone you start to tilt the phone, but then you jerk it back really fast because you don’t want it to change the orientation of the text. It pops up this little thing that says, “Do you want to keep the rotation lock on there?” You’re like, “Sure. Yeah, I do want to do that because I’m reading on the subway or whatever it is.”

It’s these really great little moments like, “I didn’t have to go search through settings to go find that. It intuited what I really needed at that moment. That set of conditions happened, and it popped up the micro-interaction that could use right there. I really love it.”

Jared: That’s one that works well. The one that I find that’s very amusing is, every so often I look at my phone and it says, “Nothing to undo. Cancel.” I guess on the iPhone there’s an undo function for typing, which is shaking your phone, but nobody knows that. Every so often, my phone will shake. Like, I’ll take it out of my pocket. It will have gotten into that mode, and it will say there’s nothing to undo.

Dan: Depending on what you’re doing, shake can also be shuffle. That’s another one. I forget. One of the new Google apps, it might be the new Gmail app, if you shake it really hard, it thinks that you’re angry at it, and it brings up a thing that says, “Do you want to send feedback?” I think that’s really funny. “You damn phone.” It pops up this little thing.

Sometimes it depends on what app you’re in or what mode you’re in, what’s the trigger in that particular thing.

Jared: In this day and age, anybody who’s doing any sort of app, whether it’s desktop or mobile or even just building some content-related stuff, there are microinteractions involved in that.

Dan: There are microinteractions involved in every product. The question is whether you’re actually going to spend the time and care to make them the best that they can be. In my opinion, you’re only as good as your worst microinteraction. Your product can live or die based on the microinteractions that you have with it. There’s a lot of things that are completely undifferentiated, but if you have some really nice microinteractions around it, that makes all the difference in the world.

An obvious example is your operating system. Most operating systems are doing the exact same things. You can launch applications. You can put things in a folder. You can do blah-blah-blah. How all those things work is all about people focusing on the microinteractions inside the operating system. The same is true with your phones. Both Android and iOS and Windows phone, they all take calls. They all take texts, but it’s all about the microinteractions of the operating systems on those devices that really differentiate one from the other.

Jared: If I’m developing, let’s say, an online banking thing — I’m working on paying bills and stuff like that — do I have to worry about the microinteractions, or is that all taken care of by the operating system?

Dan: No, no. Let’s start with the most basic microinteraction. There are things like logging in, choosing A password, even just what happens when you launch the app. What happens when you’re pressing on/off? How does it power up? What happens that first moment that it turns on?

There’s this great app, Waze, which is a navigation app. When I turn it on, it launches a microinteraction that says, “It’s 6:00. Are you going home now?” This is at night when I leave my office and I turn it on. It doesn’t start from zero. It knows something about me. It knows something about my use of the app and can offer me choices based on what I’m already doing. In this case, all I was doing was turning it on at a particular time. It launched this little system trigger. “Oh, it’s 6:00. You’re at your office. You’re probably going home.”

I think those are the kinds of things that no matter…You could be working a financial services app. When I launch this app, if every time I launched this app and I go to check my account and transfer money, maybe after a couple times, that should be a default thing that pops up and says, “Hey, are you trying to do this? Is this something that you might be interested in doing?”

It’s those moments when it’s like, “Wow! Somebody thought about me, thought about my needs, about what I was going to use this for and what I do use this for,” that I think really makes a lot of customer loyalty. It makes people really love your product and really want to use it, even if they’re doing something “boring” like financial services or that kind of thing. It makes people really appreciate your product because it feels designed. It feels like somebody cares about my needs and my use of this thing.

I think no matter what you’re working on, paying attention to the microinteractions is always going to improve your product.

Jared: I think that there are some things to that. I recently signed up for the Starbucks app. I got myself a Starbucks prepaid online card. Now I can go into the Starbucks, and I can just hold up my phone. It has a little barcode. They scan it, and they charge it against my card. It’s a fabulous way to basically pee through money.

The thing about it is that it has this neat interaction, but the first time it happened it startled me a little. You can tell it which Starbucks are your favorite Starbucks. When you go near them, it reminds you that you’re there, but more importantly…

Like, I always get something at the airport before I get on the airplane. It reminds me that I’m at terminal B at Logan Airport. When I click on the reminder — this is while my phone is off — t gives me this reminder thing while the phone is in the dark state. When I press on it, it then automatically brings up the gift card thing. I haven’t logged in. I haven’t had to put in my password, but at that Starbucks, I can just scan my card without having to press 15 keys. That’s really sweet.

Dan: That’s ingenious of them to get you so easily to spend money.

Jared: Well, that’s Starbucks’ number one superpower.

Dan: For sure.

Jared: OK, I get this microinteractions thing. It feels to me like this is one of those things where our design processes aren’t very good at making sure we’ve got our bases covered here, and that when all these cool microinteractions we’ve talked about happen, it’s almost accidental in the process. It’s like, “Wouldn’t it be cool if…?” It doesn’t feel to me like we have a good way of making sure that we are tracking all the microinteractions and, more importantly, that we are not putting in clumsy, awful microinteractions and not realizing it.

Dan: Right. When I started thinking about this and writing about it and doing the book, as I stated to think about all the standard microinteractions there are, turning things on and off, logging in, changing your password, adjusting a setting, all those kind of things, I was like, “Oh my god! These are the things that we ignore until the very last minute.”

It’s like, “Oh, right. We need to wait for people to log in to get you things.” I think they are often really overlooked. In some cases, that’s OK. In some cases, you can deal with a dull login screen, for instance. It may not kill you. But in some cases, it can be really detrimental. If I can’t log in, it doesn’t matter how great your feature is. I’ll never get to it.

We forget about what’s dismissively called “product hygiene.” People just expect it to be there. But I think that, particularly when you actually take care and do and look at this stuff…

What I’m trying to do with the book is give people a model to start looking at these particular things and saying, “This little piece of functionality has got these four parts. Maybe if I turn the dial on one of these pieces of it, I can make it a lot more interesting.”

That was what I was trying to do, was make a model so that you can look at, “Hey, there’s this icon sitting at the top of my laptop. It’s dull when I click on it. It pops up this little thing. It’s just sitting there. It’s blah. That would be the first thing that people engage with every day with my app. Maybe there’s something better that I can do with it. What is it that could make that more interesting, more valuable to the people who are using it?” They are these things that, because they can be so easily overlooked, they often are.

A lot of people have talked to me. “How do I get time to do this?” It does take some extra time. One of the reasons I wrote the book and tried to say, “All these things that you’re doing? They’re microinteractions. We’ll start calling them that name,” although people have been using the word “microinteractions” for many, many years. If you’re able to say, “Here’s this thing that I want to spend a little bit of time on” — really, they don’t take that much time — then you improve your product.

I was laughing. We were doing a project here at Smart Design a couple weeks ago. It’s for video calling. There’s a little privacy thing so you could turn off the video part of your call and just have it be voice or have it be muted. We came up with this little microinteraction. When you go private, a little shade pulls down over your little avatar picture of the video.

Jared: Oh, nice.

Dan: It took us a couple hours to come up with this thing. We showed it to the client. Literally, it was like we had reinvented sliced bread. They loved it because it took something that…You could’ve just grayed it out or something like that, but just by making it a little bit more interesting, it became like, “Wow, this is something we could sell. This is something that our marketing team will like.”

This is something we call a signature moment for you. If you do these microinteractions really well, they can become part of the brand. They start becoming part of the product. People expect it to be there in future iterations of your product or if you take your product to another platform, they expect it to be there.

Jared: The other day, I was flying on Southwest Airlines. I got up to the front of the line. You can hear the tone that the scanner makes when they scan a boarding pass to check in someone. It’s the exact same tone that’s in their commercials. They have apparently trademarked the tone that they use for checking in. They now use it in their marketing. When you’re standing in line to get on the plane, you hear it 60 times for all the passengers before you, so it becomes this thing. It’s very distinctive.

Dan: Yeah, I know. It’s a complete, what they call, earcon. It’s a really great thing. There was the article that came out this week about Facebook. The new Facebook sound is actually the notes F, A, C, E, like a F major seventh chord, or something like that.

Jared: Oh, really.

Dan: They are trying to make a little signature moment out of that little sound, and Facebook is the king of this. The “Like” button is an amazing microinteraction that is such a signature moment for them.

If they came out with a product that didn’t have a “Like” button. You would think it was broken. You’d think, “What are they doing? Why did they get rid of the “Like” button?”

We’re seeing this now with Microsoft, with the Start button. They launched the new Windows without the “Start” button, and people are like, “This isn’t a Windows product. Where is the Start button. Where is that thing that I turn to all the time?”

Jared: Yeah. Just this week, they’ve put it back in.

Dan: Exactly. They’re like, “OK. We give up. You can have the Start button back.”

Jared: Yeah. That’s very funny that it’s there.

Dan: One last one, which I like, because I can tell the joke about it is that “You’ve got mail.” That has lasted longer than AOL has lasted. I mean, that was such a signature moment for them, that they made a movie out of it. It’s such the thing.

Jared: Yeah. The video conferencing thing you mentioned reminded me, back in the day, I worked on one of the first PC video conferencing systems. We were doing usability testing on people, and most people had never ever used video conferencing before. They had only ever seen it in science fiction movies, so it was really foreign to them.

We did all these prototypes. In the prototypes, you would start the connection up and the person you were talking to would immediately appear, and you’d immediately appear. We found that this freaked people out. They didn’t like the idea that they were instantly broadcasting.

What it was they needed a moment to get ready, and the way we fixed it was we had an intermediate state. You would say, “OK. I want a video conference.” The first thing it would do is it would put up a window with your picture in it, so you could see yourself.

This was actually technically really hard to do, because we were running these things on 386 processors. Showing the video from my camera, and then showing the other side was computationally difficult. We had to come up with a way of making sure that we didn’t make it look clumsy, because of the hardware constraints, but at the same time put this up.

We found that if we just for a few moments let them see themselves, so they could adjust their hair and make some comment about, “Oh, this is not a good day for me,” and then connect to the other person, then that was suddenly OK.

It was interesting, because we had modeled the whole connection after a phone call, but you don’t preview your phone call. We needed this new thing that never existed before.

Now when you fire up FaceTime on an Apple device for example, you get that. You get a moment while it’s dialing of seeing yourself, to adjust yourself. It’s a little mirror of what is going to be transmitted, and then the other side connects and it’s right there.

That all started with the design we had, but this was like a new social convention that we had to put into what we thought was a pretty well-established social protocol of how you make a call to somebody. We had to add this new thing, because we needed this new microinteraction.

Dan: Exactly. In the book I make the case that the history of technology and the history of microinteractions are all intertwined, like as technology changes, the microinteractions around them have to adjust, or improve, or get enhanced based on the changing technology.

I mean, if you look at things that we think of that are totally basic now like the scroll bar, how that has changed in the last 40 years from something that is super primitive, that only you could scroll like one line at a time to now scroll bars that disappear and that are super thin, because they only appear in using your finger for them, just stuff like that.

The micro-interactions have totally changed as the technology is changing. So things like the video call is a great example. Here is something that people are coming to with different expectations, because it is new technology. We are not aware of them, until we start to play with them. Sometimes they need these little microinteractions around them to help manage them and to help make us feel secure in how they work.

Here’s a great one; it’s checking your teeth or something before you go out on a date or something like that, or you are seeing someone for the first time, or something like that.

Jared: Yeah. It’s interesting that the technology sort of demands these little pieces of attention. Of course, one of cases where it is really annoying is filling out one of those forms where it only wants to give you one error message at a time.

You press the button to do the thing, and it says, “Oh, wait. You haven’t put in your birth date.” You go, and you put in your birth date, and say, “OK. Is that done?” It says, “Oh, no. No. You haven’t put in the security code.” “Well, OK. I am going to put in the security code.” “Well, no. You didn’t do the CAPTCHA right.” It’s like, “Can’t you just tell me everything up front?”

Each of those loops through the validation system, those error messages and stuff, that’s a microinteraction, and it’s really annoying.

Dan: Oh, sure. Any situation where you may encounter some kind of error is almost always some kind of microinteraction, and figuring out like ways to either prevent that from happening.

I talk a lot in the book about preventing human error or preventing ways for your system to be abused either accidentally or on purpose by users. I think those are important moments. When things do get messed up is also a great time for your product to show a little bit of personality.

Error message and stuff are a great way to convey, “Hey. We are human. Something bad happened. Let’s figure out to fix this together, and let’s be reasonable about this.” I think that errors in particular are really great places for microinteractions.

Jared: Yeah. Just doing clever things like saying, “OK. So you didn’t put in your birthday. Maybe in the error message box, I’ll give you a way to put in the birthday.” Just not make it feel like, “Oh, you were stupid. You filled out the form wrong,” but “Hey. I just need one more thing. I need that birthday from you.”

Dan: Exactly. Instead of making you like, “OK. Now I have to go back and scroll through the entire form again looking for that. What’s the thing that I didn’t do?” It makes you feel like an idiot.

Jared: This is really cool. In the workshop that you’re giving at UI18, you’re going to go through the framework, and you’re going to help people understand how they hone in on this stuff, and really make sure that their applications and their designs have the right micro-interactions.

Dan: The framework has got four parts, and basically the workshop is divided up into four main chunks. The first thing we do is talk about the triggers, which we touched on here. How do you design manual and system triggers? Trying to figure out what the user behavior is there that could cause triggers to happen.

Then we go into the rules where we figure out: What are the rules of the system? Have you played this microinteraction? What are ways that we can make the rules so that errors don’t happen, or so that things are more streamlined and more efficient?

Then in the afternoon, we talk about feedback. We get deep into everything from visual feedback and some animation, even some talk about writing microcopy. How do we write microcopy in a way that is really polished and that really speaks human, so that human beings can actually respond to it.

Then the last bit is all about that kind of loops and modes, which make up the meta part of microinteractions.

Then at the end of the day, we put everything together and design a couple of sample ones, and make sure that everything that you have learned the entire day is all put together so that when you leave, you can immediately go back to your desk and think about the model, and really just dig down and start polishing the microinteractions wherever you find them, and in doing so, making your product something that is really interesting and that people love, and not just tolerate.

Jared: That sounds fabulous. I am really excited about the workshop. I can’t wait to attend it.

This has been great. Thank you for taking the time to talk with me about all this today. I am really excited about this.

Dan: I am super excited too. I think the workshop is going to be great, and I am really excited about the topic. I think it’s something that people really can go and immediately start using. I bet a lot of people will be like, “Now that I’ve heard about microinteractions, I can’t stop seeing them everywhere.”

Jared: Yeah. It’s just amazing. Everybody, you got to go out right now. Here’s what I want you to do. I want you to go to the Amazon, and then type in “Microinteractions,” all one word, It will present you in the search engine results the name of the book “Microinteractions.” You go there, and then there is a button on the right that says, “Buy Now.” Go get that. Do that right now.

Also checkout the UI18 Conference workshop that Dan is giving. You can find that at UIconf.com, because that is going to be really amazing.

Dan, thanks again for taking the time to do this.

Dan: Oh, my pleasure. Glad we had this macrointeraction.

Jared: Yes. It was pretty awesome.

I want to thank the audience again for spending the time. Please go to the iTunes and let us know what you think of these podcasts, if you like them, if you don’t. We love the reviews. We love to hear from you.

Of course, thank you again for encouraging our behavior, and we’ll talk to you soon. Take care.

Add a Comment