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.

3. Communication goes well
between humans,
but not between technology.

4. 1
2
3
4
5
Mental models
Procedural knowledge
How the brain works
Decision making and design
Applying psychology in design

5. 1
Mental models

6. Baking pie at 220°

7. So what is
knowledge?

8. Tomato is a?

9. What’s the capital of Paris?

10. Fact
Sequence
Tomato is a fruit
Boil, peel, simmer

11. Fact
Sequence
Tomato is a fruit
Boil, peel, simmer
What is my name?
How to ride a bicycle

12. 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

14. What did you see?

15. Which hand had the ball?
Left
Right

16. “You don’t remember all the details of your marriage,
but you remember who you’re married to”
— Joe Leech, FOWD 2012

17. we fill in
the story

18. How do we fill in this image?

19. he plays basketball...
he has strong muscles...
he is bouncing...
he has a name...
How do we fill in this image?

20. Facts
Sequences
= Declarative knowledge
= Procedural knowledge

21. Facts
Sequences
= Declarative knowledge
= Procedural knowledge
Bounce > Run > Jump

22. Facts
Sequences
= Declarative knowledge
= Procedural knowledge
Bounce > Run > Jump
Properties & components
is, has, ...
Sequence/optional/selection
associations

23. Declarative knowledge
Where is the name/logo of your company?
Procedural knowledge
Where is the search box?

24. Declarative knowledge
Where is the name/logo of your company?
= fact knowledge
Procedural knowledge
Where is the search box?
= a habbit

25. Auto stop for drip

26. Wooden escalators & fire

27. we become
automatic

28. Driving a car

29. mental
models are
procedural
theories

30. Technical map
Car
Steering wheel

31. Technical map
“How it works”
Car
Steering wheel
“How do I use it”

32. 2
Procedural knowledge

33. 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
‣

34. Re-educate 6 billion users?

35. Evil strategies of online difficult
Online banking made banking

36. How much do we want people to learn
to use our products?

37. 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

39. Exercise:
ordering coffee
— What steps do you go through when
you order coffee in a coffee place?

40. How does the mental
model work?

41. How does the mental
model work?
— We don’t think about it or the order we do things in

42. ‣
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.

43. ‣
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 ;-)

44. Exercise:
how do you order a
coffee in Paris?

45. We feel embarrassed
when we get the
mental model wrong

46. We don’t want to make
our users feel stupid

47. Do you order at the
counter or on the
terrace?

48. cup, bowl,
or mug?

50. What cup or mug you use
depends on the country or culture

51. With cups or mugs there is
no one single truth.
It is not in the dictionary.

52. starbucksorder.tumblr.com/drinksizes

53. 3
How the brain works

54. the brain
takes 20%
of our energy
*

55. the brain
takes 20%
of our energy
*
* That’s why we don’t like thinking & we’re lazy :-)

57. Thinking/cognition
Feeling/emotion
Instinct

58. Thinking/cognition
Feeling/emotion
Smell
Faces
Instinct

59. If you design,
the easiest area
to tap into is the instict

60. But we feel tricked
if they sell us stuff
trough instinct

61. Artificial bread smell

62. Abercrombie & Fitch

63. Apple MacBook

64. Thinking/cognition
Thinking/cognition
is the hardest part
to reach

65. Thinking/cognition
But we design for
thinking (Steve Krug)

66. Feeling/emotion
We should design for
emotion (Aarron Walter)

68. humans are
not made for
multitasking

70. Selective attention test

71. 72
+

72. Miller’s number
_
7+ 2
5 steps of working memory
* Sometimes called short term memory
George Miller
*

73. 41
+

74. Sensory
memory
Transferred
Working
memory
_
4 +1
Transferred
Retrieved
Long term
memory

75. Cocktail party effect

76. the difference
between
brain &
computer

77. Brain
Computer
= web of connections
= print with components

78. 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

79. 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

80. 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

81. Sensory
memory
Transferred
Working
memory
_
4 +1
Transferred
Retrieved
Long term
memory

82. Sensory
memory
Transferred
Working
memory
Transferred
Retrieved
Long term
memory
_
4 +1
Sometimes called
short term memory
1. Declarative knowledge
2. Procedural knowledge

83. 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

84. 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

85. 4
Decision making and design

86. behavioral
design

87. Subliminal messaging

90. we always
look for
patterns

91. This is the default
This is how you opt out
Procedural knowledge

92. darkpatterns.org

93. we can spot
a face in a
cloud

94. Pareidolia

97. we are
trained
to read
emotion

99. In the last 24 months have you used
any tobacco products?
Such as cigarettes, pipe tobacco, cigars
or nicotine replacement products
Yes
No

100. prescriptive
vs
descriptive

101. Prescriptive
Tells us what to do
Descriptive
Facts, nothing new

102. cognitive
bias

103. “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

104. Quality of a restaurant

105. Sensory
memory
Selective
attention
Working
memory
_
4 +1
Encoded
Retrieved
Long term
memory

106. Prescriptive eyes
Faces
Pattern recognition
Cognitive bias
Emotion
Emotion
Sensory
memory
Selective
attention
Working
memory
_
4 +1
Encoded
Retrieved
Long term
memory

107. 5
Applying psychology in design

108. loss of goal

109. Paper left on copier

110. Forgotten bank card

111. applying
menu
psychology

112. 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.

113. 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.

114. 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.

115. 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.

116. 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.

117. 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.

118. 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.

119. Inductive reasoning
What we learned from stuff before
Deductive reasoning
We use the stuff/knowledge we have

120. Sensory
memory
Selective
attention
Working
memory
_
4 +1
Encoded
Retrieved
Long term
memory

121. 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

122. power words

124. Free shipping!

126. 1 week Symantec spam

127. Clean air

128. social proof

129. Sony yellow walkman

131. 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

132. We read what others say
online and on social media.

134. the power of
scarcity

135. Last pair available!

136. Last pair available!

137. photos add
emotion

138. Can you feel the holidays?

143. KLM Travlr

145. Small procuct pictures

146. Add people

147. Make photo’s bigger & features smaller

148. ditch that
banner

149. Wetransfer

150. airbnb
as good
practice

151. Airbnb

154. a good
start

155. getmentalnotes.com

156. getmentalnotes.com

159. 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

160. Wikipedia

161. nomensa.com/blog

162. Great on application
Mental Notes cards
by Steven Anderson
Buy
Great read
Buy
Great on application
Great on theory
Ok on application

163. Neuro Web Design

164. thank you
what an awesome audience!

165. Ben De Vleeschauwer
Lecturer Multimedia & Communication Technology
Karel de Grote College University
www.mctantwerpen.be
@sheriffbenjamin