Simplicity2013

cxpartners 1

@gilescolborne

Simplicity

2

I would not give a figfor the simplicitythis side of complexity,

Oliver Wendell Holmes Jr.

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

141

See it at Amazon US

See it at Amazon UK

4

They’re

not rules

so much as…

guidelines,

Giles

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

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

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




Donald Norman

15

Simplicity isnot the answer

Leonardo Da Vinci

16

Simplicity isthe ultimatesophistication

Simplicity is an experience

17

18

How it’s engineered

How it feels to use

21

How it’s engineered

How it looks

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?

22

Experienced Novice

Not everyone wants simplicity

23

27

Whatusers do

Tasks

Content& features

Thinking like an expert

28

Performance

Stress

Difficult task

Simple task

Yerkes-Dodson Law

32

Feels simple

to my (mainstream) users

35

What is minimal?GO

37

August 2013 GO

38

August 2013 GO

Usable

38

Nov 2013 GO

39

August 2012 GO

40

Aug 2013

Jul 2013 Jun 2013 May 2013 Apr 2013 Mar 2013

41

Aug 2013

Jul 2013 Jun 2013 May 2013 Apr 2013 Mar 2013

41

Simple

Simplicity = Extreme usability

42

Efficiency Effectiveness Satisfaction

Usability

ISO 9241-11

43


Business system

44


Call centre

45


Web site

46


Simplicity

47

48

A B

Which is more efficient?

49

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 = ?

50

A B

GOMS KLM

1. Walk through the interface step by step.

50

A B

GOMS KLM

Think about what to doPut hand on mousePoint to radio buttonClickPoint to text fieldClickMove hand to keyboardEnter temperature (31)


50

A B

GOMS KLM


Think about what to doPut hand on mousePoint to text fieldClickMove hand to keyboardEnter temperature (31)


51

A B

GOMS KLM



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

51

A B

GOMS KLM




MHPKPKHKK

51

A B

GOMS KLM




MHPKPKHKK

MHPKHKK

52

A B

GOMS KLM

3. Place Ms in front of all Ks and Ps



MHPKPKHKMK

MHPKHKMK

52

A B

GOMS KLM




MHPKPKHKMK

MHPKHKMK

MMMM

M

52

A B

GOMS KLM




MHPKPKHKMK

MHPKHKMK

MMMM

M

MM

M

53

A B

GOMS KLM

4. Delete Ms that appear between Ks



MHPKPKHKMK

MHPKHKMK

MMMM

M

MM

M

54

A B

GOMS KLM

4. Delete Ms that appear between Ks



MHPKPKHKK

MHPKHKK

MMMM

M

MM

M

55

A B

GOMS KLM

4. Delete Ms that appear between Ps and Ks (PMK becomes PK)



MHPKPKHKK

MHPKHKK

M

M

M

M

M

56

A B

GOMS KLM



MHPKPKHKK

MHPKHKK

M

M

M

M

M


57

A B

GOMS KLM



1.350.42.450.22.450.20.41.75

1.350.42.450.20.40.2


10.20 4.00

58

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

OK

59

Enter your Post CodeADDRESS

OK

59


BS1 4ND

OK

59


BS1 4ND

Choose an address

OK

20 Queen Sq Bristol, BS1 4ND

21 Queen Sq Bristol, BS1 4ND22 Queen Sq Bristol, BS1 4ND23 Queen Sq Bristol, BS1 4ND

59


BS1 4ND

Choose an address

22 Queen Sq

Bristol

BS1 4ND

OK

59


BS1 4ND

60

ADDRESS

22 Queen Square Br|

22 Queen Sq, Bristol, BS1 4ND

60

ADDRESS

60

ADDRESS


61

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)


22 Queen Sq

Bristol

BS1 4ND

OK

62


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 (1.0 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 = 17.0 seconds

BS1 4ND

22 Queen Sq

Bristol

BS1 4ND

OK

62


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 (1.0 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 = 17.0 seconds6 points where you figure out what to do (M)

BS1 4ND

63

ADDRESS


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)

64

Keying PointingHomingMentallypreparing



GOMS KLM


64

Keying PointingMentallypreparing



GOMS KLM

M = 1.35 sec K = 0.2 sec P = 1.1 sec R = ?

65

default numbers & punctuation

number pad (for pins)url

67

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

69

Your turn

Simplify this!

70

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)

71

#1Remove

73

Perfection is achievednot when there is nothing more to addbut when there isnothing more to take away

75

Antoine de Saint Exupery

Reduce,

thoughtfully

76

John Maeda

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?

80

82

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

#2Organise

83

Ready?

85

197

2 6 4 835

86

Ready?

88

1 2 3 4 5 6 7 8 9

89

98

Projects Photos Garden Tax Travel School

Credit Music Video Boat Bike Car

99

Finance Office Home Projects Photos Garden

100

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

101

111

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

#4Displace

112

LONDON

OXFORD

STRATFORD-UPON-AVON

BATH

My Travel Plan

114

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

115

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

116

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

117

No plan survives contact with the enemy

Helmuth von Moltke

118

Tuesday

Wednesday

Thursday

119

Tuesday

Kid’s things

Travel discounts

120

121

So, in order:

1. Displace2. Remove3. Organise4. Hide

122

BONUS!

The trouble with simplicity is...

it’s boring.

(Right?)

123

124

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

125

Modern Traditional Elegant

126

Logos Pathos Ethos

127

Name of product / service

Practical: it makes Simpler

Emotional: it makes me feel

Values: What it says about me

Experience Cheat Sheet

128





Experience CHeat Sheet

Photojojo

Buying Photo supplies

Playful

i’m Creative

131





Experience Cheat Sheet

132

Whatusers do

Tasks

Content& features

133

Rules for ‘Satisfaction’

Make something that works!

Remove pain points, errors, waiting

NEVER punish errors or experimentation

Turn key interactions and unavoidable pain points

into ‘signature moments’

Continual, small improvements

134

Step by step

1. Displace2. Remove3. Organise4. Hide5. Add character

135

Ever had a problem selling

simplicity to your team?

136

Ever have success selling simplicity to your

team?

137

BUY!

138

A B

247

No matter how cool your userinterface…

...it would be betterif there were less of it

140

Alan Cooper

Simplicity2013

Technology

Transcript of Simplicity2013