The Elements Of User Experience

The Elements Of User Experience

1. Jesse James Garrett
The Elements of
User Experience

2. Meet The Elements

3. 3
© 2003 Adaptive Path
“Worst Movie Ever!”

4. “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.”
4
© 2003 Adaptive Path
Who Gets the Blame??!?

5. 5
© 2003 Adaptive Path
Products Are People Too

6. 6
© 2003 Adaptive Path
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
User-Centered Design

7. 7
© 2003 Adaptive Path
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
User Experience

8. 8
© 2003 Adaptive Path
Surface

9. 9
© 2003 Adaptive Path
Skeleton

10. 10
© 2003 Adaptive Path
Structure

11. 11
© 2003 Adaptive Path
Scope

12. 12
© 2003 Adaptive Path
Strategy

13. Abstract
Concrete 13
© 2003 Adaptive Path
The Five Planesstrategy scope structure skeleton surface

14. 14
© 2003 Adaptive Path
The Language Barrier
Information Architecture
Content Requirements
Navigation Design
Interaction Design
Interface Design
Functional Specifications
Information Design

15. 15
© 2003 Adaptive Path
Web as information

16. 16
© 2003 Adaptive Path
Web as application

17. 17
© 2003 Adaptive Path
A Basic DualityWeb as software interfaceWeb as hypertext system

18. 18
© 2003 Adaptive Path
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
The Strategy Plane

19. 19
© 2003 Adaptive Path
Some are fundamental – users need
products that:
work
they can use
meet their expectations
But most are specific to your users and
your product
User Needs

20. 20
© 2003 Adaptive Path
Best way to
discover user needs
Many techniques,
ranging from quick
and cheap to
lengthy and
expensive
Read the book!
User Research

21. 21
© 2003 Adaptive Path
Make
identifying user
needs more
manageable
Break your
audience down
into segments
based on shared
characteristics
User Segmentation

22. 22
© 2003 Adaptive Path
Character
sketches based
on user
research
Extrapolate
from a general
set of
characteristics
to a specific
case
PersonasWSJ.com Salon.com Travelocity.com
Janet
“I don’t have time to sort through a lot of
information. I need quick answers.”
Janet is frustrated with working in a corporate environment
and wants to start her own accounting practice.
Family:
Age: 42
Occupation: Accounting firm vice president
Married, two children
Household income: $140,000/year
Technical profile: Fairly comfortable with technology; Dell
laptop (about one year old) running Windows XP; DSL
Internet connection; 8-10 hours/week online
Internet use: 75% at home; news and information,
shopping
Favorite sites:

23. 23
© 2003 Adaptive Path
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
Site Objectives

24. 24
© 2003 Adaptive Path
The only way to
know if changing
your site has
made a difference
Closely tied to
site objectives
More on this
tomorrow!
Success Metrics1
2
3
4
5
6
7
8
9
10
target
JanFebMarAprMayJunJulAugSepOctNovDec
launch of
redesigned site
visits per month (registered users only)

25. 25
© 2003 Adaptive Path
Functional
Specifications:
application features
the site must include
Content
Requirements:
content elements the
site must include
The Scope Plane

26. 26
© 2003 Adaptive Path
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
Functional Specifications

27. 27
© 2003 Adaptive Path
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
Content Requirements

28. 28
© 2003 Adaptive Path
“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
Keeping Documentation

29. 29
© 2003 Adaptive Path
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
The Structure Plane

30. 30
© 2003 Adaptive Path
Inter-action
Actions the user
can take with the
system
Actions the
system can take in
response to the
user
Interaction Design

31. 31
© 2003 Adaptive Path
Defines conceptual relationships
between content elements
Reflects the way users think about the
subject matter
Often hierarchical, but not necessarily
Information Architecture

32. 32
© 2003 Adaptive Path
Top-down starts with categories and
slots content into them
Top-down vs. Bottom-upcontent categories

