anatomy of a design decision - r2.key

53
Anatomy of a Design Decision User Interface Engineering Jared M. Spool (@jmspool) Anatomy of a Design Decision User Interface Engineering - www.uie.com © Copyright 2010, User Interface Engineering. All Rights Reserved. 1

Upload: ngophuc

Post on 01-Jan-2017

221 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision

User Interface Engineering

Jared M. Spool (@jmspool)

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 1

Page 2: Anatomy of a Design Decision - R2.key

Henry Gray

Gray’s AnatomyFirst Edition: 1858

anatomy |əˈnatəmē| (abbr.: anat.)

noun ( pl. -mies)

the branch of science concerned with the bodily structure of humans, animals, and

other living organisms, esp. as revealed by dissection and the separation of parts.

• the bodily structure of an organism : descriptions of the cat's anatomy and behavior.

• informal, humorous a person's body : he left dusty handprints on his lady customers'

anatomies.

• figurative a study of the structure or internal workings of something :

Machiavelli's anatomy of the art of war.

ORIGIN late Middle English : from Old French anatomie or late Latin anatomia, from Greek, from ana- ‘up’ + tomia ‘cutting’ (from temnein ‘to cut’ ).

What are the internal workings

of how we make design decisions?

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 2

Page 3: Anatomy of a Design Decision - R2.key

NYTimes.com

HavenWorks.com

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 3

Page 4: Anatomy of a Design Decision - R2.key

Etsy.com

Arngren.net

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 4

Page 5: Anatomy of a Design Decision - R2.key

NYTimes.com, HavenWorks.com, Etsy.com, Arngren.net

Celebrity

Death-Match:

37 Signals

VS

Don Norman

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 5

Page 6: Anatomy of a Design Decision - R2.key

37 Signals vs. Norman

37 Signals:

“We’re not designing for others...we’re designing for ourselves”

Don Norman:

“I’ve tried their products and although they have admirable qualities, they have never quite met my needs: Close is not good enough. After reading the article, I understand why: the developers are arrogant and completely unsympathetic to the people who use their products.”

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 6

Page 7: Anatomy of a Design Decision - R2.key

37Signals’ Highrise

Decision Style:

Self Design

When we design something for our own use

Works great when:

Our users are just like us

We regularly use it just like our users do

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 7

Page 8: Anatomy of a Design Decision - R2.key

SolutionIP

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 8

Page 9: Anatomy of a Design Decision - R2.key

American Airlines

Decision Style:

Unintentional Design

When the design just happens on its own

Works great when:

Our users will put up with whatever we give them

We don’t care about support costs or pain from frustration

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 9

Page 10: Anatomy of a Design Decision - R2.key

LingsCars.com

UnintentionalDesign

SelfDesign

GeniusDesign

Design Decision Styles

Initial focus

on complexity

&

ease of use

Designing for

users beyond

ourselves

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 10

Page 11: Anatomy of a Design Decision - R2.key

BrynMawrSchool.org

Chapin.edu

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 11

Page 12: Anatomy of a Design Decision - R2.key

Imperial.ac.uk

New City Media

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 12

Page 13: Anatomy of a Design Decision - R2.key

Decision Style:

Genius Design

When we’ve previously learned what users need

Works great when:

We already know their knowledge, previous experiences, and contexts

We solving the same design problems repeatedly

UnintentionalDesign

SelfDesign

GeniusDesign

Activity-Focused Design

Design Decision Styles

Initial focus

on complexity

&

ease of use

Designing for

users beyond

ourselves

Designing

something we’ve

never designed b

efore

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 13

Page 14: Anatomy of a Design Decision - R2.key

Lab Test Request System Users & Activities

Users: Doctors, nurses, lab technicians, managers

Activities:

Request a lab test

Get notified of new test

Find sample

Send back results

Get notified of results

Integrate results into patient’s chart

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 14

Page 15: Anatomy of a Design Decision - R2.key

Decision Style:

Activity-Focused Design

When we’re designing for new activities unfamiliar to us

Works great when:

We can easily identify the users and their activities

We need to go beyond our own previous experiences

Innovations can come from removing complexity

Six Flags: Mike Kazarnowicz, Joe Rollerfan (Flickr)

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 15

Page 16: Anatomy of a Design Decision - R2.key

Disney World, Joe Penniston (Flickr)

Joanna8555 (Flickr)

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 16

Page 17: Anatomy of a Design Decision - R2.key

Six Flags = Activities

Disney = Experience

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 17

Page 18: Anatomy of a Design Decision - R2.key

UnintentionalDesign

SelfDesign

GeniusDesign

Activity-Focused Design

Experience-Focused Design

Design Decision Styles

Initial focus

on complexity

&

ease of use

Designing for

users beyond

ourselves

Designing

something we’ve

never designed b

efore

Need to fill in th

e

gaps between

the activities

Bestbuy.com

Activities

Experience

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 18

Page 19: Anatomy of a Design Decision - R2.key

NeonatalIntensive Care

Unit

Users: Doctors, nurses, lab technicians, managers

Activities:Request a lab test

Get notified of new test

Find sample

Send back results

Get notified of results

Integrate results into patient’s chart

What’s it like to be an experienced nurse?

What’s it like to be a rotation resident?

What are the different contexts where test results are needed?

What does the total experience look like?

Improving NICU Quality of Care

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 19

