Visual%20Vocabulary:

1
Visual Vocabulary An Introduction Jesse James
Garrett
2
Rule Number One

• Maximize portability.
• Ensure that the widest possible audience can
• distribute
• open
• read
• print
• use
• the documents you produce.

3
Consequences of Rule Number One
Deliver electronically, not hard copy Unless a
document needs to be edited by others, deliver in
PDF Favor tool-independent formats over
proprietary ones Design for standard page sizes
(8.5x11 preferred) Use color as a redundant
information channel only
4
Architecture Diagrams
a.k.a. site maps, user flows Provide the big
picture of the user experience Provide context
for design decisions Serve as the foundation for
the rest of the project The trophy deliverable
5
What theyre bad at
Specifying behind-the-scenes system
activities Specifying page-level interface
behaviors Specifying every link on every
page Serving as stand-alone documentation
6
The Visual Vocabulary

• Started in 1998 first made public in 2000
• Set of standard shapes to express common concepts
• Designed to be
• Tool-agnostic
• Whiteboard-compatible
• Self-contained

7
Tool-agnostic
See Rule Number One Enforced simplicity of
design If it will work in PowerPoint, it will
work anywhere
8
Why vocabulary?
Not just a collection of symbols, but a
system Has its own internal logic
(grammar) Efficient substitute for text
descriptions
9
An example
From the search query page, the user can submit a
query. The system checks to see if the query is
valid if it is not, the system returns the user
to the query page. If the query is valid, the
user is presented with a sequence of search
results pages. From these pages, the user can
navigate to one or more content pages matching
the query, or return to the query page to refine
the query.
search query
10
Conditional elements
Represent basic concepts used in conditional
logic Can be combined to create arbitrarily
complex navigational structures
11
Creating modular structures

• These elements allow you to
• Break up your diagram across multiple pages
• Represent unusually complex (tangled)
  architectures
• Create reusable objects

order confirmed
home
login
member home
12
Freely available shape libraries

• OmniGraffle 2.0 for Mac OS X ships with the
  library pre-installed
• Libraries on my site for
• Visio 4 and higher
• Illustrator 8 and higher
• FreeHand 9 and higher
• PowerPoint 97 and higher
• Adobe InDesign
• iGrafx Flowcharter 2000
• Plus EPS files for import into most other tools

13
More info

• http//www.jjg.net/ia/visvocab/
• Tutorial
• Shape libraries
• Reference materials
• Examples
• http//www.boxesandarrows.com/
• Detailed example