APRIL 13-18, 1996 CH196

Guidelines for Designing Usable World Wide Web Pages

Jose A. Borges, Israel Morales, Nkstor J. Rodriguez

Center for Computing Research and DevelopmentUniversity of Puerto Rico - Mayagiiez Campus

Mayagiiez, Puerto Rico 00681nester@ dumont,upr.clu.edu

ABSTRACTThe proliferation of World Wide Web pages with poorusability is a serious problem because these pages wasteuser time, discourage exploration and could be responsiblefor a large amount of unnecessary traffic on the Internet.To alleviate this problem, we are proposing a set of simpleguidelines for designing usable Web pages. The guidelineswere compiled from a heuristic evaluation of existing Websites. An experiment was conducted to evaluate theusability of home pages designed with the proposedguidelines. The experiment demonstrated that designers ofWeb pages can improve the usability of home pages byapplying these guidelines.

KEYWORDS: usability testing, interaction design,World Wide Web, WWW pagesdesign.

INTRODUCTIONThe World Wide Web (WWW) has become a very popularmeans for publishing information. A large number ofinformation repositories (Web sites) already exist and newones are being created at a very rapid rate. Most of thepages on WWW repositories provide elements that allowusers (readers) to interact with them. Thus, the peopledesigning pages for the WWW are actually designing userinterfaces.

The proliferation of pages with poor usability suggests thatmost of the designers of WWW pages have little knowledgeof user interface design and usability engineering. This is aserious problem that needs to be addressed because pageswith poor usability waste user time, discourage explorationand could be responsible for a large amount of unnecessarytraffic on the Internet. Thus, it is very important todevelop practical methodologies for designing usable Webpages.

Various methods for designing pages with good usabilityare suggested in two studies conducted by Jakob Nielsen [1][2]. However, some of these methods are not practical formost page designers because they require user testing andare time consuming. A more practical alternative for most

Permissionto make digittd/hard copies of all or part of this material forpersonsl or classroom use is granted without fee provided that the copiesare not made or distributed for profit or commercial advantage, the copy-right notice, the titte of the publication and its date appear, and notice is

given that copyright is by permission of the ACM, Inc. To copy otherwise,to republish, to post on servers or to redistribute to lists, requires specificpermission and/or fee.CH1 ’96 Companion, Vancouver, BC Canada01996 ACM ().89791 -83’2-()/96/()4. .$3.50

page designers is to provide them with a set of simpleguidelines for designing pages. These guidelines should bebased on fundamental principles of user interface design.

Many guidelines for designing Web pages can be found inthe WWW. In contrast, only one conference article wasfound that addressed the issue [3]. Nevertheless, most ofthe proposed guidelines are not supported byexperimentation.

HEURISTIC EVALUATION OF PAGES ONWWW REPOSITORIESThe design of a good user interface usually requires the useof various usability evaluation methods. Among these, theheuristics evaluation method [4] is the least expensivemethod and yet one of the most useful. Thus, in our questfor a good set of guidelines for designing Web pages, westarted by conducting a heuristic evaluation of pages ofexisting information repositories. Due to the diversity ofexisting repositories, we felt it necessary to narrow thechoices to a group of repositories with similarcharacteristics. Thus, it was decided to conduct the heuristicevaluation of university and college repositories.

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

The heuristic evaluation detected a variety of usabilityproblems. Based on the usability problems encountered, thefollowing list of guidelines for designing Web pages wascompiled:

For any page,

1.

2.

3.

4.5.

Headers should not take more than 25% of a letter sizepage.Headers and footers should be clearly separatedfrom thebody of the page. (One way of achieving this is byplacing bold lines or bars between them and the body.)Names of links should be concise and provide a hint onthe content of the page that they link to. (Avoid using

technical words such as servers, links, web server, etc.)Avoid adding explanatory comments to textual links.Avoid “linking-mania” (making a link every time akeyword of a page is mentioned in a text).

277

CH196 APRIL 13-18, 1996

6.7.

8.

9.

10.

