Formatting Text for Readability


Well-established Web-formatting techniques can create visual cues that significantly improve the readability of your site's text, helping people scan pages quickly and access the areas that pertain to them. The most common and effective conventions are:

Making Usability Skyrocket

In 1998 John Morkes and Jakob Nielsen conducted a study demonstrating how formatting very technical information according to Web guidelines can significantly improve usability. They compared two versions of a white paper posted on a B2B (business to business) Web siteone in its original form, and the other using more Web-ready, concise writing. The results were astounding. The revised version scored significantly higher on all usability parameters.

Compared to the original, the version presented in a Web-optimized format enabled readers to:

  • Complete the task 80 percent faster

  • Make 80 percent fewer errors

  • Recall 100 percent more facts

  • Score their satisfaction with the Web site 37 percent higher


  • Highlighted keywords

  • Concise and descriptive titles and headings

  • Bulleted lists and numbered steps

  • Short paragraphs

  • Making sure that the most important point on a Web page is stated within the first two lines

Highlight Keywords

Highlighting carefully chosen keywords can attract readers' attention to specific areas of the page. Using design treatments such as such as boldface or colored text adds emphasis and draws the eye to important elements, as we discussed in more detail in Chapter 7.

Highlighting entire sentences or long phrases slows readers down, so single out just those words and phrases that communicate key points. Emphasizing too many items with color highlight or bold text causes diminishing returns; nothing stands out, and the page just looks busy.

Design treatments commonly associated with hyperlinks (such as blue, underlined, and bold text) automatically make them stand out. In fact, in some cases, these are enough, and you don't need any additional highlighting.

The judiciously bolded words attract the reader's attention to critical areas, making it easy to get the gist of the message by scanning quickly.

www.americanheart.org

Use Concise and Descriptive Titles and Headings

The main page title is especially important because it serves as the link to the page in search engine listings. Users speed through those listings, so your page title must convey your purpose in just a few words. Our eye-tracking studies show that users often read only the first words of the search listings, so it's no good to save your information-carrying keywords for the end of the title.

Our eye-tracking studies show that users often read only the first words of search listings, so it's no good to save your information-carrying keywords for the end of the title.


Within a given page, effective headings and subheadings catch your reader's eye and announce the purpose of the content. They serve as signposts for the content's organization, breaking text into manageable chunks and making it easier to read and comprehend. Their main purpose is to point readers to the content they seek. That means they need to be short (60 characters maximum) and meaningful. Resist the temptation to write cute or clever headings.

Three Guidelines for Heading Hierarchy

  • Main headings should appear larger and bolder than the body text.

  • Subheadings should be smaller than main headings but still stand out from body text.

  • Left-justify headings and set in sentence case or title case; they are easier to read than centered headings set in all capital letters.


Fancy titles such as "Go Red For Women," and "911" don't adequately describe the content. They are meaningful in context, but keep in mind that most people won't take the time to figure it out. Even when titles are bright, bold, and graphical, people ignore them if the meaning is obscure. Simply dressing up text won't make it any more appealing.

www.americanheart.org

It's difficult to tell what information this page contains from the title "Notice 1: A Customs guide for travelers entering the UK." Many people don't know what "Notice 1"means or what "A Customs guide" includes. Users are overwhelmed by the wordy links and the use of obscure dates and terms.

"This is confusinglots of things about date changes and guides and not much on relevant topics. There are lots of things about when things changed, but no lists of things you are looking for. Too much detail with regard to charters and dates and not enough details about the information you need."

"It's not user friendly. What I like now is a list of commonly asked questions. It's talking about documents and versions. The amount of text is quite confusing."

"It's all in government jargon. For a site intended for public access, there should be commonly used information, not government stuff. I'm tempted to phone somebody up."

www.hmce.gov.uk

Use Bulleted and Numbered Lists

When describing steps or items in a series, use bulleted or numbered lists. Use bulleted lists when items require no particular order and numbered lists for step-by-step instructions, sequenced items, and items referenced by number.

Vertical lists are more effective than run-in lists at conveying a sequence of events or ideas. Studies comparing the two show that they can improve usability by 47 percent.


Vertical lists have more white space around each item, giving the eyes pause and making each piece stand out on its own. As a result, they are more effective than inline lists, making key points easier to reference and understand. Similarly, whether numbered or bulleted, vertical lists are more effective than run-in lists at conveying a sequence of events or ideas. Studies comparing the two show that vertical lists can improve usability by 47 percent.

Compare these two different formats and notice that the spa treatments listed in the second example are easier to read. Listing the offerings vertically makes it easier for users to scan choices than it would be on an inline list.

www.hyatt.com

The writing here is an improvement over other examples we've shown you. Sentences are generally short and simple, and key terms are bolded, so the options stand out. It would be better to have a lead-in sentence and number each option so that people clearly know each one is a choice.

www.bankone.com

Top Seven Guidelines for Presenting Lists

  • Use vertical lists when you have four or more items to emphasize. Shorter lists are generally overkill.

  • Introduce a list with a clear, descriptive lead-in sentence or phrase. The lead-in doesn't have to be a complete sentence as long as each item in the list completes the sentence.

  • Indent vertical lists and begin run-over lines under the text, not the bullet.

  • Don't leave too much space between the bullet and the start of the text. Having wide gaps between the bullet and the text is difficult to read; the eye must travel farther to make the connection.

  • When possible, omit articles such as "a," "an," or "the," and repetitive words from the beginning of list items.

  • Use parallel phrasing for each list item.

  • Don't overuse lists, as they can lose their effectiveness.


Bulleted lists can be helpful, but using them too often reduces their effectiveness.

www.hmce.gov.uk

Tip: Parallel Phrasing Is Important

Each item should have a consistent style of phrasing. Widely varied wording is ungrammatical and confusing to readers. Notice that in the non-parallel examples, the three phrases begin with different types of words and only the first completes the lead-in sentence. The revised list flows better because each phrase starts with a similar type of word (in this case, a verb) and completes the lead-in sentence.

Non-parallel

Students sign up for newsletters to:

  • Find out what's new

  • How other people in their age group are doing

  • Contests

Parallel

Students sign up for newsletters to:

  • Find out what's new

  • See what other people in their age group are doing

  • Enter contests


Keep Paragraphs Short

Another way to improve readability is to break up content into small chunks. Short paragraphs surrounded by white space appear more approachable than a solid wall of text. Information shortened into digestible pieces facilitates scanning by allowing people to see natural breaks and absorb the information in manageable pieces.

More Information

For more details on studies mentioned in this chapter, go to www.useit.com/papers and see "webwriting," and to www.nngroup.com/reports and see "teens."


There are no hard-and-fast rules about how long or short paragraphs should be, although it's helpful to keep them under five sentences. Each paragraph should have one topic sentence and one idea. Too many ideas in a single paragraph increase its complexity and make readers work to decipher the main idea. People should be able to read the topic sentence and decide whether they need to read the rest of the paragraph.

This is hardly an overview. The large wall of text intimidates readers. Chunking the information into smaller paragraphs would make the content feel more approachable.

www.infocus.com

Nice writing styleclear writing, simple words, and appropriate use of Web formatting techniques facilitate scanning.

www.nwf.org




Prioritizing Web Usability
Prioritizing Web Usability
ISBN: 0321350316
EAN: 2147483647
Year: 2006
Pages: 107

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net