Logo AHome
Logo BIndex
Logo CACM Copy

shortpapTable of Contents


Guidelines for Designing Usable World Wide Web Pages

José A. Borges, Israel Morales, Néstor J. Rodríguez

Center for Computing Research and Development
University of Puerto Rico - Mayagüez Campus
Mayagüez, Puerto Rico 00681
nestor@dumont.upr.clu.edu


ABSTRACT

The proliferation of World Wide Web pages with poor usability is a serious problem because these pages waste user time, discourage exploration and could be responsible for a large amount of unnecessary traffic on the Internet. To alleviate this problem, we are proposing a set of simple guidelines for designing usable Web pages. The guidelines were compiled from a heuristic evaluation of existing Web sites. An experiment was conducted to evaluate the usability of home pages designed with the proposed guidelines. The experiment demonstrated that designers of Web pages can improve the usability of home pages by applying these guidelines.

KEYWORDS:

usability testing, interaction design, World Wide Web, WWW pages design.

INTRODUCTION

The World Wide Web (WWW) has become a very popular means for publishing information. A large number of information repositories (Web sites) already exist and new ones are being created at a very rapid rate. Most of the pages on WWW repositories provide elements that allow users (readers) to interact with them. Thus, the people designing pages for the WWW are actually designing user interfaces.

The proliferation of pages with poor usability suggests that most of the designers of WWW pages have little knowledge of user interface design and usability engineering. This is a serious problem that needs to be addressed because pages with poor usability waste user time, discourage exploration and could be responsible for a large amount of unnecessary traffic on the Internet. Thus, it is very important to develop practical methodologies for designing usable Web pages.

Various methods for designing pages with good usability are suggested in two studies conducted by Jakob Nielsen [1] [2]. However, some of these methods are not practical for most page designers because they require user testing and are time consuming. A more practical alternative for most page designers is to provide them with a set of simple guidelines for designing pages. These guidelines should be based on fundamental principles of user interface design.

Many guidelines for designing Web pages can be found in the WWW. In contrast, only one conference article was found that addressed the issue [3]. Nevertheless, most of the proposed guidelines are not supported by experimentation.

HEURISTIC EVALUATION OF PAGES ON WWW REPOSITORIES

The design of a good user interface usually requires the use of various usability evaluation methods. Among these, the heuristics evaluation method [4] is the least expensive method and yet one of the most useful. Thus, in our quest for a good set of guidelines for designing Web pages, we started by conducting a heuristic evaluation of pages of existing information repositories. Due to the diversity of existing repositories, we felt it necessary to narrow the choices to a group of repositories with similar characteristics. Thus, it was decided to conduct the heuristic evaluation of university and college repositories.

A sample of ten repositories was randomly selected from a listing of more than one thousand colleges and universities. Home pages (the first page of a repository) and secondary pages (the other pages) of each repository were evaluated by three evaluators. The evaluation was based on the usability heuristics described in [4].

The heuristic evaluation detected a variety of usability problems. Based on the usability problems encountered, the following list of guidelines for designing Web pages was compiled:

For any page,

  1. Headers should not take more than 25% of a letter size page.
  2. Headers and footers should be clearly separated from the body of the page. (One way of achieving this is by placing bold lines or bars between them and the body.)
  3. Names of links should be concise and provide a hint on the content of the page that they link to. (Avoid using technical words such as servers, links, web server, etc.)
  4. Avoid adding explanatory comments to textual links.
  5. Avoid "linking-mania" (making a link every time a keyword of a page is mentioned in a text).
  6. Verify that links connect to existing pages.
  7. Linking icons should have a distinctive feature of the page they are linking to.
  8. Maintain consistency when using icons. The same icon should be used for the same intended purpose.
  9. Colors should be selected so that the pages can be clearly displayed and reproduced on black and white displays and printers.
  10. It is desirable to include the date the page was last modified, the mail address of the person that maintains the page and the URL address of the page on a footer.

    For the home page of the repository,

  11. Pages should not be overcrowded with links.
  12. Pages should be short (about a letter size page).
  13. Links should be to primary aspects or characteristics of the institution. Textual information should be left for secondary pages.
  14. Organize links as primary and secondary topics.
  15. Links to resources or other repositories on the Internet should be placed on a secondary page. (This page should be reached with a link on the primary page.)
  16. A more extensive index of links, properly grouped, can be provided on a secondary page for fast access to a wide range of the institution's repositories

USABILITY TESTING OF GUIDELINES FOR DESIGNING WWW PAGES

To evaluate the proposed guidelines we conducted an experiment with two versions of the home page of three Web sites randomly selected from the ten that were evaluated. The first version of each of the home pages was the original version found at the site. The second version of each site was a redesign of the original home page. The redesigned versions of the home pages were developed by three students with WWW page design experience. Each student was provided a copy of the proposed guidelines and was instructed to redesign the home pages, without any constraint, except that he/she should apply the guidelines provided. No explanation was given about the guidelines.

A usability test was performed with each version of each of the three sites selected. Ten computer engineering students, with different levels of WWW experience, were used to test the three original versions and another ten to test the three redesigned versions. The students were ask to perform five task for each of the assigned home pages. Tasks one, two and three required the student to select a link at the top, middle and bottom of the home page respectively. The fourth task requested the student to find the home page of the computer science department. The fifth task requested the student to look for library resources.

The principal measure taken was the time spent, on the home page, until the task was complete. The results of the tests are shown in the table below.

Task 1 Task 2 Task 3 Task 4 Task 5
Original H.P. A (sec.)2413.1 11.931.935.8
New H. P. A (sec.)5.42.3 3.819.230.1
Percent of Reduction+78+82 +68+40+16
Original H. P. B (sec.)1112.2 20.417.913.4
New H. P. B (sec.)7.23.78.2 29.26.8
Percent of Reduction+35+70 +60-63+49
Original H. P. C (sec.)74 4.421.911.2
New H. P. C (sec.)4.318.5 7.15.46.9
Percent of Reduction+39-363 -61+75+38

An evaluation of the redesigned home pages showed that none of them properly complied with guideline 14. In an interview with the designers of the new pages, they expressed that their selection of topics and keywords was greatly influenced by the original home page assigned to them. This affected adversely the completion time of some of the tasks because the original home pages did not comply with guideline 14.

Another significant observation was that the heuristic number 17 was also discarded by all designers. In fact, in a revised Home Page, the index of topics included in the original version was removed. As a result of the interview with the designers we concluded that the heuristic was not clear and was misinterpreted.

CONCLUSIONS

The experiment conducted demonstrates that designers of Web pages can improve the usability of home pages by applying the guidelines proposed in this paper. However, more research needs to be done in this area. A wider sample and variety of sites must be evaluated to refine and produce a more complete set of guidelines. In addition, other tests must be conducted to determine which guidelines have a more significant effect on the usability of a page.

REFERENCES

  1. Nielsen, J. and Sano, D. SunWeb: User Interface Design for Sun Microsystem's Internal Web. Electronic Proceedings of the Second World Wide Web Conference: Mosaic and the Web, 1994.
  2. Nielsen, J. A Home-Page Overhaul Using Other Web Sites. IEEE Software, Vol. 12, No. 3, May 1995.
  3. Comber, T. Building Usable Web Pages: An HCI Perspective. The First Australian WWW Conference, Australia, 1995.
  4. Nielsen, J. Usability Engineering. Academic Press, 1993.

Last updated December 14 1995, 12:00 PM.
by Israel Morales Cruz
moralito@amadeus.upr.clu.edu