Fellow writer Tom Johnson has written several excellent posts on the value of quick reference guides as a concise job aid. He has also given great advice on best practices for developing them. If you need to create quick reference guides, I highly recommend Tom’s recent post, titled Quick Reference Guides: Short and Sweet Documentation.
Tom mentions the four basic principles discussed in one of my favorite design books, The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, by Robin Williams. (No, this isn’t Robin Williams the comedian, though Ms. Williams can certainly be irreverent and entertaining.) The post also mentions Robin’s useful mnemonic device for learning the four principles:
- Contrast
- Repetition
- Alignment
- Proximity
CRAP. Got it?
The missing principle
When studying and evaluating the presentation of content, I generally find that designers of all levels seem to follow the four principles to a great extent. They seem to understand the need for contrast and repetition. As for alignment, I could write volumes about the abuse of centered text, though it’s not as rampant as it used to be. But I find that the design element that is often lacking or absent is proximity.
Regarding proximity in visual design, Williams says
If items are related to each other, group them into closer proximity. Separate items that are not directly related to each other. Vary the space between to indicate the closeness or the importance of the relationship.
This seems simple and logical, doesn’t it? Yet, since the early days of the web (pre-CSS), I often see amorphous layouts like this one:
You can probably guess which paragraphs are headings, simply because they are single lines and are set in bold text. There is certainly some semblance of structure. But observe the amount of space between headings and body text. Also note the weight of the headings. Are they all at the same level? When you scan the blocks, does your eye find a resting place? Can you easily identify the relationships between chunks of text?
Bold headings are at least a start. There’s contrast. Good. Now let’s add proximity to the text by following Robin’s advice and grouping the paragraphs:
This is a subtle change, but we can now more easily recognize the information blocks. The first heading also looks slightly larger and heavier, suggesting that it is a first-level heading.
The Gestalt of clear text
If you search the web for information about proximity in visual design, you will find that most of the writing and discussion centers on the effects created by the grouping of figures and forms. This is the key aspect of Gestalt theory. Although proximity certainly plays a key role in our perception of graphic elements, I believe that it is equally important in the visual and perceptual organization of textual content.
Ben Hunt of Scratch Media agrees. In his post on Grouping elements for clear web page design, Hunt includes paragraphs and margins as important elements in successful page designs. I especially appreciate his assertion that
Grouping needs whitespace, its opposing force, to exist.
Proximity may seem like a small, insignificant design aspect, but it is a key principle for structuring information and promoting comprehension. When you are creating content for print or the web, pay attention to how you block the information. Regardless of the tool or technology that you’re using—Word, FrameMaker, InDesign, or CSS—you can easily use grouping and spacing to show relationships. Hint for CSS designers: Under the Box property group, look for margin-top and margin-bottom.
