ISG Playbook
APIsWhat is a Sitemap Diagram?
This diagram shows the hierarchical structure and relationship of screens (or pages) within a site or application.
When to use it
Use it to communicate decisions about a proposed site structure. Alternately, use it to understand and illustrate the structure of an existing site.
How to use it
This diagram is intended to show a high-level view of a site’s structure. Large sites may not be able to be illustrated using this diagram. In general, the higher the level in the site, the more comprehensive the illustration should be, and the lower the level, the less comprehensive it needs to be. You may need to leave out lower-level items in order to gain understanding and agreement of the higher-level items. After stakeholders agree on the hierarchy and labeling of the higher-level items able to be displayed in this diagram, you may want to use the detailed sitemap spreadsheet to delve further into details of large sites, such as content owner, publishing dates, and so on. This diagram uses shades of green to indicate the detailed hierarchy of one section of the sample site. Each of the other colored categories would have its own separate page, and each section would be similarly illustrated with shades of the same color.
Download:
Field | How to Use the Field |
Home | Usually the main screen or page of your site, from which all other screens/pages are navigable by the user. |
Level 1 | These are the highest-level categories that everything else on the site fits into. Most or all of the Level 1 categories would appear as global navigation in the user interface of your site. Remove or add items as necessary. |
Level 2 | Every Level 1 category has its own unique Level 2 items in it. In this template, only one Level 1 category is fleshed out, with five sample items in this category. Remove or add items as necessary. |
Level 3 | Every Level 2 category has its own unique Level 3 items in it. Remove or add items as necessary. |
Key | Color blocks indicate the levels the shades of green refer to. Change according to your colors used. Add or remove colors as necessary. |
Microlearning
| Section | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
HCD PROCESS |
| Info | ||
|---|---|---|
| ||
|
| Tip | ||
|---|---|---|
| ||
FOR MORE INFORMATION |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
RELATED METHODS |