A new report from the federal government distills thousands of pages of research down to 187 key recommendations for how web sites should be constructed to maximize their effectiveness as communication tools.
The “Research-Based Web Design and Usability Guidelines,” released by the U.S. Department of Health and Human Services (HHS), can help educators and others design their own web sites based on proven research about what works–and what doesn’t–to ensure the greatest use among stakeholders. For example, are school web site designers using the best fonts, download times, screen resolution, or sentence length?
“When we start using our own guesswork, literally, we find our web sites are all over the place,” said SanJay J. Koyani, senior usability engineer in the Office of Public Affairs at HHS. “It’s not good to have consistently bad web sites.”
As many as 1,000 research papers on web design are published each year, Koyani said–but many of them are hard to access or understand, and not all of them are relevant.
“The No. 1 problem was none of [these studies] agreed, and the second problem was none of them referenced research,” he said.
In the Usability Guidelines report, however, each recommendation receives two ratings: one to gauge its “relative importance” to the success of a web site, and another to determine its “strength of the evidence.”
Some recommendations have a greater impact on the overall success of a web site than others, and the available research to support each recommendation is not equal in quality and scope, Koyani said.
Researchers audited and reviewed many research papers and a dozen popular web design style guides before settling upon their 187 guidelines, organized into 13 chapters.
The report addresses topics such as web accessibility, navigation, page layout, titles and headings, writing for the web, graphics, animation, searches, and more.
“I thought it was interesting that there was so much information and research out there,” Koyani said. “I had no idea there was such conclusive data on this stuff.”
Initially, this compendium of the latest research began as a project to help the National Cancer Institute (NCI) create more usable cancer information web sites, so the guidelines are consistent with NCI’s cancer information dissemination model: “rapidly collect, organize, and distribute information in a usable format to those who need it.”
But the usefulness of the report grew to encompass all web developers.
“These guidelines aren’t prescriptive; they are guides,” Koyani said. “The goal is not to stifle creativity, it’s to give people starting points.”
Koyani warns that many of the guidelines seem simple and obvious, but many web site developers nonetheless fail to follow them.
For example, the report recommends that a web site should be easy to find online, because research shows that web searchers won’t look past the first 30 responses generated by a search engine query.
After a major redesign, web site owners should notify visitors, the report says, because according to at least three studies, users often do not know what to do when they are suddenly confronted with a new look or navigation structure.
The report also recommends using at least a 12-point font, because research shows that “fonts smaller than 12 points elicit slower reading performance from users.”
The following guidelines have the strongest supporting evidence:
1. Use an iterative design approach. This means making and testing both paper and software prototypes until the most useful and usable web site is created.
2. Provide useful content. Studies show that content is the most critical element of a web site–even more critical than navigation, visual design, functionality, and interactivity. Content should be engaging, relevant, and appropriate to the audience.
3. Recognize tester bias. Multiple web testers each will identify different problems when evaluating a web site, so web developers should specify which usability objectives the testers should be looking for.
4. Use heuristics cautiously. It is common practice to use heuristic evaluations (exploratory problem-solving techniques), or expert reviews, before conducting usability performance tests on a web site, but these kinds of reviews tend to detect far more problems than actually exist.
5. Use cognitive walkthroughs cautiously. Cognitive walkthroughs are often used to resolve obvious problems before conducting performance tests, but they also find more potential problems than actually exist.
6. Standardize task sequences. Web visitors should be able to do things in the same way and sequence each time. For example, when offering a calendar for scheduling appointments online, don’t make visitors use a drop-down menu on one page and a pop-up menu on the next page.
7. Design for working memory limitations. When visitors must remember information on one web page for use on another page or another location on the same page, they can only remember about three or four items for a few seconds at a time, the report says.
8. Align items on a page. Short lines of text, text blocks, rows, columns, check boxes, radio buttons, data entry fields, and so on should be lined up either horizontally or vertically–and never diagonally.
9. Choose appropriate line lengths. On a computer, it takes less time to read longer lines (75 to 100 characters) of text than it takes to read short lines (less than 20 characters), research shows.
10. Use descriptive headings liberally. Visitors can scan well-written headings faster, so they can locate what they are searching for quickly.
11. Use black text on plain, high-contrast backgrounds. People can read black text on a white background up to 32 percent faster than reading light text on a dark background, the report says.
12. Ensure visual consistency. This involves using the same size, font, and spacing of characters; the same colors for labels, fonts, and backgrounds; and the same locations of labels, text, and pictures.
13. Use at least a 12-point font. Traditional, paper-based font sizes do not translate well to the web because of how various operating systems interpret and display font sizes. What looks good on a PC might appear small and illegible on a Mac, for example.
14. Use familiar fonts. Recommended fonts include Times New Roman, Georgia, Arial, Helvetica, and Verdana.
15. Emphasize importance. Changing font characteristics–such as using bold type, italics, upper-case letters, or a larger font size–draws importance to words and phrases. However, research shows these features also slow reading by 20 percent and therefore should be used sparingly. Also, do not underline words to show emphasis, because underlining on the web indicates a link and will confuse visitors.
16. Use attention-attracting features when appropriate. Movement or animation is the most effective means, but other ways include making important items larger, adding photos, and using bright colors.
17. Order elements to maximize user performance. Organize lists, sets of links, or tabs alphabetically or numerically. The user’s logic should prevail rather than the designer’s logic, the report says.
18. Use data entry fields to speed performance. Studies have found that text entry is faster and preferred over all other methods (such as a selection list box often used to choose a state or province), even though text entry results in more errors.
19. Use video, animation, and audio meaningfully. These features should only help convey or support a web site’s content.
20. Ensure that images do not slow downloads. Using smaller images and limiting page size to less than 30,000 bytes will result in faster response time for visitors, the report says.
21. Use simple background images. Text on top of a background image is difficult to read, and large background images also slow download times.
22. Use images to facilitate learning. In learning situations, pictures and diagrams are more powerful than words because the brain recalls them better.
23. Use mixed case with prose. This means capitalize writing conventionally, such as starting the first word in each sentence with an upper-case letter, the report says. Avoid writing whole paragraphs in upper case or capitalizing the first letter of every word.
24. Facilitate scanning. Visitors generally skim a web page by looking at headings only until they find what they are looking for, so don’t bury the information in dense text.
25. Group related elements. This will save visitors time as they scan the page, the report says.
26. Design quantitative content for quick understanding. Tables, graphics, and charts often speed the understanding of information.
27. Use color for grouping. The report says people can distinguish up to 10 different colors that are assigned to different categories, but it recommends you use no more than five different colors to differentiate categories. Also, do not use color alone to convey information, as blind or visually impaired people who access the site with a text reader will not be able to make sense of the color.
Links:
Research-Based Web Design and Usability Guidelines (PDF 39.5 MB)
http://www.eschoolnews.com/news/pdf/guidelines_book.pdf
