Microinteractions: How to Design Product Details. An introduction to microinteractions, based on the book.

1. dan saffer // @odannyboy
#microinteractions
microinteractions

2. design is not only about solving wicked problems
Over the last decade, designers have been encouraged to think big, to solve “wicked problems,” to use “design thinking” to tackle massive, systemic issues in
business and in government. No problem is too large to not apply the tools of design to,

3. focus on details that delight
But by working at such a macro scale, an important part of design is often lost: the details that delight. Products that we love show an attention to detail: the
beautiful curve, the satisfying click, the understandable mental model, or a piece of feedback that makes you smile. This are hard to accomplish when you are
working on a big scale.

4. change the world from the bottom-up
This is another way to work: not through grand, top-down design projects, but from the bottom up, by crafting—lovingly, with care—small
things. This is something designers can do quite well, with immediate, tangible results. This is another way to change the world: by making
seemingly inconsequential moments into instances of pleasure.

5. microinteractions do one task well
Microinteractions are contained product moments that revolve around a single use case—they have one main task. They are
everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the
environments we live and work in.

6. microinteractions are contained product moments...
change a setting
sync your data/devices
log in
set a status message
favorite or like something
give a rating
export
format
make a calendar event
add a contact
search
make a comment
These are the kinds of interactions we often overlook or save until last, as an afterthought. All of these could be boring, nothing moments, or
they could be thoughtful moments of delight.

7. Every one of these is a Trigger for a microinteraction

8. microinteractions are good for...
accomplishing a single task
managing an ongoing task
connecting devices together
interacting with a single piece of data
controlling an ongoing process
adjusting a setting
viewing or creating a small piece of content
turning a feature/function on or off

9. Microinteractions fit well into our multi-
platform existence. Small interactions
work well on small devices.
Microinteractions are the glue that can tie together features across mobile, TV, desktop, appliances, and web. While the
microinteractions could vary by platform, their small size allows for a consistency that you might not have with large features.
Twitter is an excellent example of a microinteraction that has scaled across devices.

10. !
When someone posts on your Facebook page in a language that isn’t your default, Facebook offers to
translate.

11. On YouTube, the favicon changes based on whether the video is buffering, playing, or paused.

12. OS X Mountain Lion - When you trigger the Speech & Dictation dialogue, the fans on your machine immediately go to
minimum speed to prevent background noise.

13. The history of technology is also the history
of the microinteractions that frame, manage,
and control them.
Indeed, as technologies have changed, the microinteractions that
support them have also changed.

14. these were once novel microinteractions...
cut and paste
opening multiple windows
joining a network
drag and drop
drop-down menus
The tiny things we unthinkingly interact with every day on desktops, laptops, and mobile devices were once novel
microinteractions: everything from saving a document to organizing files into folders to connecting to a wifi network were
all microinteractions that needed to be designed. Even "basics" like scrolling and opening multiple windows needed to be
designed and engineered.

15. an OS is a collection of microinteractions...
install and launch applications
manage files
connect software to hardware
manage open applications/windows
and so on
Almost all operating systems, be they mobile or desktop, do basically the same things: install and launch applications,
manage files, connect software to hardware, manage open applications/windows, etc. But the difference between operating
systems—at least from a user's perspective—are the microinteractions you have with it on a daily, even hourly, basis.

16. Scrolling, for example. Look at how thin the scrollbar gets with the appearance of it on a touch
device.

17. features
are multi-faceted
have multiple use cases
are longer in duration
require a large cognitive load
can be complex

18. microinteractions are
shallow
thin
rapid
often forgettable
frequently overlooked
So why bother with them?

19. The difference between a product you love
and one you tolerate are often the
microinteractions you have with it.
If you care about user experience, you should care about microinteractions. They can make our lives easier, more fun, and
just more interesting if done well.

20. People notice when you care! It sends a message of quality.

21. Slate has identified two microinteractions – reduced pagination and in-place comments – as premium features they
believe customers will recognize as desirable and worthy of some fraction of the $5/month purchase price.

22. If you care about user experience, you
should care about microinteractions.

23. Microinteractions are
the “feel” in “look and feel.”

24. If microinteractions are poor, the main
features, no matter how nicely done,
are surrounded by pain and frustration.
Pebbles in your shoe

25. The reason the original (G1) version of Android felt so unpolished was because the microinteractions were clunky, especially in
comparison to the iPhone; for example, deleting items was inconsistently triggered, and in some applications pressing the search
key did nothing at all.

26. Paying attention to the details as well as the big
picture so that users have a great experience
using the product.
experience design
In competitive markets, microinteractions are even more important. When there is feature parity, it is the experience using the product that increases adoption
and brand loyalty. The overall experience of a product relies heavily on its microinteractions. They are the "feel" in look-and-feel. One reason Google Plus fell
so flat against Facebook was that its microinteractions, such as sorting users into circles, became tiresome and gimmicky.

