1. Cores
and
Paths:
Designing
from
the
Inside
Out
Imagine
you’re
on
one
side
a
grass
lawn
and
you
want
to
reach
the
bus
stop
on
the
opposite
side.
Do
you
walk
on
the
sidewalk
around
the
edges
or
cross
in
the
middle?
Assuming
the
grass
is
dry
and
it’s
not
prohibited,
you’d
probably
take
the
shortest
path
and
walk
across
the
lawn
to
the
bus
stop.
If
others
have
done
so
before,
you
may
see
a
beaten
path
that
you
could
follow.
Such
unplanned
paths
connect
the
shortest
distance
between
two
points,
and
we
can
find
them
everywhere
in
our
surroundings.
In
urban
planning
they
are
known
as
“desire
paths”
or
“desire
lines.”
(http://en.wikipedia.org/wiki/Desire_path)
They
are
an
indication
of
the
gap
between
natural
human
behavior
and
contrived
routes.
Architect
Christopher
Alexander
recognizes
desire
lines
in
his
renowned
book
A
Pattern
Language
(1976).
He
gives
specific
instructions
for
leveraging
them
in
architecture:
To
lay
out
paths,
first
place
goals
at
natural
points
of
interest.
Then
connect
the
goals
to
one
another
to
form
the
paths.
In
principle,
Alexander's
approach
is
to
begin
with
the
goals—the
things
people
ultimately
want—and
then
link
them
together
in
the
most
useful
way.
Typically
in
web
design,
the
opposite
approach
is
usually
the
rule:
designers
begin
with
the
homepage.
They
then
work
out
a
navigation
scheme,
which
pages
at
the
bottom
automatically
inherit
whether
it's
appropriate
or
not.
And
the
goal—or
the
primary
content
people
are
looking
for—turns
out
to
be
the
last
thing
that
gets
attention
in
the
design
process.
Inspired
by
"desire
lines,"
we
can
reverse
this
tendency
in
Web
design.
"Cores
and
Paths"
is
a
specific
technique
to
guide
you
through
this
process.
The
result
is
a
straight
path
to
the
core
offering
on
your
site.
The
Cores
and
Paths
Model
"Start
with
the
goal"
is
the
clear
recommendation
of
the
Norwegian
information
architect
Are
Halland
in
his
presentation
“Cores
and
Paths:
Designing
for
Findability“
(http://slidesha.re/dnwrLX;
IA
Summit,
2007).
Here,
he
outlines
an
alternative
approach
for
web
design:
instead
of
beginning
with
the
homepage
and
overall
navigation
scheme,
start
with
the
core
content
and
work
outward
from
there.
It's
that
straightforward
and
simple
The
technique
is
based
three
key
elements:
1. The
Core:
The
core
is
the
reason
users
come
to
site.
From
the
provider's
perspective,
the
core
is
what's
offered
on
the
site.
Note
that
the
core
isn't
always
a
page.
For
YouTube,
the
core
is
a
video
and
not
a
page
on
www.youtube.com.
This
makes
it
possible
to
have
distributable
cores,
or
content
that
may
be
found
on
other
websites.
The
core
may
be
accompanied
by
supporting
information.
Technical
details,
for
instance,
can
be
considered
an
extension
of
the
core.
On
sites
like
flickr
a
description
of
a
photo
as
well
as
the
tags
user
give
it
are
supporting
information
for
the
core,
which
is
the
photo
itself.
1

2. 2. Inward
Paths:
How
do
users
get
to
the
core?
Sometimes
visitors
arrive
at
the
core
via
the
main
navigation
or
search
of
site.
But
they
might
also
come
directly
from
Google.
Other
paths
are
possible
as
well,
such
as
links
from
other
sites,
teasers,
entering
URLs
directly
in
the
browser,
and
even
via
RSS
feeds
and
newsletters.
Thinking
about
inwards
paths
also
considers
aspects
of
SEO,
such
as
what
the
trigger
words
are
that
people
are
searching
on.
3. Outward
Paths:
Assuming
users
found
what
they
were
looking
for,
what
can
they
do
from
there?
What
are
their
calls
to
action?
Fundamentally
every
subsequent
interaction
should
bring
some
kind
of
value
to
the
business.
This
is
where
conversion
takes
place.
Outward
paths
can
be
everything
from
placing
an
item
in
a
"shopping
cart"
to
recommending
a
product
to
a
friend.
As
with
inward
paths,
there
are
a
variety
of
options
to
consider,
including
links
that
lead
away
from
the
site.
Each
of
these
three
elements
has
a
different
function.
The
core
is
really
where
value
creation
for
both
users
and
the
business
takes
place.
Persuasion
plays
a
big
role
here:
organizations
ultimately
want
users
to
take
some
specific
action.
The
inward
paths
ensure
findability.
This
is
how
people
come
to
the
products
and
services
they
are
looking
for
on
the
web.
From
a
business
standpoint,
the
outward
paths
are
what
bring
ROI
to
an
organization.
Below
is
an
illustration
of
the
Cores
and
Paths
model,
using
Amazon
as
an
example
(Figure
1).
The
core
is
a
product,
represented
here
by
an
image
of
a
book
cover
and
its
key
details,
indicated
in
the
red
box.
Users
find
that
book
in
numerous
ways,
listed
on
the
left.
These
are
the
inward
paths.
Amazon
sees
a
return
on
investment
when
users
take
action
on
the
core,
seen
on
the
right
as
possible
outward
paths.
Figure
1:
The
Cores
and
Paths
model
for
www.amazon.com
The
Cores
and
Paths
Process
The
following
section
shows
how
the
Cores
and
Paths
method
can
be
used
in
a
practical
situation
based
on
a
hypothetical
example.
Imagine
the
following
scenario:
You
work
for
a
small
agency
and
have
been
contracted
by
a
bicycle
shop
to
improve
their
website.
The
shop
currently
only
has
a
"brochure-­‐like"
website
with
address
and
opening
2

3. times.
They'd
now
like
to
get
into
ecommerce
and
be
able
to
sell
online.
The
product
line
consists
of
high-­‐end
racing
bikes
and
mountain
bikes,
along
with
the
appropriate
accessories
for
each.
There
are
about
1000
products
in
total
they
want
to
sell
online.
The
shop's
main
target
groups
are
professional
cyclists
and
highly
motivated
amateurs.
As
a
result,
the
bikes
sold
are
primarily
from
premium
brands.
The
design
of
the
website
should
highlight
the
high
quality
of
their
products.
Following
the
Cores
and
Paths
approach,
here's
how
to
design
the
website
from
the
inside
out:
STEP
1:
Define
the
core
What
is
the
core
offering?
First,
make
a
list
of
possible
candidates:
bicycles,
accessories,
services,
etc.
It
starts
with
brainstorming
so
there
are
no
right
or
wrong
answers
initially.
After
compiling
a
complete
list,
decide
on
a
core
and
its
supporting
information.
In
large
teams
this
means
getting
agreement
from
team
members
and
stakeholders
alike.
In
the
above
scenario,
the
core
is
the
product—a
bike.
A
photo
of
the
product
is
a
central
element
to
represent
the
core.
The
bike
features,
brand
and
product
line
are
all
types
of
information
that
belong
to
core
in
this
case.
Supporting
information
includes
the
price
and
additional
technical
details.
After
deciding
on
and
prioritizing
these
details,
sketch
the
core
(Figure
2).
Don't
sketch
the
entire
page
with
navigation
and
a
logo:
just
focus
on
the
core.
Customers
may
want
view
details
of
the
product
up
close,
so
consider
how
they
will
interact
with
the
images
even
at
this
stage.
Think
about
the
experience
visitors
will
have
with
the
core
once
they
find
it.
Figure
2:
Sketch
of
the
core
and
supporting
information
Keep
in
mind
that
users
will
also
be
visiting
the
site
from
smartphones
and
tablets.
And
they
may
also
post
an
image
to
facebook
or
Pinterest.
This
is
an
example
of
a
"distributable
core."
So
also
sketch
how
the
core
might
transpose
to
these
different
contexts
(Figure
3).
Again,
do
this
without
sketching
the
page
chrome
or
navigation—just
focus
on
the
core.
3

4.
Figure
3:
Versions
of
the
core
in
different
possible
contexts.
From
this
you'll
see
how
the
core
and
supporting
information
behave
in
different
situations.
You
may
have
to
go
back
and
forth
between
the
versions
updating
them
iteratively.
STEP
2:
List
all
possible
inward
paths.
What
are
all
the
ways
that
users
can
reach
your
core?
Obvious
things
come
to
mind
at
first:
site
search,
the
main
navigation,
Google,
and
links
from
other
websites.
But
more
paths
come
into
play
as
you
brainstorm:
links
from
comparison
shopping
sites
and
even
references
from
offline
media,
such
as
a
printed
catalog.
For
each
inward
path
in
your
list,
also
write
down
all
of
the
design
requirements
that
must
be
met.
For
instance,
SEO
and
landing
page
optimization
is
necessary
for
visitors
coming
from
Google
and
other
search
engines.
(See
Figure
4)
Figure
4:
A
list
of
possible
inward
paths
and
the
key
requirements
for
each
STEP
3:
List
all
possible
outward
paths.
Determine
the
paths
away
from
the
core.
As
in
STEP
2,
also
include
requirements
for
each
item
in
the
list.
This
helps
to
rank
the
outward
paths
in
terms
of
importance
to
the
business,
providing
clarity
for
4

5. the
design
in
later
on.
(See
Figure
5).
A
clear
call
to
action
button
brings
the
user
to
the
checkout
process
in
this
example.
And
if
the
customer
can't
decide
right
away,
a
link
to
a
wish
list
or
to
recommend
the
product
to
others
is
a
second
priority.
Figure
5:
List
of
outward
paths
with
prioritizations
Up
to
this
point,
we've
neither
looked
at
the
homepage
nor
have
we
thought
about
the
navigation.
Yet,
we've
addressed
important
design
decisions,
such
what
a
mobile
version
of
the
core
product
might
look
like
and
how
people
will
interact
with
the
primary
content
of
the
site.
After
making
these
into
higher-­‐fidelity
mock-­‐ups,
these
initial
representations
could
even
be
tested
with
users.
STEP
4:
Put
it
all
together.
Only
after
you've
designed
the
core
and
listed
the
inward
and
outward
paths
should
you
start
looking
at
the
homepage
and
at
the
navigation.
The
goal
at
this
point
is
to
bring
the
user
in
the
simplest,
most-­‐direct
way
possible
to
the
core.
Design
the
homepage
of
the
site,
as
well
as
gallery
pages
and
search
results.
Sketch
several
alternatives.
While
doing
this,
keep
the
elements
of
Cores
and
Paths
in
mind:
what
is
the
core,
how
do
users
get
to
it,
and
how
will
the
business
see
conversion?
5

6. Figure
6:
Sketch
of
the
homepage
–
a
first
draft
In
this
scenario,
to
get
users
from
the
homepage
to
the
core
the
three
product
lines
of
the
shop
appear
in
the
main
navigation:
"racing
bikes,"
"mountain
bikes"
and
"accessories."
Since
brand
is
also
important
to
the
target
groups,
a
separate
point
for
"brand"
is
also
included.
A
prominent
link
to
a
shopping
cart
and
checkout
process
is
also
located
in
the
header.
Figure
7:
Sketch
of
the
gallery
page
with
filters
and
sorting
options
Below
is
a
helpful
template
to
use
to
capture
all
of
the
points
and
steps
described
in
this
article
(Figure
8).
Try
Cores
and
Paths
out
yourself!
Figure
8:
A
template
for
Cores
and
Paths
Summary
The
Cores
and
Paths
process
is
important
for
several
reasons:
1. Identification
of
gaps.
Upfront
questioning
of
the
purpose
of
the
primary
content
of
helps
6

7. uncover
gaps
in
the
initial
briefing.
2. Prioritization
of
elements.
Breaking
down
key
elements
in
this
way
gives
a
clear
prioritization
to
the
overall
design.
3. Design
focus.
The
approach
gives
a
clear
direction
to
follow
for
the
whole
project
team.
The
difference
between
Cores
and
Paths
and
other
approaches
may
seem
subtle
at
first.
But
the
impact
is
great:
now,
the
core
offering
stands
firmly
in
the
middle
of
your
design.
All
other
elements
in
the
site
design
then
serve
the
purpose
of
bringing
both
users
and
the
business
to
their
goal.
James
Kalbach
is
the
author
of
the
O'Reilly
book
"Designing
Web
Navigation"
(2007),
which
has
been
translated
into
six
languages
other
than
English.
He
regularly
gives
presentations
and
holds
workshops
at
international
conference
on
information
architecture
and
navigation
design.
James
is
currently
Principal
UX
Strategist
at
USEEDS°,
a
Berlin-­‐
based
design
and
innovation
consultancy.
He
was
previously
an
Experience
Design
Consultant
at
LexisNexis
and
prior
to
that
Head
of
Information
Architecture
at
Razorfish,
Germany.
James
holds
a
Masters
in
Library
and
Information
Science
from
Rutgers
University.
He
blogs
at
www.experiencinginformation.com
and
can
be
found
on
Twitter
under
@jameskalbach.
Email:
james.kalbach@gmail.com
LinkedIn:
http://de.linkedin.com/in/kalbach
Karen
Lindemann
is
a
psychologist
and
experienced
advertiser
with
years
of
experience
as
a
writer
in
agencies.
In
2005
she
founded
the
user
experience
agency
NetFlow
and
consults
well-­‐known
companies
on
the
optimization
of
websites,
products
and
services.
Karen
also
advises
clients
on
information
and
product
strategy.
In
addition
to
standard
user-­‐centered
design
methods
such
as
usability
testing,
expert
reviews,
card
sorting,
personas,
co-­‐creation
and
mental
model
diagrams,
she
also
conducts
ethnographic
studies
and
deep
emotional-­‐based
interviews.
Karen
is
also
active
in
organizing
workshop
on
user
experience-­‐related
workshops
for
professionals
in
the
field.
Website:
www.netflow-­‐lindemann.de
Website:
www.ux-­‐workshops.com
E-­‐Mail:
kl@netflow-­‐lindemann.de
XING:
www.xing.com/profile/Karen_Lindemann
LinkedIn:
http://de.linkedin.com/in/karenlindemann
Twitter:
twitter.com/karenlindemann/
7

8.
8