Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
dan saffer // @odannyboy
#microinteractions
microinteractions
design is not only about solving wicked problems
Over the last decade, designers have been encouraged to think big, to sol...
focus on details that delight
But by working at such a macro scale, an important part of design is often lost: the details...
change the world from the bottom-up
This is another way to work: not through grand, top-down design projects, but from the...
microinteractions do one task well
Microinteractions are contained product moments that revolve around a single use case—t...
microinteractions are contained product moments...
change a setting
sync your data/devices
log in
set a status message
fav...
Every one of these is a Trigger for a microinteraction
microinteractions are good for...
accomplishing a single task
managing an ongoing task
connecting devices together
interac...
Microinteractions fit well into our multi-
platform existence. Small interactions
work well on small devices.
Microinteract...
!
When someone posts on your Facebook page in a language that isn’t your default, Facebook offers to
translate.
On YouTube, the favicon changes based on whether the video is buffering, playing, or paused.
OS X Mountain Lion - When you trigger the Speech & Dictation dialogue, the fans on your machine immediately go to
minimum ...
The history of technology is also the history
of the microinteractions that frame, manage,
and control them.
Indeed, as te...
these were once novel microinteractions...
cut and paste
opening multiple windows
joining a network
drag and drop
drop-dow...
an OS is a collection of microinteractions...
install and launch applications
manage files
connect software to hardware
man...
Scrolling, for example. Look at how thin the scrollbar gets with the appearance of it on a touch
device.
features
are multi-faceted
have multiple use cases
are longer in duration
require a large cognitive load
can be complex
microinteractions are
shallow
thin
rapid
often forgettable
frequently overlooked
So why bother with them?
The difference between a product you love
and one you tolerate are often the
microinteractions you have with it.
If you ca...
People notice when you care! It sends a message of quality.
Slate has identified two microinteractions – reduced pagination and in-place comments – as premium features they
believe cu...
If you care about user experience, you
should care about microinteractions.
Microinteractions are
the “feel” in “look and feel.”
If microinteractions are poor, the main
features, no matter how nicely done,
are surrounded by pain and frustration.
Pebbl...
The reason the original (G1) version of Android felt so unpolished was because the microinteractions were clunky, especial...
Paying attention to the details as well as the big
picture so that users have a great experience
using the product.
experi...
If done well, microinteractions can be
signature moments that increase adoption
and customer loyalty.
Like Button or You'v...
Now that I’ve hopefully convinced you of the importance of microinteractions, how should we go about designing them? What ...
TRIGGER
The first part of any microinteraction is the Trigger. There are two kinds of Triggers: manual and system-
initiate...
What is the proper control for context and
user need?
manual triggers
An example of a Trigger. Adding to Control Center and the quick-launch Camera icon, Apple has built a new kind of shortcut...
!
The Disqus sign-up form guesses your name based on your email address.
When you type a question-mark in Tumblr a “Let people answer this”-
checkbox appears.
Tumblr for Android - pressing the “create" button for a long time lets you
easily choose one of the two most frequent kind...
!
!
Some Triggers are invisible (touchscreens). Akismet has a clever invisible Trigger. When someone right-clicks on their...
What can the system intuit about need from user
behavior?
system triggers
Nest Protect’s Nightly Promise. It’s a quick green glow when the lights go out that means the batteries and sensors are wo...
!
Deliveries app checks if there is a tracking number in the clipboard on launch, and if so, a system Trigger launches
ano...
!
In the Instapaper iPhone app, if you accidentally rotate the phone between portrait and landscape mode and then
quickly ...
Bring the data forward
Apple’s weather app infuriates me because it’s such a missed opportunity to bring the data
forward. Would putting the high...
!!
Windows Phone, the messaging icon (a Trigger) changes to a sad face if there was an error sending a
message.
!
Google’s Chrome browser icon (the Trigger to launch it) also indicates active downloads and download
progress.
Amazon brings the data forward here, showing you what the most common delivery time is.
TaskRabbit brings the data forward here, answering the question, “How much should I offer?”
RULES
Once a microinteraction has been initiated, it engages a set of rules and behavior of the microinteraction. In other...
The Rules determine what can be done and
what cannot.
The invisible constraints of the system. Rules may or may not be ent...
rules determine
how the microinteraction responds to the Trigger being activated
what control the user has (if any) over a...
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 ...
the rules of a lamp with a motion detector
1. check every two seconds for movement
2. movement detected
3. is it enough mo...
!
An example of a Rule. When you're using the music-streaming service Spotify and then turn it on on another platform, the...
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...
Rules can stop users from abusing your microinteraction. On What Do You Love? if you put in a word like Sex, it gives
you ...
Prevent Human Error
Rules can also help prevent human errors. Gmail- Notification before sending email
!
If you press the search button on Make Me a Cocktail with nothing in the search field, instead of displaying an error mes...
Meetup.com - When there are no results within a particular distance, the search distance expands until it can find a
result.
Don’t start from zero.
In almost every microinteraction, you know SOMETHING about the context of use, even if it’s just th...
Navigation app Waze knows when I open the app in the late afternoon, I’m probably driving home and presents this as an opt...
!
Pro Flowers uses the date to show you the next big holiday when selecting a delivery date.
Rules can also help make selections. Why do you ever need to select a credit card type??
Github - Credit card autodetectio...
FEEDBACK
Feedback (or the lack of) is what allows us to
learn the Rules.
!
Twitter’s password form is a great microinteraction, with very clear feedback.
An example of Feedback showing the Rules. MailChimp shows you what can’t be done, by having the poor chimp’s arm stretch s...
Feedback doesn't have to be visual. Sounds from GE's high-end professional brand, Cafe.
Use the overlooked.
!
Since rules are invisible, it’s up to feedback to let user know what’s going on. In Coda2, the Process My Order button b...
!
When trying to find a word on a page, Chrome indicates in the scrollbar where instances of that word
appear.
Cornerstone -  The number of segments in the spinning activity indicator equals to the number of running activities.
Speak human.
!
The Threadless shopping cart face turns from frowning to happy when you put items in it.
!
Humans respond to faces. The Boxee logo turns orange and “goes to sleep” when there is no internet connection.
!
The gMail iPhone app shows what not to do: randomly put a smiley face for a message that isn’t necessarily a happy one.
Dropbox - When there is a long upload time remaining, it suggests you ‘grab a snickers’.
Google Voice - When typing an SMS, the counter changes to “Really?” when your message reaches a certain
length.
LOOPS & MODES
The last part of microinteractions are the Loops and Modes that make up its meta rules. What happens over ti...
!
A mode from Apple’s Weather App. The best reason to have a mode is when there is an infrequent action that would otherwi...
!
If a video is buffering for too long, the TED site offers users the option to download it for later.
When you click multiple Add Friend buttons too fast, Facebook shows a warning.
Use long loops.
What happens when people use the microinteraction for the first time? For the seventh time? For the 700th t...
Spotify - The “Added” column on spotify fades as it gets older.
Loops over long periods of time. Foursquare thanks you on your anniversary.
Chrome - Update indicator turns brownish color (originally green) when its been neglected for a long time. Reminiscent of ...
!
On eBay, if you've bought the same item in the past, the button changes from "Buy it now" to "Buy another."
Threadless - Knows whats in your shopping cart and sends an email to notify that some of the cart’s products are running o...
Progressive Reduction from LayerVault. A user’s understanding of your application improves over time and your
application’...
Now that I’ve hopefully convinced you of the importance of microinteractions, how should we go about designing them? What ...
Look for microinteractions...
When, during the course of design project, try to identify any possible microinteractions. M...
...or treat everything as a microinteraction.
Reduce more complex applications to individual products that are each built ...
The details are the design.
Charles Eames
This is hard. Duh.
Most places, particularly agencies, aren’t set up to work this way.
Thank you!
http://microinteractions.com
Special thanks to Little Big Details and
its contributors for many of these exampl...
Upcoming SlideShare
Loading in …5
×

