Page Text

Most of the core content of your website will be conveyed through the use of text, lists, and tables. Editorial style for NEES websites is addressed in the Editorial Guide. This topic discusses how to improve the usability of your website's textual elements.

Writing Webpage Text

Because users don't read webpages the way they would a book or other printed matter, it's essential to write in a style that not only conveys information, but reflects how websites are actually used. This doesn't mean that you should "dumb down" your writing style. Rather, adjust it to be less dependent on long sentences and paragraphs. What looks good on a printed page - a long, even expanse of words with neatly justified margins - it virtually unreadable in the web environment.

Jakob Nielsen, who has conducted more user tests of websites than anyone else in the world, sums up the writing requirements by saying that web text must be concise, scannable, and objective (see his Writing for the Web site for more detail and examples). Here, we outline the concepts by adopting one of Neilsen's examples. He and a colleague tested five different versions of the same site to determine the impact of three types of text improvement. The baseline example, as shown below, was wordy and hard to follow.

Baseline example:
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 2001, some of the most popular places were Fort Robinson State park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,958), Stuhr Museum of the Prairie Pioneer (60,082), and Buffalo Bill Ranch State Historical Park(28,446).

The first recommendation is to make text as concise as possible; that is, reduce the amount of text by eliminating words that are not strictly needed. As the following text shows, it was possible to eliminate 50% of the words in the baseline. Tests with actual users revealed that this version was 58% better than the original.

After reducing the word count by 50% (ranked by users as 58% better):
In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.

A second usability guideline is to convert the layout of the text to a format that is more "scannable". For example, bulleted or numbered lists and tables can be scanned much more quickly than long lines of traditional text. When this improvement was made to the baseline example, the result was rated as a 47% improvement.

After changing baseline to scannable format (47% better):
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 2001, some of the most popular places were:
  • Fort Robinson State Park (355,000 visitors)
  • Scotts Bluff National Monument (132,166)
  • Arbor Lodge State Historical Park & Museum (100,000)
  • Stuhr Museum of the Prairie Pioneer (60,002)
  • Buffalo Bill Ranch State Historical Park (28,446)
  • Converting subjective or exaggerated language to more neutral terms is a third mechanism for improving text. The following example shows the result of applying this to the baseline text; it was judged to be 27% better than the original.

    After changing baseline to objective language (27% better):
    Nebraska has several attractions. In 2001, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

    By far the biggest payoffs come from combining all three techniques. Once that had been done to the baseline example, users considered it to be fully 124% better than the original.

    After applying all three improvements (124% better):
    In 2001, six of the most-visited places in Nebraska were:
  • Fort Robinson State Park
  • Scotts Bluff National Monument
  • Arbor Lodge State Historical Park & Museum
  • Carhenge
  • Stuhr Museum of the Prairie Pioneer
  • Buffalo Bill Ranch State Historical Park
  • Formatting Lists, Block Text, and Tables

    Menu titles and menu items should be formatted using upper- and lower-case letters, following the conventions for titles. That is, nouns, pronouns, verbs, adjectives, and adverbs should begin with a capital letter, while conjunctions and articles should be all lower-case.

    Lists are straightforward in HTML, and have the advantage of attracting the user's eye. The only significant usability problem associated with lists is the difficulty of interpreting lists that are nested within other lists. Keep lists to one or two levels of nesting; if additional nesting is really essentially, accomplish it by breaking up the list with other, more appropriate structures such as headings, block text, or tables.

    Block text refers to sections of text that are set off from other text, by indentation, use of a colored background, use of a different font, or combinations of these. Be careful to test any block text on multiple browsers, since contrary to popular opinion, HTML does not require that blockquote, dl, or even display tags actually result in indentation. The only safe way to indent is to use a table whose width has been set to some fraction (e.g., 95%) of the text above and below it.

    Example: These examples are created using a centered table whose width is set to 90%. It's the only way to guarantee that the text will actually be indented, regardless of which browser is used.

    Tables are an extremely useful way of conveying material in very little space, and in a way that attracts user attention (see Helping Users Find Key Content). Spend a few extra seconds to include the attributes that improve table performance and usability. Explicit size attributes speed up tables dramatically, since the browser doesn't have to parse the text in order to determine how wide columns should be. Use WIDTH= and HEIGHT= specifications on both the TABLE definition itself, and for all TD cell specifications. Note that by using percentages to specify the size, you also allow the browser to resize the table as needed to fit within the user's viewing area.

    Also remember that complex tables can take a long time to render. To improve performance, split content into multiple, simpler tables rather than nesting tables three or more levels deep.

    Example: This guide split the page into three tables, corresponding to the table, the footer, and the central portion, rather than a single table with others nested inside.

    Improving Webpage Accessibility

    The most important thing you can do to improve the accessibility of text is to use HTML style tags to identify headings. Voice-enabled browsers scan through the webpage looking for headings, and read them off outline-style to help the user become oriented and gain a synopsis of page content. If you fail to use them, or use them inconsistently, the user will be confused.

    Another aid to accessibility is to use text rather than images wherever possible. Consider using colored blocks of text, tables, and bullet lists rather than set-in images. In many cases, these are just as effective at conveying information - and they have the added advantage of loading faster than the corresponding images would. Use images only as a last resort.