Simplicity

Simplicity
@gilescolborne

cxpartners
Friday, 17 January 14

1

I would not give a fig
for the simplicity
this side of complexity,
but I would give my life for
the simplicity on the other
side of complexity.
Oliver Wendell Holmes Jr.

2


Advanced simplicity
@gilescolborne

3


They’re
not rules
so much as…
guidelines,
Giles

4


Your examples
of Simple design.

5


10

http:/
/www.flickr.com/photos/vanf/5321214369/

15

http:/
/www.flickr.com/photos/iwouldstay/145628030/

Simplicity is
not the answer

Donald Norman

16


Simplicity is
the ultimate
sophistication

Leonardo Da Vinci

17


Simplicity is an experience

18


How it’s engineered

19


How it feels to use
How it looks
How it’s engineered

22


Experienced

Novice

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?

23


Not everyone wants simplicity

24


Tasks

What
users do
Content
& features

28


Thinking like an expert

29


Performance

Simple task

Difficult task

Stress

Yerkes-Dodson Law
33


Feels simple
to my (mainstream) users

35


The trouble with simplicity is...
it’s boring.
(Right?)

36


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

37


Modern

Traditional

Elegant

38


What is minimal?
GO

40


Usable

August

2013

GO

41


Nov

2013

GO

42


August

2012

GO

43


Simple
Aug 2013
Jul 2013
Jun 2013
May 2013
Apr 2013
Mar 2013

44


Simplicity = Extreme usability

45


Usability

Efficiency

Effectiveness

Satisfaction

ISO 9241-11

46


Usability

How do you
measure This?

Efficiency

Effectiveness

Satisfaction

ISO 9241-11

47


Business system

Efficiency

Effectiveness

Satisfaction

48


Call centre

Efficiency

Effectiveness

Satisfaction

49


Web site

Efficiency

Effectiveness

Satisfaction

50


Travel
website

51


6 x further
Houston
airport

54


Matrix
bullet time

55


Create a blog. It’s free.

Beautiful, customisable templates and layouts.

Up to the minute stats

Make money with Adsense

Explore Blogs of Note

58


0.1 second
1.0 second
10 seconds

61


Travel
website

63


Simplicity

Efficiency

Effectiveness

Satisfaction

65


Which is more efficient?

A

B

69


GOMS KLM

Mentally
preparing

Keying
(average typist)

Homing

Pointing

Waiting
for a response

M = 1.35 sec

K = 0.2 sec

H = 0.4 sec

P = 1.1 sec

R=?

Icons: The Noun Project and Camila Bertoco

70

GOMS KLM

A

B
1. Walk through the interface step by step.
Think about what to do
Put hand on mouse
Point to radio button
Click
Point to text field
Click
Move hand to keyboard
Enter temperature (31)

Put hand on mouse
Point to text field
Click

71


GOMS KLM
A

B

2. List the Mental Preparation (M), Keying (K), Pointing (P), Homing(H) and Response times (R).
M
H
P
K
P
K
H
KK

Put hand on mouse
Click
Point to text field
Click

M
H
P
K
H
KK

Put hand on mouse
Point to text field
Click

72


GOMS KLM
A

B

3. Place Ms in front of all Ks and Ps
M
H
MP
MK
MP
MK
H
M KMK

Put hand on mouse
Click
Point to text field
Click

M
H
MP
MK
H
MKMK

Put hand on mouse
Point to text field
Click

73


GOMS KLM
A

B

4. Delete Ms that appear between Ks
M
H
MP
MK
MP
MK
H
M KMK

Put hand on mouse
Click
Point to text field
Click

M
H
MP
MK
H
MKMK

Put hand on mouse
Point to text field
Click

74


GOMS KLM
A

B

4. Delete Ms that appear between Ks
M
H
MP
MK
MP
MK
H
M KK

Put hand on mouse
Click
Point to text field
Click

M
H
MP
MK
H
MKK

Put hand on mouse
Point to text field
Click

75


GOMS KLM
A

B

4. Delete Ms that appear between Ps and Ks (PMK becomes PK)
M
H
MP
K
MP
K
H
M KK

Put hand on mouse
Click
Point to text field
Click

M
H
MP
K
H
MKK

Put hand on mouse
Point to text field
Click

76


GOMS KLM
A

B

M = 1.35 sec
M
H
MP
K
MP
K
H
M KK

K = 0.2 sec

Put hand on mouse
Click
Point to text field
Click

H = 0.4 sec
M
H
MP
K
H
MKK

P = 1.1 sec

R=?

Put hand on mouse
Point to text field
Click

77


GOMS KLM
A

B

M = 1.35 sec
1.35
0.4
2.45
0.2
2.45
0.2
0.4
1.75

K = 0.2 sec

Put hand on mouse
Click
Point to text field
Click

10.20

H = 0.4 sec
1.35
0.4
2.45
0.2
0.4
0.2

P = 1.1 sec

R=?

Put hand on mouse
Point to text field
Click

4.00

78


Which is more efficient?

