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

by Dr. Bob Bailey

January, 2002

Every year since 1983, I have reviewed (and summarized) most 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 review activity provides me with a number of research-based insights into "what works" and "what does not work" in usability. I have listed some of these insights below. What makes these "Do's and Don'ts" unique is that they all have recent research to support them.

General Observations

1. Do ensure that pages are "physically consistent" within and between Web pages.

2. Do use independent individual, and then group, decisions when designing interfaces.

3. Do attempt to identify the mental model held by typical users.

4. Do ensure that the activities allocated to be performed either by the human or the computer take full advantage of the strengths of each.

Interaction Issues

5. Do use "point-and-click" on each desired menu item and do not use "cascading mouse-overs" that make cascading menus automatically open.

6. Do use "sequential menus" for simple forward-moving tasks, and use "simultaneous menus" for tasks that would otherwise require numerous uses of the Back button.

Display Issues

7. Do not use fonts that are less than 5 points in height (5/72 of an inch on the monitor).

8. Do use black text on a plain background (one that does not have a pattern) when users are expected to rapidly read and understand prose text.

9. Do select color combinations that can be discriminated by individuals with color vision deficiencies.

10. Do use an appropriate palette to simulate the colors as perceived by color deficient individuals once color decisions are made.

11. Do increase the lightness contrast between foreground and background colors to accommodate users with color vision deficiencies.

12. Do provide animation of an item to which users should first attend.

13. Do put important information in a page area that users perceive as "larger."

14. Do not assume that users will read the associated text captions for images.

15. Do put the most important information on the home page at the top-middle of the page.

16. Do assume that users will scan all related items in one area before moving to another area of the page.

17. Do use animated icons rather than complex static icons to convey icon meaning for new or occasional users.

18. Do use simple icons rather than complex icons for new or occasional users.

19. Do use either synthesized speech or recorded human speech when having the computer "talk" to users.

20. Do use male not female synthesized voices to enhance comprehension of synthesized speech.

Website Design Issues

21. Do ensure that each page loads in 5 seconds or less.

22. Do ensure that Web pages load quickly because users believe that slow-loading pages suggests that the products being sold are of inferior quality, and that the security of any purchase may be compromised. Also, users rate pages with long delays as being less interesting, and more difficult to scan.

23. Do provide useful content on the home page or within one click of the home page.

24. Do provide appropriate and consistent navigation within a website.

25. Do provide a search capability that retrieves all relevant items and lists them in a useful order.

26. Do provide an efficient and easy-to-understand checkout process.

27. Do provide "glosses" to help prevent users from selecting a wrong link.

28. Do show as much information as possible above the "fold" on each page to facilitate navigation.

29. Do ensure that link labels are well understood by typical users particularly when many clicks (more than two) are necessary to acquire a target.

30. Do provide "templates" to facilitate use of search engines.

31. Do not provide complex search capabilities.

Prototyping and Usability Testing

32. Do sketch the initial prototype using a tool such as Denim (stylus and pad).

33. Do use appropriate "automatic evaluation" methods to conduct initial usability testing on websites.

34. Do keep in mind that both "heuristic evaluations" and "cognitive walkthroughs" methods will miss many usability problems, and they will detect about as many false positives as they do actual problems.

35. Do use enough test subjects when "performance testing" to satisfy the usability goals set by management. For example, if management wants 90% of typical users performing a specific task to have no problems then use a minimum of 22 subjects.

36. Do recognize that different testers and different test groups have unique perspectives when using "performance tests" to detect and report usability problems.

37. Do provide nine response categories for each item when having users rate items in websites.

38. Do conduct "before and after" studies when revising websites. This will help demonstrate the value of applying the usability technology.

User Characteristics

39. Do keep in mind that when users must read and remember information on one page for use on another page, they only can remember about 3 or 4 items.

40. Do keep in mind that older adult users have reduced "working memory" capacity.

41. Do not require users to perform other tasks using "working memory" at the same time they are reading from a page—it will slow their reading speed.

Glossary

Glosses
Essentially these are 'tool tips' for hyperlinks. When users move their mouse pointer over a link, a message pops up providing more information about the page to which they will move. The message can be very short (a few words) or long (a paragraph). The message itself can contain glosses.

Sequential menus
These are the menus we typically use in websites. By clicking an option in the menu, it may cause another menu to appear on another page. This is done until the final object is shown. For example, by clicking on 'North America' rather than Europe, Asia or Australia, the next menu on the next page will show Canada, Mexico and the United States. By clicking on 'United States' the next menu on the next page will show all 50 states, etc. To change one of the menu selections requires clicking on the 'Back' button to return to an earlier menu.

Simultaneous menus
All menus are on the same page, generally in the same frame. All selections are made in the menus in one frame and the final response shows in the second frame on the same page. For example, selecting an item from an 'Age' menu, a 'Type of Cancer' menu and a 'Location' menu in one frame, provides the historical cancer mortality rate in the other frame. Changes can be made to the menus, and the final answer, without using the 'Back' button.

