In this PPT we Explaining the overview of Sitemap.
Topics:
Purpose of a sitemap?
Elements Of Sitemap
Types of Sitemaps
What you need to create your sitemap?
What is a website sitemap?
Fundamentals Of Sitemap
Creating a sitemap
Applying principles of tech & user doc
The sitemap as a collaboration & planning tool
2. Overview of Presentation
• Purpose of a sitemap?
• Elements Of Sitemap
• Types of Sitemaps
• What you need to create your sitemap?
• What is a website sitemap?
• Fundamentals Of Sitemap
• Creating a sitemap
• Applying principles of tech & user doc
• The sitemap as a collaboration & planning tool
4. What is a Sitemap?
• A sitemap is a list or diagram which represents the
hierarchical structure of the html pages in a website.
5. 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);
6. Elements Of Sitemap :
– Page ID (ie. numbered/labelled html pages)
– Page levels (hierarchy)
– Sitemap legend / key
• (legend used for sitemap diagrams)
11. Sitemap Diagram:
• Vertical tree diagram (useful for planning out linear stories or
narrow hierarchies on multi-level sites)
Fig-4
12. Pre Requisites 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
13. Fundamentals Of Sitemap:
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?
14. 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
15. Examples of Symbols
• Boxes and Arrows:^
• Nick Finck stencils:~
Eg:
Static Page Dynamic Page Future Page Page Cluster
Fg-5
Not Wireframed
¶¶
Home Page
Eg. Or… use
your own
method!
16. 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.”**
17. Applying Principles of Tech & 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)
18. The sitemap as a collaboration &
planning tool
• Distinguish future or proposed pages from the pages within
the project scope Fig-6
20. 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!)
21. Clearly Identify Pages:
Home Page
0.0
index.html
About Us
1.0
about.html
about_company.html
Biographies 1.2
about_biographies.html
Company Background 1.1
Contact Information 1.3
about_contact.html
0.0 Home Page
1.0 About Us
1.1 Company Background
1.2 Biographies
1.3 Contact Information
2.0 Products & Services
3.0 News & Features
4.0 Coming Soon
Organisational and HTML Naming
Source:
Goto, K & Cotler, E., (2005)
Web ReDesign 2.0 Workflow that Works
Peach Pit Press CA USA
Goto & Cotler’s labelling
convention clearly identifies the
html pages, with page title, ID
and html page name
22. Sharing the Sitemap Document:
Consider the
document
template
which holds
the sitemap!
Fig-9
23. Sharing the Sitemap Document:
Working sitemap
document
Template that holds
the working document
24. 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!)
25. Critical Questions:
Primary User:
Who is the primary user of the site?
What is the user’s purpose for visiting the site?
What is the user’s Key User Path?
Secondary User:
Who is the secondary user of the site?
What is the user’s purpose for visiting the site?
What is the user’s 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?
26. 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)
27. Steps to Creating Your Sitemap
• 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
