Do's and Don'ts of Effective Web Design:
A Summary of the UIU-2002 Research

by Dr. Bob Bailey

January, 2003

Introduction

Every year since 1983, I have reviewed and summarized much of the usability-related research literature that was published during the previous year. This has provided the basis for the popular, annual 3-day User Interface Update Course. My annual two-month "read and outline" activity provides me with a number of research-based insights into "what works" and "what does not work" in usability. I have listed many of these insights in this article. What makes these "Do's and Don'ts" unique is that they all have recent research to support them.

General Observations

1. Do evaluate the goodness of a website by evaluating content, navigation, visual design, functionality and interactivity, but realize that these elements are not totally independent (i.e., website evaluators have a difficult time separating them from each other).

2. Do make websites appear more credible by:

3. Do use Flash to enhance interfaces knowing that 98% of browsers are capable of playing Flash without downloading.

4. Do design Web application (Weblications) interfaces different than traditional Web site interfaces.

5. Do use "parallel design" concepts when designing user interfaces, because participants:

7. Do consider the size of textual information to be used as entry points, because:

8. Do put the most important prose text and bullet item information toward the top left of a page, because users tend to scan from left to right, and top to bottom when reading, but do not follow the same pattern between images, titles or links.

9. Do use common and contiguous background colors to help guide users in finding information on a page.

10. Do put the most important information on a Web page at the middle-top of the page because that text:

11. Do use right and left panels for links, because users will investigate areas outside the center area:

12. Do not use fonts on Web pages that are less than 10 points.

13. Do use 12-point fonts (size=3) on Web pages to elicit optimal reading speed for most adults.

14. Do use any of the most common font styles (e.g., Arial, Verdana, Georgia, Times New Roman), either serif or sans serif fonts, to elicit the fastest possible reading speed.

15. Do use sans serif fonts (e.g., Arial, Verdana) to satisfy user preferences.

16. Do use 14-point fonts for older users.

Interaction Issues

17. Do carefully consider the task being performed before making decisions about the breadth and depth of a Web site, because sites with numerous levels may or may not degrade performance.

18. Do carefully consider the task being performed before making decisions about using or not using frames, because some uses of frames will degrade performance.

19. Do not consider users' judgments about "ease of use" as accurately representing the speed with which a task can be performed.

20. Do use similar item justification and scroll bar orientation to produce reliably faster selection times, fewer errors and improved preferences in the use of list boxes (and possibly Web site scrollbars).

21. Do consider the experience level of users and "frequency of use" when selecting widgets in websites, particularly when deciding between using entry fields and dropdown lists (experienced users are faster with entry fields).

22. Do place commonly selected objects close to the edge of a window to expedite their selection.

23. Do not be concerned that frequent keyboard use will cause carpal tunnel syndrome.

Website Design Issues

24. Do design websites primarily for use with the Microsoft's Windows operating system, unless different (more specific) information about the operating systems being used by the target audience is available.

25. Do design websites primarily to be displayed by the Internet Explorer and Netscape browsers.

26. Do design websites to work best with screen resolutions of the majority of typical users, which worldwide is now 800x600 pixel resolution.

27. Do design websites for use on monitors that show at least 256 colors.

28. Do design pages to load in a few seconds; however, keep in mind that some users will rate the download speed of slow pages as "fast" if they are able to successfully accomplish what they intend to do.

29. Do design a Web site that encourages either linking or searching behaviors by users.

30. Do design a search capability so that most users will complete a successful search on their first attempt.

31. Do design to encourage users to access links (not search) if it is important for users to continue to browse the Web site after locating their primary target, because:

• About 60% will continue to browse the site (only 20% of "searchers" continued to browse)
• "Linkers" are three times more likely to find related (valuable) content
• "Linkers" who started with links on the homepage looked at almost 10 times more content pages

32. Do design websites to have a "moderate amount" of white space, because:

• Users prefer a moderate amount of white space
• There is no reliable performance differences with differing amounts of white space

33. Do design websites using a "Fluid" layout, because:

• Users believed that the "Fluid" layout was best for reading and for finding information
• There were no reliable performance differences among the methods (left justified, centered or fluid)

34. Do design websites with embedded links, because:

• Users preferred having them embedded
• There were no reliable performance differences between embedded links and those outside the text

35. Do design websites with links that are both embedded and outside the text on the left margin, because redundant links were preferred by users.

