Simplicity: UXLx version

118
cxpartners 1 @gilescolborne Simplicity

description

Advanced Simplicity Workshop from UX Lisbon 2013

Transcript of Simplicity: UXLx version

Page 1: Simplicity: UXLx version

cxpartners 1

@gilescolborne

Simplicity

Page 2: Simplicity: UXLx version

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.

Page 3: Simplicity: UXLx version

Advanced simplicity@gilescolborne

3

Page 4: Simplicity: UXLx version

4

Page 5: Simplicity: UXLx version

5

Page 6: Simplicity: UXLx version

6

Page 7: Simplicity: UXLx version

7

Page 8: Simplicity: UXLx version

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

Page 9: Simplicity: UXLx version

9

Page 10: Simplicity: UXLx version

10

Page 11: Simplicity: UXLx version

11

Page 13: Simplicity: UXLx version

Donald Norman

13

Simplicity isnot the answer

Page 14: Simplicity: UXLx version

Leonardo Da Vinci

14

Simplicity isthe ultimatesophistication

Page 15: Simplicity: UXLx version

Simplicity is an experience

15

Page 16: Simplicity: UXLx version

16

How it’s engineered

Page 17: Simplicity: UXLx version

17

Page 18: Simplicity: UXLx version

18

Page 19: Simplicity: UXLx version

How it feels to use

19

How it’s engineered

How it looks

Page 20: Simplicity: UXLx version

20

Page 21: Simplicity: UXLx version

What is minimal?GO

21

Page 22: Simplicity: UXLx version

May 2013 GO

Usable

22

Page 23: Simplicity: UXLx version

Nov 2013 GO

23

Page 24: Simplicity: UXLx version

May 2012 GO

24

Page 25: Simplicity: UXLx version

May 2013

Apr 2013 Mar 2013 Feb 2013 Jan 2013 Dec 2012

25

Simple

Page 26: Simplicity: UXLx version

Simplicity = Extreme usability

26

Page 27: Simplicity: UXLx version

Efficiency Effectiveness Satisfaction

Usability

ISO 9241-11

27

Page 28: Simplicity: UXLx version

Efficiency Effectiveness Satisfaction

Business system

28

Page 29: Simplicity: UXLx version

Efficiency Effectiveness Satisfaction

Call centre

29

Page 30: Simplicity: UXLx version

Efficiency Effectiveness Satisfaction

Web site

30

Page 31: Simplicity: UXLx version

Efficiency Effectiveness Satisfaction

Simplicity

31

Page 32: Simplicity: UXLx version

32

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

Page 33: Simplicity: UXLx version

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

Page 34: Simplicity: UXLx version

34

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)

Page 35: Simplicity: UXLx version

Efficiency Effectiveness Satisfaction

Simplicity

35

Page 36: Simplicity: UXLx version

36

Think of an experience that felt complicated

What was it? What made it feel like that?

Page 37: Simplicity: UXLx version

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?

37

Page 38: Simplicity: UXLx version

Not everyone wants simplicity

38

Page 39: Simplicity: UXLx version

39

Page 40: Simplicity: UXLx version

40

Page 41: Simplicity: UXLx version

41

Page 42: Simplicity: UXLx version

42

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

Page 43: Simplicity: UXLx version

Thinking like an expert

43

Page 44: Simplicity: UXLx version

44

Page 45: Simplicity: UXLx version

45

Page 46: Simplicity: UXLx version

46

Page 47: Simplicity: UXLx version

Performance

Stress

Difficult task

Simple task

Yerkes-Dodson Law

47

Page 48: Simplicity: UXLx version

48

Page 49: Simplicity: UXLx version

49

Page 50: Simplicity: UXLx version

Feels simple

to my (mainstream) users

50

Page 51: Simplicity: UXLx version

51

Your turn

Page 52: Simplicity: UXLx version

Simplify this!

52

Page 53: Simplicity: UXLx version

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)

53

Page 54: Simplicity: UXLx version

54

Page 55: Simplicity: UXLx version

55

Page 56: Simplicity: UXLx version

#1Remove

56

Page 57: Simplicity: UXLx version

57

Page 58: Simplicity: UXLx version

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

58

Antoine de Saint Exupery

