60 Page Design
Design pages to facilitate scanning by using headings, subheadings, columns; learn special page design considerations for the Web.
You can enhance readability by giving some thought to the design of your documents. By using headers, lists, bullets, and other design elements, you can reveal your organization to the reader and emphasize key points. Below are page design guidelines you should consider when writing print or online documents. Your design can underscore your message. Be sure to consider these guidelines in the context of design principles.
Design Pages to Facilitate Scanning
According to usability research conducted by Sun Microsystems, “Seventy-nine percent of Web users scan pages; they do not read word-by-word.” [more]. This finding suggests that you should design documents so they can be scanned by your readers.
You can create more scannable documents by:
- Following a deductive organization (i.e., putting purpose, significance, and results in your introduction).
- Using page-design principles to emphasize the message and organization (e.g., using bullets, lists, and illustrations to highlight key points).
Use Design Elements to Highlight Your Message
In the example below, notice how your eye is drawn to the blue header and the boxed elements. In these spaces, you can highlight the important part of your message.
Headings
For some genres of documents, headings would be considered too impersonal or too technical. For example, you certainly don’t want to see headings and bullets used in a suspense novel. Increasingly, however, headings are used to help readers scan documents.
Even vague headings like Introduction, Results, and Discussion can be useful: They give readers a sense of what is covered within the section. Better yet, descriptive titles cue your readers about your stance on the content of sections. For example, rather than Introduction, Results, and Discussion, you could write “Why Are Headings Important.”
As previously discussed, highly skilled readers tend to scan through documents on first reading, noting the content of your headings. This gives them a sense of your overall message. An additional advantage of headings is that they create additional white space.
Word processing programs enable you to highlight text and then define text as a level 1 heading, level 2 heading, and so on. Using style tags you can change the size or color of the heading. The advantage of using style tags is that you can change all level 1 headings with ease rather than going through and changing every level 1 heading. In other words, if you tagged text 15 times as an H1, and then you edited the look of that heading, your changes would ripple through the text, changing all 15 headers. Additionally, Microsoft Word and Corel Word Perfect can use the style tags as hyperlinks.
Results from readability research indicate that readers have difficulties with more than three levels of headings. When you use more than three levels of headings, readers become confused. Also ensure that all of your headings are equal grammatically. For example, headings can all be questions, verb phrases, or noun phrases, yet you cannot mix together questions, verb phrases, and noun phrases.
Level 1 Heading
Level 2 Heading
Level 3 Heading
- Bullets
Many readers and writers love bullets. Some people even claim they think in bullets. Bullets create emphasis. They focus the reader’s eye on the bulleted material and they break up textual space.
Using a word processor, you can easily adjust the look and feel of bullets, making them ornate or simple. Again, it’s best to use the bullet style tag so that you transform the look and feel of your bullets with a single key stroke as opposed to needing to reformat each bullet separately.
Below is a humorous translation from Moby Dick to illustrate the “get to the point” technical style of the Web to literary discourse:
| “Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off — then, I account it high time to get to sea as soon as I can.” | I go to sea when I:
|
| Source: Moby Dick by Herman Melville | Source: This example is adapted from Kathy Henning’s Writing for Readers Who Scan |
Lists
Lists share all of the positive attributes of bullets: They create the white space readers love, placing emphasis by drawing the reader’s eye to what you want to highlight. Yet lists are appropriate when a series of steps is being presented. Unlike bullets, lists imply you complete item 1 before moving on to item 2.
Using lists and numbering sections of documents is very common in legal and technical genres where more than one person is writing the document or where litigation may follow.Once again, use the style tag for lists in order to have control over your document.
Special Page Design Considerations for the Web
Have you ever wondered why many books and magazines have narrow text columns? Alternatively, why are so many Web pages short, about screen length?
Readability research has found that impatient readers don’t want to turn their heads back and forth to read. They want to scan the document, reading straight down the page without any head nodding! Impatient readers don’t want to use scroll bars, either.
Of course, readers’ interactions with texts are in a state of flux. Some readers may actually prefer long documents because they can be easily printed. However, as a general rule, researchers in the field of usability analysis and interface design suggest that you limit your content to properly fill the screen page of a monitor set to
- Maximum width = 640 pixels
- Maximum height = 480 pixels
Of course, modern monitors, powered by computers with video boards, may be set to display many more pixels on a page. The standard, in fact, is probably moving to
- Maximum width = 1024 pixels
- Maximum height = 768 pixels
