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.

Psychologie voor designers - Ben De Vleeschauwer, Docent Web & UX (KDG)

1,561 views

Published on

Goed design wordt bepaald door het gevoel dat we erbij krijgen: emotie is hier doorslaggevend.
In deze talk wordt niet iedere psychologische studie aangehaald die er is. Integendeel zelfs, in deze sessie zie je bijna geen theorie. Wat je wel zal zien, zijn manieren om psychologie toe te passen in je eigen ontwerpen.
We kruipen in het hoofd van onze gebruikers en kijken hoe we bepaalde zones in de hersenen kunnen prikkelen, activeren en manipuleren. Deze sessie geeft je misschien wel wat superpowers, maar we gaan ze spaarzaam en verantwoord gebruiken.

Published in: Design, Technology

Psychologie voor designers - Ben De Vleeschauwer, Docent Web & UX (KDG)

  1. 1. Communication goes well between humans, but not between technology.
  2. 2. 1 2 3 4 5 Mental models Procedural knowledge How the brain works Decision making and design Applying psychology in design
  3. 3. 1 Mental models
  4. 4. Baking pie at 220°
  5. 5. So what is knowledge?
  6. 6. Tomato is a?
  7. 7. What’s the capital of Paris?
  8. 8. Fact Sequence Tomato is a fruit Boil, peel, simmer
  9. 9. Fact Sequence Tomato is a fruit Boil, peel, simmer What is my name? How to ride a bicycle
  10. 10. Fact Sequence Tomato is a fruit Boil, peel, simmer What is my name? How to ride a bicycle Where do I live? How do I ride to my house
  11. 11. What did you see?
  12. 12. Which hand had the ball? Left Right
  13. 13. “You don’t remember all the details of your marriage, but you remember who you’re married to” — Joe Leech, FOWD 2012
  14. 14. we fill in the story
  15. 15. How do we fill in this image?
  16. 16. he plays basketball... he has strong muscles... he is bouncing... he has a name... How do we fill in this image?
  17. 17. Facts Sequences = Declarative knowledge = Procedural knowledge
  18. 18. Facts Sequences = Declarative knowledge = Procedural knowledge Bounce > Run > Jump
  19. 19. Facts Sequences = Declarative knowledge = Procedural knowledge Bounce > Run > Jump Properties & components is, has, ... Sequence/optional/selection associations
  20. 20. Declarative knowledge Where is the name/logo of your company? Procedural knowledge Where is the search box?
  21. 21. Declarative knowledge Where is the name/logo of your company? = fact knowledge Procedural knowledge Where is the search box? = a habbit
  22. 22. Auto stop for drip
  23. 23. Wooden escalators & fire
  24. 24. we become automatic
  25. 25. Driving a car
  26. 26. mental models are procedural theories
  27. 27. Technical map Car Steering wheel
  28. 28. Technical map “How it works” Car Steering wheel “How do I use it”
  29. 29. 2 Procedural knowledge
  30. 30. Procedural knowledge You explore & learn as you go (sometimes the wrong way) ‣ We have to re-educate ourselves after the change of a UI ‣ This is why people hate change in interfaces ‣
  31. 31. Re-educate 6 billion users?
  32. 32. Evil strategies of online difficult Online banking made banking
  33. 33. How much do we want people to learn to use our products?
  34. 34. 150 The oven doesn’t give feedback if you’re using it wrong... 100 50 200 250 300 °C Don’t you just love double clicking People that double click on online links
  35. 35. Exercise: ordering coffee — What steps do you go through when you order coffee in a coffee place?
  36. 36. How does the mental model work?
  37. 37. How does the mental model work? — We don’t think about it or the order we do things in
  38. 38. ‣ It’s hard to pass on procedural knowledge because we forget to explain the details to the ones that we educate. ‣ The more people you ask how they order a coffee, the more complete your mental model will be.
  39. 39. ‣ It’s hard to pass on procedural knowledge because we forget to explain the details to the ones that we educate. ‣ The more people you ask how they order a coffee, the more complete your mental model will be. (20 will do ;-)
  40. 40. Exercise: how do you order a coffee in Paris?
  41. 41. We feel embarrassed when we get the mental model wrong
  42. 42. We don’t want to make our users feel stupid
  43. 43. Do you order at the counter or on the terrace?
  44. 44. cup, bowl, or mug?
  45. 45. What cup or mug you use depends on the country or culture
  46. 46. With cups or mugs there is no one single truth. It is not in the dictionary.
  47. 47. starbucksorder.tumblr.com/drinksizes
  48. 48. 3 How the brain works
  49. 49. the brain takes 20% of our energy *
  50. 50. the brain takes 20% of our energy * * That’s why we don’t like thinking & we’re lazy :-)
  51. 51. Thinking/cognition Feeling/emotion Instinct
  52. 52. Thinking/cognition Feeling/emotion Smell Faces Instinct
  53. 53. If you design, the easiest area to tap into is the instict
  54. 54. But we feel tricked if they sell us stuff trough instinct
  55. 55. Artificial bread smell
  56. 56. Abercrombie & Fitch
  57. 57. Apple MacBook
  58. 58. Thinking/cognition Thinking/cognition is the hardest part to reach
  59. 59. Thinking/cognition But we design for thinking (Steve Krug)
  60. 60. Feeling/emotion We should design for emotion (Aarron Walter)
  61. 61. humans are not made for multitasking
  62. 62. Selective attention test
  63. 63. 72 +
  64. 64. Miller’s number _ 7+ 2 5 steps of working memory * Sometimes called short term memory George Miller *
  65. 65. 41 +
  66. 66. Sensory memory Transferred Working memory _ 4 +1 Transferred Retrieved Long term memory
  67. 67. Cocktail party effect
  68. 68. the difference between brain & computer
  69. 69. Brain Computer = web of connections = print with components
  70. 70. Brain Computer = web of connections = print with components Do more things at the same time ( I breath, stand, smile, talk, listen ) Do one thing at the same time
  71. 71. Brain Computer = web of connections = print with components Do more things at the same time ( I breath, stand, smile, talk, listen ) We don’t have to think about these things ( = Procedural ) Do one thing at the same time
  72. 72. Brain Computer = web of connections = print with components Do more things at the same time ( I breath, stand, smile, talk, listen ) We don’t have to think about these things ( = Procedural ) Thinking is a task ( We can’t multitask ) Do one thing at the same time
  73. 73. Sensory memory Transferred Working memory _ 4 +1 Transferred Retrieved Long term memory
  74. 74. Sensory memory Transferred Working memory Transferred Retrieved Long term memory _ 4 +1 Sometimes called short term memory 1. Declarative knowledge 2. Procedural knowledge
  75. 75. Cocktail party effect Sensory memory Selective attention Working memory Transferred Retrieved Long term memory _ 4 +1 Sometimes called short term memory 1. Declarative knowledge 2. Procedural knowledge
  76. 76. Starbucks coding their cup sizes in your head Cocktail party effect Sensory memory Selective attention Medium is tall Working memory Encoded Retrieved Long term memory _ 4 +1 Sometimes called short term memory 1. Declarative knowledge 2. Procedural knowledge
  77. 77. 4 Decision making and design
  78. 78. behavioral design
  79. 79. Subliminal messaging
  80. 80. we always look for patterns
  81. 81. This is the default This is how you opt out Procedural knowledge
  82. 82. darkpatterns.org
  83. 83. we can spot a face in a cloud
  84. 84. Pareidolia
  85. 85. we are trained to read emotion
  86. 86. In the last 24 months have you used any tobacco products? Such as cigarettes, pipe tobacco, cigars or nicotine replacement products Yes No
  87. 87. prescriptive vs descriptive
  88. 88. Prescriptive Tells us what to do Descriptive Facts, nothing new
  89. 89. cognitive bias
  90. 90. “A cognitive bias is a pattern of deviation in judgment, whereby inferences about other people and situations may be drawn in an illogical fashion. Individuals create their own -subjective social realityfrom their perception of the input.” — Wikipedia
  91. 91. Quality of a restaurant
  92. 92. Sensory memory Selective attention Working memory _ 4 +1 Encoded Retrieved Long term memory
  93. 93. Prescriptive eyes Faces Pattern recognition Cognitive bias Emotion Emotion Sensory memory Selective attention Working memory _ 4 +1 Encoded Retrieved Long term memory
  94. 94. 5 Applying psychology in design
  95. 95. loss of goal
  96. 96. Paper left on copier
  97. 97. Forgotten bank card
  98. 98. applying menu psychology
  99. 99. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  100. 100. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  101. 101. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  102. 102. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  103. 103. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  104. 104. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  105. 105. Uncle Joey's eatery Pan fried Sea Bream 24. Uncle Joey's Burger 16. Glastonbury Smokehouse Bacon & Farm Fresh Eggs 13,50. Spaghetti Carbonara 12.
  106. 106. Inductive reasoning What we learned from stuff before Deductive reasoning We use the stuff/knowledge we have
  107. 107. Sensory memory Selective attention Working memory _ 4 +1 Encoded Retrieved Long term memory
  108. 108. Smell of smokehouse bacon Script font No currency signs Price framing Chalkboard Uncle Joey Emotion Emotion Emotion Sensory memory Selective attention Working memory _ 4 +1 Encoded Retrieved Long term memory
  109. 109. power words
  110. 110. Free shipping!
  111. 111. 1 week Symantec spam
  112. 112. Clean air
  113. 113. social proof
  114. 114. Sony yellow walkman
  115. 115. The lime in Corona. a) An ancient aztec fertility ritual b) Introduced by Spanish colonists in drinking water to act as a antibacterial c) A result of a bet between 2 barmen in NYC in 1981 to see if he could get patrons to copy him by putting a lime in the neck of the bottle
  116. 116. We read what others say online and on social media.
  117. 117. the power of scarcity
  118. 118. Last pair available!
  119. 119. Last pair available!
  120. 120. photos add emotion
  121. 121. Can you feel the holidays?
  122. 122. KLM Travlr
  123. 123. Small procuct pictures
  124. 124. Add people
  125. 125. Make photo’s bigger & features smaller
  126. 126. ditch that banner
  127. 127. Wetransfer
  128. 128. airbnb as good practice
  129. 129. Airbnb
  130. 130. a good start
  131. 131. getmentalnotes.com
  132. 132. getmentalnotes.com
  133. 133. Gifting We feel the need to reciprocate when given something as a gift. Recognition over Recall It’s easier to recognize things we have previously experienced than it is to recall those things from memory. What can you give away? It could be a free account or upgrade. Maybe a free report (personal informatics are interesting). Perhaps a gift card. Make it something unexpected. And if other similar services are giving away the same thing, it’s not a gift—it’s expected. Multiple choice or one-click options are an easy way for people to interact with a site. When asking people to list things from memory, try complementing (or replacing) empty form fields with defined, random or intelligent choices that people can click on or rate. See also: Delighters, Variable Rewards, Badges See also: Visual Imagery, Limited Choices, Contrast, Feedback Loop Mental Notes Sneak Preview | Find out more at www.getmentalnotes.com
  134. 134. Wikipedia
  135. 135. nomensa.com/blog
  136. 136. Great on application Mental Notes cards by Steven Anderson Buy Great read Buy Great on application Great on theory Ok on application
  137. 137. Neuro Web Design
  138. 138. thank you what an awesome audience!
  139. 139. Ben De Vleeschauwer Lecturer Multimedia & Communication Technology Karel de Grote College University www.mctantwerpen.be @sheriffbenjamin

×