Website Sitemap

1
Sitemap Creating

• By
• www.seoonline.training

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

3
Architecture
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)

7
Elements Of Sitemap
Fig-1
8
Types of Sitemaps

• Two of the ways to represent the page hierarchy
  of a website, include
• Sitemap outline
• Sitemap diagram

9
Sitemap Outline

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

Fig-2
10
Sitemap Diagram

• Horizontal tree diagram (org chart style sitemap
  representation)

Fig-3
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 gt Services gt 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
Fg-5
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

19
Annotations Callouts

• Use callouts to
• clarify proposed
• pages
• and/or features

Fig-7
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
Goto Cotlers 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
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 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?

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

28
Contact Us

• Email ID- Info_at_SEOOnline.Training
• Phone Number - 91-7097095392