Creating a Website Sitemap

2. This Presentation: <ul><li>What is a website sitemap? </li></ul><ul><li>Purpose of a sitemap? </li></ul><ul><li>Sitemap elements </li></ul><ul><li>Types of sitemaps </li></ul><ul><li>What you need to create your sitemap </li></ul><ul><li>Sitemap fundamentals </li></ul><ul><li>Creating a sitemap </li></ul><ul><li>Applying principles of tech & user doc </li></ul><ul><li>The sitemap as a collaboration & planning tool </li></ul>

3. What is a Sitemap? <ul><li>A sitemap is a list or diagram which represents the hierarchical structure of the html pages in a website . </li></ul>

4. Purpose of a Sitemap: <ul><li>A sitemap is a website design planning tool . It is used to: </li></ul><ul><li>Map out the site architecture * </li></ul><ul><ul><ul><li>Structure </li></ul></ul></ul><ul><ul><ul><li>Navigation </li></ul></ul></ul><ul><ul><ul><li>Page hierarchy ; </li></ul></ul></ul><ul><ul><li>Categorise the site content into logical groups , which will have meaning for the user; </li></ul></ul><ul><ul><li>Organise the order of the pages of the site, to create logical paths (so that targeted users achieve the purpose of their visit); </li></ul></ul>* See www.gdoss.com for info on site architecture

5. Purpose of a Sitemap (cont): <ul><li>A sitemap is used to: </li></ul><ul><ul><li>Plan the logical presentation of website content to users; </li></ul></ul><ul><ul><li>Visualise and structure user paths; </li></ul></ul><ul><ul><li>Organise the presentation of content to assist the business to achieve its business goals; </li></ul></ul><ul><ul><li>Plan user-centric functionality, to enhance the user experience; </li></ul></ul><ul><ul><li>Plan a navigation structure that orientates and directs users , and enables (and entices) users to engage with the site </li></ul></ul>

6. Sitemap Elements: <ul><ul><li>Page ID (ie. numbered/labelled html pages) </li></ul></ul><ul><ul><li>Page levels (hierarchy) </li></ul></ul><ul><ul><li>Sitemap legend / key </li></ul></ul><ul><ul><ul><li>(legend used for sitemap diagrams) </li></ul></ul></ul>

7. Sitemap Elements Fig 1

8. Types of Sitemaps: <ul><li>Two of the ways to represent the page hierarchy of a website, include: </li></ul><ul><ul><li>Sitemap outline </li></ul></ul><ul><ul><li>Sitemap diagram </li></ul></ul><ul><ul><li>(NB: Don’t confuse the sitemap outline or diagram planning tool with the sitemap </li></ul></ul><ul><ul><li>xml file on a website, which helps search engines to index the searchable pages on a </li></ul></ul><ul><ul><li>website. Not covered in this presentation) </li></ul></ul>

9. Sitemap Outline: <ul><li>List View also known as the Outline View (a simple way to represent the page hierarchy) </li></ul>Fig 2

10. Sitemap Diagram: <ul><li>Horizontal tree diagram (org chart style sitemap representation) </li></ul>Fig 3

11. Sitemap Diagram: <ul><li>Vertical tree diagram (useful for planning out linear stories or narrow hierarchies on multi-level sites) </li></ul>Fig 4

12. What You Need to Create Your Sitemap: <ul><li>Tools to help you determine the sitemap include: </li></ul><ul><li>Creative brief </li></ul><ul><li>Clear business goals </li></ul><ul><li>Website objectives (what the site must do – features and functionality – to help achieve the business goals as well as the user tasks) </li></ul><ul><li>User profiles </li></ul><ul><ul><li>Primary & secondary </li></ul></ul><ul><ul><li>User purpose (the task achieved during the visit) </li></ul></ul><ul><li>Content delivery plan </li></ul><ul><li>Results of card sorting ^^ exercise </li></ul>^^ For card sorting info see also: http://en.wikipedia.org/wiki/Card_sorting

