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