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.

Microinteractions - Designing with Details


Published on

This is a brief summary of the brilliant book Microinteractions by Dan Saffer. Please visit to buy the book and get more details.

Published in: Education

Microinteractions - Designing with Details

  1. 1. www.digi-­‐
  2. 2. What is Microinterac5on? • A microinterac5on is a contained product moment that revolves around a single use case -­‐ a 5ny piece of func5onality that only does one thing. • For e.g. Sign Up form www.digi-­‐
  3. 3. Example • Disqus -­‐ The signup form guesses your name based on the first part of your email address as you type. www.digi-­‐
  4. 4. What is Microinterac5on? • Whenever you – change a seGng, – sync your data or device, – set an alarm, – pick a password, – turn on your appliance, – login, – set a status message, – like something, you are engaging with a microinterac5on. www.digi-­‐
  5. 5. What is Microinterac5on? • Microinterac5ons are not features. – For e.g. music player is a feature but adjus5ng a volume is a microinterac5on inside that feature. • The difference between a product you love and product you tolerate is oLen the micro interac5ons you have with it. www.digi-­‐
  6. 6. Structure of Microinterac5on www.digi-­‐
  7. 7. 1. Triggers A trigger is whatever ini5ates a microinterac5on. www.digi-­‐
  8. 8. Principles of Triggers www.digi-­‐
  9. 9. 1. Make the trigger something target users will recognize as a trigger in the context. www.digi-­‐
  10. 10. 2. Have the trigger ini5ate the same ac5on every 5me www.digi-­‐
  11. 11. 3. Bring the data forward www.digi-­‐
  12. 12. 4. Don't break the visual affordance www.digi-­‐
  13. 13. 5. More frequently the microinterac5on is used, the more visible it should be. www.digi-­‐
  14. 14. 6. Don't make the false affordance • Same as 4 www.digi-­‐
  15. 15. 7. Add a label only if it provides informa5on that the trigger itself cannot. www.digi-­‐
  16. 16. The most discoverable triggers are… 1. An object that is moving, like a pulsing icon 2. An object with an affordance and a label, such as a labeled buZon 3. An object with a label, such as labeled icon 4. An object alone, such as icon 5. A label only, such as menu item 6. Nothing: an invisible trigger www.digi-­‐
  17. 17. Invisible Trigger Example • Tumblr iOS: If you swipe the edit buZon to the leL you can create a new text blogpost. (and if you swipe it upwards you can make a photo blogpost) www.digi-­‐
  18. 18. System Triggers • System triggers are those that engage when certain condi5on(s) are met without any conscious interven5on by the user. www.digi-­‐
  19. 19. 2. Rules • At the heart of every microinterac5on, there are set of rules that govern how the microinterac5on can be used. www.digi-­‐
  20. 20. The rules determines… • Rules determine "What can be done and what can't be done” • E.g. Mailchimp -­‐ As you stretch the browser window the arm of the chimp stretches 5ll it “pops” off! www.digi-­‐
  21. 21. Rules example • Pages -­‐ Automa5cally adds smaller heading styles once you’ve used the smallest displayed style (e.g. “heading 3” only appears aLer you have used “heading 2” in your document). www.digi-­‐
  22. 22. Don't start from zero • What do I know about the user and context? www.digi-­‐
  23. 23. Don't start from zero example • Google+ guesses where a user might work based on where their friends work. www.digi-­‐
  24. 24. Absorb Complexity • Tesler's law: – There is a point beyond which you cannot simplify a process any further. www.digi-­‐
  25. 25. Absorb Complexity Example • Facebook -­‐ When “new family member” is added, Facebook automa5cally recognizes the chosen family member’s gender and adjusts the list of possible family rela5ves in the list box accordingly. www.digi-­‐
  26. 26. Limited op5ons and Smart defaults • With microinterac5ons, a good prac5ce is to emphasize or perform automa5cally the next possible ac5on user might take Example – Clicking on the “Report” icon on YouTube stops the video if it’s currently playing. www.digi-­‐
  27. 27. Controls and User Input • Manual user input -­‐> with what controls • With controls, the choice is between opera5onal simplicity and perceived simplicity. • For e.g. – Opera5onal simplicity -­‐> 3 buZons to lower, higher or mute the volume – Perceived simplicity -­‐> a single control does mul5ple ac5ons www.digi-­‐
  28. 28. Controls and User Input Example 1 • Google Drive -­‐ An expanding hover interface allows you to choose the desired amount of rows and columns in a new table. www.digi-­‐
  29. 29. 3. Feedback • Principles of Feedback 1. Don’t overburden user with Feedback 2. The best feedback is never arbitrary 3. Convey the most with the least 4. Use the overlooked as a means of message delivery www.digi-­‐
  30. 30. Don't overburden users with Feedback • Batch -­‐ When enabling the camera flash, the camera icon on the shuZer buZon gets a liZle white flash. www.digi-­‐
  31. 31. Convey the most with the least • Cornerstone -­‐ The number of segments in the spinning ac5vity indicator equals to the number of running ac5vi5es. www.digi-­‐
  32. 32. Use the overlooked as a means of message delivery • For e.g. a cursor could change the color when it is moving over an inac5ve buZon www.digi-­‐
  33. 33. Feedback is for humans example • Boxee -­‐ When not connected to the Internet, the Boxee logo goes orange and starts sleeping. www.digi-­‐
  34. 34. Feedback as a personality-­‐driven mechanism -­‐ 1 • Dropbox -­‐ When there is a long upload 5me remaining, it suggests you ‘grab a snickers’. www.digi-­‐
  35. 35. Feedback methods • Visual – Anima5on – Messages • Audio • Hap5c www.digi-­‐
  36. 36. Visual Feedback Example • Nike+ iPhone app -­‐ The color coding of pace on the map is calibrated to the actual fastest and slowest pace ran. www.digi-­‐
  37. 37. Anima5on Example • iOS -­‐ When using internet on EDGE network, loading icon in status bar rotates slower than it does on 3G. www.digi-­‐
  38. 38. Audio • Sound can be a powerful cue • It arrives in our brain more quickly than visual feedback • That's why it should be used sparingly • Useful for devices with no screen • Or for Microinterac5on that work in the background when user is not paying aZen5on www.digi-­‐
  39. 39. Audio • Use it for – Emphasis – Alerts • It should pass the Foghorn test: – is this ac5on important enough that users would want to become aware of it when they cannot see it? www.digi-­‐
  40. 40. Hap5cs • Technically known as "vibrotac5le feedback" www.digi-­‐
  41. 41. 4. Loops and Modes • Modes – A mode is a fork in the rules – Modes should be used very very sparingly – Most microinterac5on should be mode free but some5mes they are necessary – When there is an infrequent ac5on that would otherwise cluZer the microinterac5on’s main purpose for e.g. seGngs mode www.digi-­‐
  42. 42. Modes Example • Weather app seGngs screen www.digi-­‐
  43. 43. Loops • A loop is a cycle that repeats, usually for a set dura5on • A loop is something indicated via the rules for e.g. "Get data every 30 seconds", "Run for three minutes, then stop" or "Send reminder in 10 days" www.digi-­‐
  44. 44. Loop Example • Moo -­‐ Shows you how much 5me you have leL to edit a recently submiZed order. www.digi-­‐
  45. 45. Long Loops • What can be done to make the microinterac5on beZer the second 5me it's used? The tenth? The ten thousandth? www.digi-­‐
  46. 46. Long Loops Example • Spo5fy -­‐ The “Added” column on spo5fy fades as it gets older. www.digi-­‐
  47. 47. The Long Wow • The long wow is about delivering new experiences or features over 5me instead of all at once, and by doing so building customer loyalty. www.digi-­‐
  48. 48. The Long Wow Example • Threadless -­‐ Knows what’s in your shopping cart and sends an email to no5fy that some of the cart’s products are running out of stock. www.digi-­‐
  49. 49. Progressive disclosure or reduc5on • As users become used to a product, they don't need as much handholding, and instead can be treated as more skilled user. For e.g. shortcuts could be added to a microinterac5on aLer it's been used a few 5mes, or more advanced features added. • In progressive reduc5on, you can make microinterac5on simpler over the period of 5me. www.digi-­‐
  50. 50. Progressive Reduc5on Example • The signpost buZon by default is a large icon with a label. • As the user becomes more proficient, the label disappears. • Eventually the buZon is de-­‐emphasized. www.digi-­‐
  51. 51. Credits • Microinterac5ons – The Book (Buy the book. Highly recommended) • LiZle Big Details -­‐ Your daily dose of design inspira5on. www.digi-­‐