Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating a Website Sitemap

257,318 views

Published on

A website sitemap is a planning tool. Use it to plan, collaborate and communicate the logical presentation of content on your website.

Published in: Design, Business, Technology
  • Ordinary Guy Retires After Winning The Lotto 7 Times  https://tinyurl.com/t2onem4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want a girl to "chase" you, then you have to use the right "bait". We discovered 4 specific things that FORCE a girl to chase after you and try to win YOU over. copy and visiting... ➤➤ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs(Official) $69 | Get 90% Off + 8 Special Bonus? ▲▲▲ http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Creating a Website Sitemap

  1. 1. Creating a Sitemap Web Project Docs for the Web Designer & Information Architect © 2009 Jeannie Melinz
  2. 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. 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. 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. 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. 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. 7. Sitemap Elements Fig 1
  8. 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. 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. 10. Sitemap Diagram: <ul><li>Horizontal tree diagram (org chart style sitemap representation) </li></ul>Fig 3
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Sharing the Sitemap Document: Fig 10
  24. 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. 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. 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. 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. 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. 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>
  30. 30. © 2009 Jeannie Melinz

×