How to Create Your First Sitemap

Oct 13, 2015
 
 

What is a sitemap

A sitemap is a list, chart or visual diagram representing the hierarchical structure of the pages in a website. It’s used as a website design planning tool to map out the site navigation and content.  It will identify site structure, architecture and page hierarchy. 

How it helps 

Categorizing the site content into logical groups/silos will go a long way to providing meaning to the user and ultimately usability;
  1. Organize the order and flow of your site pages, to create logical paths so that your audience will get and do what they came to your site to do.
  2. Ultimately a sitemap is used to plan the logical presentation of your website content to your users.
  3. Visualize and structure the user flow through the site.
  4. Arrange the presentation of content to help the organization achieve its business goals. 
  5. Plan a navigation that helps users access and find what they need to in an engaging and delightful way. 
Sitemaps are made up of page names or id’s, used to identify the hierarchy and grouping along with a simple legend for sitemap diagrams. 

Two of the ways to represent the page hierarchy of a website, includes:  
1) outline and 2) diagram. 
Not to be confused with the totally different sitemap xml file which helps search engines index searchable pages on a website. 

sitemap-outline2.pngSitemap Outline:

  • List view or also known as the Outline View is a simple way to represent the page hierarchy. 
  • Horizontal tree diagram like an org chart styled as a simple list with indentation. 
  • Can be horizontal or vertical tree diagram
 

Sample-sitemap.PNGSitemap Diagram: 

  • Is a visual approach to the sitemap with icons and illustrations to indicate key points of value? 
  • Several tools can be used to create visual sitemaps including MS Visio and professional design programs like illustrator or Photoshop. 
  • Generous use of symbols to represent various navigation points. 
  • Web based tools like gliffy.com and creatly.com are also popular tools when drafting up a sitemap diagram. 
 

Tools to create a site map

What You Need to Create Your Sitemap:
  1. Ideally a creative brief with clear business goals. 
  2. The website objectives (features and functionality) to help achieve the business goals as well as the user tasks. 
  3. Users goals and purpose (the task they are trying to achieve during the visit)
  4. Card sorting results which is where each page is represented by a card and rearranged by dragging and dropping the card to where the page should reside. 
What to consider when creating your first sitemap:
  • Why has the user come to the site?
    • Eg. To register, learn, purchase, donate…
  • What is the most logical path to achieving that purpose?
    • Eg. Home > Services > Quote Form
  • The Business Goals:
  • Does the navigation assist the business to achieve its goals?
  • Page & Content Relationship:
  • How do the pages relate/link to each other? Is there a logical relationship/flow?

Start with a sketch by hand or individual sticky notes (like card sorting).  
Once you are satisfied with the draft then you can graduate to your favorite app:

In closing 

The sitemap represents the Big Picture:
  • The sitemap should communicate the ‘big picture’ of the website to the decision makers, while providing enough detail to be useful for the development team. 
  • As a planning tool, referred to, collaborated on, and used by other project team members & stakeholders to achieve clarity by eliminating uncertainty. 
  • Make sure the sitemap pages are correctly labelled using established and agreed upon naming and numbering conventions. 
  • Include future or proposed pages from the pages within the project scope.
  • Use callouts to clarify proposed pages and/or features.
  • When showing the client the sitemap keep it simple and demonstrate the user flow from page to page. 
Finally here are 3 vital questions to answer for each major user group that should be considered when drafting your sitemap:
  1. Who is the primary user of the site?
  2. What is the user’s purpose for visiting the site?
  3. What is the user’s User Path?

About the Author

Tony Tullio

Tony Tullio is a veteran in the interactive business and Director/Founder at Inorbital and always looking for great web apps and useful websites. Let us know what you think about this topic by commenting or rating or connect with him via Twitter and LinkedIn


How would you rate the usefulness of this content?
Current rating: 5 (1 ratings)
Comments
Blog post currently doesn't have any comments.
 Security code

Popular Links

 

Twitter Linkedin Google+Facebook

Recent Design Projects