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 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.
Sample of visual sitemap for an eCommerce website.Why do you need to create sitemaps?
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 do you 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.
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 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.
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.