the elements of user experience
DESCRIPTION
The Elements Of User ExperienceTRANSCRIPT
Jesse James Garrett
The Elements of User Experience
Meet The Elements
3© 2003 Adaptive Path
“Worst Movie Ever!”
“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© 2003 Adaptive Path
Products Are People Too
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© 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© 2003 Adaptive Path
Surface
9© 2003 Adaptive Path
Skeleton
10© 2003 Adaptive Path
Structure
11© 2003 Adaptive Path
Scope
12© 2003 Adaptive Path
Strategy
Abstract
Concrete
13© 2003 Adaptive Path
The Five Planes
s t r a t e g y
s c o p e
s t r u c t u r e
s k e l e t o n
s u r f a c e
14© 2003 Adaptive Path
The Language Barrier
Information ArchitectureContent Requirements
Navigation Design
Interaction DesignInterface Design
Functional SpecificationsInformation Design
15© 2003 Adaptive Path
Web as information
16© 2003 Adaptive Path
Web as application
17© 2003 Adaptive Path
A Basic DualityWeb as software interface Web as hypertext system
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© 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© 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© 2003 Adaptive Path
Make identifying user needs more manageable
Break your audience down into segments based on shared characteristics
User Segmentation
22© 2003 Adaptive Path
Character sketches based on user research
Extrapolate from a general set of characteristics to a specific case
Personas
WSJ.com Salon.com Travelocity.com
Janet“I don’t have time to sort through a lot ofinformation. I need quick answers.”
Janet is frustrated with working in a corporate environment and wants to start her own accounting practice.
Family:
Age: 42Occupation: Accounting firm vice president
Married, two childrenHousehold income: $140,000/year
Technical profile: Fairly comfortable with technology; Delllaptop (about one year old) running Windows XP; DSLInternet connection; 8-10 hours/week onlineInternet use: 75% at home; news and information,shopping
Favorite sites:
23© 2003 Adaptive Path
Often framed in terms of businessBusiness goals
Business drivers
Business requirements
Should be specific to the site
Independent of your organization’s other activities
Site Objectives
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 Metrics
1
2
3
4
5
6
7
8
9
10
target
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
launch ofredesigned site
visits per month (registered users only)
25© 2003 Adaptive Path
Functional Specifications: application features the site must include
Content Requirements: content elements the site must include
The Scope Plane
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© 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© 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© 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© 2003 Adaptive Path
Inter-actionActions the user can take with the system
Actions the system can take in response to the user
Interaction Design
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© 2003 Adaptive Path
Top-down starts with categories and slots content into them
Top-down vs. Bottom-up
content
categories
33© 2003 Adaptive Path
Bottom-up starts with content and builds up to categories
Top-down vs. Bottom-up
content
categories
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© 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© 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© 2003 Adaptive Path
38© 2003 Adaptive Path
Provides a means for users to interact with application functionality
Interface Design
39© 2003 Adaptive Path
Communicates the choices available to the user
Facilitates movement
Different designs have different effects
Navigation Design
40© 2003 Adaptive Path
Brings all skeleton issues together into one high-level “sketch”
Illustrates relative priority of page elements
Suggests page layout approaches
Wireframes
LOGOGLOBAL 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 sixpiqued gymnasts! We dislike to exchangejob lots of sizes varying from a quarter up.The job requires extra pluck and zeal fromevery young wage earner.
A quart jar of oil mixed with zinc oxidemakes a very bright paint. Six big juicysteaks sizzled in a pan as five workmen leftthe quarry. The juke box music puzzled agentle visitor from a quaint valley town.
Pack my box with five dozen liquor jugs.How razorback-jumping frogs can level sixpiqued gymnasts!
SEARCH QUERY
dropdown
text field
button
PARTNER CONTENT
The job requires extrapluck and zeal from everyyoung wage earner. Aquart jar of oil mixed withzinc oxide makes a verybright paint. Pack my boxwith five dozen liquor jugs.
HEADER GRAPHIC
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© 2003 Adaptive Path
Color Palettes
r:102g:153b:204
r:0g:102b:204
r:0g:51
b:153
r:0g:153b:0
r:255g:255b:204
r:204g:204b:153
r:153g:153b:102
r:51g:51b:51
r:255g:153b:0
r:204g:204b:204
43© 2003 Adaptive Path
Typography
Apple Garamondis Apple's custom corporate identity font.
Lucida Grandeis used for body text and navigation.
Genevais used for legibility at small sizes.
Helvetica Blackis used for some graphics.
44© 2003 Adaptive Path
The Elements of User Experience
Intermission
The ElementsApplied
47© 2003 Adaptive Path
Almost every site has one
Every site seems to take a slightly different approach
Search Engines
48© 2003 Adaptive Path
User NeedsDo users want a search engine?
Are there limits to the kind of search functionality users need?
Site ObjectivesIs implementing search feasible given our resources?
Would implementing search limit our ability to fulfill other goals for the site?
Strategy
49© 2003 Adaptive Path
Functional Specificationskeyword entry
other fields for specifying criteria
ability to narrow result set
Content Requirementslabeling
result data
help docs
Scope
50© 2003 Adaptive Path
Interaction Designchoices available to users at each step
system behavior under various conditions
Information Architecturearchitectural scope as search criterion
metadata structures
Structureadvanced search
continue from:any page
search results
content pages
refin
e se
arch
no results
exac
tly o
ne r
esul
t
51© 2003 Adaptive Path
Information Designlayout of search results
communicating error conditions
Interface Designuser input mechanisms
Navigation Designmoving into and out of search flow
moving through search results
Skeleton
52© 2003 Adaptive Path
Visual Designcolor
typography
layout
Surface
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© 2003 Adaptive Path
A sprint is a short raceGet a quick start
Burn energy as quickly as possible
A marathon is a long racePace 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© 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© 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© 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© 2003 Adaptive Path
Waterfalls Are Dangerousef
fort
time
effo
rt
time
Your site is never finished
Do what you can right now
Always look ahead to the next release
Version 1.1Version 1.0
59© 2003 Adaptive Path
Iterative Development
January (now) April July October (next) January
60© 2003 Adaptive Path
The specific roles you choose don’t matter – if you’ve got all the planes covered
Roles
61© 2003 Adaptive Path
Core competencies common to successful teams
Must be reflected in the team’s:
Roles
Processes
The Nine Pillarsproject management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
tact
ical
strategic
contentproduction
technologystrategy
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
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 Research
tact
ical
strategic
user research
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
63© 2003 Adaptive Path
Primary responsibility for defining site objectives
Decides priorities and success metrics
Titles:Business Analyst
Product Manager
Executive Producer
Site Strategy
site strategy
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
64© 2003 Adaptive Path
Often responsible for functional specifications
Decides technical platforms and standards to adopt
Titles:Senior Engineer
Development Manager
Technical Lead
Technology Strategy
technologystrategy
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
65© 2003 Adaptive Path
Often responsible for content requirements
Decides appropriate format and subject matter
Titles:Content Strategist
Content Editor
Editor-in-Chief
Content Strategy
contentstrategy
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
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 Design
abstract design
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
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 Implementation
technologyimplementation
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
68© 2003 Adaptive Path
Tactical execution of content strategy
Gathering, editing, producing, and deploying content (not just text)
Titles:Content Producer
Writer
Editor
Content Production
contentproduction
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
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 Design
concrete design
tact
ical
strategic
project management
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
contentproduction
technologystrategy
70© 2003 Adaptive Path
Binds together all tactical competencies
Often overlooked in smaller organizations
Titles:Producer
Project Manager
Project Managementproject management
tact
ical
strategic
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
technologyimplementation
user research
concrete design
site strategy
abstract design
contentstrategy
tact
ical
strategic
contentproduction
technologystrategy
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
Thanks!