16 march [email protected] · visual vocabulary · 1 visual vocabulary: an introduction...

16 March 2002 [email protected] · Visual Vocabulary · http://www.jjg.net/ia/visvocab/ 1

Visual Vocabulary:An Introduction

Jesse James Garrett


Rule Number One

Maximize portability.

Ensure that the widest possible audience can…• distribute• open• read• print• use

…the documents you produce.


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


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”


What they’re bad at

Specifying ‘behind-the-scenes’ system activities

Specifying page-level interface behaviors

Specifying every link on every page

Serving as stand-alone documentation


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


Tool-agnostic

See Rule Number One

Enforced simplicity of design

“If it will work in PowerPoint, it will work anywhere”


Why “vocabulary”?

Not just a collection of symbols, but a system

Has its own internal logic (“grammar”)

Efficient substitute for text descriptions


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.

searchquery

invalid

valid

searchresults

contentpages

submit

refinequery


Conditional elements

Represent basic concepts used in conditional logic

Can be combined to create arbitrarily complex navigational structures


Creating modular structures

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

orderconfirmed

continue to:home page

home loginmember

home


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


More info

http://www.jjg.net/ia/visvocab/

• Tutorial• Shape libraries• Reference materials• Examples

http://www.boxesandarrows.com/

• Detailed example

16 march [email protected] · visual vocabulary · 1 visual vocabulary: an introduction...

Documents