What is a sitemapA 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 helpsCategorizing the site content into logical groups/silos will go a long way to providing meaning to the user and ultimately usability;
- 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.
- Visualize and structure the user flow through the site.
- Arrange the presentation of content to help the organization achieve its business goals.
- Plan a navigation that helps users access and find what they need to in an engaging and user focused way.
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.
- 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
- 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 mapWhat You Need to Create Your Sitemap:
- Ideally a creative brief with clear business goals.
- The website objectives (features and functionality) to help achieve the business goals as well as the user tasks.
- Users goals and purpose (the task they are trying to achieve during the visit)
- 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.
- 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 closingThe 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.
- Who is the primary user of the site?
- What is the user’s purpose for visiting the site?
- What is the user’s User Path?