The Purpose of Site Maps and Other Design Deliverables

How Site Maps Differ from Other UX Diagrams

“A site map is a diagram that shows the organization of a Web site’s or application’s content and functions,” answers Jim. “It’s a way to visualize the organization and labeling of content. It gives clients and project-team members an overview of the Web site and how all the content will fit together. Some designers seem to be confusing site maps with other types of UX diagrams. Site maps typically use boxes to represent pages or page states and arrows or lines to show connections. But UX professionals, developers, and others use boxes and arrows in many other types of diagrams. For example, flowcharts had been around for many years before anyone created the first site map.

“Use flow diagrams show how people interact with a Web site or application. Instead of showing the organization of content, they show a person’s path through the user interface and what they experience. These may appear similar to site maps, so it’s important for designers to clearly label and explain these diagrams.

“While site maps, use flow diagrams, and navigation diagrams may look similar, content inventories and wireframes look entirely different from site maps. A content inventory lists the details of all the pages, documents, and pieces of content on an existing Web site. Its usual purpose is to inventory all of a site’s existing content to determine what will need to go onto a new Web site. You should create a content inventory at the beginning of a Web site redesign process, before creating a site map to plan the organization of the new site’s content. Information architects often create content inventories in an Excel worksheet.

“While a site map provides an overview of a Web site’s or application’s organization, wireframes show the designs of individual pages. Wireframes are usually early, black-and-white line drawings of the content and features on a particular page or screen.”

The Evolution of the Term Site Map

“I’ve watched the word site map evolve over time,” replies Cory. “Ten years ago, a site map was a page Web designers stuck on a Web site so, when users became confused by poor or convoluted navigation choices, they could theoretically turn to this site map, see tons of links that mapped out the organization of the whole site, and find what they were looking for. In reality, users didn’t very often find or think to turn to the site map, so it didn’t manage to compensate for poor navigational options.

“These days, the most frequent use of the term site map seems to be for SEO (Search Engine Optimization) purposes. The site map provides a way for a Web site to convey information to search engines about the pages on a site and when those pages need to be re-indexed. This type of site map is not typically visible to users as they navigate a site.

“Design teams sometimes use the term site map to refer to a document that conveys a site’s structure—although they may also call this a site outline, a site hierarchy, or sometimes just refer to it as the site’s information architecture (IA). However, in reality, the site map is a child of the overall information architecture. Whatever a team chooses to call this document and however they prefer to illustrate it, conveying the hierarchy of a site is essential, as is understanding the expected user flows and methods available for navigation. Understanding what content will be on a site, as well as the structure and behavior of the site is also critical. Wireframes often convey this information. Often, each of these is a separate deliverable, but that’s not a hard-and-fast rule. If it makes sense for a particular project, aspects of these deliverables could overlap or be combined.

“While a site map that is intended for users is not often a stand-alone page anymore, the same principles often apply to navigation that comprises a mega menu or drop-down menus, which frequently display multiple levels of a site hierarchy. In other cases, a mega footer lays out the top levels of a site’s hierarchy. While neither of these methods provides the comprehensive site map of days past, I’ve seen more successful implementations of these hierarchical navigation techniques validated through usability testing than I ever saw from the original site maps.”

Site Maps and Design Flow

“The primary purpose of a site map is to show the hierarchical organization of the pages or screens on a Web site or in an application,” agree Mike and Rick. “Nodes in a tree or hierarchy represent all of the site’s pages, with top-level nodes corresponding to top-level categories or tasks and child nodes corresponding to detailed content or specific tasks. The organization is a strict hierarchy, in which each page has only one parent.

“The most direct use of a site map is to identify the locations of the pages on a site. When you make a page’s location visible—by highlighting the selected navigation item or providing a breadcrumb—it provides orientation to users and helps them understand a page’s context, explore related pages, and find pages again during subsequent sessions.

“Since site maps lay out all the pages on a site, it’s often necessary to add metadata to page nodes for secondary purposes. For example, you can assign a number to each page that you’ll also use on wireframes, so the site map becomes a page inventory. You can flag pages for which links appear in the top-level navigation to assess the global coverage of the site’s navigation system.

“Although site maps do not describe the layouts of different page types—for example, product-listing pages and product-details pages—you can use site maps to show how different page types are distributed throughout a site, by indicating the page type of each node. Similarly, even though the connections on a site map do not reflect navigation paths, you can highlight a sequence of nodes in a site map to indicate the path a user would take through the site to perform a task.

“Content inventories and wireframes document different steps in the design process rather than mapping a site’s organization. Typically, teams create content inventories before creating a site map because a content inventory documents what content already exists on a site, independent of its distribution across various pages. In contrast, teams often create wireframes, which specify the layouts of individual pages, after creating a site map because wireframes include global navigation, which usually reflects the organization of the site that the site map describes.

“Despite the diverse uses of site maps, team do not often create them. One reason is that, on a responsive site, the number of pages may change, depending on the size of a device’s screen. Another reason is that, in an agile development environment, there is rarely enough time to create a complete site map. Thus, the lack of a site map results from the speed at which the team is moving. But lacking a site map may also cause teams to miss gaps, where pages are left dangling and isolated, while if there had been a site map, the team could easily have identified missing connections.”