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

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

28. Contact Us Email ID:- Info@SEOOnline.Training Phone Number :- +91-7097095392