1. The Visual Vocabulary

2. Overview Introducing the Visual Vocabulary
Similarities between the Visual Vocabulary and Structural / Functional Diagramming
Differences between the Visual Vocabulary and Structural / Functional Diagramming
New Shapes / Concepts in the Visual Vocabulary

3. Introducing the Visual Vocabulary
Developed by Jesse James Garrett, a partner at Adaptive Path (a user experience consulting firm in California)
Original version was published in 2000 and has grown over time
Intended to offer a universal solution for diagramming websites, applications, and other processes

4. Similarities: Basic Principles
The ‘page’ remains the basic unit; multiple pages use a stack
Pages with a shared relationship are grouped together; the difference is that these use a rounded-edge border
Multiple pages use a stack

5. Similarities: Basic Principles
Dividing a diagram across multiple screens is still a necessity
The Visual Vocabulary uses ‘continuation points’ for this
The direction chosen for the lines has no significance
There is a typical movement flow; the difference is that the Visual Vocabulary adds an arrow

6. Difference: Detail and Focus
The Visual Vocabulary aims for a ‘common denominator’ approach
Minimum information needed by all groups who will access the document
The simplest visual way to convey it
The focus is broader than websites; other types of interaction are included, such as how a web application works

7. Difference: Showing Functionality
The Visual Vocabulary does not display functionality as part of a page
Instead, functionality is separate from the page and receives equal billing
The icons shown are for ‘files’ (such as a Word document, a PDF, an executable, or a collection of files)

8. Difference: Lines Lines can be labeled
To indicate the label of the link or button clicked
If additional detail is required a footnote can be indicated as well
Dotted lines represent a path that only exists if a condition is met
If the person is logged in
Can also apply to a grouping
Purchase

9. Concurrent Sets and Crossbars
Concurrent set: Sometimes one action creates multiple results; the icon is part of a movement line
Crossbar: Indicates movement can only occur in one direction
Opening a page in the same browser window and disabling back button
Preventing the user from moving backwards in a purchase process

10. Flow Areas and References
Flows areas (larger shape) and flow references (smaller shape):
A sequence of sub-steps that occurs in various places can be shown one time in detail in the flow area
All references to the process then use the smaller flow reference icon
Continuation points for entering and exiting process indicated in flow area

11. Decision Points & Branches
Decision points: Depending on what the user does the outcome differs
User action drives the outcome
Conditional branches: Each result is mutually exclusive; the user can only experience one
Smartphone users go to a mobile version of the website; other users go to a non-mobile version

12. Conditional Selectors
The user takes an action and multiple possible outcomes are available
Performing a search and having 3000 potential results
This is a ‘selector’; the user has choice
Note that in the previous ‘branch’, that ‘branching’ was done by the system before the user could choose

13. Clusters
After a conditional branch, the user may fall into a condition that requires them to make a choice
The website branches the smartphone user to the mobile version and other users to the non-mobile version
The non-mobile version has a low-bandwidth HTML+CSS version or a high-bandwidth Flash version and the user has to decide between them