Although it's too early to call it the standard, many Web pages follow this layout:

The primary and secondary links provide the site's navigation and reveal how the content is structured. The primary links represent the major content categories. The secondary links typically go to utility pages, such as the Search and FAQ pages.

How you organize the content in the body of the page depends on whether you expect your audience to skim the material or read it from start to finish. This in turn depends on what they’re trying to accomplish, how interested they are in the topic and how much time they have. Skimmers are looking for a specific piece of information and want to find it as quickly as possible. Readers are motivated enough to read through an entire page or multi-page article from start to finish.

 What skimmers need

If you anticipate your audience will be skimming—not reading—your content, follow these guidelines:

• Summarize the most important points or conclusion at the beginning of the page. This is known as the “inverted pyramid” style, used in print for journalistic content.
• If an article spans more than three or four screens, chunk the information into logical sections and place on separate pages.
• Make the text easy to scan by using:

• One idea per paragraph
• Lots of headings
• Tables and bulleted lists
• Highlighted words
• Tables of contents
• Half the word count of printed version

These guidelines were first identified by Jakob Nielsen, who researched how people read on the Web.

The most common kind of skimmed content is an “organizer” or navigation page. Its purpose is to help users find the right page or site section, and it may not have much real content of its own. An organizer page typically contains links grouped into logical categories, with short summaries that explain what each page contains. (See Microsoft's Office Programs page for an example.)

How to make a page of text more skimmable:

1. Identify the main sections and add headings.
2. Revise the first paragraph to state the conclusion.
3. Add a table of contents, if appropriate.
4. Check for one idea per paragraph.
5. In each section, add tables and lists, as appropriate.
6. Tighten up the text.
7. Highlight the most important concepts.

Examples

Also, compare the original and edited version of the article "General Husbandry of Aquatic Turtles" (password required).

To top

What readers need

The content on some Web pages make them more like magazine articles that are read straight through from beginning to end. However, the physical characteristics of the computer monitor can make extended reading difficult. For content you expect people to read—not just skim—follow these guidelines:

• Keep line length short (40-60 characters) and surround the text column with plenty of white space.
• Use a font designed for the screen (e.g. Verdana).
• Don’t embed links in the body text; list them in margin sidebars or at the end of the article.
• For very long articles, provide a printer-friendly version for offline reading.

Examples

Key concepts:  inverted pyramid,  printer-friendly, navigation page, scannability

To top

More information

• Differences Between Print Design and Web Design
• Editing Online Documents --Tips for substantive editors and copyeditors working on Web content (from Contentious)
• Eyetrack study -- Research shows that people look at text before graphics on a Web page
• Inverted Pyramids in Cyberspace -- How to help readers by putting the most important information first
• How Users Read on the Web -- Jakob Nielsen's research on what makes text easy or hard to read
• Research-Based Web Design and Usability Guidelines  – Provides empirical findings for widely accepted Web writing and design guidelines
• Web writing tips -- Do's and don'ts, with examples
• Writing for the Web -- Compilation of guidelines from Jakob Nielsen

To top