Microinteractions

6,131 views

Published on

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

Published in: Design

Microinteractions

  1. 1. dan saffer // @odannyboy #microinteractions microinteractions
  2. 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. 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. 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. 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. 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. 7. Every one of these is a Trigger for a microinteraction
  8. 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. 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. 10. ! When someone posts on your Facebook page in a language that isn’t your default, Facebook offers to translate.
  11. 11. On YouTube, the favicon changes based on whether the video is buffering, playing, or paused.
  12. 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. 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. 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. 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. 16. Scrolling, for example. Look at how thin the scrollbar gets with the appearance of it on a touch device.
  17. 17. features are multi-faceted have multiple use cases are longer in duration require a large cognitive load can be complex
  18. 18. microinteractions are shallow thin rapid often forgettable frequently overlooked So why bother with them?
  19. 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. 20. People notice when you care! It sends a message of quality.
  21. 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. 22. If you care about user experience, you should care about microinteractions.
  23. 23. Microinteractions are the “feel” in “look and feel.”
  24. 24. If microinteractions are poor, the main features, no matter how nicely done, are surrounded by pain and frustration. Pebbles in your shoe
  25. 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. 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. 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. 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. 29. TRIGGER The first part of any microinteraction is the Trigger. There are two kinds of Triggers: manual and system- initiated.
  30. 30. What is the proper control for context and user need? manual triggers
  31. 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. 32. ! The Disqus sign-up form guesses your name based on your email address.
  33. 33. When you type a question-mark in Tumblr a “Let people answer this”- checkbox appears.
  34. 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. 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. 36. What can the system intuit about need from user behavior? system triggers
  37. 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. 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. 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. 40. Bring the data forward
  41. 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. 42. !! Windows Phone, the messaging icon (a Trigger) changes to a sad face if there was an error sending a message.
  43. 43. ! Google’s Chrome browser icon (the Trigger to launch it) also indicates active downloads and download progress.
  44. 44. Amazon brings the data forward here, showing you what the most common delivery time is.
  45. 45. TaskRabbit brings the data forward here, answering the question, “How much should I offer?”
  46. 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. 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. 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. 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. 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. 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. 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. 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. 54. Prevent Human Error
  55. 55. Rules can also help prevent human errors. Gmail- Notification before sending email
  56. 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. 57. Meetup.com - When there are no results within a particular distance, the search distance expands until it can find a result.
  58. 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. 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. 60. ! Pro Flowers uses the date to show you the next big holiday when selecting a delivery date.
  61. 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. 62. FEEDBACK
  63. 63. Feedback (or the lack of) is what allows us to learn the Rules.
  64. 64. ! Twitter’s password form is a great microinteraction, with very clear feedback.
  65. 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. 66. Feedback doesn't have to be visual. Sounds from GE's high-end professional brand, Cafe.
  67. 67. Use the overlooked.
  68. 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. 69. ! When trying to find a word on a page, Chrome indicates in the scrollbar where instances of that word appear.
  70. 70. Cornerstone -  The number of segments in the spinning activity indicator equals to the number of running activities.
  71. 71. Speak human.
  72. 72. ! The Threadless shopping cart face turns from frowning to happy when you put items in it.
  73. 73. ! Humans respond to faces. The Boxee logo turns orange and “goes to sleep” when there is no internet connection.
  74. 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. 75. Dropbox - When there is a long upload time remaining, it suggests you ‘grab a snickers’.
  76. 76. Google Voice - When typing an SMS, the counter changes to “Really?” when your message reaches a certain length.
  77. 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. 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. 79. ! If a video is buffering for too long, the TED site offers users the option to download it for later.
  80. 80. When you click multiple Add Friend buttons too fast, Facebook shows a warning.
  81. 81. Use long loops. What happens when people use the microinteraction for the first time? For the seventh time? For the 700th time?
  82. 82. Spotify - The “Added” column on spotify fades as it gets older.
  83. 83. Loops over long periods of time. Foursquare thanks you on your anniversary.
  84. 84. Chrome - Update indicator turns brownish color (originally green) when its been neglected for a long time. Reminiscent of fruit going bad.
  85. 85. ! On eBay, if you've bought the same item in the past, the button changes from "Buy it now" to "Buy another."
  86. 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. 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. 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. 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. 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. 91. The details are the design. Charles Eames
  92. 92. This is hard. Duh. Most places, particularly agencies, aren’t set up to work this way.
  93. 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.

×