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.

Designing Microinteractions for Better UX

605 views

Published on

UX designers often think in broad strokes, but it's important not to lose sight of the small units that make up the user experience, the microinteraction. The tiniest misstep can result in major user frustration.

Discover ways to make our software feel less arbitrary and more predictable with deliberate attention to microinteractions.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing Microinteractions for Better UX

  1. 1. MICROINTERACTIONS September 27, 2017 Justin Stollsteimer jstollsteimer@fusionbox.com
  2. 2. HERE’S HOW THIS IS GONNA GO • What is a microinteraction, and where does it fit in? • Microinteractions in alarmingly vivid detail. • Making microinteractions more kick-ass. • UX and microinteractions (and you!) • Some microinteractions we’re proud of. • Q-and-hopefully-some-A
  3. 3. WHAT IS A MICROINTERACTION?
  4. 4. AT A GLANCE • UX is often high-level, macro-thinking • Microinteractions are the counterpart • From “Oh” to “Whoa!” • Intuitive, natural, obvious • Smaller in size and scope than features
  5. 5. USE A MICROINTERACTION WHEN YOU WANT TO: • Accomplish a single task only • Interact with a single piece of data • Control an ongoing process • Adjust a setting • View or create a small piece of content • Enable or disable a feature or function
  6. 6. MICROINTERACTIONS 
 SHOULD ALSO: • Provide timely messaging • Clarify an outcome • Provide real-time feedback to tactile adjustments • Offer user guidance • Reinforce a brand's personality or values
  7. 7. COMPONENTS Trigger Rules Feedback Loops & Modes
  8. 8. TRIGGERS RULES FEEDBACK LOOPS & MODES
  9. 9. MANUAL TRIGGERS Controls + Labels: Control States:
  10. 10. SYSTEM TRIGGERS Incoming messages, application errors, and location-based events are all system triggers
  11. 11. WHAT A TRIGGER DOES • Initiate the same action every time Do: Twitter’s “tweet” buttons always open a compose panel (or a mode to log in/signup first) Don’t: Android’s older “back” button
  12. 12. WHICH TRIGGERS ARE 
 THE MOST IMPORTANT? • Match need to discoverability Moving Affordance + Label Object + Label Icon Only Label Only Invisible More Discoverable Less Discoverable
  13. 13. WHEN TO SURFACE 
 THE TRIGGER • Adjust discoverability based on the next anticipated action Image Credit: http://bit.ly/2xlLpoR Do: Hide the header navigation while scrolling down, show it when scrolling up. Do: Replace empty dropdown with actions to populate them. Do: Scrolling to the top of a list of emails engages “pull to refresh”.
  14. 14. TRIGGERS RULES FEEDBACK LOOPS & MODES
  15. 15. RULES • Think of your microinteraction as a sentence • Mapping microinteraction rules should be simple Arrive at Login Form Is this a returning user? Is this a first-time visitor? Auto-fill username, change button text to “Log back in” Display username & password fields, change button text to “log in”, emphasize “create new account”. Microinteraction: “Log In”
  16. 16. STATES ARE BETTER THAN SCREENS (USUALLY) • States convey progression through the microinteraction’s rules A simple credit card entry doesn’t need separate pages to select a card type, enter the card number, and add the CVV - states can indicate progression through this microinteraction.
  17. 17. CONSTRAINTS HELP 
 ENFORCE THE RULES • Guide your users without relying on lengthy explanations • Use microcopy, smart defaults, and best-practice UI patterns Do: Use input and range constraints to prevent invalid inputs. Don’t: Make preventable user errors possible.
  18. 18. COMPLEXITY IS BAD • Help remove complexity (Timezone in a date picker) • Reduce controls to minimum (“I feel lucky.”) • Highlight anticipated actions (OK vs. Cancel)
  19. 19. TRIGGERS RULES FEEDBACK LOOPS & MODES
  20. 20. Do: Reveal feedback in a timely, natural fashion. (Animation Credit: http://bit.ly/2ff98yM) Don’t: Disconnect feedback from the action that created it (i.e. after form submission) ILLUMINATE THE RULES • Make it visible, but don’t overburden the user • Connect the feedback to the event that causes it in a natural way
  21. 21. Initial > Hover > In Progress > Complete USE THE LITTLE DETAILS • Convey the most with the least • Use the small, often overlooked components to provide information • Tasteful animation Animation: https://dribbble.com/shots/1426764-Submit-Button
  22. 22. BE FUNNY 
 (OR AT LEAST HUMAN) • Humor is less likely to be overbearing or annoying • Puts user at ease in the event of an error Do: Utilize feedback to inject your brand’s tone. Don’t: Be robotic, or worse, put the user at fault.
  23. 23. TRIGGERS RULES FEEDBACK LOOPS & MODES
  24. 24. LOOPS • How does this microinteraction change over time, or when used repeatedly? How about if it hasn’t been used in a long time? Closed: Google Translate plays the translated text more slowly the second time. Open: While connected and logged in, the application listens for changes to active tickets. Behavior (Long Loop): Extend ‘add to cart’ with a reminder email if the cart was abandoned.
  25. 25. MODES • What if the microinteraction becomes too cluttered or complex? New Screen: Resetting a password forks the user from the “Log In” micro interaction and returns them to it after the “Forgot Password” mode is complete. Spring-Loaded: Shift/Command keys enable an alternate mode only while pressed. One-off: The user initiates a mode for a single action (style the selected text).
  26. 26. DESIGN PRINCIPLES
  27. 27. DON’T START FROM ZERO • What do we know about the user’s goals? • What do we know about the user’s environment? Device Day or Night LocationTime Since… Browser
  28. 28. BRING THE DATA FORWARD • What piece(s) of information are most crucial to this microinteraction? • What do we know about the application state? Photo Credit: http://bit.ly/2flOaSF Do: Think creatively about what information the system can provide the microinteraction.
  29. 29. MICROINTERACTIONS SHOULD 
 BE CONVERSATIONAL • What message needs to be conveyed? • What’s the best way to deliver the message? • Does it sound like someone would say this? Do: Communicate clearly with personality.
  30. 30. KEEP ERRORS AT BAY • It should be (nearly) impossible for the user to encounter an error • Use microcopy, smart defaults, and best-practice UI patterns to guide the user quickly and efficiently The system can prevent errors or empty result sets by detecting low battery or expanding search results. Microcopy (30 mins) helps prevent selecting the wrong start/end times. Airbnb helps users select sensible price ranges by showing available properties.
  31. 31. MICROINTERACTIONS AS PART OF THE PROCESS • Leverage existing patterns • Prototype your microsolutions • Design in the browser • Test with real users to validate your assumptions
  32. 32. IN PRACTICE: THE PATERSON CENTER
  33. 33. TAKEAWAYS 1. Practice good UX. Knowing about your users’ goals and context informs good design decisions—even the little ones. 2. Use the overlooked. Standard UI elements are opportunities to create meaningful, informative, and delightful microinteractions. 3. Don’t overdo it. Make sure your microinteractions blend into your application fluidly and simplify your users’ decision-making process.
  34. 34. RESOURCES “Microinteractions: Designing with Details” by Dan Saffer (O’Reilly)

×