How to create a UX Sitemap: a simple guideline
“As a little kid, I climbed a lot of trees because I always loved the bird’s-eye view” - Felix Baumgartner, Stratosphere Skydiver
Sometimes UX design requires the perspective of a kid, full of curiosity, to find new heights. By creating a UX sitemap, you’ll be able to take an early glance at your website or application from the tree tops. Let’s look at the what, when, how, and why of UX sitemaps.
What is it?
A UX sitemap is a hierarchical diagram of a website or application, that shows how pages are prioritized, linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird’s eye view.
When is it used?
Sitemaps are used early in the UX design process, right after the discovery phase. You’ll typically create a sitemap after personas, user journey, and card sorting (Babich, 2019). For an existing website, work on a site audit or content inventory before designing the new sitemap.
How to create a UX Sitemap
[Anatomy]
A UX sitemap consists of linked pages, each with a reference number and a label. Reference numbers help you keep track of pages even as you move on to wireframes, prototypes, and iterations (Mears, 2013). Write labels as clear page titles, optimized for users through card sorting.
Start with the homepage, and place pages in following rows by priority (high-level categories to specific pages). You’ll see primary pages in a row, secondary pages in the next, and so on.
Another way to look at sitemap hierarchy is through URL structure:
website.com/category/sub-category/specific-page
Although optional, you can also include a legend explaining symbols and lines, annotations clarifying information, and illustrated page types to show type distribution (Mock, 2017).
[Tips for Small, Medium, Large Websites]
Depending on the size and complexity of your website, you can create a flat or deep sitemap.
For a small website or application (10+ pages) consider creating a flat sitemap, with 4 or less vertical levels. Flat sitemaps enhance discoverability of content because there are fewer levels to click through. The flattest sitemap consists of 1 vertical level, where different sections are placed on one page.
For medium sized (100+ pages), you can still create a flat sitemap but with a wider row of secondary pages. To surface those pages, consider using a mega menu that groups links into sub-categories to improve scanning.
For large sized (1,000+ pages), consider creating a deep sitemap to help house all the information, with 5+ vertical levels. Deep sitemaps can make it harder to discover content, so try to provide alternative ways (like menu shortcuts) to reach deeper pages. Category pages or navigation hubs can also help further organize the volume of pages (Backlinko).
Why is it valuable?
A UX sitemap allows you to plan for usability, whether you’re working on a new website or a redesign (Marie, 2018). It provides a full overview, which then helps teams to simplify, trim off unnecessary pages, and keep what’s important. A UX sitemap also helps you see if linked pages are user and SEO friendly. With a sitemap, you can strategically place content where users would easily find it, and also pinpoint problem areas such pages hidden under an unintuitive label (Mears, 2013).
Conclusion
Overall, a UX sitemap informs user-centered decisions in navigation, labeling, and organization. Here’s a quick recap of what we’ve learned:
- What: UX sitemap is a hierarchical diagram of linked pages.
- When: Create early in the UX design process, after discovery phase.
- How: Each page has a reference number and label, and pages are linked from high-level categories to specific pages. Consider a flat sitemap for smaller websites, and deep sitemap for larger.
- Why: UX sitemap shows a full picture of your digital product so you can make better design decisions.
Now that we’ve climbed the conceptual tree of a UX sitemap, I hope you’ve reached new heights on how to improve the UX design of your website or application.
References
Sitemaps & Information Architecture (IA) — Nick Babich, 2019
Sitemaps — The Beginner’s Guide — Chris Mears, 2013
How to create a sitemap in 8 steps: Designing a better UX flow — Anna Savina
Flat vs. Deep Website Hierarchies — Kathryn Whitenton, 2013
How to Create a Sitemap: Your Comprehensive Guide — Liza Mock, 2017
Website Architecture — Backlinko
Site Mapping: A Comprehensive Guide — Jenn Marie, 2018
The 3-Click Rule for Navigation Is False — Page Laubheimer, 2019
