THE ELEMENTS OF
USER EXPERIENCE
S E C O N D E D IT IO N
USER C ENT ER ED
D E S IG N
F O R T HE W E B A ND
BEY O ND
Written and Illustrated by
Jesse James Garrett
The Elements of User Experience: User-Centered
Design for the Web and Beyond, Second Edition
Jesse James Garrett
New Riders1249
Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Find us on the Web at: www.newriders.com
To report errors, please send a note to errata@peachpit.com
New Riders is an imprint of Peachpit, a division of Pearson
Education. Copyright
©
2011 by Jesse James Garrett
Project Editor: M ichael J. Nolan
Development
Production
Copyeditor:
Proofreader:
Editor: Rose Weisburd
Editor: Tracey Croom
Doug Adrianson
Gretchen Dykstra
Indexer: Valerie Perry
Cover Designer: Aren Howell Straiger
Interior Designer: K im Scott
Compositor:
K im Scott
Notice of Rights
A ll rights reserved. No part of this book may be reproduced
or transmitted
mechanical,
without
recording, or otherwise,
the prior written permission
information
contact
in any form by any means, electronic,
photocopying,
on getting permission
of the publisher. For
for reprints and excerpts,
permissions@peachpit.com.
Notice of Liability
The information
basis without
in this book is distributed
taken in the preparation
Peachpit
respect
on an “As Is”
warranty. While every precaution
has been
of the book, neither the author nor
shall have any liability to any person or entity with
to any loss or damage
directly or indirectly
book or by the computer
described
caused or alleged to be caused
by the instructions
contained
software and hardware
in this
products
in it.
Trademarks
Many of the designations
to distinguish
used by manufacturers
their products
and sellers
are claimed as trademarks.
Where those designations
appear in this book, and Peachpit
was aware of a trademark
claim, the designations
requested
appear as
by the owner of the trademark. A ll other product
names and services identified throughout
this book are
used in editorial fashion only and for the benefit of such
companies
with no intention of infringement
of the
trademark. No such use, or the use of any trade name, is
intended to convey endorsement
this book.
ISBN 13: 978-0-321-68368-7
ISBN 10 : 0-321-68368-4
or other affiliation
with
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of A merica
For my wife, Rebecca
Blood Garrett,
who makes all things possible.
THE ELEMENTS
iv
OF USER
EXPERIENCE
Table of Contents
CHAPTER
User
1
Experience
and
Why
It
Matters
2
Everyday
Miseries
Introducing
User
3
Experience
4
From Product
7
Design to User Experience
Design
Designing
(for)
Experience:
Use
Matters
8
User
Experience
and
the
Web
Good
Business
9
Good
User
Experience
Is
12
Minding
Your
Users
17
CHAPTER
Meet
2
the
Elements
18
The
Five
Planes
19
The
Surface
The
Skeleton
The
Structure
The
Scope
The
Strategy
Plane
20
Plane
20
Plane
20
Plane
21
21
Plane
Building
from
Bottom
to
Top
21
A
Basic
Duality
25
The
Elements
of
User
28
The
Strategy
The
Scope
The
Structure
The
Skeleton
The
Surface
Plane
28
Plane
29
Plane
30
Plane
30
Plane
30
Using
THE ELEMENTS
CHAPTER
the
Elements
OF USER EXPERIENCE
3
The Strategy Plane
Product
Objectives
and User Needs
Experience
Defining
Product
the Strategy
Objectives
Business
Goals
Brand Identity
Success Metrics
User Needs
User Segmentation
Usability
and User Research
Creating Personas
Team Roles and Process
CHAPTER
4
The Scope Plane
Functional
Specifications
Defining
and Content
Requirements
the Scope
Reason #1: So You Know What
You’re
Building
Reason #2: So You Know What
You’re
Not Building
Functionality
Defining
and Content
Requirements
Functional
Specifications
Writing It Down
Content
Requirements
Prioritizing
Requirements
v
34
36
37
37
38
39
42
42
46
49
52
56
58
59
60
61
65
68
69
71
74
THE ELEMENTS
vi
OF USER
EXPERIENCE
CHAPTER 5
The Structure Plane
Interaction
Design and Information
Defining
Architecture
the Structure
80
Interaction
81
78
Conceptual
Design
Models
83
Error
86
Information
89
Architectural
88
92
Handling
Architecture
Structuring
Content
Approaches
Organizing
96
Language
98
Team
Principles
and
Roles
and
Metadata
Process
101
CHAPTER 6
The Skeleton Plane
Interface Design, Navigation
and Information
Defining
the
108
Convention
110
Interface
1 14
118
Navigation
Information
Design,
Design
106
Skeleton
and
Metaphor
Design
Design
Design
124
Wayfinding
127
Wireframes
THE ELEMENTS
OF USER EXPERIENCE
CHAPTER
7
The Surface Plane
Sensory Design
Defining
Making
the Surface
Sense of the Senses
Smell and Taste
Touch
Hearing
Vision
Follow
the Eye
Contrast
and Uniformity
Internal and External Consistency
Color Palettes
Design Comps
CHAPTER
and Typography
and Style Guides
8
The Elements
Applied
Asking the Right Questions
The Marathon
and the Sprint
Index
vii
132
134
135
135
135
136
136
137
139
143
145
148
152
157
159
164
THE ELEMENTS
viii
OF USER
EXPERIENCE
About the Author
Jesse James
Garrett
user experience
Jesse
has worked
Intel,
Boeing,
on Web
Motorola,
Radio. His contributions
Photo by: Colin Peck
tecture
Visual Vocabulary,
at
is
destinations
resources,
and
information
he
projects
for companies
Hewlett-Packard,
ix
and
Path, a
Since 1995,
such as AT&T,
National
to the field of user experience
that
is
one
for
is
architecture
of
now
Public
include the
by
His personal
site
the
information
a
archi-
used
frequent
and
issues.
THE ELEMENTS
of Adaptive
in San Francisco.
around the world.
www.jjg.net
popular
based
an open notation system for information
documentation
organizations
is one of the founders
consultancy
OF USER EXPERIENCE
user
Web’s
most
architecture
speaker
on
experience
Acknowledgements
Edition
for the Second
Michael Nolan spent years prodding
me to do a
second edition. His persistence—and
his ingenuity
in finally coming up with an offer Icouldn’t
up —are the reasons
pass
it exists at all.
At New Riders, the team of Rose Weisburd,
Tracey
Croom,
Nancy
and
Kim Scott
Davis, Charlene
helped
in
Samantha
kept
me on track.
Will, Hilal Sala, and Mimi Vitetta
making
things
go.
Thanks
also
to
Bailey and Karl Fast for their support.
My wife, Rebecca
Blood Garrett,
first, last, and most trusted
remains
my
editor, advisor, and
confidant.
New
additions
to
around
were
Tarentel,
Sleeping
and
(especially)
special
thanks
the
musical
Japan-cakes,
People,
Explosions
to
Steve
score
this
Mono,
Codes
in
in
the
Scarborough
time
Maserati,
the Clouds,
Sky.
of
Very
Maserati
for musical guidance.
Acknowledgements
Edition
for the First
Don’t let the number of names on the cover fool
you—it
takes a lot of people to make a book
happen.
First,
I have
Path:
Lane
Kuniavsky,
Young.
to
thank
my
Becker,
Peter
Merholz,
It is through
partners
Janice
their
at
Adaptive
Fraser,
Jeffrey
Mike
Veen, and Indi
indulgence
that
I was
able to take on this project at all.
Then there’s
Michael
Elzey,
Jake
everyone
Nolan,
Deborah
McFarland.
at New
Karen
Riders,
Hittel-Shoaf,
Their
particularly
Whitehouse,
guidance
John
was
Victoria
Rahm,
essential
this process.
x
EXPERIENCE
THE ELEMENTS
OF USER
and
to
Kim Scott
and
Aren
Howell
lent
a keen eye and
attention
to detail to the design of this book. Their
patience
with
especially
Molly
suggestions
from
the
author
was
laudable.
Wright
provided
Steenson
invaluable
manuscript.
Every author
Jess McMullin
and
insight
turned
David
Hoffer
in their review
should
of my
be so lucky.
out to be my toughest
critic in many ways, and this book is
immeasurably
Thanks
are
authors
who
project
like
improved
also
due
to
the
gave me advice
this
and
Veen
(again),
Mike
Krug,
June
Cohen,
Rosenfeld,
by his influence.
Peter
more
experienced
on how
to tackle
maintain
my sanity:
Kuniavsky
Nathan
Morville,
and
a
Jeffrey
(again),
Steve
Shedroff,
Louis
(especially)
Steve
Champeon.
Others
who
offered
valuable
suggestions
or
simply
good
George
West,
moral support
Olsen,
Samantha
Angeles,
Cosic,
Javier
Thierry
thought
of
included
Christina
Bailey,
Eric
Velasco,
I didn’t,
and
Chan,
Jessamyn
Scheid,
Antonio
and Dennis
Goulet,
things
Lisa
Wodtke,
Michael
Volpon,
Vuk
Woudt.
They
that
makes them
the best kind of colleagues.
Musical
was
accompaniment
provided
by Man
Mermen,
Dirty
Machine,
Don
for
Three, Trans
Caballero,
Men on a Shadowy
writing
process
Pell
Am, Tortoise,
Mogwai,
Planet,
and (especially) Godspeed
THE ELEMENTS
the
or Astro-man?,
Ui,
Do Make
Mell,
Turing
Shadowy
Say
Think,
You Black Emperor!
OF USER EXPERIENCE
xi
Finally,
this
there
book
Sanders,
who
insisted
there
wife, Rebecca
wiser
in
are
would
at
three
never
a
was
party
people
have
one
someone
way;
and
whom
Dinah
warm
I had
Blood, who makes
every
without
happened:
Texas
to
me stronger
Daniel
night
meet;
my
and
Grassam,
without
whose
support
I might
business
friendship,
encouragement,
not have found
and
my way into this
at all. Thank you.
This page intentionally
left blank
Introduction
to the Second
Edition
Let’s cut to the chase: It’s the second edition.
What’s
different?
The main difference
first
sites.
is that
Yes,
Web-related,
between
this edition and the
this book is no longer just about
most
but
of
the
overall,
examples
the
are
themes,
Web
still
concepts,
and principles
apply to products
and services
of all
for this, both having
to do
kinds.
There are two reasons
hap-pened over the last ten years. One
with what’s
is what’s
happened
happened
to user experience
Over
the years,
people
who
products
some
take
to Elements,
I’ve
have
heard
applied
that have nothing
cases
they
were
on something
and one is what’s
itself.
from (or heard
the
model
Elements
Web
designers
new, like a mobile
asked
of
across
somehow
came
other
and saw a connection
to their own work.
xiv
INTRODUCTION
Meanwhile,
broadened
the
field
of
user
kinds
Elements
experience
its horizons. Practitioners
to
application.
In other cases, they were designers
who
to
to do with the Web. In
of
products
about)
has
now regularly
talk about the impact
and value of user experience
design
beyond
of
the
in
areas
Web
or
far
even
the
limited
screen-based
context
interactive
applications
that dominated
the conversation
back
when this book was first written.
This
new
edition
of
the
book
takes
a
similarly
broad view. The Web is still central to the book, if
only
to
acknowledge
medium.
But
insider’s
the
this
knowl-edge
happens—so
you should
even
model’s
book
of
if
how
you
roots
doesn’t
Web
don’t
in
that
require
an
development
cre-ate
Web
sites,
be able to see how to apply these ideas
in your own work.
Despite
first
all this, those
edition
should
radical
reinvention.
of
familiar
the
hope-fully
philosophy
love),
of
rest
It’s
you who
assured:
a honing
Elements
with
model
the
same
have
This
read
is
the
not
you
core
know
(and
ideas
people
and
intact. The little things change, but the
big ones really don’t
I remain
a
and refinement
gratified
have
what happens
and
humbled
by
where
taken Elements. I can’t wait to see
next!
Jesse James Garrett
November
2010
Introduction
to the First
Edition
This is not a how-to
books
book. There are many, many
out there that explain how Web sites get
made. This is not one of them.
This is not a book about
not a single
technology.
There is
line of code to be found between
these covers.
This is not a book of answers. Instead, this book is
about asking the right questions.
This
book
before
the
will tell you what
you need
to know
you go read those other books. If you need
big
picture,
context
for
if
the
you
need
decisions
to
that
under-stand
user
the
experience
practitio-ners make, this book is for you.
This
book
is designed
few hours. If you’re
user
for hiring
maybe you’re
into
foundation
with
newcomer
experience—maybe
responsible
way
to be read
a
the
xvi
this
easily
you’re
a user
an
world
a
of
executive
experience
team, or
a writer or designer just finding your
field—this
you
need.
methods
and
If
book
will give
you’re
already
concerns
of
the
you
the
famil-iar
field
INTRODUCTION
this book will help you communicate
effectively
in just
to the
them more
to the people you work with.
of
The Story Behind the Book
Because
Iget asked about it a lot, here is the
story of how The Ele- ments of User Experience
came
to be.
In
late
1999,
architect
I became
hired
design
into
consultancy.
responsible
for
people
how
in with
were
they
perhaps
came
In
both
many
Web
I
was
position
what
they
and
to recognize
information
ways,
my
about
what
cautious
first
long-established
defining
educating
it fit
the
a
did.
and
I did,
and
Initially,
they
a bit wary,
that I was there
but
soon
to make
their jobs easier, not harder, and that my presence
did not mean their authority
Simultaneously,
collection
of
I
was
as
my
at
www.jjg.net/ia/.)
information
research,
seemingly
compiling
online material
(This would eventually
I was
related
a
architecture
While
and
I
work.
the Web
resources
was
doing
frustrated
random
personal
to my
find its way onto
continually
arbitrary
was diminished.
use
of
by
page
this
the
different
terms
one
for
the
source
basic
called
concepts
in the
information
be the same
as what
another
architecture.
A
rolled
under interface
to
definitions
express
busy
model
working
at
a
the relationships
actual
I was
design appeared
called
to
information
everything
together
of late 1999 and January
arrive
trying
to
out anyway;
set
of
and to find a way to
between
paying
2000, I
self-consistent
for these concerns
with
What
design.
Over the course
struggled
third
field.
work
them. But I was
as
formulate
well,
and
wasn’t
the
really
so by the end of January
I
had given up on the whole idea.
THE ELEMENTS
OF USER EXPERIENCE
xvii
That
March
annual
It
was
during
ference’s
begins
I traveled
South
an
engaging
which
to
Austin,
by Southwest
and
I didn’t
schedule
to resemble
of
Texas,
Interactive
for
thought-provoking
get
day
much
and
a marathon
sleep —the
night
after
the
Festival.
week
con-
activities
a couple
of
days.
At the end of that week, as I walked
terminal
of
the
board the plane
popped
that
airport
in
Austin
through
the
preparing
to
back to San Fran-cisco, it abruptly
into my head: a three-dimensional
captured
until we
all of
boarded
my
ideas.
I waited
matrix
patiently
the plane. As soon as I reached
my seat, Ipulled out a notebook
and sketched
it all
out.
Upon
my
return
immediately
I spent
fevered
worked
about
on
letter-size
of
User
a
delirium.
finished
I was
out
week
sliding
I felt particularly
turning
my
that
in
notebook
would
fit
and
sketch
periodic
Unfortunately,
Later
I would
tables
none
and
of
Strunk
these
into
a
onto
a
about
memories
and
associations
my mind when Ichose that title—I
a
Elements
hear
people, that title evoked
of
lucid, I
neatly
piece of paper. I called it “The
Experience.”
almost
head cold.
When
diagram
how, for many
of
to San Francisco,
laid up with an enervating
White.
was
in
chose elements
out
of
a thesaurus
to replace
and technical-sounding
On March
30, I posted
Web. (It’s
still there; you
diagram
at
diagram
started
from
Peter
the more
the final product
can
find
the
www.jjg.net/ia/elements.
getting
Merholz
later become
awkward
components.
some
and Jeffrey
my partners
on the
original
pdf. ) The
attention,
first
Veen, who would
in Adaptive
Path. Soon
after, Ispoke with more people about it at the first
Information
started
Architecture
hear-ing
from
Summit.
people
all
the
I
world
INTRODUCTION
xviii
diagram to educate their co-workers
their organizations
discussing
In
Eventually
over
the
Elements
and to give
a common vocabulary
for
these issues.
year
of
after
it
was
first
released,
Expe-rience”
was
from my site more
than 20,000
times.
hear
it
about
User
how
was
being
“The
downloaded
used
I began
in
to
large
and tiny Web development
organizations
help
them
effectively.
formulate
work
By
this
groups
and
commu-nicate
time,
I was
the idea for a book
to
more
beginning
that would
to
address
this need better than a single sheet of paper could.
Another
myself
March
rolled
around,
in Austin for South
met
Michael
Nolan
told
him
and
fortunately,
my
of New
idea.
He
his
and again
I found
by Southwest.
Riders
was
bosses
There
Publishing
I
and
enthusiastic
about
it,
turned
to
as
out
be
well.
Thus,
as
found
its way
you
do
much
with
enlightening
them together
by
luck
as
by
intent,
into your hands.
the
and
ideas
presented
rewarding
this
for
you
here
as
in this book has been for me.
Jesse James Garrett
July 2002
This page intentionally
book
I hope that what
left blank
is
as
putting
chapter
1
User Experience
and Why It
Matters
THE ELEMENTS
OF USER EXPERIENCE
3
We
have
products
a
double-edged
and
ser-vices
relationship
we use. They
and frustrate
us; they simplify
lives;
separate
they
together.
But
countless
products
easily
that
when
forget
that
someone,
they
us
even
and
they
well
bring
we
services
are
somewhere
work
and complicate
and
though
for
with
made
the
empower
us
our
us
closer
interact
with
every
by
day,
people,
we
and
should
get
the
credit
us— or
get
the
blame
when they don’t.
Everyday Miseries
Everyone,
every once in a while, has one of those
days.
You know
the kind of day I’m talking
about: You
wake
up
to sun-light
and wonder
it’s
3:43
make
over
a.m.
to see that
You
stumble
hasn’t
to
work
on
your
out
clock, which tells you
it
in your
why your alarm clock
yet. You look
another
streaming
gone
clock
of
bed
that
time—if
window
you
you
off
thinks
to
find
can
leave
still
in 10
minutes.
4
EXPERIENCE
You
turn
dressed,
AND WHY IT MATTERS
on the
coffeemaker
and
hustle
but when you go to retrieve
life-sustaining
caffeine,
there’s
pot.
to
out
No
1 USER
CHAPTER
time
figure
to
get
your dose of
no coffee
in
why—you’ve
the
got
to
get to work!
You get about
realize
you
that
try
to
a block
from your house
the car needs
use
the
one
pump
cards, but this time it won’t
have
to
you
have
go
inside
to wait
and
when you
gas. At the gas station,
pay
that
accept
the
in line while
takes
credit
yours. So you
cashier,
but
the cashier
first
very
slowly helps everyone
in front of you.
You
detour
have
to
take
a
the
drive
because
accident,
so
takes
expected.
It’s official: Despite
of
longer
a
traffic
than
you
all your efforts, you
are now late for work. Finally, you make it to your
desk.
You’re
irritable—and
agitated,
your
harried,
day
hasn’t
yet. And you still haven’t
Introducing
It seems
weary,
even really
and
started
had any coffee.
User Experience
like a string of bad luck—just
those days. But let’s rewind
one of
that series
look closer, and see if, somehow,
of events,
all that bad luck
could have been avoided.
The
accident:
happened
the
He
road
had
for
accident
the driver
a moment
to look
to identify
alone.
The
because
down
on
took
to turn
because
which was the volume
the
his
eyes
road
off
the radio down.
it was
impossible
control by touch
The register:
station
was
moved
complex
paid
The
line
so slowly
and
at the register
because
confusing,
in the gas
the cash register
and unless
the clerk
extra-close
attention
while
ringing
THE ELEMENTS OF USER EXPERIENCE
5
up, he would make a mistake
over again. If the register
layout
and colors
and have to start all
had been simpler
of the buttons
different,
and the
that line
never would have formed.
The
pump:
You wouldn’t
have
had
to stand
that line at all if the pump had accepted
It would
around
have done so if you had turned
the other way to swipe
the pump indicated
turned,
and
the card
it, but nothing
which way the card should
you were
in such
in
your card.
a hurry
that
on
be
you
didn’t think to try every orientation.
The
coffeemaker:
make
coffee
because
The
you
coffeemaker
didn’t
push
didn’t
down
the
power button all the way. The machine doesn’t
anything
to let you know
on: no light, no sound, no resistance
when the button makes contact.
had
turned
problem
you
it
could
had
set
the
automatically
learned
knew
it existed
but
thing
how
And now
whole
start
you,
that
alarm
we come
chain
didn’t
on the clock
don’t
if
brewing
in the morn-ing, but you
function—if
you
on the front is
of
go
to the factor
events:
off
the
because
was wrong. The time was wrong because
and reset
The
wrong.
12:00.
the
stepped
you
altogether
to
at all. The display
The clock:
The
were
avoided
to use
started
clock.
you
been
you can feel
You thought
coffeemaker
first
never
still blinking
on,
have
do
that it has been turned
in the middle
it for you. (If this sounds
laugh—it
has
had to go to surprising
happened
lengths
is imper-vious to cat meddling.)
configuration
of buttons
cat from resetting
of
that
alarm
the time
your cat
the night
implausible
to
to me. Ihave
to find a clock that
A slightly
different
would have prevented
the
the clock, and conse-quently
you
would
have
time—no
been
out
of
bed
6
could
one of the previous
have
different
service.
been
choices
These
the product
real
world.
developed,
what
creates
people
overlooked,
works—that
between
for the
people
When
a
of
can
the
often
who
is
the
it
it.
where
When
to
how
it
difference
and a failure.
on the
outside,
in
often
is not about the inner workings
with
of
being
other,
the
it
contact
use
is
equation—
or ser-vice. User experience
works
or
a lack
deal of attention
a product
into
a product
product
make
a suc-cessful product
User experience
of “bad
someone
experience :the experience
experience
side
had
all demonstrate
pay a great
it does. User
cases
avoided
in designing
examples
atten-tion to the user
the
of
AND WHY IT MATTERS
In short, every
made
plenty
1 USER
CHAPTER
EXPERIENCE
luck”
with
need to rush at all.
a
is about
person
someone
of
how
comes
asks
you
what it’s
asking
like to use a product
about
or service,
the user experience.
they’re
Is it hard to do
simple things?
Is it easy to figure out? How does it
feel to interact
with the product?
That
interaction
buttons,
such
as
as
alarm
registers.
involves
of
clocks,
Sometimes,
on your
coffeemakers,
it’s
car. However,
someone
ketchup
creates
just
bottles,
a
such
every
a
pushing
technology
physi-cal mechanism,
simple
by
often
in the case
reclining
lot
or
of
cash
matter
as
product
user
a
products
the
of
gas
a
cap
that is used
experience:
armchairs,
books,
cardigan
sweaters.
For any
things
you
kind
that
push
when
Having
doesn’t
click
design
how
deal.
of
makes
a
button
seem
the
that
if
you
button
you
feel
was
click
when
but
between
it matters
realized
causing
a
the little
like much,
coffee,
never
about
it’s
difference
and not getting
Even
would
or service,
down
get-ting coffee
great
product
count.
it
that
of
you
that
a
the
trouble,
coffeemaker
that
you were able to use successfully
THE ELEMENTS
only part of the
OF USER EXPERIENCE
7
about
the manufacturer?
Would
product from that company
not. Thus, for the want
customer
of a button
most
Design
of
people
it
well-designed
think
in
the eye and feels
about
products.
Sound
important
or
a
the
is
of
texture
product
come
that
(if
appeal:
looks
aesthetic
the curve
a power
of
a
good
(The
into play
overlooked
the
of
design
aesthetic
one
often
it’s
Experience
to the touch.
don’t
part
product.) Whether
of
is
good
and taste
body
clicks,
design at all), they often
terms
product
of smell
an
that
to User
they think about product
think
another
is lost.
From Product
Design
When
you buy
in the future? Probably
for
to
senses
most
but can
appeal
a sports
drill’s
grip,
be
of
a
car’s
the
aesthetic
dimension
of
product
design
is
a sure
attention-getter.
Another
common
product
design
well-designed
promises
way
is
product
to do. And
even
blades
though
the
write
even
these
These
products
functionally,
experience
can
Some
people
not
the
process
development:
le you place
is
don’t
a
full
pen
cut
that
of
ink,
a
be
failures
great
and
of
design.
work
well
prod-ucts with the user
outcome
means
looking
or aesthetic.
responsible
think
it
product
that
sharp,
it’s
look
as an explicit
may
are
A
what
jams.
but designing
beyond the functional
does
scissors
certainly
might
that
about
terms:
designed
though
printer that constantly
All of
one
a badly
doesn’t:
think
functional
is
one that somehow
doesn’t
people
in
for
creating
products
in terms of design at all. For them,
of
creating
steadily
8
a
building
product
up
and
is
about
refining
1 USER EXPERIENCE
CHAPTER
AND WHY IT
MATTERS
and functions
something
of the product until they add up to
viable in the marketplace.
In this view, the design of the product is dictated by
its functionality—
or, as
it, “form
function.”
complete
the
follows
concealed
to
the
forth—the
psychology
makes
at
the
sure
on
and
it trig-gers
that
are
and so
dictated
dictated
it
by
by
the
of the users themselves.
design
button
when
labels,
isn’t
it’s
put
makes
of a product,
But
product
displays,
form
context.
shape
the device. User
user.
all. Instead,
experience
of
a
a
buttons,
and behavior
questions
appealing
of
“correct”
functionality
sure
from
parts
user-facing—the
User
sometimes
This approach
sense for the inner workings
parts
comes
designers
often
Aesthetic
the
coffeemaker
texture.
the
experience
deals
design
Functional
appropriate
with
makes
is
an
design
action
on
design makes sure the
aesthetic
work
asking
such
and
in the
functional
context
questions
an
design
also
asking
questions
place relative
of
rest
function?
makes
of what
aspects
the
sure
”
the
in the
to accomplish,
like, “Is the button
to the other controls
expe-rience
works
is trying
button
product,
too small for
User
the button
the user
the
of
like, “Is the button
important
context
of
in the right
the user would
be using at the same time? ”
Designing
What’s
(for) Experience:
the difference
a user
and designing
product
every
intended
time
experience.
chair
a
designing
experience?
for
humans
product
Consider
a
is
After
has
used,
simple
a
it
product
a product
all, every
user,
and
delivers
such
an
as
a
or a table. To use the chair you sit on it; to
THE ELEMENTS
9
between
Use Matters
OF USER EXPERIENCE
both
cases,
the
product
satisfactory
experience:
the weight
of a person,
can
fail
to
if the chair
deliver
won’t
for example,
a
support
or the table
is unsteady.
But
the
manufacturers
not to employ
simple
cases,
successful
the
user
definition
of
of
chairs
user experience
and
requirements
experience
the product
tables
designers.
to
are
itself:
tend
In these
deliver
built
into
In some
a
the
sense,
a
chair you can’t sit on isn’t a chair at all.
With
more
complex
requirements
experience
to
are
products,
deliver
a
independent
the product. A telephone
of
though,
successful
the
is defined
the
user
definition
of
by its ability to
place and/or receive calls; but there are practically
infinite
deliver
variations
on
this
on
basic
the
varying degrees
of successful
And
complex
the
difficult
more
it
becomes
to
telephone
that
definition—with
a
can
widely
user experience.
product
identify
is, the
exactly
more
how
to
deliver
a successful
additional
of using
the
has
of
to
the
or step in the process
another
more
1950s.
modern
functions
As
a
for
mobile
than
result,
product
where product
by user experience
experience
opportunity
A
a successful
That’s
User Experience
and services.
to the user. Each
short.
many
creating
be supported
experience
fall
of, say,
quite different.
User
creates
many,
phone
process
function,
a product
experience
phone
desk
feature,
experience
a
the
has to be
design has to
design.
and the Web
is vital
to all kinds
This book is primarily
of one particular
of
products
about the user
kind of product:
Web
sites. (I’m using the term site here to refer to both
content-oriented
Web
products
and
interactive
10
CHAPTER
1 USER EXPERIENCE
AND WHY IT
MATTERS
On the Web, user
important
than
experience
becomes
it is for other
kinds
even more
of
products.
But
the lessons
experiences
we’ve
learned
from creating
on the Web can be applied
user
far beyond
its boundaries.
Web
sites
and
are
complicated
funny
something
trouble
They
using
blame
must have
they
stupid.
of
technology,
when people
complicated
pieces
of
themselves.
They
feel
done
weren’t
pieces
happens
something
paying
wrong.
enough
Sure, it’s irrational.
fault the site doesn’t
work
like
They
attention.
After
have
technology:
they
feel like
They
feel
all, it’s not their
the way they expect
it
to. But they feel stupid anyway. And if you intend
to
drive
people
product),
it’s
approach
than
away
hard
to
from
your
imagine
a
making
them
site
more
feel
(or
any
effective
stupid
when
site, in virtually
every
they use it.
Regardless
of
the
type
of
case, a Web site is a self-service
no
instruction
training
manual
seminar
representative
to
to attend,
to help guide
read
no
product.
There
beforehand,
customer
is
no
service
the user through
the
site. There
is only
with
her
only
the user, facing
wits
and
the site
alone
expe-rience
personal
to
guide her.
Faced with a wide array
of choices, the user is
left to her own devices
to determine
which fea-
tures of a site will meet
her needs.
THE ELEMENTS
OF USER EXPERIENCE
11
It’s
bad
position
own.
enough
of
The
fact
acknowledge
matters
importance
having
that
she’s
been
to figure
that
out
most
her
helpless
worse.
Despite
stuck
the
sites
condition
the
of user experience
in
site
the
on her
don’t
even
only
makes
vital
strategic
to the suc-cess of a
Web
site,
what
the
people
priority
simple
want
for most
matter
and
of
need
understanding
has
of the history
been
a
low
of the medium.
If user experience
is such a vital part of any Web
site,
so
why
is
development
it
often
process?
neglected
Many
Web
in
sites
the
are built
with the idea that being first to market
is the key
to success. In the earliest
Web,
like Yahoo! built
struggled
to
of
to overcome. Established
set
up
perceived
cases,
days
Web
sites,
companies
whether
the
companies
determined
as falling behind
deployed
sites
a
the site actually
not
raced
to
be
the times. But in most
considered
site
the
leads that later competitors
early
merely
great
having
accomplishment;
worked for people was, at
best, an afterthought.
To
gain
market
competitors
and
from
often
functionality
customers
the
share
(and
add
in
maybe
competition).
against
more
hopes
these
and
of
stealing
This
first-movers,
more
draw-ing
a
race
few
to
content
in
new
customers
cram
more
features
Web;
into
products
from
featuritis
Having
is endemic
more
the
complexity
in.
very
And
attention
that
to
use,
out
comes
with
become
and
many
to what
an
increas-
unappealing
organizations
users
to be
advantage.
first-timers they are supposed
still,
the
phones,
categories.
turns
set, sites
hard
to
mobile
of competitive
feature
unwieldy,
to the
unique
to
however,
source
added
ever-expanding
ingly
hardly
to many product
features,
only a temporary
With
is
wristwatches
to draw
pay
little
like, find valuable,
or are
really able to use.
12
CHAPTER
EXPERIENCE
AND WHY IT MATTERS
More
more
and
businesses
have
recognize
that provid-ing a quality
is
essential,
an
advantage—not
of products
forms
1 USER
now
come
to
user experience
sustainable
competi-tive
just for Web sites, but for all kinds
and services.
the customer’s
It is user experience
impres-sion
of
a
that
company’s
offerings;
it is user experience
company
from
experience
customer
its
that
and
determines
whether
All
you
you
don’t
provide
company.
It
monopoly
they
have
anything
is
information
might
to
bookstore
seem
get
in
does.
on
that
goals
of
want
it,
You
don’t
that
an
you can’t
mainly
site
effectively
put
it
afford
to
of what Web pros call
is
to
have
online
of your site.
information—then
as
understand
a
people
way
information
presented
your
have
you.
enough
just
about
from
your
site.
you
same
Nevertheless,
is,
your
it
If your site consists
content—that
out
user
your
the
neglect the user experience
find
is
Is Good Business
sell
on that information—if
competition
main
it
will ever come back.
Good User Experience
Maybe
that differenti-ates a
competitors;
one
of
to
com-municate
as
possible.
out
there.
It
It’s
has
the
that
to
not
be
in a way that helps people absorb it and
it. Otherwise,
that
you
offer
the user might
the
service
or
not ever
product
they’re
to
looking
find
the
that
for. And
even
information,
conclusion
that
your
people
site
site
probably
is a Web-based
can use to accomplish
buying
airplane
tickets
is
to
draw
difficult
to
is as well.
application
certain
or
do manage
likely
they’re
if
work with, your company
Even if your
if they
that
tasks
(like
manag-ing
bank
accounts), effective communication is a key factor
THE ELEMENTS OF USER EXPERIENCE
13
success
of your product.
powerful
functionality
The world’s
most
falters and fails if users
can’t figure out how to make it work.
Simply
they
put, if your
won’t
experience
come
users
back.
with your
not
always
matter,
greater
effect
but
a bad experience,
they
Features
user
have
OK
go back to that
and
experience
customer
an
a better experience
site, they’ll
you.
on
If
site but
with your competitor’s
com-petitor,
have
loyalty.
functions
has
All
a
far
your
sophisticated
won’t
A
technology
bring
good
and
those customers
user
experience
brand
back
messaging
a second
will—and
time.
you don’t
get
much of a second chance to get it right.
Customer
loyalty
on the user
Businesses
know
site
can
pay
off.
in terms
or ROI.
of money:
For
dollar you spend, how many dollars of value
back?
does
that
out translates
have
terms.
shows
to be
All
that
return
expressed
you
your
But
need
money
is
in
a
going
measure
of return on investment
is
rate. Any time you want to encourage
your customers
relationship
something
the ROI.
into value for your company.
One common
conversion
That’s
not
monetary
measurement
their
way that focusing
your
on investment,
measured
on investment
a
of
the return
about
are you getting
strictly
the only
with an eye on the bot-tom line want to
ROI is usually
every
isn’t
expe-rience
to take
with
as complex
preferences
or
the next step
you—whether
as
as customizing
simple
as
in building
that
involves
the site
signing
up
to
to
receive
rate
an e-mail newsletter—there’s
you can measure.
per-centage
you
can
of users
measure
you convert
how
meeting your business
14
EXPERIENCE
Conversion
rate is a
common way of measuring the effectiveness
of a user experience.
By keeping
a conversion
of
what
to the next
level,
effectively
track
your
site
goals.
CHAPTER
AND WHY IT MATTERS
1 USER
is
3 subscription
sign-ups
÷
36 visitors
=
8.33% conversion rate
Conversion
rate becomes
even more
important
in
the case of com-merce sites. Far more people browse
a commerce
experience
casual
increase
site than buy from it. A
is
a
browsers
key
factor
into
active
in your conversion
i nto savin
in
quality
converting
buyers.
Even
a
tiny
rate can translate
into
g
THE ELEMENTS
OF USER EXPERIENCE
15
uncommon
for a change in conversion
small as one-tenth
revenue increase
user
these
of one percent
of ten percent
rate as
to result in a
or more.
On
to
any
give
site
you
conversion
food,
or
where
some
users
rate, whether
subscriptions
itself. Conversion
of the return
have
the
opportunity
money, you have a measurable
you’re
to the
sell-ing books,
content
of
the
rate can give you a better
on your user experience
cat
site
sense
investment
than simple sales figures. Sales can suf-fer if you’re
not successful
in getting
site. Conversion
the word
rate tracks
out about
how successful
your
you are
in getting those who visit to spend some money.
Even if your
ROI metric
the effect
any
less
site doesn’t
like conversion
of
user
readily
to an
rate, that doesn’t
mean
experience
significant.
your customers,
lend
Whether
your partners,
itself
on your business
they
are
used
is
by
or your employees,
Web sites can have all kinds of indirect
effects
on
the bottom line.
No one outside
your company
might
ever see the
site you run (as in the case of an internal
an intranet),
but the user experi-ence
huge difference.
tool or
still makes
a
Often, it can mean the differ-ence
between
a
project
organization
that
and
a
resource-consuming
Any
user
helping
make
of
This
the tools
the business
complete
done
that
in a
translates
work
as a whole. The
given
task,
saving
into
to
a
improve
help-ing
and
the
them
efficiency
the productivity
less
the
In keeping
is money,
directly
the
in two key forms:
Improving
you use improves
day.
for
becomes
aims
comes
faster
mistakes.
any
time
effort
basi-cally
people
fewer
value
that
nightmare.
experience
efficiency.
creates
project
time
more
with
your
saving
it takes
of
to
you can get
the
old
employees
your
notion
time
business
money.
16
EXPERIENCE
Efficiency
though.
tools
CHAPTER
1 USER
AND WHY IT MATTERS
doesn’t
People
are natural
and needlessly
only
like
and
affect
their
easy
jobs
the
more
bottom
line,
when
their
to use, not frustrating
complex. If that person is you, these
kinds of tools make the difference
home
satisfied
home
exhausted
if
you
right
are
at the end
coming
reasons—not
with your tools.)
Technology
products
that don’t work the way
people expect make
them feel stupid—
even if they ultimately
accomplish what they
set out to do.
of
and hating
home
because
between
the day
and
coming
coming
your job. (Or at least,
exhausted,
you’ve
it’s
for
the
been struggling
THE ELEMENTS
OF USER EXPERIENCE
17
If
that
these
person
kinds
of
productivity,
turn,
training
less
means
costs,
level of quality
employee
your
tools
employee,
increases
providing
not
only
but also their job satisfaction,
the employee
in
is
likely
you
plus
to seek
save
you
on
benefit
a new
their
making
job. This,
recruiting
and
from the higher
that a more dedicated,
experienced
brings to her work.
Minding Your Users
The
user
practice
The concept
Take
of
experiences
creating
is called
of user-centered
the user
into account
engaging,
user-centered
efficient
design.
design is very simple:
every
step of the way
as you develop
this
simple
your product.
concept,
The implications
however,
are
of
surprisingly
complex.
Everything
result
of
the
a
Realistically,
promise
But
a
those
you
here
expense
user
experiences
conscious
might
and
have
there
in
involved
compromises
don’t
elements,
perspectives,
biggest
is
reason
that
don’t
provide
they
won’t
users,
user
by
use
full
to fulfill
with
your
a
got
is
of
products)
a request
that
accident.
breaking
it
at
that
of your decisions.
your
should
matter
users.
If
positive
product.
a
solution.
you can ensure
to
or
and looking
experience
matters
them
all you’ve
warehouse
waiting
it
com-
time
ensures
happen
the
part.
a
the
better
process
you know all the ramifications
you
make
of
a
be
your
about the user experience,
it from several
to
to
creating
design
down into its com-ponent
The
on
because
user-centered
By thinking
should
decision
dusty
that
And
Web
you
experience,
without
server
somewhere,
will never
(or
idly
come.
For
to
the
users
provide
cohesive,
who
them
do
with
intuitive,
pleasurable—an
come,
an
and
experience
you
must
experience
maybe
in which
set
that
out
is
even
everything
works the way it should. No matter how the rest of
their day has gone.
chapter
2
Meet the
Elements
THE ELEMENTS
OF USER EXPERIENCE
19
The
user
ensuring
with
experience
that
your
conscious,
into
design
no aspect
product
explicit
account
every
process
of
is
the user’s
happens
intent.
without
This
possibility
all about
experience
of every
that
some
at
process.
ways
crafting
it
the
component
every
It
step
sounds
is.
But
user
of
the
like
by
a
we
the
the user’s
way
through
big
job,
and
in
breaking
the
job
of
experience
elements,
taking
action
user is likely to take and under-standing
expectations
your
means
can
down
better
into
its
understand
the task as a whole.
The Five Planes
Most
people,
purchased
at
one
a physical
time
product
or
over
another,
the
Web.
have
The
experience
You
go
pretty
to the
(maybe
by
browsing
card
is
much
site, you find
using
a
search
a catalog),
number
confirms
the
same every
the item
engine
you give the
and
your
that the product
you
or
site
address,
time :
want
maybe
your
and
by
credit
the
site
will be shipped to you.
20
CHAPTER
MEET
2
THE ELEMENTS
That
a
neat,
whole
large—about
tidy
set
experience
of
how
actually
decisions—some
the site looks,
results
from
small,
some
how
it behaves,
and what it allows you to do. These decisions
upon
each
other,
informing
and
build
influencing
all
aspects
of the user expe-rience. If we peel away the
layers
of
understand
that
experience,
we
how those decisions
can
begin
to
are made.
The Surface Plane
On the surface
you see a series of Web pages, made up of images
and text. Some
of these images
are things
you can click on, per-
forming some sort of function such as taking you to a shopping cart.
Some
of
these
images
are
just
illustrations,
such as a photograph
a product
for sale
of
or the logo
of
the
site itself.
The Skeleton Plane
Beneath
the skeleton
that surface
of the site: the placement
is
of
buttons, controls,
photos, and blocks of text. The skeleton is designed
to optimize
elements
for maximum
and
remember
the arrangement
of
these
effect
efficiency—so
that
you
the logo and can find that
shopping
cart
button
when
you
need
it.
The Structure
Plane
The skeleton is a concrete expression
of the more abstract structure
of the site. The skeleton might define
the placement
of the interface
elements
structure
would
on
define
our
checkout
page;
the
how
users got to that page and where
they
could go when they were finished
there.
define the arrangement
tional
browse categories
THE ELEMENTS
skeleton
might
elements
allowing
the users
to
of products;
the
those categories
The
of naviga-
structure
would
define
what
were.
OF USER EXPERIENCE
21
The Scope Plane
The structure
functions
functions
of
defines
the
site
the way
fit
are constitutes
commerce
in which the various
together.
Just
what
features
features
the scope of the site. For example,
and
and
some
sites offer a feature that enables
to save previously
used shipping
can be used again. Whether
feature—is
those
addresses
users
so they
that feature— or any
included on a site is a question of scope.
The Strategy
Plane
The scope is fundamentally
This strategy
incorporates
determined
not only
by the strategy
what
the people
of the site.
running
the
site want to get out of it but what the users want to get out of the
site as well. In the case of our store example,
some of the strategic
objectives
Users want to buy products,
them. Other objectives—such
advertis-ing or content
in our business
are pretty
obvious:
and we want to sell
as the role that
produced
by our users plays
model, for example—might
not be
so easy to articulate.
Building from Bottom to Top
These five planes—strategy,
skeleton, and surface—
framework
problems
On
concrete.
concerned
product,
provide
a conceptual
for talking about user experience
and the tools we use to solve them.
each
become
scope, structure,
a
plane,
the
issues
little
less
abstract
On
the
with
or service
lowest
the
final
at all—we
we
must
and
plane,
shape
a
deal
little
we
of
are
the
with
more
not
site,
only care about how
the site will fit into our strategy
needs
of our users). On the highest
only concerned
the appearance
decisions
specific
(while meeting
with the most
plane, we are
concrete
details
we have
THE ELEMENTS
of
of the product. Plane by plane, the
to make
become
a little
more
and involve finer levels of detail.
22
the
CHAPTER
2
MEET
Concrete
Abstract
Each
So,
plane
the
is dependent
surface
depends
on the planes
on the
below
skeleton,
it.
which
depends
on the structure,
scope,
which
choices
we
and
below,
and
costs
team
depends
make
tries
to
does
doesn’t
derail,
deadlines
decisions
are
the
above
missed,
components
that
launch, users often hate it, because
a
means
satisfying
that
each
we
plane
make
experience.
decisions
plane will have a sort of “ripple
on
those
the development
as
together
up the chain. Conversely,
us
with
on the
When
fit. Even worse, when the product
deliver
dependence
align
to skyrocket
piece
don’t naturally
finally
don’t
projects
begin
which depends
on the strategy.
are
about
This
on the strategy
effect”
the choices
all the way
available
constrained
issues
it
on
by
the
to
the
planes
below it.
THE ELEMENTS
OF USER EXPERIENCE
23
range of choices available on the next plane
The choices you make
on each plane affect
the choices available
to
you on the next plane
above it.
the option you chose
range of possible choices
This ripple effect
means that choosing an
“out of bounds” option
on an upper plane
will require rethinking
decisions on lower
planes.
24
THE ELEMENTS
CHAPTER
2
MEET
That
does
decision
not
about
before
the
lower
plane
above
Dependencies
decisions
run
we
of
competition
we
know
common
it
can
both
about
our
sense. These
with
forcing
made for the first
planes.
At
to
each
what
best practices,
users,
decisions
effect in both directions.
made
addressed.
sometimes
according
is doing, industry
be
every
be
directions,
planes
on lower
decisions
that
must
(or an evaluation
issues
make
however,
plane
in
made on upper
a reevaluation
time!)
mean,
a
and
plain
level,
the
what
old
can have a ripple
If
you
to
be
consider
set
decisions
in
on
certainly
your
decisions
stone
before
higher
planes,
be throwing
possibly
the
suc-cess
on
you
you
your project
of
lower
take
your
planes
on
will
your
almost
schedule—and
final
product—into
jeopardy.
Instead,
work
you
on any
lower
should
planes
consideration
plan
plane cannot
has
here
your
project
so
finish
before
work
finished.
is to not
The
build
that
on
impor-tant
the roof
of the
house before you know the shape of its foundation.
THE ELEMENTS
OF USER EXPERIENCE
25
A Basic Duality
Of course, there are more than just five elements
user experience,
and as with any specialized
this one has evolved
someone
a vocabulary
encountering
the
field
field,
all its own.
for
the
of
To
first
time,
user
experience
can
appear
to
complicated
business.
All these seemingly
terms
thrown
around:
are
information
What
design,
do they
mean?
more meaningless
To
further
the
same
might
another
And
Anything?
industry
complicate
terms
use
in different
knows
as
the
When
the
they
link
Berners-Lee,
as
a
way
physics
over
potential
findings.
to
be
ways.
will
One
to refer
use
person
to
what
architecture.”
between
“interface
design? ” Is there one?
it
create
documents,
and
other
documents.
Tim
them
to
inventor
of
researchers
world,
people
could
community,
the
other’s
the
for
just
started,
People
could
Or are they
design”
difference
Web
information.
design,
architecture.
“information
design” and “interaction
a
buzzwords?
matters,
“information
what’s
interaction
information
be
identical
who
the
in
all
Web,
the
about
created
it
high-energy
were
spread
and
refer
to
knew
the
Web
had
the
more
than
but
few
to
share
He
much
was
that,
out
all
each
others
really
understood
how
great
its
potential
was.
People
originally
publishing
seized
medium,
but
and
new
features
were
and
Web
servers
alike,
capabilities.
functional
catch
on
developed
that
in
the
the
After
Web
as
to
Web
took
the
Web
sites
but
new
browsers
on
new
began
community,
and robust
Web
a
advanced
Web
Internet
complex
enable
the
technology
added
larger
a more
would
on
as
it
feature
set
only
to
not
to
to
distribute
information
manipulate
it as well. With this, the Web became
26
collect
and
CHAPTER
2
MEET THE ELEMENTS
interactive,
responding
to the input of users in
ways that built upon and sometimes
traditional
desktop applications.
With
advent
the
of
commercial
Web, this applica-tion functionality
range
of
uses,
such
as
moved beyond
interests
on the
found
a wide
electronic
commerce,
social
media,
and
others. Meanwhile,
as
a
publishing
newspaper
wave
of
and
transition
that
as
from
When
the
started
to
languages.
and
turn,
user
group
in terms
saw
sites
were
rooted
of
information
dynamic,
evolving.
community
prob-lem
shoes.)
the
traditional
from
worlds.
common
problem-solving
tradi-tional
worlds
information
science.
of
group
distribution
and applied
saw
(These,
practices
from cars
the Web
and retrieval,
approaches
publishing,
an
applied
software
The other
as
and
all kinds of products,
of information
on
the
spoke two different
every
in
being
made
to
problem,
approaches
the
advance
experience
mainframe
applied to creating
to running
to
collections
its members
design
problem-solving
desktop
“e-zines”
sites that were constantly
Web
One
of
infrequently
form,
application
and
kinds
countless
augmenting
continued
static
changed
database-driven
in
all
among
to flourish
with
sites
blogs
Technol-ogy
fronts
services,
medium,
magazine
Web-only
published.
both
financial
the Web continued
from the
media,
and
This
became
progress
could
not
waters
most
quite
could
even
were
made
agree
resources—a
muddied
could
functional
the
The
that
the
fact
categorized
or
seemed
qualities
little
terminol-ogy.
not be neatly
huge number
Very
community
by
applica-tions
hybrid, incorporating
THE ELEMENTS
block.
when
on basic
further
Web sites
either
a stumbling
be
as
information
of
to be a sort
from each world.
OF USER EXPERIENCE
27
To
address
the
Web,
this
let’s
middle.
On
specific
to
the
the
functionality.
specific
basic
split
left,
Web
duality
our
we’ll
as
in
five
put
a
the
planes
nature
down
those
platform
of
the
ele-ments
for
On the right, we’ll put the elements
to the Web as an information
product as functionality
ctionality
medium.
product as information
s
u
r
f
a
c
e
s
k
e
l
e
t
o
n
s
t
r
u
c
t
u
r
e
s
c
o
p
e
s
t
r
a
t
e
g
y
Concrete
Abstract
28
CHAPTER
2
MEET
THE ELEMENTS
On
the
functionality
concerned
process
and
side,
tasks—
with
how
the
people
think
them. Here, we consider
set
of
tools
that
we
steps
are
about
the product
the user
employs
mainly
involved
in a
com-pleting
as a tool or
to accomplish
one or more tasks.
On
the
opposite
information
to
our
users.
experience
absorb,
and
side,
our
the product
Creating
is
about
make
concern
is
what
offers and what it means
an
information-rich
enabling
sense
of
people
the
to
user
find,
information
we
provide.
The Elements
Now
of User Experience
we can map
of terms
that
whole
confusing
into the model. By breaking
down into its component
array
each plane
elements, we’ll be able to
take a closer look at how all the pieces fit
together
in the course of designing
experience.
the whole user
The Strategy Plane
The
same
both
strategic
concerns
come
functionality- oriented
information-oriented
the goals
come
specifically
organization—
from
will use our site. We must
audience
User
resources.
for the site that
into
play
products
needs
are
from outside
our
the
people
under-stand
wants from us and how
for
and
who
what
our
that fits in with
other goals they have.
Balanced
objectives
against
for
the
can be business
over
the Web
(“Inform
voters
election”).
user
goals
this
needs
are
site. These product
(“Make
year”)
about
In Chapter
$1 million
or other
kinds
the candidates
3 we’ll
our
own
objectives
in sales
of
goals
in the next
go into more detail
about these elements.
THE ELEMENTS
OF USER EXPERIENCE
product as functionality
ctionality
product as information
s
f
ur
e
el
sk
st
ac
e
Concrete
Sensory
Design
to
n
Interface
Design Navigation
n
Design
D
Information
ation
Design
r
t
uc
ur
e
Interaction
tion
Design
Information
ati
Architecture
re
pe
onal
Content
en
c o Functional
s Specifications
onsRequirements
nt
st
t
ra
eg
y
User
Needs
Ne
Product
t
Objectives
Obj
Abstract
The Scope Plane
On the
functionality
side,
the
strategy
is translated
29
into
scope
through
the
creation
specifications
“feature
side,
set”
: a
of
scope
the product.
takes
requirements:
elements
the
functional
of
detailed
description
form
a description
of
the
On the information
of
content
of the various content
that will be required. Chapter 4 will cover
the scope elements.
30
CHAPTER
MEET
2
THE ELEMENTS
The Structure
The
scope
Plane
is
given
functionality
side
in which
define
response
we
to the
the structure
how
user.
is the
the arrangement
structure
of
the
For
system
information
information
content
human understanding.
on
interaction
through
You’ll
the
design,
behaves
in
resources,
architecture :
ele-ments
to facilitate
find more details on
these in Chapter 5.
The Skeleton Plane
The
skeleton
plane
components.
On
information
in
a
understanding.
design,
enable
the
users
to interact
system.
resource
screen
is
The
its
elements
through
the
of
facilitates
inter-face
includes
interface
elements
to
with the functionality
interface
for
navigation
that
three
address
presenta-tion
that
also
arranging
into
must
functionality-oriented
skeleton
or
we
the
way
For
the
down
sides,
design:
information
products,
breaks
both
the
of
information
design:
allow
information
an
the
user
set
to
architecture.
of
move
There’s
more about the skeleton plane in Chapter 6.
The Surface Plane
Finally,
whether
we
we
have
are
the
surface.
dealing
functionality-oriented
resource,
our
concern
sensory
experience
Regardless
with
product
here
created
of
a
or an information
is
the
by
same:
the
the
finished
product.
It’s trickier
than it sounds;
you can find
out all about it in Chapter 7.
THE ELEMENTS
OF USER EXPERIENCE
31
Using the Elements
This
model,
planes,
experience
between
problems.
these
Frequently,
a
another.
user
will
have
to
be
to straddle
are
a
so
and
about
user
change
reworked?
areas
the borders
element
to the
Some
visuals
drawn.
whether
is
best
instead
do
the
navigation
design
prob-lems
require
at once, and some
identified
services
clearly
problem
to one
the underlying
or
boxes
to identify
experience
in several
products
neat
to think
not
attention
Can
or
attention
into
way
In reality, of course, the lines
areas
through
trick,
Few
up
it can be difficult
particular
solved
of
divided
is a convenient
seem
in this model.
fall exclusively
on one
side of this model or the other. Within each plane,
the
elements
must
work
together
to
accomplish
that
plane’s
decisions
other
goals.
you
make
elements
example,
Separating
about
product.
All the elements
function
this
skeleton— even
if
on every
case,
they
organizations
experience
with
or interface
These
many
the
all
For
design,
plane
the
defining
have
larger
the
a
user
product’s
perform
that
issues
delegate
responsibility
often
function
complicates
further. In some organizations,
people
from
in
ways.
way
user
of
difficult.
navigation
in determining
experience—in
The
element
is very
design,
effects
design jointly define the skeleton of a
common
different
one
on the plane
information
and interface
the
people
job
titles
designer.
gener-ally
of the elements
specialty
like
have
by
architect
be confused
of user
indicated
you will encounter
information
Don’t
for
matters
expertise
by
this.
spanning
experi-ence, not just
their
title.
It’s
not
necessary
to have a member
specialist
in each of these areas; instead, you only
have to ensure that someone
their time thinking
of your team who is a
spends at least
part of
about each of these issues.
32
CHAPTER
MEET
2
THE ELEMENTS
A couple
of additional
final user experi-ence
factors
go into shaping
that you won’t
the
find covered
in detail here. The first of these is content. The old
saying
(well, old in Web years)
king”
on
single
most
the
Web.
This
impor-tant
offer to their users
is
is that “content
absolutely
thing
most
is content
is
true—the
Web
sites
can
that those users will
find valuable.
Users
don’t
visit
of navigation.
Web
sites
The content
(or that you have resources
to experience
that is available
want
to you
to obtain and manage)
will play a huge role in shaping
case of an online
the joy
your site. In the
store, we might
decide
that we
the users to be able to see cover images of all
the books we sell. If we can get them, will we have
a way
to catalog
keep them
photos
of
them,
up to date?
the
book
keep
And
cov-ers
track
what
at
all?
of
them,
if we can’t
These
and
get
content
questions
are
experience
of the site.
essential
Second,
technology
content
in cre-ating
In many
can
cases,
provide
technology.
tools
to
fairly
primitive
has
enabled
experience
navigation
way
the
users
Web
user
days
sites
more
and
approaches,
systems
move
changing,
has to adapt
the
by
Web,
databases
As
the
were
the technology
databases
elements
more
have
become
sophisticated
such
the
as
user
dynamic
in response
site.
to the
Technology
is
and the field of user experience
of
to it. Nevertheless,
user
experience
same.
33
you
determined
of
to
that change
through
always
THE ELEMENTS
as
experience.
of the experience
largely
limited.
however,
user
used to drive Web sites. This in turn
always
mental
is
early
and
advanced,
more widely
has
users
ultimate
as important
successful
the nature
connect
the
can be just
a
your
In
to
OF USER EXPERIENCE
the fundaremain
the
Although
I developed
the Elements
model
course of my work on Web sites, others
in the
have since
applied it to a wide range of prod-ucts and services.
If you work
applies
to
on the Web, everything
you.
technology
If
you
work
products, you’ll
familiar
considerations.
products
or services
on
in this book
other
see strong
Even
if
you
that have nothing
technol-ogy, you can map
these
kinds
of
parallels
to
work
on
to do with
concepts
to your
own processes.
The
rest
of
plane
by
closer
look
commonly
the
this
plane,
at
way, we’ll
see
what
the
looks
in greater
some
used
play in products
book
to
of
the
address
see how
on
these
elements,
We’ll
take
tools
and
each
element.
these
that aren’t
elements
at
detail.
elements
Web sites
each
a
tech-niques
Along
come
into
at all. We’ll
plane
have
in
common, what makes each one different,
and how
they
the total
affect
each other
to help
us create
user experience.
The foundation
a clearly
of a successful
articulated
we want the product
strategy.
user experience
Knowing
to accomplish
is
both what
for our organi-
zation and what we want it to accomplish
for our
users informs the decisions we have to make about
every aspect
ing these
it looks.
of the user experience.
simple
questions
But answer-
can be trickier
than
Surface
Skeleton
Structure
Scope
Strategy
Sensory
Design
InterfaceDesign Navigation
n
Design
D
InformationDesign
Interaction
Design
Functional
Information
ati
Architecture
re
Content
en
Specifications Requirements
nt
User
Needs
Product
Objectives
36
STRATEGY
PLANE
CHAPTER
3
THE
Defining the Strategy
The most common
site
is
either.
not
Web
the first
was
reason for the failure
tech-nology.
line
sites
most
of code
pushed,
or
installed—nobody
It’s
not
often
was
the
of a Web
experience
fail because—before
written,
first
bothered
user
the first
server
to answer
pixel
was
two
very
basic questions:
.What do we want to get out of this product?
.What do our users want to get out of it?
product as functionality
ctionality
product as
information
scope
r
st
at
y
eg
User
Needs
ProductObjectives
By
answering
product
organization.
needs,
The
objectives
outside.
needs
the first
question,
objec-tives
coming
second
product
form the strat-egy
every
decision
user
experience.
experience
explicit
projects
do
product
from
and
user
the foundation
as
we design
amazingly,
not
the
user
objectives
process
Yet,
the
inside
addresses
on the
plane,
in our
begin
many
with
of the underlying
understanding
THE ELEMENTS
question
imposed
Together,
we describe
from
for
the
user
a
clear,
strategy.
OF USER EXPERIENCE
37
The
key
word
we
can
articulate
exactly
precisely
goals.
what
here
is
explicit.
exactly
others
we can adjust
want
The
what
from
our choices
more
we
clearly
want,
and
the
more
to meet
these
us,
Product Objectives
The
first
part
examining
service.
making
our
Too often, product
an unspoken
unspoken,
When
that
different
about
explicit
for the product
among
the
often
product
is
or
exist only as
those building
understanding
people
what
strategy
objectives
understanding
the product.
ideas
of
our own objectives
remains
have
is
different
sup-posed
to
accomplish.
Business Goals
People
or
commonly
business
objectives.
objectives
narrow
use
drivers
I’m
too
terms
like
describe
going
because
and
to
to
use
that
terms
broad:
Too
narrow
concern
specific
here
has
do),
really
terms possible
the
and
is
to
product
both
because
too
not
goal (after all, not
same
too
are
goals
strategic
term
other
organization
businesses
the
these
every internal goal is a business
every
business
internal
kinds
broad
identify
what we expect
of
because
in
the
goals
our
most
the product
itself
to accomplish,
business
Most
people
start
their
products
purposes:
of the rest
describing
general
of
our
objectives
for
terms.
fundamentally
to make the company
company
exactly
out
in very
of Web sites, they
the
regardless
activities.
how
money.
In the case
serve one of two
money
Sometimes
it’s
these sites are supposed
or to save
both.
But
to do that is
not always clear.
38
STRATEGY
CHAPTER
don’t adequately
For
objectives
THE
PLANE
On the other hand, objectives
issue.
3
describe
example,
is “to provide
com-munications
tool”
that are too specific
the strategic
stating
that
concerns
one
of
users with a real-time
doesn’t
explain
how
at
your
text
such a
tool
helps
advance
organization,
or
the
how
objectives
it helps
meet
of
the
your
needs
of
your users.
In trying
specific
jumping
don’t
a
to strike
a balance
and being
ahead
to
identify
yet fully understand
suc-cessful
user
sure that every
firm
defining
the
the
of
we
its
solutions
to
get
we
when
is
for
we
To create
have
make
too
to avoid
to
make
rooted
in a
Clearly
consequences.
conditions
path
being
we want
the problems.
experience,
decision
understanding
defining
between
too general,
success—without
there—assures
that
we
don’t get ahead of ourselves.
Brand Identity
One
essential
objectives
most
of
things
consideration
for any product
us
like
see
the
logos,
word
color
the
revisit
surface
formulating
is brand identity.
branding,
palettes,
While these visual aspects
(we’ll
in
and
we
When
think
of
typography.
of brand are important
them in more detail when
plane
the
in Chapter
7),
we get
the concept
to
of
brand
extends
identity—a
emotional
impression
You
the
about
by
the
conceptual
minds
your
choose
of
or as
your
choose
or
it’s
users,
is
an
inevitably
with your product.
a
that
impression
result
you have made in designing
organizations
Brand
because
organization
whether
accident
visual.
associations
important
by their interactions
happens
Most
In
must
choices
beyond
of
reactions—is
inescapable.
created
far
set
to exert
of
conscious
your product.
some
control
over the
THE ELEMENTS
OF USER EXPERIENCE
39
of
their
brand,
communicating
perception
brand
identity
product
objective.
Branding
which
is a very
isn’t
is
why
common
just
for
commercial
with
a
entities
government
agencies
impression
codifying
as
explicit
chances
nonprofit
to
through
the specific
an
either— every
site, from
Web
organization
foundations
individuals,
user
to
creates
an
experience.
qualities
objective,
of
you
that
By
impression
increase
your
that it will be a positive impression.
Success Metrics
Races have finish lines. An important
understanding
how
your objectives
you will know
when
part of
is understanding
you have reached
them.
These
as success
are known
metrics:
indicators
we can track after the product
has been launched
to see
our own objectives
and
whether
our
metrics
it
users’
not
only
is
meeting
needs.
Defining
influences
the course of the project; achieving
concrete
experience
skeptical
evidence
efforts
audience
of
if
you
when
good
decisions
the
them
value
find
seeking
success
made
yourself
budget
over
provides
of
user
facing
a
approval
for your next user experience
Sometimes
product
does
each
these
itself
visit?
determine
users
metrics
and how
the average
user
If
spend
you
to feel comfortable
and explore
are
related
it is used. How
(Analytics
this.)
project.
on your
tools
want
can
to
site during
help
what you have to offer, you’ll
to decrease
out,
want to
functionality,
access
you may
want
the time per visit.
40
STRATEGY
and
your
On the other hand,
if you want to provide quick, get-in-get-out
information
you
to encourage
with the site, hang
see the time per visit increase.
to
the
much time
PLANE
CHAPTER
3
THE
Success metrics are
concrete
indicators
how effectively
experience
10
of
9
the user
is meeting
8
strategic goals. In this
example, measuring
target
7
the number of visits
per registered
6
user per
month indicates how
5
valuable the site is to
its core audience.
4
3
2
launch of
1
redesigned
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
visits per month (registered
For
sites
that
depend
impressions—the
is
served
metric.
your
to
But
a
Adding
several
between
the
want
user—is
you
objectives
on
number
have
and
an
to
the
layers
home
will definitely
page
be
careful
of
Dec
users only)
revenue,
of
important
to
balance
your
navigational
and
Nov
each day an ad
incred-ibly
needs
increase
Oct
advertising
of times
site
the
content
users.
pages
users
your ad impressions,
user needs? Probably
but is it serving
the
long
run,
frustrated
and
impressions
it
will
show:
decide
not
will drop
will probably
As
to
from
end up lower
not. And in
your
come
that
users
back,
initial
than they
get
your
high
were
and
when
you started.
THE ELEMENTS
OF USER EXPERIENCE
41
Not
all
success
directly
from
indirect
effects
provides
lines
of
with
calls
should
pro-vide
can
your
solutions
encounter
phone
metrics
cut
site.
the
product,
access
on
the
the
If
and
it
the
your
site
people
number
cus-tomer
An effective
time
derived
problems
your
to tools
be
measure
well.
common
into
to
can
as
to
go down.
down
You
site
your
coming
ready
have
intranet
resources
takes
of
support
for
can
that
your
salespeople
translates
For
to
close
directly
success
experience
a
metrics
to
meaningfully
of user behavior
turn,
drive
user
launches
and
transactions
daily
jumps
relationship
revenue
40 percent,
between
that
cause
happen
from
from
a
user
to see the
effect.
longer
to identify
the
online
it’s easy
and
over
time, it can be difficult
stem
that can be shaped
Of course, when a rede-sign
by our design choices.
changes
in
revenue.
deci-sions, those metrics must be clearly
tied to aspects
changes
sale—which,
into increased
But
for
period
whether
experience
of
those
or from
other factors.
For example,
do much
site—you’ll
your
the user experience
by
itself
have
marketing
experience
whether
has
those
to
to
rely
efforts
a
bring
upon
for
whole
visitors
lot
you’re
meeting
Sometimes
those
user
users
users
of
But
the
influence
back.
don’t
your
but
come
or
user
on
Measuring
way to assess
needs,
to
word-of-mouth
that.
come
return visits can be a great
of your site can’t
new
whether
be
careful:
back
because
your
competitor
launched
campaign
or
some
press.
bad
because
Any
can be misleading;
look
at
what’s
a
your
metric
gigantic
advertising
company
viewed
just
got
in isolation
be sure to take a step back and
going
on beyond
the Web
site
to
make sure you’re getting the whole story.
42
STRATEGY
CHAPTER
THE
3
PLANE
User Needs
It can be easy to fall into the trap of thinking
we are
designing
idealized
aren’t
our
product
user—someone
designing
or service
exactly
for ourselves;
like
we’re
that
for one
us. But
we
designing
for
other people, and if those other people are going to
like
and
understand
use
what
we
create,
who they are and what
we
need
to
they need. By
spending
time
researching
those
break out of our own limited
needs,
we
perspective
can
and see
the site from the point of view of the users.
Identifying
users
user
needs
is
can be quite diverse.
a Web site for use inside
may have to address
are
creating
consumer
a
complicated
because
Even if we’re
creating
our orga-nization, we still
a wide range of needs. If we
mobile
audience,
app
intended
possibilities
the
for
a
increase
exponentially.
To get
to the bottom
define
just
whom
we’re
research
trying
with
questions
research
our
who
and
can
of those
users
needs,
are.
to
reach,
them—in
other
observe
help
us
we
we
can
words,
their
define
we have
Once
conduct
ask
behavior.
and
to
know
them
That
prioritize
what
people need when they use our product.
User Segmentation
We
into
can
break
this
manageable
mass
chunks
of
user
needs
through
down
user
segmentation.
smaller
groups
with certain
are nearly
We
(or
divide
segments)
key characteristics
as many
ways
our
audience
consisting
of
in common.
to seg-ment
user
into
users
There
groups
as there are types of users, but here are a couple of
the most common approaches.
THE ELEMENTS
43
OF USER EXPERIENCE
User segmentation
helps us understand
user needs better by
dividing the entire
audience
into smaller
groups of people with
shared needs.
Market
researchers
segments
based
age, education
on.
These
commonly
on demographic
audience
criteria :gender,
level, marital status, income, and so
demographic
general (men
create
profiles
18 – 49) or very
can
specific
be
quite
(unmarried,
college-educated
women
25–34
making
over
$50,000 a year).
44
STRATEGY
CHAPTER
PLANE
Demographics
look
at
describe
users
aren’t
your
the
the
about
matter
and
that
your
about
the
site
in
particular.
your
often
correlate
People
in
income
level
identical
But
in
people
many
have
seeing and inter-acting
of
everybody
That’s
why
you
can
profiles
or
location,
attitudes.
you
world
demographics:
and
way
perceptions
the
of
Psychographics
only
Psychographic
users.
attitudes
have
subject
THE
3
the
same
often
cases,
very
strongly
age
have
with
group,
similar
demographi- cally
different
ways
of
with the world. (Just think
went
uncovering
to
the
high
school
with.)
psychographics
of
your users can give you insights
you can’t get from
demographics.
When
developing
product,
a
attitudes
to consider:
the
and
Web
Web
another
there’s
site
or
very
the users’
technology
any
technology
important
atti-tudes
itself.
How
set
of
toward
much
time
do your users spend using the Web every week? Is
technology
working
always
do
a part of their daily lives? Do they like
with
have
only
they
Technophobes
in very
technology
the
In
products?
and
upgrade
greatest
when
Do
ways,
them.
and
they
our
Answers
or
have
to?
Web sites
designs
to
they
products,
and power users approach
different
accommodate
these
latest
need
questions
to
like
can help us do just that.
addition
familiarity
need
to
know
about
understanding
comfort
understand
cookware
around
to
and
what
the subject
to
people
a kitchen
must
our
users’
level with technology,
and
matter
just
how
much
we
they
of our site. Selling
learning
their
way
be handled very differently
from
selling
stock-trading
with
the
approach
to
professional
application
stock
differences
in
one
for
THE ELEMENTS
will
require
seasoned
experience
the basis for segmenting
Similarly,
by those
market
from
cooks.
used
or
a
unfamiliar
a
different
investors . These
expertise
can
form
our audience.
OF USER EXPERIENCE
45
The
way
on
their
people
information
applying
use
social
needs
for
the student
information
or
college
of
the
are
parents
different
herself. Identifying
of your product’s
you’ve
user
groups,
depends
role.
of
a
from
The
student
those
of
the different
roles
users can help you separate
them
and analyze their different
After
often
professional
conducted
you
needs.
some
might
research
need
to
on
revise
your
the
segments
you are
you’re
college-educated
needs
the
working
with. For exam-ple,
researching
women, you might
of the 30 –34-year-olds
25–29
enough,
age
groups,
rather
started
with.
group
seems
maybe
you
segments
user
group.
you might
needs.
the
other
You
difference
25–34
hand,
similar
to
combine
segments
that
the
from those of
is
great
to treat these as separate
is just a means
different
find
differ
the single
the
pretty
can
If
want
than
On
if
25–34-year-old,
the
them.
group
if
the
you
18 –24
25–34
group,
Creating
user
to the end of uncovering
really
only
need
as
have
different
you
as
many
sets
of
user needs.
There’s
another
segments:
have
will
Not
different
be
of
such
a
the
would
application
sequence
needs,
in direct
exam-ple
novices
important
reason
to
only will different
but
Take
stock-trading
probably
that
sometimes
opposition.
broke
be
the
create
groups
of
those
the
user
users
needs
preceding
application.
best
served
process
down
The
by
an
into
a
of simple steps. For the experts, however,
sequence
would
be
a
hindrance.
The
experts
need
a
unified
interface
that
provides
rapid access to a wide range of functions.
Obviously,
we can’t
meet
both sets
of user
needs
with a single solu-tion. Our options at this point are
to focus
on one user
segment
to the exclusion
of
the other, or to provide two separate ways for users
46
STRATEGY
3
THE
PLANE
to approach
choose,
CHAPTER
the same
this
consequences
task. Whichever
stra-tegic
for every
decision
additional
course
will
we
have
choice we make
about the user experience.
Usability
and User Research
To understand
what our users need, we first have
to get a sense of who they are. The field of user
research is devoted to collecting the data needed to
develop that understanding.
Some
or
research
focus
tools—such
groups—
are
information
about
perceptions
of
as surveys,
best
the
your
suited
general
users.
interviews,
for
gathering
attitudes
Other
tools—such
as user tests or field studies—are
appropriate
for
user behavior
Generally,
the
individual
understanding
and interaction
more
time
spe-cific
and
research
more
aspects
you
spend
user, the more detailed
with
time
necessarily
many
users
product
Market
focus
in
with
you won’t
the
study
each
that
user
be able to include
(if
only
because
as
the
or service has to launch eventually).
research
groups
information
most
spent
means
each
the information
you will get from the research study. However,
additional
of
with your product.
can
about
effective
methods
be valuable
your
when
like
surveys
sources
of
users . These methods
you
clearly
and
general
articulate
are
for
yourself
what information
you’re
trying
to get out
of them. Do you want
to find out what your users
are
use
doing
when
they
a
particular
fea-ture of
your product? Or maybe you already know that, but
you need to know
clearly
you
why
they’re
can describe
effectively
doing
it. The
more
what you want, the more
narrowly
and
questions
you ask to ensure
you
can
the
formulate
that you get the right
information.
THE ELEMENTS
OF USER EXPERIENCE
47
Contextual
methods
powerful
inquiry
that,
and
understanding
their
everyday
techniques
refers
to
col-lectively,
a
whole
form
comprehensive
your
lives
are derived
users
(hence
in
set
the
toolkit
the
the
for
context
name).
from the methods
of
most
of
These
used by
anthropologists
Applied
used
to
on a
to
examine,
tribe functions,
people
who
downside
cultures
scale,
for
the
example,
buy
aircraft
parts
is that contextual
the resources,
and
societies.
methods
how
a
nomadic
of
problem
your
inquiry
behavior
The only
can
be
requires
users,
study can
that
function.
inquiry
how
very
expen-sive. If you have
very
and your
understanding
contextual
and
same
can also be used to examine
time-consuming
user
study
smaller
can’t
a
reveal
be
a deep
full-blown
subtleties
discovered
of
through
other methods.
In
other
cases,
lightweight
not
to produce
research
contextual
and
the deep
behind
task
interaction
with
context
some
of
Sometimes
buying
(such
the
movie
as
inquiry
analysis
a
task
tickets)
learning
very
that
every
takes
user
place
is
focused
and sometimes
about
of
be
tend
a full
closely
is task analysis.
is
that
is
can
they
of a method
product
task
although
understanding
study. One example
related to contextual
idea
methods
inex-pensive,
international
The
user’s
in
the
performing.
(such
as
it’s broader
commerce
regula-tions).
examining
Task
the
accomplishing
be done
analysis
steps
precise
those
either
is a method
tasks.
through
users
This
of
closely
go through
in
examina-tion can
interviews
in which
you
get users to tell you stories about their experiences
or through direct observa-tion in the field, studying
the users in their natural habitat.
User
testing
employed
research.
is
form
the
of
most
commonly
user
User testing
is not about
testing
your
users; instead, it’s
about getting your users to test what you’ve
produced.
Sometimes
48
THE STRATEGY
user tests
usability
can
test
prototype
3
PLANE
work
preparation
CHAPTER
with a finished
for
a
redesign
or
product,
either
to
out
root
in
any
issues before launch. In other cases, users
a
work
in
progress
or
of the finished product.
even
a
rough
If you’ve
all,
done
you’ve
usability.
any
This
different
reading
prob-ably
come
word
about
Web
across
means
design
at
the
concept
of
different
things
to
people. Some people use it to refer to the
practice
of
testing
designs
users.
For
others,
it
specific
development
Every
approach
products
easier
with
means
representative
adopting
a
very
methodology.
to
usability
to use. Many
seeks
to
different
and lists of rules set out to codify
make
definitions
what constitutes
a usable Web site design. Some of them even agree
with
each
principle
other.
But
It’s the most universal
Tests
with
very
broad
surveys
clear
before
they
all
have
the
same
at their core: Users need usable products.
or
a
fully
or
operational
very
focus
user need of all.
narrow
groups,
it’s
sense
of
what
you
you
sit
down
with
mean, however,
Web
in
best
want
users.
that a user test
site
scope.
if
can
As
you have
to
be
with
a
investigate
That
doesn’t
has to be strictly
limited
to
assessing
complete a narrowly
also
investigate
example,
whether
a
Another
work
user
test
from
to user
mockups
rough
using
users
concrete
be
used
can
issues.
to
find
reinforce
testing
These can take a variety
on paper,
stripped-down
to
interface
prototypes
that
OF USER EXPERIENCE
stages
through
to gather
user
the design process.
input
of
designs,
create
49
way
or
“lo-fi”
product.
Larger-scale
lot of ex perienc e in the
at different
out
is to have users
of a finished
THE ELEMENTS
For
brand message.
sketches
“click-through”
illusion
successfully
task. User testing
to the design
the company’s
approach
less
could
with pro-totypes.
forms,
to
broader,
modifications
undermine
how
defined
all the
the
Sometimes
You
user tests
can
recruit
exercises
don’t
users
the
subject
infor-mation-oriented
method
group
used
to explore
information
of index
on it. The
a
variety
of
to
users
The
sorts
groups
the
or
Analyzing
site.
For
is
one
categorize
user
or
is given a
cards
users
they
into
categories
the results
several
how
information
your
sorting
of a piece or type of content
then
with
understand
how
elements.
the
natural.
conducted
of
card
cards, each of which has the name,
user
according
matter
sites,
descrip-tion, or image
most
the site at all.
perform
that can give you insights into how they
approach
stack
involve
to
that
of
card
can
think
help
about
piles
feel
sorts
us
the
our site provides.
Creating Personas
Collecting
all sorts of data about
incredibly
sight
of
the
You can
them
models
valu-able,
real
make
into
but
people
your
or user
behind
users
personas
profiles).
your users can be
sometimes
more
you
all the
real
(sometimes
A persona
by
can
lose
statistics.
turning
called
user
is a fictional
character
constructed
to represent
the needs
whole range of real users. By putting
name
user
on the disconnected
research
and
can help ensure
bits of data
segmentation
of a
a face and a
from your
work,
personas
that you keep the users
in mind
during the design process.
Let’s
look at an example.
designed
Suppose
our site is
to provide
information
for people who are starting
own businesses.
their
We
know from our research that our audience mostly
falls in the 30 – 45
age range. Our users tend to be fairly comfortable
with the Web and
technology
in general.
Some of them have a lot of experience
50
THE STRATEGY
business
in the
CHAPTER
PLANE
world; for others, this is their first
3
exposure
to all of the issues involved
in running
a
business.
In
this
case,
two personas.
42 years
She’s
it
might
the
married,
last
frustrated
couple
with working
The
second
married
persona
with
been a weekend
friends
furniture
of
years
as
Frank.
child.
vice
He’s
of Frank’s
were
37 years
Woodworking
for many
impressed
he made, so he’s been thinking
go into business
for him-self selling
not sure
have
if he’ll
a
become
of her own.
is
his
one Janet. She’s
firm. She’s
one
hobby
of
create
for other people, and now
she wants to build a company
and
to
and she has two kids.
at a large accounting
president
Some
appropriate
We’ll call the first
old, she’s
spent
be
to quit
his
old
has
years.
by
some
he could
his work. He’s
job as a school
bus driver in order to launch his new business.
Where
for
did all this
the
personas
most
information
part, we made
to be consistent
come
from?
it up. We want
Well,
our
with what we know about
the
users
details
from
of
our
our
research,
personas
used to breathe
are
but
the
fictional
specific
inventions,
life into these characters
who will
stand in for our real, live users.
Janet
and
Frank
needs
we’ll
have to keep in mind as we’re making
decisions
about
help
us
grab
a couple
represent
of
them
stock
more
and
a little
photos
with the information
These
around
decisions
profiles
the
“Would
Frank
react
to
that
work
it? ”
The
combine
be
printed
so that
and
those
personas
every step of the way.
OF USER EXPERIENCE
out
when
for Janet?
in mind
THE ELEMENTS
we’ll
Janet
about them we’ve put
can
office
and
user
needs,
to give
to make we can ask our-selves
other):
our users
identity,
of
of our site. To
their
photos
Frank
posted
range
the user experience
remember
together.
the
and
we
have
(and
each
How
help
us
would
keep
51
Personas
Janet
characters
are fictional
drawn from
user research who
“I don’t have time to sort through a lot of
information.
Janet is frustrated
with working in a corporate
and wants to start her own accounting
Age: 42
Occupation:
Technical profile: Fairly comfortable
Accounting
firm vice president
with technology;
laptop (about one year old) running Windows; 5 Mbit
Internet connection; 15-20 hours/week
Household
Internet use: 75% at home; news and information,
online
shopping
Favorite sites:
WSJ.com
Salon.com
during user experience
environment
development.
practice.
Family: Married, two children
income: $180,000/year
serve as example cases
I need quick answers.”
Travelocity.com
Frank
“This stuff is all new to me. Iwant a site
that will explain everything.”
Frank is interested in learning how he can turn his
hobby of making furniture into a business.
Dell
Age: 37
Technical profile: Somewhat
Occupation: School bus driver
Apple iMac (about two years old); DSL Internet
Family: Married, one child
8-10 hours/week
Household income: $60,000/year
Internet
uncomfortable
with technology;
connection;
online
use: 100% at home; entertainment,
shopping
Favorite sites:
ESPN.com
moviefone.com
eBay.com
52
THE STRATEGY
CHAPTER
3
PLANE
Team Roles and Process
Strategic
user
fact
issues
experience
(or
the
cracks.
these
tends
these
of
objectives
Consulting
issues—but
be
process.
because
strategists
to
everyone
design
perhaps
formulating
employ
affect
because
expensive,
often
despite
falls
the
this
for
through
will
sometimes
projects
to manage
such
and
But
in
it), responsibility
firms
on client
involved
rar-efied expertise
because
strategists
aren’t directly
the product
responsible
for building
any piece of
itself, this line item is often one of the
first to be cut from a project budget.
Strategists
the
will
possible
and
on
to
to
get
user
the
who
organization
ultimate
strategic
in the
provide
customers
support
information,
(and
people
many
of
prod-uct
for
responsible
be
will
of
a
affected
of
the
Web
site
access
stakeholders
marketing
informal
parts
of
the
product.
For
designed
to
to
product
might
include
communications
as well as product
political
senior
by
on the formal decision-making
the
as
objectives
are
with
from
throughout
perspectives
are
direction
case
and cus-tomer service
It depends
as
Stakeholders
that
example,
representatives
many
questions
needs.
decision-makers
the
talk
organization
realities)
managers.
structure
of
the
organization.
One
group
strategy
responsible
is
often
the
for
neglected
rank
and
keeping
in
formulating
file—the
the
a
people
organization
running
on a day-to-day
often
have
what
doesn’t
inform
a
bet-ter
than
the
user
needs.
having
who
often
to
one
knows
these
what
managers
in
with
those
surprised
THE ELEMENTS
But
of
can
senior
customers
than
customers
and
when it comes to
what
better
people
works
do. They
ways
can’t— especially
No
trouble
talk
their
strategy
decision-makers
basis.
sense
the
every
are
people
day.
I am
at how
OF USER EXPERIENCE
53
infrequently
the product
customer
feedback
finds its way to
design and development
teams who
need it.
Product
defined
objectives
and
user
in a formal strategy
document.
This
document
needs
are
document
isn’t just
often
or vision
a
list
of
objectives—it
relationships
how
provides
those objectives
the
are
stakeholders,
users
themselves.
the strategic
needs
user
are
objectives
supported
These
issues
of
objectives
by
rank-and-file
report
context
and
vividly
in the
of
their
direct
documented
quotes
and
illustrate
project.
in
a
User
separate
are
certain
all your information
in one
(though
to having
the
and of
employees,
quotes
involved
sometimes
research
advantages
The
often
from
analysis
fit into the larger
organization.
analysis
an
the various
among
there
place).
Bigger
is not necessarily
documenting
include
quote
your
every
to
get
data
your
better
strategy.
point
idea
and
time or interest
of
supporting
important
it comes
don’t
every
across.
and to the point. Remember
will be exposed
when
You
have
it
and
understand
that they be impressed
concise
that many people who
to the doc-ument
material,
to
sup-porting
Keep
won’t
to wade through hundreds
that they
to
it’s
have
far
more
the strategy
by the volume
of
the
of pages
than
verbiage
you’ve
not
produced.
only
experience
to build
An effective
serves
as
a
development
support
strategy
touchstone
document
for
the
user
team; it can also be used
for the project
in other
parts
of
the organization.
The
worst
strategy
thing
limit your team’s
wasn’t
filed
created
away
handful
you
document
of
do
with
your
access
to it. The document
to be
somewhere
or shared
only
with a
senior
staff members—if
going
can
is
the effort
that went into it is
to pay off,
the
document
the
project.
has
to
be
used
actively
during
All
54
CHAPTER
THE STRATEGY
PLANE
participants—
designers,
managers—need
developers,
the strategy
document
3
project
to make
informed
decisions
documents
often
about
contain
their
work.
sensitive
Strategy
material,
but
organiza-tions can go too far and keep the strategy
away
from
undermines
Strategy
responsible
team,
which
their ability to realize it.
should
experience
your
the
be
the
beginning
design process,
strategy
must
be
of
but that
set
in
your
doesn’t
stone
user
mean
before
the
project can move forward. Although
trying to hit a
mov-ing target
can be a tremendous
waste of time
and resources
(not
internal
to mention
frustration)
, strategies
evolve
and
refined
system-atically,
continuing
be
source
user experience
a
refined.
of
huge
can
When
strategy
inspiration
source
and
revised
work
can
throughout
design process.
This page intentionally
left blank
of
should
and
be
a
the
chapter
4
The Scope
Plane
Functional Specifications
Content Requirements
and
With a clear sense
of what
we want
and what
our
users want, we can figure out how to satisfy all those
strategic
objectives.
you translate
Strategy
becomes
user needs and product
specific requirements
for what content
scope
objectives
when
into
and function-
ality the product
will offer to users.
Surface
Skeleton
Structure
Scope
Strategy
Sensory
Design
InterfaceDesign Navigation
n
Design
D
InformationDesign
Interaction
Design
Functional
Information
ati
Architecture
re
Content
en
Specifications Requirements
nt
User
Needs
Product
Objectives
58
SCOPE PLANE
CHAPTER
4
THE
Defining the Scope
We
do some
process,
things
like
because
jog-ging
or
there’s
practicing
value
scales
piano. We do other things because there’s
the product,
like making
a cheesecake
car. Defining
the scope
of your project
valuable
The
process
is
valuable
potential
product
while
hypothetical.
tackle
now
The product
the
We
talking
or fixing
whole
can
thing
identify
a
is both: a
product.
it forces
and rough
the
you
spots
is
what
to
in the
still
we
can
and what will have to wait until later.
is valuable
team a reference
throughout
because
conflicts
on
value in
process that results in a valuable
address
in the
because
it gives the entire
point for all the work to be done
the project and a com-mon language
about
that
work.
ments drives ambiguity
I once worked
Defining
your
for
require-
out of the design process.
on a Web
application
that seemed
to be in a state of perpetual
quite,
ready
things
to roll out
were
was
technol-ogy
anything
person
wrong
about
in
the
with
shaky,
our
beta: almost, but not
to actual
we
users,
whole
and
But
none
of
the
product
was
After
an
office
explains
unwillingness
all,
everything
this
it
was
a
seem
I was
company
at all with developing
The
to
lot
who
we
big
and
besides,
know
the
only
had
any
couldn’t
stumbling
define
get
block
requirements.
hassle
down when we all worked
anyway,
to
for the Web.
why
of
A lot of
approach—the
didn’t
experience
to launch.
users.
our
to
write
in the same
the product
manager
needed to focus his energy on coming up with new
features.
THE ELEMENTS
59
OF USER EXPERIENCE
The
result
was
ever-changing
stages
of
a
completeness.
body read or every
while
product
mishmash
inspired
another
playing
a constant
flow
was
no schedule,
for
in
an
various
article
some-
that came
with
the
along
product
consider-ation.
There
of
work
going
there
were
no milestones,
there was no end in sight. Because
the scope
was
new
thought
feature
was
that
features
Every
new
was
somebody
of
of the project,
how
on, but
there
and
no one knew
could anyone know
when we were finished?
There are two main reasons
to bother to define
requirements.
Reason
#1:
So
You
Know
What
You’re
Building
This
seems
surprise
kind
of
If you clearly articulate
out
obvious,
but
it
came
as
a
to the team building that Web application.
to
build,
project’s
goals
are
reached.
The
final
exactly what you’re
everyone
and
will
know
when
product
setting
what
they’ve
stops
being
the
been
an
amorphous
head,
everyone
top
picture
and
it
in
becomes
at every
executives
the
product
something
manager’s
concrete
level of the organization,
to
entry-level
that
from
engineers,
can
work with.
In
the
project
game
gets
absence
will
of
an
mouth,
slightly
assumes
of
clear
probably
turn
“Telephone”—each
impression
and
everyone’s
different.
someone
devel-opment
of
Or
the
requirements,
out
like
a
on the team
person
product
via
description
even
word
ends
worse,
SCOPE PLANE
of
up
everyone
else is managing
the design and
of some crucial aspect
of the product,
when in fact no one is.
60
your
schoolyard
CHAPTER
4
THE
Having
you
a
defined
to parcel
efficiently.
Seeing
enables
you
apparent.
entire
see
same
scope
mapped
that might
in
discussions,
the product
like
separate
group
a lot
of
should
be
Know
What
spec
content
them as requirements
that there’s
out
between
not otherwise
early
and
seemed
but defining
allows
for the work more
connections
example,
have
make it apparent
the
requirements
documentation
may
features,
that
the
to
For
the support
sheets
of
requirements
individual
be
set
out responsibility
might
overlap
and
responsible
for
both.
Reason
#2: So
You
You’re
Not
Building
Lots
of
don’t
features
objectives
well
for
features
underway.
requirements
evaluating
helping
like
align
of the project.
possibilities
is
sound
necessarily
you
ideas,
the
Additionally,
emerge
Having
provides
those
good
with
but
they
strategic
all sorts
the project
clearly
identified
you with a framework
ideas
understand
as
they
how
of
after
(or
come
if)
for
along,
they
fit
into
you’ve already committed
what
Knowing
what
knowing
real
comes
into
what
value
you’re
you’re
in
concrete
sets
requests
that
THE ELEMENTS
ways
By
requirements,
don’t
fit
as
also
right
those
plans.
releases, you can manage
more deliberate
all
appropriate
long-term
of
building
building
collecting
from finding
your
not
not
to build.
and
possibilities
the entire
means
now.
great
The
ideas
to fit them
establishing
stockpiling
for
future
process
in a
way.
OF USER EXPERIENCE
61
January (now)
(next) January
April
Requirements
July
that
October
can’t be met in the
current schedule
can
form the basis for the
next milestone in your
development
Version 1.0
If
you
don’t
consciously
requirements,
you’ll
“scope
The
creep.”
get
caught
image
this
mind for me is the snowball
inch—and
snow
each
turn
until
the hill, getting
bigger
way
Likewise,
down.
requirement
may
not
project
rolling
away
and budget
an inevitable
Functionality
your
in the
dreaded
always
brings
to
an
it
up a little
is barreling
and harder
each
out
of
estimates
final crash.
and Content
extra
down
to stop all the
additional
seem like that
work. But put them all together,
deadlines
manage
that rolls forward
then another—picking
with
cycle.
Version 1.1
much
extra
and you’ve got a
control,
crushing
on its way toward
On the scope
question
plane, we start from the abstract
of “Why are we making
that we dealt
with in the strategy
build upon it with a new question:
this product? ”
plane and
“What
are we
going to make? ”
62
CHAPTER
4
THE
SCOPE PLANE
product as functionality
ctionality
product as
information
structure
o
sc
pe
Functional
Content
Specifications Requirements
strategy
The
split
between
functionality
medium
and
starts
the
the
Web
Web
coming
into
plane. On the functionality
with what would
the
software
we’re
of
Content
and
different
as
comes
very
In
functionality
two
similar
things
to
describe
to
at
what
the
side,
traditional
marketing
seem
just
be,
about
but
this
refer
to
as
when
chapter,
both
it
in
I’ll
software
offerings.
the
scope
requirements
Some
mean
requirements
set of
information
could
development,
functional
specifications.
terms
concerned
the feature
Throughout
feature
and content
software
through
the scope
on
scope, they can be addressed
ways.
term
functions
and
for
groups.
to defining
use the
play
content,
editorial
communications
vehicle
information
side, we’re
On the
with
a
an
be considered
product.
dealing
domain
as
as
or
organizations
two
different
the
beginning
the
system
of
is
defined
functional
use
these
documents:
the
should
project
do,
to
and
specifications
actually
are
at
the
does. In
developed
THE ELEMENTS
end
other
soon
to
describe
cases,
after
the
what
it
specifications
the
OF USER EXPERIENCE
63
requirements,
But
most
of
filling
interchangeable—in
functional
sure
time,
all
to
specifications
language
language
of
concepts
here
development
of
terms
are
this
often
requirements- definition
the
refer
to
bases.
to
the
make
I’ll
use
document
to refer to its contents.
software
apply
just
specification
covered
itself, and requirements
The
of implementation.
these
fact, some people use the term
requirements
they’ve
functional
in details
the
chapter
is
mostly
the
But
the
development.
equally
involves
process
to
content. Content
a
less
than software
formal
does,
but
the
content
underlying
principles
developer
people
will
sit
or pore over source
in order
to determine
what
in the content
process
defining
content
reviewing
features
existing
and approaches
Content
usually
requirements
with
stake-holders
often
days,
These
management
The
have
pure
through
system
systems
a
dozen
lightweight
to
This
is
from the technologist
and
purposes
functional
content
(CMS).
tools
that
These
dynamically
different
for
are
systems
large and
generate
data
optimized
sites
content
a
come in all shapes and sizes, from very
from
needs
are the same.
handled
complex
that
clippings,
developing.
documentation.
requirements
implications.
A
with
whether
infor-mation
she’s
actually not all that different
brainstorming
same.
talk
full of news
be included
for
the
and
material,
or a drawer
be a database
are
down
pages
sources
to
managing
one
specific type of content feature in the most efficient
way. You might
content
decide
management
to purchase
system,
use
a proprietary
one
of
the
many
open-source
alternatives,
from
scratch.
any
tinkering
to
organization
In
tailor
case,
the
or even build
it
will
system
take
to
one
some
your
and your content.
64
CHAPTER
4
THE
SCOPE PLANE
content editor
A content management
copy editor
system can automate
the workflow
required
to produce and deliver
content
to users.
writer
user
stakeholder
The
functionality
you
need
management
system will depend
the
you’ll
content
be
lawyer
in
your
content
on the nature
managing.
Will
you
of
be
maintaining
formats?
content
languages
or data
The CMS will need to be able to handle
all those
kinds
press release
support
workflow.
of
content
elements.
need to be approved
vice presidents
to
in multiple
and a lawyer?
that
kind
of
Will content
recombined
according
user, or the device
every
The CMS will need
approval
elements
to the
Does
by six exec-utive
process
be
in its
dynamically
preferences
of
each
they are using? The CMS will
need to be able to accomplish
that level of complex
delivery.
Similarly,
the
functional
technology
product
Will
be
there
configuration
messages?
time
engineer’s
final
screen?
field
message
a
technical
content
the
any
about
error
those.
on a Web
I
made
made
could
it
Every
site like
know
nobody
requirement.
.
pref-erences
message
projects
of
implications
write
exception,”
because
allegedly
to
message
placeholder
product
on
How
has
an error
input
requirements
content
instructions
Some-body
I see
“Null
have
some
into
that
the
error
Countless
have
been
improved
simply
immeasurably
taken
the
time
if
the
to have
developers
someone
the application
with an eye toward content.
THE ELEMENTS
OF USER EXPERIENCE
had
look
at
65
Defining Requirements
Some
requirements
whole.
example
Branding
apply
to the product
requirements
of this; certain
such as supported
as
a
are one common
technical requirements,
browsers
and operating
systems, are another.
Other
feature.
requirements
Most
requirement,
description
of
they
of
apply
only
the time when
a
are
single
to
thinking
feature
a
people
the
of
specific
refer
a
to a
short
product
is
required
The
level
often
If
to have.
of
detail
the
very
goal
in
of
the
complex
project
be needed,
the
relative
might
content
The
PDFs
a
most
of
larger
high
number
the scope
site
might
of
be
content
base of
functionally
manuals)
source
in
for
that
the
requirements
themselves.
requirements
people
of
of
can only be very general.
be your users
your
one
level
a very large-scale
product
productive
stakeholders,
imple-ment
very
even though
large
requirements
will always
often,
as
will
of the project.
involve such a homogeneous
(such
identical
content
to
a
to the
quite small. Conversely,
project
requirements
scope
is
subsystem,
detail might
project
your
on the specific
depend
will
your
But
come
organization
more
from
who
have some say over what goes into your product.
In
either
people
research
case,
want
is
the
best
simply
techniques
way
to
outlined
ask
to
find
them.
in Chapter
out
The
what
user
3 can all
be used to help you get a better
the
kinds
of
features
users
understanding
want
to see
of
in your
product.
Whether
you are defining
requirements
with help
from stakehold-
ers inside
omer
your
service
talk about
CHAPTER
agent,
and
the same
a
or working
directly
66
marketing
Web site can be
THE SCOPE PLANE
4
requirements
that
fall into three
obvious,
organization
are
come
out
of
the
gen-eral categories.
the
things
people
Some of these are very clearly
process
First,
say
will
and most
they
want.
good ideas and will
find their way into the final product.
Sometimes
not
the
the
things
uncommon
difficulty
things
people
actually
they
say
they
want.
want
It’s
for anyone, when they encounter
with a process
a solution. Sometimes
or a product,
that solution
are
not
some
to imagine
is unworkable,
or
it
addresses
underlying
these
a
cause
symptom
of
suggestions,
completely
the
you
different
rather
problem.
can
than
By
the
exploring
sometimes
arrive
requirements
that
requirement
is
solve
at
the
real problem.
The
third
type
people
don’t
people
talking
requirements
they’ll
hit
occurred
of
know
that
upon
to
maintenance
they
about
might
great
of
the
have
a
chance
to
fulfill
product.
talk
Ironically,
sometimes
in creating
least
These
when
through
the
and
people
and working
able to imagine
feature
you
and
get
new
sometimes
simply
the
exercises,
for the project.
involved
them,
that
during
possibilities
are the ones
When
objectives
ideas
anyone
out of brainstorming
want.
strategic
the
hadn’t
ongoing
often
come
participants
explore
most
deeply
with a product
new
directions
for it. When you spend all your time immersed
main-taining
forget
which
an
of
existing
your
the
product,
you
constraints
are
can
real,
in
often
and
which
are
For
this
that
bring
simply
products
reason,
group
together
the organization
people
considered
to
diverse
tools in opening
possibilities
they
choices.
sessions
parts
of
user groups
the minds of
wouldn’t
have
before.
Getting
customer
historical
from diverse
or represent
can be very effective
participants
of
brainstorming
service
agent,
and
an engineer,
a
a
marketing
person in a room together
THE ELEMENTS
OF USER EXPERIENCE
67
enlightening
for
everyone.
perspectives—and
respond
broader
to
having
them—encourages
terms
about
Hearing
the
people
both the problems
develop-ing the product
unfamiliar
opportunity
to
to think
in
involved
in
and the possible solutions.
Whatever
are
device
designing
will
need
to
requirements,
camera?
we are
designing
device
the
take
too.
into
considerations
functional
will
the
inform
and
have
a
sensors?
These
constrain
your
possibilities.
Generating
requirements
finding
ways
example,
assume
to
is
often
remove
that
you
decided
haven’t
decided if your product
What
to purchase
can
process—first
your
selecting
a
matter
impediments.
have
already
buy.
set
hard-ware
device
position
if we
feature
account
Does
GPS? Gyroscopic
for— or
itself— our
a
For
user who
a product—they
site
has
just
is the one they will
do
your
of
to
make
product,
this
and
then
buy-ing your product— easier for them?
In
Chapter
creating
help
us
better
determining
personas
into little
3,
we
fictional
looked
at
char-acters
understand
requirements,
again by put-ting our
stories
the
called
technique
called
personas
user
we
can
fictional
scenarios.
needs.
use
of
to
In
those
characters
A scenario
is a
short, simple
narrative
go about
might
trying
needs. By imagining
through,
we
requirements
describing
how
user
the process our users might go
can
come
up
with
potential
to help meet their needs.
We can also look to our competitors
inspiration.
a persona
to fulfill one of those
for
Anyone else in
the same business
is almost certainly
trying to
meet the same user
needs and is probably
similar
product
trying to accomplish
objec-
tives as well. Has a competitor
found a particularly
effective feature
to meet one of these
strategic
objectives?
the same trade-offs
How have they addressed
and compromises
68
we face?
CHAPTER
4
THE SCOPE PLANE
Even
products
serve
as fertile sources
that
aren’t
for
direct
competitors
possible
can
requirements.
Some
gaming
the
ability
players.
when
platforms,
to
create
Adopting
scoping
video recorder
or
a
for example,
social
building
similar
offer
groups
on their
feature
users
of
for
fellow
approach
our
digital
may give us an advan-tage over our
direct competition.
Functional Specifications
Functional
bad
specifications
reputation
often
hate
dull,
and
specs
the
taken
away
specs
go
because
time
from
they
spent
producing
that
producing
it
is!
a self-fulfilling
A
in
bad
of
them
code.
turn
As
is
a
time
result,
reinforces
them
is
a
approach
the
waste
to
prophecy.
complaint
about
functional
specifications
that
they
reflect
the actual
product.
change
during
understands
implementation.
this—it’s
of
specs
One
don’t
a
Programmers
tend to be terribly
reading
which
time—because
something
quarters.
unread,
impression
becomes
have
in certain
the nature
is
Things
Everybody
of working
with
tech-nology.
would
work
work
the
is
as
a
things
not
or
a
specs
change
enough
of
that
likely
it
didn’t
quite
would.
This,
abandon
it
writing
highlights
actually
the
When
work.
implementation,
up your hands
spec
specifications
doesn’t
the
and declare
lightweight
become
separate from devel-oping the product
THE ELEMENTS
thought
specs. The answer is to make
defining
the
to
Instead,
during
of writing
process
more
that
is not to throw
you
thought
reason
cause.
of
the futility
the
something
you
lost
importance
answer
didn’t,
way
however,
specs
Sometimes
a
project
itself.
OF USER EXPERIENCE
69
In other
problems.
words,
documentation
won’t
Defini-tion will. It’s not about
detail. It’s about
clarity
solve
your
volume
and accu-racy. Specs
or
don’t
have to embody
the ones
that
every
need
aspect
of the product—just
definition
to avoid
in the design and development
don’t
need
to capture
for the product—just
some
confusion
process. And specs
ideal-ized future
the decisions
state
that have been
made in the course of creating it.
Writing It Down
No matter how large or complex
the project
may
be, a few general rules apply to writing any kind
of requirements.
Be positive.
system
prevent
Instead
shouldn’t
that
bad
of describing
do, describe
thing.
For
a bad thing the
what
it will do to
example,
instead
this:
The system will not allow the user to purchase
without
a kite
kite string.
This would be better:
The system will direct the user to the kite string page
of
if the user tries to buy a kite without
Be specific.
Leaving
interpretation
whether
Compare
as little
is the only
a requirement
string.
as possible
way
we
open to
can determine
has been fulfilled.
these examples:
1. The most popular videos will be highlighted.
2. Videos with the most views in the last week will
appear at the
top of the list.
70
CHAPTER
4
THE SCOPE PLANE
The
first
example
requirement,
but
seems
it
does
to
identify
not
take
a
clear
much
investigation
counts
to
as
comments?
start
The
ones
And what constitutes
The
second
detail,
a
removing
the
we
with
kinds
What
most
votes?
them?
our
mean
goal in specific
by
for
popular
and
high-lighting.
By
of
second
of
it.
the most “like”
possibility
the
in
the
defines
mechanism
interpretations,
skirts
with
what
the
holes
Videos
highlighting
example
defining
describing
poking
popular?
differing
requirement
arguments
likely
to
neatly
crop
up
during or after implementation.
Avoid
another
subjective
way
of
ambiguity—and
language.
being
therefore
misinterpretation—from
Here’s
This
specific
the
is
and
really
just
removing
possibil-ity
for
the requirements.
a highly subjective
requirement:
The site will have a hip, flashy style.
Requirements
must
be
falsifiable—that
is,
it
must
be
requirement
possible
has
to
not
demonstrate
whether
and
have
flashy
hipness
probably
demonstrate
been
met.
subjective
been
doesn’t
It’s
a
to
qualities
fulfilled.
match
when
difficult
My
like
hip
idea
of
yours, and most
likely the CEO has another idea entirely.
This doesn’t
mean you can’t require that your site
be hip. You just have to find ways to specify which
criteria will be applied:
The site will meet the hipness expectations
of Wayne, the
mail clerk.
Wayne
project,
normally
but
our
wouldn’t
project
have any say about
sponsor
clearly
the
respects
his sense of hipness. Hopefully
it’s
the same sense
our
users
have.
THE ELEMENTS
OF USER EXPERIENCE
71
arbitrary
because
approval
we’re
instead
objectively
of
defined.
relying
cri-teria
So
on
that
perhaps
Wayne’s
can
this
be
more
require-ment
would be best of all:
The look of the site will conform to the company
branding
The
guidelines
whole
disappeared
Instead,
to
document.
concept
of
entirely
from
we have
established
branding
marketing
she
may
may
even consult
To
her
Wayne
teenage
make
reference
sure
We
some
can
also
the
hip, the V P of
the mail clerk,
daughter,
some user research
or
findings.
up to her. But now we can say definitively
the requirement
now
requirement.
are sufficiently
consult
consult
has
the
a clear, unambiguous
guidelines.
guidelines
may
hipness
or
she
It’s
whether
has been met.
eliminate
requirements
subjectivity
quantitatively.
by
Just
defining
as
success
metrics
make
defining
help
a requirement
us
identify
requirement.
that
strategic
the
For
system
performance,”
designed
to
goals
in quantitative
whether
we’ve
example,
instead
have
high
“a
we can require
support
at
least
users. If the final product
user numbers,
quan-tifiable,
that
1,000
only
terms
met
of
requiring
level
of
the system
allows
three-digit
we can tell the requirement
hasn’t
Content Requirements
Much of the time, when we talk about content,
referring
to
text. But images, audio, and video can be more
important
than the
accompanying
types
text. These
different
content
can also work
together
example,
to fulfill
a content
a single
be
simultaneous
been met.
we’re
can
the
requirement.
For
72
CHAPTER
4
THE SCOPE PLANE
feature
covering
article
accompa-nied
a sporting
clips . Identifying
with
a
feature
resources
Don’t
get
content
first
But
content
it
have
and
types
you
associated
at all).
the format
purpose.
the term
hear
FAQ
a simple
what
the content
When
of a piece
discussing
with stakeholders,
I usually
an
video
determine
to produce
between
its
might
is, “We
really
series
only
of
one of the
should
have
refers
to a
questions
and
The real value of an FAQ to users is that
provides
information.
fulfill
and
format:
answers.
help
it can be produced
requirements
things
FAQs.”
all the content
can
confused
content
event
photographs
will be needed
(or whether
of
by
that
ready
access
Other
same
to
content
purpose;
but
commonly
needed
requirements
when
can
the focus
is
on
the
format,
forgotten.
the
purpose
itself
More often than not, FAQs
“frequently”
part of the equation,
answers
to
whatever
provider
could
think
to
be
the
offering
questions
of
can
neglect
instead
the
satisfy
content
the
FAQ
requirement.
The
expected
features
size
has
experience
a
of
huge
decisions
requirements
estimates
of
features,
video,
and
stand-alone
influence
thumbnail
provide
knowing
for
elements
the essential
are
a
provide
to
is different
in advance
to
rough
audio
fine.
for
files
don’t
or
that
access
full-screen
or
have to
We
only
needed
to
content.
to
from designing
the size of
count
images
information
vehicle
access
user
downloadable,
like
appro-priate
site
the
word
for
These size esti-mates
images
content
provide
dimensions
precise—approximations
Designing
on
should
sizes
content
have to collect
to
pixel
file
PDF documents.
an
your
the size of each feature:
for text
design
of
you will have to make. Your
content
be
each
small
a site
photographs;
THE ELEMENTS
OF USER EXPERIENCE
73
the content
enables
elements
we have to accommodate
us to make smart, informed
decisions
along the way.
It’s important
to identify
for each content
it
has
been
objectives,
like
too
without
validated
any
content
for creating
deep
with
features
into
identifying
every required
up
as early as possible.
against
feature
a really good idea—as
responsible
get
who will be responsible
element
the
content
gaping
holes
everybody
inevitably
sounds
else is
maintaining
it. If we
development
pro-cess
will
be
responsible
feature, we’re
in our
loved
Once
strategic
long as someone
and
who
our
site
when
for
likely to end
because
they
those
were
hypotheti-cal turned
anyone to actually
And
that’s
out to be too much work
what
developing
people
often
require-ments:
You
might
(or,
be able
more
marketing
for
take on.
to hire
likely,
forget
Content
is
stick
someone
work.
resources
on contract
with the job) to create
when
hard
down
in
the content
in
time for the initial launch, but who will keep it up
to
date?
Content—well,
anyway—
requires
Approaching
forget
content
it leads
effective
constant
as
to a site
if
you
that,
content,
maintenance
can
over
post
time,
it
.
and
does
an
increas-ingly poor job of meeting user needs.
This
is
should
why,
identify
The
frequency
your
strategic
product
back?
often
However,
do
every
content
how frequently
of
updates
goals
objectives,
to come
how
for
for
how
Based
they
should
the
site:
often
feature,
you
it will be updated.
be derived
Based
from
on your
do you want
users
on the needs of your users,
expect
updated
informa-tion?
keep in mind that the ideal frequency
of
updates for your users (“I want to know everything
instantly,
may
24 hours a day!”)
for your organization.
not
be practical
You’ll have to arrive at
74
CHAPTER
4
THE
SCOPE PLANE
a frequency
that represents
compromise
between
users and your available
If your
site has
divergent
of
content.
to serve
is
intended
decisions
about
Information
different
of your
resources.
needs, knowing
content
better
a reasonable
the expectations
multiple
which
for
can
how
help
to
intended
approach
audiences
audience
you
make
present
that
for
requires
a
intended
for their parents; information
them needs yet a third approach.
with
a piece
from
children
information
for both of
For
projects
existing
will
that
feed
content
involve
content, much
your
Taking
on your existing
tedious process—and
inventory
the
(which
the
same
requirements
reason
is
team knows
exactly
that
what
of
that
in
of
a
all
site may seem like a
is. But
takes
important:
lot
is recorded
having
the
simple, albeit very large, spreadsheet)
for
a
an inventory
it usually
usually
with
information
requirements
inventory.
the content
working
of
form
a
is important
having
so
the
of
concrete
everyone
on
they have to work
the
with
in creating the user experience.
Prioritizing
Requirements
Collecting
ideas
not
Almost
hard.
for
possible
everyone
requirements
who regularly
in contact with a product—whether
the
organization
one
idea
tricky
for
a
or
outside—will
feature
part is sorting
that
could
out what
is
comes
they are inside
have
be
features
at
least
added.
should
The
be
included
in the scope for your project.
THE ELEMENTS
OF USER EXPERIENCE
75
Sometimes
a strategic
objective will result in
multiple requirements
(left). In other cases,
one requirement
can
serve multiple strategic
objectives
(right).
It’s
actually
one-to-one
objectives
one
fairly
rare
correlation
and
your
requirement
multiple
objective
different
you
see
be
objectives.
often
be
a
your
simple
strategic
Some-times
requirements.
can
strategic
will
that
between
applied
toward
Similarly,
associated
with
one
several
requirements.
Because the scope is built upon the strategy, we’ll
need to evaluate
possible
requirements
fulfill our strategic
based on whether
they
goals (both product objectives
and user needs). In addition to those
two considerations,
third: How
defining
the scope
adds a
feasible
will it be to actually
76
THE SCOPE PLANE
make this stuff?
CHAPTER
4
Some
features
they’re
there’s
over
can’t
be
technically
implemented
because
impossible—for
example,
just no way to allow users to smell products
the
might
Web
yet,
(particularly
feasible
in
because
our disposal.
The
case
they
how
badly
Other
In other
of
content)
aren’t
would
demand
more
cases, it’s
would
they
features
or financial—than
feature
implement,
matter
ability.
the
resources—human
time:
no
that
want
take
just
we have
at
a matter
of
months
to
three
but we have an executive
requirement
to launch in two.
In
the
features
For
case
of
time
constraints,
out to a later release
resource
constraints,
organizational
importantly,
burden,
changes
not
enabling
(However,
you
or project
feature
impossible
push
technological
can
to
or
sometimes—but,
always—reduce
a
can
milestone.
the
be
things
resource
imple-mented.
will
remain
impossible. Sorry.)
Few
features
exist
in
a
vacuum.
Even
content
features
them
on a Web site rely on the features
to inform
content
the user
provided.
between
This inevitably
features.
Some
trade-offs
with
coherent,
consistent
may
want
process—but
others
a
on how
whole.
one-step
preferable
to go
on your strategic
indicate
eye
document.
require
produce
example,
order
a
users
submission
the site
all the data at once. Is it
with a multiple-step
process,
or
system? It depends
objectives.
out
possible
apparent
to
For
should you rework the database
an
will
order
the tangle of legacy databases
accommodate
around
to use the
leads to conflicts
features
in
uses can’t
Keep
best
during
for
shifts
the
feature
in
suggestions
strategy
development
that
of
Any
feature
suggestion
strategy
is, by definition,
feature
weren’t
the vision
with the proj-ect
scope. But if a suggested
that
not
in
line
out
of
that falls outside
the scope doesn’t fit any of the types of constraints
THE ELEMENTS
OF USER EXPERIENCE
77
above
and still sounds
like a good idea, you may
want
to
some
reexamine
objectives.
If
you
aspects
of
probably
jumped
find
your
of
strategy,
into
your
yourself
strategic
revisiting
however,
defining
many
you’ve
requirements
too
soon.
If
your
strategy
or
clear hierarchy
objectives,
factors
up
clear.
in
among
priorities
should be
Sometimes,
importance
the
of
In
the
these
project
cases,
whether
all
too
primary
suggested
the
strategic
a
strategic
the
of
however,
scope
identifies
your
priority
two different
down to corporate
When
document
of priorities
these
in determining
features.
isn’t
vision
relative
objectives
features
often
end
comes
politics.
stakeholders
talk
about
strategy,
they
usually
have
start
to
out
be
strategic
factors.
trouble
separating
features
will
requirements
with
coaxed
feature
back
Because
often
the
have
from
champions.
process
Managing
this
The
between
stakeholders
Focus
on
with
feature
the
intended
is to appeal
them.
her heart
strategic
not
goal
Admittedly,
said than done. Demonstrating
stakeholders
is
defined
assure
on a particular
the
feature
is
in some other
of her constituents
this is often easier
empathy
essential
to
feature conflicts. Who says tech workers
people skills?
be
proposed
If you can
set
feel the needs
are being neglected.
of
can
to the
goals,
to fulfill can be addressed
way, she won’t
needs
stakeholders.
process
strategic
accomplishing
a stakeholder
that
the
a matter
best approach to resolving a conflict
strategy.
means of
have
certain
Thus
becomes
negotiation
then
often
strategy,
of nego-tiation between motivated
difficult.
and
underlying
stakeholders
features
definition
ideas,
to
with the
resolving
don’t need
chapter
5
The Structure
Plane
Interaction
Information
Design and
Architecture
After
the
prioritized,
included
requirements
have
been
we have a clear picture
in the
final
product.
The
defined
and
of what will be
requirements,
however, don’t describe
to form a cohesive
whole. This is the next level up
from scope: developing
the site.
how the pieces fit together
a conceptual
structure
for
Surface
Skeleton
Structure
Scope
Strategy
Sensory
Design
InterfaceDesign Navigation
n
Design
D
InformationDesign
Interaction
Design
Functional
Information
ati
Architecture
re
Content
en
Specifications Requirements
nt
User
Needs
Product
Objectives
80
STRUCTURE
CHAPTER
PLANE
5
THE
Defining the Structure
The
realm
planes,
our
of
of
structure
concerns
strategy
shift
and
from
But the line between
blurry—although
will have
involve
largely
to
abstract
much
the
of
the
of
the
concrete
what
decisions
conceptual
five
at which
issues
factors
experience.
and concrete
tangible
can be
we decide
influence
themselves
matters.
product as functionality
ctionality
information
third
what users finally
a noticeable,
product,
the
it is the point
the more abstract
scope
that will determine
final
is
and appro-priately
product as
here
on the
still
r
st
uc
t
skeleton
eInteraction
ur
Information
Design
Architecture
scope
In
traditional
discipline
experience
design.
of
in
for the user
It used
“interface
now
software
involved
THE ELEMENTS
is known
to be lumped
design,”
recognized
development,
creating
but
a
as
under
the
structured
interac-tion
the heading
interaction
design
is
as a separate discipline.
OF USER EXPERIENCE
81
In
content
experience
architecture.
development,
is
a
This
structuring
ques-tion
field
draws
of
the
user
information
on a
number
of
disciplines
with
that
historically
orga-nization,
the
presentation
of
journalism,
have
been
grouping,
content:
and technical
concerned
ordering,
library
and
science,
communication,
among
others.
Interaction
share
design
an
and
emphasis
sequences
in which
users . Interaction
involved
in
Information
involved
deals
design
these
disciplines
all. They’re
they
aren’t
about
ensure
who use it.
into
with
think.
the structure
a successful
the
tasks.
options
architecture
technical
really
to
options
to a user.
about
understanding
and
the
information
highly
and
pre-sented
completing
information
and
behave
understanding
we help
will be
and
esoteric,
architecture
patterns
concerns
performing
like
way
options
architecture
sound
at
defining
design
in conveying
Interaction
information
on
By
of
areas,
but
technology
people—the
building
our
experience
this
product,
for those
Interaction Design
Interaction
design
is
concerned
with
possible user behav-ior and defining
will accommodate
Any
time
a
and respond
person
uses
dance goes on between
a
dance
in response
goes
software
on.
acknowledge
But
been
has
seems
danced
behavior.
a
sort
of
the two of them. The user
responds.
Then the
to the system, and so the
the
typical
designed
way
doesn’t
that
really
this dance. The thinking
82
STRUCTURE
to that
product,
moves around, and the system
user moves
describing
how the system
CHAPTER
5
THE
PLANE
to
have
a
little
unreasonable
to
been
bit
that
if
dif-ferently
expect
the
every
application
anyway,
user
to
it
wasn’t
adapt.
The
system could just do its thing, and if some toes got
stepped
on, well,
process.
But
the
dance
anticipate
that
every
was
dancer
to really
work,
of
the
learning
will tell
part
you
that
each
participant
the moves of the other.
Programmers
cared most
have
about
traditionally
two aspects
focused
that
is precisely
makes
do. But
their
was
most
technically
what worked
computing
approach
is
good
at
for
details
what
they
would
a system in the way that
efficient
without
best for users. Especially
power was a limited
regard
to
back when
resource,
the best
was the one that got the job done within
those technical
The
for these
focus meant that programmers
gravitate toward building
and
what it
a good reason
passion
programmers
this
on
of software:
does and how it does it. There’s
this—it
for
must
approach
almost
limitations.
that
never
the person
using
reputation
that
works
best
the approach
it. Thus,
has
for the technology
that works
software
haunted
it
for
best
acquired
most
of
for
the
its
existence: Software
is complicated,
hard
is
to
use.
This
literacy”—teaching
workings
why, for
confusing,
years,
people
about
of computers—was
widely
be the only
way
to make
users
and
“computer
the
inner
considered
and software
to
get
along.
It took a long time, but as we learned
how
people
started
used
catching
designing
machine,
technology,
on
software
we
THE ELEMENTS
the
that
could
best for the people
to
design
idea
more about
eventually
we
that, instead
works
best
software
for
that
of
the
works
who use
OF USER EXPERIENCE
83
it,
thereby
sending
file
skipping
clerks
this
to
whole
programming
business
classes
of
to
improve
their
discipline
that
computer
arose
literacy.
to help
do this is called interaction
Conceptual
Users’
components
we
of
create
conceptual
models.
system
a
treat
user
doesn’t
place
acquires?
a
feature
interactive
are known
as
place
sites
your
consistent
a
as
does
the
thing
the
take
different
conceptual
design
the content
what
consistently,
as
the
example,
Different
whether
or an object;
behaves
For
. Knowing
matter
element
how
a place the user visits, or an object
you to make
allows
design.
will behave
particular
user consumes,
the
new
developers
Models
impressions
approaches
The
software
matters
instead
element
is that
of
sometimes
and
model
decisions.
It
is a
the site
treating
an object
the
at
other times.
For
example,
shopping
site
is
concept
cart
that
the
conceptual
model
compo-nent of a typical
of
a
influences
container.
both
This
the
for
the
e-commerce
meta-phorical
design
of
the
component
interface.
“put
and
things
“cart,”
the
language
into”
and
and
the system
accomplish
these tasks.
Suppose
the
component
such
as
a catalog
provide
both
an
the
traditional
metaphor
edit
add
a
use
things
in
the
and
complete
the
for
The
that
system
would
using
process,
to
analog,
might
replace
functions
of
the
the
real-world
remove
instead
of”
functions
model
form.
function
out
provide
differ-ent
order
cart, and
to
“take
must
conceptual
were
we
holds objects; as a result, we
A container
of
the
a checkout
users
might
send their orders in.
84
CHAPTER
STRUCTURE
PLANE
Both
retail
the
store
model
and
5
the
THE
catalog
model
seem
to place
The
retail
Web
perfectly
orders
store
that
it’s
convention.
other
Web
there’s
to
is so
on
for
allowing
Which
widely
the
users
to choose?
used
status
nothing
probably
Using
familiar
adapt
convention
reason
model
taken
sites, you’ll
already
them
suitable
the Web.
on the
of
a
If your users do a lot of shopping
that convention.
are
over
to
conceptual
with
wrong
for
doing
model
it
so
that
as
and
you
away
an
meet
for
Of course,
have
have
will
to
people
easier
site.
with breaking
long
on
to stick
models
makes
an unfamiliar
either—as
conceptual
want
from
a
good
alternate
your
users’
needs while still making sense to them. Unfamiliar
conceptual
models
can correctly
A
conceptual
component
When
are only
understand
model
the
news
and
its
magazine:
The site had
page
when
them.
can
refer
to
just
users
one
of a system or to the system as a whole.
launched,
every
effective
and interpret
conceptual
commentary
site
Slate
model
was
a real-world
a front
and
a
back,
and
had both a page number and interface
elements
it
allowing
turns
doesn’t
out,
translate
Slate eventually
We
don’t
models
this
the user to “turn
the
magazine
very
effectively
dropped
have
to
them.
It’s
users
more
important
used
consistently
development
of
Understanding
Does
our
the
the
to the site (Does
it work
conceptual
Ideally,
the
users
that
models
users
it work
helps
have
helping
conceptual
the
design.
themselves
OF USER EXPERIENCE
us choose
most
to
conceptual
THE ELEMENTS
sometimes
of
like a retail store?
that will work
won’t
conceptual
throughout
interaction
like a catalog?)
models
fact,
instead
are
models
bring
to the Web, and
communicate
confuses
As
model
it.
to our users explicitly—in
only
the page.”
conceptual
be
the
effec-tively.
told
what
85
model
we’re
intuitively
following;
as
behavior
of
they
the
they’ll
use
site
the
will
pick
site
up
on
because
match
their
it
the
implicit
expectations.
Basing
our
involving
conceptual
real-world
models
analogs
on
can be valuable,
but it’s important
metaphors
literally.
too
site for Southwest
a picture
of
of a customer
brochures
The
Airlines
to
one
metaphors
to system
functions
not to take our
home
page
used to consist
service
side,
desk,
a
of
the
solely of
with a stack
telephone
to
the
other side, and so on. For years, the site was held
up
too
to
the
as
an example
far—placing
making
a
phone
reservation
represented
of
a
conceptual
a reserva-tion may
call,
system
by a telephone.
but
that
should
model
siderably
became
light
more functional.
mean
doesn’t
actually
Southwest
must
gotten tired of being used as a bad example;
subsequently
gone
be analogous
on metaphor
be
have
its site
and con-
The old Southwest
Airlines
site is a classic
example of conceptual
models being tied too
closely to real-world
counterparts.
86
STRUCTURE
CHAPTER
5
THE
PLANE
Error Handling
A
huge
part
involves
system
can
of
dealing
any
interaction
with
user
do when people
the
system
do
to
design
error—what
make
project
does
the
mistakes, and what
prevent
from hap-pening in the first place?
those
mistakes
The
first
design
and
the
impossible.
defense
A
be
complex
actually
abruptly.
driver,
and
bystander
who
the
happens
this,
unless
it’s
is
any
designed
the
the sensitive
moreover,
instead
car,
for
lurches
bad
an
for
car
with
so
the
to
the
Unfortunately,
it’s
not
car
error
quite
The
errors
thing
to making
with
never
so easy
in this way.
best
won’t
disengaged.
the
the
automatic
starter
is
start
engaged,
an
make most user errors impossible
next
the
innocent
to be in the path of
transmission
impossible
transmission
happens.
but
the
bad
of
an
the car while the
mechanism;
for
type
with
car.
prevent
Because
Bad
to
simply
this
car
can damage
start,
is
are
of
any
Starting
possibly
transmission
engage
in
errors
errors
example
transmission
forward
against
that
seen
is engaged
the car doesn’t
To
so
transmission.
transmission
lurching
defense
good
can
automatic
and
best
system
to
impossible
is
to
make
them
such measures
happen.
At
merely
difficult.
in place, some errors
this
point,
the
But
even with
are bound
system
should
to
do
what it can to help the user figure out the error and
cases, the system
fix it. In some
error
of
on the user’s
the
products
correct
Word,
most
behalf.
irritating
results
from
But
behavior
know
exactly
ever used
what
about.
THE ELEMENTS
of
well-intentioned
user errors. (If you’ve
you
can even fix the
be careful—
OF USER EXPERIENCE
I’m
some
software
efforts
to
Microsoft
talking
them
off
so I can stop correcting
the corrections
and get some work done.)
Helpful
error
interfaces
can
errors
after
actions
may
messages
and
help
catch
they’ve
system
from
of
is
this
recovery
that
can’t
only
the
a
way
Of
many
can cause
overlooked—and
function,
“Are
of
Architecture
users
to
example
but
error
plenty
prevention
this
actu-ally
you
the really
often
too
cases,
forms. For errors
course,
users
than it helps.
Information
for
of
user
until it’s
from, providing
means
when
too
kinds
some
best-known
undo
only
provide.
can
effective
confirmations
be
famous
be recovered
is
Including
to
provide
can take many different
warning
system
to be errors
the error. The
the
many
But
to catch them. In these
should
recover
easy-to-interpret
happened.
not appear
late for the system
the
users
warning
is
notice
it.
sure? ”
important
annoys
of
the
more
ones
users
Information
architecture
old practice—in
human communication
have had information
make
choices
information
is a new
fact, you could
so
idea, but it’s an
say
it’s
as old as
itself. For as long as people
to convey, they have had to
about
how
other
people
they
structure
that
can understand
and
use it.
Because
with
information
how
information
architecture
in any product
of
the
architecture
people cognitively
that
users
presented.
concerned
information,
consid-erations
requires
information
is
process
come
to make
Obviously,
considerations
are
THE ELEMENTS
OF USER EXPERIENCE
up
sense
these
89
critical
in
the
case
of
information-
oriented
products
they
(like
can
corporate
have
a
information
huge
functionality-oriented
impact
sites)
even
products
(like
in
a
but
more
mobile
phone).
Structuring
On
Content
content
concerned
sites,
with
navigational
through
schemes
site
related
to the
of
informa-tion
often
people
field
systems
easily.
called
find
of
on
problems
commonly,
require
the
But
Web
to
to move
is
closely
retrieval:
users
site
to
the
find
architectures
do more than just help
in many
cases,
they
have
to
users.
information
creat-ing
is
and
effectively.
Web
enable
educate, inform, or persuade
Most
users
and
information
that
on
things;
allow
efficiently
architecture
design
architecture
organizational
that
content
Information
are
information
creat-ing
architecture
categorization
schemes
that will correspond
to our own objec-tives for the
site, the
we
content
user
that
needs
intend
will be incorporated
to
meet,
and
the
in the site. We
can
tackle
in two
creating
ways:
such a categorization
from
the
top
down,
or
scheme
from
the
bottom up.
A
top-down
architecture
directly
approach
involves
from
product
needs.
with
Starting
content
accomplish
these
the cat-egories
hierarchy
the
empty
functionality
shell
user
categories
of
needed
to
goals,
we
then
and subcategories
which
break
subsections.
the
content
CHAPTER
PLANE
5
This
serves
will be slotted.
90
STRUCTURE
into
plane
and
broadest
into logical
of categories
architecture
strategy
functionality
strategic
down
of
objectives
the
and
information
the
an understanding
considerations:
possible
to
cre-ating
THE
as
and
A
bottom-up
architecture
subcategories,
of
the
that
with
will exist
group
items
derives
but it does
content
Starting
approach
also
the
and
group those
building
toward
objectives
a
information
and
on an analysis
functional
material
by the time
and then
product
so based
source
together
to
categories
requirements.
exists
(or
the site launches),
we
into
that
low-level
categories
into higher-level
structure
that
categories,
reflects
and user needs.
A top-down
architectural
approach is driven by
considerations
strategy
from the
c a t e g o r ie s
plane.
content
A bottom-up
architectural
approach is driven by
considerations
from the
c a t e g o r ie s
scope plane.
content
our
Neither
approach
Approaching
can sometimes
content
a
result
fitted
cause
itself
hand,
is
to
to
bottom-up
content
bal-ance
thinking
the
can
that
tuned
it isn’t
changes
between
the
other
sometimes
so precisely
accommodate
a
other.
about
On
approach
architecture
the
details
overlooked.
to the existing
Striking
than
from the top down
important
be
bottom-up
in an
enough
better
the archi-tecture
or
and
flex-ible
additions.
top-down
is the only way to make
and
sure
the final result can avoid these pitfalls.
THE ELEMENTS
OF USER EXPERIENCE
91
It’s
not
number
section
necessary
of
of
to
categories
the
adhere
at
any
architecture.
to
a
level
The
particular
or
in
categories
have to be the right ones for your users
any
just
and their
needs. Some people
steps
it takes
clicks
it
takes
destination
whether
it
Web
process
requirements
a
particular
the quality
of a
sign of quality,
steps the process
naturally
from
favor
the
took,
previous
a clearly
a confus-ingly
living
and
over
entities.
defined
compressed
time.
acquired
In most
along
accumulation
a
grow
the
way
structure
new
shouldn’t
of the site.
is its ability
to
growth and adapt to change. But the
of
new
content
re-examination
employed
architecture
require
they
cases, a few
the overall structure
of an effective
accommodate
They
feed-ing. Inevitably,
require rethinking
principles
reach
important
many
over
are
care
and change
require
to
alternative.
sites
One trait
user
will invariably
three-step
of
of
to evaluate
The most
followed
seven-step
the number
a task or the number
each step made sense to the user and
Users
constant
a
is not how
but whether
step.
for
as a way
site structure.
however,
favor counting
to complete
that
of
will
eventually
the
organizing
on the site. For example,
enabled
users
to
page
the
through
press
when
releases
you
organizing
day-by-day
had
only
a
might
few
have
months’
them by topic might
been
fine
worth,
but
be more
practi-cal
after a few years.
The entire
structure
user
experience,
including
the
of the site, is
built on an understanding
of your objectives
and
the needs of your
users. If what you want to accomplish
site is redefined
with the
or
the needs you intend the site to meet change, be
prepared to rework
the structure
of your site accordingly.
The need
for such structural
change
though;
rarely
announces
itself
in advance,
often, by the
time you can tell that you need to rework
architecture,
the
your
users are already suffering.
92
CHAPTER
5
THE STRUCTURE
PLANE
An adaptable
architecture
can
accommodate
the
addition of new content
within a section (top)
as well as entire new
sections
(bottom).
Architectural
The
basic
node.
A
Approaches
unit
node
of
information
can
correspond
structures
to
any
is
the
piece
or
group of information—it
can be as small as a single
number
of
(like
as an entire
the
price
a product)
library. By dealing
than with pages, docu-ments,
can
apply
a
common
or
language
or as
with nodes
large
rather
components,
and
we
a common
set
of
structural
concepts
to
a
diverse
range
of
problems.
The
abstraction
of
set
concerned
with. Most
ects are only
pages
the
nodes
explicitly
level
of
Web
concerned
also
allows
detail
site
be dealing
us
to
will
be
architecture
proj-
with the arrangement
on the site; by identifying
base-level
we
the page
node, we make it explicit
with anything
of
as our
that we won’t
smaller. If the page itself
is
THE ELEMENTS
OF USER EXPERIENCE
93
too small for the project
node correspond
the
page
individual
is
at hand, we can have each
to an entire section of the site. If
too
content
big,
we
elements
can
define
within
nodes
as
the page, and
the page as a group of nodes.
These
nodes
can be arranged
ways, but these structures
in many
different
really fall into just a
few general classes.
In a hierarchical
tree
or
structure—sometimes
parent/child
relationships
nodes . Child
nodes
within
the
parent
node.
Not
with
represent
broader
category
every
root
parent
of
concept
work
structure
of
the
the
tree,
of
hierarchical
understood
to
node
by
in
if
users
entire
you
and
hierarchies
related
concepts
represented
node
has
a
have
other
narrower
every node has a parent, leading
the
called
structure—nodes
spoke
hub-and-
by
the
children,
but
all the way up to
structure
prefer).
relationships
because
anyway,
(or
the
Because
the
well
is
software
this
tends
type
of
is far and away the most common.
Hierarchical
structure.
A
matrix
from
structure
node
to
dimensions.
allows
Matrix
for enabling
the
along
node
structures
users with different
through the same content,
can be associated
axis
but
really
want
need
accommodate
use-ful
needs to navigate
because
three
For example,
to
browse
to browse
both
each user need
THE
5
dimensions
if you expect
primary
navigational
isn’t
very
if some
products
by
groups.
however,
simply
often
move
more
PLANE
others
than
are
CHAPTER
of the matrix.
users
to
or
with one
94
STRUCTURE
user
two
A
can
of your
by
size, a matrix
matrix
cause
of
color,
can
more
problems,
users to rely on it as their
tool.
well
The
equipped
human
to
brain
visualize
movement
in four or more dimensions.
Matrix structure.
Organic
structures
don’t
on a case-by-case
basis,
no strong
concept
of
are
for
good
relationship
structures
sense
you
attempt
pattern. Nodes
consistent
is unclear
don’t
where
want
to
educational
sites,
as
of
users
are
on
an organic
need to reliably
a
strong
of
structure
If
free-form
entertainment
it can present
the same piece of content
whose
organic
architecture.
feeling
some
has
structures
But
with
in the
a
any
together
topics
evolving.
encourage
such
Organic
set
provide
they
good choice; however,
your users
or
follow
the architecture
sections.
a
to
connected
and
exploring
of
exploration,
are
can
or
be
a challenge
a
if
find their way back to
again.
THE ELEMENTS
OF USER EXPERIENCE
95
Organic structure.
Sequential
most
you’re
sequential
of
structures
familiar
experiencing
flow
informa-tion
faculties
are
with from
needed
one
of language
architecture
to process
the
offline
ones
you
media—in
right
now.
is the most
there
is,
it are built
are
fact,
The
basic type
and
right
the
into
our
brains.
all
designed
fashion.
used
as
Books,
to
articles,
be
Sequential
most
often
individual
sequential
for
structures
in
presentation
is
tend
which
the
essential
such as in instructional
Sequential
to
are
sequential
the
Web
struc-tures
sections;
to
video
a
are
such
large-scale
be
limited
order
of
meeting
to
content
user
needs,
material.
structure.
96
STRUCTURE
Organizing
Nodes
on
smaller-scale
or
and
in
structures
articles
applications
audio,
experienced
CHAPTER
5
THE
PLANE
Principles
in an information
structure
are
arranged
to orga-nizing
according
principles.
basic level, the organizing
by
which
grouped
Different
different
For
we
determine
together
and
and at different
example,
information
in
site,
the
we
case
might
At
its
most
is the criterion
which
which
prin-ciples
organizing
areas
principle
are
nodes
kept
will be
levels
of
applied
in
of the site.
a
have
are
separate.
corporate
categories
near
the top of our tree such as “Consumer,”
“Busi-ness,”
and
organizing
“Investor.”
principle
At
this
level,
is the audience
intended.
Another
categories
like
for which the content
site
“North
might
have
America,”
“Africa.”
Using
geography
principle
is
approach
one
the
“Europe,”
as
an
is
top-level
and
organizing
to meeting
the needs
of a global audience.
Generally,
the organizing
the highest
the
lev-els
product
levels
in the
of
principles
your
objectives
and
architecture,
con-tent and functional
site
you employ
are closely
user
needs.
issues
requirements
tied
at
to
At lower
specific
to
the
begin to have
a
greater
influence
on
the
organizing
principles
that should be used.
For
example,
a
site
with
will often
have chronology
organizing
principle.
news-oriented
as its most
Timeliness
factor
for users
(who, after
news
for information
on current
history) as well as for the creators
must
emphasize
the timeliness
prominent
is the single
important
sites
content
most
all, look
events,
to
not
of the site (who
of their content
in
order to remain competitive).
THE ELEMENTS
OF USER EXPERIENCE
97
At
the
factors
next
more
level
closely
play. For a sports
divided
into
in
the
tied
news
to
architecture,
content
site, the content
categories
such
as
other
come
might
into
be
“Baseball,”
and “Hockey”;
“Tennis,”
site
might
News,”
have
“National
Any
News,”
collection
consists
inherent
of
conceptual
to
solve.
general-interest
like
“International
News.”
information—whether
items,
200,
or
structure.
has more than one. That’s
have
more
and “Local
of
two
a
categories
The
In fact,
challenge
isn’t
but creating
objectives
and the needs of our users.
example,
repository
possible
question.
principle
according
So
the
our
informa-tion
organizing
information
the right
suppose
of
first
would be information
an
it usually
part of the problem
structure,
For
it
2,000 —has
structure
site
contained
cars.
would
thing
the
a
for our
about
to the weight
we
creating
arrange
a
One
the
of the car in
user
would
see
about the heaviest car in our
database, then the second heaviest, and on down to
the lightest.
For a consumer
the wrong
information
way to organize
site, this is probably
the information.
Most
people,
most
the weight
according
of
of
be
deal
important
fuel
less important,
or type
basis
overseas,
For
and
with
these
These
car
would
audience.
are professionals
the
business
people,
a
qualities
are
of
very
like
consider-ably
if they matter at all.
THE
5
PLANE
attributes,
are
provide
a
preceding
of
this
CHAPTER
science,
principles
with
information
becomes
type
98
STRUCTURE
for
weight
engine
concerned
the
if our users
daily
factor.
economy
model,
hand,
on a
cars
aren’t
appropriate
more
On the other
shipping
time,
to make,
probably
who
the
a car. Organizing
in
known
simple,
for
almost
example
the
as
language
facets,
and
flexible
set
any
content.
shows,
using
of
of
library
they
can
organizing
But
the wrong
as
the
facets
can
be
worse
common
than
response
using
to this
no
facets
problem
at
all. One
is to position
every conceivable
facet
and let the users
pick the one that’s
as an organizing
principle
important
to
them.
Unfortunately,
unless
simple information
this approach
unwieldy
The
the attributes
which
A
and
into an
so many
options
that
The
important—the
strategy
tells
us
scope
tells
us
the
what
will
suc-cessful
the specific
be
user
foremost
expectations
for.
Language and Metadata
aspects
is
the
of that
in the
experience
the
what
will meet those needs. In creating
the user’s
accounted
very
be on the user to sort through all
we identify
information
have
and pick out what’s
need,
information
minds.
users
is on us. The
structure,
with
that no one can find anything.
burden shouldn’t
users
dealing
of only a few facets,
soon turns the archi-tecture
mess.
to sort through
burden
you’re
consisting
users’
one
are anticipated
in
and
Even
if
the
structure
representation
your
subject
find
their
can’t
of
the
matter,
way
language
of
consistent
fashion.
your
consistency
a
users
the
and
reason,
accurate
think
won’t
about
be able to
architecture
if
nomenclature:
other
it’s
users
to
we
called
the
to use the
do
use
they
the
terminology
essential
and
The tool
is
perfectly
people
your
labels,
site uses. For this
that
your
around
under-stand
descriptions,
is
way
so
to
in
a
enforce
controlled
a
vocabulary.
THE ELEMENTS
OF USER EXPERIENCE
99
A
set
controlled
of
vocabulary
standard
another
area
Talking
to
terms
in which
users
and
is nothing
more
than
a
for use on the site. This is
user
research
understanding
is
essential.
how
they
commu-nicate is the most effective
system
of
nomenclature
them.
Creating
vocabulary
users
and
that
is
the
organization’s
that
adhering
reflects
best
way to develop a
will feel
the
way
internal
to
natural
a
language
to
to
controlled
of
prevent
your
your
j argon from creeping
onto
the site, where it will only confuse your users.
Controlled
vocabularies
consistency
people
right
next
for
to
the
that
the
content
sit
on separate
vocabulary
ensure
create
Whether
or in offices
the controlled
resource
help
content.
producing
to each other
definitive
speaking
also
all your
responsible
continents,
A
across
provides
everyone
a
is
the user’s language.
more
sophisticated
vocabulary
is
to
approach
cre-ate
to
controlling
thesaurus.
a
Unlike
a
simple list of approved
terms, a thesau-rus will also
document
terms
used but
a
alternative
not
thesaurus,
shorthand,
approved
you
slang
that
for use
can
terms,
map
or
are
commonly
on the site. With
internal
acronyms
jargon,
to
their
approved
include
terms,
counterparts.
other
providing
narrower,
or
picture
of
can
thesaurus
terms.
give
which
you
range
also
among
for
a
more
of concepts
in turn
approaches.
Having a controlled
vocabulary
can
the
broader,
Documenting
tional architectural
be especially
might
relationships
recommendations
the entire
content,
A
of
related
relation-ships
your
types
these
complete
found
suggest
or thesaurus
in
addi-
can
help-
ful if you decide to build a system that includes
metadata. The term metadata means simply
“information
a structured
about information.”
approach
It refers to
to describing
a given piece
of content.
100
THE STRUCTURE
Suppose
5
PLANE
we were
how
CHAPTER
your
dealing
with an article
latest product
about
is being used by
volunteer
metadata
fire departments.
Some
of the
for that article might include
.
.
.
.
.
.
.
The name of the author
The date the piece was posted
The type of piece (for example, a case study or article)
The name of the product
The type of product
The customer’s
industry
(for example,
volunteer
fire
department)
Related topics (for example, municipal
emergency
Having
this
information
allows
range
of
possible
architectural
would
be
difficult
(if
to
implement
detailed
agencies
or
services)
without
information
not
it.
you
us
to consider
approaches
downright
In
that
impossible)
short,
have
a
the
about
more
your
content,
the
structuring
shows
the
it.
If
potential
company
allow
more
flexibility
emergency
new
to expand into, having
needs
of
create
these
users
have
services
as a lucrative
us to rapidly
you
suddenly
market
for the
this metadata
a new
section
with
the
systems
to
in
will
to meet
content
we
already have.
But
track
itself
creating
technical
all this
meta-data
isn’t
consistent.
vocabularies
for
come
each unique
can
rely
on
connections
Your
won’t
in.
That’s
By
concept
in
site could
dynamically
link
more
term consistently
THE ELEMENTS
one
term
you
the
elements.
together
than use the same
OF USER EXPERIENCE
controlled
define
anyone
in their metadata.
and
content,
help
content
pages on a specific topic without
do anything
only
your
to
your
collect
us if the data
where
using
automation
between
help
all the
having
to
101
In addition,
and
more
good
information
search
be
on
engine
dumb —you
of
your
can
can
for
site
than
provide.
in
much
characters.
a
faster
to
basic
can
very,
very
of characters,
for
don’t
find
full-text
engines
they’re
looking
They
a
users
Search
general
go
provide
your
give them a string
pretty
string
way
but
powerful,
they
metadata
reliable
exactly
understand
and
that
what
any of it means.
Connecting
your
thesaurus
content
and
can
help
search
engine
search
for
even
some
subjects
with
metadata
make
the
engine
the
thesaurus
use
a disal-lowed
term. Instead
engine
providing
can
then it can check
gets highly
search
targeted,
to
recom-mendations
a
term;
at all, the user
results—and
that might be of interest.
The
map
for that preferred
no results
relevant
your
smarter.
term to a preferred
the metadata
of getting
for
a
for
other
maybe
related
Team Roles and Process
The documents
and
metadata
information
complexity
to
vary
content
the
big
spreadsheets
and
some
overall
interaction
depending
For proj-ects
databases
to help capture
of
and
on the
involving
structure,
can be an effective
information
interaction
architecture
way to document
cases,
will
tools
be
the nuances
pressed
the structure
communicate
tool for
or
visuway for us to
the branches,
groups, and interrelationships
components
of our site.
among
like
into
of a complex
design is the diagram. Representing
ally is the most efficient
a
simple
architecture.
But the major documentation
of
nomenclature
picture
substantially
In
the structure
of
in a hierarchical
architecture.
service
details
of the project.
text outlines
the
to describe
architecture
design— can
lot of
needed
the specific
a site—from
the
102
THE STRUCTURE
Web
site
things;
pretty
CHAPTER
PLANE
structures
trying
much
5
are
to convey
inherently
complicated
this complexity
guarantees
that
no
one
in words
will
read
them.
In the early days of the Web, this kind of diagram
was called a site map; but because
term used for a particular
site map is also a
kind of navigational
tool
on a site (which you’ll read more about in Chap-ter
6),
architecture
for
the
tool
diagram
we
use
is
now
internally
the
to
favored
term
describe
site
structure.
The
diagram
doesn’t
link
on every
page in your
cases
and
that
level
obscure
of
the
have
detail
to
document
every
site. In fact, in most
only
information
serves
the
to confuse
team
really
needs.
It’s
more
conceptual
together,
important
relationships
and which remain
steps in a given interaction
Early
in
express
my
career,
the same
to
: Which
document
cat-egories
separate?
sequence
I found
fit together?
myself
basic interaction
go
How do the
having
structures
to
over
and over again from project
to project. Over time,
I started
way
standardizing
the
ideas in my site diagrams.
set of shapes
I illustrated
my
I settled on a particular
that I used, and defined
what each of
those shapes meant.
The system
called
it
to
and
I created
the
Web
interaction
have adopted
Visual
to diagram
the Visual Vocabulary.
in
it. You
tools
for
all
can
see
over
learn
sample
using
www.jjg.net/ia/visvocab/.
I first
informa-tion
designers
Vocabulary,
download
2000,
site structures
Since
it
at
more
architects
the
world
about
diagrams,
my
is
posted
Web
the
and
site:
THE ELEMENTS
OF USER EXPERIENCE
home
media info
products
support
home
products
file
press releases
archives
office
products
103
The Visual Vocabulary
is a system for
diagramming
architectures
ranging
from the very simple
(top) to the very
complex
(bottom).
See www.jjg.net/ia /
visvocab/
details.
for more
continue from:
login flow
latest news
home
(2c)
continue to:
(2a)
entry page
member list
technical
papers
104
THE STRUCTURE
Many
structural
designers
employ
who
issues. In other
responsibility
for
someone’s
by
lap
5
PLANE
organizations
experience
conscious
CHAPTER
planning.
bear
organizations,
structure
default
Who
full-time
responsibility
often
rather
ends
than
user
for
however,
lands
in
through
up responsible
for
structure
often
depends
on
the
culture
of
the
orga-nization or the nature of the project.
For
content-heavy
which
creating
initially
seen
responsibility
the
site
as
for
people
working
within
or
historically
had
a
in
was
the
structure
of
development,
com-munications
groups.
been
led
If
by
technology-oriented
for
fallen to the technical
project
can
specialist
this
designer,
referred
title
benefit
dedi-cated
interaction
in
Web
activity,
the
content
responsibility
Sometimes
some
the
structure
project
has
manager
on the Web site.
full-time
the
organizations
on
marketing
has
culture,
commonly
Every
a
or marketing
internal
in
determining
organization
technical
or
presence
has resided
editorial,
the
sites
a
person
goes
but
information
creating
by
others
to as an information
confuse
from
the
it’s
specialize
organizational
a
issues.
job
prefer
architect.
you—although
architects
having
to structural
to
Don’t
true
title
be
let
that
exclusively
schemes
and
navigational
often
structures
than
have
some
design
not,
an
degree
of
issues
someone
Your
and
so
designer
experience
interaction
closely
has
become
a
user
more
more
will
with interaction
design
related,
sites,
architect
information
issues
are
experience
common
title
for
with these skills.
organization
ongoing
content
and vice versa. Because
architecture
often
for
information
work
might
experience
designer
your
If
staff.
not have
to warrant
your
as
hiring
a
Web
the volume
a full-time
of
user
permanent
member
development
efforts
of
are
mostly
THE ELEMENTS
OF USER EXPERIENCE
105
limited
up-to-date
to
keeping
and
you
the
don’t
content
do
you
have
much
new
development
between
projects
couple
every
experience
spend
your
stream
added
designer
of
years,
probably
money.
new
site-wide
of
But
content
if
a good
you
have
and
be most
users
that process
effective
and
for
for
user
way
to
a
steady
functionality
being
designer
can
in the way that will
meeting
meeting
staff
isn’t
to your site, a user experience
help you manage
redesign
a
the
your
needs
own
of
your
strategic
objectives.
Whether
you
structural
important
someone.
or
not
ones
that
Your
you
according
those
a
specialist
isn’t
concerns
site will have
plan
it
out.
require
con-crete
are
sites
address
but
it
addressed
a structure
The
less
results
to
important,
to a clear structural
that
produce
have
concerns
that
is
by
whether
are
built
plan tend to be the
frequent
for
satisfy the needs of their users.
their
overhauls,
owners,
and
chapter
6
The Skeleton
Plane
Interface Design, Navigation
and Information
Design
Design,
The
conceptual
structure
the mass of requirements
objectives.
On the skeleton
that structure,
identifying
begins
to give
shape
to
arising from our strategic
plane, we further refine
specific
aspects
of inter-
face, navigation,
and
make the intangible
information
structure
design
concrete.
that
will
Surface
Skeleton
Structure
Scope
Strategy
SensoryDesign
InterfaceDesign Navigation
n
Design
D
InformationDesign
Interaction
Design
Functional
Information
ati
Architecture
re
Content
en
Specifications Requirements
nt
User
Needs
ProductObjectives
108
SKELETON
PLANE
CHAPTER
6
THE
Defining the Skeleton
The
structure
chapter
plane
defines
skeleton
plane
functionality
addressing
plane,
we
plane,
the
will
our
smaller
level
looked
and
In
the
scale
of
that involve
large-scale
exist
on
almost
individual
to
presentation,
On the
interaction;
concerns
of
the
that
addition
issues
detail.
preceding
work;
form
with matters
of
at
the
will
what
take.
plane deals
in
product
concrete
refined
architecture
covered
our
defines
more
the skeleton
a more
how
structure
issues
the
of
skeleton
exclusively
components
at
and
their relationships.
On the functionality
through interface
buttons,
But
fields,
and
information
side, we define
design—the
other
products
interface
have
a
prob-lems all their own. Navigation
form
presenting
information
both
sides,
we
of
interface
specialized
have
the skeleton
familiar
unique
of
set
of
design is the
design
tailored
spaces . Finally,
information
realm
components .
to
crossing
design,
the
presentation
of
information
for
effective
communication.
product as functionality
ctionality
product as
information
surface
e
sk
t
le
on
InterfaceDesign NavigationDesign
InformationDesign
structure
THE ELEMENTS
OF USER EXPERIENCE
109
These
three
together—more
elements
covered
elements
so
than
in this
are
closely
any
of
book.
It’s
the
not
bound
other
uncom-
mon to be faced
with navigation
that
blur
begin
problems,
or
information
interface
Even
to
problems
encounter
design
questions
about
of
design.
identifying
us
suitable
correct
design
information
design that turn out to be matters
though
helps
to
into
the
these
better
lines
as
separate
assess
solution.
Good
between
areas
whether
bad information
difference
sometimes
get
blurry,
of
concern
we’ve settled on a
navigation
design
can’t
design. If we can’t tell the
the types of problems,
we can’t
tell if we’ve really solved them.
If it involves
providing
things,
it’s inter-face
means
by which
with
the
The
users
actually
functionality
defined
tions and structured
If it involves
places,
users with the ability to do
design.
it’s
architecture
in
in the interaction
providing
is
the
the
specifica-
design.
users with the ability to go
navi-gation
applied
interface
come into contact
a
design.
structure
The
to
information
the
content
requirements
design
we
developed;
is the lens through
that structure,
the
navigation
which the user can see
and is the means by which the user
can move through it.
If it involves
it’s
communicating
design.
This
elements
is the broadest
to the
user,
incorporating
aspects
almost
of
everything
we’ve
functionality
side
information
crosses
of the three
on this plane,
potentially
the
ideas
information
the
or
drawing
seen so far on both the
and
side.
boundary
Information
between
design
task-oriented
functionality
and information-oriented
tems because
neither interface
navigation
sys-
design nor
design can be
fully successful
to support
upon
without
good information
design
them.
110
CHAPTER
6
THE SKELETON
Convention
Habit
our
and
PLANE
and Metaphor
reflex
interaction
weren’t
reflex,
are the foundation
with
the
able to reduce
we’d
accomplish
world—indeed,
a
whole
if driving
any easier than it was the first
ability
mobile
to
needed
by
for
Convention
different
dirty
time
a
of
if
we
we do to
less
every
never
got
you tried
meal,
being
or
it?
use
a
thoroughly
tremendous
concentration
on
the
of lots of tiny reflexes.
caused
drove
thing
lot
a car
task— depends
allows
us
to
did
because
(though
those
when-ever
they
was
they
apply
reflexes
in
I used to have a car that
trouble
it. When
they
This wasn’t
was
cook
circum-stances.
invariably
first
the
the
accumulation
friends
drive,
phone—without
exhausted
much
so much of what
day. Can you imagine
Your
for
started
wash
thought
it probably
the
the
any
the
of
my
car, the
windshield.
windshield
was); rather, it was
because
they
headlights.
were
trying
The controls
from the conventions
Telephones
are
importance
of
another
layout
rows
Circular
the
six
time
standard
each,
arrangements
rotary-dial
are
or
still pop
becoming
phones
the time a user spends
THE ELEMENTS
such as two
rows
ever
like the layout shouldn’t
much of a difference,
with
up from
on which
the
time,
three-by-four
three
fade into the mists of technological
It seems
the
of
to
experimented
the
buttons
but these
on
different
example
From
for the buttons on a telephone,
of
time,
good
have
from
turn
they were used to.
conven-tion.
manufacturers
deviations
to
on my car were
of
to
rare
as
more
they
four.
time
are based
oblivion.
make that
but it does. If you measured
trying to figure
OF USER EXPERIENCE
111
out
which
telephone,
three
button
push
on
a
nonstandard
it might turn out to be something
seconds
per
difference—but
aren’t
just
filled
with
becomes
to
to
call.
the
pure
slow
that
those
Those
as
simply
big
three
three
frustration,
agonizingly
of convention
user,
time.
lost
Not
like
a
seconds
seconds
are
a reflexive
task
because
the rug
has been pulled out from under
the
user’s feet.
In fact,
digits
standard
do with
remote
not
telephone’s
for
other
three-by-four
inverts
used
registers,
applications
by
order
is used
that have
as
in this
old
of
the
adding
digits
on calculators,
and
such
as
in
nothing
microwave
Interestingly,
only standard
the
keypad,
such
matrix
that it has become
devices
telephones,
controls.
the
standard
cash
the
is so well ingrained
the
inventory
phone
pad
is
“10-key”
machines,
which
telephone
keyboards,
specialized
to
ovens or
area: The
on the
of
the
ATMs,
data-entry
systems.
Because
both
standards
people
can
though
a single
use
adapt
a
to
three-by-four
either
standard
with
matrix,
relative
ease,
really be the best
would
solution of all.
This
is
not
interface
to
convention.
cautious
only
say
problem
that
Instead,
about
the
you
deviating
do so when
benefits.
Creating
requires
having
from
explicitly
every
to
simply
be
convention
approach
successful
to
adherence
should
a different
a
answer
slavish
is
and
offers
user
clear
experience
defined
reasons
for
every choice you make.
Making
that
your
your
important,
your
product
but
interface
conceptual
interface
users
are
even
consistent
already
more
important
consistent
mod-els
for
the
can help you ensure
with
familiar
with
is
is making
itself.
features
internal
others
with
of
The
your
112
SKELETON
CHAPTER
PLANE
consistency.
same
If
familiar
Even
two
features
they
are
requirements
in both
places
the
ideas
conceptual
conceptual
that
apply
models
not
identically)
like “start,”
can be found
the
for
a
be
treated
wherever
apply
what
they
other
parts
of
treatment
already
of
similarly
they
appear.
“go back,”
or “save”
throughout
know
the system,
is
features
variety
in a wide range of contexts.
these a consistent
same
who
to the other.
models
“finish,”
the
to have
a user
across
should
Concepts
with
likely
. Using
allows
with one to adapt quickly
where
differ,
have
model,
interface
conventions
(if
you
conceptual
similar
THE
6
Giving
lets users
from having
getting
them
used
to their
goals faster and with fewer mistakes.
Just
as you shouldn’t
take
the conceptual
models
underlying
you
your
should
product
around
Metaphors
cute
interaction
resist
for
the
a series
the
design
of
features
concrete
of
and fun, but they almost
as it seems
they
should.
too
literally,
to construct
impulse
your
your
metaphors.
product
are
never work as well
In fact, they
often
don’t
work at all.
In some cases, you might be inclined to pattern the
interface
design for a particular
interface
of a real-world
navigation
just
and
like
in which
in
a
navigational
product
of
physics,
the
the
you
real
could
“turn”
magazine?
Most
devices
Screen-based products
the
Slate’s
pages
interfaces
of
the
real
world:
materials,
of
and
so
on.
such as Web sites and other
software have few of the same constraints.
THE ELEMENTS
after the
in the real world are the
constraints
properties
function
object. Remember
OF USER EXPERIENCE
113
Drawing
and
analogies
experiences
might
on
However,
this
nature
Even
what
though
the
of
its
metaphorical
you,
it’s
just
your
users
come
you
telephone
phone
any
of
number
does
mean?
call? Check
Will
cultural
that
it
get a
about.
obscures
revealing
between
clear
allow
to
associations
if those
background
little
it.
the feature
is
of
apply— espe-cially
a different
What
usually
instead
site
world
all
representation
of
might
from
do.
one
are
approach
the association
and
your
real
to help people
features
feature
of
in the
way
those
kind
of
features
have
seem like a good
handle
the
between
people
than
picture
me
to
my voice mail? Pay
users
of
a
make
a
my phone
bill?
Of
course,
provide
the
better guesses
are
intended
diverse
content
some degree
of
of context
your
about what features
to
represent.
the range of content
site
should
to help users make
your metaphors
But
the
and functionality
more
you
offer, the less reliable
at any rate, some
these guesses
part
of your
going to guess incorrectly.
simpler) to eliminate
Using
metaphors
reducing
get
around
product.
Having
represent
an
numbers
coffee
effectively
and
might
shop
effort
use
an
icon
be just
to represent
is
altogether.
really
required
the
actual
is always
It would be better (and
that guesswork
the mental
become—and
audience
just
for
functionality
of
a
of
phone
directory
of
about
users
book
chat
area
is
of a
a bit
more problematic.
114
SKELETON
PLANE
Interface Design
CHAPTER
to
telephone
fine; having a picture
your
to
your
6
THE
Interface
design
interface
to accomplish
in
a
is
elements
way
and
that
all about
arranging
will
easily used. Tasks
be
for
end up on which
interaction
the
design
those
user
down
functions
of
which
the
for
aspects
and reducing
altogether).
screens
with.
Which
is a matter
structure
of
plane;
those
the
in
which
important
is
users
stuff.
stuff, on the other hand, doesn’t
noticed—sometimes
interfaces
are
notice
Unimportant
contend
in the
several
set of interface
design.
interfaces
immediately
across
and
are real-ized on the screen
the realm of interface
Successful
to
right
is trying
understood
will often stretch
functions
the
them on the screen
readily
elements
One
the user
each contain-ing a different
screens,
how
selecting
for the task
because
biggest
it’s
not
challenges
complex
systems
the users
don’t
their visibility
there
of
is
need
at
get
all.
designing
figuring
out
to deal with
(or leaving
them out
For
people
with
a
background
in programming,
this way of think-ing can require some adjustment.
It’s often very different
Good
programmers
most
unlikely
scenarios
programming
doesn’t
exactly
So
take
for
into
(called
jar-gon) . After
accomplishment
software
from what they are used to.
always
account
“edge
that
for
under
programmers
equally,
whether
in
all,
the
ultimate
programmers
is
creating
that never breaks; but programming
account
the
cases”
edge
cases
is
those extreme
are
trained
it
represents
to
likely
that
to
do
circumstances.
treat
one
every
user
or
case
one
thousand.
This approach
An interface
doesn’t
work for interface
design.
that gives a small number of extreme
cases the same weight as the needs
THE ELEMENTS
OF USER EXPERIENCE
115
of
the
vast
ill-equipped
majority
to
well-designed
action
users
interface
are
most
likely
This
doesn’t
most
users
can
along
to
that
push
employ
the
the
a
way
to
your
understanding
the
checked
by
automatically
search
Show
to
of
default
be
of whether
most
means
options
to the
tasks
of them would
more
took
ease
simple
users’
brief
Detail
with
they
the label on the checkbox
to
One
over
More
happy
your
are
Interface
tricks
goals.
every
users
one.
of
results
Me
makes
is first presented
leads you to think
leaving
and
about the default
user. If
regardless
biggest
their
when the interface
detailed
of
solution
variety
trick is to think carefully
prefer
take
A
courses
to access and use.
the
selected
and goals
to
easiest
the
up
happy.
is to make the button
problem
likely
designs
ends
audience
recognizes
interface elements
mean
users
either
those
interface
of
make
what
ones,
checkbox
people
they
the time
will
get,
to read
and make a decision
for
themselves.
Even
automatically
selected
the
sometimes
last
time
than would
appear
is
result
is
system
options
stopped
more
by,
technical
necessary
impractical
a
the
they
requires
as
a
better
remembers
that
a
user
but
this
acrobatics
on the surface, and
for
some
development
teams to imple-ment successfully.
Technology
inherent
tools
and
technical
interface
options
available
both bad and good. It’s
opportunities
approaches
technologies
oth-ers.
users
But
who
for
that
might
learn
set of standard
that
to us. This
bad because
be
be
impossible
situation
how
possible
is
to work
controls
also
the
is actu-ally
it limits
using
certain
to realize
good,
our
interface
with
because
with a fairly
can apply
across a wide range of products.
have
limit
innovation—some
might
this
frameworks
con-straints
small
that knowledge
116
CHAPTER
SKELETON
PLANE
Interface
conventions
change,
but
technologies
re-examine
seem
they
do,
if
sometimes
existing
like
very
conventions
some new ones. User experience
to seek out new
gestural
of
the
range
standard
of
desktop
or
controls
computer
of standard
Checkboxes
independently
allow
designers
see
continue
devices.
across
to select
like
Most
wide
with
like Mac
systems
elements:
of one another.
a
originated
systems
operating
users
to
up with
for technologies
we
interface
New
need
or come
products
operating
These
shouldn’t
slowly.
the
touchscreen
controls
screen-based
Windows.
handful
conventions
and
they
bring
THE
6
options
offer
OS
a
Radio buttons
allow users to select one option
from among a set of mutually
exclusive
options.
Text fields allow users to —wait for it— enter text.
THE ELEMENTS
117
OF USER EXPERIENCE
Dropdown
as
radio
lists
compact
space,
be presented
List
boxes
checkboxes,
space
Action
the
they
allowing
same
do
functionality
so
in
a
more
many
more
options
same
functionality
to
efficiently.
provide
but
the
they
do
list
this
so
in a
boxes
enables
more
scroll).
the
list
as
compact
As
with
to
easily
box
a large num-ber of options.
buttons
Typically,
other
but
(because
dropdowns,
support
provide
buttons,
they
can
tell
information
do
lots
of
the
system
the
user
different
to
has
take
things.
all
provided
the
via
other
interface
something—take
Some
technologies
elements,
using
elements
but
in
provide
don’t
them,
flexibility
force
allowing
how
the
the user. Con-sequently,
lot
more
and
action—with
choices
to
be
do
it.
this
same
designers
a
set
of
to
stick
greater
interface
these
made
can
basic
degree
of
respond
to
interfaces
involve
during
the design
process, and they tend to be harder to get right.
118
SKELETON
PLANE
Dropdown lists can
to
CHAPTER
6
THE
a
hinder users by hiding
important
options
from view (left). Radio
buttons easily display
all the available options
(right), but they take
more space in the
Juggling
all the
interface.
different
among
that
also
want
to
database,
to
hide
set
the
it
of
type
might
puts
choosing
radio
put
there are only six to choose
space
choices
but
from
categories
less
load
True,
on the
buttons,
in the
more
from
trade-offs.
you some
available
people
search
but
a
and
involves
will save
relative
user. Having
elements
inevitably
dropdown
screen
will
interface
them
on
load
the
from anyway,
it
the
they
on
the
user;
if
maybe
some checkboxes
would be better.
Navigation Design
Designing
navigation
simple business:
users
for
the
Web
seems
like
a
Put links on every page that allow
to get around
on the site. If you scratch
the
surface,
however,
design become
any site must
the
complexities
apparent.
of
navigation
The navigation
design
accom-plish three simultaneous
of
goals
:
.First, it must provide
users with a means for
getting from one point to another on the site.
Because
it’s usually impracti-cal (and even when
practical, it’s generally
not a good idea) to link to
every page from every other page, navigation
ments have to be selected to facilitate
behavior—
ele-
real user
and by the way, that means those links
have to actually
work, too.
THE ELEMENTS
OF USER EXPERIENCE
119
.Second, the navigation
communicate
design must
the rela-tionship
between the
elements
it contains. It’s not enough to merely
provide a list of links. What do those links have to
do with each other? Are some more important
than others? What are the relevant
differences
between them? This com-munication
for users to understand
is necessary
what choices are available
to them.
.Third, the navigation
design must communicate
the relation-ship between its contents
the user is currently
and the page
viewing. What does any of this
stuff have to do with what I’m looking at right
now? Communicating
this helps users understand
which of the available
choices might best support
the task or goal they are pursuing.
Even
for
products
information-
all—these
Unless
users
people
oriented— or
three
can
aren’t
functionality
you’ll
find their
aren’t
considerations
all your
interface,
that
need
way
rely
sense of direction
to
some
around.
some
Web
come
fits
sites
into
into
a
navigation
In a physical
degree
on
to orient themselves.
an
at
play.
single
to
help
space,
innate
(Of course,
some people just seem to be perpetu-ally
the
mechanisms
in our
brain
that
lost.)
help
us
our way around in the physical world (“Let’s
think
the
entrance
where
I came
behind
me and to the left”)
helping
us find our way around
But
find
see, I
in should
are utterly
be
useless
in
in an information
space.
That’s
page
why
it’s of vital importance
that every
of a Web site
communicate
clearly to users where they are on
the site and where
they can go. To what extent users orient
themselves
spaces
in information
is a matter of some debate: Some people
strongly
favor the
notion that users
make little maps
in their heads
when they visit
Web sites, just as
they do in hardware
120
stores and libraries;
others
CHAPTER
6
THE SKELETON
claim
PLANE
users
navigational
as if each
rely
almost
step
they
from their memory
took
keep
through
just
the structure
how
of
the
that knowledge,
is
that
assume
the site
users
(or how
Web
heads. Without
to
on
faded
shortly after they took it.
It’s hard for us to know
people
entirely
and wayfind-ing cues in front of them,
sites
the best
carry
no
much)
in their
approach
knowledge
with them from page to page. (After all, if a public
search
any
engine
page
such
could
be
as Google
an
indexes
entry
point
your
to
site,
your
site
anyway.)
Most
sites
actually
systems,
each
enabling
the user
in a
types
variety
of
practice.
of
provide
fulfilling
multiple
a
to navigate
systems
role
in
the site successfully
circumstances.
navigation
navigation
particular
Several
have
common
sprung
up
in
Global navigation.
Global
navigation
provides
access
to
the
broad
sweep of the entire site. The use of the term global
here doesn’t
appears
necessarily
on
every
imply that this navigation
page
in
the
site—although
that’s not a bad idea. (We use the term
to
refer
to
throughout
persistent
Instead,
set
of
navigation
a
site;
elements
again,
are
global navigation
access
points
elements
that
keep
not
in
together
might
persistent
appear
mind
necessarily
brings
users
that
that
global.)
the key
need to get
from one end of the site to the other. Navigation
THE ELEMENTS
121
OF USER EXPERIENCE
bars linking
a classic
you
to all the main sections
example
might
(eventually)
of global
want
to
of a site are
navigation.
go,
you
can
Anywhere
get
there
with global navigation.
Local navigation.
Local
navigation
what’s
“nearby”
hierarchical
provide
children.
reflect
content,
to
your
the
local
ways
a
users
with
architecture.
page’s
parent,
architecture
users
navigation
use than other navigation
access
is
think
will
to
In a strictly
local navigation
architecture,
access
If
provides
in the
might
siblings,
and
constructed
about
typically
to
the
site’s
get
more
systems.
Supplementary
navigation.
Supplementary
navigation
to related content
accessible
provides
shortcuts
that might not be readily
through the global or local navi-
gation. This type of navigation
scheme
offers
some of the benefits
of faceted
classification
(allowing
users to
discussed
shift the focus of their exploration
without
in Chapter
5
of the content
starting
over at the beginning),
while still permitting
the
site to maintain a
primarily
hierarchical
122
THE SKELETON
Contextual
navigation.
PLANE
architecture.
CHAPTER
6
Contextual
inline
of
navigation
navigation)
the
page
example,
is
itself.
reading
they
the
an
the relevant
Reaching
their
needs,
crammed
can’t
pick
contextual
clutter.
When they are
users
of
decide
information.
to scan the page
for
element— or worse,
sending
to the search engine—why
not put
link right there?
all
the
the
way
more
tasks
full
out
of
back
to
you understand
navigation.
users’
content
of navigation—for
piece
your users
the better
contextual
your
additional
navigation
them scurrying
called
the
within the text of a page—is
or misutilized.
of forcing
right
plane,
type
in
the text is often the moment
need
Instead
This
a hyperlink
often underutilized
(sometimes
embedded
effectively
so
what’s
navigation
clearly
goals—if
many
your
hyperlinks
relevant
will
strategy
users
and
you can deploy
If it doesn’t
and
the
your
to
text
that
their
(rightly)
support
be
is
users
needs—
seen
as
Courtesy
navigation
that
don’t
users
are commonly
physical
hours
all that
whether
knowing
helps
a retail
operation
customers,
contact
provided
world,
of
provides
most
helpful:
access
need on a regular
to
as a con-venience.
store will usually
at
its
items
basis, but that
entrance.
In the
post
For
of the time, this information
Anybody
can tell pretty
isn’t
quickly
or not the shop is open for business.
that the information
them
when
information,
they
do
is readily
need
feedback
it.
forms,
its
most
But
available
Links
and
to
policy
statements
are commonly
found in courtesy
navigation.
THE ELEMENTS
OF USER EXPERIENCE
123
Courtesy
navigation.
Some
navigational
within
the
their
own,
navigation
of
your
with
the
provided,
of
site.
the
These
conclusion
attempting
other
systems
that
site
and quickly
they’re
is a common
links
to
beneath
architecture.
as
pro-viding
a
better
remote
links
off
come
not
to
even
navigation
two
more
detail
levels
isn’t, there’s
snapshot
site map
outline
to all the top-level
major
than
The
hierarchical
second-level
them. Site maps
high-level
systems
to figure them out.
map
presented
or
remote
are
taken one look
that gives users a concise, one-page
overall
on
content
naviga-tional
or when they’ve
at your navigational
A site
embedded
pages, but stand
tools that users turn to when they get
frustrated
the
aren’t
of your
independent
functionality
you’ve
devices
structure
than
of
sections
usually
typically
something
architecture).
usually
the
sections
need
wrong
site,
with
indented
show
hierarchy—beyond
users
probably
don’t
is
of
tool
of the
more
that
(and
is
if it
with your
An index
links
is an alphabetical
list
of topics
with
to relevant
pages, much like the index in the back of a book.
This type of tool
is most effective for sites that have a great deal of
content
covering a
diverse range of subjects. In most other cases, a site
map and a wellplanned
Indexes
architecture
should
be sufficient.
are sometimes
developed
for individual
sections
of a site, rather
than attempting
to cover the entire sweep of the site’s content; this
approach can be
useful when you have sections intended to serve different
with divergent
information
124
THE SKELETON
PLANE
audiences
needs.
CHAPTER
6
Information
Design
Information
finger
holds
the other
together.
down
design can be difficult
on. But it often
serves
components
of the design
In all cases, information
to making
design
comes
about how to present
so that people can use it or
information
understand
Sometimes
decisions
to put your
as the glue that
it more easily.
information
design is visual. Is a pie
chart the best way to present that data, or would a
bar chart work better for our users? Does the
binoculars
icon adequately
convey the concept
search-ing the site, or would a magnifying
better understood?
design
involves
information.
Sometimes
grouping
We
design
for granted
seeing
common
often
or
take
because
information
information
arranging
this
we
pieces
aspect
are
grouped
of
used
.Job title
.Telephone
.Street
number
address
to
in certain
ways. For example, look at this list of items:
.State
of
glass be
of
.Name
.Zip code
.Organization
.City
.E-mail address
THE ELEMENTS
OF USER EXPERIENCE
It seems a little confusing,
because
usually
it looks like this:
.Name
.Job title
.Organization
.Street
address
.City
.State
.Zip code
. Telephone
number
. E-mail address
Even this arrangement
. Personal
could be clarified
information
.Name
.Job title
.Organization
further:
. Address
information
.Street
address
.City
.State
.Zip code
. Other contact
.Telephone
information
number
.E-mail address
125
126
SKELETON
6
THE
PLANE
This example
slightly
CHAPTER
seems pretty
different
straightforward,
but a
list of items would prove more
challenging:
.Power limit
.Rotor size
.Tank capacity
.Transmission
type
.Median angular
.Chassis
.Maximum
The
key, of
course,
elements
your
think
users
The
these
elements
into
group
in a way
and
really
when
arrange
reflects
their
amount
to
have
to
and
between
micro-level
information
we
the
how
tasks
relationships
architecture;
play
and
that
supports
conceptual
information
comes
output
is to
information
goals.
velocity
style
design
communicate
that struc-ture on the page.
Information
problems
gather
design plays a role in interface
because
information
communicate
Error
the
interface
from
information
messages
are
a
the
to
classic
problem in creating successful
instructional
because
the
information
biggest
must
user,
the
as
information
is another
challenge
is
well.
design
providing
one,
getting
only
but
user
interfaces;
design
not
if only
users
to
actually
read
the
instruc-tions.
system has to give the users
them
it’s
to
use
because
they’re
just
the
interface
they
made
getting
Any
some
time
information
the
for
successfully—whether
a
mistake
started—that’s
or
because
an information
design problem.
THE ELEMENTS
OF USER EXPERIENCE
127
Wayfinding
One
important
and navigation
is
function
design
supporting
understand
where
that
work
wayfinding—
they
are
go. The idea of wayfinding
of
public
spaces
in
stores, roads, airports,
from
the
information
together
the
and
comes
physical
of
design
perform
helping
where
and parking
incorporation
to
people
they
can
from the design
world.
Parks,
lots all benefit
wayfinding
devices.
Park-ing garages,
for example,
color-coding
give
remember
signs,
to
where
maps,
they
and
will sometimes
people
cues
left their
other
to
help
use
them
cars. In airports,
indicators
help
people
typically
involves
find their way around.
On Web
sites, wayfinding
and
navigation
design
navigation
systems
have
the
to
provide
site, they
choices
clearly.
quickly
get
where
they
information
employed
access
also
have
Good
a mental
can
to
by
the
to
a site
only
areas
communicate
picture
of
enables
where
which
The
not
different
way-finding
go, and
both
design.
users
they
choices
of
those
to
are,
will
get
them closer to their objectives.
The information
involves
page
navigational
parking
design
function.
garages,
successful
some
in using
almost
never
that
For
of wayfinding
don’t
example,
Web
sites
color-coding
section a user is looking
is
component
ele-ments
by
a
like
in
have
been
to indicate
at. (However,
used
perform
just
very
which
color-coding
itself—instead,
it
reinforces
place.)
are
another
Icons,
other
wayfinding
label-ing
information
used to help reinforce
system
systems,
design
and
also
in
typography
choices
sometimes
a sense of “you are here” for
users.
128
SKELETON
CHAPTER
THE
6
PLANE
Wireframes
Page
layout
interface
together
page
navigation
interface
on
the
where
and
information
navigation
to form a unified, cohesive
layout
different
is
design,
must
systems,
view
of
elements
page;
and
incorporate
each
the
designed
by
any
information
come
skel-eton. The
the
to
architec-ture;
required
the
all
design,
design
various
convey
all
a
the
functionality
design
that
supports
both of these, as well as the information
design of the page content
It’s
a lot to balance
layout
is covered
page schematic
bare-bones
all the
itself.
all at once. That’s
in detail
or wireframe.
depiction
components
(as
of
a
why
in a document
page
called
The wireframe
the
name
page
and
suggests)
how
they
together.
Wireframes
capture
COURTESY
all the skeleton
decisions
in a single
document
GLOBAL NAV
WAYFINDING
for
CUES
visual design work and
HEADER
site implementation.
Wireframes
of detail—this
one is
SEARCH QUERY
GRAPHIC
dropdown
can
contain varying levels
NAV
LOGO
that serves
as a reference
LOCAL
NAV
Pack my box with five dozen liquor jugs.
How razorback-jumping
frogs can level six
The job requires extra pluck and zeal from
pretty light.
text field
piqued gymnasts! We dislike to exchange
job lots of sizes varying from a quarter up.
button
every young wage earner.
PARTNER CONTENT
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.
SUPP. NAV
The job requires extra
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.
How razorback-jumping
frogs can level six
piqued gymnasts!
COURTESY
NAV
a
is a
bright paint. Pack my box
with five dozen liquor jugs.
of
fit
THE ELEMENTS
OF USER EXPERIENCE
129
This
simple
line
drawing
annotated,
referring
diagrams
or
the
other
documentation,
is
usually
reader
to
interaction
content
heavily
architecture
design
requirements
or
specifications, or other types of detailed
functional
documentation
wireframe
as
refers
elements,
it might
needed.
to
For
specific
provide
example,
existing
pointers
if
a
content
to where
they
can be found. In addition, the wire-frame will often
contain supplementary
that
might
not
the wireframe
In many
be
notes on intended
obvious
from
just
and the architecture
ways,
the architecture
behavior
looking
at
diagram.
diagram
we saw
back in the struc-ture plane is the grand vision for
the
project;
wireframe
just how
is
here
the
in
the
detailed
that vision
skeleton
document
will be fulfilled.
plane,
that
the
shows
Wireframes
will sometimes
navigational
detail
be supple-mented by comprehensive
specifications,
the
precise
describing
composition
of
in
each
more
of
the
various naviga-tional components.
For
smaller
wireframe
less
complex
products,
however,
multiple
wireframes
the complexity
are
of the intended
probably
won’t
however.
Just as the architectural
us
to
need a wireframe
classify
content
categories
or types,
standard
screens
development,
Wireframes
involved
needed
to
result. You
pro-cess
allowed
into
small
emerge
projects,
broad
number
of
from
wireframe
on the functional
or naviga-
of your product.
are a necessary
first
step in the
of formally
establishing
almost
single
for each screen,
elements
a relatively
will
based
tional diversity
process
a
that will be built. For many
the screens
convey
or
is suffi-cient to serve as a template for all
the visual
design
for the site, but
everyone
in the development
process
will use
them at some point.
130
THE SKELETON
People
can
the
6
PLANE
responsible
structure
that
CHAPTER
for
refer
final
expectations.
strategy,
to the
product
People
building
the product
answer
questions
scope,
wireframe
will
to
meet
responsible
and
confirm
their
for
actually
can refer to the wireframe
about
how
the
site
to
should
function.
The wireframe,
architecture
often
a
subject
experience
designers
who
reflect
architec-tures.
wireframes
visual
of
designers
architectures
don’t
being the place where information
and
design
debate
come
and
complain
together,
dis-pute.
that
is
User
visual
create
wireframes
obscure
their
behind
navigation
systems
that
the
Visual
produced
principles
designers
underlying
the
complain
that
by user experience
designers
reduce
artist,
their
role
to
squandering
that
the
of
a
paint-by-numbers
experience
and
expertise
in visual commu-nication they bring to information
design problems.
When
you
have
designers
and
produce
successful
collaboration.
the details
side
to see
and
it
process
can
separate
visual
The process
is
having
uncover
(instead
of
later,
enables
point
problems
when
way
is wondering
out
each
of view,
early
the
to
through
to work
together
from the other’s
help
being built and everyone
working
of
experience
the only
wireframes
of the wireframe
issues
user
designers,
in the
product
is
why it isn’t
as planned).
All of this makes
wireframes
sound
like a whole
lot of work. They don’t have to be. Documentation
is never
an end in itself; it is only a means
end.
Creating
not
merely
documentation
a
counterproductive
waste
and
of
for
its own
time—it
demoral-izing.
the right level of documentation
can
to an
sake
is
be
Producing
for your needs—
and
with
not
fooling
yourself
less—turns
that
you
documentation
can
from
get
by
a problem
into an advantage.
THE ELEMENTS
OF USER EXPERIENCE
131
Some of the most
worked
sketches
team
with sticky
in
programmer
level
when
successful
wireframes
with have been nothing
which
sit
notes
the
right
of documentation
programming
attached.
designer
next
is
to
For
halfway
around
the
more formal is probably
The value of wireframes
all three elements
ever
small
the
other,
that
sufficient.
responsibility
entire team and not just one person—and
is
a
and
each
is perfectly
the
I’ve
more than pencil
of
But
an
that team
world—something
a
bit
called for.
is the way they integrate
of the structure
plane: interface
design, through
interface
the
the arrangement
elements;
identification
navigational
through
and
systems;
the
and
placement
components.
together
a single
can
define
underlying
a
of
core
information
By
design,
prioritization
bringing
that
structure
the
builds
while
of
through
definition
document,
skeleton
conceptual
selection
design,
and
informational
into
and
navigation
of
all three
wireframe
on
the
pointing
the way forward toward the surface design.
chapter
7
The Surface
Plane
Sensory Design
At the top of the five-plane
tion to those
aspects
model, we turn our atten-
of the product
our users
will
notice first: the sensory
design. Here, content, func-
tionality, and aesthetics
come together
to produce
a
finished design that pleases the senses while fulfilling
all the goals of the other four planes.
Surface
Skeleton
Structure
Scope
Strategy
Sensory
Design
InterfaceDesign Navigation
n
Design
D
InformationDesign
Interaction
Design
Functional
Information
ati
Architecture
re
Content
en
Specifications Requirements
nt
User
Needs
Product
Objectives
134
SURFACE
PLANE
CHAPTER
7
THE
Defining the Surface
On
the
skeleton
primarily
with
concerns
the
interaction;
Moving
to
presentation
that
of
to
design
to enable
the
enable
and information
movement
design,
the
communicate
the
logical
of
we
are
design
we should
elements
visual
of
design,
should
now
and
arrangements
the
group
the
we
that
product.
atten-tion to information
how
arrangement
plane,
sensory
skeleton
through
to
to
surface
the
information
attention
Interface
elements
elements
the
the
we determine
the
dealing
to the user.
with
example,
were
design,
ele-ments
of
up
up
of
navigation
the product;
dealing
make
arrange-ment.
of
arrangement
information
we
arrangement
arrangement
through
plane,
and arrange
page;
through
determine
be presented
For
design,
how
visually.
product as functionality
ctionality
product as
information
s
f
ur
ac
e
SensoryDesign
skeleton
THE ELEMENTS
OF USER EXPERIENCE
135
Making Sense of the Senses
Every
experience
products
with
and
each
we
services,
have—not
but
with
other—fundamentally
just
the
with
world
comes
to
and
us
through
the
our senses.
last
stop
experience
to
everything
about
people’s
In the design
on
the
our
users
our
senses. Which
hearing,
touch,
depends
way
smell,
to
this is
delivering
will
the five
and
an
how
: determining
design
of
process,
manifest
senses
to
(vision,
taste) we can employ
on the type of product
we are designing.
Smell and Taste
Except
for
food,
fragrance,
smell and taste are rarely
experience
designers
sometimes
smell
develop
of
which
a
has
are
strong
long
after
of
the result
in the product’s
scented
true
products,
as
“new
user
people
with
car
the
smell,”
that it can be added
the car has
“new”—but
of the choice
construction,
for
that
associations
so popular
definition
typically
experience
It’s
product—such
proven
as a fragrance
anyone’s
.
or
considerations
outstripped
these
smells
of materials
not the decisions
of
designers.
Touch
The
touch
experience
of
a
physical
product
lies
within
the
designers
physical
entails
realm
of
industrial
are concerned
engagement
with
ele-ments of interface
(such as the arrangements
phone)
but
(rounded?
rough?)
of
as
the
shape
textures
and the materials
This
design
on a mobile
purely
the
136
SURFACE
buttons
such
user’s
product.
and interaction
includes
square?),
Industrial
with the
a
also
considerations,
design.
primarily
sensory
of
used
a
device
(smooth?
employed
CHAPTER
7
THE
PLANE
(plastic?
metal?).
screen-based
Thanks
experi-ences
to
vibrating
can
have
devices,
touch
dimensions
as well. Mobile phones and video game
controllers
both
with the user.
use
vibration
to
communicate
Hearing
Sound
kinds
and
plays
a
role
in
the
products. Think
of
buzzes
messages
in
a
of
many
of all the different
beeps
typical
experience
automobile
they send: Your headlights
seat belt is unfastened.
left your
key
and
the
are on. Your
Your door is open, but you
in the igni-tion. Sound
can be used
not just to inform the user, but to imbue a product
with a sense of personality.
user can easily
For example,
recall the variety
and bumps that accompany
any TiVo
of bings,
navigation
boops,
through the
TiVo experience.
Vision
This
is
designers
the
area
have
the
where
most
user
visual design plays a role in virtually
product
there
chapter
will focus
experience
sophistication,
is. For this reason,
on how
visual
because
every kind of
the rest
design
of this
supports
the user experience.
Initially,
simple
you
matter
might
of
think
visual
aes-thetics.
design
Everybody
is
a
has
different
taste, and everybody
of what constitutes
argu-ment
every
down
to
a visually
over
design
personal
everybody
does
aesthetics,
but that
appealing
a
doesn’t
on what
just
right?
different
mean
looks
idea
design, so
decisions
preference,
have
have to be based
has a different
comes
Well,
sense
design
of
decisions
cool to everyone
involved.
Instead
in
of
terms
evaluating
of
what
visual
seems
you should
THE ELEMENTS
design
ideas
aesthetically
focus
solely
pleasing,
your attention
on
OF USER EXPERIENCE
137
how
well
design
they
support
the lower
work.
How
the objectives
planes?
effectively
does
defined
by each
of
the look
of
For example,
does
the
the
product
of
the
make
distinctions
architecture
between
unclear
undermining
the
design clarify
the options
structure?
or
Or
does
available
sections
ambiguous,
the
visual
to users, rein-
forcing the structure?
Communicating
a brand identity, for example,
common
strate-gic objective
identity
comes
language
you use or in the interaction
across
for a Web
in
many
your site’s functionality—but
used
to
design.
communicate
If
technical
fonts
the
and
and
you
identity
want
authoritative,
bright
pastel
ways—in
the
design
of
one of the main tools
brand
identity
is a
site. Brand
colors
is
to
using
visual
convey
is
comic-book
probably
isn’t
the
right choice. It’s not just a matter of aesthetics,
it’s
a matter of strategy.
Follow the Eye
One simple
product
What
way to evaluate
is to ask: Where
element
of
the
the visual design of a
does
design
the
eye
initially
go
draws
first?
the
users’
attention?
important
is
the
Are
they
to the product’s
first
object
of
drawn
to
strategic
something
objectives?
their attention
Or
a distraction
from their goals (or yours)?
Researchers
sometimes
eyetracking
equipment
use
sophisticated
to determine
exactly what
test subjects are looking at and how their eyes move
around
visual
the screen.
design
usually
of
a
If you’re
just
product,
fine-tuning
however,
can
get away with sim-ply asking people— even
just asking yourself. This approach
138
PLANE
provide
the
most
capture
equipment
won’t
7
THE
and
it
CHAPTER
SURFACE
never
the
you
can
all
accurate
the
results,
nuances
provide.
But
that
most
will
eyetracking
of
the
time,
simply
asking
questions
is
perfectly
way to find the dominant
Another
suitable.
design element
is to squint
at the page or blur your eyes until you
can’t
out the details— or walk
make
to the other
end of the room and look at it from there.
Then
try
to
determine
you’re
serving
notice
the
around
what
the
page
where
your
own
unconscious
the
you’re
subject,
as
page.
naturally.
ask them
eye
think
at; just
of
too
If
try
to
your
much
let your eyes
If someone
goes.
subject,
movements
Don’t
looking
the
test
else
is
take in
your
to call out the elements
page in the order that their attention
eyes
about
test
of
the
is drawn to
them.
Generally,
you’ll
find fairly
consistent
how people move their
eyes—after
largely
instinctive
unconscious,
subjects
different
report
their
eyes
patterns
all, these
movements.
following
a
in
are
If
very
pattern from other people, they probably
aren’t really aware of their natural eye movements,
or they’re
just
telling
want to hear (or both).
you
what
they
think
you
If your design is successful,
the pattern the user’s
eye follows will have two important
qualities:
.First, it follows a smooth flow. When people
comment
that a design is “busy”
or “cluttered,”
they’re
really reacting to the fact that the design
doesn’t
lead them smoothly
around the page.
Instead, their eyes bounce back and forth among a
variety of elements
all clamoring
for their
attention.
THE ELEMENTS
OF USER EXPERIENCE
139
.Second, it gives users a sort of guided tour of
the possibilities
overwhelming
possibilities
available
to them without
them with detail. As always, those
should support
the goals and tasks the
user is trying to accomplish
at this point in their
interac-tion with the product. Perhaps
importantly,
those pos-sibilities
from information
more
shouldn’t
or functions
distract
that users will need
to fulfill those goals.
The movement
doesn’t
of the user’s
happen
by
complex
set
responses
to visual stimuli
Fortunately
are
not
of
for
variety
deeply
us
as
the
of effective
and directing
Contrast
It’s
outside
centuries,
mass,
without
share.
responses
control
our
developed
visual techniques
a
instinc-tive
these
we’ve
of
a
for attracting
attention.
and Uniformity
user’s
without
the page
result
ingrained
In visual design, the primary
the
the
that all humans
designers,
completely
either— over
eyes around
accident.
atten-tion
contrast
causing
the
settling
is
is
seen
user’s
on
tool we use to draw
contrast.
as
a
eyes
anything
A
design
gray, featureless
to
drift
in
around
particular.
Contrast
is vital to drawing
essential
the
aspects
user
the
of
navigational
contrast
interface,
the
on
means
elements
instinctive
in a
design
They can’t
behavior
contrast
the
of
groups in information
pay attention.
attention
relationships
elements
is the primary
conceptual
When
the
understand
the user’s
to
helps
between
page,
and
com-municating
design.
are
different,
users
help it. You can use this
to your advan-tage by making
the pieces users really need to see stand out from
140
CHAPTER
SURFACE
PLANE
the rest
of
interfaces
rest
text
the elements.
Error
in
messages
often suf-fer from blending
of the page; contrasting
a
highlighting
different
them
color
7
THE
in Web
in with
the
them by putting
the
(like,
with a bold
say,
graphic
red)
or
can make
all the difference.
In a visually neutral
layout (near right, top),
nothing stands out.
Contrast
can be used
to guide the user’s eye
around the page (far
right, top) or draw their
attention to a few key
elements
(near right,
bottom). Overuse
contrast
of
leads to a
cluttered look (far right,
bottom).
THE ELEMENTS
OF USER EXPERIENCE
141
For
this
strategy
difference
user
to
intended
design
has
to
clearly
to
of
work,
two
the same, users
the
enough
design
something.
elements
get
notice something
is
the
for
the
choice
is
When
the
similar
but
con-fused. “Why are
Are they supposed
it was just a mistake.
grab users’
however,
sig-nificant
that
communicate
those different?
Maybe
be
tell
treatment
not quite
to
to be the same?
Or am I supposed
to
here? ” Instead, we want both to
attention
and to assure them that it is
intentional.
uniformity
Maintaining
important
part
communicates
overwhelming
of
in
your
ensuring
that
effectively
your
design
without
users. Uniformity
your
is
an
design
con-fusing
comes
or
into
play in many different
Keeping
aspects of visual design.
the sizes of elements
uniform can make it
easier to recom-bine them into new
need
them.
buttons
you
For
example,
use
for
if
designs
all
navigation
the
are
the
height, they can be mixed and matched
without
creating
that new graphics
Grid-based
design
This
for
will
a master
creat-ing
layouts
element’s
is
one
over
or
layout
technique
effectively
ensures
layout
every
layout
same
as needed
requiring
be produced.
carries
approach
use
clut-tered
layout
that
through
a
as you
graphic
uniformity
of
the
print
the
Web.
of
Not
every
grid—in
will probably
use
only
placement
on
the
uniform and consistent.
from
design
that is used as a template
variations.
part
to
a few—but
grid
layout
fact,
most
every
should
be
CHAPTER
142
Grid-based
layout
ensures that diverse
designs have a shared
visual order.
7
THE SURFACE
PLANE
However,
because
screen resolution
to
it
screen-based
is
trap
print
design.
of
adhering
working
isn’t
a
to
grid
ensure
sizes,
and
applying
always
easy
to
grids
as
simple
fall
into
as
the
system— or
any
uniformity—
even
anymore. The anar-chy
isn’t working
without
screen
widely,
It’s
to
intended
when it clearly
of
design
in
standard
devices,
can vary
design
standards
is bad,
but
the straitjacket
THE ELEMENTS
OF USER EXPERIENCE
143
of
trying
are
to
Maybe
the
functionality
time
work
inadequate
when
within
for
your
product
that
the
no
grid
design
needs
has
one
was
standards
can
taken
had
be
on
imagined
developed;
that
worse.
new
at
the
maybe
the
grid
just
place.
able
never
worked
Whatever
the
to recognize
foundations
all that
reason,
when
it’s
it’s
well
in the
important
time
to
first
to be
revisit
the
of your visual design system.
Internal and External Consistency
Because of the way Web sites often have been
produced—piecemeal,
ad hoc, and isolated
from
other design work going on in the organization—they
of consistency
have been plagued with problems
in visual design. These problems
take two forms:
.There are problems
of internal consistency,
in
which different
parts of the product
reflect different
approaches. .Then there are problems
consistency,
of external
in which
the product
approach
design
doesn’t
reflect the same design
used in
other products
from the same organization.
Good
solutions
consistency
to problems
are rooted
an understanding
of internal
in
of the skeleton
of the site.
The key is to identify
recurring
different
throughout
and
design
elements
that
appear
in
contexts
the
various
information
interface,
design problems
By isolating
each design element
from
different
those
contexts
navigation,
in the product.
before
designing
it, we can more
clearly see the small-scale
problem we’re trying to
solve, instead of getting distracted
larger-scale
Rather
problems
imposed
than designing
by the
by context.
the same element
over
and over again, we
can design it once
and use that design throughout
the product.
144
THE SURFACE
For
such
CHAPTER
7
PLANE
an approach
to work,
we will have
to
check
our
work
against
which that element
red STOP
button
the different
appears.
page, but it might
not
crowded
product
best
approach
is to design
contexts,
and
in
a big, round,
fine for the checkout
be as visually
the
various
Maybe
will work
contexts
effective
customization
each
then
page.
on
The
element, try it in
rework
the design
as
needed.
Even though many of the design elements
will be
created
should
still
in isola-tion from each other,
work
merely
objects;
together.
a
collection
rather,
that operates
successful
of
small,
the objects
should
design
design
your
consistency
form
employees,
observers—with
a
brand identity.
be
present
design
of
your
at
every
product,
of
level
from
media
prospects,
casual
impression
This consistency
should
a system
across
or
uniform
not
whole.
audi-ence— customers,
shareholders,
is
well-designed
as a cohesive, consistent
Enforcing
presents
A
they
of
brand
of
the
the
your
identity
visual
navigation
elements
humble
appearing
button
Presenting
every
screen
on
your
Web
inconsistent
with
your
style
in
doesn’t
affect
the
that
a
across
just
product;
company
as
style
it
affects
with
Inconsistent
visual
your
with
corporate
the
audience’s
their
a whole. People
companies
of
clearly
styles
image
impression
that
site
the
respond
of
145
Color Palettes and Typography
to
identities.
the
the
clarity
audience
this is a company
OF USER EXPERIENCE
of
your
positively
defined
leave
media
impression
undermine
and
that’s
other
impression
hasn’t quite figured out who it is.
THE ELEMENTS
to
that appears only once.
that
Color
can
be
one
communicate
of
the
most
a brand identity.
closely
associated
with colors
think
of
company
the
automatically
effective
that
to
the
mind— consider
UPS, or Kodak. These
com-panies
employed
specific
brown,
consis-tently
over
the
That
doesn’t
exclusion
usually
of
part
mean
pany’s
standard
for how
well
color
lend
palette
they
the
palette
brighter
which
work
these
core
you want
a
colors
to
the
colors
are
palette
The colors
are
stronger
mind.
brand
color
selected
together,
used
in
in a comspecifically
complementing
incorporate
to a wide range
or bolder
foreground
create
have
yellow)
competing.
should
themselves
cases,
use
The
materials.
each other without
A
they
a broader
all of a company’s
to
in the public’s
all others.
of
(red,
years
sense of their identities
to
color
Coca-Cola,
colors
to
are so
it’s difficult
without
coming
ways
Some brands
of
to draw
that
of uses. In most
used
for
design— elements
to
colors
your
colors
can be
attention.
More
muted
colors are better used for background
elements
that
don’t need to jump off the page. Having a range of
colors to choose from provides
making effective
Just
to
as
other
us with a toolkit for
design choices.
contrast
and
areas
of visual
role in the creation
uniformity
design,
are
important
they play a vital
of color palettes
as well. When
used in the same context, colors that are very close
to one another, but not quite the same, undermine
the effectiveness
of your color palette. This doesn’t
mean you only get one shade of red,
146
CHAPTER
7
Orbitz has used a
limited color palette
(top) to differentiate
features
and
functionality
r:102
on the
g:153
Web site (bottom).
b:204
r:255
g:255
b:204
THE SURFACE PLANE
r:0
r:0
r:0
r:255
g:102
g:51
g:153
g:153
b:204
b:153
b:0
b:0
r:204
r:153
r:51
r:204
g:204
g:153
g:51
g:204
b:102
b:51
b:204
b:153
THE ELEMENTS
OF USER EXPERIENCE
147
one
shade
of
blue, and
so forth. It means
you want to use dif-ferent
shades
they’re
different
that
apart,
and make
enough
that
if
of red, make sure
users
can tell them
sure you use each in consistent
ways.
For
some
fonts
typefaces
style—is
that
to
so
they
be
to
the
to
create
important
have
to
their
Underground
of
communications.
identities
brand
special
for
typefaces
their
and
identity
Even
even
typography
in
Martha
a
their
if you choose
not
to take
step, type can still serve
effective
communicating
of
use.
to create
this extraordinary
part
of
visual
from Apple to Volkswagen
have used custom
sense
use
particular
specifically
ranging
London
stronger
a
commissioned
produced
Organizations
Stewart
typography—the
companies,
or
your
as an
identity
through visual design.
For
body
text—any
material
that
will
be
presented
users
eyes
text
in larger
in longer
quickly
blocks
tired
trying
like Helvetica
They
aren’t
For larger
your
or Times
only
little
more
visual
a
wide
small
ways— can contribute
most
cases,
clutter,
number
you won’t
widely
used.
you don’t
readability.
labels
like those
typefaces
with
and
of
of
fonts
to that
using
fonts— or
in
sense
need more
a
appropriate.
is not to overwhelm
variety
of
why simple
per-fectly
are
Our
in lots
though;
or short
But one of our objectives
with
are so
elements,
personality
better.
That’s
choices,
text elements
on naviga-tional
unnecessarily
is
take
style to accommodate
seen
using
to
in a more ornate typeface.
have to sacrifice
will be read by
stretches—simpler
get
fonts
users
or that
our
an
even
inconsistent
of
clutter.
In
than a handful
of fonts to meet all your commu-nication needs.
148
SURFACE
CHAPTER
PLANE
The
principles
the
same
design:
as
Don’t
not exactly
indi-cate
trying
of using
those
use
type
for
that
the same. Use
in
to communicate.
styles
attention
as
that
aspects
the
of
visual
styles
only
information
Provide
enough
can
but
are really
are very similar
different
you
needed,
effectively
other
styles
differences
between
design
THE
7
draw
don’t
but
to
you’re
contrast
the
user’s
overload
the
with a wide range of diverse styles.
Design Comps and Style Guides
The
most
realm
design
of
direct
comp.
Comp
because
that’s
of
finished
the
analog
visual design
components
exactly
that
to the wireframe
is
is
what
product
have
the
visual
short
it
or
composite,
is: a visualization
built
been
for
for the
mock-up
up
chosen.
from
The
the
comp
shows
how
cohesive
the
all the pieces
whole;
breakdown
constraints
work
or, if they
is
that
happening
it shows
and
any solution
to form a
together
don’t,
where
demonstrates
will have to account
for.
You
should
be
correlation
wireframe
comp.
and
The
we
The
surface
core
simple
the
comp
into
the
information
of
the
faithfully
fact,
the
design
reproduce
it
account
instead
isolation
come
in
evident
may
in
one-to-one
of
doesn’t
Building
issues
presented
not
focusing
issues
regarding
they
might
the design
ideas
plainly
a
components
wireframe
skeleton.
tackle
skeleton
see
of the wireframe—in
design concerns,
the
to
components
comp
the layout
won’t.
able
between
probably
for visual
on document- ing
wireframe
allows
first,
play.
then
see
Nevertheless,
wireframe,
design
before
us to look
at
how
the
particularly
issues,
should
be
in the design comps, even though
not
in the
follow
the
precise
arrangement
wireframe.
THE ELEMENTS
OF USER EXPERIENCE
BRANDING
AREA
COURTESY
NAV
LOGO
GLOBAL NAV
FEATURED
ITEMS
SUPPLEMENTAL
TOP NATIONAL STORIES
TOP LOCAL STORIES
NAV
149
The visual design
doesn’t
have to
match the wireframe
precisely—it
to account
only has
for the
relative importance
grouping
and
of elements
presented
wireframe.
in the
150
SURFACE
All of
CHAPTER
PLANE
this
documentation
work,
but
it
time,
the
reasons
memory.
happens
for
for
The ad-hoc
is, of
a
Another
reason
is
When
they
and built
a lot
reason:
decisions
made
Over
fade
from
to address
circumstance
intended
of
a
get all
to form the
for future design work.
system
knowledge
good
decisions
jumbled up with the decisions
foundation
course,
our
prob-lem in a specific
specific
THE
7
that
to
do, they
about
on a
document
people
walk
how
your
eventually
a
day-to-day
away
quit
jobs.
with a wealth
product
basis.
design
their
gets
Without
of
designed
a
style
guide
that
standards
Over
remains
and
time,
whole
as
as
reasons
parts
the
for
of
with
change
things
decisions
company
latest
is
lost.
positions,
the
suffers
were
drift
or
the
knowledge
gradually
ways
those
the
that
people
organization
amnesia,
up-to-date
practices,
a
sort
done and
away
back
to
out
of
the
other
into
the
workforce.
The
definitive
decisions
we
documentation
compendium
defines
design,
from
the
Global
standards
product—such
typography
every
largest
scale
design
standards,
guidelines—
aspect
affecting
as
are usually
of
the
is the style
have made
of
to
grids,
or
the
the
every
design
guide.
smallest.
part
color
logo
This
visual
of
the
palettes,
treatment
the first things
to go into
a style guide.
The
style
specific
guide
to
product.
a
In
documented
down
to
will
particu-lar
some
also
section
cases,
include
or
the
standards
function
of
a
standards
in the style guide will go all the way
the
level
of
individual
interface
and
navigation
elements.
guide
is to provide
make
smart
most
of
the
The
overall
enough
decisions
thinking
goal of the style
detail
in
the
to help
people
future—because
has already
been done
for
them.
THE ELEMENTS
OF USER EXPERIENCE
151
Creating
a style
design
consistency
organization.
diverse
scattered
like
standards.
and
of
Web
in imposing
a
decentralized
operations
independent
worked
on
by
con-sist of a
projects
people
in
all over the world, your site is
a
random
Getting
with a unified
work,
is also helpful
across
If your
range
initiated
look
guide
which
set
is
mishmash
all those
of
why
of
people
standards
can
responsibility
being
offices
likely
styles
to
go
be
a
for
to
and
along
lot
of
enforcing
design
the
style
style
guides
organization
guide
effective
you
way
can
to get
cohesive
whole
tacked-on
pieces.
often
resides
higher
up
in
than you might expect. Having a
refer
your
instead
to
is
product
of
just
the
single
looking
a
most
like
jumble
a
of
chapter
8
The Elements
Applied
THE ELEMENTS
OF USER EXPERIENCE
153
The
elements
consistent
But
putting
practice
by
of
the
It’s
ideas
not
resources—it’s
experience
how complex
can sometimes
itself.
Looking
user
no matter
just
behind
seem
a
the
like
elements
of
back over the five planes—strategy,
and
specialists,
Not
some
a
must take months
small
army
of
scope,
attention
to
of develop-ment
highly
trained
right?
necessarily.
Certainly,
for
organiza-tions, employing
specialists
all
and
all sounds like a
whole lot of work. Surely such careful
time
time
of mindset.
structure, skele-ton, and surface—it
all these details
is.
into
a challenge
question
often a question
remain
your product
is the most
effective
some
projects
and
a team of dedicated
way
to parcel
out
responsibility
plex
to
for a product
handle
any
that’s
other
specialists
can focus exclusively
complete
user
deeper
experience,
understanding
of
simply
way.
too com-
Also,
they
those
issues
THE ELEMENTS
Much
of
the
limited
a
to bear
in
a
CHAPTER
APPLIED
time,
resources
Sometimes
of the
bring
often
154
8
because
on a subset
however,
can
group
actually
produce
because
it is easier
achieve
of
better
small
just
a
results
for them
teams
similar
few
with
results.
people
than a large
to stay
can
team,
in sync
on a
shared vision of the user experience.
Designing
more
the
than
problems
successful
a
user
very
experience
to be solved.
approach
is
large collection
The
and
little
small
difference
one
doomed
really comes down to two basic ideas:
.
.
really
of very
between
to
a
failure
Understand
you’ve
what problem you’re
trying to solve. So
worked out that the big purple button on the home
screen is a problem. Is it the bigness
the button that needs to change
and the purpleness
(surface)?
button is in the wrong place on the page (skeleton)
the function the button represents
expect
doesn’t
of
Or is it that the
or that
do what users
(structure)?
Understand
the consequences
problem. Remember
that there’s
of your solution to the
a potential ripple effect
up and down through the elements
make. The navigation
your product
from every decision you
design that works so well in one part of
might not quite meet the needs of another sec-
tion of the architecture.
The interaction
design for the prod-
uct selection wizard might well be an innovative
but will it meet the needs of your technophobic
THE ELEMENTS
OF USER EXPERIENCE
approach,
users?
155
Only by having
someone
in your
organization
think
about each of the five
planes can you address
all the considerations
crucial to creating
a successful
experience.
user
How these
responsibilities
distributed
in your
organization
important
are
isn’t as
as making
sure all the elements
of user experience
accounted
for.
156
ELEMENTS
You’d
the
THE
CHAPTER
8
many
the tiny
APPLIED
be surprised
decisions
process
are
at just
how
that make up the user
aren’t
time,
experience
made
the
consciously
choices
made
of
experience
at
design
all. Most
about
the
of
user
fall into one of these scenarios:
.
.
.
Design by default. This happens
the user experience
technology
follows
when the structure
the structure
or of your organization.
Keeping
order history and billing information
mean keeping
them separate
also a good idea. Similarly, content
departments
is brought
in the company
the customer’s
in separate
might work better for your existing technical
doesn’t
of
of the underlying
databases
system, but that
in the user experience
is
that comes from different
might serve the user better if it
together, not kept separate.
Design by mimicry. This happens
falls back on familiar conventions
when the user experience
from other products, publi-
cations, or software
applications,
ate those conventions
regardless
of how appropri-
might be to your users (or even to the
Web itself).
Design by fiat. This happens
when personal preferences
instead of user needs or product
rience decisions.
because
objectives
If orange dominates
one of the senior vice presidents
all your navigational
elements
drive user expe-
your color palette
is fond of it, or if
are dropdown
menus because
that’s what your head engineer
likes, you’ve
lost sight of the
strategic
that should be driving the
goals and user insights
choices you make.
THE ELEMENTS
OF USER EXPERIENCE
157
Asking the Right Questions
Facing
the tangle
in designing
be
you
times,
small
the user
disheartening.
problem
of
problems
experience
Occasionally
you
you
will
had
have to
already
make
can
sometimes
a solution
will force you to rethink
thought
to be solved
other
to one
problems
solved.
compromises
Many
and
evaluate
When
trade-offs
you’re
these kinds
between
in the
of
decisions,
frustrated
and
the
approach.
right
ground
the
each
you
should
you should
the user
ask
easy
approach
play.
yourself
(and
be able to answer)
make
become
right
at
experience
to
to
you’re
in your
issues
approaches.
having
whether
The
decision
of
it’s
question
underlying
different
middle
taking
is
to
understanding
The
of
first
question
the first
question
about any aspect
is: Why
did
you
do
of
mind
it
of
that
way?
Having
the
right
approaching
the
most.
other
Every
design
process
money,
gather
and
Maybe
you
aspect
can
people
market
frame
problems
be
can
find
or feedback
messages,
Recruit
user
to
data
the
time,
No time
your
audience?
to
look
at
the
have, such as server
afford
to rent
family,
to
on
to get a sense
friends,
matters
expe-rience
fit
disposal.
ways
you already
lab?
the
adjusted
information
of your users. Can’t
of
at your
research
about
you are facing
or
logs
of the needs
a usability
co-workers
test
to
participate
Resist
in informal testing.
the
temptation
fundamental
user
in the name
of
projects,
saving
someone
to
gloss
experi-ence issues
time
or money.
will thoughtfully
form of user experience
over
evaluation
the
of the project
On some
tack on some
to the very end
158
THE ELEMENTS
CHAPTER
8
time
actually
to
address
out. Racing
toward
might
seemed
have
the launch
be
a
APPLIED
those
launch
like
issues
without
a good
requirements
that
meets
for the project
all
but
run
looking
idea
back
date was set, but the result
product
has
the
back
when
is likely to
technical
doesn’t
work
for
your users. Even worse, by tacking user experience
evaluation
launching
on
at
a product
have no opportunity
Some
the
organizations
end,
you
might
that you know
(or money
favor
end
up
is broken
but
left) to fix.
this approach,
calling
it
“user
acceptance
very
telling
they
like
testing.”
The
here—the
the
word
question
product
or
will
is
acceptance
is
not
whether
use
the
product,
but rather can they accept the product? This type of
testing
all too often
the process,
have
shaped
being
the
user
examined.
extraordinarily
testing
of
happens
at
experience
Those
difficult
the finished
people
primary
to
you
some
make
people
they
never
substitute
a
Asking
users
your
of
seems
put
as
good
it
are
the
user
to be that
in front
But
thoughtful,
design process.
elements
be
user
they
testing
a
about.
user experience
specific
in
of
they like it, and then fix
complained
for
ever
can
because
user
something,
to see how
whatever
a
for
of
and interaction.
This line of thinking
should
without
ensuring
of
end
assumptions
uncover
product,
advocate
means
experience.
very
assumptions
hidden behind layers of interface
Many
the
by which time countless
questions
that
the user experience
testing
is
informed
focus
on
can help
you
gather
more
constructed
of
user
relevant
without
which
THE ELEMENTS
User
in turn
can lead
tests
the elements
can end up asking
experi-ence
questions,
input.
an eye toward
the wrong
to the wrong
OF USER EXPERIENCE
159
knowing
what
investigate
subjects
matter
is
problem
crucial
you’re
to
with an experience
with unrelated
You
that doesn’t
cannot
their
needs
users
depend
needs.
any user experience
the
just
better
the color?
one of many
the
on
your
challenge
is to understand
than
them-selves.
understand
The
needs
they
Testing
of
your
with
Or is it
to?
users
to
in creating
the needs
understand
can
to
test
cloud the
that your users are responding
simply
articulate
out
your
issues. Is the problem
that naviga-tion bar really
the wording
setting
presenting
help
of
those
you
users, but it’s just
tools that can help achieve
the same
end.
The Marathon and the Sprint
Just
as
user
experience
your
Too
you
shouldn’t
leave
to chance,
any
you
own
development
process
many
development
teams
of permanent
emergency.
result,
every
project
of
the
leave
to chance
either.
operate
in a state
Each project is conceived
to some
as the response
aspect
shouldn’t
perceived
is behind
crisis, and as a
sched-ule
before
it
even begins.
Here’s
a
metaphor
development
describing
sprint.
for
process
problems
Know
which
the
user
I
often
that
experience
use
to clients: A marathon
kind
of
race
you’re
when
is not a
in and
run accordingly.
A
sprint
upon
starting
energy
is
vast
a
short
reserves
race.
of
gun is fired—and
in the
space
of
Sprinters
energy
at
have
the
to
call
instant
the
they expend
a few
minutes.
all of that
Right
off
the starting
line, the sprinter
he can and keep running
reaches
has to run as fast as
as fast as he can until he
the finish line.
160
ELEMENTS
A
CHAPTER
APPLIED
marathon
need
just
they
expend
marathon
is
as
a
long
much
it
down
Marathon
as
differently.
when
but
in the
the runners
being equal, the
to speed
likely
do,
Suc-cess
on how effectively
is far more
runners
sprinters
All other factors
who knows
to slow
race.
energy
very
depends
pace themselves.
runner
THE
8
up and
when
to win— or even
to finish the race at all.
The
from
only
sprint
strategy—run
beginning
sensible
you ought
approach
to be able
were a series
as
to end— can
to
a
fast
race.
simple
of sprints—but
physical
you
to
limit
of
be
It seems
to run a marathon
it doesn’t
way. Part of the reason it doesn’t
the
as
appear
can
the
like
as if it
work
that
work that way is
human
endur-ance.
There’s
that
another
factor
here, too: To accommodate
limit, marathon
their performance,
what
isn’t
runners
constantly
watch for what’s
working,
and
adjust
monitor
working
their
and
approach
accordingly.
Product
development
often, there
building
by
prototypes
times
is
rarely
a
sprint.
More
will be times when you push forward,
when
and generating
you
pull
ideas, followed
back,
testing
what
you’ve built, seeing how the pieces fit together, and
refining the big picture for the project.
are best
others
undertaken
require
mara-thon
with an emphasis
a more
runners
deliberate
know
Some
approach.
which
is
tasks
on speed;
Good
which—so
should you.
Thoughtful,
you
time
deliberate
you much
more
and developers
to
design
in the short
strategy,
time
term,
will
cost
will
save
they
in the long term. Designers
often lament
scope,
decisions
but
and
the lack of attention
structure
they work on. I have been
involved
in the
projects
in more
than
one
project
constantly
in
which
these
activities
were
under threat of being eliminated. Some
THE ELEMENTS OF USER EXPERIENCE
161
impatient
with
production
graphic
the
tasks
an
or a piece
first
behind
of
line
that
actual
of
items
code.
cut
don’t
site
involve
component
These
from
tasks
a
product as functionality
ctionality
information
product as
a
are often
project
schedule or over budget.
the
like
that’s
su
sk
r
st
ce
a
rf
SensoryDesign
o
et
l
e
n
Interface
Design Navigation
n
Design
D
Information
ation
Design
u
re
u
ct
Interaction
tion
Design
p
co
Information
ati
Architecture
re
e
Functional
onal
Content
en
s Specifications
onsRequirements
nt
s
tr
e
at
gy
User
Needs
Ne
Product
t
Objectives
Obj
Concrete
Abstract
162
ELEMENTS
CHAPTER
APPLIED
But these tasks were included
in the first
place
preparation
for later
why
the
THE
8
five
because
in the project
they
deliverables
planes
build
as the foundation
When
tasks
these
left
uninformed
by
the
(That’s
bottom
to
top,
for those above it.)
are eliminated,
in
scope
as essential
to come.
from
each serving
deliverables
served
the
tasks
the
project
schedule
larger
context
of
and
feel
the
project
a
product
and discon-nected from one another.
When
that
only
you get
falls
have
problem,
for
the
to the end, you’ve
short
of
you
you’ve
your-self
everyone’s
failed
actually
because
horizon
is
to
shortcomings
of
the
cycle repeats.
to
now
solve
created
the next
attempt
last
got
expectations.
to
project.
your
new
problems
big project
address
And
Not
original
on
the
so
the
Looking
at a product
from the outside— or coming
into the develop-ment process
easy to focus
on the more
the top of the five-plane
those closer
that
the
that
scope,
and
strategy,
model
to the bottom.
elements
for the first time—it’s
obvi-ous elements
hardest
to
structure
of
the
the
overall
or failure of the user experience.
In
many
obscure
cases,
failures
successes
colors
turn users
that
on
are
role
upper
on lower planes.
visual design—layouts
or
important
in
the
planes
Problems
can
with
that seem clut-tered or busy,
inconsistent
off so quickly
or
clashing— can
that they never
discover
all the smart choices you made with navigation
interaction
design
create
design.
approaches
a sound,
THE ELEMENTS
163
is
see—the
product—play
success
of
The irony, however,
are
most
near
at the expense
Poorly
can
flexible
conceived
make
all
your
information
OF USER EXPERIENCE
or
navigation
work
to
architecture
Similarly,
making
upper planes
founded
The
all the
means
on bad choices
history
decisions
on the
if those decisions
are
made on the lower planes.
of the Web
failed because,
right
nothing
although
is strewn
with sites
that
they were beautiful,
they
were utterly unusable. Focusing
on visual design to
the
elements
exclusion
of
experience
drove
bankruptcy
and
the
other
more
led
than
other
why they were bothering
It doesn’t
your
complete
out
have
product
of
it
liability.
By
experiences
the
explicit
product
strategic
way.
product
your
into
to wonder
If you
process
in mind,
making
with
conscious,
that
to be that
a
user
with the Web at all.
experience
with
of
start-up
companies
devel-opment
user
one
that’s
product
works
to
the
you can come
an
everything
decision,
approach
with
the
you
fulfill
asset,
the
not
result
can
a
user
of
a
ensure
both
goals and the needs
your
of
your users.
Index
THE ELEMENTS
OF USER EXPERIENCE
Aaction
Ccard
buttons, described,
architectural
117
approaches.
sorting, 49
checkboxes,
See also information
described,
118
architecture
hierarchical
structure, 93
hub-and-spoke
structure,
93
matrix
organic
structure,
structure,
sequential
of users,
considering,
94 –95
structure,
tree structure, 93
attitudes
93–94
44
95
audience,
considering
content
for, 74
audience
segments,
demographics,
basing on
43– 44
Bbrand
identity, considering,
38 –39
branding
requirements,
considering,
business
65
goals, defining,
37–38
CMS (content
management
system), 63– 64
color palettes, considering
sensory
in
design, 145–148
communication,
importance
of, 12–13
comp, defined, 148
competitors,
getting
inspiration
conceptual
from, 67– 68
models, 83–85,
97, 111–112
consistency
considering
in sensory
design, 143–144
internal versus external,
143–144
content
considering
audience
for,
74
defined, 12
format versus purpose, 72
impact on user experience,
32
structuring,
89–92
versus technology,
32
165
116,
166
INDEX
content
features,
updating,
73–74
content
inventory,
content
requirements,
taking, 74
71–74. See also project
requirements;
considering,
considering
requirements
29
on scope
plane, 61– 64
defining, 63
contextual
inquiry, 47
contextual
navigation,
contrast
122
and uniformity,
considering
in sensory
design, 139–143
controlled
vocabulary,
using,
98 –99
convention
and metaphor,
110 –113
conventions
considering,
84
developing, 116
conversion rate, measuring,
13–15
courtesy
customer
navigation,
122–123
loyalty, 13
Ddemographics,
applying
to
audience
segments,
43– 44
design. See also product
design; user-centered
design
by default, 156
by fiat, 156
by mimicry, 156
design comps, considering
sensory
in
design, 148 –151
design consistency,
144
enforcing,
design systems, documenting,
150
documenting.
See also
wireframes
design systems, 150
functional
specifications,
69–71
dropdown
117–118
lists, described,
Eefficiency,
improving,
Elements
15–16
model. See planes
error handling,
correction,
86 –88
86 –87
prevention,
86 –87
recovery, 86 –87
undo function, 88
error messages,
occurrence
of, 64
eyetracking,
sensory
considering
design, 137–139
in
Ffacets
benefits
of, 121
defined, 98
FAQs, considering,
72
features
conflicts
between,
76
drawing
analogies
to
experiences,
113
implementation
suggestions,
of, 76
76 –77
time constraints
on, 76
use of terminology,
62
five planes. See also scope
plane; skeleton plane;
strategy
plane; structure
THE ELEMENTS
OF USER EXPERIENCE
plane; surface
experience
building
plane; user
from bottom to
top, 162
choices
related to, 23
considering,
decisions
155
related to, 24
dependencies
of, 22–23
failures on, 162–163
scope, 21, 29
skeleton, 20, 30
strategy, 21, 28
structure,
20, 30
surface, 20, 30
using elements
working
of, 31–33
on, 24
functional
specifications,
29,
62– 64, 68 –71
Gglobal
167
adaptability
of, 91–92
approaches,
bottom-up
categories
92–95
approach,
conceptual
structure
considering,
controlled
90
in, 90 –91
of, 97
30
vocabulary,
98 –99
diagramming,
101–105
documenting,
101–105
flow of language
in, 95
language,
98 –101
metadata,
98 –101
nodes in, 92–93
organizing
principles,
96 –98
structuring
top-down
content, 89–92
approach,
use of thesaurus,
89–90
99
Visual Vocabulary,
102–
103
navigation,
grid-based
layout
120 –121
technique,
141–142
Hhearing
experience,
hierarchical
136
structure,
hub-and-spoke
93
structure,
93
hyperlinks,
of, 122
underutilization
Iimpressions,
defined, 40
indexes, using for navigation,
123
information
architecture,
81,
88 –89. See also architectural
approaches
information
design, 108 –109.
See also interface
considering,
organizing
design
30, 45
principles,
124 –126
role in interface
design,
126
visual type of, 124
wayfinding,
127
inline navigation,
interaction
122
design, 81–82
conceptual
models, 83–85
considering,
30
consistency
of, 111–112
convention
and metaphor,
110
conventions,
84
error handling,
86 –88
interface
changes
168
conventions,
in, 116
INDEX
interface
design, 108 –109. See
also information
considering,
design
30
success of, 114
interface
elements
action buttons, 117
checkboxes,
dropdown
116, 118
lists, 117–118
list boxes, 117
radio buttons, 116, 118
text fields, 116
Llanguage
and metadata,
98 –101
list boxes, described,
local navigation,
117
121
Mmarathon
and sprint, 159–
163
market
research methods,
matrix structure,
metadata
46
93–94
and language,
98 –101
metaphor
and convention,
110 –113
Nnavigation
design, 108 –109.
See also wayfinding
considering,
30
goals of, 118 –119
importance
navigation
of, 119–120
systems, 120
contextual,
122
courtesy, 122–123
global, 120 –121
indexes, 123
inline, 122
local, 121
persistent
elements,
120
site maps, 123
supplementary,
navigation
121
tools, 123
nodes
child and parent, 93
in hierarchical
structure,
93
in matrix
structure, 93–94
in organic
structure,
organizing
principles
96
role in information
structures,
nomenclature,
92–93
98
94
of,
Oobjectives.
See product
objectives
operating
elements,
systems, interface
116 –118
Orbitz color palette, 146
organic
structure,
organizing
94 –95
principles,
applying, 96 –98
Ppage
layout, 128 –131
persistent
navigation
elements,
personas
120
creating, 49–51
including
in requirements,
67
phones, conventions
related
to, 110 –111
THE ELEMENTS
OF USER EXPERIENCE
169
planes. See also scope
plane; skeleton plane;
strategy
plane; structure
plane; surface plane; user
experience
building
from bottom to
top, 162
choices
related to, 23
considering,
decisions
155
related to, 24
dependencies
failures
of, 22–23
on, 162–163
scope, 21, 29
skeleton,
20, 30
strategy, 21, 28
structure,
20, 30
surface, 20, 30
using elements
of, 31–33
working
on, 24
problem solving, 157–159
product
design, concept
of,
7–8. See also design; usercentered
product
design
goals, clarifying,
61– 64
product
objectives
brand identity, 38 –39
business
goals, 37–38
considering,
success
28, 36, 91
metrics, 39– 41
products
describing
feature sets of,
29
as functionality,
27–29,
161
as information,
planning,
success
project
27–29,
161
59– 60
of, 12–13
requirements.
also content
See
requirements;
requirements
clarifying,
59– 61
defining, 65– 68
generating,
including
managing,
67
personas
61
projects, planning,
24
in, 67
prototypes,
48 – 49
psychographic
profiles, 44
Qquestions,
posing to users,
158 –159
Rradio
buttons, described,
116,
118
requirements.
requirements;
requirements
See also content
project
collecting
ideas for, 74
developing,
73
evaluating,
75
prioritizing,
strategic
research
74 –77
objectives
for, 75
tools
card sorting, 49
contextual
market
inquiry, 47
research methods,
46
prototypes,
48 – 49
task analysis, 47
user testing, 47– 48
return visits, measuring,
revenue, increasing,
41
14 –15
ROI (return on investment),
13
170
INDEX
Sscope,
defining, 58 –59
scope plane, 21, 29. See also
planes
content, 61– 64
content requirements,
29,
71–74
defining
content
requirements,
defining
63
requirements,
65– 68
functional
specifications,
29, 62, 68 –71
functionality,
prioritizing
74 –77
61– 64
requirements,
role in bottom-up
architecture,
strategy
sensory
90
component
of, 75
design, 134
color palettes, 145–148
consistency,
143–144
contrast
and uniformity,
139–143
design comps, 148 –151
eyetracking,
137–139
hearing, 136
smell and taste, 135
style guides, 148 –151
touch, 135–136
typography,
145–148
vision, 136 –137
sensory
experience,
considering,
sequential
30
structure, 95
site, use of terminology,
9–10
site maps, use of, 102, 123
skeleton, defining, 108 –109
skeleton
plane, 20, 30. See
also planes
convention,
110 –113
information
design, 30,
108 –109, 124 –127
interface
design, 30, 108 –
109, 114 –118
metaphor,
110 –113
navigation
design, 30,
108 –109, 118 –123
wireframes,
128 –131
smell and taste, considering
in sensory
design, 135
software,
focus of, 82–83
solutions,
finding
problems,
Southwest
for
157–159
Airlines
sprint
defined, 159
site, 85
strategy, 160
stakeholders
concerns
about strategy, 77
defined, 52
resolving
conflicts
between,
77
strategic
goals, meeting,
strategic
objectives,
requirements
strategists,
40
for, 75
employment
of,
52
strategy
document
contents
hierarchy
strategy
of, 53–54
of, 77
plane, 21, 28. See also
planes
product
objectives,
28
role in top-down
architecture,
90
user needs, 28
THE ELEMENTS
OF USER EXPERIENCE
171
structure
plane, 20, 30. See
also planes
information
architecture,
30, 81, 88 –101
interaction
80 –88
design, 30,
team roles and process,
101–105
structures
defining, 80 –81
hierarchical
structure,
hub-and-spoke
93
structure,
93
matrix structure,
organic
structure,
sequential
93–94
94 –95
structure,
tree structure,
95
93
style guides, considering
sensory
success
design, 148 –151
metrics, 39– 41
in
supplementary
navigation,
121
surface, defining, 134
surface
plane, 20, 30. See also
planes
color palettes, 145–148
consistency,
contrast
143–144
and uniformity,
139–143
design comps, 148 –151
eyetracking,
137–139
hearing, 136
senses, 135–137
sensory
experience,
30
smell and taste, 135
style guides, 148 –151
touch, 135–136
typography,
145–148
vision, 136 –137
Ttask
analysis, 47
taste and smell, considering
in sensory
design, 135
team roles and process
for strategy
for structure
101–105
plane, 52–54
plane,
technology
tools, constraints
on, 115
technology
versus content, 32
telephones,
conventions
related to, 110 –111
text elements,
considering,
147
text fields, described,
thesaurus,
using, 99
touch experience,
tree structure,
typography,
sensory
116
135–136
93
considering
design, 147–148
in
Uundo
function, using in error
handling,
uniformity
88
and contrast,
considering
in sensory
design, 139–143
usability, defined, 48
user acceptance
user behavior.
testing, 158
See interaction
design
user experience.
See also
planes
choices
made about, 156
defined, 6
delegating
responsibility
for, 31
design, 7–8
172
INDEX
user experience
(continued)
design by default, 156
design by fiat, 156
design by mimicry, 156
designing
for, 8 –9
details of, 6
drawing analogies
to
features, 113
formation
of community,
26
impact
of content
impact
on business, 12–17
including
on, 32
in development
process, 11
metaphor
quality
for, 159
of, 12–17
successful
design of, 154
on Web, 9–12
user models, creating, 49–51
user needs
considering,
creating
28, 36
personas, 49–51
identifying,
42
psychographic
research
profiles, 44
tools related to,
46
understanding,
46 – 49
usability, 46 – 49
user profiles, creating, 49–51
user research, 46 – 49, 51
user segments,
importance
42– 46
of, 45
revising after research, 45
user testing, 47– 48
user-centered
design, 17. See
also design; product
users
choices presented
posing questions
158 –159
Vvision
design
to, 10
to,
document
contents
of, 53–54
hierarchy
of, 77
vision experience,
136 –137
visual designs, matching
wireframes,
to
149
visual neutral layout, 140
Visual Vocabulary,
102–103
Wwayfinding,
127. See also
navigation
Web
design
commercial
interests
on,
26
content
requirements,
evolution
62
of, 25–26
functional
specifications,
62
user experience
on, 9–12
Web elements
functionality,
information
27–28
medium,
27–28
Web sites, failure of, 36
wireframes.
See also
documenting
matching
visual designs
to, 149
skeleton plane, 128 –131