33. 33
© 2003 Adaptive Path
Bottom-up starts with content and
builds up to categories
Top-down vs. Bottom-upcontent categories

34. 34
© 2003 Adaptive Path
Visual representations
tend to work best
Diagrams can be as
simple or as complex as
you need
Visual Vocabulary:
jjg.net/ia/visvocab
Documenting Structurehome
media info products support
press releases
home
products
office
products
file
archives entry page
latest news
(2c)
technical
papers
login flow
continue to:
member list
continue from:
home

35. 35
© 2003 Adaptive Path
Information
Design: facilitates
comprehension of
information
Interface Design:
facilitates user input
and system output
Navigation Design:
facilitates movement
through the site
The Skeleton Plane

36. 36
© 2003 Adaptive Path
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
Information Design

37. 37
© 2003 Adaptive Path

38. 38
© 2003 Adaptive Path
Provides a means for users to interact
with application functionality
Interface Design

39. 39
© 2003 Adaptive Path
Communicates the choices
available to the user
Facilitates movement
Different designs have
different effects
Navigation Design

40. 40
© 2003 Adaptive Path
Brings all skeleton
issues together into
one high-level
“sketch”
Illustrates relative
priority of page
elements
Suggests page
layout approaches
WireframesLOGO
GLOBAL NAV
COURTESY NAV
LOCAL
NAV
WAYFINDING CUES
SUPP. NAV
COURTESY NAV
Pack my box with five dozen liquor jugs.
How razorback-jumping frogs can level six
piqued gymnasts! We dislike to exchange
job lots of sizes varying from a quarter up.
The job requires extra pluck and zeal from
every young wage earner.
A quart jar of oil mixed with zinc oxide
makes a very bright paint. Six big juicy
steaks sizzled in a pan as five workmen left
the quarry. The juke box music puzzled a
gentle visitor from a quaint valley town.
Pack my box with five dozen liquor jugs.
How razorback-jumping frogs can level six
piqued gymnasts!
SEARCH QUERY
dropdown
text field
button
PARTNER CONTENT
The job requires extra
pluck and zeal from every
young wage earner. A
quart jar of oil mixed with
zinc oxide makes a very
bright paint. Pack my box
with five dozen liquor jugs.
HEADER GRAPHIC

41. 41
© 2003 Adaptive Path
Visual Design: the
“look” in “look and
feel”
Usually the part
people think of
when you say “Web
design”
More than just
aesthetics
The Surface Plane

42. 42
© 2003 Adaptive Path
Color Palettesr:102
g:153
b:204
r:0
g:102
b:204
r:0
g:51
b:153
r:0
g:153
b:0
r:255
g:255
b:204
r:204
g:204
b:153
r:153
g:153
b:102
r:51
g:51
b:51
r:255
g:153
b:0
r:204
g:204
b:204

43. 43
© 2003 Adaptive Path
TypographyApple Garamond
is Apple's custom corporate identity font.
Lucida Grande
is used for body text and navigation.
Geneva
is used for legibility at small sizes.
Helvetica Black
is used for some graphics.

44. 44
© 2003 Adaptive Path
The Elements of User Experience

45. Intermission

46. The Elements
Applied

47. 47
© 2003 Adaptive Path
Almost every site has one
Every site seems to take a slightly
different approach
Search Engines

48. 48
© 2003 Adaptive Path
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?
Strategy

49. 49
© 2003 Adaptive Path
Functional Specifications
keyword entry
other fields for specifying criteria
ability to narrow result set
Content Requirements
labeling
result data
help docs
Scope

50. 50
© 2003 Adaptive Path
Interaction Design
choices available to users
at each step
system behavior under
various conditions
Information Architecture
architectural scope as
search criterion
metadata structures
Structureadvanced
search
continue
from:
any page
search results
content pages
refine search
no results
exactly one result

51. 51
© 2003 Adaptive Path
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
Skeleton

