The Visual Vocabulary

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

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

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

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

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

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)

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

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

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

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

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

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