ADDRESS
Enter your Post Code
BS1 4ND

OK

ADDRESS
Type your address
22 Queen Square Br|
22 Queen Square, Bristol, BS1 4ND

79


ADDRESS
BS1 4ND

OK

22 Queen Sq
Choose an address
20 Queen Sq Bristol, BS1 4ND
Bristol
BS1 4ND

80


ADDRESS
22 Queen Square Br| BS1 4ND
Sq, Bristol,
22 Queen Sq, Bristol, BS1 4ND

81


M = 1.35 sec

K = 0.2 sec

H = 0.4 sec

P = 1.1 sec

R=?

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 characters
in 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)
82


ADDRESS
BS1 4ND

OK

22 Queen Sq
Choose an address
Bristol
BS1 4ND

M Figure out what to do
H Put hand on mouse
P Move the mouse into position
K Click into the text field
H Put hand on keyboard
MKKKKKKK Remember and Enter Post Code
H Put hand on mouse
P Move the mouse into position and click OK
R Wait for the system to refresh (1.0 seconds)
K Click the drop down list
K Click on the correct item
R Wait for the system to refresh (0. 5 seconds)
M Check the address is correct
TOTAL = 17.0 seconds
6 points where you figure out what to do (M)
83


ADDRESS
22 Queen Square Br| BS1 4ND
Sq, Bristol,
22 Queen Sq, Bristol, BS1 4ND

H Put hand on mouse
K Click into the text field
H Put hands on keyboard
MKKKKKKKKKKKKKKKKKK Enter address
H Put hand on mouse
P Move the pointer into position
K Click on the address
M Check the address is correct
TOTAL = 12.8 seconds
4 points where you figure out what to do (M)

84


GOMS KLM

Mentally
preparing

Keying

Homing

Pointing

Waiting
for a response

M = 1.35 sec

K = 0.2 sec

H = 0.4 sec

P = 1.1 sec

R=?


85

default

numbers & punctuation

url

number pad (for pins)

86


Rules for ‘Efficiency’
Minimise thinking, effort (clicks, movement)
No one likes home pages and start screens
Remember users’ preferences and behavior
Eliminate sources of error
Minimise response time and device bulk the
hidden UX differentiators
Don’t make experienced users act like novices
88


Your turn

89


Simplify this!

90


#1

Remove

94


Perfection is achieved
not when there is nothing
more to add
but when there is
nothing more to take away

Antoine de Saint Exupery

96


Reduce,
thoughtfully

John Maeda

97


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?

101


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
Details that distract

103


#2

Organise

104


Ready?

106


3

9

7

2

6 4

8

1

5

107


Ready?

109


123456789

110


Projects

Photos

Garden

Tax

Travel

School

Credit

Music

Video

Boat

Bike

Car

115


Finance

Office

Home

Projects

Photos

Garden

116


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

117


#3
Hide

118


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 visible and
dominant
Trust expert users to find expert features

124


#4

Displace

125


My Travel Plan

STRATFORD-UPON-AVON

OXFORD

LONDON
BATH

127


My Travel Plan

STRATFORD-UPON-AVON

OXFORD

LONDON
BATH

The Roman Baths
Lorem 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-1730
Christmas: Closed
£10 Adults, £5 Children / Student / Over 65

Allow 1 hour minimum

Add this

128


My Travel Plan
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

Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Morbi commodo, ipsum sed pharetra gravida, orci
magna rhoncus neque, id pulvinar odio lorem non
turpis.

Oxford

Punting

1415-1515

Mon-Fri 0900-1830 (includes Bank Holidays)
Sat-Sun 0900-1730
Christmas: Closed

Oxford

Ashmolean
Museum

1530-1700

Oxford

Train to
London

1722-1835

STRATFORD-UPON-AVON

OXFORD

LONDON
BATH

The Roman Baths

£10 Adults, £5 Children / Student / Over 65

Allow 1 hour minimum

Add this

129


My Travel Plan
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

STRATFORD-UPON-AVON

OXFORD

LONDON
BATH

130


No plan
survives
contact with
the enemy
Helmuth von Moltke

131


Tuesday

Wednesday

Thursday
132


Tuesday

Kid’s things

Travel discounts
133


So, in order:
1. Displace
2. Remove
3. Organise
4. Hide

134


Your turn!

135


BONUS!

136


http://reramble.wordpress.com/2012/04/15/20-posters-for-disney-classics/
138


139


140


141


Always design a thing by considering
it in its next larger context –
a chair in a room,
a house in an environment,
an environment in a city plan
Eliel Saarinen
cxpartners

142

Hi. Are you awake?

I am now...

144


I want my phone to
contextually decide when
to notify me.
When I’m asleep (it’s dark,
phone stationary, quiet)
then it won’t buzz.
But if it’s important then it
should still alert me.

A real person told me this

145


Here is exactly
what you need
right now.
OK

146


out of context
@gilescolborne

cxpartners

147

6

1

3

4

3

2

2

1

148


After Black & Yacoob, 1995

155


I want my phone to
to notify me.