13. Sitemap Fundamentals: <ul><li>Keep in mind: </li></ul><ul><li>User Purpose: </li></ul><ul><ul><li>Why has the user come to the site? </li></ul></ul><ul><ul><ul><li>Eg. To read info, download, play, make request… </li></ul></ul></ul><ul><ul><li>Which is the most logical path to achieve that purpose? </li></ul></ul><ul><ul><ul><li>Eg. Home > Services > Request Form </li></ul></ul></ul><ul><li>Business Goal(s): </li></ul><ul><ul><li>Does the navigation assist the business to achieve its goal? </li></ul></ul><ul><li>Page & Content Relationship: </li></ul><ul><ul><li>How do the pages relate/link to each other? Is there a logical relationship/flow? </li></ul></ul>

14. Creating a Sitemap: <ul><li>Plan your sitemap: </li></ul><ul><li>By Hand: </li></ul><ul><ul><li>Sketch by hand </li></ul></ul><ul><ul><li>Sticky notes </li></ul></ul><ul><ul><li>and/or </li></ul></ul><ul><li>Use Software Tools: </li></ul><ul><ul><li>Microsoft Word </li></ul></ul><ul><ul><li>Microsoft Visio (Visio 2003 was used to create the diagrams for this presentation) </li></ul></ul><ul><ul><li>OmniGraffle </li></ul></ul><ul><ul><li>Gliffy </li></ul></ul><ul><ul><li>Dreamweaver </li></ul></ul><ul><ul><li>Fireworks </li></ul></ul><ul><ul><li>… Others </li></ul></ul>

15. Examples of Symbols Used in Sitemap Diagrams: <ul><li>Boxes and Arrows : ^ </li></ul><ul><li>Nick Finck stencils : ~ </li></ul>Eg. Or… use your own method! Fig 5

16. The Sitemap Shows the Big Picture : <ul><li>“ [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.”** </li></ul><ul><li>** Source: Withrow.,J (published 30/08/2004) Site Diagrams: Mapping an Information Space on the Boxes and Arrows website, </li></ul><ul><li>available at: http://www.boxesandarrows.com/view/site_diagrams_mapping_an_information_space </li></ul><ul><li>[accessed 24/3/09] </li></ul>

17. Apply Principles of Tech and User Documentation: <ul><li>The sitemap is a shared planning tool, referred to, collaborated on, and used by other project team members & stakeholders </li></ul><ul><li>Aim to achieve clarity - to eliminate doubt! </li></ul><ul><li>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) </li></ul><ul><li>Ensure sitemap pages are correctly labelled using established naming and numbering conventions (agreed upon by the design/dev team) </li></ul>

18. Sitemap: A Planning & Collaboration Tool: <ul><li>Distinguish future or proposed pages from the pages within the project scope </li></ul>Fig 6

19. Annotations: Callouts <ul><li>Use callouts to </li></ul><ul><li>clarify proposed </li></ul><ul><li>pages </li></ul><ul><li>and/or features </li></ul>Fig 7

20. Annotations: <ul><li>When showing the client the sitemap: </li></ul><ul><ul><li>Omit or minimize highly technical annotations (intended for designers and coders) </li></ul></ul><ul><ul><ul><li>Unless there is a specific purpose for raising the technical issue with the client (eg. There may be a feasibility issue) </li></ul></ul></ul><ul><ul><li>Allow the sitemap to do its job </li></ul></ul><ul><ul><ul><li>ie. demonstrate the logical presentation of content on the site (review slides 4 & 5!) </li></ul></ul></ul>

21. Clearly Identify Pages: Goto & Cotler’s labelling convention clearly identifies the html pages, with page title, ID and html page name Fig 8

22. Sharing the Sitemap Document: <ul><li>Consider the </li></ul><ul><li>document </li></ul><ul><li>template </li></ul><ul><li>which holds </li></ul><ul><li>the sitemap! </li></ul>Fig 9

23. Sharing the Sitemap Document: Fig 10

