Day 29: Visual Sitemaps
Visual sitemaps reveal the organization of all the pages or screens within that site. It’s a great way to get the big picture of the information architecture (IA) and the taxonomy. It’s also a valuable tool for reworking and simplifying that IA.
What it is.
An outline or flow chart that shows every screen, page and section of a website or application.
How it’s used.
Visual sitemaps have been used in a number of different ways, from a tool to start organizing and building the IA to a back door channel for users to find what they’re looking for without meandering around a bad UI.
Product designers use sitemaps to take an inventory of an existing website and simplify the IA. We also keep them as documentation of a large, growing website so that we remember where we’ve put everything.
(XML and HTML Sitemap Protocol 0.9 introduced by SiteMaps.org is a standard, validated and used by Google and most other search engines, that creates sitemaps for indexing webpages. Those are not visual sitemaps.)
“Sitemaps display the relationship between various pages and content of a website, demonstrating the way that the website is organized, how it can be navigated, and how it is labeled.” — Dynomapper
Discussion.
A sitemap is another handy document for understanding the information architecture of any application or website. As complex SaaS and ecommerce sites grow and change, the sitemap is often the single source of truth for how that IA is organized.
As a new designer, one of the first few things you’ll want to analyze is that sitemap for the product you’re responsible for. (The other things you’ll look at are the pattern libraries and the style guides.)
The sitemap doesn’t have to be fancy or even graphical. Apple uses an outline form for its public-facing sitemap. Others like the flow-chart variety. Still others make a hybrid outline-flowchart. What it looks like isn’t as important as that it documents absolutely every section of the website.
Here are some examples of site maps:
How to do it.
Orientation can be vertical or horizontal, depending on the breadth and depth of the website.
- Generally, we just show the main topic of each page or screen, and not all the content.
- We DO show when multiple links on a page lead to more pages and screens.
- In fact, we try to show everything so that this becomes a complete inventory of the website. Then, as we add sections, it’s easier to see where a new section logically fits within the taxonomy.
Sitemaps are extremely handy when it comes to simplifying a website that has grown organically into a Frankenstein as people add sections and pages without thought to the overall IA. (Think about your local government’s websites.)
Or a website to which a logical taxonomy was never applied at all, like the Jami Lin website.
Once you’ve inventoried and mapped the entire site, it becomes obvious where sections should be combined, duplicates eliminated, and obscure terminology clarified. That’s the fundamental job of the information architect, and the sitemap is her primary tool.
Your Assignment
Create a sitemap for your favorite website.
Using the outline or flowchart style of sitemap, create a document that inventories one of your favorite websites.
- Be sure to include everything that is on website–even login pages and links from the header, super header and footer
- Once you’ve inventoried everything, see if you can simplify the sitemap with a better taxonomy
- Try to eliminate duplicate sections or pages
- Try to condense the sitemap into as simple a structure without eliminating any of the content
Deliverables
Create a pdf and share your old and new sitemap in the comments and/or on Dribbble and Twitter #100daysdesign.
Originally published at 100days.design on November 30, 2017.
