Post on 16-Jul-2015
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 2014, User Interface Engineering. All Rights Reserved. Page 1 • [R2.2]
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 2014, User Interface Engineering. All Rights Reserved. Page 2 • [R2.2]
NYTimes.com
HavenWorks.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 3 • [R2.2]
Etsy.com
Arngren.net
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 4 • [R2.2]
NYTimes.com, HavenWorks.com, Etsy.com, Arngren.net
Celebrity Death-Match:
37signalsVS
Don Norman
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 5 • [R2.2]
37signals vs. Norman37signals:
“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 2014, User Interface Engineering. All Rights Reserved. Page 6 • [R2.2]
37signals’ Highrise
Decision Style:
Self DesignWhen 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 2014, User Interface Engineering. All Rights Reserved. Page 7 • [R2.2]
SolutionIP
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 8 • [R2.2]
American Airlines
Decision Style:
Unintentional DesignWhen 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 2014, User Interface Engineering. All Rights Reserved. Page 9 • [R2.2]
Lings Cars
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 2014, User Interface Engineering. All Rights Reserved. Page 10 • [R2.2]
dl.odu.edu
ChathamHall.org
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 11 • [R2.2]
vt.edu
Imperial.ac.uk
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 12 • [R2.2]
New City Media
Decision Style:
Genius DesignWhen 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
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 13 • [R2.2]
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 bef
ore
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 2014, User Interface Engineering. All Rights Reserved. Page 14 • [R2.2]
Decision Style:
Activity-Focused DesignWhen 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
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 15 • [R2.2]
Six Flags: Mike Kazarnowicz, Joe Rollerfan (Flickr)
Disney World, Joe Penniston (Flickr)
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 16 • [R2.2]
Joanna8555 (Flickr)
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 17 • [R2.2]
Six Flags = Activities
Disney = Experience
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 bef
ore
Need to fill in the
gaps between
the activities
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 18 • [R2.2]
Bestbuy.com
Activities
Experience
NeonatalIntensive Care
Unit
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 19 • [R2.2]
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
Decision Style:
Experience-Focused DesignWhen 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
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 20 • [R2.2]
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 bef
ore
Need to fill in the
gaps between
the activities
Rule-basedDecisions
vs. InformedDecisions
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 21 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 22 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 23 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 24 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 25 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 26 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 27 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 28 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 29 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 30 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 31 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 32 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 33 • [R2.2]
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 34 • [R2.2]
Site Guidelines
Rule #17:
Always put
the search box
in the upper right
Wamu.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 35 • [R2.2]
WellsFargo.com
Amazon
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 36 • [R2.2]
Amazon (circa 2006)
Best Buy
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 37 • [R2.2]
Site
CityOfTucson.gov (circa 2006)
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 38 • [R2.2]
Site
Site
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 39 • [R2.2]
University of Miami
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 2014, User Interface Engineering. All Rights Reserved. Page 40 • [R2.2]
Design style guides
andguidelines
never work!
Rule-baseddecisions
Informeddecisions
Preventsthinking Requires
thinking
Fails on any
exception cases
Works with
normal and
exception cases
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 41 • [R2.2]
InformingDesign
Techniques
Tricks
Rule & faith-baseddecision makingInformed
decision making
Process
Methodology
Dogma
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 42 • [R2.2]
Rule-baseddecisions
Informeddecisions
Style Guides
and Guidelines Design patterns
Salesforce.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 43 • [R2.2]
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 bef
ore
Need to fill in the
gaps between
the activities
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 44 • [R2.2]
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 2014, User Interface Engineering. All Rights Reserved. Page 45 • [R2.2]
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 2014, User Interface Engineering. All Rights Reserved. Page 46 • [R2.2]
What kind of designer
do you aspire to be?
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 47 • [R2.2]
What kind of designer
do you aspire to be?
YvettesBridalFormal.com
Anatomy of a Design Decision User Interface Engineering - www.uie.com
© Copyright 2014, User Interface Engineering. All Rights Reserved. Page 48 • [R2.2]
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 2014, User Interface Engineering. All Rights Reserved. Page 49 • [R2.2]