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.

THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app

850 views

Published on

Above and beyond feedback, micro-interactions can also add a human element to your interface. Do you have an opinion on the heart v. star interaction on the Twitter app? If so, you're tuned into micro-interactions and their power.

As described in Dan Saffer's book Microinteractions, these tiny details typically serve a range of essential functions in your design, from communicating feedback, demonstrating accomplishment of an individual task, or helping users visualize the results of their actions and prevent errors.

In this session, we'll workshop your own interfaces and look for opportunities to improve, add, or subtract micro-interactions.

Key Take Aways
1. Understand the dos and don'ts of micro-interactions
2. Learn about why micro-interactions make us feel so good
3. Understand how colors and icons support micro-interactions

**note that this presentation has many animations that don't comes through in a static format**

Published in: Design
  • Be the first to comment

THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app

  1. 1. @LimeRedStudio t @SarahEva Microinteractions Sarah Eva Monroe Creative Director, LimeRed Studio
  2. 2. @LimeRedStudio t @SarahEva Your Workshop Leader Sarah Eva is a Webby Award-nominated creative strategist with 15 years of experience. She began her career as a creative, working as a photographer, print/web designer, and art director. After earning her Master’s degree in Integrated Marketing Communications from Northwestern University, Sarah Eva moved into the agency world, where she led digital/ social media strategy for major brands in the higher education, non-profit, and advocacy space. She’s also been part of internal marketing teams at three higher education institutions, as well as the digital team for President Obama’s 2012 campaign cycle. Using a range of UX methodologies, she draws on behavioral psychology research to help brands motivate, persuade, and connect with their desired audience. Her work is authentic and leverages performance metrics, analysis, and an enthusiastic curiosity for user behavior.
  3. 3. @LimeRedStudio t @SarahEva CASE STUDIES:
 THE STORIES WE’RE TELLING LimeRed is a boutique UX agency that specializes in creating user experiences & shaping campaigns that build social impact.
  4. 4. @LimeRedStudio t @SarahEva Assumptions • You know the basics of interaction design: it’s about making the connection between a device, its interface and the user. • You’re looking for strategies for how to best decide on and apply microinteractions, not a code tutorial.
  5. 5. @LimeRedStudio t @SarahEva A poorly designed interface is like interacting with someone at a help desk who is rude, unhelpful and unwilling to do their job. -Lana Miller
  6. 6. @LimeRedStudio t @SarahEva Look & Feel: Microinteractions 
 are the feel. -Dan Saffer
  7. 7. @LimeRedStudio t @SarahEva Object Microinteractions
  8. 8. @LimeRedStudio t @SarahEva Object Microinteractions MEMBRANE KEYBOARDS “feeling the electric circuits mush under your fingers” “Pressing through these [plastic] layers makes typing on a membrane feel like tapping your fingers on old, stale Jell-O.” “provides a spongy feel when depressed" MECHANICAL KEYBOARDS “provide a more dependable, refined tactile feel” “It gave me a far more satisfying "thunk" noise when I pressed the keys. It's hard to pinpoint exactly what felt so good about the Ninja, except that when I tried to go back to the Dell keyboard (or any other standard rubber-dome keyboard), it felt mushy.”
  9. 9. @LimeRedStudio t @SarahEva Object Microinteractions MEMBRANE KEYBOARDS “feeling the electric circuits mush under your fingers” “Pressing through these [plastic] layers makes typing on a membrane feel like tapping your fingers on old, stale Jell-O.” “provides a spongy feel when depressed" MECHANICAL KEYBOARDS “provide a more dependable, refined tactile feel” “It gave me a far more satisfying "thunk" noise when I pressed the keys. It's hard to pinpoint exactly what felt so good about the Ninja, except that when I tried to go back to the Dell keyboard (or any other standard rubber-dome keyboard), it felt mushy.”
  10. 10. @LimeRedStudio t @SarahEva History of Microinteractions • Started as a sociological term in the 1970’s • For example:
 body language affects how you feel about an interaction
  11. 11. @LimeRedStudio t @SarahEva History of Microinteractions Yes, I’ll be there at 6am to help you move. Confidence level?
  12. 12. @LimeRedStudio t @SarahEva History of Microinteractions Yes, I’ll be there at 6am to help you move. Confidence level?
  13. 13. @LimeRedStudio t @SarahEva History of Microinteractions If a waiter uses specific microinteractions, he/she can reliably get better tips. Making people feel confident, comfortable, and happy is the goal.
  14. 14. @LimeRedStudio t @SarahEva Context Matters
  15. 15. @LimeRedStudio t @SarahEva Context Matters Consider context: Ok in the dugout, not ok in the courtroom
  16. 16. Context Matters • Just like the sports slap, context means everything when it comes to microinteractions.
  17. 17. Context Matters • Just like the sports slap, context means everything when it comes to microinteractions.
  18. 18. Context Matters • Just like the sports slap, context means everything when it comes to microinteractions. • This type of micro interaction wouldn’t work for a more staid brand.
  19. 19. Context Matters • Just like the sports slap, context means everything when it comes to microinteractions. • This type of micro interaction wouldn’t work for a more staid brand.
  20. 20. @LimeRedStudio t @SarahEva Translating Physical Actions 
 to Your Interface
  21. 21. @LimeRedStudio t @SarahEva Translating Physical Actions 
 to Your Interface
  22. 22. @LimeRedStudio t @SarahEva IxD equivalent of a hug gesture
  23. 23. @LimeRedStudio t @SarahEva IxD equivalent of a hug gesture
  24. 24. @LimeRedStudio t @SarahEva Translating Physical Actions 
 to Your Interface https://dribbble.com/mattrob
  25. 25. @LimeRedStudio t @SarahEva IxD equivalent of an Offering https://dribbble.com/mattrobs
  26. 26. @LimeRedStudio t @SarahEva IxD equivalent of an Offering https://dribbble.com/mattrobs
  27. 27. @LimeRedStudio t @SarahEva IxD Motions/Emotions Motion Emotion sudden, jagged, unpredictable anxiety, panic, annoyance gliding, easing calm, potential impatience crisp, intentional confidence-inspiring, professional bouncing, controlled wobbling amusement, humor minimizing, folding, tucking away organized, helpful
  28. 28. @LimeRedStudio t @SarahEva IxD Motions/Emotions Motion Emotion sudden, jagged, unpredictable anxiety, panic, annoyance gliding, easing calm, potential impatience crisp, intentional confidence-inspiring, professional bouncing, controlled wobbling amusement, humor minimizing, folding, tucking away organized, helpful
  29. 29. @LimeRedStudio t @SarahEva Interactions Provide: • Feedback – I see that an error popped up when I submitted this form. That must mean I need to enter something. • Way finding Confidence – I see that the main heading changed to Settings, so I must be in the right section of the app to adjust my settings. • Confirmation – Did my payment go through or should I press this button 12 more times?
  30. 30. @LimeRedStudio t @SarahEva Microinteractions provide interaction, but also make people feel confident, comfortable, and happy.
  31. 31. @LimeRedStudio t @SarahEva MicroInteractions Provide: • Nuanced Visual Feedback – I see that a section of this form turned red. That must mean I need to enter something. • Emotionally-Infused Confidence – I see a gear icon spinning, then coming to stopping with a green checkbox on top, so I am satisfied and confident my settings were applied. • Reassuring Confirmation – I can see that my order status animated joyfully from In-Progress to Complete, so I know my payment was accepted.
  32. 32. @LimeRedStudio t @SarahEva • Error message • Title text changed • Unclear waiting period as payment processes • Red box • Happy spinning gear • Order status update is clear and immediate. A Small, but Important Difference
  33. 33. A Small, but Important Difference Pet Accepted.
  34. 34. A Small, but Important Difference Pet Accepted. Wrigley will have a great day here at doggy day care!
  35. 35. @LimeRedStudio t @SarahEva Sometimes, Important
  36. 36. @LimeRedStudio t @SarahEva Sometimes, Just Entertaining
  37. 37. @LimeRedStudio t @SarahEva Sometimes, Just Entertaining
  38. 38. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI
  39. 39. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays
  40. 40. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays
  41. 41. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays Exercise: Try to get your partner to take a record you are handing to them
  42. 42. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays Exercise: Try to get your partner to take a record you are handing to them
  43. 43. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays Exercise: Try to get your partner to take a record you are handing to them • Say “I think you’ll like this!”
  44. 44. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays Exercise: Try to get your partner to take a record you are handing to them • Say “I think you’ll like this!” • Hold it upright so album art shows
  45. 45. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays Exercise: Try to get your partner to take a record you are handing to them • Say “I think you’ll like this!” • Hold it upright so album art shows • Give it to them suddenly?
  46. 46. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays Exercise: Try to get your partner to take a record you are handing to them • Say “I think you’ll like this!” • Hold it upright so album art shows • Give it to them suddenly? • Probably not, creates anxiety
  47. 47. @LimeRedStudio t @SarahEva WORKSHOP Translate to Your UI Microinteractions to Boost Audio Plays • Test the addition of • delightful animation when more than two consecutive tracks are played • friendly, but mildly disappointed interaction when auto play is turned off
  48. 48. Dan Saffer’s 4 Guidelines • Trigger: either by user or by system • Rules: invisible to user
 Main goal: try to prevent human error • Feedback: movement, color • Loops: builds, changes
  49. 49. @LimeRedStudio t @SarahEva 4 Guidelines in Action • Trigger: system • Rule: Check for new notification every second. When available… • Feedback: background change and vertical bump animation • Loop: color builds https://dribbble.com/ricetseng
  50. 50. @LimeRedStudio t @SarahEva 4 Guidelines in Action • Trigger: system • Rule: Check for new notification every second. When available… • Feedback: background change and vertical bump animation • Loop: color builds https://dribbble.com/ricetseng
  51. 51. Time considerations If your transitions are too fast they will feel unnatural If your transitions are too slow it will create a pain point for users that are repeating the same interaction often. https://dribbble.com/monterosa
  52. 52. Time considerations If your transitions are too fast they will feel unnatural If your transitions are too slow it will create a pain point for users that are repeating the same interaction often. https://dribbble.com/monterosa
  53. 53. @LimeRedStudio t @SarahEva Feedback Loop Animation helps build and sustain meaning and context, including confirmation of actions taken by the user
  54. 54. @LimeRedStudio t @SarahEva Feedback Loop Animation helps build and sustain meaning and context, including confirmation of actions taken by the user
  55. 55. Microcontent
  56. 56. Microcontent
  57. 57. Visual Reinforcement
  58. 58. Visual Reinforcement
  59. 59. @LimeRedStudio t @SarahEva Affordances/Signifiers The concept of affordances is that a function should be obvious, and essentially suggest its own use (i.e. a keyboard ‘affords’ typing). Signifiers are what hint at the affordance (i.e. the keyboard’s flat surface and clearly defined keys with letters on them ‘hints’ that you can type characters)
  60. 60. Learnability & Intuitiveness Auto-focus on the next action This will help to guide your users as to what they need to do next and prevent them from feeling lost. Don’t reinvent the wheel Across interfaces, round red button means record, square means stop
  61. 61. Learnability & Intuitiveness Auto-focus on the next action This will help to guide your users as to what they need to do next and prevent them from feeling lost. Don’t reinvent the wheel Across interfaces, round red button means record, square means stop
  62. 62. Learnability & Intuitiveness Auto-focus on the next action This will help to guide your users as to what they need to do next and prevent them from feeling lost. Don’t reinvent the wheel Across interfaces, round red button means record, square means stop
  63. 63. @LimeRedStudio t @SarahEva Signature Moments • A microinteraction that’s been elevated to the level of being a brand signature – Twitter pull to refresh – Facebook like – Snapchat’s long press to show content – Microsoft’s Start Button
  64. 64. Bar Code Scan Blue bugs to indicate scanning • Trigger: camera opened from within app • Rule: When readable edges are scanned, cluster blue bugs around edges • Feedback: check box appears and camera closes when item is identified • Loop: user must trigger
  65. 65. Bar Code Scan Blue bugs to indicate scanning • Trigger: camera opened from within app • Rule: When readable edges are scanned, cluster blue bugs around edges • Feedback: check box appears and camera closes when item is identified • Loop: user must trigger
  66. 66. Bar Code Scan • Trigger: camera opened from within app • Rule: When item is recognized, scan database for offers. • Feedback: Info box appears, offer status is displayed and data slide up from bottom • Loop: user must trigger
  67. 67. Bar Code Scan • Trigger: camera opened from within app • Rule: When item is recognized, scan database for offers. • Feedback: Info box appears, offer status is displayed and data slide up from bottom • Loop: user must trigger
  68. 68. Any.do • Trigger: user clicks to open a list • Rule: no movement/ action until user triggers • Feedback: when a user swipes over a list item, display strikethrough and delete icon • Loop: user must trigger
  69. 69. Any.do • Trigger: user clicks to open a list • Rule: no movement/ action until user triggers • Feedback: when a user swipes over a list item, display strikethrough and delete icon • Loop: user must trigger
  70. 70. NPR One
  71. 71. NPR One
  72. 72. Hopper • Trigger: user touches beginning and end dates for travel • Rule: selecting date or moving back are only options • Feedback: dates between turn blue and blue button appears • Loop: user must trigger
  73. 73. Hopper • Trigger: user touches beginning and end dates for travel • Rule: selecting date or moving back are only options • Feedback: dates between turn blue and blue button appears • Loop: user must trigger
  74. 74. Calculator • Trigger: user touches History button • Rule: when history is selected, display last calculations • Feedback: text label change from history to keyboard • Loop: user must trigger
  75. 75. Calculator • Trigger: user touches History button • Rule: when history is selected, display last calculations • Feedback: text label change from history to keyboard • Loop: user must trigger
  76. 76. Waze
  77. 77. Waze
  78. 78. @LimeRedStudio t @SarahEva WORKSHOP Translate to your UI Microinteractions to Boost Sign Ups • Animate form to make it feel shorter • Think about animations as if user is quickly and easily gliding through each input • Offer options politely • Load fields in groups when it makes sense • Animate a progress bar that makes the process feel short
  79. 79. Sign Up
  80. 80. Sign Up
  81. 81. @LimeRedStudio t @SarahEva WORKSHOP Form Examples @vlb
  82. 82. @LimeRedStudio t @SarahEva WORKSHOP Form Examples @vlb
  83. 83. @LimeRedStudio t @SarahEva Usability is the bare minimum.

×