27. If done well, microinteractions can be
signature moments that increase adoption
and customer loyalty.
Like Button or You've Got Mail! They can create a differentiator that isn't just a feature and is thus
harder to replicate, and they provide something highly marketable that clearly sets brands apart.

28. Now that I’ve hopefully convinced you of the importance of microinteractions, how should we go about designing them? What makes effective
microinteractions is not only their contained size, but also their form. A beautifully-crafted microinteraction pays attention to all four parts of a
microinteraction.

29. TRIGGER
The first part of any microinteraction is the Trigger. There are two kinds of Triggers: manual and system-
initiated.

30. What is the proper control for context and
user need?
manual triggers

31. An example of a Trigger. Adding to Control Center and the quick-launch Camera icon, Apple has built a new kind of shortcut into the Lock
screen. You can’t start any old app this way, but location services will plug your iPhone into the world so that when you walk into a Starbucks or
Apple Store, the appropriate icon will appear in the bottom-left corner. As with the camera icon, just slide up and you’re in business. Of course,
Slide to Unlock is its own Trigger as well.

32. !
The Disqus sign-up form guesses your name based on your email address.

33. When you type a question-mark in Tumblr a “Let people answer this”-
checkbox appears.

34. Tumblr for Android - pressing the “create" button for a long time lets you
easily choose one of the two most frequent kind of posts (photo or text

35. !
!
Some Triggers are invisible (touchscreens). Akismet has a clever invisible Trigger. When someone right-clicks on their
logo (presumably to save it), Akismet shows a window with several different resolutions.

36. What can the system intuit about need from user
behavior?
system triggers

37. Nest Protect’s Nightly Promise. It’s a quick green glow when the lights go out that means the batteries and sensors are working. It
also means no chirps at midnight. If there’s an issue, like the batteries need replacing, the light ring will glow yellow. Also has a
manual trigger: Just wave at Nest Protect and it will tell you what’s wrong.

38. !
Deliveries app checks if there is a tracking number in the clipboard on launch, and if so, a system Trigger launches
another microinteraction. It’s also smart enough to indicate from which courier the number is from.

39. !
In the Instapaper iPhone app, if you accidentally rotate the phone between portrait and landscape mode and then
quickly rotate it back, the Rotation lock setting appears.

40. Bring the data forward

41. Apple’s weather app infuriates me because it’s such a missed opportunity to bring the data
forward. Would putting the high temperature on there kill you?

42. !!
Windows Phone, the messaging icon (a Trigger) changes to a sad face if there was an error sending a
message.

43. !
Google’s Chrome browser icon (the Trigger to launch it) also indicates active downloads and download
progress.

44. Amazon brings the data forward here, showing you what the most common delivery time is.

45. TaskRabbit brings the data forward here, answering the question, “How much should I offer?”

46. RULES
Once a microinteraction has been initiated, it engages a set of rules and behavior of the microinteraction. In other words: something happens.
This usually means turning a feature or a set of features on, but it might show the current state of the application or device. It might use data to
guess what the user wants to do. In whatever case, it turns on (at least one) rule, and those rules can usually be defined by a designer.

47. The Rules determine what can be done and
what cannot.
The invisible constraints of the system. Rules may or may not be entirely known to the user, and they reveal themselves in two ways: by what
can be done and by what cannot. Both of these can be an occasion for Feedback.

48. rules determine
how the microinteraction responds to the Trigger being activated
what control the user has (if any) over a microinteraction in process
the sequence in which actions take place and the timing thereof
what data is being used and from where
the configuration and parameters of any algorithms
what Feedback is delivered and when
when to switch Modes
if the microinteraction repeats and how often (Loops)
what happens when the microinteraction ends

49. the rules of a lamp
1. turn on when switch is flipped
2. stay on at full brightness until switch is flipped again
Take what is probably the simplest microinteraction there is: turning on a light. Once you use the trigger (a light switch), the light turns on. In a basic light set
up, there is a single rule: the light stays on and fully lit until the switch is turned off. You can change that rule, however, by adding a dimmer or a motion-
detector that turns the light off when no motion is detected. But the basic turn on switch/turn on light rule is very simple rule, and one that becomes apparent to
anyone who uses a light, even a child.

50. the rules of a lamp with a motion detector
1. check every two seconds for movement
2. movement detected
3. is it enough movement to turn on?
4. turn on
5. check every 10 seconds for movement
6. if there’s no movement for 30 seconds, turn off
You can see that conditionals and algorithms begin to play a part here, and those add complexity to the rules.

51. !
An example of a Rule. When you're using the music-streaming service Spotify and then turn it on on another platform, the first instance of Spotify pauses. If you resume playing on
the first instance, the second platform will pause. This creates a very frictionless, cross-platform service.

52. Example of a Rule. HelloFax when you cross the limit of pages you can still send with one page, you can send the last page for free.

53. Rules can stop users from abusing your microinteraction. On What Do You Love? if you put in a word like Sex, it gives
you results for Kittens instead.

54. Prevent Human Error

55. Rules can also help prevent human errors. Gmail- Notification before sending email

56. !
If you press the search button on Make Me a Cocktail with nothing in the search field, instead of displaying an error message or nothing, it shows a random cocktail.

57. Meetup.com - When there are no results within a particular distance, the search distance expands until it can find a
result.

58. Don’t start from zero.
In almost every microinteraction, you know SOMETHING about the context of use, even if it’s just the time.

59. Navigation app Waze knows when I open the app in the late afternoon, I’m probably driving home and presents this as an option.

60. !
Pro Flowers uses the date to show you the next big holiday when selecting a delivery date.

61. Rules can also help make selections. Why do you ever need to select a credit card type??
Github - Credit card autodetection by number

62. FEEDBACK

63. Feedback (or the lack of) is what allows us to
learn the Rules.

64. !
Twitter’s password form is a great microinteraction, with very clear feedback.

65. An example of Feedback showing the Rules. MailChimp shows you what can’t be done, by having the poor chimp’s arm stretch so far, it pops
off when you try to make an email too wide.

66. Feedback doesn't have to be visual. Sounds from GE's high-end professional brand, Cafe.

67. Use the overlooked.

68. !
Since rules are invisible, it’s up to feedback to let user know what’s going on. In Coda2, the Process My Order button becomes a progress bar when pressed.

69. !
When trying to find a word on a page, Chrome indicates in the scrollbar where instances of that word
appear.

70. Cornerstone - The number of segments in the spinning activity indicator equals to the number of running activities.

71. Speak human.

72. !
The Threadless shopping cart face turns from frowning to happy when you put items in it.

73. !
Humans respond to faces. The Boxee logo turns orange and “goes to sleep” when there is no internet connection.

74. !
The gMail iPhone app shows what not to do: randomly put a smiley face for a message that isn’t necessarily a happy one.

75. Dropbox - When there is a long upload time remaining, it suggests you ‘grab a snickers’.

76. Google Voice - When typing an SMS, the counter changes to “Really?” when your message reaches a certain
length.

77. LOOPS & MODES
The last part of microinteractions are the Loops and Modes that make up its meta rules. What happens over time with the microinteraction: do the interactions remain until manually turned off
(as is the case with the mute switch) or do they expire after a while? What happens during an interruption or when conditions change?

78. !
A mode from Apple’s Weather App. The best reason to have a mode is when there is an infrequent action that would otherwise clutter the microinteraction's main purpose.

79. !
If a video is buffering for too long, the TED site offers users the option to download it for later.

80. When you click multiple Add Friend buttons too fast, Facebook shows a warning.

81. Use long loops.
What happens when people use the microinteraction for the first time? For the seventh time? For the 700th time?

82. Spotify - The “Added” column on spotify fades as it gets older.

83. Loops over long periods of time. Foursquare thanks you on your anniversary.

84. Chrome - Update indicator turns brownish color (originally green) when its been neglected for a long time. Reminiscent of fruit going bad.

85. !
On eBay, if you've bought the same item in the past, the button changes from "Buy it now" to "Buy another."

86. Threadless - Knows whats in your shopping cart and sends an email to notify that some of the cart’s products are running out of stock.

87. Progressive Reduction from LayerVault. A user’s understanding of your application improves over time and your
application’s interface should adapt to your user.

88. Now that I’ve hopefully convinced you of the importance of microinteractions, how should we go about designing them? What makes effective
microinteractions is not only their contained size, but also their form. A beautifully-crafted microinteraction pays attention to all four parts of a
microinteraction.

89. Look for microinteractions...
When, during the course of design project, try to identify any possible microinteractions. Make a list of them, then treat each as such. For each
one, deliberately consider the structure as outlined in this book, and see if you can polish each individual component. You'll wind up with
elegant microinteractions.

90. ...or treat everything as a microinteraction.
Reduce more complex applications to individual products that are each built around one microinteraction. This is microinteractions as product strategy: your product does one
thing and one thing well. Reduce the produce to its essence, its Buddha Nature. If you find you want to add another feature to your product, that other feature should be its own
product. Many appliances, apps, and devices including the original iPod follow this model. This is how many startups work (or at least began), from Instagram to Nest. The
"minimum viable product" is usually one microinteraction.

91. The details are the design.
Charles Eames

92. This is hard. Duh.
Most places, particularly agencies, aren’t set up to work this way.

93. Thank you!
http://microinteractions.com
Special thanks to Little Big Details and
its contributors for many of these examples.
Microinteractions matter, that the designer's job is to take the tasks that could otherwise be frustrating and difficult and make
them otherwise. Details demonstrate that some care, some thought, some attention has been paid. Think small, and
change the world.