1.
UX, Psychology and
the Power of 100
mr joe leech @mrjoe
A framework for product design

2.
I’m @mrjoe
but you can
call me Joe
Have you ever?
Bought a raspberry pi?
Are you on the giffgaff phone
network?
Booked a hotel with Marrio‫?מּ‬
Bought a uk train ticket
Bought something on eBay?
You’ve used something I’ve
help design.

3.
⅓ ⅓
Interaction
Design
⅓
User
Research
Product
Direction

4.
@mrjoe
Do the right
things in the
right order.
I help companies and startups

5.
I’m series editor for
these books

6.
@mrjoe

7.
October 2011 Dubai Police
noted a 20% drop in
car accidents.
In Abu Dabai it was 40%.
Why?

8.
@mrjoe
http://www.slideshare.net/cxpartners/driven-to-distraction-giles-colborne
http://money.cnn.com/2011/10/13/technology/blackberry_outage/

9.
@mrjoe
Part #1 – The
Problem
9

10.
@mrjoe
About half of all
smartphone and tablet
owners use these devices
while watching TV
http://www.fastcodesign.com/1672845/report-how-people-really-use-tablets-while-watching-tv

11.
@mrjoe
1. Distraction
We are distracted

12.
@mrjoe
Extraneous factors in judicial decisions
Time of the day
http://www.pnas.org/content/108/17/6889.full
Proportionof
favourabledecisions
A study made to
see how judges
performed before
and aﬞer meals.

13.
@mrjoe
1. Distraction
2. Tiredness / Hunger

14.
@mrjoe
…I’m tired, I’ve had a
hard day, the last thing
I want to do is my car
insurance.

15.
@mrjoehttps://mrjoe.uk/maslows-hierarchy-needs-psychology-myth-busting-1/
Do you know this? A
model for motivation
from Maslow, his
hierarchy of need

16.
@mrjoe
“no clear
evidence for
Maslow…”
https://mrjoe.uk/maslows-hierarchy-needs-psychology-myth-busting-1/
But it’s a myth!

17.
@mrjoe
1. Distraction
2. Tiredness / Hunger
3. Motivation

18.
#p4d @mrjoe @mrjoe
18
6 vs 30
A study with jam. On
alternate Saturdays 6 or
30 jams were sold. On
which did they sell more?
Yes, when there were 6 to
choose from
They also conducted a
survey. Would you prefer
to choose from 6 or 30
types of jam?
Pre‫מּ‬y much unanimously
people said 30.
That’s why surveys
aren’t an indicator
of behaviour

19.
@mrjoe
Time
taken to
respond
Number of options

20.
@mrjoe
Time
taken to
respond
Number of options
Hick’s
LawWhat’s the best thing
about Hick’s Law. ITS A
LAW! No-one can argue
with that!

21.
@mrjoe
Cognitive
Load
Thinking
reasoning
deciding
=

22.
@mrjoe
1. Distraction
2. Tiredness / Hunger 3.
Motivation
4. Choice
Choice is hard

23.
@mrjoe
All that leads to
this…

24.
@mrjoe
I want to punch this
website in the face!

25.
@mrjoe
My car insurance is through
Money Saving Market I think,
or Sheila’s Wheels, or
something, it had the opera
guy.
The brand being
meaningless.

26.
@mrjoe
h‫מּ‬p://en.wikipedia.org/wiki/Hawthorne_effect
The Hawthorne effect,
psychologists observed
the productivity of worker
depending on light levels.
They benchmarked at
100% luminosity. At 80%,
productivity was the
same. 60% same. 40%
same, 20%
Why?
Because the workers
were being observed!

27.
@mrjoe
Beware user research.
You won’t see the four
things I mentioned.

28.
@mrjoe
You can use this to
evaluate your digital
stuff. Coming soon…

29.
@mrjoe
Total cognitive capacity (or
thinking energy) is 100
An example.
This is someone is feeling
great, not distracted, tired,
offered a huge choice etc
This is the power of 100.

30.
@mrjoe
Perfect cognitive capacity available 100
1. Is the TV on in the
background?
Yes, take 20

31.
@mrjoe
Perfect cognitive capacity available 100
1. Is the TV on in the
background?
Yes, take 20
2. Is it before a mealtime? Yes, take 10

32.
@mrjoe
Perfect cognitive capacity available 100
1. Is the TV on in the
background?
Yes, take 20
2. Is it before a mealtime? Yes, take 10
3. Does the user have
notifications turned on on
their phone?
Yes, take 5

33.
@mrjoe
Perfect cognitive capacity available 100
1. Is the TV on in the
background?
Yes, take 20
2. Is it before a mealtime? Yes, take 10
3. Does the user have
notifications turned on on
their phone?
Yes, take 5
4. How many choices are
they offered on arrival?
Five choices
Take 5 per choice is 25

34.
@mrjoe
Perfect cognitive capacity available 100
1. Is the TV on in the
background?
Yes, take 20
2. Is it before a mealtime? Yes, take 10
3. Does the user have
notifications turned on on
their phone?
Yes, take 5
4. How many choices are
they offered on arrival?
Five choices
Take 5 per choice is 25
Total cognitive load is 60

35.
@mrjoe
Part #2 – The
Solution
35

36.
@mrjoe
The micro:
Psychology and
Interaction Design

37.
@mrjoe
Wikipedia from 2010

38.
@mrjoe

39.
@mrjoe
Intuitively we know it’s bad. But how can
psychology tell us it’s bad? We need to
go back to theory…

