An outline or flow chart that shows every screen, page and section of a website or application.
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.)
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:
You get the picture. Orientation can be vertical or horizontal, depending on the breadth and depth of the website.
Generally, we just show what the main topic of each page or screen is, 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.