Sitemap Creating By www.seoonline.training
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:- [email protected] Number :- +91-7097095392