uxsg#8 workshop

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

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

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

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




Donald Norman

13

Simplicity isnot the answer

Leonardo Da Vinci

14

Simplicity isthe ultimatesophistication

Simplicity is an experience

15

16

How it’s engineered

How it feels to use

19

How it’s engineered

How it looks

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


Business system

28


Call centre

29


Web site

30


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



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



HPKPKHKMK

HPKHKMK

MMMM

M

MM

M

37

A B

GOMS KLM

4. Delete Ms that appear between Ks



HPKPKHKMK

HPKHKMK

MMMM

M

MM

M

38

A B

GOMS KLM

4. Delete Ms that appear between Ks



HPKPKHKK

HPKHKK

MMMM

M

MM

M

39

A B

GOMS KLM

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



HPKPKHKK

HPKHKK

M

M

M

M

M

40

A B

GOMS KLM



HPKPKHKK

HPKHKK

M

M

M

M

M


41

A B

GOMS KLM



0.42.450.22.450.20.41.75

0.42.450.20.40.2


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


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



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)


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|


48

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)


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

56

Phase 1 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


Learns about and event-Birth-Birthday

Realise this is realy complicated


Ask friends and family for advice


Look for advice online


Asks what they would like


Uses knowledge gained from previous purchases

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




Compare specificsCompare specifics

Compare costCompare cost

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


Ask parent if gift is suitable for child

Ask if its suitable Purchase process

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


Notice what people in the street have got


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



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


Decide which one I Prefer


User typeDescription of of typical user behaviour and their information needs. Include what difficulties they normally have and anything that could potentially influence them





Gap analysis

How to support customers in this phase




















Thinking like an expert

57

Performance

Stress

Difficult task

Simple task

Yerkes-Dodson Law

61

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

#1Remove

69

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

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

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

Ready?

83

197

2 6 4 835

84

Ready?

86

1 2 3 4 5 6 7 8 9

87

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

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

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

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





Experience CHeat Sheet

Photojojo

Buying Photo supplies

Playful

i’m Creative

130





Experience Cheat Sheet

131




Values: it Shows i believe in

Brand Cheat Sheet







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


Learns about and event-Birth-Birthday









Uses knowledge gained from previous purchases



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




Search for preferred brands

Research online Research online

Looks for offers and deals

Look for best sellers

Searches for specific item or brand




Compare specificsCompare specifics

Compare costCompare cost



Compare price with other products

Compare product specifics against my needs

Read impartial reviews on chosen product



Ask parent if gift is suitable for child

Ask if its suitable Purchase process









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


Notice what people in the street have got


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




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


Decide which one I Prefer







Gap analysis





















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

uxsg#8 workshop

Design

h kk h p

h kmk h p

mouse point

queen sq bristol bs1

text field

b goms klm

radio button

queen square br address