Jeffrey Veen

Happy Birthday VisVocab

Jesse waxes nostalgic for boxes and arrows over at BoxesandArrows.com on the third anniversary of his Visual Vocabulary. For those of you not familiar with the tools, it is a set of standard elements that can be used to diagram interaction design flows and site architecture diagrams. I've been using it for almost as long as it has been out, and it feels like a second language to me -- an astonishingly efficient shortcut between my brain and an eventual design solution.

But remember, it's not just a bunch of shapes that makes for good deliverables -- the consistent use of those elements is equally important. When trying to diagram a series of Web interactions, remember these heuristics:

• Express interactions as simply as possible (but no simpler).
• Include a legend that explains what's what in the diagram.
• Be complete. Someone should be able to build from your diagram without you being around.
• Label every box with a noun, and ever arrow with a verb.
• Don't cross lines. If you can't avoid it, you're breaking the first rule.
• Use good visual design. Keep things aligned. Don't use more than one typeface. Make everything the same size.

Here are some excelent examples from the master himself: Yahoo Mail (34k PDF), Slate (41k PDF), Metafilter (20k PDF)

This entry was written by Jeffrey Veen and posted 15 December 2003 at 7:17 PM. It was filed under Information Architecture. | View blog reactions