Sitemap Creating

Bywww.seoonline.training

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

Architecture

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);

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

– Page levels (hierarchy)

– Sitemap legend / key • (legend used for sitemap diagrams)

Elements Of Sitemap Fig-1

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

include:

– Sitemap outline– Sitemap diagram

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 style sitemap

representation)

Fig-3

Sitemap Diagram:• Vertical tree diagram (useful for planning out linear stories

or narrow hierarchies on multi-level sites)Fig-4

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

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?

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

• 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 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 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)

The sitemap as a collaboration & planning tool

• Distinguish future or proposed pages from the pages within the project scope Fig-6

Annotations: CalloutsUse callouts to clarify proposed pages and/or features

Fig-7

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:

Home Page0.0

index.html

About Us1.0

about.html

about_company.html

Biographies 1.2about_biographies.html

Company Background 1.1

Contact Information 1.3about_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 WorksPeach Pit Press CA USA

Goto & Cotler’s 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:

Working sitemap document

Template that holds the working document

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 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?

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

Contact Us

Email ID:- Info@SEOOnline.TrainingPhone Number :- +91-7097095392