Creating a Sitemap

Web Project Docs

for the Web Designer & Information Architect

2009 Jeannie Melinz

This Presentation:

What is a website sitemap?

Purpose of a sitemap?
Sitemap elements
Types of sitemaps
What you need to create your sitemap
Sitemap fundamentals
Creating a sitemap
Applying principles of tech & user doc
The sitemap as a collaboration & planning tool
What is a Sitemap?

A sitemap is a list or diagram which represents the

hierarchical structure of the html pages in a website.
Purpose of a Sitemap:

A sitemap is a website design planning tool. It is used to:

Map out the site architecture*

Structure
Navigation
Page hierarchy;

Categorise the site content into logical groups, which will have
meaning for the user;

Organise the order of the pages of the site, to create logical

paths (so that targeted users achieve the purpose of their visit);

*See www.gdoss.com for info on site architecture

Purpose of a Sitemap (cont):

A sitemap is used to:

Plan the logical presentation of website content to users;

Visualise and structure user paths;

Organise the presentation of content to assist the business to

achieve its business goals;

Plan user-centric functionality, to enhance the user experience;

Plan a navigation structure that orientates and directs users, and

enables (and entices) users to engage with the site
Sitemap Elements:

Page ID (ie. numbered/labelled html pages)

Page levels (hierarchy)

Sitemap legend / key

(legend used for sitemap diagrams)
Sitemap Elements
Fig 1
Types of Sitemaps:
Two of the ways to represent the page hierarchy of a
website, include:

Sitemap outline
Sitemap diagram

(NB: Dont confuse the sitemap outline or diagram planning tool with the sitemap
xml file on a website, which helps search engines to index the searchable pages on a
website. Not covered in this presentation)
Sitemap Outline:
List View also known as the Outline View
(a simple way to represent the page hierarchy)

Fig 2
Sitemap Diagram:
Horizontal tree diagram (org chart
Fig 3
style sitemap representation)
Sitemap Diagram:
Vertical tree diagram (useful for
planning out linear stories or narrow Fig 4
hierarchies on multi-level sites)
What You Need to Create Your Sitemap:
Tools to help you determine the sitemap include:

Creative brief

Clear business goals

Website objectives (what the site must do features and functionality

to help achieve the business goals as well as the user tasks)

User profiles
Primary & secondary
User purpose (the task achieved during the visit)

Content delivery plan

Results of card sorting^^ exercise

^^For card sorting info see also: http://en.wikipedia.org/wiki/Card_sorting
Sitemap Fundamentals:
Keep in mind:

User Purpose:
Why has the user come to the site?
Eg. To read info, download, play, make request
Which is the most logical path to achieve that purpose?
Eg. Home > Services > Request Form

Business Goal(s):
Does the navigation assist the business to achieve its goal?

Page & Content Relationship:

How do the pages relate/link to each other? Is there a logical
relationship/flow?
Creating a Sitemap:
Plan your sitemap:

By Hand:
Sketch by hand
Sticky notes

and/or

Use Software Tools:

Microsoft Word
Microsoft Visio (Visio 2003 was used to create the diagrams for this presentation)
OmniGraffle
Gliffy
Dreamweaver
Fireworks
Others
Examples of Symbols Used in Sitemap Diagrams:

Boxes and Arrows:^ Fig 5

Eg.

Static Page Dynamic Page Future Page Page Cluster

Nick Finck stencils:~

Eg.
Or use
your own
method!

Not Wireframed Home Page
The Sitemap Shows the Big Picture:

[For the sitemap] to be useful to my audience,

the diagram must communicate the big picture
of the website to stakeholders, while providing
enough detail to be useful for the development
team.**

**Source: Withrow.,J (published 30/08/2004) Site Diagrams: Mapping an Information Space on the Boxes and
Arrows website,
available at: http://www.boxesandarrows.com/view/site_diagrams_mapping_an_information_space
[accessed 24/3/09]
Apply Principles of Tech and User Documentation:

The sitemap is a shared planning tool, referred to, collaborated on,

and used by other project team members & stakeholders

Aim to achieve clarity - to eliminate doubt!

Ensure correct document title, labelling, version control, authorship,

creation date and/or date last updated, refs, URL, project/site name
(as per your agreed conventions)

Ensure sitemap pages are correctly labelled using established