Page 59: Simplicity: UXLx version

Reduce,

thoughtfully

59

John Maeda

Page 60: Simplicity: UXLx version

60

Page 61: Simplicity: UXLx version

61

Page 62: Simplicity: UXLx version

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?

62

Page 63: Simplicity: UXLx version

63

Rules for ‘Remove’

Prioritise based on user goals, not frequency of use

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

Page 64: Simplicity: UXLx version

64

A B

247

Page 65: Simplicity: UXLx version

#2Organise

65

Page 66: Simplicity: UXLx version

66

Page 67: Simplicity: UXLx version

Ready?

67

Page 68: Simplicity: UXLx version

197

2 6 4 835

68

Page 69: Simplicity: UXLx version

?

69

Page 70: Simplicity: UXLx version

Ready?

70

Page 71: Simplicity: UXLx version

1 2 3 4 5 6 7 8 9

71

Page 72: Simplicity: UXLx version

?

72

Page 73: Simplicity: UXLx version

73

Disney

Page 74: Simplicity: UXLx version

74

Page 75: Simplicity: UXLx version

75

Page 76: Simplicity: UXLx version

76

Page 77: Simplicity: UXLx version

77

Page 78: Simplicity: UXLx version

78

Page 79: Simplicity: UXLx version

79

Page 80: Simplicity: UXLx version

80

Projects Photos Garden Tax Travel School

Credit Music Video Boat Bike Car

Page 81: Simplicity: UXLx version

81

Finance Office Home Projects Photos Garden

Page 82: Simplicity: UXLx version

82

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

Page 83: Simplicity: UXLx version

#3Hide

83

Page 84: Simplicity: UXLx version

84

Page 85: Simplicity: UXLx version

85

Page 86: Simplicity: UXLx version

86

Page 87: Simplicity: UXLx version

87

Page 88: Simplicity: UXLx version

88

Page 89: Simplicity: UXLx version

89

Page 90: Simplicity: UXLx version

90

Page 91: Simplicity: UXLx version

91

Page 92: Simplicity: UXLx version

92

Page 93: Simplicity: UXLx version

93

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!

Page 94: Simplicity: UXLx version

#4Displace

94

Page 95: Simplicity: UXLx version

95

Page 96: Simplicity: UXLx version

LONDON

OXFORD

STRATFORD-UPON-AVON

BATH

My Travel Plan

96

Page 97: Simplicity: UXLx version

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

97

Page 98: Simplicity: UXLx version

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

98

Page 99: Simplicity: UXLx version

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

99

Page 100: Simplicity: UXLx version

No plan survives contact with the enemy

Helmuth von Moltke

100

Page 101: Simplicity: UXLx version

Tuesday

Wednesday

Thursday

101

Page 102: Simplicity: UXLx version

Tuesday

Kid’s things

Travel discounts

102

Page 103: Simplicity: UXLx version

103

Page 104: Simplicity: UXLx version

104

So, in order:

1. Displace2. Remove3. Organise4. Hide

How can you apply that?

Page 105: Simplicity: UXLx version

105

BONUS!

Page 106: Simplicity: UXLx version

The trouble with simplicity is...

it’s boring.

(Right?)

106

Page 107: Simplicity: UXLx version

107

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

Page 108: Simplicity: UXLx version

108

Modern Traditional Elegant

Page 109: Simplicity: UXLx version

109

Logos Pathos Ethos

Page 110: Simplicity: UXLx version

110

Name of product / service

Practical: it makes Simpler

Emotional: it makes me feel

Values: What it says about me

Experience Cheat Sheet

Page 111: Simplicity: UXLx version

111

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

Page 112: Simplicity: UXLx version

112

Page 113: Simplicity: UXLx version

113

Page 114: Simplicity: UXLx version

114

Name of product / service

Practical: it makes Simpler

Emotional: it makes me feel

Values: What it says about me

Experience Cheat Sheet

Page 115: Simplicity: UXLx version

115

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

Page 116: Simplicity: UXLx version

116

Step by step

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

Page 117: Simplicity: UXLx version

No matter how cool your userinterface…

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

117

Alan Cooper

Page 118: Simplicity: UXLx version

118

@gilescolborne