Published: April 2014
Dan Saffer talks to Gerry Gaffney about Microinteractions, Signature Moments, and the importance of detail.
Gerry Gaffney:
This is Gerry Gaffney with the User Experience podcast. My guest today is an interaction designer based in San Francisco. He’s the author of four books to date: “Designing for Interaction“, “Designing Gestural Interfaces,“ “Designing Devices“ and, most recently, “Micro-interactions; Designing with Details.“
Dan Saffer, welcome to the User Experience podcast.
Dan Saffer:
Thanks, it is great to be here.
Gerry:
Now, I guess let’s start with the obvious question; what is a microinteraction?
Dan:
What is a microinteraction? Well, microinteractions are things that we’ve been designing for years but we never really had a great name for them, and for years a couple of people had been using the term ‘microinteraction’ but it wasn’t in common use and so I thought, well, wow, this would be the perfect title for all these little bits of things that a lot of people spend a lot of time on to really get their products really polished.
So, for me microinteractions are all these little bits of functionality that are around the main features, or they can be inside the main feature. They’re things that we don’t even think about very often. There are all these little bits that make up the entirety of the user experience. I like to think of them as being the feel part of look and feel.
We all know what the look part of look and feel is but we don’t really think about what the feel part is. For me it’s all these little microinteractions that make up that feel part. And they’re all these little things like Search or like changing a setting or, the example that I use at the beginning of the book is about turning the ringer off on your phone. And it’s such a small thing, It’s something that’s not going to appear in the advertising or on the side of the box or anything like that but it’s all these little small things that can make such a big difference to your product.
Gerry:
I guess in a way your description of it there reminds me of, you know, the old days, I don’t know how many years ago but when one compared iOS with early versions of Android, for example. The polish that existed in iOS was partially I guess down to microinteractions.
Dan:
And that’s exactly right. The example I use in the book is going back to the yeah, going back to the first android phone, the G1… It did everything that the iPhone did. You could make a call, you could get a text, you could download apps. It did everything but the microinteractions were really very unpolished. The Back button sometimes didn’t work. The Search button sometimes didn’t work or when the Back button did work, it took you to places that you weren’t expecting.
So there was a lot of issues with the original Android phone and many of which they’ve polished and made a lot better and unsurprisingly the adoption has taken off. You know, partially I think because it started to be equal to the iPhone in feeling polished and feeling like a quality product.
Gerry:
Indeed. Now in the book you’ve got a definition of microinteractions. You say that it’s a “contained product moment that resolves around a single use case, a tiny piece of functionality that only does one thing.”
But, and I guess, you know you’ve given us a bit of a flavour for what a microinteraction is, but isn’t it very hard to pin it down? For example, one could almost argue that an OK button is “a tiny piece of functionality that does only one thing.”
Dan:
Yeah, it is very hard to pin down and one of the criticisms of the book, which is fair, is that yeah that the definition kind of expands and contracts based on who’s looking at it and yeah if you spent a lot of time thinking about an OK button you could in fact turn it into a microinteraction, if it had a really unusual piece of feedback to it or if it had rules about when it appeared, it could really be a microinteraction instead of just a widget or a piece of a larger whole.
And in fact at the end of the book I talk about how one way of actually designing with microinteractions is to take something that would normally be a feature or a big part of the product and really break it down into all these little microinteractions that you have with it and just string them all together and really look at them through the lens of the microinteractions model that’s in the book, looking into each different part, the triggers, the rules, the feedback, the loops and modes, and really focusing on each little bit through that lens is another way to do it.
Gerry:
Maybe you could give us a couple of examples of things that are undeniably microinteractions in your view, maybe, you know, classic microinteractions.
Dan:
The ring on your phone is a great example and, like I say, that’s the one that leads off the book and that’s a really kind of classic example of something that people would think of as being product hygiene. You know, they kind of dismiss it and say, oh that’s not something that anyone really cares very much about; it’s not a big feature. But it’s something that...
Gerry:
Tell us that story, Dan, by the way, that you kick the book off with. I’m sure you’re a bit tired of telling it but I think it’s a very useful anecdote.
Dan:
Oh, sure. So the story is that a couple of years ago at Avery Fisher Hall, which is this premier concert venue in New York. The symphony was there and they were performing Mahler’s Ninth and in the very end of the symphony someone’s iPhone went off, and everyone went crazy, and the conductor stopped the orchestra, and people started yelling, and the poor fellow whose phone it was had just gotten his iPhone the day before and he had turned the ringer off of his phone and he had assumed that that would silence all the alarms on the phone, which of course that’s not actually how it works, that’s not how the rules of silencing your phone work for an iPhone. Now it could work like that and other phones do work like that but that’s not how the iPhone particularly works.
So when the alarm went off, he was just as annoyed as everyone else… ‘Patron X’ was the name that Avery Symphony Hall started to give him because they feared that he would, that there would be retribution sought against him by other people in the audience for ruining the symphony for them. And this thing made it to the New York Times, it made it all over the blogosphere and for me it was amazing just because, and I remember reading it in the New York Times and being like, wow, this really small thing that made it all the way you know that made it all the way to the New York Times, it made it all the way kind of around the world and I thought that was just a fascinating thing about how microinteractions can really make a difference, not just to individuals but for everyone around them.
There’s plenty of other examples; things like doing a setting or changing the volume or muting your conference call phone or even physical things like the light that goes on in your refrigerator could be thought of as a microinteraction. Things like the Search button or Pull-to-Refresh or things like Facebook’s “Like”. Facebook’s “Like” is a tremendously successful microinteraction.
We’ve started to refer to them as signature moments… A signature moment is a microinteraction that has been raised up to the level of a brand, that it’s part of your company’s brand. So if Facebook released a new product that didn’t have a “Like” button on it you’d wonder, you know, God is something broken? You know, what’s happening? Why isn’t there a “Like” button? I mean there’s t-shirts that say Like, you know, and so I think these are things that have been elevated in importance to users’ minds.
I think Microsoft found this out the hard way with Windows 8 and they got rid of the Start button and they didn’t realise that was a real signature, a signature moment for them. People were really used to the Start button and so when it wasn’t there they became disorientated, they became angry and that’s why they eventually added that Start button back into the operating system.
Gerry:
I guess you’ve given us an inkling from our conversation so far but what was it, why is it that you’re so fascinated by microinteractions? Is there a signature moment that fired off your interest, for example?
Dan:
[Laughs.] One of the things that really got me started, I mean obviously, you know I went to design school and at design school they pound you over the head with you know details and, oh you know if something’s off a little bit they’re like oh, they’re on your case about it, which is fantastic.
And then you move out into the professional world and especially in the kind of work that I do, which is consulting, and sometimes some of that gets lost because you’re working very fast, you’re working towards a deadline, trying to get a release out. But the thing that really kind of launched me on this path was thinking about when Apple a couple of years ago in their operating system removed “Save As,” which is the story that I tell at the beginning of Chapter 3. And I was irate about it because this little thing, you know saving a file with a different name, was part of my workflow and I used it all the time and I said to myself you know why do I care about this? What is it that’s making me so crazy? And I said well it’s a small thing but it’s so important. I mean, no new operating system is advertising that they have a “Save As”. It was probably once a novel microinteraction back, you know, in 1980 it was something new and unique but this has become commonplace now. And so changing it without putting anything better in its stead just drove me crazy.
So I started to think like, what are the things that I really love about all these different products that I use? And I started saying well, God there’s so many of them; the features are nearly identical to other features. Your operating system on Apple is not all that different from what it is on Windows. You can accomplish the same features. It’s just typically the microinteractions, how things are done. And I was starting to think like, wow, so it’s all these little small things, all these little details that really make a big difference in how I feel about the product.
And so for me I started thinking well that’s interesting that these microinteractions become this emotional delivery mechanism. They’re a way to create tone and create feelings in users just in how things are done. And I thought that was a really interesting, really interesting topic.
The other part of it was that the world had, on one hand the design world had gotten very large and said well, we should be thinking about redesigning whole systems and redesigning cities and redesigning ecosystems and all these other things. And so what I was afraid was going to get lost is the kind of human touches that really make those systems work and really make them feel like they were designed, that someone thought about them and that they were for people and that people were taken into consideration in these big systems.
And the other kind of input into the book was all about, kind of, the shrinking and the multiplicity of all the little screens that are now in our lives and microinteractions work great on small screens. You can have one microinteraction that works on your phone, it works on your laptop, it works on your desktop, it works you know on your, I don’t know, your dishwasher. You know it works; it can really tie whole ecosystems together in a really nice way.
And so I thought that that was another thing kind of pushing me towards like well what’s the kind of smallest, almost like with the atomic structure of some of these applications that we really need to get focused downward into small? So that’s when I started to think small.
Gerry:
Okay, now to get into the specifics, you describe in the book four elements of a microinteraction. Can you possibly run us very briefly through what each of those four elements is?
Dan:
Sure, sure. So, when I started looking at microinteractions I started to think like how could you conscientiously go about designing things, what are the kind of pieces of them? So the four parts that I came up with were:
There’s a trigger that starts a microinteraction, and that can be a manual trigger where I’m clicking, clicking a button or turning dial or tapping an icon. Or it can be a system trigger where a set of conditions is met. So an email arrives in my inbox and I get a little ping and that’s a system trigger.
The next part is the rules. So the triggers then say hey something happens and the rules kind of determine what happens, what the flow is of the microinteraction, what the sequence of it is and what you can do or not do in the microinteraction.
And since these rules are often invisible, as that case of Patron X helps us to understand, that feedback is really necessary to help us understand what the rules are. So feedback is the third part of microinteractions and then the last part is all about the loops and modes. So sometimes your microinteractions has to go into a bit of a mode to do a small side action and loops are about what happens when the microinteraction reaches the end. Does it loop back again? Does it keep repeating? Or is it a one-time thing? Or how does it change over time?
So I took the model and started to apply it to different microinteractions I was seeing in the world and it seemed to work. So, it’s a nice way to think about interactions and you can kind of use it as a diagnostic tool and say wow there’s, when you have like a dull microinteraction you can say oh well what’s the trigger here? Maybe I can put a system trigger here and make it more interesting or maybe the feedback is dull. Maybe I can adjust that or maybe it’s the rules that are too confining. Maybe there’s something that I can do with the rules.
So it was a way to not only create new microinteractions but to fix ones that were already there.
Gerry:
So clearly it’s necessary to be extremely detailed, focused, when you’re designing at this sort of level and you mentioned getting beaten over the head at design school but is this focus on detail something that comes naturally to you, or do you have any tips for designers to help them develop that sort of focus and strength of, you know, of vision I suppose?
Dan:
Yeah, I wish it came naturally to me. I have worked with designers for whom it does and I definitely envy them; that they’re just able to really have this laser-like focus. For me I really have to stop and force myself to kind of go into the weeds, to dig down into, like a deep problem area. I generally find that when I force myself to do it that I really enjoy it, that it is, it’s very kind of, it’s very satisfying from a designer’s perspective because it’s a very small kind of limited thing that you can polish and get really, really beautiful and really interesting.
So when I force myself to do it it’s very rewarding. Finding the time to do it is the trickiest part. So we’re trying, you know for instance in our practice to really set aside some time and to really, when we can, to really start pulling out moments that we think that microinteractions could be in that might be really important.
So, for instance, we did an iPad app for controlling a physical radio, and one of the things that we knew was going to be in this app was a volume control and so we said, oh well, a volume control, that could be something that’s really dull or it could be something really interesting.
So we definitely knew that we wanted to spend some time really polishing this volume control so that something that could have been really dull and whatever was actually this really nice, a really nice control because we knew it was going to be something that users were going to use all the time. And so we have strategically said this is something we need to focus on.
Gerry:
Do you work on paper a lot?
Dan:
I do. I mean, that’s generally how we do, is start with sketching for sure, either paper or whiteboard. Now, microinteractions are tricky to do at that level other than identify them, to really get them well, I mean the best thing to do is to start is some kind of, you know animation prototype because often the timing is so important for these things. So little movies or little animated GIFs or little After Effects movies or little things that you put together in Keynote, those kinds of things are really effective to design microinteractions.
Paper is hard. You can do it, you know you can sketch out different key frames or each little step of the microinteraction and we’ve certainly done that. But it’s hard and often time consuming. The tools have gotten so good now that it’s almost easier to take it into one of these really great prototyping tools and mock it up really fast than it is to sketch out every little moment in the kind of detail that you would need.
Gerry:
You mentioned a couple of tools, are they the ones that you generally use or are there any other ones that you’d point out?
Dan:
Well I mean sometimes when we’re doing mobile it’s all about starting with really simple things like POP app or Emotiv and then sometimes to get more fidelity we move into either HTML 5 or After Effects to really get a more polished movie out of it. And then when we’re doing hardware it’s mostly kind of sketching in hardware in things like Arduino and stuff like that to really get the right feel of it.
We do a lot of hardware/software projects at Smart Design because Smart started basically as an industrial design firm, and we still do a lot of things like appliances and consumer electronics and so that’s a really fun, it’s a really fun space to play in. And everything in the internet of things is perfect for microinteractions because there are these small products, small tiny things that are in your house or in your office. So it’s been great for that.
Gerry:
I guess the internet and things is part of a question I’ve got and that’s whether there’s a risk that by focusing on these, on the microinteractions and in particular in elevating some of them to signature moments that you end up with a design that’s inconsistent with general practice and hence hard to learn and use and it can kind of lead to fragmentation and confusion I guess. I’ve been looking at wearable stuff lately and, you know, each device seems to have its own paradigm. Is this a problem?
Dan:
Yeah, this is, I mean so the other day we were just looking at all the different ways there are for all these different devices to just simply connect to the internet and there’s so many different ways and each little device is different and each little device, you know, some of them charge differently and some of them how you get the data off of them is differently.
So there’s a lot of, yeah, there’s a lot of inconsistencies there because it’s very much, it’s very much the, in the US we say, you know, the Wild West where there’s no rules and no fast laws and very few, kind of, known design patterns that work across all the different kinds of devices.
So, you know, what does it mean when this thing that’s flashing? Does it mean that it’s out of batteries or does it mean that, you know, does it mean that I hit a goal? So, that’s one of the things that we deal with a lot.
Now there is a question with microinteractions and I don’t know if this is where you were going but things that kind of jump out and kind of stick out from the rest of the product, that’s something that a lot of people ask about; “Well isn’t this you know this one thing going to make this thing feel strange?“ And so there is a question of creative direction that I think is important when you’re wanting to polish things with microinteractions. You need to make sure that they’re consistent across the product and across the ecosystem that you have at a bare minimum and then, you know, trying to keep with any kind you know keep up with any kind of industry standard is also important as well.
And some of these microinteractions become industry standard. I mean we mentioned Pull- to- Refresh now, and that started as you know something on Tweety and Twitter and then it started to spread to many different mobile apps now where, you know, the top of the list you pull down and it pulls to refresh and now you’re actually surprised when it’s not there, when it doesn’t happen.
So I’m always like, oh, where’s the Pull-to-Refresh because I’ve gotten used to that little microinteraction across many different kinds of apps. Now of course there are people who are… and I’m pretty sure that Twitter has patented Pull-to-Refresh so the question is, you know, who gets to use it now that it’s becoming commonplace.
Gerry:
I guess with microinteraction design, as with any type of design, there’s a tension between, you know, the extent to which something should call attention to itself and the extent to which it should efface itself. Do you have any thoughts on that?
Dan:
Yeah, I think this goes back to what I was just talking about with definitely the creative direction part of it. Some of it, you definitely have to be aware of whatever context that you’re working in. The book, and when I’ve been talking sometimes has a lot of flashy or funny kinds of microinteractions that would be completely out of place in, you know, some kinds of enterprise software or anything that’s medical or those kinds of things. So you do have to be aware of that and kind of keep track of what the overall product strategy and what the overall context of use is going to be. So, that’s related, to me that’s a problem of creative directions, really keeping track of all these little things and making sure that they actually fit what it is that you’re doing. So sometimes you do have to, even if you come up with something really brilliant, sometimes it doesn’t work given that particular context. So, you know, that’s something that you put aside for another day and hopefully get to use in other products sometime.
Gerry:
The book is certainly far more than just a philosophical discussion of microinteractions as listeners will have gathered anyway. There’s a lot of detailed information and guidance. But besides reading the book, do you have any specific suggestions for designers who want to develop or hone their microinteraction design skills?
Dan:
I’d definitely recommend the blog Little Big Details, which has been collecting microinteractions for several years now and they were a huge help to me when I did the book. A lot of the examples were drawn from Little Big Details. So just subscribing to that and looking at that and seeing what other people have done is a really great way to start training your eye, to just start looking for them and that’s the real trick is to really start looking for them around and seeing like, oh, what are the different button states that are happening here? Why do they do that? What are the, you know, thinking about like what are the rules behind my microwave oven. You know, how does that work?
It’s really starting to kind of train your mind to take these little things and break them apart into pieces and think about how they were made and probably even why they were made and what the pieces of them are and then if you take it the next step you could sort of say well how could I improve this? How could I make this better? Even things that we think of as being very fixed and very solid you can definitely always improve. I teach a workshop on microinteractions and I always have people take something that they know, that they’re very familiar with like a checkout flow from let’s say Amazon.com. Take an e-commerce checkout flow and find where all the flaws in it are and where all the places for human error are and how could you use microinteractions to start fixing some of those places? And people come up with some amazing, incredible microinteractions that I want instantly in my shopping cart experience.
So I think there’s plenty of places to start thinking and imagining and adding microinteractions all around us. It’s just a question of training yourself to look for them.
Gerry:
I’ll remind listeners that the name of Dan’s excellent book is “Microinteractions; Designing with Details.” Sorry, is it “Details” or “Detail”?
Dan:
Good question, I forget. [Laughter.]
Gerry:
Oh, don’t worry we’ll find that.
But I have a very important question before you finish up, Dan, and that is what lessons can microinteraction designers garner from watching Game of Thrones?
Dan:
What lessons? Oh my goodness. Probably, you know, be careful who your friends are. Make good allies. [Laughter.]
Gerry:
Okay, Dan Saffer, thanks today for joining me on the User Experience Podcast.
Dan:
Yeah, you’re welcome. This was fun.
Published: April 2014
We make verbatim transcripts of the User Experience podcast. We may edit the transcripts, primarily to remove speech-specific elements that interfere with meaning in print.