Designing a new website can be daunting. You have so many different types of information, and it’s often hard to understand how it needs to be organized and incorporated. Without clear guidance, it’s easy to design a bad user experience. Illogical content structuring and poor navigation are two of the most common web issues that lead to a poor user experience. When people visit websites that suffer from those issues, most stick around less than 15 seconds. The visitor is wondering, “what am I supposed to be doing here?”

Luckily, there is a tool that can help you logically organize your content and navigation. This tool will support you in your design process. This tool is called a sitemap.

Real-world analogy

To better understand the concept of a sitemap, we need to use an analogy from the real world. Imagine you visit a new city for the first time, and you know the place you want to visit, but you don’t know how to get there. It’s great when a city simplifies this task for you—it has districts and uses signs to help you find the direction (good navigation). It’s even better when you have a physical or digital representation of this city (map). Like this map, designers should create a visual representation to help plan out their website so the user has an easy time accessing and navigating it.

A digital map of San Francisco as depicted by Google maps.
A digital map is a representation of a city. Image by Google.

What is a sitemap?

It’s possible to define two types of sitemaps—a visual sitemap that you create before building a website and an XML file that contains a list of the pages on your website.

Visual sitemaps are a hierarchical diagram that shows the information architecture of a website. It gives you a visual representation of the site’s organization and how different sections are linked together. Sections can contain other sections or nodes (atomic unit of content). To make things more tangible, imagine we are creating a sitemap for an eCommerce website. For this website, a section can be a product category, while the sub-page can be a page with details for each item.

Diagram of a sample sitemap for a website.
Sample of visual sitemap for an eCommerce website.

Why do you need to create one?

Creating better information architecture is the primary goal of creating a sitemap. UX Designers and Information Architects use sitemaps (individual pages of the website connected to each other) to define the taxonomy (categories of information for a website)  through the grouping of related content. Sitemaps help identify where content should sit and show the relationship between different pages (for example, how “Item AA” page relates to the “Category A”).

Form a better understanding of the site’s goals and purposes

Every website should have a goal and a purpose. Sites without clear goals are often unfocused and hard to navigate. That’s why even before creating a sitemap, it’s essential to state a goal and evaluate every design decision aligns to this goal. Stakeholders use sitemaps to confirm that the direction the site is heading is right, and a product team can understand what content they need to provide on a website to meet the goal.

Create a single source of truth for a product team

Websites are rarely built by a single person with no outside input. Most often, a web design project involves the participation of many different people—front-end designers, back-end developers, stakeholders. All of them might have a different understanding of the logical connections between the site’s pages.

A visual sitemap has the role of a road map that is followed during the development of a website. A sitemap is the first tangible artifact of the website your team will create. When the relationships between your site’s pages are displayed visually, it becomes much easier to understand the connections and introduce a change to the IA and the design. For example, when a team wants to add a new page, they evaluate it in accordance with the current site’s structure.

Eliminate unnecessary pages

When team members look at the sitemap, they are looking at the floor plan of the site. The document shows every section of the site. The hierarchical information in a sitemap helps team members find and eliminate pages that aren’t directly tied to the site’s purpose.

Remove duplicated content

Multiple factors can cause bad UX, including content. Content isn’t always consistency updated and maintained. Many websites suffer from duplicated content. When content is duplicated in multiple pages, search engines can show a less desirable version of the page in the search results.

Thus, if you already have content on a particular topic on your website, it’s better to link to that page from another place, not create a new page with the same content. However, it’s hard to do that when you don’t track what’s already been created. This is when a sitemap comes to save the day. When you evaluate every page you want to add on your website according to the sitemap you have, you reduce the chance of duplicating content and creating a confusing user experience.

How to create a sitemap using information architecture

The great thing about a sitemap is that it can be created by anyone, regardless of their design skills. All you need are two types of elements—blocks and lines that connect them. The sitemap you create needs to have a few key attributes: 

  • A homepage. It is a root element located at the top
  • Items. Items can represent sections (tiers for content) or nodes (individual pages). Every item in the map should have a reference number (according to the hierarchy of elements) and label (usually, it’s a page title). Check whether the item labels are meaningful. Labels should describe the section/node clearly.
A website sitemap that shows three categories and multiple items nested underneath each category.
Sample sitemap for a website.

Let’s review a few tips for creating sitemaps:

Start working on the sitemap from the beginning of the web design process

You need to invest in building a strong sitemap right from the beginning of the web design process but conducting testing like card sorting. By establishing a hierarchy of your site’s pages at an early stage, you have a better chance of creating a product that your visitors will find easy to navigate. It’s recommended to create a sitemap after you have completed your discovery and have drawn your persona and mapped your user journey.

In addition, sitemaps should also take into account the business objectives—any content which is required by the stakeholders to fulfill business goals. That’s why it’s recommended to share your sitemap with stakeholders to get confirmation it meets their needs.

Review pages

Conducting a content audit is one of the first things you need to do when you want to improve the experience for an existing website. Look at the existing content on your website and see how everything is structured. Start with the homepage and see where your homepage links to. You’ll want to do this because sitemaps are for structuring information and not about the messaging of the site.

Prioritize information

Generally, the further a page is located from your site’s homepage, the harder it will be for visitors to find. That’s why you should always create a hierarchy of pages based on their importance. In many cases, it’s possible to prioritize content into tiers that follow a logical hierarchy. For example, on news sites, we have categories with different types of news such as “Sport,” “Entertainment,” “Politics.” Those large sections act as tiers for more specific content.

CNN's homepage shows content grouped by categories such as World, US Politics, Business, Health, etc.
CNN homepage features “World,” “US Politics,” “Business” as top-level categories. Image by CNN.

When you navigate to such a section, you see more specific subcategories such as, “Markets,” “Tech,” “Media,” etc.

CNN's business page has sub-topics like markets, tech, media, etc.

Align with user mental models

A mental model is an explanation of someone’s thoughts about how something works in the real world.

Jakob’s Law states that users spend most of their time on other sites. It means that users prefer your site to work the same way as all the other sites they already know. This rule works both for visual design and information architecture. In other words, the visual appearance and logical structure of your website shouldn’t be radically different from a competitor’s website in your category. For example, if you design a corporate website, it’s better to include a page “About us” and make it a top-level navigation option because most of your visitors expect to see this info.

It’s recommended to conduct an open card sorting workshop with people who represent your target audience and let them organize content into groups and come up with a name for the group.

Minimize the number of steps required to complete the operation

The more steps the user has to make to complete an operation (i.e., purchase a product on a website), the more chance a visitor will leave the site without completing the operation.

The 3-click rule is an unofficial web design rule that says that it should only take three clicks to navigate to any page on your website. It is based on the belief that users of the site will become frustrated and often leave if they cannot find the information within three clicks. Use a sitemap to figure out which steps are mandatory and which are optional, and combine steps where possible.

Keep sitemap in a format that is accessible to everyone working on the project

As I’ve mentioned above, a sitemap makes sure everyone involved in the project is on the same page. But it only happens when a sitemap is accessible to everyone. That’s why it should be kept in a location where people who work on a project can view it and introduce changes to it. A few site map tools that have this feature are Slickplan and Lucid Charts.

Update information architecture sitemap regularly

A sitemap shouldn’t be a static design artifact; it should be a living document that reflects all changes that happen in a website’s structure. Whenever a change is made, the sitemap should be updated and reflect this change.

Conclusion

A sitemap is a simple yet powerful tool that prevents you from designing sites that are more complicated than they need to be. But to make the most of this tool, it’s important to start using it in the early stages of your design process. Expand your knowledge by learning more about card sorting and web navigation