Search templates
A proposed selection of keywords provided by people who are highly experienced on a certain topic. The suggested words can be used to conduct more effective and efficient searches on specific topics.

Cascading mouse-overs
These are new menus that open automatically when the mouse pointer stays on a menu option for a short period of time. Once a new menu opens, users can move the pointer to another item (in the next set of options) and another menu automatically will open. Users can open a series of (cascading) menus without ever clicking the mouse button.

Fold
When newspapers are shown in newsstands, the headlines and related material are showing. Given sufficient time, one can read all that is above the 'fold' without touching the paper. To read the remaining information requires turning the paper over to see what is 'below the fold.' This is the metaphor for understanding the term 'fold' when used with web pages. The information 'above the fold,' for example, shows when the homepage first loads. No scrolling is necessary to see information above the fold. The amount of information that can show above the fold is dependent on the (a) the size of the monitor, (b) the resolution setting of the users monitor (800x600 or 1024x768 pixels), and (c) whether the user is viewing the page 'full screen' or in a window.

Automatic evaluation methods
Evaluations that are done exclusively by the computer. These methods, for example, count the number of words per page, the number of links per page and the total bytes per page. They then compare this information with the same counts on Web pages that have been judged to be very good or very bad.

References

1. Ozok, A. A. and Salvendy, G. (2000), Measuring consistency of web page design and its effects on performance and satisfaction, Ergonomics, Vol. 43, No. 4, 443-460.

2. Macbeth, S.A., Moroney, W.F., and Biers, D.W. (2000), Development and evaluation of symbols and icons: A comparison of the production and focus group methods, Proceedings of the IEA 2000/HFES 2000 Congress, I-327-I329.

3. Wilson, J. R. (2000), The place and value of mental models, Proceedings of the IEA 2000/HFES 2000 Congress, 1-49-52.

4. Moray, N. and Butler, C. (2000), The effect of different styles of human-machine interaction on the nature of operator mental models, Proceedings of the IEA 2000/HFES 2000 Congress, 1-53-1-56.

5. Chaparro, B.S., Minnaert, G. and Phipps, C. (2000), Limitations of using mouse-over with menu item selection, Proceedings of the IEA 2000/HFES 2000 Congress.

6. Hochheiser, H. and Shneiderman, B. (2000), Performance benefits of simultaneous over sequential menus as task complexity increases, International Journal of Human-Computer Interaction, 12(2), 173-192.

7. Bailey, R.W. (2001), Reading small font sizes, User Interface Update – 2001.

8. Scharff, L.F.V. and Ahumada, A.J. and Hill, A.L. (1999), Discriminability measures for predicting readability, In B.E. Rogowitz and T.N. Pappas (Eds.), Human Vision and Electronic Imaging I, SPIE Proc. Vol. 3644, paper 27.

9. Wolfmaier, T.G. (1999), Designing for the color-challenged: A challenge, Internetworking.

10. Rigden, C. (1999), Safe web colours for colour-deficient vision, British Telecommunications Engineering Journal.

11. Wolfmaier, T.G. (1999), Designing for the color-challenged: A challenge, Internetworking.

12. Faraday, P. and Sutcliffe, A. (1997), Designing effective multimedia presentations, Proceedings of CHI '97, 272-278; and Hillstrom, A.P. and Yantis, S. (1994), Visual motion and attentional capture, Perception & Psychophysics, 55(4), 399-411.

13. Faraday, P. (2000), Visually critiquing web pages, 6th Conference on Human Factors & the Web.

14. Faraday, P. (2000), Visually critiquing web pages, 6th Conference on Human Factors & the Web.

15. Faraday, P. (2000), Visually critiquing web pages, 6th Conference on Human Factors & the Web; and Schroeder, W. (1998), User Interface Engineering Newsletter.

16. Faraday, P. (2000), Visually critiquing web pages, 6th Conference on Human Factors & the Web.

17. Schwalm, N.D. and Shaviv, V. (2000), Can icon animation enhance human performance…or is it just another gimmick? Proceedings of the IEA 2000/HFES 2000 Congress, 1-323-11-326.

18. Schwalm, N.D. and Shaviv, V. (2000), Can icon animation enhance human performance…or is it just another gimmick? Proceedings of the IEA 2000/HFES 2000 Congress, 1-323-11-326.

19. Lai, J., Wood, D. and Considine, M. (2000), The effect of task conditions on the comprehensibility of synthetic speech, Proceedings of CHI 2000, 321-328.

20. Lai, J., Wood, D. and Considine, M. (2000), The effect of task conditions on the comprehensibility of synthetic speech, Proceedings of CHI 2000, 321-328.

21. Bouch, A., Kuchinsky, A. and Bhatti, N. (2000), Quality is in the eye of the beholder: Meeting users' requirements for Internet quality of service, CHI 2000, 297-304.

22. Sears, A., Jacko, J. and Borella, M. (1997), Internet delay effects: How users perceive quality, organization and ease of use information, CHI '97 Proceedings; and Selvidge, P.R., Chaparro, B. and Bender, G.T. (2000), The world wide wait: Effects of delays on user performance, Proceedings of the IEA 2000/HFES 2000 Congress, 1-416-419.

