evolution of the sitemap
improve the usability
of your deliverables
Chris Pierson & Jacco Nieuwland
EuroIA - September 25th, 2009

introductions

Chris Pierson
UX consultant
10 years UX experience
2.5 years at User Intelligence

Jacco Nieuwland
UX consultant
8 years UX experience
4 years at User Intelligence

User Intelligence
It’s our goal to design interactive products that provide
great User Experiences, based on knowledge of both
the users and the business.
Services we offer:
• Research
• Design
• Optimize
www.userintelligence.com

what is a
sitemap

a sitemap is a diagram in which the various pages or
page types throughout the site and the user paths to
and from them are documented.
A sitemap is an overview of the
pages within a website.
A site map is a diagrammatical representation
of the logical structure of a set of webpages
the sitemap is an IA relic from the
web 1.0 era

our definition
a design deliverable that seeks to
communicate the overall structure and
navigation of [a website] –
possibly including screens, pages,
objects, states and flows

why talk about sitemaps?

why talk about sitemaps?

why (talk about) sitemaps?
• So many of us still do this – and need to do this
• Nature of websites and applications is changing
• Structure needs to be mapped & communicated
So sitemaps need to evolve to be able to
effectively communicate structure and concepts

where have we come from?

Where have we come from?
web 1.0
hierarchical
top-down
static HTML

where are we now?

Where are we now?
web 2.0
linked & shared content
focused on user &
communities
XML, RSS

sitemap

primary action map

sitemap + navigation scheme

Alternative visualisations

concept map

user flows

UIAML scheme

screenflow plus scenario

storyboard for interactive movie

interaction matrix / interesting moments grid

wireflow

Where are we going?

Where are we going?
web 3.0
the semantic web
the machine web
linked data clouds

even though the way data is handled will change,
in many cases the design of the websites that
display that data will not change drastically

recap

sitemaps are still used to communicate
structure, navigation and concepts

it takes a lot of these diagrams to create
something simple

different audiences can have different
information needs – documentation needs to
account for this

so, is there a way to incorporate all these
needs into one deliverable?

interactive documentation

interactive documentation allows for different
layers of information and different views of the
same design

there are existing tools that do this (Axure,
Balsamiq, swipr, etc) - but none provide the
complete set of features we’re looking for

why not apply our user experience design
experience to our documentation?

requirements for documentation:
• easy to create
• easy to maintain
• creative control (open)
• easy to share/publish
• contextual communication
• easy to navigate / intuitive

sketches /ideas

past experience shows enthusiasm with the
audiences and improved understanding of
the design

2005 – UK government – communicate the
design of a complicated web application
integrating screenflows, wireframes, mockups,
validation rules/business rules

wrap-up

a sitemap is more than just a hierarchical
collection of pages
mapping & visualising structure and behaviour
is still important
visualisations are naturally evolving with
evolving technology
different audiences have different needs

interactive documentation
helps to cater for these audiences in one
deliverable
is an opportunity to apply our UX Design
experience to our deliverables
allows us to present these different layers
of information in context

what next?

thank you!
user intelligence
Amsterdam office
www.userintelligence.com
Chris Pierson
pierson@userintelligence.com
Jacco Nieuwland
nieuwland@userintelligence.com