Verify that links connect to existing pages.Linking icons should have a distinctive feature of thepage they are linking to.Maintain consistency when using icons. The sameicon should be used for the same intended purpose.Colors should be selected so that the pages can beclearly displayed and reproduced on black and whitedisplays and printers.It is desirable to include the date the page was lastmodified, the mail address of the person that maintainsthe page and the URL address of the page on a footer.

- the home page of the repository,~or

11.

12.13.14.

15.16.

17.

Descriptive information about the institution should beplaced just below the header and kept to a minimum (alink to a secondary page is preferred).Pagesshould not be overcrowded with links.Pages should be short (about a letter size page).Links should be to primary aspects or characteristics ofthe institution. Textual information should be left forsecondarypages.Organize links as primary and secondary topics.Links to resources or other repositories on the Internetshould be placed on a secondary page. (This pageshould be reached with a link on the primary page.)A more extensive index of links, properly grouped, canbe provided on a secondary page for fast access to awide range of the institution’s repositories.

USABILITY TESTING OF GUIDELINES FORDESIGNING WWW PAGESTo evaluate the proposed guidelines we conducted anexperiment with two versions of the home page of threeWeb sites randomly selected from the ten that wereevaluated. The first version of each of the home pages wasthe original version found at the site. The second versionof each site was a redesign of the original home page. Theredesigned versions of the home pages were developed bythree students with WWW page design experience. Eachstudent was provided a copy of the proposed guidelines andwas instructed to redesign the home pages, without anyconstraint, except that helshe should apply the guidelinesprovided. No explanation was given about the guidelines.

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

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

Task 1 Task 2 Task 3 Task 4 Task 5Original HP. A (sec.) 24.0 13.1 11.9 31.9 35.8New H.P. A (sec.) 5.4 2.3 3.8 19.2 30.1% redumon +78 +82 +68 +40 +16Original H.P. B (sec.) 11.0 12.2 20.4 17.9 13.4New H.P. B (sec.) 7.2 3.7 8.2 29.2 6.8% reduction +35 +70 +60 -63 +49OngnralH.P. C (W.) 7.0 4.0 4.4 21.9 11.2New H.P. C (sec.) 4.3 18.5 7,1 5.4 6.9‘%o reducoon +39 -363 -61 +75 +38

The times indicated on the table correspond to the averagetime that ten users took to complete each task. The resultsindicate that the average time to complete a large majorityof the tasks on the new home pages (the redesigned homepages) was significantly reduced. In only three cases wasthe time to complete the task on the new home pagesincreased.

An evaluation of the redesigned home pages showed thatnone of them properly complied with guideline 14. In aninterview with the designers of the new pages, theyexpressed that their selection of topics and keywords wasgreatly influenced by the original home page assigned tothem. This affected adversely the completion time of someof the tasks because the original home pages did notcomply with guideline 14.

Another significant observation was that the heuristicnumber 17 was also discarded by all designers. In fact, in arevised Home Page, the index of topics included in theoriginal version was removed. As a result of the interviewwith the designers we concluded that the heuristic was notclear and was misinterpreted.

CONCLUSIONSThe experiment conducted demonstrates that designers ofWeb pages can improve the usability of home pages byapplying the guidelines proposed in this paper. However,more research needs to be done in this area. A wider sampleand variety of sites must be evaluated to refine and producea more complete set of guidelines. In addition, other testsmust be conducted to determine which guidelines have amore significant effect on the usability of a page.

REFERENCES1. Nielsen, J. and Sane, D. SunWeb: User Interface

2.

3.

4.

Design for Sun Microsystems Internal Web.Electronic Proceedings of the Second World Wide WebConference: Mosaic and the Web, 1994.Nielsen, J. A Home-Page Overhaul Using Other WebSites. IEEE Software, Vol. 12, No. 3, May 1995.Comber, T. Building Usable Web Pages: An HCIPerspective. The First Australian WWW Conference,Australia, 1995.Nielsen, J. Usability Engineering. Academic Press,1993.

278