uxsg#8 workshop
Post on 27-Jan-2015
109 Views
Preview:
DESCRIPTION
TRANSCRIPT
cxpartners 1
@gilescolborne
Simplicity
2
I would not give a figfor the simplicitythis side of complexity,
but I would give my life for the simplicity on the other side of complexity.
Oliver Wendell Holmes Jr.
Advanced simplicity@gilescolborne
3
4
5
6
7
http://www.flickr.com/photos/vanf/5321214369/8
9
10
11
http://www.flickr.com/photos/iwouldstay/145628030/12
Donald Norman
13
Simplicity isnot the answer
Leonardo Da Vinci
14
Simplicity isthe ultimatesophistication
Simplicity is an experience
15
16
How it’s engineered
17
18
How it feels to use
19
How it’s engineered
How it looks
20
What is minimal?GO
21
May 2013 GO
Usable
22
Nov 2013 GO
23
May 2012 GO
24
May 2013
Apr 2013 Mar 2013 Feb 2013 Jan 2013 Dec 2012
25
Simple
Simplicity = Extreme usability
26
Efficiency Effectiveness Satisfaction
Usability
ISO 9241-11
27
Efficiency Effectiveness Satisfaction
Business system
28
Efficiency Effectiveness Satisfaction
Call centre
29
Efficiency Effectiveness Satisfaction
Web site
30
Efficiency Effectiveness Satisfaction
Simplicity
31
32
A B
GOMS KLM
33
Keying(average typist)
PointingHomingMentallypreparing
Waitingfor a response
Icons: The Noun Project and Camila Bertoco
GOMS KLM
M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
34
A B
GOMS KLM
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
1. Walk through the interface step by step.
35
A B
GOMS KLM
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
2. List the Mental Preparation (M), Keying (K), Pointing (P), Homing(H) and Response times (R).
HPKPKHKK
HPKHKK
36
A B
GOMS KLM
3. Place Ms in front of all Ks and Ps
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
HPKPKHKMK
HPKHKMK
MMMM
M
MM
M
37
A B
GOMS KLM
4. Delete Ms that appear between Ks
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
HPKPKHKMK
HPKHKMK
MMMM
M
MM
M
38
A B
GOMS KLM
4. Delete Ms that appear between Ks
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
HPKPKHKK
HPKHKK
MMMM
M
MM
M
39
A B
GOMS KLM
4. Delete Ms that appear between Ps and Ks (PMK becomes PK)
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
HPKPKHKK
HPKHKK
M
M
M
M
M
40
A B
GOMS KLM
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
HPKPKHKK
HPKHKK
M
M
M
M
M
M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
41
A B
GOMS KLM
Put hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)
Put hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)
0.42.450.22.450.20.41.75
0.42.450.20.40.2
M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
7.85 3.65
42
Enter your Post Code
BS1 4ND OK
ADDRESSType your address
22 Queen Square Br|
ADDRESS
Which is more efficient?
22 Queen Square, Bristol, BS1 4ND
43
Keying PointingHomingMentallypreparing
Waitingfor a response
Icons: The Noun Project and Camila Bertoco
GOMS KLM
M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
22 Queen Sq
Bristol
BS1 4ND
OKOK
20 Queen Sq Bristol, BS1 4ND
21 Queen Sq Bristol, BS1 4ND22 Queen Sq Bristol, BS1 4ND23 Queen Sq Bristol, BS1 4ND22 Queen Sq Bristol, BS1 4ND
44
Enter your Post CodeADDRESS
BS1 4ND
Choose an address
22 Queen Square Br|
22 Queen Sq, Bristol, BS1 4ND
45
ADDRESS
22 Queen Sq, Bristol, BS1 4ND
22 Queen Sq, Bristol, BS1 4ND
46
Rules (simplified)
Walk through the interface step by step.
List the Mental Preparation (M), Keying (K), Pointing (P), Homing(H) and Response times (R).
Place Ms in front of all Ks and Ps
Delete Ms between Keying charactersin a single unit (like a word or a sentence)
But keep the first M (thinking what to type).
Delete Ms that come between Pointing and Keying(so PMK becomes PK)
M = 1.35 sec K = 0.2 sec H = 0.4 sec P = 1.1 sec R = ?
22 Queen Sq
Bristol
BS1 4ND
OKOK
20 Queen Sq Bristol, BS1 4ND
21 Queen Sq Bristol, BS1 4ND22 Queen Sq Bristol, BS1 4ND23 Queen Sq Bristol, BS1 4ND22 Queen Sq Bristol, BS1 4ND
47
Enter your Post CodeADDRESS
M Figure out what to doH Put hand on mouseP Move the mouse into positionK Click into the text fieldH Put hand on keyboardMKKKKKKK Remember and Enter Post CodeM Figure out what to doH Put hand on mouseP Move the mouse into position and click OKR Wait for the system to refresh (0. 5 seconds)M Figure out what to doP Move the mouse into positionK Click the drop down listM Figure out what to doP Move the mouse into positionK Click on the correct itemR Wait for the system to refresh (0. 5 seconds)M Check the address is correct
TOTAL = 16.5 seconds6 points where you figure out what to do (M)
BS1 4ND
Choose an address
22 Queen Square Br|
22 Queen Sq, Bristol, BS1 4ND
48
ADDRESS
22 Queen Sq, Bristol, BS1 4ND
22 Queen Sq, Bristol, BS1 4ND
M Figure out what to doH Put hand on mouseP Move the mouse into positionK Click into the text fieldH Put hands on keyboardMKKKKKKKKKKKKKKKKKK Enter addressM Figure out what to doH Put hand on mouseP Move the pointer into positionK Click on the addressM Check the address is correct
TOTAL = 12.8 seconds4 points where you figure out what to do (M)
Efficiency Effectiveness Satisfaction
Simplicity
49
50
Think of an experience that felt complicated
What was it? What made it feel like that?
Expert Mainstreamer
Focus on details Focus on goals
Perfection Completion
Precise control Ease of control
Principles Examples, stories
Take it apart, explore Afraid of breaking it
Detailed mental model Loose mental model
Invest time in learning What does RFTM mean?
51
Not everyone wants simplicity
52
53
54
55
56
Phase 1 nameDescription of phase this phase in the users journey
Phase 2 nameDescription of phase this phase in the users journey
Phase 3 nameDescription of phase this phase in the users journey
Phase 4 nameDescription of phase this phase in the users journey
Phase 5 nameDescription of phase this phase in the users journey
An item needs replaceing
How can we support our customers?
Cust
omer
act
ions
Ask what I need
Ask what to look for in a product
Ask where to look
View forums
Ask what they have used before
Ask about previous experience
Ask how much it should cost
Show to partner
Discover I'm pregnant
Needs have changed
Receives a lot of disposable income
An item needs replaceing
Learns about and event-Birth-Birthday
Realise this is realy complicated
Realise this is realy complicated
Ask friends and family for advice
Ask friends and family for advice
Look for advice online
Look for advice online
Asks what they would like
Asks what they would like
Uses knowledge gained from previous purchases
Ask friends and family for opinions
Ask friends and family for opinions
Look at cataloguesLook at catalogues
Searches for specific product that they have bought before
Doesn't find itDoesn't find it
Search for d specifics that match needs
Is it the right size
Is it the right colour
What's the quality like
Search for preferred brands
Research online Research online
Looks for offers and deals
Look for best sellers
Searches for specific item or brand
Is it the right size
Is it the right colour
What's the quality like
Compare specificsCompare specifics
Compare costCompare cost
Compare user ratings
Compare user ratings
Compare price with other products
Compare product specifics against my needs
Read impartial reviews on chosen product
Show choice to third party
Show choice to third party
Ask parent if gift is suitable for child
Ask if its suitable Purchase process
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
Cust
omer
em
otio
ns
Customer Experience Map What customers do when purchasing
For a specific item
For a specific brand
Trying stuff they have got
Ask friends and family for advice
Notice what people in the street have got
Look for advice online
Realises specific needs for product
Learn brands
Should I buy new?
Look at specific detail of product
Try the product
Ask for advice
Research in storeResearch in store
See what the supermarket sells
See what the supermarket sells
See what the supermarket sells
Consider second hand
Check competitor prices on phone
View forums and social networks
Compare costTalk to other people who already own products
Show to Gifter
Is it safe
I don't want to spend too much
Compare user ratings
Decide which one I Prefer
What the user is thinking
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
What the user is thinking
Gap analysis
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
Thinking like an expert
57
58
59
60
Performance
Stress
Difficult task
Simple task
Yerkes-Dodson Law
61
62
63
Feels simple
to my (mainstream) users
64
65
Your turn
Simplify this!
66
On/OffQuick OSD (On-Screen Display menu)FL Select (change the display on DVD player)Open/Close (Eject DVD)Advanced Disc Review (Review playlist)AV Enhancer (Adjust audio and video)Repeat (Repeat play)Multi Re-Master (Improve audio quality)Numeric KeypadDepth Enhancer (Reduce picture ‘noise’)Manual Skip (Skip 30 seconds forward)Quick Replay (Skip back a few seconds)CancelSkip ForwardSkip BackSlow ForwardSlow BackStopPausePlayDirect Navigator/Top Menu (Main menu)Play List/Menu (Show a disk menu or play list)Functions (Change on screen menu)Return (Return to previous menu)Up ArrowDown ArrowLeft ArrowRight ArrowEnterSubtitleAudio (Change soundtracks)Angle/Page (Change angle/advance still pictures)Setup (Quick setup menu)Play Mode (All/group/random play)Play Speed (Changes play speed)ZoomGroup (Selects groups of items to play)
67
68
#1Remove
69
70
Perfection is achievednot when there is nothing more to addbut when there isnothing more to take away
71
Antoine de Saint Exupery
Reduce,
thoughtfully
72
John Maeda
73
74
Expert Mainstreamer
Focus on details focus on goals
Precise control Ease of control
Perfection Good enough
Principles Examples, stories
Deferred gratification i want it now!
invest time in learning What does RFTM mean?
75
76
77
Rules for ‘Remove’
Features that add steps for unneeded fine control
Multiple ways of doing the same thing
Features that are responsible for a lot of errors
Unnecessary options and preferences
Visual clutter
‘Nice to haves’ that no one will miss
78
A B
247
79
60%40%
30% 3%
A B
80
BUY!
#2Organise
81
82
Ready?
83
197
2 6 4 835
84
?
85
Ready?
86
1 2 3 4 5 6 7 8 9
87
?
88
89
90
91
92
93
94
95
96
Projects Photos Garden Tax Travel School
Credit Music Video Boat Bike Car
97
Finance Office Home Projects Photos Garden
98
Rules for ‘Organise’
Follow patterns that the user knows
Clearly frame your terms of reference
Simple, consistent groupings
Highlight the single most important thing
Don’t force the user to learn codes
#3Hide
99
100
101
102
103
104
105
106
107
108
109
Rules for ‘Hide’
Organise around patterns of use, not frequency
Look for behaviours that signal patterns of use
Let users go from general to specific
Ensure mainstreamer tasks are clearly visible
Ensure next steps are clearly visible
Never penalise errors or experiments - undo!
#4Displace
110
111
LONDON
OXFORD
STRATFORD-UPON-AVON
BATH
My Travel Plan
112
LONDON
OXFORD
STRATFORD-UPON-AVON
BATH
The Roman BathsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Mon-Fri 0900-1830 (includes Bank Holidays)Sat-Sun 0900-1730Christmas: Closed
£10 Adults, £5 Children / Student / Over 65
Allow 1 hour minimum Add this
My Travel Plan
113
LONDON
OXFORD
STRATFORD-UPON-AVON
BATH
LOCATION ACTIVITY TIME
Bath Excelsior Hotel N/A
Bath The Roman Baths 0930-1030
Bath Train to Oxford 1042-1153
Oxford The King’s Head 1230-1400
Oxford Punting 1415-1515
Oxford Ashmolean Museum 1530-1700
Oxford Train to London 1722-1835
My Travel Plan
The Roman BathsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Mon-Fri 0900-1830 (includes Bank Holidays)Sat-Sun 0900-1730Christmas: Closed
£10 Adults, £5 Children / Student / Over 65
Allow 1 hour minimum Add this
114
LONDON
OXFORD
STRATFORD-UPON-AVON
BATH
LOCATION ACTIVITY TIME
Bath Excelsior Hotel N/A
Bath The Roman Baths 0930-1030
Bath Train to Oxford 1042-1153
Oxford The King’s Head 1230-1400
Oxford Punting 1415-1515
Oxford Ashmolean Museum 1530-1700
Oxford Train to London 1722-1835
My Travel Plan
115
No plan survives contact with the enemy
Helmuth von Moltke
116
Tuesday
Wednesday
Thursday
117
Tuesday
Kid’s things
Travel discounts
118
119
120
So, in order:
1. Displace2. Remove3. Organise4. Hide
How can you apply that?
121
BONUS!
The trouble with simplicity is...
it’s boring.
(Right?)
122
123
Simplicity does not mean the absence of any decoration.
It means that the decor should belong intimately to the design proper, and that anything foreign to it should be taken away.
Paul Jacques Grillo
124
Modern Traditional Elegant
125
Logos Pathos Ethos
126
Name of product / service
Practical: it makes Simpler
Emotional: it makes me feel
Values: What it says about me
Experience Cheat Sheet
127
Name of product / service
Practical: it makes Simpler
Emotional: it makes me feel
Values: What it says about me
Experience CHeat Sheet
Photojojo
Buying Photo supplies
Playful
i’m Creative
128
129
130
Name of product / service
Practical: it makes Simpler
Emotional: it makes me feel
Values: What it says about me
Experience Cheat Sheet
131
Name of product / service
Practical: it makes Simpler
Emotional: it makes me feel
Values: it Shows i believe in
Brand Cheat Sheet
Phase 1 nameDescription of phase this phase in the users journey
Phase 2 nameDescription of phase this phase in the users journey
Phase 3 nameDescription of phase this phase in the users journey
Phase 4 nameDescription of phase this phase in the users journey
Phase 5 nameDescription of phase this phase in the users journey
An item needs replaceing
How can we support our customers?
Cust
omer
act
ions
Ask what I need
Ask what to look for in a product
Ask where to look
View forums
Ask what they have used before
Ask about previous experience
Ask how much it should cost
Show to partner
Discover I'm pregnant
Needs have changed
Receives a lot of disposable income
An item needs replaceing
Learns about and event-Birth-Birthday
Realise this is realy complicated
Realise this is realy complicated
Ask friends and family for advice
Ask friends and family for advice
Look for advice online
Look for advice online
Asks what they would like
Asks what they would like
Uses knowledge gained from previous purchases
Ask friends and family for opinions
Ask friends and family for opinions
Look at cataloguesLook at catalogues
Searches for specific product that they have bought before
Doesn't find itDoesn't find it
Search for d specifics that match needs
Is it the right size
Is it the right colour
What's the quality like
Search for preferred brands
Research online Research online
Looks for offers and deals
Look for best sellers
Searches for specific item or brand
Is it the right size
Is it the right colour
What's the quality like
Compare specificsCompare specifics
Compare costCompare cost
Compare user ratings
Compare user ratings
Compare price with other products
Compare product specifics against my needs
Read impartial reviews on chosen product
Show choice to third party
Show choice to third party
Ask parent if gift is suitable for child
Ask if its suitable Purchase process
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
What the user is thinking
Cust
omer
em
otio
ns
Customer Experience Map What customers do when purchasing
For a specific item
For a specific brand
Trying stuff they have got
Ask friends and family for advice
Notice what people in the street have got
Look for advice online
Realises specific needs for product
Learn brands
Should I buy new?
Look at specific detail of product
Try the product
Ask for advice
Research in storeResearch in store
See what the supermarket sells
See what the supermarket sells
See what the supermarket sells
Consider second hand
Check competitor prices on phone
View forums and social networks
Compare costTalk to other people who already own products
Show to Gifter
Is it safe
I don't want to spend too much
Compare user ratings
Decide which one I Prefer
What the user is thinking
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them
What the user is thinking
Gap analysis
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
How to support customers in this phase
132
Step by step
1. Displace2. Remove3. Organise4. Hide5. Add character
No matter how cool your userinterface…
...it would be betterif there were less of it
133
Alan Cooper
134
@gilescolborne
top related