Page 20: Anatomy of a Design Decision - R2.key

Decision Style:

Experience-Focused Design

When we’re designing for the entire experience

Works great when:

We want to improve our users’ complete experiences, in between the specific activities

We can be pro-active about the designs

Game-changing innovations are the top priority

UnintentionalDesign

SelfDesign

GeniusDesign

Activity-Focused Design

Experience-Focused Design

Design Decision Styles

Initial focus

on complexity

&

ease of use

Designing for

users beyond

ourselves

Designing

something we’ve

never designed b

efore

Need to fill in th

e

gaps between

the activities

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 20

Page 21: Anatomy of a Design Decision - R2.key

Rule-basedDecisions

vs. InformedDecisions

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 21

Page 22: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 22

Page 23: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 23

Page 24: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 24

Page 25: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 25

Page 26: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 26

Page 27: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 27

Page 28: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 28

Page 29: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 29

Page 30: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 30

Page 31: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 31

Page 32: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 32

Page 33: Anatomy of a Design Decision - R2.key

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 33

Page 34: Anatomy of a Design Decision - R2.key

Site Guidelines

Rule #17:

Always put

the search box

in the upper right

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 34

Page 35: Anatomy of a Design Decision - R2.key

Wamu.com

WellsFargo.com

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 35

Page 36: Anatomy of a Design Decision - R2.key

Amazon

Amazon (circa 2006)

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 36

Page 37: Anatomy of a Design Decision - R2.key

Best Buy

Site

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 37

Page 38: Anatomy of a Design Decision - R2.key

CityOfTucson.gov (circa 2006)

Site

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 38

Page 39: Anatomy of a Design Decision - R2.key

Site

University of Miami

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 39

Page 40: Anatomy of a Design Decision - R2.key

Site Guidelines

Rule #17:

Always put

the search box

in the upper right

Design style guides

andguidelines

never work!

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 40

Page 41: Anatomy of a Design Decision - R2.key

Rule-baseddecisions

Informeddecisions

Prevents

thinking Requires

thinking

Fails on any

exception cases

Works with

normal and

exception cases

InformingDesign

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 41

Page 42: Anatomy of a Design Decision - R2.key

Process

Methodology

Dogma

tsa.gov

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 42

Page 43: Anatomy of a Design Decision - R2.key

redmaryland.blogspot.com

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 43

Page 44: Anatomy of a Design Decision - R2.key

SAFE

?

BAD?

SAFE

?

BAD?

Instrument of Terrorism?

SAFE

?

BAD?

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 44

Page 45: Anatomy of a Design Decision - R2.key

Dogma:An unquestioned faith independent of any supporting evidence

Process

Methodology

Dogma

Techniques

Tricks

Rule & faith-baseddecision makingInformed

decision making

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 45

Page 46: Anatomy of a Design Decision - R2.key

Rule-baseddecisions

Informeddecisions

Style Guides

and Guidelines Design patterns

Salesforce.com

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 46

Page 47: Anatomy of a Design Decision - R2.key

UnintentionalDesign

SelfDesign

GeniusDesign

Activity-Focused Design

Experience-Focused Design

Design Decision Styles

Eating your owndog food

UsabilityTesting

FieldStudies

Personas&

Patterns

Useful Discoveries about Design Decision Styles

Every style has its purpose

UnintentionalDesign

SelfDesign

GeniusDesign

Activity-Focused Design

Experience-Focused Design

Initial focus

on complexity

&

ease of use

Designing for

users beyond

ourselves

Designing

something we’ve

never designed b

efore

Need to fill in th

e

gaps between

the activities

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 47

Page 48: Anatomy of a Design Decision - R2.key

Useful Discoveries about Design Decision Styles

Every style has its purpose

Great designers know which style they’re using

SelfDesign

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 48

Page 49: Anatomy of a Design Decision - R2.key

GeniusDesign

Useful Discoveries about Design Decision Styles

Great designers use the same style for the entire project

Great teams ensure everyone uses the same style

The more advanced the style, the more expensive

Agencies can’t go beyond Genius Design

Activity-focused & Experienced-focused must be done in-house

The more advanced the style, the better the design

Every style has its purpose

Great designers know which style they’re using

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 49

Page 50: Anatomy of a Design Decision - R2.key

What kind of designer

do you aspire to be?

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 50

Page 51: Anatomy of a Design Decision - R2.key

What kind of designer

do you aspire to be?

YvettesBridalFormal.com

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 51

Page 52: Anatomy of a Design Decision - R2.key

GeorgeHutchins.com

Anatomy of aDesign Decision

You need to know which decision style you’re using

Unintended, Self, Genius, Activity-focused, or Experience-focused

Encourage informed decisions and avoid rule-based decisions

Techniques and tricks are more effective than methodologies and dogma

Choose the right techniques and tricks for your next decision style

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 52

Page 53: Anatomy of a Design Decision - R2.key

Four Cities

Two Days Each

The Masters of Web App Design

UIETour.com

More Info from User Interface Engineering

Newsletter: UIEtips (FREE)

UIE Virtual Seminars

UIE Web App Masters Tour

uietour.com

Site: www.uie.com

Twitter, LinkedIn, Facebook: jmspool

Anatomy of a Design Decision User Interface Engineering - www.uie.com

© Copyright 2010, User Interface Engineering. All Rights Reserved. 53