A real person told me this

161


cxpartners

166

What’s this playing?

167



170


http://www.youtube.com/watch?v=d0Z1QGpTZSo

cxpartners

172

Time flies
like an arrow.
Fruit flies
like a banana.

173


What was that?
A bit of you know what.

174



175



This?

176



This?

On the iPod.

This

177



This?

On the iPod.

It’s Del the Funky
Homosapian.

This

178


Time Pressure / Error / Shared Knowledge

This?

On the iPod.

It’s Del the Funky
Homosapian.

This

181



This?

182


I want my phone to
to notify me.

A real user told me this

186


Call: Susan Hunter
mobile

187


Call: Susan Hunter
mobile

Her phone says:
Do not disturb ends 14:00
Cancel

Proceed

188


Call: Susan Hunter
mobile

Her phone says:
Do not disturb ends 14:00
Cancel

Proceed

189


Are you busy?

No.

In that case...

190


Time
Location
Environment
Social
Device
Activity
Individual

http://thenounproject.com/noun/iphone/#icon-No414

http://thenounproject.com/noun/computer/#icon-No115

192

Time
Location
Environment
Social
Device
Activity
Individual

http://www.flickr.com/photos/yourdon/4064143718/ 193

11:37
New York
Subway
Alone
Blackberry
Email
Sarah

http://www.flickr.com/photos/yourdon/4064143718/ 194

Paul Dourish
195


Context can be expressed as data
Context is stable
Context can be delineated
Activities happen within a context

196


Context is a relational property
Context changes dynamically
Context is particular
Context arises from activity

197


CONTEXT

198


CONTEXT
RELEVANCE
199


Wait, what was all that?
If you must measure context – use multiple sources
Repair and negotiate – never assume you’re right
Use least collaborative effort – time, error, shared knowledge
Keep track of what this is – remember across interactions
Allow users to negotiate context between themselves, too
Use pre-sequences to set up interactions
Extra information should enrich context – don’t distract
What really matters is relevance – focus on that
200


Ever had a
problem selling
simplicity to your
team?

201


Ever have
success selling
simplicity to your
team?

202


BUY!

203


A

7

B

24

204


No matter how cool your user
interface…
...it would be better
if there were less of it
Alan Cooper

206


See it at Amazon US
See it at Amazon UK
207


Advanced simplicity workbook
@gilescolborne

208


GOMS KLM

Mentally
preparing

Keying
(average typist)

Homing

Pointing

Waiting
for a response

M = 1.35 sec

K = 0.2 sec

H = 0.4 sec

P = 1.1 sec

R=?


209

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 characters
in 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)
210


Example 1: Post Code lookup

1. Click on the field and enter a Post Code.

3. Choose the right address

2. Click on OK and get a drop down menu. R=1.0s

4. Check the result. R=0.5s

211

Example 2: Autocomplete

1. Click on the field and start typing.

3. Click on the address.

2. After about 18 characters (typically) only one
suggestion remains.

4. Check the result.

212

On/Off
Quick 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 Keypad
Depth Enhancer (Reduce picture ‘noise’)
Manual Skip (Skip 30 seconds forward)
Quick Replay (Skip back a few seconds)
Cancel
Skip Forward
Skip Back
Slow Forward
Slow Back
Stop
Pause
Play
Direct 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 Arrow
Down Arrow
Left Arrow
Right Arrow
Enter
Subtitle
Audio (Change soundtracks)
Angle/Page (Change angle/advance still pictures)
Setup (Quick setup menu)
Play Mode (All/group/random play)
Play Speed (Changes play speed)
Zoom
Group (Selects groups of items to play)

213


Design challenge
Feel my pain
Every conference call I have starts
with people turning up late, losing
the connection or having software
problems. Help me: fix Skype.
Things to consider
Think about what makes a meeting
work offline. How would those things
happen online?
What are the key phases in a
meeting - from planning to
conclusion?
How do you make meetings visual?
Letting people share documents or
see ideas?
How do you keep all that simple?
What causes the complexity?

214


Design challenge
Feel my pain
I’ve got a Microwave oven that will
also grill or bake. But I’ve no idea
how to use it. Normally I just click
the ‘on’ switch repeatedly to add 30
seconds to the total. And that switch
has worn out!
Things to consider
Lots of food packets have microwave
instructions - could you make this
oven work with them?
How do I know whether I’m
microwaving, grilling or cooking?
What’s the real objective here? What
do I really want from this product?

215


Design challenge
Feel my pain
I’m tired of going to the basement to
manually turn the heating on and off.
Make me a central heating controller
I can understand.
Things to consider
This is a thermostat for a British
house – so there’s no air
conditioning.
The hot water tank and central
heating can be programmed
independently.
It can be cold during the summer
and warm in the winter.
What use can you make of the
patterns that are already in my head?
Buttons, displays, wireless
connections, software… all cost
money. This is a cheap device.
216


Simplicity

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (13)

Plus de cxpartners

Plus de cxpartners (20)

Dernier

Dernier (20)

Simplicity