The JJ Garrett UX Library is a set of standard symbols for web development teams that provides a robust method for communicating information architecture (IA) and interactive design capabilities. The library contains a small set of objects with specific meanings and functions identified by their shape and type. This library is open-ended for use with any web project.
The page symbol is the core unit for UX flow diagramming, which represents a single page within a website. Pages are places and not processes; users visit pages and move through them as they would in physical locations. Pages are assigned a corresponding sitemap’s page title for seamless identification. Links or redirects that determine flow between real pages are represented in flow diagrams by connectors or lines. Pages usually connect to at least one other object and may connect to multiple objects.
The file symbol represents website objects that users may interact with but not navigate through. Typically files are downloaded, opened, or streamed to a user from page objects within a website system. Connectors identify where users may request or interact with files. Files can be identified by labeling them with custom text.
Connectors are solid lines that define directionless relationships between objects in a flow diagram. A connector represents the linkage or path from one object to another. In user flow diagramming, connectors define the possible paths that a user may travel within a website. Alternatively, in information architecture diagramming, connectors show how pages and data are related to each other and they may illustrate hierarchy. Connectors may be labeled with custom text but should only be used in cases where they convey additional information about an action taking place.
Conditional connectors represent a scenario where a flow path may or may not be offered to a user based on whether criteria or conditions have been met. A conditional connector is represented by a dashed line connecting one object to another. Conditional connectors may be labeled with custom text but should only be used in cases where, like connectors, they convey additional information about an action taking place or a required condition.
Connector arrows define a specific direction within a flow diagram. A user will typically flow in the direction the arrow is pointing on your site. The arrow is located on the connector line closest to the target object. To limit backward flow, a perpendicular bar is placed on the connector line at the opposite end from the arrow. Connector arrows may also used with conditional connectors.
It is often helpful to identify sets of pages or objects that share common attributes or exist within a certain subsection. The group symbol is a rounded-corner rectangle that encloses a set of grouped objects. Groups are identified by text labels. Connectors do not point to groups directly but rather to elements inside or outside of the group. It is recommended you use groups sparingly to avoid potential clutter and confusion.
Conditional branches represent points in the flow where multiple paths exist, but only one conditional branch can be offered to a user; conditional branch paths are mutually exclusive. The path is decided by the system, not the user, and is determined by whether specific criteria and conditions are met. The conditional branch triangle symbol sits on the connector line pointing toward the path’s origin. The wide end of the triangle faces one or more path options. While optional, it must be noted as to whether or not it is possible for the conditional branch to lead nowhere.
A conditional selector represents points in the flow where multiple paths exist, and multiple paths can be offered to a user; conditional selectors are not mutually exclusive. The path choices are offered by the system based on specific criteria or conditions, but the path taken is decided by the user. The conditional selector trapezoid symbol points with the narrow end toward the path’s origin and with the wide end toward the path’s options. It is possible for the conditional selector to lead nowhere when criteria or conditions are not met.
The cluster symbol, or circle, represents scenarios where a path leads to multiple paths based on whether criteria or conditions have been met. The cluster symbol sits on the connector line between a single path and the split to multiple paths. Clusters may also be located directly after a conditional branch or conditional selector.
Shown as a diamond, the decision point is a position in the user flow where the system determines where the user will proceed next. Multiple paths may exist, but only one path may be taken by the user. A decision point is usually preceded by a user action that provides input the system will use in its determination. The diamond symbol sits on the connector line between the point of user interaction and the branching paths. Connector arrows must be used with decision points to denote the direction of the user flow.
A concurrent set symbol can be used to represent multiple simultaneous interactions or occurrences. A half-circle symbol is placed on a connector line that branches toward two or more symbols representing interactions that occur at the same time. Concurrent sets may include a mix of symbol types such as a pages and files. Simple text labels can be used to identify the action or trigger of a concurrent set.
A user symbol is helpful for indicating where a user will enter a diagrammed system. A common example would be to show a user symbol with an arrow pointing toward the website’s login page; this would indicate where a user enters a system in order to gain access to password protected content. Including a user symbol indicates the system is human interactive rather than an automatic or computerized process. Consider placing and labeling multiple user symbols to show a variety of user types or personas, and whether they should enter the system from the same or different locations.
The text symbol helps elaborate or further explain concepts, ideas or notes that can’t be easily illustrated with the other diagram icons. It’s there to annotate or add comments to further explain the diagram flow.