ElementsOfUserExperience Workshop Garret

The Elements of
User Experience
Jesse James Garrett
Meet The Elements
“Worst Movie Ever!”
© 2003 Adaptive Path 3

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.”

Products Are People Too

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

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

Surface

Skeleton

Structure

Scope

Strategy

The Five Planes
Concrete
surface
skeleton
structure
scope
strategy Abstract

The Language Barrier
Information
Functional Specifications Design
Interaction Design
Information Architecture
Interface Design
Content Requirements
Navigation Design

Web as information

Web as application

A Basic Duality
Web as software interface Web as hypertext system

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

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

User Research
Best way to
discover user needs
Many techniques,
ranging from quick
and cheap to
lengthy and
expensive
Read the book!

User Segmentation
Make
identifying user
needs more
manageable
Break your
audience down
into segments
based on shared
characteristics

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

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

Success Metrics
10
The only way to 9
know if changing 8 target
your site has

7
made a difference 5
Closely tied to
4
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)

The Scope Plane
Functional
Specifications:
application features
the site must include
Content
Requirements:
content elements the
site must include

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

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

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

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

Interaction Design
Inter-action
Actions the user
can take with the
system
Actions the
system can take in
response to the
user

Defines conceptual relationships
between content elements
Reflects the way users think about the
subject matter
Often hierarchical, but not necessarily

Top-down vs. Bottom-up
Top-down starts with categories and
slots content into them
categories
content

Top-down vs. Bottom-up
Bottom-up starts with content and
builds up to categories
categories
content

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

The Skeleton Plane
Information
Design: facilitates
comprehension of
information
Interface Design:
facilitates user input
and system output
Navigation Design:
facilitates movement
through the site

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

Interface Design
Provides a means for users to interact
with application functionality

Navigation Design
Communicates the choices

available to the user
Facilitates movement
Different designs have
different effects

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

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

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

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.

The Elements of User Experience

Intermission
The Elements
Applied
Search Engines
Almost every site has one
Every site seems to take a slightly
different approach

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?

Scope
Functional Specifications
keyword entry
other fields for specifying criteria
ability to narrow result set
labeling
result data
help docs

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
architectural scope as
search criterion content pages
metadata structures

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

Surface
Visual Design
color
typography
layout

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?

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?

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?

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

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.”

effort
Waterfalls Are Dangerous
time
effort
time

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

Roles
The specific roles you choose don’t
matter – if you’ve got all the planes
covered

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

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

Site Strategy
project management
Primary
responsibility for concrete
design
defining site
objectives
tactical
technology content
Decides priorities abstract

and success metrics design
strategic
Titles: technology
strategy
content
strategy
Business Analyst
site
strategy
Product Manager
Executive Producer
user research

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

Content Strategy
project management
Often responsible for

content requirements concrete
design
Decides appropriate
tactical
technology content
format and subject
matter abstract
design
strategic
Titles: technology content
strategy strategy
Content Strategist
Content Editor site
strategy
Editor-in-Chief
user research

Abstract Design
project management
Turns strategy into design

concepts
concrete
design
Always responsible for
Structure plane
tactical
technology content
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

Technology Implementation
project management
Tactical execution of
technology strategy concrete
design
May incorporate many
tactical
technology content
roles, from coding to
integration to testing abstract
design
strategic
strategy strategy
Software Engineer
HTML Developer site
strategy
QA Tester
user research

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

Concrete Design
project management
Tactical realization of
abstract design concrete
design
Always responsible for

Surface plane
tactical
technology content
Sometimes responsible abstract

design
for Skeleton and
strategic
Structure planes technology
strategy
content
strategy
Titles: site
strategy
Interface Designer
Visual Designer
user research

Project Management
project management
Binds together all concrete

design
tactical competencies
tactical
technology content
Often overlooked in
smaller organizations abstract
design
strategic
strategy strategy
Producer
Project Manager site
strategy
user research

The Nine Pillars
project management
Not a nine-member concrete
team design
Not a nine-step
tactical
technology content
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

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

Thanks!

ElementsOfUserExperience Workshop Garret

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ElementsOfUserExperience Workshop Garret

Uploaded by

Copyright:

Available Formats

The Elements of

© 2003 Adaptive Path 3

“I guess I’m not smart

© 2003 Adaptive Path 4

© 2003 Adaptive Path 5

© 2003 Adaptive Path 6

© 2003 Adaptive Path 7

© 2003 Adaptive Path 8

© 2003 Adaptive Path 9

© 2003 Adaptive Path 10

© 2003 Adaptive Path 11

© 2003 Adaptive Path 12

© 2003 Adaptive Path 13

© 2003 Adaptive Path 14

© 2003 Adaptive Path 15

© 2003 Adaptive Path 16

© 2003 Adaptive Path 17

© 2003 Adaptive Path 18

© 2003 Adaptive Path 19

© 2003 Adaptive Path 20

© 2003 Adaptive Path 21

research Janet is frustrated with working in a corporate environment

set of Favorite sites:

© 2003 Adaptive Path 22

© 2003 Adaptive Path 23

The only way to 9

know if changing 8 target

your site has

visits per month (registered users only)

© 2003 Adaptive Path 24

© 2003 Adaptive Path 25

© 2003 Adaptive Path 26

© 2003 Adaptive Path 27

© 2003 Adaptive Path 28

© 2003 Adaptive Path 29

© 2003 Adaptive Path 30

© 2003 Adaptive Path 31

© 2003 Adaptive Path 32

© 2003 Adaptive Path 33

tend to work best media info products support

Diagrams can be as home

entry page continue to:

© 2003 Adaptive Path 34

© 2003 Adaptive Path 35

© 2003 Adaptive Path 36

© 2003 Adaptive Path 38

Communicates the choices

© 2003 Adaptive Path 39

“sketch” HEADER GRAPHIC

A quart jar of oil mixed with zinc oxide

elements SUPP. NAV

© 2003 Adaptive Path 40

© 2003 Adaptive Path 41

© 2003 Adaptive Path 42

© 2003 Adaptive Path 43

© 2003 Adaptive Path 44

© 2003 Adaptive Path 47

© 2003 Adaptive Path 48

© 2003 Adaptive Path 49

choices available to users

exactly one result

© 2003 Adaptive Path 50

© 2003 Adaptive Path 51

© 2003 Adaptive Path 52