36. Do design websites with the links in a frame on the left margin, because users preferred the frames rather than having the links scroll off the page.

37. Do design websites that enable textual chat (Instant Messaging) between users and Web site assistants.

38. Do design websites so that if users must be placed in a queue:

• They can be continually updated
• The updates can include sounds (so that users can work on other things)

39. Do write prose text in websites at appropriate reading levels for the target audience as calculated using a commonly used readability formula, because:

• The average reading level in North America is at the eighth- to ninth-grade
• About one in five adults read at the fifth-grade level and below
• Adults tend to read at least one or two grade levels below their last school grade completed

40. Do use Rapid Serial Visual Presentation (RSVP) for presenting information to users who need to read prose text from small displays (PDAs, cell phones, wrist watches), because:

• RSVP enables an acceptable level of reading performance
• There is no performance or preference differences among 10-line, 3-line and RSVP

41. Do use 20-point text presented at speeds of about 250 wpm on RSVP-based displays.

Usability Testing

42. Do design "low word count" websites (average of 65 words) using fewer words, smaller page sizes, fewer graphics, faster download times and more font variations (particularly between header and body text).

43. Do design "medium word count" websites (average of 230 words) using less body text, organized better into clusters (lists and shaded table areas), using lower percent graphics, and with more colors to help distinguish headers.

44. Do design "high word count" websites (average of 800 words) using less body text, organized well into clusters (lists and shaded table areas), with more text links, large page size, lower percent graphics, and using more colors to help distinguish headers.

45. Do use eye-tracking methods to determine confusion rates from users in usability testing.

46. Do require usability testing clients to make specific and focused requests, including usability objectives, specific definitions of success and clear time limits for task completion.

47. Do plan on inadvertently creating new usability problems when fixing problems identified by previous usability testing.

48. Do plan on finding and fixing about 37% of the problems in a system with each performance test (i.e., each iteration), which means that to detect and correct 95% of the usability problems it would take

• At least six tests, and
• 105 participants

