How to Create Your First Sitemap

 

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. Visualize and structure the user flow through the site.
3. Arrange the presentation of content to help the organization achieve its business goals. 
4. Plan a navigation that helps users access and find what they need to in an engaging and user focused 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, include:  
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 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

 
 

Sitemap 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 www.gliffy.com and www.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:

• Microsoft Visio 
• Adobe Illustrator/Photoshop
• Gliffy or Creatly, Lucid Charts 

 

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?