24. Sharing the Sitemap Document: <ul><li>Label the </li></ul><ul><li>document </li></ul><ul><li>for ease of </li></ul><ul><li>identification , </li></ul><ul><li>retrieval and </li></ul><ul><li>collaboration </li></ul><ul><li>with multiple </li></ul><ul><li>audiences. </li></ul>Fig 11

25. Get Started on Your Sitemap: <ul><li>Create your sitemap in the following representations: </li></ul><ul><ul><li>Outline (ie. List View) </li></ul></ul><ul><ul><li>AND </li></ul></ul><ul><ul><li>Diagram (either horizontal or vertical) </li></ul></ul><ul><li>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!) </li></ul>

26. Critical Questions: <ul><li>Primary User: </li></ul><ul><li>Who is the primary user of the site? </li></ul><ul><li>What is the user’s purpose for visiting the site? </li></ul><ul><li>What is the user’s Key User Path? </li></ul><ul><li>Secondary User: </li></ul><ul><li>Who is the secondary user of the site? </li></ul><ul><li>What is the user’s purpose for visiting the site? </li></ul><ul><li>What is the user’s Key User Path? </li></ul><ul><li>The aim is to understand: </li></ul><ul><li>How does the content on one html page relate (or logically connect) to the content on the linked page along the key user path? </li></ul>

27. <ul><li>Gather the tools required to plan your sitemap (eg. user profiles, business goals, content plan) </li></ul><ul><li>Make sure you have a clear User Purpose (for both primary & secondary user) </li></ul><ul><li>Categorise the content for your site </li></ul><ul><li>Use a hands-on offline, card sorting (or similar) technique to map out the content for your site </li></ul><ul><li>Ensure that there is a clear Key User Path (the path which most logically enables the user to achieve the visit purpose ) </li></ul>Suggested Steps to Creating Your Sitemap:

28. Suggested Steps to Creating Your Sitemap (cont): <ul><li>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 </li></ul><ul><li>Once you are satisfied with your structure, create a hand-drawn draft sketch of the sitemap </li></ul><ul><li>Create your Sitemap Outline (ie. the List View of the pages of the site) </li></ul><ul><li>Using your preferred software tool, create an electronic diagrammatic version of your sitemap </li></ul><ul><li>Apply tech doc skills for multiple audience sharing and collaboration </li></ul>

29. Sources: <ul><li>* Doss, G (12/2004) Information Architecture Design , on Glen Doss’s website available at http://www.gdoss.com/web_info/information_architecture_design.php </li></ul><ul><li>[accessed 25/7/09] </li></ul><ul><li>See also great examples of sitemaps at: </li></ul><ul><li>http://www.gdoss.com/web_info/CAPTUS_site_ias.pdf </li></ul><ul><li>www.gdoss.com </li></ul><ul><li>^ Withrow., J (published 30/08/2004) Site Diagrams: Mapping an Information Space on the Boxes and Arrows website, </li></ul><ul><li>available at: http://www.boxesandarrows.com/view/site_diagrams_mapping_an_information_space </li></ul><ul><li>[accessed 24/3/09] </li></ul><ul><li>www.boxesandarrows.com </li></ul><ul><li>~ Finck, N (2006) Visio Stencils for Information Architecture on Nick Finck’s blog. Available at: http://www.nickfinck.com/blog/entry/visio_stencils_for_information_architects/ . </li></ul><ul><li>[last accessed 24/3/09] www.nickfinck.com </li></ul><ul><li>Goto., K & Cotler., E (2005) Web Redesign 2.0 Workflow that Works, Peach Pit, CA USA </li></ul><ul><li>www.gotomedia.com </li></ul><ul><li>Melinz, J (2009) Creating a Sitemap for your Major Web Design Project , Client Requirements PowerPoint Presentation on the TAFE NSW, Sydney Institute, IT Faculty Moodle site, available at http://sielearning2.tafensw.edu.au/ DET login required [last accessed 24/7/09] </li></ul>

Creating a Website Sitemap

Jeannie Melinz

Creating a Website Sitemap