Post on 01-Jan-2017
transcript
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
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
NYTimes.com
HavenWorks.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 3
Etsy.com
Arngren.net
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 4
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
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
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
SolutionIP
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 8
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
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
BrynMawrSchool.org
Chapin.edu
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 11
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
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
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
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
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
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
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
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
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
Rule-basedDecisions
vs. InformedDecisions
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 21
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 22
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 23
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 24
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 25
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 26
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 27
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 28
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 29
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 30
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 31
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 32
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 33
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
Wamu.com
WellsFargo.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 35
Amazon
Amazon (circa 2006)
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 36
Best Buy
Site
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 37
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
Site
University of Miami
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 39
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
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
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
redmaryland.blogspot.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2010, User Interface Engineering. All Rights Reserved. 43
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
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
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
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
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
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
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
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
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
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