A User Experience and Interface Designer
Site Map Diagram
A Site Map Diagram, also known simply as a “site map,” is a visual representation of a product’s hierarchy and its page flows. They can be created for a new site or application based on the results of a Task Analysis. For the purposes of this article, however, we will examine the creation of a diagram for an existing product.
Information Architects creating Site Map Diagrams typically use flowchart software like Visio, Gliffy, or OmniGraffle. This method concisely illustrates a product’s scope, relationships between pages, and inconsistencies between navigation and content labels. It can also bring attention to the presence of orphan pages or extraneous content.
SCHEDULE TIME & GATHER MATERIALS
Schedule Time
Time Needed: Minutes to Hours
Dependent upon content quantity and complexity
Gather Materials
Design software, especially software specially created for flow chart creation
CARRY OUT THIS METHOD
Complete a Controlled Vocabulary and a Content Audit so you have an inventory of what exactly you are mapping.
Use flow chart software like Lucidchart, Microsoft Visio, Omnigraffle, or Gliffy to build a boxes-and-arrows diagram of the highest level of site organization. Include the home page and top level sections in this first page of your diagram.
Subsequent diagram pages should describe more specific flows, including deep dives for content and interactive processes like checkouts.
Meet with stakeholders to decide whether to re-integrate or eliminate any orphan pages — that is, pages in the Content Audit with no currently active links to them.
Complete a Task Analysis for common user flows to see if pages are organized logically.
TIPS AND RESOURCES
Try these tips
If you are presented with a site map diagram for an existing product, verify that it is up to date.
In the absence of flow chart software, use software that lets you to draw and move shapes with ease (like Adobe Illustrator).
Explore more resources
Nielsen Norman Group: Site Map Usability, 1st study
Usability First: Site Map Diagram
Smashing Magazine: Efficiently Simplifying Navigation, Part 1: Information Architecture
Software Options
The Omni Group: OmniGraffle
Microsoft Office: Visio
Lucidchart: Diagrams Done Right
Draw.io : Draw.io