5. Direction
of
current
trends
and
best
practices
in
digital
service
&
website
navigation
structures
The
general
trend
in
online
service
websites
is
the
breaking
down
of
the
old
Fered
navigaFon
structures
in
favour
of
a
more
fluid
and
transparent
whole.
The
new
dynamic
way
of
approaching
site
structures
allows
for
smoother,
more
varied
and
easily
personalised
user
flows.
Simple
and
intui&ve
Fade-‐out
Ac&on-‐oriented Modular
and
flexible
Contextual
and
integrated
6. Navigation
&
Structure
Action-‐oriented
Streamlining
navigaFon
flows
using
progressive
disclosure
to
present
the
user
with
very
simple
opFons
for
quick
decision
making.
An
efficient
way
to
do
this
is
to
focus
on
the
user’s
goal
instead
of
hierarchical
categorisaFon
of
available
content.
Ac&on-‐oriented
naviga&on
Condensed
to
three
choices,
each
asking
and
answering
a
single
quesFon
about
the
user’s
needs.
This
cuts
down
on
cluPer
on
the
website
and
goes
straight
to
the
point
-‐
what
do
you
want
to
achieve
on
this
visit?
Different
scales
of
choice
This
approach
is
useful
for
bringing
together
parFes
with
mutual
interests.
In
this
example,
your
first
choice
is
to
select
if
you
have
a
workspace
for
hire
or
if
you
are
looking
for
one,
bridging
the
gap
between
a
service
provider
and
its
user
and
presenFng
both
sides
of
the
coin
equally
and
effecFvely.
7. Navigation
&
Structure
Modular
and
flexible
Organising
site
content
in
a
modular
way
allows
for
flexible
user
flows
and
allows
for
a
high
level
of
customisaFon
and
personalisaFon.
Modules
can
be
displayed
according
to
user
behaviour,
user
selecFon
or
both.
Modular
content
pods
Brings
the
ability
to
display
large
amounts
of
varying
content
in
a
scannable,
graphical
way
that
easily
scales
between
screen
sizes.
Filters
A
quick
and
easy
way
to
sort
through
content
by
category,
tags
or
other
variables.
Enhances
the
user’s
ability
to
create
their
own
user
journey
with
minimal
navigaFonal
steps.
8. Navigation
&
Structure
Simple
and
intuitive
Using
a
linear
narraFve,
whether
in
a
transparent
or
progressively
disclosed
navigaFon
flow,
grounds
content
or
service
process
in
a
visual
and
raFonal
way.
Making
navigaFon
elements
a
part
of
the
flow
brings
added
guidance
and
cohesion
to
the
user
journey.
Visual
indica&on
Using
linear
navigaFon
within
a
site
module
provides
a
visual
cue
for
the
user
to
know
where
they
are
and
how
much
more
is
available
to
them.
Passive
into
ac&ve
Displaying
even
staFc
content
in
the
context
of
a
narraFve
helps
create
a
more
dynamic
experience
and
clarify
user
needs
and
service
offerings
by
breaking
it
down
into
manageable
chunks.
Fully
immersive
user
flow
Here,
opFons
to
conFnue
are
integrated
into
the
journey
and
presented
at
the
appropriate
Fmes,
giving
the
user
a
level
of
control
over
their
experience
but
allowing
the
steps
to
be
taken
in
the
intended
order.
To
enhance
the
simplicity
of
the
navigaFon,
all
constant
controls
are
integrated
into
the
video
progress
bar
which
is
invoked
on
mouseover.
9. Navigation
&
Structure
Contextual
and
integrated
Breaking
out
of
a
tradiFonal
menu
and
link
structure
allows
for
more
free-‐form
and
intuiFve
ways
to
navigate,
enhancing
the
user’s
experience
of
both
the
service
and
the
process.
Context
based
naviga&on
CreaFve
uses
of
contextual
informaFon
can
make
a
navigaFon
menu
more
interesFng
and
relevant.
Eg.
finding
a
watch
based
on
what
depth
or
alFtude
it
needs
to
work
in.
Direct
access
through
content
instead
of
mere
links
HighlighFng
areas
and
linking
through
to
further
content
directly
from
where
you
are
simplifies
and
fades
out
the
navigaFon
process,
so
a
user
journey
doesn’t
get
interrupted
by
the
need
to
move
your
mouse
to
find
a
link.
Translates
well
to
touch
screens.
10. Navigation
&
Structure
Fade-‐out
A
major
development
with
the
increased
use
of
handheld
screens
has
been
the
drasFc
removal
of
elements
from
view
when
not
necessary,
pung
the
content
at
the
forefront.
As
a
welcome
side
effect,
users
are
learning
to
expect
dynamic
quality
content.
Space
for
what
counts
Using
slide
out
menus
frees
up
visual
real
estate
while
sFll
allowing
the
user
instant
access
to
navigaFon
elements.
Full
menu
capabili&es
On
click
or
mouseover,
full
navigaFon
tools
become
available
without
interrupFng
any
acFve
media
currently
on
screen.
Quick
access
to
important
controls
Maintaining
low
threshold
calls
to
acFon
with
persistently
available
login
forms,
booking
details
and
other
important
controls.
Easy
access
Without
clogging
up
the
layout,
menus
can
be
hidden
unFl
called.
11. Navigation
&
Structure
Yeah
but
no
but…
what
about
really
content-‐heavy
websites?
Behold
the
Megamenu
Large
amounts
of
subpages
are
no
longer
hidden
under
several
steps
of
navigaFon.
One
click
on
a
top
level
category
can
reveal
all
subcategories
and
their
child
pages
in
one
view.
This
single
view
roadmap
can
then
be
integrated
into
many
of
the
methods
just
covered.
Visual
cues
welcome
To
further
enhance
scannability
of
page
lisFngs,
icons,
graphics
and
different
font
colours
and
sizes
are
oaen
used.
13. Direction
of
current
trends
and
best
practices
in
digital
service
&
website
user
journeys
As
with
navigaFon
and
site
structure,
digital
user
journeys
are
breaking
free
of
rigid,
predetermined
flows
and
allow
for
a
quicker,
effortless
goal-‐
focused
experience,
stripping
away
anything
unnecessary
for
the
end
user
for
enhanced
immediacy
of
service.
Low
threshold
Personalised
Fast
Goal-‐oriented
Simplified
and
transparent
14. User
Journeys
Low
threshold
IndicaFng
a
clear
and
effortless
first
step
into
the
purchase
or
sign
up
process
lowers
the
threshold
for
users
to
input
their
informaFon
and
eventually
become
customers.
Keep
it
simple
Only
asking
for
what
is
essenFal
to
get
started
makes
the
process
approachable
and
users
more
likely
to
enter
the
flow.
Keep
them
with
you
Once
the
user
is
in,
keeping
the
journey
simple
and
well
structured
and
leng
the
user
know
where
they
are
within
it,
and
what
opFons
are
available
to
them,
helps
avoid
dropping
out
mid-‐process.
15. User
Journeys
Personified
User
flow
gateways,
IP
tracking,
usage
staFsFcs
and
direct
user
selecFon
can
help
tailor
both
content
and
methods
of
delivery
to
a
specific
user.
Selectors,
forms
and
calculators
Leng
a
user
input
variable
data
to
receive
a
calculated
recommendaFon
for
content
is
especially
useful
in
financial
maPers.
First
name
basis
Even
something
as
simple
as
personalising
content
with
the
user’s
first
name
creates
rapport
and
a
sense
of
belonging.
User
accounts
For
long
term,
in
depth
personificaFon,
user
accounts
are
a
strong
tool.
Make
signing
up
and
logging
in
quick,
simple
and
worth
their
while.
16. User
Journeys
Goal-‐oriented
Using
tasks
and
goals
as
your
starFng
point
allows
for
clearer
user
journeys,
reducing
the
need
for
the
user
to
know
or
find
out
what
category
their
visit
falls
under
and
providing
them
an
effortless
first
step
into
dialogue
with
the
service.
Crystallised
user
journey
gateways
Everything
the
user
may
want
or
need
from
the
site
can
be
assigned
into
one
of
three
or
four
categories.
As
with
progressive
disclosure,
the
user
needs
only
make
a
single
flash
judgment
on
how
to
proceed
with
their
visit.
17. User
Journeys
Fast
Regardless
of
connecFon
speed,
users
have
grown
to
expect
speed
and
efficiency
from
their
online
services.
This
includes
Fme
needed
to
decipher
site
architecture,
steps
required
to
reach
desired
state
and
the
ability
to
quickly
scan
content.
Overlays
Pinterest
uses
overlays
instead
of
page
transiFons,
allowing
you
to
quickly
view
and
interact
with
mulFple
items
without
leaving
your
Pinterest
feed.
Tabs
and
accordions
Tabbed
and
collapsible
content
is
quicker
and
easier
to
browse
than
separate
pages,
and
allow
for
efficient
grouping
of
related
content
without
affecFng
page
length
or
scannability.
Flip
card
modules
A
variaFon
on
an
overlay,
modules
can
be
flipped
over
to
reveal
more
informaFon.
18. User
Journeys
Simplified
and
transparent
A
user
flow
stripped
down
to
the
essenFal
elements
and
uFlising
progressive
disclosure
and
inline
controls
makes
for
a
simple,
understandable
and
low
effort
process
that
almost
fades
into
the
background.
In
situ
With
current
technology,
there
is
no
need
to
move
between
pages
to
perform
tasks.
In
this
example,
clicking
‘add
to
cart’
automaFcally
expands
the
shopping
cart
from
the
top
nav,
revealing
opFons
to
change
quanFty,
remove
item
or
checkout.
No
interroga&on
Asking
only
what’s
essenFal
keeps
user
effort
level
minimal,
encouraging
more
completed
tasks.
In
this
example,
this
is
further
simplified
by
asking
if
the
user
already
has
an
account,
then
only
revealing
the
opFon
relevant
to
them
(in
this
case,
a
sign
up
form).
Note
that
at
account
creaFon
stage,
only
a
few
pieces
of
informaFon
are
required.
If
the
user
is
comfortable,
they
will
conFnue
or
return
to
add
more.
19. User
Journeys
But
what
about
services
and
products
with
much
more
variables?
Same
rules,
different
terms
These
services
especially
need
clarity.
SelecFng
which
variables
to
bring
up
and
which
to
knock
back
is
key.
Less
AND
more
Less
non-‐vital
informaFon
upfront.
More
ways
to
search,
filter
and
interact
with
the
vast
array
of
products
effecFvely.
21. Direction
of
current
trends
and
best
practices
in
digital
service
&
website
tone
of
voice
The
current
trend
in
both
wriPen
and
visual
language
is
using
a
direct,
dynamic
and
personal
tone,
eliciFng
an
emoFonal
response
and
creaFng
the
feeling
of
receiving
personal
service
within
a
self-‐service
flow.
Copy
and
microcopy
can
also
clarify
the
goals
and
sales
process
to
allow
for
quick
yet
informed
decisions.
Personal
and
user-‐focused
Understandable
Clear
and
direct
Visual
Consistent
22. Tone
of
voice
Personal
and
user-‐focused
The
days
of
online
brochures
are
over.
The
user
doesn’t
care
what
you
do,
they
care
what
you
can
do
for
them.
It’s
all
about
the
user
Speaking
directly
to
the
user
is
efficient
in
selling
services,
creaFng
a
sense
that
you
are
offering
them
something
that
is
relevant
to
their
needs
and
desires.
Make
it
a
dialogue
Asking
direct
quesFons
invites
and
encourages
user
response.
Users
listen
to
other
users
Many
online
stores
and
services
rely
on
user
reviews
to
prove
the
value
of
their
product.
TesFmonials
and
client
stories
are
a
great
way
to
bring
the
human
element
in.
23. Tone
of
voice
Clear
and
direct
Using
language
that
is
direct,
brief
and
answers
user
quesFons
about
the
essence
of
the
service
and
how
to
start
using
it
creates
strong,
low
threshold
calls
to
acFon.
What
does
it
do?
CommunicaFng
clearly
and
briefly
the
value
that
a
service
can
offer
is
the
new
‘elevator
speech’
-‐
but
with
less
Fme
to
grab
aPenFon
and
make
an
impact.
A
single
sentence
with
a
potenFal
strap
line
is
becoming
the
norm.
How
do
I
get
it?
The
choice
of
copy
down
to
the
microcopy
on
buPons
and
form
labels
are
used
to
invite
acFon.
DescripFve,
goal-‐oriented
terms
like
“start
now”
are
becoming
more
popular
than
generic
calls
to
acFon
such
as
“sign
up”.
Why
should
I
get
it?
Explaining
in
more
detail
but
remaining
clear
and
concise,
leng
the
user
know
what’s
in
it
for
them.
This
is
especially
important
with
more
abstract
services
where
the
value
will
not
be
realised
for
some
Fme
to
come
(such
as
pensions).
24. Tone
of
voice
Understandable
ConFnuing
from
clarity,
industry
jargon
is
sinking
(as
it
should).
Using
down
to
earth
language
to
explain
the
purpose
of
a
service
as
opposed
to
the
provider
has
become
prevalent
pracFce.
Short
and
sweet
Keeping
introductory
and
explanatory
paragraphs
short
helps
their
readability,
leading
to
an
easier
to
digest
user
experience.
Say
it
simply.
Then
say
it
simpler.
‘LocaFons’
is
good.
‘Where
we
work’
is
bePer,
because
it
makes
the
topic
an
acFve
one
(we
work,
and
here
is
where)
instead
of
a
passive
one
(lisFng
locaFons).
What
does
the
service
ACTUALLY
do?
‘Providing
soluFons’
is
abstract,
‘Building
businesses’
is
more
tangible.
The
focus
is
not
on
what
the
service
does,
it’s
on
what
the
user
can
get
out
of
it
-‐
a
subtle
but
weighty
difference.
25. Tone
of
voice
Visual
Visual
communicaFon
decisions
form
a
large
part
of
a
service’s
tone
of
voice,
from
colour
and
font
choices
to
level
of
simplicity
-‐
or
complexity
-‐
in
displaying
informaFon
and
changeable
data.
Graphical
representa&on
of
data
Numbers
and
abstract
data
can
be
parFcularly
difficult
to
absorb,
so
creaFng
graphs
and
visuals
is
used
as
a
succinct
way
to
explain.
Not
just
for
complex
data
For
visual
interest
and
approachability,
simpler
and
more
staFc
content
is
oaen
conveyed
visually.
This
also
allows
for
a
wider
range
of
prioriFsaFon
between
content
and
opFons
displayed
on
the
screen
at
the
same
Fme.
26. Tone
of
voice
Consistent
Both
wriPen
and
visual
communicaFon
should
be
consistent
across
the
enFre
user
journey.
CreaFng
a
set
of
guidelines
and
sFcking
to
them
removes
the
need
for
the
user
to
re-‐learn
how
to
read
and
interact
at
each
stage.
Subdomains
and
campaign
microsites
Subdomains
and
microsites
that
are
an
addiFon
or
enhancement
to
the
user
journey,
or
an
enFrely
separate
user
journey,
should
be
visually
disFnguishable
from
the
core
journey.
However,
certain
graphical
and
tonal
rules
should
remain
to
reassure
the
user
that
they
have
not
got
lost.
Consistent
choice
of
elements
Colour,
font
and
sentence
paPerns
should
form
a
cohesive
whole.
Using
a
limited
colour
palePe
or
a
specific
way
of
speaking
helps
keep
everything
together.
27. Tone
of
voice
But
this
is
serious
business!
That’s
why!
!
Many
important
topics,
such
as
insurance,
pensions
and
workplace
performance
can
have
a
negaFve
or
even
uncomfortable
air
to
them,
with
no
clue
where
to
start.
!
Same
goes
for
sick
kids
and
lack
of
clean
water.
This
is
why
the
chariFes
aiming
to
raise
awareness
and
collect
donaFons
use
fun,
interesFng
and
easily
digesFble
ways
to
do
their
thing.
29. Mobile
Experience The
amount
of
smartphone
and
tablet
users
has
increased
dramaFcally,
and
most
service
providers
are
switching
to
responsive,
fluid
layouts,
or
alternaFvely
creaFng
a
standalone
app
for
more
control
over
the
desired
user
journey.
Bespoke
mobile
app
Responsive/adap&ve
websites