![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.”**](https://image.slidesharecdn.com/sitemap-150822082439-lva1-app6892/85/Website-Sitemap-16-320.jpg)
Website Sitemap
- 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: Static Page Dynamic Page Future Page Page Cluster Fg-5 Not Wireframed ¶¶ Home Page Eg. 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: Home Page 0.0 index.html About Us 1.0 about.html about_company.html Biographies 1.2 about_biographies.html Company Background 1.1 Contact Information 1.3 about_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 Works Peach Pit Press CA USA 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: Working sitemap document Template that holds the working 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