Visual Vocabulary An Introduction Jesse James Garrett 16

Visual Vocabulary: An Introduction Jesse James Garrett 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 1

Rule Number One Maximize portability. Ensure that the widest possible audience can… • distribute • open • read • print • use …the documents you produce. 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 2

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. 5 x 11 preferred) Use color as a redundant information channel only 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 3

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” 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 4

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 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 5

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 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 6

Tool-agnostic See Rule Number One Enforced simplicity of design “If it will work in Power. Point, it will work anywhere” 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 7

Why “vocabulary”? Not just a collection of symbols, but a system Has its own internal logic (“grammar”) Efficient substitute for text descriptions 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 8

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. search query submit invalid refine query 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. 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ search results content pages 9

Conditional elements Represent basic concepts used in conditional logic Can be combined to create arbitrarily complex navigational structures 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 10

Creating modular structures These elements allow you to: • Break up your diagram across multiple pages • Represent unusually complex (tangled) architectures • Create reusable “objects” continue to: home page order confirmed home 16 March 2002 login member home jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 11

Freely available shape libraries Omni. Graffle 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 • Free. Hand 9 and higher • Power. Point 97 and higher • Adobe In. Design • i. Grafx Flowcharter 2000 Plus EPS files for import into most other tools 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 12

More info http: //www. jjg. net/ia/visvocab/ • • Tutorial Shape libraries Reference materials Examples http: //www. boxesandarrows. com/ • Detailed example 16 March 2002 jjg@adaptivepath. com · Visual Vocabulary · http: //www. jjg. net/ia/visvocab/ 13