User point to parts of a site map with a pencil

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.

Description

Schedule Time & Gather Materials

Clock Icon

Schedule Time:

  • Time Needed: Minutes to Hours
    Dependent upon content quantity and complexity
Gather Materials

Gather Materials:

  • Design software, especially software specially created for flow chart creation

Carry Out This Method

Laptop on table
  1. Complete a Controlled Vocabulary and a Content Audit so you have an inventory of what exactly you are mapping.
  2. 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.
  3. Subsequent diagram pages should describe more specific flows, including deep dives for content and interactive processes like checkouts.
  4. 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.
  5. Complete a Task Analysis for common user flows to see if pages are organized logically.

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

Software Options

Shipping & Delivery

Vestibulum curae torquent diam diam commodo parturient penatibus nunc dui adipiscing convallis bulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat net

Vestibulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat netus.

Scelerisque adipiscing bibendum sem vestibulum et in a a a purus lectus faucibus lobortis tincidunt purus lectus nisl class eros.Condimentum a et ullamcorper dictumst mus et tristique elementum nam inceptos hac vestibulum amet elit