Mastering Information Architecture Diagrams: Essential Symbols and Best Practices

Charts are the most basic tool for web application development teams to communicate information architecture and interaction design. This article discusses considerations when using charts to describe systems, key points for using basic elements in information architecture and interaction design, and how to apply these elements.

Basic Elements: Pages, Files and Related Groups

The fundamental unit of user interaction on the web is the page , represented by a rectangle symbol. A page here denotes an expression unit, which may correspond to multiple HTML files or code files.

In addition to pages, there are files without navigation properties, such as audio, image, PDF, or executable files, represented by a document icon.

We use the page group symbol for a set of functionally similar pages with consistent navigation attributes, and the file group for a collection of files reachable through a single entry point.

Creating Relationships: Connections and Arrows

Relationships between elements are shown with connections . When describing information structure, page hierarchies are usually drawn as a tree, which is the recommended representation.

For interaction flowcharts, each connection must have a direction, using down‑stream and up‑stream arrows to indicate relative positions. To forbid upstream movement, a short perpendicular bar is added at the arrow’s tail.

Annotations can be added to connections and arrows, but should be used sparingly to avoid clutter.

Concurrent Event Groups

A half‑circle symbol represents a concurrent event group, used to describe multiple user actions that occur simultaneously (e.g., a popup window while the main page downloads). The group has directionality, with upstream elements linking to the curved side and downstream elements to the flat side.

Link Points

When a diagram becomes too large, link points (shown as brackets) allow the chart to be split into manageable modules. A single link point can connect to one or many other diagrams, and its orientation is a matter of designer preference.

Element Collections: Areas and Area Iterations

Areas (rounded rectangles) group pages that share one or more attributes, such as pages displayed in the same popup window. Repeated structures can be represented with area iterations (a stack of rounded rectangles) to avoid redundant diagrams.

Reusable Modules: Processes and Process References

Repeated sequences of steps are modeled as processes . A process is shown with a process area (a de‑cornered rectangle) and a process reference that acts as a placeholder wherever the process is invoked. Process areas have entry and exit link points outside the shape.

Basic Conditional Elements

Systems track one or more attributes (e.g., user type, session state, accessed content, date/time). Each attribute has a value; a specific value constitutes a condition , which the system evaluates to determine the appropriate path.

The system monitors attributes such as user type, login status, content being accessed, and timestamps.

Each attribute has a concrete value (e.g., "3 p.m.").

A condition links a particular value to a specific outcome.

The system decides whether the condition holds.

Decision Points

When a user's action can lead to multiple possible structures, a decision point (diamond) is used, with arrows indicating upstream and downstream relationships.

Conditional Connections and Arrows

Conditional connections (dashed lines) and conditional arrows indicate paths that are available only when certain conditions are met.

Conditional Branches

A conditional branch (triangle) represents a choice where only one downstream path will be taken based on the condition.

Conditional Selectors

Similar to branches, a conditional selector can deliver multiple downstream paths simultaneously when the condition is satisfied.

Groups

A group (circle) aggregates multiple paths, often used as the downstream element of a conditional branch or selector.

Conditional Areas

When a set of pages is governed by conditions, they are enclosed in a conditional area (rounded rectangle with a dashed border). Conditional areas typically include an error path for the case where none of the conditions are satisfied.