Navigation Diagram

Definition

A navigation diagram (a.k.a., site map) is a low-level architecture diagram work product that documents how to navigate around the presentation components of an application.

Objectives

The typical objectives of a navigation diagram is to:

• Document the presentation components (e.g., screens and webpages).
• Document the navigation relationships between them.

Benefits

The typical benefits of a navigation diagram are to:

• It is typically used as an input to:
  • System Architecture Document.
  • User Interface Design.
  • User Interface Testing.
  • The Users Manual.
  • User Support Reference Materials.

Contents

The typical contents of a navigation diagram are:

• Screen/Webpage Icons:
  • Icons or Thumbnails
  • Filenames
  • Stereotypes (e.g., static vs. dynamic, HTML vs. Java Applet vs. ASP)
  • Primary Components (e.g., Content, Operations, Links)
• Navigation Relationship Icons:
  • Navigation Arcs
  • Decision Diamonds
  • Parameters passed (or cookies accessed)

Stakeholders

The typical stakeholders of a navigation diagram are:

• Producers:
  • Architecture Team
• Evaluators:
  • Project Manager
  • Technical Leader
• Approvers:
  • Project Manager
  • Technical Leader
  • Customer Representative
• Maintainers:
  • Architecture Team
  • User Experience Team
• Users:
  • Software Development Team
  • Independent Test Team
  • User Experience Team

Phases

• Business Strategy: Not Applicable
• Business Optimization: Not Applicable
• Initiation: Completed
• Construction: Maintained
• Delivery: Maintained
• Usage: Maintained
• Retirement: Archived

Preconditions

Navigation diagrams can typially be started if the following preconditions hold:

• The initiation phase has started.
• The architecture team is adequately staffed and trained in logical architecture production.

Inputs

The typical inputs to a navigation diagram include:

• Work Products:
  • Application Vision Statement
  • System Requirements Specification
  • System Architecture Document
• Stakeholders:
  • TBD

Guidelines

• Non-trivial user interfaces typically contain a large number of screens or webpages, thereby making a single navigation diagram impractical due to its resulting size and complexity. In such cases, it is typically better to have multiple navigation diagrams.
• Multiple navigation diagrams are typically organized around:
  • The role for which the screens and webpages are intended (see following examples).
  • The screens used during a use case path (i.e., a kind of storyboard for a usage scenario).

Conventions

Navigation diagrams are typically constrained by the following conventions:

• Work Flow
• Content and Format Standard
• Inspection Checklist

Examples

The following two example navigation diagrams document the webpages primarily developed to support the Seller and Accountant roles of a Web-based Auction application.

Seller Navigation Diagram


Accountant Navigation Diagram