Simplicity: UXLx version

Post on 27-Jan-2015

107 views 0 download

Tags:

description

Advanced Simplicity Workshop from UX Lisbon 2013

Transcript of Simplicity: UXLx version

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

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

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

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

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)

Efficiency Effectiveness Satisfaction

Simplicity

35

36

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?

37

Not everyone wants simplicity

38

39

40

41

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

Thinking like an expert

43

44

45

46

Performance

Stress

Difficult task

Simple task

Yerkes-Dodson Law

47

48

49

Feels simple

to my (mainstream) users

50

51

Your turn

Simplify this!

52

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

54

55

#1Remove

56

57

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

58

Antoine de Saint Exupery

Reduce,

thoughtfully

59

John Maeda

60

61

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

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

64

A B

247

#2Organise

65

66

Ready?

67

197

2 6 4 835

68

?

69

Ready?

70

1 2 3 4 5 6 7 8 9

71

?

72

73

Disney

74

75

76

77

78

79

80

Projects Photos Garden Tax Travel School

Credit Music Video Boat Bike Car

81

Finance Office Home Projects Photos Garden

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

#3Hide

83

84

85

86

87

88

89

90

91

92

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!

#4Displace

94

95

LONDON

OXFORD

STRATFORD-UPON-AVON

BATH

My Travel Plan

96

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

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

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

No plan survives contact with the enemy

Helmuth von Moltke

100

Tuesday

Wednesday

Thursday

101

Tuesday

Kid’s things

Travel discounts

102

103

104

So, in order:

1. Displace2. Remove3. Organise4. Hide

How can you apply that?

105

BONUS!

The trouble with simplicity is...

it’s boring.

(Right?)

106

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

108

Modern Traditional Elegant

109

Logos Pathos Ethos

110

Name of product / service

Practical: it makes Simpler

Emotional: it makes me feel

Values: What it says about me

Experience Cheat Sheet

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

112

113

114

Name of product / service

Practical: it makes Simpler

Emotional: it makes me feel

Values: What it says about me

Experience Cheat Sheet

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

116

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

117

Alan Cooper

118

@gilescolborne