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 for Brains: the Psychology of User Experience

By now, you probably already know the importance of user research, and better understanding your users' needs and tasks. But it's also important to dig deeper, into the psychology of what motivates them, and understand how humans really behave and think. Leave off those rose-colored glasses and see how users actually perceive an experience. In reality, humans have limited memory and focus; we’re swayed by emotion more than we'd care to admit. Carefully considering every single thing in our lives would be far too overwhelming, so humans often revert to using their more primitive fight-or-flight "lizard brains" to make decisions quickly.

Designing for Brains: the Psychology of User Experience

  1. 1. DESIGNING FOR BRAINS
  2. 2. Marissa ↓
  3. 3. THE POWER OF PSYCHOLOGY!
  4. 4. UX DESIGN
  5. 5. UXReactions
  6. 6. PSYCH UX DESIGN
  7. 7. UX DESIGN
  8. 8. DONALD NORMAN
  9. 9. The principles of human psychology will remain the same, which means that the design principles based on psychology will remain unchanged. DONALD NORMAN
  10. 10. PSYCH
  11. 11. PSYCH UX DESIGN
  12. 12. “PSYCHOLOGIST HAT”
  13. 13. KNOW YOUR USERS’ ERRORS, BIASES, & LIMITS
  14. 14. SORRY I’M NOT SORRY
  15. 15. UXReactions
  16. 16. Elderly Eleanor “I don’t even know what that is, but don’t worry about it.” Age: 82 Location: Madison, ME Education: High School Occupation: Retired PERSONA 1
  17. 17. PERSONA 2 Average Joe “I’m still figuring out how to set it up.” Age: 57 Location: Boca Raton, FL Education: Bachelors Occupation: Architect
  18. 18. A B ↓
  19. 19. TECHNOLOGY ADOPTION CYCLE InnovatorsEarlyAdopters EarlyM ajorityLate M ajorityLaggards Rogers, Bohlen, Beal, 1957
  20. 20. ENHANCE ACCESSIBILITY & USABILITY
  21. 21. CURB CUTS
  22. 22. SHALL WE?
  23. 23. Self-actualization Esteem Love Safety Physiological food, water, shelter, sleep... health, law, protection... friends, family... achievement... peace, growth... HIERARCHY OF NEEDS Maslow, 1943
  24. 24. DESIGN HIERARCHY OF NEEDS Creativity Proficiency Usability Reliability Functionality no value low value moderate value high value highest http://www.smashingmagazine.com/2010/04/26/designing-for-a-hierarchy-of-needs/
  25. 25. KANO MODEL Dissatisfaction Satisfaction Unfulfilled Fulfilled Must-Haves Delighters Wants Kano, 1984
  26. 26. PSYCH
  27. 27. ! ? Discover & experience Think & understand Decide & act HOW WE WORK
  28. 28. 1. DISCOVER & EXPERIENCE !
  29. 29. We’re thinking “great literature”... the user’s reality is much closer to “billboard going by at 60 miles an hour”. STEVE KRUG
  30. 30. PHOTORECEPTORS OF THE EYE Rods Rods Cones
  31. 31. WE OFTEN DON’T NOTICE UPDATES AND OTHER STUFF ON A PAGE
  32. 32. CREATE SCANNABLE HIERARCHIES
  33. 33. KEEP FEEDBACK WITHIN THE FOVEAL AREA
  34. 34. ADD ANIMATION OR SOUND CUES
  35. 35. 1/2 OF USERS WILL GIVE UP IF SOMETHING TAKES 3+ SECONDS
  36. 36. GIVE IT A SECOND!! It’s going to space! Will you give it a second, to get back from space? LOUIS CK
  37. 37. OUR ATTENTION ONLINE SPANS JUST A FEW MINUTES, IN 8 SECOND CHUNKS
  38. 38. VS
  39. 39. CART ABANDONMENT 67%
  40. 40. WE “FOCUS” TO A MINIMUM AND RELY ON INCOMPLETE INFORMATION
  41. 41. http://gizmodo.com/wow-people-really-suck-at-drawing-the-apple-logo-from-1690674361
  42. 42. SALIENT CUES HELP US GENERALIZE
  43. 43. http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/
  44. 44. http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
  45. 45. SIMPLIFY DESIGNS TO REDUCE THINKING
  46. 46. USE WHITE SPACE
  47. 47. BREAK STUFF (INTO CHUNKS)
  48. 48. FORCE FOCUS WITH LESS OPTIONS
  49. 49. JAKOB NIELSEN How users read on the web: they don’t.
  50. 50. WE’RE SKIMMERS
  51. 51. USERS HAVE TIME TO READ 20% OR LESS OF THE PAGE
  52. 52. HUMANS AREN’T WIRED FOR READING
  53. 53. USE VISUALS OVER COPY
  54. 54. KEEP COPY LEGIBLE
  55. 55. Body Size Line height Line Length Size Line height Size Line height Size Line height 16px(1em) 1.375em 60-75 48px(3em) 1.05em 36px(2.25em) 1.25em 28px(1.75em) 1.25em 16px(1em) 1.375em 60-75 40px(2.5em) 1.125em 32px(2em) 1.25em 24px(1.5em) 1.25em 16px(1em) 1.25em 35-40 32px(2em) 1.25em 26px(1.625em) 1.15384615em 22px(1.375em) 1.13636364em Desktop Tablet Phone H1 H2 H3 JASON’S WEB TYPE SCALE http://bit.ly/jprwt
  56. 56. NO CURLZ MT, PLEASE
  57. 57. SIMPLIFY MESSAGING
  58. 58. TARGET YOUR AUDIENCE
  59. 59. 2. THINK & UNDERSTAND ?
  60. 60. MENTAL MODELS
  61. 61. MENTAL MODELS Conceptual models people hold in their minds, formed by how a person believes things work
  62. 62. USE EXISTING MODELS TO TEACH SOMETHING NEW
  63. 63. USE EXISTING SITE PATTERNS BEFORE NEW ONES
  64. 64. INVERTED PYRAMID
  65. 65. PUT IMPORTANT STUFF AT THE TOP
  66. 66. USE EXPECTED NAVIGATION
  67. 67. USE EXPECTED NAVIGATION (Or card-sorting)
  68. 68. AFFORDANCES
  69. 69. AFFORDANCES Actionable properties between the world and a person
  70. 70. PERCEIVED AFFORDANCES Qualities of an object that suggest how it might be used
  71. 71. SIGNIFIERS
  72. 72. SIGNIFIERS Some sort of indicator or signal in the physical or social world, that can be meaningfully interpreted
  73. 73. MAKE AFFORDANCES PERCEIVABLE, OR ADD SIGNIFIERS
  74. 74. CLICK ME
  75. 75. DRAWING OUR OWN MAPS CAN LEAD US TO MISUNDERSTANDING
  76. 76. DO YOUR HOMEWORK
  77. 77. MENTALMODELS
  78. 78. RELATIONSHIPS ARE HARD
  79. 79. .15- SECONDS CAUSE & EFFECT ↓
  80. 80. CLARIFY WITH INFORMATIVE FEEDBACK
  81. 81. 3. DECIDE & ACT
  82. 82. WE’RE IRRATIONAL
  83. 83. SECTIONS OF THE BRAIN CanStockPhoto
  84. 84. SECTIONS OF THE BRAIN CanStockPhoto
  85. 85. SECTIONS OF THE BRAIN CanStockPhoto
  86. 86. WE PROCESS MOST INFORMATION OUTSIDE OF OUR AWARENESS
  87. 87. CRITICAL DECISIONS TAKE 100 SECONDS TO MAKE
  88. 88. WE USE LOGIC AFTER THE FACT TO JUSTIFY DECISIONS
  89. 89. WE’RE JUDGMENTAL
  90. 90. IT TAKES .2 SECONDS TO FORM A FIRST IMPRESSION
  91. 91. APPEALING VISUAL DESIGN A CREDIBLE WEBSITE ↓
  92. 92. WE LOVE SHORTCUTS
  93. 93. SATISFICING Choosing the first reasonable option, not the best one
  94. 94. MISTAKES Made when we misunderstand rules or knowledge
  95. 95. SLIPS Made with memory or motor malfunctions
  96. 96. WE BLAME OURSELVES FOR POOR USER EXPERIENCES
  97. 97. LEARNED HELPLESSNESS A condition in which a person suffers from a sense of powerlessness, arising from a persistent failure to succeed
  98. 98. REDUCE MISTAKES & KEEP THEM CHEAP
  99. 99. LET THEM GO BACK
  100. 100. SWISS CHEESE MODEL Hazards Losses Reason, 2000
  101. 101. DESIGN REDUNDANT LAYERS OF DEFENSE
  102. 102. ! ? Discover & experience Think & understand Decide & act HOW WE WORK
  103. 103. WE NEED TO ADAPT AS DESIGNERS
  104. 104. iFunny
  105. 105. PERSONA 3 Millenial Marissa “Clicking the logo takes you home, it’s common sense!” Age: 26 Location: Providence, RI Education: Bachelors Occupation: UX Designer
  106. 106. DON’T DESIGN FOR US
  107. 107. DESIGN FOR THEM
  108. 108. SIMPLIFY
  109. 109. Krug, 2005
  110. 110. REDUCE FRICTION
  111. 111. REDUCE CHOICES
  112. 112. THE JAM STUDY Iyengar, Lepper, 2000
  113. 113. UNDERSTAND & PRIORITIZE NEEDS
  114. 114. “WHY?”
  115. 115. People don't want to buy a quarter-inch drill. They want a quarter-inch hole! THEODORE LEVITT
  116. 116. DESIGN INVISIBLE EXPERIENCES
  117. 117. CREATE DELIGHT
  118. 118. CREATE DELIGHT Aesthetics Humor Flow Novelty
  119. 119. ENJOYMENT EASE & EFFICIENCY ↓
  120. 120. HAD ENOUGH?
  121. 121. COMBINE PSYCH & UX FOR HOLISTIC PROBLEM-SOLVING
  122. 122. We have to accept human behavior the way it is, not the way we would wish it to be. DONALD NORMAN
  123. 123. THANKS! marissaepstein.com @marstoyship
  124. 124. APPENDIX 1. Definition of UX design: http://uxdesign.com/ux-defined 2. Bounce rate: https://blog.kissmetrics.com/speed-is-a-killer/ 3. Attention spans  1. Total task: http://www.telegraph.co.uk/education/ universityeducation/6972191/Students-have-10-minute-attention- span.html 2. Micro-task: http://www.statisticbrain.com/attention-span- statistics/ 4. Online cart abandonment: http://baymard.com/lists/cart- abandonment-rate 5. Relying on incomplete descriptions: http://www.amazon.com/ Exploring-Psychology-9th-David-Myers/dp/1464111723/ ref=la_B000AP7O54_1_3? s=books&ie=UTF8&qid=1431470120&sr=1-3 6. White space & comprehension: http://www.smashingmagazine.com/ 2009/09/24/10-useful-usability-findings-and-guidelines/ 7. Skipping web content: http://www.nngroup.com/articles/how-little- do-users-read/
  125. 125. APPENDIX, CONT. 8. Wired for language: http://www.amazon.com/Designing-Mind-Simple- Understanding-Interface/dp/012375030X 9. Low literacy: http://www.nngroup.com/articles/writing-for-lower- literacy-users/ 10. Meaning of red: http://www.colormatters.com/the-meanings-of- colors/red 11.Cause & effect timing: http://www.amazon.com/Designing-Mind- Simple-Understanding-Interface/dp/012375030X 12. Errors & loss: http://www.amazon.com/The-Design-Everyday-Things- Expanded/dp/0465050654 13. Sections & functions of the brain: http://www.amazon.com/Exploring- Psychology-9th-David-Myers/dp/1464111723/ ref=la_B000AP7O54_1_3? s=books&ie=UTF8&qid=1431470120&sr=1-3 14. Unconscious processing: http://www.amazon.com/Exploring- Psychology-9th-David-Myers/dp/1464111723/ ref=la_B000AP7O54_1_3? s=books&ie=UTF8&qid=1431470120&sr=1-3
  126. 126. APPENDIX, CONT. 15. Critical decisions: http://www.amazon.com/Designing-Mind-Simple- Understanding-Interface/dp/012375030X 16. Justifying decisions: http://westsidetoastmasters.com/resources/ laws_persuasion/chap14.html 17. First impressions  1. Speed: http://www.dryfive.com/first-impressions-in-2-seconds 2. Credible sites: https://credibility.stanford.edu/guidelines/ 18. Blaming ourselves: http://www.amazon.com/The-Design-Everyday- Things-Expanded/dp/0465050654 19. Back button: http://dubroy.com/research/chi2010-a-study-of- tabbed-browsing.pdf 20. Loss & mistakes: http://www.amazon.com/The-Design-Everyday- Things-Expanded/dp/0465050654  21. Enjoyable experiences: http://abookapart.com/products/designing- for-emotion

    Be the first to comment

    Login to see the comments

  • silviacalvet

    Aug. 15, 2015
  • NicoleNeuefeind

    Oct. 11, 2015
  • Senzotv

    Apr. 5, 2016
  • drewford8908

    Mar. 4, 2017
  • amulmmm

    Sep. 9, 2018
  • SantoshBharti1

    Apr. 12, 2019

By now, you probably already know the importance of user research, and better understanding your users' needs and tasks. But it's also important to dig deeper, into the psychology of what motivates them, and understand how humans really behave and think. Leave off those rose-colored glasses and see how users actually perceive an experience. In reality, humans have limited memory and focus; we’re swayed by emotion more than we'd care to admit. Carefully considering every single thing in our lives would be far too overwhelming, so humans often revert to using their more primitive fight-or-flight "lizard brains" to make decisions quickly.

Views

Total views

2,300

On Slideshare

0

From embeds

0

Number of embeds

405

Actions

Downloads

59

Shares

0

Comments

0

Likes

6

×