49. Do have members of the design team use a prototype Web site to create an estimate of the time it should take an experienced user to access information; then use this time to set usability objectives (e.g., 85% of the users shall not need more than 125% of the expert users' time for each task).

50. Do use a "large" number of users (e.g., over 100) for performance tests, because of:

• The complexity of websites
• Hundreds or thousands of pages
• Hundreds of features and paths
• The need to determine the prevalence of problems in target populations
• Only 35% of problems were identified after testing five users

51. Do use automated testing methods for some, if not all, of the performance testing for a new system, because automated testing allows:· More rapid data collection and analysis, · The use of a large numbers of users, and · Quick evaluation of content that keeps changing.

52. Do provide online learning materials that primarily use a traditional prose text format, because it elicits better learning (however users preferred a hypertext format).

53. Do not use testers or test participants to be involved in a test when they have a cold, because:

• They will respond more slowly
• They will detect fewer problems
• They will have reduced energy and motivation levels

54. Do use the following age categories when designing and using study information:

• Old-old: 75 and older
• Older: 60-74
• Middle-aged: 40-59
• Young: 18-39

55. Do ensure that important system (Web site) sounds are louder for older users.

56. Do use TFT screens rather than CRT screens to elicit the fastest possible reading performance from users (older users benefit even more than younger users).

References

1. Sinha, R., Hearst, M. and Ivory, M. (2001), Content or graphics? An empirical analysis of criteria for award-winning websites, 7th Conference on Human Factors and the Web.

2. Fogg, B.J., Marshall, J., Laraki, O., Osipovich, A., Varma, C., Fang N., Paul, J., Rangnekar, A., Shon, J., Swani, P. and Treinen, M. (2001), What makes websites credible? A report on a large quantitative study, CHI 2001 Proceedings, 3(1), 61-68.

3. developer.viewpoint.com/.../vmp_distribution.pdf

4. Wroblewski, L. and Rantanen, E.M. (2001), Design considerations for Web-based applications, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1191-1195.

5. McGrew, J. (2001), Shortening the human computer interface design cycle: A parallel design process based on the genetic algorithm, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 603-606.

6. Lewenstein, M., Edwards, G., Tatar, D. and Devigal, A. Where do users look first? Stanford Poynter Institute Technical Report.

7. Faraday, P. (2001), Attending to Web pages, CHI 2001 Proceedings.

8. Faraday, P. (2001), Attending to Web pages, CHI 2001 Proceedings.

9. Faraday, P. (2001), Attending to Web pages, CHI 2001 Proceedings.

10. Faraday, P. (2001), Attending to Web pages, CHI 2001 Proceedings; and Schroeder, W. (2001), Testing websites with eye-tracking, User Interface Engineering Newsletter.

11. Schroeder, W. (2001), Testing websites with eye-tracking, User Interface Engineering Newsletter.

12. Tullis, T.S., Boynton, J.L. and Hersh, H. (1995), Readability of fonts in the windows environment, CHI 95 Extended Abstracts, 127-128.

13. Bernard, M. and Mills, M. (2000), So what size and type of font should I use on my Web site? Usability News, July, 2(2); Bernard, M., Lida, B., Riley, S., Hackler, T. and Janzen, K. (2002), A comparison of popular online fonts: Which size and type is best? Usability News, January, 4(1); Bernard, M., Mills, M., Peterson, M. and Storrer, K. (2001), A comparison of popular online fonts: Which is best and when? Usability News, July, 3(2); and Boyarski, D., Neuwirth, C., Forlizzi, J., and Regli, S.H. (1998), A study of fonts designed for screen display, CHI 98 Conference Proceedings, 87-94.

14. Bernard, M. and Mills, M. (2000), So what size and type of font should I use on my Web site? Usability News, July, 2(2); Bernard, M., Lida, B., Riley, S., Hackler, T. and Janzen, K. (2002), A comparison of popular online fonts: Which size and type is best? Usability News, January, 4(1); Bernard, M., Mills, M., Peterson, M. and Storrer, K. (2001), A comparison of popular online fonts: Which is best and when? Usability News, July, 3(2); and Boyarski, D., Neuwirth, C., Forlizzi, J., and Regli, S.H. (1998), A study of fonts designed for screen display, CHI 98 Conference Proceedings, 87-94.

15. Bernard, M. and Mills, M. (2000), So what size and type of font should I use on my Web site? Usability News, July, 2(2); Bernard, M., Lida, B., Riley, S., Hackler, T. and Janzen, K. (2002), A comparison of popular online fonts: Which size and type is best? Usability News, January, 4(1); Bernard, M., Mills, M., Peterson, M. and Storrer, K. (2001), A comparison of popular online fonts: Which is best and when? Usability News, July, 3(2); and Boyarski, D., Neuwirth, C., Forlizzi, J., and Regli, S.H. (1998), A study of fonts designed for screen display, CHI 98 Conference Proceedings, 87-94.

16. Bernard, M., Liao, C. and Mills, M. (2001), Determining the best online font for older adults, Usability News, January, 3(1).

17. Tsunoda, T., Yamaoka, T., Yamashita, K., Matsunobe, T., Hashiya, Y., Nishiyama, Y. and Takahasi, K. (2001), Measurement of task performance times and ease of use: Comparison of various menu structures and depth on the Web, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1225-1229.

18. Tsunoda, T., Yamaoka, T., Yamashita, K., Matsunobe, T., Hashiya, Y., Nishiyama, Y. and Takahasi, K. (2001), Measurement of task performance times and ease of use: Comparison of various menu structures and depth on the Web, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1225-1229.

19. Tsunoda, T., Yamaoka, T., Yamashita, K., Matsunobe, T., Hashiya, Y., Nishiyama, Y. and Takahasi, K. (2001), Measurement of task performance times and ease of use: Comparison of various menu structures and depth on the Web, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1225-1229.

20. Kellener, E., Barnes, G.M. and Lingard, R. (2001), Effects of scroll bar orientation and item justification when using list boxes, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 662-666.

21. Zavod, M. J. and Fulop, A. C. (2001), Choosing input field formats for use by sales personnel, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting 2001, 667-671.

22. Farris, J.S., Jones, K.S. and Anders, B.A. (2001), Acquisition speed with targets on the edge of the screen: An application of Fitts' law to commonly used Web browser controls, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1205-1209.

23. Stevens, J.C. (2001), No link between carpal tunnel syndrome and workplace computer use, Neurology.

24. www.thecounter.com

25. www.thecounter.com

26. www.thecounter.com

27. www.thecounter.com

28. Spool, J. (2001), The truth about download time, User Interface Engineering Newsletter.

29. Spool, J. (2001), User Interface Engineering Newsletter, May.

30. Spool, J. (2001), User Interface Engineering Newsletter, November 27.

31. Spool, J. (2001), User Interface Engineering Newsletter, December 4.

32. Bernard, M., Chaparro, B. and Thomasson, R. (2000), Finding information on the Web: Does the amount of white space really matter? Usability News – Winter.

33. Bernard, M. and Larsen, L. (2001), What is the best layout for multiple column Web pages? Usability News – Summer.

34. Bernard, M. and Hull, S. (2002), Where should you put the links? Comparing embedded and framed/non-framed links, Usability News – 4.1.

35. Bernard, M., Hull, S. and Drake, D. (2001), Where should you put the links? A comparison of four locations, Usability News – Summer.

36. Bernard, M., Hull, S. and Drake, D. (2001), Where should you put the links? A comparison of four locations, Usability News – Summer.

37. Aberg, J. and Shahmehri, N. (2001), An empirical study of human Web assistants: Implications for user support in Web information systems, CHI 2001 Proceedings, 404-411.

38. Aberg, J. and Shahmehri, N. (2001), An empirical study of human Web assistants: Implications for user support in Web information systems, CHI 2001 Proceedings, 404-411.

39. D'Alessandro, D.M., Kingsley, P and Johnson-West, J. (2001), The readability of pediatric patient education materials on the world wide Web, Archives of Pediatrics and Adolescent Medicine, 155(7); and www.med.utah.edu

40. Bernard, M.L., Chaparro, B.S. and Russell, M. (2001), Examining automatic text presentation for small screens, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 637-639.

41. Russell, M.C. And Chaparro, BS (2001), Exploring effects of speed and font size with RSVP, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 640-644.

42. Ivory, M.Y., Sinha, R.R. and Hearst, M.A. (2001), Empirically validated Web page design metrics, CHI 2001 Proceedings, 53-60.

43. Ivory, M.Y., Sinha, RR and Hearst, MA (2001), Empirically validated Web page design metrics, CHI 2001 Proceedings, 53-60.

44. Ivory, M.Y., Sinha, RR and Hearst, MA (2001), Empirically validated Web page design metrics, CHI 2001 Proceedings, 53-60.

45. Marshall, S., Drapeau, T. and DiSciullo, M. (2001), Case study: Eye tracking the AT&T customer service site, IBM Make It Easy 2001.

46. Kessner, M., Wood, J., Dillon, R.F. And West, R.L. (2000), On the reliability of usability testing, Carleton University Masters Thesis.

47. Tan, W., Dahai, L., Bishu, RR, Muralidhar, A. and Meyer, J. (2001), Design improvements through user testing, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1181-1185.

48. Tan, W., Dahai, L., Bishu, RR, Muralidhar, A. and Meyer, J. (2001), Design improvements through user testing, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1181-1185.

49. Etgen, M. and Cantor, J. (1999), What does getting WET (Web Event-logging Tool) mean for Web usability? User Experience Engineering Division, AT&T Labs.

50. Kangas, S. (2001), Is 5000 users enough?; Schulman, D. (2001), Quantitative usability: Extending lab research for larger sample sizes, IBM Make it easy – 2001; and Spool, J. and Schroeder, W. (2001), Testing websites: Five users is nowhere near enough, CHI 2001.

51. Schulman, D. (2001), Quantitative usability: Extending lab research for larger sample sizes, IBM Make it easy – 2001.

52. Caldeira, P.Z. (2001), Impact on learning and satisfaction of Web-based learning systems: A comparison of linear vs. hypermedia presentations, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 1235-1239.

53. Matthews, G., Warm, J.S., Dember, W.N. (2001), The Common cold impairs visual attention, psychomotor performance and task engagement, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting 2001, 1377-1381.

54. Bailey, R.W. (2002), When considering the age of users, How old is "old?" Human Factors International Newsletter, July, 2002; and Nichols, T.A., Rogers, W.A., Fisk, A.D. and West, L.D. (2001), How old are your participants? An investigation of age classifications as reported in human factors, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 260-261.

55. Baldwin, C.L. (2001), Impact of age-related hearing impairment on cognitive task performance: Evidence for improving existing methodologies, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 245-249.

56. Ziefle, M. (2001), Aging, visual performance and eyestrain in different screen technologies, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting, 262-266.