website sitemap

Click here to load reader

Post on 14-Apr-2017




0 download

Embed Size (px)


Sitemap Creating


Overview of PresentationPurpose of a sitemap?Elements Of SitemapTypes of SitemapsWhat you need to create your sitemap?What is a website sitemap?Fundamentals Of SitemapCreating a sitemapApplying principles of tech & user docThe 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*StructureNavigationPage 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);

Elements Of Sitemap :Page ID (ie. numbered/labelled html pages)

Page levels (hierarchy)

Sitemap legend / key (legend used for sitemap diagrams)

Elements Of Sitemap


Types of Sitemaps:Two of the ways to represent the page hierarchy of a website, include:

Sitemap outlineSitemap diagram

Sitemap Outline:List View also known as the Outline View (a simple way to represent the page hierarchy)


Sitemap Diagram:Horizontal tree diagram (org chart style sitemap representation)


Sitemap Diagram:Vertical tree diagram (useful for planning out linear stories or narrow hierarchies on multi-level sites)


Pre Requisites to Create Your Sitemap?Tools to help you determine the sitemap include:Creative briefClear business goalsWebsite objectives (what the site must do features and functionality to help achieve the business goals as well as the user tasks)User profilesPrimary & secondaryUser purpose (the task achieved during the visit)Content delivery planResults of card sorting^^ exercise

Fundamentals Of Sitemap:Keep in mind:

User Purpose:Why has the user come to the site?Eg. To read info, download, play, make requestWhich 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 handSticky notes

and/orUse Software Tools:Microsoft WordMicrosoft Visio (Visio 2003 was used to create the diagrams for this presentation)OmniGraffleGliffyDreamweaverFireworksOthers

Examples of SymbolsBoxes and Arrows:^

Nick Finck stencils:~ Eg:


Or use your ownmethod!

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.**

Applying Principles of Tech & User DocumentationThe 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)

The sitemap as a collaboration & planning toolDistinguish future or proposed pages from the pages within the project scope Fig-6

Annotations: Callouts

Use callouts to clarify proposed pages 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:

Goto & Cotlers labelling convention clearly identifies the html pages, with page title, ID and html page name

Sharing the Sitemap Document:

Consider thedocument template which holdsthe sitemap!Fig-9

Sharing the Sitemap Document:

Get Started on Your Sitemap:Create your sitemap in the following representations:

Outline (ie. List View) ANDDiagram (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?

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)

Steps to Creating Your SitemapCreate 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

Contact UsEmail ID:- [email protected] Number :- +91-7097095392







Team TitleNameTitle

Company NameCompany NameDepartment Name

Static Page

Dynamic Page

Future Page

Page Cluster

Not Wireframed

Home Page





Double-click to type notes. Subselect "Title"to edit the title.

Home Page0.0index.html

About Us1.0about.html

Company Background 1.1


Biographies 1.2


Contact Information 1.3


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


Goto, K & Cotler, E., (2005)Web ReDesign 2.0 Workflow that WorksPeach Pit Press CA USA

Drag the side handles to change the width of the text block.

Working sitemap document

Drag the side handles to change the width of the text block.

Template that holds the working document