52. 52
© 2003 Adaptive Path
Visual Design
color
typography
layout
Surface

53. 53
© 2003 Adaptive Path
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?
Asking the Right Questions

54. 54
© 2003 Adaptive Path
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?
The Marathon and the Sprint

55. 55
© 2003 Adaptive Path
“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?
Answering Objections

56. 56
© 2003 Adaptive Path
“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
Answering Objections

57. 57
© 2003 Adaptive Path
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.”
Pitfalls to Avoid

58. 58
© 2003 Adaptive Path
Waterfalls Are Dangerouseffort
time effort
time

59. Your site is never finished
Do what you can right now
Always look ahead to the next releaseVersion 1.1 Version 1.0
59
© 2003 Adaptive Path
Iterative Development January (now) April July October (next) January

60. 60
© 2003 Adaptive Path
The specific roles you choose don’t
matter – if you’ve got all the planes
covered
Roles

61. 61
© 2003 Adaptive Path
Core competencies
common to
successful teams
Must be reflected
in the team’s:
Roles
Processes
The Nine Pillarsproject management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
tactical
strategic
content
production
technology
strategy

62. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 62
© 2003 Adaptive Path
The foundation of
user-centered design
Informs all strategic
decisions
Primary
responsibility for
identifying user needs
Titles:
User Researcher
Usability Analyst
User Researchtactical
strategic user research

63. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 63
© 2003 Adaptive Path
Primary
responsibility for
defining site
objectives
Decides priorities
and success metrics
Titles:
Business Analyst
Product Manager
Executive Producer
Site Strategysite
strategy tactical
strategic

64. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 64
© 2003 Adaptive Path
Often responsible for
functional
specifications
Decides technical
platforms and
standards to adopt
Titles:
Senior Engineer
Development Manager
Technical Lead
Technology Strategytechnology
strategy tactical
strategic

65. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 65
© 2003 Adaptive Path
Often responsible for
content requirements
Decides appropriate
format and subject
matter
Titles:
Content Strategist
Content Editor
Editor-in-Chief
Content Strategycontent
strategy tactical
strategic

66. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 66
© 2003 Adaptive Path
Turns strategy into design
concepts
Always responsible for
Structure plane
Sometimes responsible
for Scope and Skeleton
planes
Titles:
Information Architect
Interaction Designer
UI Specialist
Abstract Designabstract
design tactical
strategic

67. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 67
© 2003 Adaptive Path
Tactical execution of
technology strategy
May incorporate many
roles, from coding to
integration to testing
Titles:
Software Engineer
HTML Developer
QA Tester
Technology Implementationtechnology
implementation tactical
strategic

68. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 68
© 2003 Adaptive Path
Tactical execution of
content strategy
Gathering, editing,
producing, and
deploying content (not
just text)
Titles:
Content Producer
Writer
Editor
Content Productioncontent
production tactical
strategic

69. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 69
© 2003 Adaptive Path
Tactical realization of
abstract design
Always responsible for
Surface plane
Sometimes responsible
for Skeleton and
Structure planes
Titles:
Interface Designer
Visual Designer
Concrete Designconcrete
design tactical
strategic

70. project management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
content
production
technology
strategy 70
© 2003 Adaptive Path
Binds together all
tactical competencies
Often overlooked in
smaller organizations
Titles:
Producer
Project Manager
Project Managementproject management tactical
strategic

71. 71
© 2003 Adaptive Path
Not a nine-member
team
Not a nine-step
process
You should be able
to look at both and
see the pillars
beneath them
The Nine Pillarsproject management
technology
implementation
user research
concrete
design
site
strategy
abstract
design
content
strategy
tactical
strategic
content
production
technology
strategy

72. 72
© 2003 Adaptive Path
Plan before you build
Have conscious reasons for your choices
Articulate them explicitly
Make things people love!
What It’s All About

73. Thanks!