40.
@mrjoe
N
S
We know these two. But it’s
not always easy to
remember the other two.

41.
@mrjoe
N
S
W
Wrong! I do this all the
time.

42.
@mrjoe
Never
Wrong! I do this all the
time.

43.
@mrjoe
Never
S
Eat
Shredded
Wheat
Here’s how humans deal
with this. More examples:
Example of a mnemonic
Divorced, beheaded, died /
Divorced, beheaded,
survived.

44.
@mrjoe
Facts
Declarative
knowledge
N
S
EW

45.
@mrjoe
45
Sequences
Procedural
knowledge
Never
Shredded
Eat
Wheat
N
S
EW

46.
@mrjoe
46
Facts Sequences
Declarative
knowledge
Procedural
knowledge
The two types of
knowledge

47.
@mrjoe
Two types of interaction,
which matches each type of
knowledge?

48.
@mrjoe
Declarative. (Mostly!) Procedural.

49.
@mrjoe
Taking us back to
wikipedia. This breaks out
existing procedures. Our
mental model of how this
works breaks. Here’s how it
should work.

50.
@mrjoe
1
Where do you go for
search? Top right!

51.
@mrjoe
1
2
What are you looking for?
A text box.

52.
@mrjoe
1
2
Search
3
And a bu‫מּ‬on.
You are all smart, you could have
designed this fix. Here psychology
tells us why this works.

53.
@mrjoe
axiom
Design
A statement or proposition
which is regarded as being
established, accepted, or
self-evidently true.

54.
@mrjoe
Here’s a design axiom, click
on the logo to go back

55.
@mrjoe
Axiom: where should
navigation be placed?

56.
@mrjoe
Log in

57.
@mrjoe
Cart / basket

58.
@mrjoe
Cart / basket
This icon!

59.
@mrjoe
Language
Where does it
go and how
does it look?

60.
@mrjoe
Language

61.
@mrjoe
So what did
wikipedia do?

62.
@mrjoe
Not bad! that
icon isn’t the
best.
How did users
feel?

63.
@mrjoe
97% OF ALL PEOPLE
WANT THE SEARCH
BOX BACK ON THE
LEFT SIDE. SO
WHEN WILL THIS
FINALLY BE FIXED ?
--Georg Scholz
http://en.wikipedia.org/wiki/Wikipedia:User_experience_feedback/
search_box#97.25_OF_ALL_PEOPLE_WANT_THE_SEARCH_BOX_BACK_ON_THE_LEFT_SIDE._SO_WHEN_WILL_THIS_FINALLY_BE_FIXED_.3F
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
SEARCH BOX ON THE LEFT PLEASE!!!!!!!!
—Preceding unsigned comment added by 192.88.212.43 (talk)
13:54, 19 May 2010 (UTC)
They hated it!

64.
@mrjoe
So when you are
tired, distracted
or consfused.
You can’t use
new or novel
interactions. You
go back to the
stuff you know.
why the
hamburger
menu will never
work, even if
users get used
to it.

65.
@mrjoe
The macro:
Psychology and the
User Experience

66.
@mrjoe
Why do French waiters
treat British and
American customers
differently to French
ones? When do they
ask them to pay?
A cafe in Paris
What are the steps you
go through to order a
coffee here?
1. Ask to be seated
2. Order
3. Get coffee
4. Ask for bill
5. Pay
Americans would leave
without paying…

67.
@mrjoe
Because Starbuck
taught them how to
order coffee.
What’s the mental
model here?
1. Stand in line
2. Order
3. Pay
4. Get drink
Their mental model
tells them to pay before
they get the drink. In
the Parisian cafe their
brain assumes they
have paid

68.
@mrjoe
There are design
axioms that tells us
which model to use
Counter easily visible
Line to get cofee

69.
@mrjoe
There are design
axioms that tells us
which model to use
The menus tell you to
wait to be seated
The waiter tells you it’s
table service.
Counter hidden right at
the back of the cafe.

70.
@mrjoe
You know how to use a
life right?

71.
@mrjoe
Um.
When the mental model
breaks we feel nervous.

72.
@mrjoe
Let’s go away for
the weekend
Decide on…
What do we need to
do?

73.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in July
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away

74.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in July
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away
July

75.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in July
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away
June
M T W T F S S
M T W T F S S
T W T F S S
M T W

76.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in July
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away
July

77.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in July
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away

78.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in July
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away
3

79.
@mrjoe
What
• Beach
• City
• Ski
• Spa
When
• A weekend in June
• Thu / Fri to Sun / Mon
• School holidays
Where
• Drive, fly or train
• 3 hours away
July
M T W T F S S
M T W T F S S
T W T F S S
M T W
3

80.
@mrjoe
Let’s go to the Beach, drive,
max three hours, on the first
or second week in July
And we apply that to…

81.
@mrjoe
Let’s go to the Beach, fly, max three hours away on
the first or second week in July
This sucks!

82.
@mrjoe
Booking is be‫מּ‬er, it’s
not perfect, but it’s
much be‫מּ‬er.

83.
@mrjoe
Which explains…

84.
@mrjoe
A designer
who doesn't
understand
psychology
is going to be no
more successful
than an architect
who doesn’t
understand
physicsImage: http://victorenrich.com/archives/155

85.
@mrjoe
joe@mrjoe.uk
Stay in
touch
@mrjoe
h‫מּ‬ps://mrjoe.uk