23. Souza, R. K. (2000), The best of retail site design, The Forrester Report.

24. Souza, R. K. (2000), The best of retail site design, The Forrester Report.

25. Souza, R. K. (2000), The best of retail site design, The Forrester Report.

26. Rehman, A. (2000), Holiday 2000 e-commerce, www.creativegood.com

27. Zellweger, P.T., Regli, S.H., Mackinlay, J.D. and Chang, B. (2000), The impact of fluid documents on reading and browsing: An observational study, CHI 2000, 249-256.

28. Watts-Perotti, J. and Woods, D.D. (1999), How experienced users avoid getting lost in large display networks, International Journal of Human-Computer Interaction, 11(4), 269-299.

29. Miller, C.S. and Remington, R.W. (2000), A computational model of web navigation: Exploring interactions between hierarchical depth and link ambiguity, 6th Conference on Human Factors & the Web.

30. Fang, X. and Salvendy, G. (1999), Templates for search queries: A user-centered feature for improving web search tools, International Journal of Human-Computer Interaction, 11(4), 301-315.

31. Spink, A., Bateman, J. and Jansen, B.J. (1999), Searching the web: a survey of excite users, Internet Research: Electronic Networking Applications and Policy, 9(2), 117-128.

32. Lin, J., Newman, M.W., Hong, J.I. and Landay, J.A. (2000), Denim: Finding a tighter fit between tools and practice for website design, CHI 2000, 510-517.

33. Ivory, M.Y., Sinha, R.R. and Hearst, M.A. (2001), Empirically validated web page design metrics, Proceedings of CHI-2001; Ivory, M.Y. and Hearst, M.A. (2000), State of the art in automated usability evaluation of user interfaces; and Ivory, M.Y., Sinha, R.R. and Hearst, M.A. (2000), Preliminary findings on quantitative measures for distinguishing highly rated information-centric web pages, 6th Conference on Human Factors & the Web.

34. Bailey, R.W. (2001), Comparing expert reviews and performance test scores, User Interface Update – 2001; Jacobsen, N.E. and John, B.E. (2000), Two case studies in using cognitive walkthroughs for interface evaluation, Computer Science Technical Report Abstracts; and Spencer, R. (2000), The streamlined cognitive walkthrough method, working around social constraints encountered in a software development company, CHI 2000, 353-359; and Catani, M. B. and Biers, D. W. (1998), Usability evaluation and prototype fidelity: Users and usability professionals, Proceedings of the Human Factors and Ergonomics Society 42nd Annual Meeting, 1331-1335; and Rooden, M.J., Green, W.S. and Kanis, H. (1999), Difficulties in usage of a coffeemaker predicted on the basis of design models, Proceedings of the Human Factors and Ergonomics Society, 476-480; Stanton, N.A. and Stevenage, S.V. (1998), Learning to predict human error: Issues of acceptability, reliability and validity, Ergonomics, 41(11), 1737-1747.

35. Bailey, R.W. (2000), The Usability of Punched Ballots, December; and Lewis, J.R. (1994), Sample sizes for usability studies: Additional considerations, Human Factors, 36(2), 368-378; and Lewis, J.R. (1993), Problem discovery in usability studies: A model based on the binomial probability formula, Proceedings of the 5th International Conference on Human-Computer Interaction, 666-671; and Spool, J. (2001), Eight is not enough, UIEtips 6-5-01; and Virzi, R.A. (1990), Streamlining the design process: Running fewer subjects, Proceedings of the Human Factors Society 34th Annual Meeting, 291-294.

36. Molich, R., Thomsen, A.D., Karyukina, B., Schmidt, L., Ede, M., Oel, W.V. and Arcuri, M. (1999), Comparative evaluation of usability tests, CHI'99 Extended Abstract; and Molich, R., Bevan, N., Curson, Butler, S., Kindlund, E., Miller, D. and Kirakowski, J. (1998), Comparative evaluation of usability tests, Proceedings of the Usability Professionals Association.

37. Preston, C.C. and Colman, A.M. (2000), Optimal number of response categories in rating scales: Reliability, validity, discriminating power, and respondent preferences, Acta Psychologica 104, 1-15.

38. Rehman, A. (2000), Holiday 2000 e-commerce, www.creativegood.com.

39. Baddeley, A. (1992), Working memory, Science, 255, 556-559; and Bailey, R.W. (2000), Reducing reliance on superstition, (October, 2000); and LeCompte, D. (2000), Three numbers that (should) have nothing to do with user interface design, August.

40. Laguna, K.D. and Babcock, R.L. (2000), Computer testing of memory across the adult life span, Experimental Aging Research, 26, 229-243.

41. Mayes, D.K., Sims, V.K. and Koonce, J.M. (2000), Cognitive aspects of reading information from video display terminals, Proceedings of the IEA 2000/HFES 2000 Congress, 1-294.