naming and numbering conventions (agreed upon by the design/dev
team)
Sitemap: A Planning & Collaboration Tool:
Distinguish future or proposed pages from the pages
Fig 6
within the project scope
 Annotations: Callouts
Use callouts to
clarify proposed
pages Fig 7
and/or features
Annotations:

When showing the client the sitemap:

Omit or minimize highly technical annotations (intended for

designers and coders)
Unless there is a specific purpose for raising the
technical issue with the client (eg. There may be a
feasibility issue)

Allow the sitemap to do its job

ie. demonstrate the logical presentation of content
on the site (review slides 4 & 5!)
Clearly Identify Pages:
Organisational and HTML Naming

Home Page
Fig 8
0.0
0.0 Home Page index.html

1.0 About Us

1.1 Company Background About Us

1.0
about.html
1.2 Biographies

1.3 Contact Information

Company Background 1.1
2.0 Products & Services about_company.html
Biographies 1.2
3.0 News & Features about_biographies.html

4.0 Coming Soon Contact Information 1.3

about_contact.html

Source: Goto & Cotlers labelling

Goto, K & Cotler, E., (2005) convention clearly identifies the
Web ReDesign 2.0 Workflow that Works html pages, with page title, ID
Peach Pit Press CA USA and html page name
 Sharing the Sitemap Document:
Consider the
document
template
which holds
Fig 9
the sitemap!
Sharing the Sitemap Document:
Template that holds
the working document
Fig 10

Working sitemap
document
 Sharing the Sitemap Document:

Label the
document
for ease of
identification,
retrieval and
collaboration
with multiple
audiences.

Fig 11
Get Started on Your Sitemap:

Create your sitemap in the following representations:

Outline (ie. List View)

AND
Diagram (either horizontal or vertical)

Make sure you can answer the three critical questions on the next
slide for both your primary and secondary site users (and tertiary
users if applicable!)
Critical Questions:
Primary User:
Who is the primary user of the site?
What is the users purpose for visiting the site?
What is the users Key User Path?

Secondary User:
Who is the secondary user of the site?
What is the users purpose for visiting the site?
What is the users Key User Path?

The aim is to understand:

How does the content on one html page relate (or logically connect)
to the content on the linked page along the key user path?
Suggested Steps to Creating Your Sitemap:
Gather the tools required to plan your sitemap (eg. user profiles,
business goals, content plan)

Make sure you have a clear User Purpose (for both primary &
secondary user)

Categorise the content for your site

Use a hands-on offline, card sorting (or similar) technique to map out
the content for your site

Ensure that there is a clear Key User Path (the path which most
logically enables the user to achieve the visit purpose)
Suggested Steps to Creating Your Sitemap (cont):
Create a user scenario (eg. what if the user enters the site on this
page?... or bookmarks this page? enters from the
homepage?...etc) and test your proposed navigation structure

Once you are satisfied with your structure, create a hand-drawn draft
sketch of the sitemap

Create your Sitemap Outline (ie. the List View of the pages of the site)

Using your preferred software tool, create an electronic diagrammatic

version of your sitemap

Apply tech doc skills for multiple audience sharing and collaboration
Sources:
*Doss, G (12/2004) Information Architecture Design, on Glen Dosss website available at
http://www.gdoss.com/web_info/information_architecture_design.php
[accessed 25/7/09]
See also great examples of sitemaps at:
http://www.gdoss.com/web_info/CAPTUS_site_ias.pdf
www.gdoss.com

^Withrow., J (published 30/08/2004) Site Diagrams: Mapping an Information Space on the Boxes and Arrows
website,
available at: http://www.boxesandarrows.com/view/site_diagrams_mapping_an_information_space
[accessed 24/3/09]
www.boxesandarrows.com

~ Finck, N (2006) Visio Stencils for Information Architecture on Nick Fincks blog. Available at:
http://www.nickfinck.com/blog/entry/visio_stencils_for_information_architects/.
[last accessed 24/3/09]
www.nickfinck.com

Goto., K & Cotler., E (2005) Web Redesign 2.0 Workflow that Works, Peach Pit, CA USA
www.gotomedia.com

Melinz, J (2009) Creating a Sitemap for your Major Web Design Project, Client Requirements PowerPoint
Presentation on the TAFE NSW, Sydney Institute, IT Faculty Moodle site, available at
http://sielearning2.tafensw.edu.au/ DET login required [last accessed 24/7/09]
 2009 Jeannie Melinz