1 / 13

Visual Vocabulary: An Introduction Jesse James Garrett

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

petula
Download Presentation

Visual Vocabulary: An Introduction Jesse James Garrett

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related