Psychologie voor designers - Ben De Vleeschauwer, Docent Web & UX (KDG)
-
Upload
monkeyshot -
Category
Design
-
view
1.319 -
download
0
Transcript of Psychologie voor designers - Ben De Vleeschauwer, Docent Web & UX (KDG)
Communication goes wellbetween humans,
but not between technology.
2 Procedural knowledge
3 How the brain works
4 Decision making and design
5 Applying psychology in design
1 Mental models
1Mental models
Baking pie at 220°
So what isknowledge?
Tomato is a?
What’s the capital of Paris?
Fact Sequence
Tomato is a fruit Boil, peel, simmer
Fact Sequence
Tomato is a fruitWhat is my name?
Boil, peel, simmerHow to ride a bicycle
Fact Sequence
Tomato is a fruitWhat is my name?Where do I live?
Boil, peel, simmerHow to ride a bicycleHow do I ride to my house
What did you see?
Which hand had the ball?
Left Right
“You don’t remember all the details of your marriage,but you remember who you’re married to”
— Joe Leech, FOWD 2012
we fill inthe story
How do we fill in this image?
he plays basketball...
How do we fill in this image?
he has strong muscles...
he is bouncing...he has a name...
Facts Sequences
= Declarative knowledge = Procedural knowledge
Facts Sequences
= Declarative knowledge = Procedural knowledge
Bounce > Run > Jump
Facts Sequences
= Declarative knowledge = Procedural knowledge
Properties & components
is, has, ...
Bounce > Run > Jump
Sequence/optional/selection
associations
Declarative knowledgeWhere is the name/logo of your company?
Procedural knowledgeWhere is the search box?
Declarative knowledgeWhere is the name/logo of your company?= fact knowledge
Procedural knowledgeWhere is the search box?= a habbit
Auto stop for drip
Wooden escalators & fire
we become automatic
Driving a car
mental models are procedural theories
Technical map Car Steering wheel
Technical map Car Steering wheel
“How it works” “How do I use it”
2Procedural 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
Procedural knowledge
Re-educate 6 billion users?
Online banking made difficultEvil strategies of online banking
How much do we want people to learn to use our products?
The oven doesn’t give feedback if you’re using it wrong...
Don’t you just love double clicking
People that double clickon online links
50
100
150200
250
300
°C
Exercise:ordering coffee— What steps do you go through when you order coffee in a coffee place?
How does the mental model work?
How does the mental model work?— We don’t think about it or the order we do things in
‣ 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.
‣ 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 ;-)
Exercise:how do you order a coffee in Paris?
We feel embarrassed when we get the mental model wrong
We don’t want to make our users feel stupid
Do you order at the counter or on theterrace?
cup, bowl, or mug?
What cup or mug you usedepends on the country or culture
With cups or mugs there is no one single truth.
It is not in the dictionary.
starbucksorder.tumblr.com/drinksizes
3How the brain works
the brain takes 20%of our energy
*
the brain takes 20%of our energy* That’s why we don’t like thinking & we’re lazy :-)
*
Thinking/cognition
Instinct
Feeling/emotion
Smell
Thinking/cognition
Faces
Feeling/emotion
Instinct
If you design,the easiest areato tap into is the instict
But we feel trickedif they sell us stuff trough instinct
Artificial bread smell
Abercrombie & Fitch
Apple MacBook
Thinking/cognition
Thinking/cognitionis the hardest partto reach
Thinking/cognition
But we design for thinking (Steve Krug)
We should design for emotion (Aarron Walter)
Feeling/emotion
humans arenot made for multitasking
Selective attention test
7 2+
7 2
Miller’s number
George Miller
+_ 5 steps of working memory
* Sometimes called short term memory
*
4 1+
TransferredSensorymemory
Workingmemory
Long termmemory
Transferred
Retrieved
4 1+_
Cocktail party effect
the difference between brain & computer
Brain Computer
= web of connections = print with components
Brain
( I breath, stand, smile, talk, listen )
Do more things at the same time
Computer
= web of connections = print with components
Do one thing at the same time
Brain
( I breath, stand, smile, talk, listen )
Do more things at the same time
Computer
= web of connections = print with components
Do one thing at the same time
We don’t have to think about these things( = Procedural )
Brain
( I breath, stand, smile, talk, listen )
Do more things at the same time
Computer
= web of connections = print with components
Do one thing at the same time
We don’t have to think about these things( = Procedural )
Thinking is a task( We can’t multitask )
TransferredSensorymemory
Workingmemory
Long termmemory
Transferred
Retrieved
4 1+_
Sensorymemory
Workingmemory
Long termmemoryRetrieved
4 1+_
Sometimes calledshort term memory
1. Declarative knowledge2. Procedural knowledge
TransferredTransferred
SelectiveSensorymemory
Workingmemory
Long termmemoryRetrieved
4 1+_
attention
Cocktail party effect
Sometimes calledshort term memory
1. Declarative knowledge2. Procedural knowledge
Transferred
SelectiveSensorymemory
Workingmemory
Long termmemory
Encoded
Retrieved
4 1+_
Starbucks coding their cup sizes in your head
Medium is tall
attention
Cocktail party effect
Sometimes calledshort term memory
1. Declarative knowledge2. Procedural knowledge
4Decision making and design
behavioral design
Subliminal messaging
we always look for patterns
Procedural knowledge
This is the default
This is how you opt out
darkpatterns.org
we can spot a face in a cloud
Pareidolia
we are trainedto read emotion
In the last 24 months have you used any tobacco products?
Such as cigarettes, pipe tobacco, cigars or nicotine replacement products
Yes
No
prescriptive vs descriptive
Tells us what to do Facts, nothing new
Prescriptive Descriptive
cognitive bias
“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 reality- from their perception of the input.”
— Wikipedia
Quality of a restaurant
SelectiveSensorymemory
Workingmemory
Long termmemory
Encoded
Retrieved
4 1+_
attention
SelectiveSensorymemory
Workingmemory
Long termmemory
Encoded
Retrieved
4 1+_
Pattern recognitionCognitive bias
attention
Emotion
Prescriptive eyes Faces
Emotion
5Applying psychology in design
loss of goal
Paper left on copier
Forgotten bank card
applying menu psychology
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.
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.
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.
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.
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.
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.
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.
What we learned from stuff before
Inductive reasoning
Deductive reasoningWe use the stuff/knowledge we have
SelectiveSensorymemory
Workingmemory
Long termmemory
Encoded
Retrieved
4 1+_
attention
SelectiveSensorymemory
Workingmemory
Long termmemory
Encoded
Retrieved
4 1+_
Script fontNo currency signs
Price framing
attention
Emotion
ChalkboardUncle Joey
Emotion
Smell of smokehouse
bacon
Emotion
power words
Free shipping!
1 week Symantec spam
Clean air
social proof
Sony yellow walkman
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
We read what others say online and on social media.
the power of scarcity
Last pair available!
Last pair available!
photos add emotion
Can you feel the holidays?
KLM Travlr
Small procuct pictures
Add people
Make photo’s bigger & features smaller
ditch that banner
Wetransfer
airbnbas good practice
Airbnb
a good start
getmentalnotes.com
getmentalnotes.com
Recognition over Recall
It’s easier to recognize things we have previously experienced than it is to recall
those things from memory.
See also: Visual Imagery, Limited Choices, Contrast, Feedback Loop
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.
GiftingWe feel the need to reciprocate when given
something as a gift.
See also: Delighters, Variable Rewards, Badges
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.
Mental Notes Sneak Preview | Find out more at www.getmentalnotes.com
Wikipedia
nomensa.com/blog
Buy
Great on theoryOk on application
Great on applicationBuy
Great read
Great on applicationMental Notes cardsby Steven Anderson
Neuro Web Design
thank youwhat an awesome audience!
Ben De VleeschauwerLecturer Multimedia & Communication TechnologyKarel de Grote College University
www.mctantwerpen.be@sheriffbenjamin