More Related Content
Similar to The Elements Of User Experience (20)
More from John Chen, Jun (10)
The Elements Of User Experience
- 4. Who Gets the Blame?
“I probably overlooked
the right choice.” ?!?
“I must not have read
the instructions closely
enough.”
“I guess I’m not smart
enough to use this.”
© 2003 Adaptive Path 4
- 6. User-Centered Design
A philosophy of product development
The product is not an end in itself
The product is a means toward the end
of providing a good experience for the
user
Suite of methods emphasizing
understanding people rather than
technology
© 2003 Adaptive Path 6
- 7. User Experience
How a product behaves and is used in
the real world
Beyond the product to its context in
people’s lives
Incorporates diverse range of factors
© 2003 Adaptive Path 7
- 13. The Five Planes
Concrete
surface
skeleton
structure
scope
strategy Abstract
© 2003 Adaptive Path 13
- 14. The Language Barrier
Information Design
Functional Specifications
Interaction Design
Information Architecture
Interface Design
Content Requirements
Navigation Design
© 2003 Adaptive Path 14
- 17. A Basic Duality
Web as software interface Web as hypertext system
© 2003 Adaptive Path 17
- 18. The Strategy Plane
User Needs:
what the site must
do for the people
who use it
Site Objectives:
what the site must
do for the people
who build it
© 2003 Adaptive Path 18
- 19. User Needs
Some are fundamental – users need
products that:
work
they can use
meet their expectations
But most are specific to your users and
your product
© 2003 Adaptive Path 19
- 20. User Research
Best way to
discover user needs
Many techniques,
ranging from quick
and cheap to
lengthy and
expensive
Read the book!
© 2003 Adaptive Path 20
- 21. User Segmentation
Make
identifying user
needs more
manageable
Break your
audience down
into segments
based on shared
characteristics
© 2003 Adaptive Path 21
- 22. Personas
Character
sketches based Janet
on user “I don’t have time to sort through a lot of
information. I need quick answers.”
research Janet is frustrated with working in a corporate environment
and wants to start her own accounting practice.
Extrapolate Age: 42
Occupation: Accounting firm vice president
Technical profile: Fairly comfortable with technology; Dell
laptop (about one year old) running Windows XP; DSL
from a general
Family: Married, two children Internet connection; 8-10 hours/week online
Household income: $140,000/year Internet use: 75% at home; news and information,
shopping
set of Favorite sites:
characteristics
to a specific WSJ.com Salon.com Travelocity.com
case
© 2003 Adaptive Path 22
- 23. Site Objectives
Often framed in terms of business
Business goals
Business drivers
Business requirements
Should be specific to the site
Independent of your organization’s other
activities
© 2003 Adaptive Path 23
- 24. Success Metrics
10
The only way to 9
know if changing 8 target
your site has
7
6
made a difference 5
Closely tied to
4
3
site objectives 2
launch of
More on this
1 redesigned site
tomorrow! Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
visits per month (registered users only)
© 2003 Adaptive Path 24
- 25. The Scope Plane
Functional
Specifications:
application features
the site must include
Content
Requirements:
content elements the
site must include
© 2003 Adaptive Path 25
- 26. Functional Specifications
What application features will users
need to fulfill their goals?
Focus on “what it does”
not “how it works”
not “what it doesn’t do”
Be specific, but don’t dictate system
design
© 2003 Adaptive Path 26
- 27. Content Requirements
What information will users need or
want from the site?
What form should it take?
Where will it come from?
Who’s responsible?
Define elements according to their
purpose
© 2003 Adaptive Path 27
- 28. Keeping Documentation
“Docs are a waste of time.”
No one reads them
They’re never up-to-date
They’re too much trouble to maintain
Time spent planning the site becomes time
saved producing the site
Integrate documentation into the process,
rather than making it a separate step
© 2003 Adaptive Path 28
- 29. The Structure Plane
Interaction
Design: how the
user moves from one
step in a process to
the next
Information
Architecture: how
the user moves from
one content element
to the next
© 2003 Adaptive Path 29
- 30. Interaction Design
Inter-action
Actions the user
can take with the
system
Actions the
system can take in
response to the
user
© 2003 Adaptive Path 30
- 31. Information Architecture
Defines conceptual relationships
between content elements
Reflects the way users think about the
subject matter
Often hierarchical, but not necessarily
© 2003 Adaptive Path 31
- 32. Top-down vs. Bottom-up
Top-down starts with categories and
slots content into them
categories
content
© 2003 Adaptive Path 32
- 33. Top-down vs. Bottom-up
Bottom-up starts with content and
builds up to categories
categories
content
© 2003 Adaptive Path 33
- 34. Documenting Structure
Visual representations home
tend to work best media info products support
Diagrams can be as home
products
simple or as complex as
press releases file
archives
office
products
you need
Visual Vocabulary: continue from:
home
login flow latest news
jjg.net/ia/visvocab
(2c)
entry page continue to:
member list
technical
papers
© 2003 Adaptive Path 34
- 35. The Skeleton Plane
Information
Design: facilitates
comprehension of
information
Interface Design:
facilitates user input
and system output
Navigation Design:
facilitates movement
through the site
© 2003 Adaptive Path 35
- 36. Information Design
How can we present this information so
that people can understand and use it?
Communicate relative importance of
different pieces of information
Guide the user from one piece to the next
Draw attention to important details
Communicate relationships between
elements
© 2003 Adaptive Path 36
- 38. Interface Design
Provides a means for users to interact
with application functionality
© 2003 Adaptive Path 38
- 39. Navigation Design
Communicates the choices
available to the user
Facilitates movement
Different designs have
different effects
© 2003 Adaptive Path 39
- 40. Wireframes
Brings all skeleton
issues together into LOGO
COURTESY NAV
one high-level
GLOBAL NAV
WAYFINDING CUES
“sketch” HEADER GRAPHIC
SEARCH QUERY
dropdown
Pack my box with five dozen liquor jugs.
LOCAL
Illustrates relative
How razorback-jumping frogs can level six text field
NAV piqued gymnasts! We dislike to exchange
job lots of sizes varying from a quarter up.
The job requires extra pluck and zeal from
button
priority of page
every young wage earner.
A quart jar of oil mixed with zinc oxide
PARTNER CONTENT
makes a very bright paint. Six big juicy The job requires extra
elements SUPP. NAV
steaks sizzled in a pan as five workmen left
the quarry. The juke box music puzzled a
gentle visitor from a quaint valley town.
pluck and zeal from every
young wage earner. A
quart jar of oil mixed with
zinc oxide makes a very
Pack my box with five dozen liquor jugs.
Suggests page
bright paint. Pack my box
How razorback-jumping frogs can level six with five dozen liquor jugs.
piqued gymnasts!
COURTESY NAV
layout approaches
© 2003 Adaptive Path 40
- 41. The Surface Plane
Visual Design: the
“look” in “look and
feel”
Usually the part
people think of
when you say “Web
design”
More than just
aesthetics
© 2003 Adaptive Path 41
- 42. Color Palettes
r:102 r:255
g:153 g:255
b:204 b:204
r:0 r:204
g:102 g:204
b:204 b:153
r:0 r:153
g:51 g:153
b:153 b:102
r:0 r:51
g:153 g:51
b:0 b:51
r:255 r:204
g:153 g:204
b:0 b:204
© 2003 Adaptive Path 42
- 43. Typography
Apple Garamond
is Apple's custom corporate identity font.
Lucida Grande
is used for body text and navigation.
Helvetica Black
is used for some graphics.
Geneva
is used for legibility at small sizes.
© 2003 Adaptive Path 43
- 47. Search Engines
Almost every site has one
Every site seems to take a slightly
different approach
© 2003 Adaptive Path 47
- 48. Strategy
User Needs
Do users want a search engine?
Are there limits to the kind of search
functionality users need?
Site Objectives
Is implementing search feasible given our
resources?
Would implementing search limit our
ability to fulfill other goals for the site?
© 2003 Adaptive Path 48
- 49. Scope
Functional Specifications
keyword entry
other fields for specifying criteria
ability to narrow result set
Content Requirements
labeling
result data
help docs
© 2003 Adaptive Path 49
- 50. Structure
Interaction Design continue
from:
any page
advanced
search
choices available to users
at each step no results
refine search
system behavior under
exactly one result
various conditions search results
Information Architecture
architectural scope as
search criterion content pages
metadata structures
© 2003 Adaptive Path 50
- 51. Skeleton
Information Design
layout of search results
communicating error conditions
Interface Design
user input mechanisms
Navigation Design
moving into and out of search flow
moving through search results
© 2003 Adaptive Path 51
- 52. Surface
Visual Design
color
typography
layout
© 2003 Adaptive Path 52
- 53. Asking the Right Questions
What problem are we
trying to solve?
What are the
consequences of our
proposed solution to the
problem?
Will this solution force
us to re-think other
problems?
© 2003 Adaptive Path 53
- 54. The Marathon and the Sprint
A sprint is a short race
Get a quick start
Burn energy as quickly as possible
A marathon is a long race
Pace yourself
Choose when to burn energy
Which race are you trying to run?
Which race are you actually in?
© 2003 Adaptive Path 54
- 55. Answering Objections
“Our market research tells us everything
we need to know about our users.”
Demographic data is not user insight
“We’ll just follow this list of guidelines
we found on the Internet.”
Rules of thumb are necessarily general
“Interface is easy – technology is hard.”
Which is more complicated: machines or
people?
© 2003 Adaptive Path 55
- 56. Answering Objections
“We can’t afford to hire experts.”
You don’t need experts for everything
“We’ll figure it out as we go.”
Improvisation is for jazz, not design
“We’ll fix it in QA.”
By that time, it’s already too late
“There’s no time in the schedule.”
You’ll be saving time on the next release
© 2003 Adaptive Path 56
- 57. Pitfalls to Avoid
Design by default: “We should do
whatever is easiest to implement.”
Design by mimicry: “If it’s good
enough for Amazon, it’s good enough for
us.”
Design by fiat: “Because I said so.”
© 2003 Adaptive Path 57
- 58. effort
Waterfalls Are Dangerous
time
effort
time
© 2003 Adaptive Path 58
- 59. Iterative Development
Your site is never finished
Do what you can right now
Always look ahead to the next release
January (now) April July October (next) January
Version 1.0 Version 1.1
© 2003 Adaptive Path 59
- 60. Roles
The specific roles you choose don’t
matter – if you’ve got all the planes
covered
© 2003 Adaptive Path 60
- 61. The Nine Pillars
project management
Core competencies concrete
design
common to
tactical
technology content
successful teams implementation production
Must be reflected abstract
design
strategic
in the team’s: technology content
strategy strategy
Roles
site
Processes strategy
user research
© 2003 Adaptive Path 61
- 62. User Research
project management
The foundation of
user-centered design
concrete
design
Informs all strategic
decisions
tactical
technology content
implementation production
Primary abstract
responsibility for design
strategic
identifying user needs technology content
strategy strategy
Titles:
site
User Researcher strategy
Usability Analyst
user research
© 2003 Adaptive Path 62
- 63. Site Strategy
project management
Primary
responsibility for concrete
design
defining site
objectives
tactical
technology content
implementation production
Decides priorities abstract
and success metrics design
strategic
Titles: technology
strategy
content
strategy
Business Analyst
site
strategy
Product Manager
Executive Producer
user research
© 2003 Adaptive Path 63
- 64. Technology Strategy
project management
Often responsible for
functional concrete
design
specifications
tactical
Decides technical technology
implementation
content
production
platforms and abstract
standards to adopt design
strategic
Titles: technology
strategy
content
strategy
Senior Engineer
site
strategy
Development Manager
Technical Lead
user research
© 2003 Adaptive Path 64
- 65. Content Strategy
project management
Often responsible for
content requirements concrete
design
Decides appropriate
tactical
technology content
implementation production
format and subject
matter abstract
design
strategic
Titles: technology content
strategy strategy
Content Strategist
Content Editor site
strategy
Editor-in-Chief
user research
© 2003 Adaptive Path 65
- 66. Abstract Design
project management
Turns strategy into design
concepts
concrete
design
Always responsible for
Structure plane
tactical
technology content
implementation production
Sometimes responsible
for Scope and Skeleton abstract
design
planes
strategic
technology content
Titles: strategy strategy
Information Architect site
strategy
Interaction Designer
UI Specialist
user research
© 2003 Adaptive Path 66
- 67. Technology Implementation
project management
Tactical execution of
technology strategy concrete
design
May incorporate many
tactical
technology content
implementation production
roles, from coding to
integration to testing abstract
design
strategic
Titles: technology content
strategy strategy
Software Engineer
HTML Developer site
strategy
QA Tester
user research
© 2003 Adaptive Path 67
- 68. Content Production
project management
Tactical execution of
content strategy concrete
design
Gathering, editing,
tactical
producing, and technology
implementation
content
production
deploying content (not abstract
just text) design
strategic
Titles: technology
strategy
content
strategy
Content Producer site
strategy
Writer
Editor
user research
© 2003 Adaptive Path 68
- 69. Concrete Design
project management
Tactical realization of
abstract design concrete
design
Always responsible for
Surface plane
tactical
technology content
implementation production
Sometimes responsible abstract
design
for Skeleton and
strategic
Structure planes technology
strategy
content
strategy
Titles: site
strategy
Interface Designer
Visual Designer
user research
© 2003 Adaptive Path 69
- 70. Project Management
project management
Binds together all concrete
design
tactical competencies
tactical
technology content
implementation production
Often overlooked in
smaller organizations abstract
design
strategic
Titles: technology content
strategy strategy
Producer
Project Manager site
strategy
user research
© 2003 Adaptive Path 70
- 71. The Nine Pillars
project management
Not a nine-member concrete
team design
Not a nine-step
tactical
technology content
implementation production
process abstract
design
You should be able
strategic
technology content
to look at both and strategy strategy
see the pillars site
strategy
beneath them
user research
© 2003 Adaptive Path 71
- 72. What It’s All About
Plan before you build
Have conscious reasons for your choices
Articulate them explicitly
Make things people love!
© 2003 Adaptive Path 72