LIS 523 - Structure Diagrams

This page gives a brief summary of Garrett's "visual vocabulary for describing information architecture and interaction design". For more details, see

Use the landscape rectangle page symbol for a single Web page and the portrait dogeared rectangle file symbol for other kinds of files, such as PDFs. The pagestack or filestack symbol may be used for a set of similar pages or files that all relate in the same way to the rest of the structure. These symbols should have brief identifying labels inside them.

Use a straight-line connector to join page or file symbols; add an arrow at the end when the order is important, with the crossbar added near the beginning when the order is essential. Connectors may be horizontal or vertical, or a combination of the two. If a connector needs a label, the label should be above it if it is horizontal and to its right if it is vertical. A reference to a footnote is like other labels, but should be in parentheses.

A broken-line conditional connector symbol is used to show a connection that is available only under some circumstances.

You may indicate a group of pages or other files that share common attributes by surrounding their symbols with a rounded-rectangle area symbol. A set of such groups that all share the same relationships to the site structure can be indicated with an iterative area symbol. A group of pages all of which are available only under the same condition or conditions may be indicated with a broken-line conditional area symbol.

The semicircle concurrent set symbol indicates a user action that generates multiple simultaneous results, as in the case of a pop-up. The diamond-shaped decision point symbol indicates a user action that leads to different single results, but where the user is not presented with the results as choices. The triangular conditional branch symbol indicates a user action that leads to different single results, where the user is presented with these results as choices. The trapezoidal conditional selector symbol is similar to the conditional branch symbol, except that the user may select more than one of the choices.

For more complex structures, multiple, linked diagrams may be required. A continuation point to or from a node in another diagram can be indicated with the square-bracket continuation point symbol. One diagram can also contain a single hexagonal flow reference symbol which refers to another diagram for more detail; the other diagram has a labeled hexagonal flow area containing more detailed structure information, plus continuation points marking entry and exit.


Last updated November 6, 2003.
This page maintained by Prof. Tim Craven
E-mail (text/plain only):
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7