Simplicity

cxpartners 1

@gilescolborne

Simplicity

Friday, 17 January 14

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

They’re

not rules

so much as…

guidelines,

Your examplesof Simple design.

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

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

Donald Norman

Simplicity isnot the answer

Leonardo Da Vinci

Simplicity isthe ultimatesophistication

Simplicity is an experience

How it’s engineered

How it feels to use

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?

Experienced Novice

Not everyone wants simplicity

Whatusers do

Content& features

Thinking like an expert

Performance

Stress

Difficult task

Simple task

Yerkes-Dodson Law

Feels simple

to my (mainstream) users

The trouble with simplicity is...

it’s boring.

(Right?)

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

Modern Traditional Elegant

What is minimal?GO

August 2013 GO

Usable

Nov 2013 GO

August 2012 GO

Aug 2013

Jul 2013 Jun 2013 May 2013 Apr 2013 Mar 2013

Simple

Simplicity = Extreme usability

Efficiency Effectiveness Satisfaction

Usability

ISO 9241-11

Usability

ISO 9241-11

How do you

measure This?

Business system

Call centre

Web site

Travel website

Houston airport

6 x further

Matrix bullet time

Create a blog. It’s free.

Beautiful, customisable templates and layouts.

Up to the minute stats Make money with Adsense Explore Blogs of Note

0.1 second

1.0 second

10 seconds

Travel website

Simplicity

Which is more efficient?

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

GOMS KLM

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

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

1. Walk through the interface step by step.

GOMS KLM

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

MHPKPKHKK

MHPKHKK

GOMS KLM

3. Place Ms in front of all Ks and Ps

MHPKPKHKMK

MHPKHKMK

GOMS KLM

4. Delete Ms that appear between Ks

MHPKPKHKMK

MHPKHKMK

GOMS KLM

4. Delete Ms that appear between Ks

MHPKPKHKK

MHPKHKK

GOMS KLM

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

MHPKPKHKK

MHPKHKK

GOMS KLM

MHPKPKHKK

MHPKHKK

GOMS KLM

1.350.42.450.22.450.20.41.75

1.350.42.450.20.40.2

10.20 4.00

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

22 Queen Sq

Bristol

BS1 4ND

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

Enter your Post CodeADDRESS

BS1 4ND

Choose an address

22 Queen Square Br|

22 Queen Sq, Bristol, BS1 4ND

ADDRESS

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

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

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 (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

Choose an address

22 Queen Square Br|

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)

Keying PointingHomingMentallypreparing

GOMS KLM

default numbers & punctuation

number pad (for pins)url

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

Your turn

Simplify this!

#1Remove

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

Antoine de Saint Exupery

Reduce,

thoughtfully

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?

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

Ready?

2 6 4 835

Ready?

1 2 3 4 5 6 7 8 9

Projects Photos Garden Tax Travel School

Credit Music Video Boat Bike Car

Finance Office Home Projects Photos Garden

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

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

LONDON

OXFORD

STRATFORD-UPON-AVON

My Travel Plan

LONDON

OXFORD

STRATFORD-UPON-AVON

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

LONDON

OXFORD

STRATFORD-UPON-AVON

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

LONDON

OXFORD

STRATFORD-UPON-AVON

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

No plan survives contact with the enemy

Helmuth von Moltke

Tuesday

Wednesday

Thursday

Tuesday

Kid’s things

Travel discounts

So, in order:

1. Displace2. Remove3. Organise4. Hide

Your turn!

BONUS!

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

cxpartners 142

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

Hi. Are you awake?

I am now...

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

Here is exactly what you need

right now.

cxpartners 147

out of context@gilescolborne

After Black & Yacoob, 1995

A real person told me this

166cxpartners

What’s this playing?

cxpartners 172

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

Time flieslike an arrow.

Fruit flieslike a banana.

What was that?

A bit of you know what.

What’s this playing? This?

On the iPod.

It’s Del the FunkyHomosapian.

On the iPod.

It’s Del the FunkyHomosapian.

Time Pressure / Error / Shared Knowledge

A real user told me this

Call: Susan Hunter mobile

Her phone says:Do not disturb ends 14:00

Cancel Proceed

Her phone says:Do not disturb ends 14:00

Cancel Proceed

In that case...

Are you busy? No.

TimeLocationEnvironmentSocialDeviceActivityIndividual

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

TimeLocationEnvironmentSocialDeviceActivityIndividual

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

11:37New YorkSubwayAloneBlackberryEmailSarah

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

Paul Dourish

Context can be expressed as data

Context is stable

Context can be delineated

Activities happen within a context

Context is a relational property

Context changes dynamically

Context is particular

Context arises from activity

CONTEXT

RELEVANCE

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

Ever had a problem selling

simplicity to your team?

Ever have success selling simplicity to your

No matter how cool your userinterface…

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

Alan Cooper

See it at Amazon US

See it at Amazon UK

Advanced simplicity workbook@gilescolborne

Keying(average typist)

PointingHomingMentallypreparing

GOMS KLM

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)

Example 1: Post Code lookup

1. Click on the field and enter a Post Code. 2. Click on OK and get a drop down menu. R=1.0s

3. Choose the right address 4. Check the result. R=0.5s

Example 2: Autocomplete

1. Click on the field and start typing. 2. After about 18 characters (typically) only one suggestion remains.

3. Click on the address. 4. Check the result.

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)

Design challengeFeel my painEvery conference call I have starts with people turning up late, losing the connection or having software problems. Help me: fix Skype.

Things to considerThink 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?

Design challengeFeel my painI’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 considerLots 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?

Design challengeFeel my painI’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 considerThis 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.

Simplicity

Design

Transcript of Simplicity

Simplicity Reinvented

Simplicity rules

Simplicity 860

Simplicity profile

INTENTIONAL SIMPLICITY

Simplicity - Draeger

www. simplicitytheory.org 1 Simplicity Theory Interest Emotional intensity Interest Emotional intensity Simplicity theory is a cognitive theory Simplicity.

Simplicity Alip

Simplicity Vibrating Feeder Simplicity Vibrating Feeder PF ......08 09 Simplicity® Vibrating Feeder GF Series Flexible. Reliable. Durable. The Simplicity® range features heavy-duty

Simplicity - Complexity

steps simplicity

Simplicity catalogue

Thoreau's Simplicity

Overengineering Simplicity

Simplicity. rs

Simplicity. Grigas

BRAND SIMPLICITY

Simplicity Surround

Documentation Simplicity

simplicity cycle