Look at every path closely and deliberately.
Try it as many times as you think necessary.
Then ask yourself, and yourself alone, one question...
Does this path have a heart?
If it does, the path is good; if it doesn't it is of no use.

Carlos Castaneda The Teachings of Don Juan

1. Introduction

The deluge of web pages has generated dystopian commentaries on the tragedy of the flood as well as utopian visions of harnessing the same flood for constructive purposes. Within this ocean of information there are also lifeboat web pages with design principles, but often the style parallels the early user interface writings in the 1970s. The well-intentioned Noahs who write from personal experience as website designers, often draw their wisdom from specific projects, making their advice incomplete or lacking in generalizability. Their experience is valuable but the paucity of empirical data to validate or sharpen insight means that some guidelines are misleading. As scientific evidence accumulates, foundational cognitive and perceptual theories will structure the discussion and guide designers in novel situations.

It will take a decade till sufficient experience, experimentation, and hypothesis testing clarify design issues, so we should be grateful for the early and daring attempts to offer guidance. One of the better guides (Lynch, 1995) offers this advice:

ìProper World Wide Web site design is largely a matter of balancing the structure and relationship of menu or ìhomeî pages and individual content pages or other linked graphics and documents. The goal is to build a hierarchy of menus and pages that feels natural and well-structured to the user, and doesnít interfere with their (sic) use of the Web site or mislead them.î

It is helpful but does not tell designers what to do or how to evaluate the efficacy of what they have done. Lynch goes on to give constructive advice about not being too broad or too deep, finding the proper length of pages, using gridded layouts, and the challenge of ìbalancing the power of hypermedia Internet linkages against the new ability to imbed graphics and motion media within networked WWW pages.î He has sorted out the issues better than most but still leaves designers very much in the dark about what to do.

Jacob Nielsen (1995) goes a step further by reporting on his case study of designing a website for Sun Microsystems to showcase their products and company. His usability testing approach revealed more specific problems and the online site shows and discusses nine different versions of the home page. The subjective data reveals problems and highlights key principles, for example ìUsers consistently praised screens that provided overviews of large information spaces.î Empirical testing should be able to reveal what kinds of overviews are most effective and whether performance times, error rates, or retention are enhanced by certain overviews.

Until the empirical data and experience from practical cases arrive we can use knowledge from other user interface design domains such as menu systems (Shneiderman, 1992) and hypertext (Isakowitz, Stohr & Balasubramanian, 1995; Shneiderman & Kearsley, 1989). Designers can apply the theoretical framework of the Objects/Actions Interface Model and the experience from information retrieval research (Marchionini, 1995).

2. Genres and Goals for Designers

A website can range from a one-page personal biography to millions of pages in the Library of Congress's National Digital Library. The variety of genres expands as the creative efforts of bold designers mix and merge old forms to create new information resources, communication media, and entertainment experiences (Table 2).

One way of categorizing websites is by the originator's identity : individual, group, university, corporation, non-profit organization, or government agency. The originator's identity gives a quick indication of what the likely goals are and what contents to expect: corporations have products to sell, museums have archives to promote, and government agencies have services to offer.

Another dimension for categorizing websites is the number of web pages (Table 1): One-page bios or project summaries are typical small websites, organization overviews for internal or external use are medium sized, and airline schedules or the yellow pages are familiar larger websites. Taxonomies of websites from many perspectives are likely. The Yahoo home page provides a starting point but it changes regularly as the web grows (Figure 1).

A third way of grouping websites is by the goals of the originators, as interpreted by the designers. These may be simple information presentation in a self-publishing style where the quality is uncontrolled and the structure may be chaotic. Information may be an index to other websites or it may be original material. More carefully polished individual life histories and impressive organizational annual reports are becoming more common as expectations and designer experience increases. As commercial usage increases, elegant product catalogs, eye-catching advertisements, and lively newsletters will become the norm. Commercial and scientific publishers will join newspapers and magazines in providing access to information while exploring the opportunities for feedback to editors, discussions with authors, and reader interest groups. Digital libraries of many varieties are appearing, but full recognition of their distinct benefits and design features is slowly emerging. Entertainment websites are yet to appear commonly, although most websurfers are enjoying their explorations.

A fourth way of ordering websites is by the measures of success. For individuals, the measure of success for an online resume may be getting a job or a making a friend. For corporate website owners the publicity is measured in number of visits which may be millions per day, independent of whether users benefit. For others, the value is in promoting sales of other products such as movies, books, events, or automobiles. Finally, for providers to web access who earn fees from hourly usage charges, success is measured by the thousands of hours of usage per week. Other measures include diversity of access as defined by the number of users or their countries of origin, or whether the users came from university, military, or commercial domains.

3. Users and their Tasks

As in any user interface design process, we begin by asking: Who are the users? and What are the tasks? An unproductive answer is that everyone is a user and therefore no analysis is needed. Even when broad communities are anticipated, there are usually implicit assumptions about users being able to see and read English. Richer assumptions about users being within a certain age group or educational background should be made explicit to guide designers. Just as automobile advertisements are directed to college-age males, young couples, or mature female professionals, websites are more effective when targeted to specific audience niches. Gender, age, economic status, ethnic origin, educational background, and language are primary audience attributes. Physical disabilities such as poor vision, hearing, or muscle control call for special designs.

Specific knowledge of science, history, medicine, or other disciplines will influence design. A website for physicians treating lung cancer will vary in content, terminology, writing style, and depth from one providing information to patients.

Knowledge of computers or websites can also influence design, but more important is the distinction between first-time, intermittent and frequent users of a website. First-time users need an overview to understand the range of services and to know what is not available, plus buttons to select actions. Intermittent users need an orderly structure, familiar landmarks, reversibility, and safety during exploration. Frequent users demand shortcuts or macros to speed repeated tasks and extensive services to satisfy their varied needs.

Since many applications focus on educational services, appropriate designs should differentially accommodate teachers and students from elementary through university levels. Adult learners and elderly explorers may also get special services or treatments.

Evidence from a survey of 13,000 web users conducted by Georgia Tech (Pitkow and Kehoe, 1995) shows that 80% of the respondents were male, with an average age of 35, a median income above $50,000. A remarkable 72% are daily users, and are likely to have a professional connection to computing or education. These profiles have shifted from previous surveys and will probably continue moving towards a closer match with the population at large. Of course, the survey was voluntary and drew upon the web community, so the sample is biased, but still thought provoking.

Identifying the users's tasks also guides designers in shaping a website. Tasks can range from specific fact-finding where there is a single readily identifiable outcome to more extended fact-finding with uncertain but replicable outcomes. More unstructured tasks include open-ended browsing of known databases and exploration of the availability of information on a topic.

Specific fact-finding (Known item search)

- Find the Library of Congress call number of Future Shock

- Find the phone number of Bill Clinton

- Find the highest resolution LANDSAT image of College Park at noon on Dec. 13, 1997

Extended fact-finding

- What other books are by the author of Jurassic Park ?

- What kinds of music is Sony publishing?

- Which satellites took images of the Persian Gulf War?

Open-ended browsing

- Whatís in the Mathew Brady Civil War photo collection?

- Who does research on human-computer interaction?

- How early are there hi-res infrared polar ocean images?

Exploration of availability

- What genealogy information is at the Library of Congress?

- What is there on the Grateful Dead band members?

- Can NASA datasets show acid rain damage to soy crops?

The great gift of the web is its support for all these possibilities. Specific fact finding is the more traditional application of computerized databases with query languages like SQL, but the web has dramatically increased the capability for users to browse and explore easily. It is an equal challenge to design for specific fact finding and to help users with poorly formed information needs who are just browsing.

A planning document for a website might indicate that the primary audience is North American high school environmental science teachers and their students, with secondary audiences of other teachers and students, journalists, environmental activists, corporate lobbyists, policy analysts, and amateur scientists. The tasks might be identified as providing access to selected LANDSAT images of North America clustered by and annotated with agricultural, ecological, geological, and meteorological features. Primary access might be by a hierarchical thesaurus of keywords about the features (e.g. floods, hurricanes, volcanoes) from the four topics. Secondary access might be geographical with indexes by state, county, and city, plus selection by pointing at a map. Tertiary access might be by specifying latitude and longitude.

4. Objects/Actions Interface Model for Website Design

The Objects/Actions Interface Model (OAI Model, maybe pronounced Oo-Ah Model) suggests the knowledge needed by users as well as the components of a design. In designing websites that present information (rather than communications, entertainment, or services), four components emerge:

Task concepts

- Information objects plus structure (e.g.

hierarchies, networks)

- Information actions for navigation (e.g. searching, linking)

Interface concepts

- Metaphors for information objects (e.g.

bookshelf, encyclopedia)

- Handles for actions (e.g. querying, zooming)

The boundaries between these components is not always clear, but this model has been helpful in designing and evaluating websites (Figure 2). In combination with a rigorous development methodology or formal evaluation strategy, the Objects/Actions Interface Model could speed development of effective websites.

4.1 Designing task objects and actions

When users's tasks involve information seeking, the focus becomes the information objects plus their structure and the information actions for navigation. Making information objects and actions comprehensible can be difficult. While many would describe a book as a sequence of chapters and a library as a hierarchy organized by the Dewey Decimal System, books also have book jackets, tables of contents, indexes, etc. and libraries have magazines, videotapes, special collections, manuscripts, etc. It would be still harder to characterize the structure of university catalogs, corporate annual reports, photo archives, or newspapers because they have still less standardized structures and more diverse access paths.

In planning a website to present complex information structures, it helps to have a clear definition of the atomic objects and then the molecular structures. Atoms can be a birthdate, name, job title, biography, resume, or technical report. With image data, an atomic object might be a color swatch, icon, corporate logo, portrait photo, music video sample, or full hour-long performance of a Shakespearean play.

Information atoms can be combined in many ways to form molecules such as a page in a newspaper, a city guidebook, or an annotated musical score. Clear definitions are helpful to coordinate among designers and inform users about the intended levels of abstraction.

Strategies for informational molecules are numerous, and here is a starting list of possibilities:

Short unstructured lists

- City guide highlights, organizational divisions, current projects (and this list)

Linear structures

- Calendar of events, alphabetic list, human body slice images from head to toe, orbital swath

Arrays or tables

- Departure city/arrival city/date, latitude/longitude/time

Hierarchies, trees

- Continent - country - city (e.g. Africa, Nigeria, Lagos)

- Concepts (e.g. sciences - physics - semiconductors - gallium arsenide)

Multi-trees, faceted retrieval

- Photos indexed by date, photographer, location, topic, film-type

Networks

- Journal citations, genealogies, World Wide Web

These molecules can be used to describe structured information objects. An encyclopedia is usually seen as a linear alphabetical list of articles, with a linear index of terms pointing to pages. Articles may have a hierarchical structure of sections and subsections, and cross references among articles create a network.

Some information objects, such as a book table of contents, have a dual role since they may be read to understand the topic itself or browsed to gain access to a chapter. In the latter role they represent the actions for navigation in a book.

The information actions enable users to follow paths through the information. Most information resources can be scanned linearly from start to finish, but their size often dictates the need for shortcuts to finding relevant information. Atomic information actions include:

- Looking for a Hemingwayís name in an alphabetical

list

- Scanning a list of scientific article titles to find the

best matches

- Reading or scanning a paragraph

- Following a reference link

Molecular information actions are composed of atomic actions:

- Browsing an almanac table of contents, jumping to a chapter on sports and scanning for skiing topics

- Locating a scientific term in an alphabetic index

and reading articles containing the term

- Using a keyword to search a catalog to gain a list of

candidate book titles

- Following cross reference from one legal precedent

to another, repeatedly till no new relevant precedents

appear

- Scanning a music catalog to locate classical

symphonies by 18th century French composers

These examples and the ones in section 3 create a diverse space of actions. Some of these are learned from youthful experiences with books or libraries, others are trained skills such as searching for legal precedents or scientific articles. These skills are independent of computer implementation, acquired through meaningful learning, demonstrated with examples, and durable in memory.

4.2 Designing interface objects and actions

Since many users and designers have experience with information objects and actions on paper and other traditional media, designing for computer implementation can be a challenge. The invisible world of binary logic, data structures, and magnetic storage can leave users frustrated. Physical attributes such as the length of a book or size of a map, which vanish when the information is concealed behind a screen, need to be made apparent for successful use. So website designers have the burden of representing the desired attributes of traditional media, but also the opportunity of applying the dynamic power of the computer to support the desired information actions. Successful designers can offer users compelling features that go well beyond traditional media, such as multiple indexes, fast string search, history keeping, comparison, and extraction.

Metaphors for interface objects: The metaphoric representation of traditional physical media is a natural starting point, and electronic books may have covers, jackets, page turning, bookmarks, position indicators, etc. and electronic libraries may show varied size and color books on shelves (Pejtersen, 1989). These may be useful starting points, but greater benefits will emerge as website designers find newer metaphors and handles for showing larger information spaces and powerful actions.

Information hierarchies are the most frequently represented metaphor with at least these examples:

File cabinets, folders, and documents

Books with chapters

Encyclopedia with articles

Television with channels

Shopping mall with stores

Museum with exhibits

Richer environments include libraries with doors, help desk, rooms, collections, and shelves, and the City of Knowledge with gates, streets, buildings, and landmarks. Of course the information superhighway is often presented as a metaphor but rarely developed as a visual search environment.

Design of computerized metaphors extends to support tools for the information seeker. Some systems provide maps of information spaces or at least some kind of overview to allow users to grasp the relative size of components and discover what is not in the database. History stacks, bookmarks, help desks, guides offering tours are common support tools in information environments. Communications tools can be included to allow users to send extracts, ask for assistance of other experts, or report findings to colleagues.

Handles for interface actions: The website representation of actions is often conveyed by action handles - the labels, icons, buttons, or image regions that convey where users should click to invoke an action. Navigation actions can be a turned page corner to indicate next page operation, a highlighted term for a link, a magnifying glass to zoom in or open an outline. Other action handles might be a pencil to indicate annotation, a funnel to show sorting, a bulldozer to indicate data mining, a coal car to show data extraction, or filters to show progressive query refinement. Sometimes the action handle is merely a pull-down menu item or a dialog box offering rich possibilities.

Detailed Designs - String search: The key interface action in locating a relevant website and in searching within a website is string search, but the variety of features can overwhelm even experienced users, and the meager methods for presenting/manipulating results could be vastly expanded. A further dilemma is that there are hundreds of variations and users of multiple websites are burdened with learning the rich variety of features and commands. While search tools across vs. within websites and for novices vs. intermittent vs. expert users might require different features, standardization of a family of improved designs would be a tremendous benefit for all.

Dynamic queries widgets for searching in structured databases have dramatically facilitated access. These widgets include sliders for numeric attributes, radio buttons or check boxes for categorical attributes, and alphasliders for nominal attributes. String search across and within websites will require creative solutions for single word concepts such as:

- Case sensitivity (e.g. John, john, JOHN)

- Partial vs. full word matching

- Stemming to allow variant suffixes (e.g. love, loves,

loved, loving)

- Use of wildcard characters (e.g. ? for a single

character, * for a string)

- Checking for variant spellings (disk = disc, color =

colour)

- Phonetic match (fone = phone)

and multiple word and complex concepts such as:

- Adjacency of word pairs (e.g. before, after, within 10

words, within paragraph)

- Phrase finding (e.g. "human-computer interaction",

"Environmental Protection Agency")

- Location of the search string (e.g. in title, abstract,

full document)

- Synonyms (e.g. oncology and cancer, William and

Bill)

- Categories (e.g. New England searches for the

narrower terms Connecticut, Maine, Massachusetts,

Rhode Island, and Vermont)

Boolean combinations make the design space richer by adding AND, OR, and NOT with nested parentheses. Restricting the boolean combinations to conjuncts of disjuncts is a common solution, but expert users who want full generality might want to use the filter/flow visualization of nested parentheses (Young & Shneiderman, 1993).

Some systems advertise "natural language" query facilities, but these produce highly varied and therefore unpredictable results for first time users. Systems vary as to whether the natural language queries are filtered to remove common words and phrases (e.g. the, of, give me, print out the), case matters, titles or full texts are searched, keywords are joined with ORs or ANDs, and stemming is applied while retrieving results. Users are often pleased because they usually get something back from a search request and relevance ranking leaves an impression of effectiveness. However, with experience users often become frustrated because they do not have adequate control over the search and find the results unpredictable. Hiding irrelevant complexity is a benefit, but hiding necessary concepts is a mistake, except maybe for some novices. A natural language system which could deal with all dozen queries in section 3 seems unattainable.

The feedback from searches are presented in numerous ways depending on the system. Feedback may include error messages for incorrect syntax (unmatched parentheses, undefined commands) or prohibited concepts (before 1990 AND after 1992). Effective direct manipulation designs can reduce or eliminate these slips, but misspelled keywords or author names should lead to the kind of feedback provided by a spelling corrector.

Assuming these problems are overcome, the result of a search could be just the next occurrence of the search result or the complete set. The complete set could contain zero, a moderate number, or a huge number of items. Some overview of the result set, possibly ranked by relevance or ordered and clustered by some attribute (e.g. chronologically or alphabetically by author) and the tools for manipulating it are needed. When the result set contains zero or a huge number of items some analysis of the potential reasons and next steps would be helpful. Editing and history keeping for searches are also candidates for standardization. Designers are increasingly turning to graphical methods for presenting the search space, the search, and the result set.

Detailed Designs - Navigation: Whether the user is examining a document, list, or graphic, it is often too large to see on the screen at once, so some method of navigation is needed. Common techniques include breaking it into pages with discrete page turning and assuming a continuous stream with incremental scrolling. Page turning is cognitively simpler thus facilitating orientation, but fixed page sizes in an application may conflict with smaller or larger screen sizes, so many designers simply apply the ubiquitous scroll bar and support scrolling. Improved scroll bars with proportional thumbs, page boundary markers, and pixel-per-character overviews can be helpful. Actions include jumps to the next, previous, first, and last pages of the document. Even with well designed scroll bars disorientation can occur as documents grow long, therefore it is helpful to reduce the need for scrolling by creating compact documents.

Some document browsers such as Adobe Acrobat offer several forms of overviews that can help users gain an understanding of the entire document. The page thumbnails help orient the users and they can see how many pages there are. For large documents several levels of overviews may be needed and a nested indented outline presentation may be most effective (Chimera & Shneiderman, 1994). When a hierarchy is used additional actions such as going down a level, back up a level, or jumping back to the root of the hierarchy. Typically a stack is used to keep the history of pages of visited and in many systems the user can view the history stack and jump to any page.

Hierarchical outliners are a powerful method for dealing with complex and large documents. They overview can be manipulated in one window and the details can be seen in another. As pages are turned in the detail view, the position indicator in the overview should be updated to preserve the tight coupling between the views.

Search feedback can be shown on the hierarchy. For example, when searching for a keyword, indicators of results can be shown on the hierarchy, giving users an idea of where the richest candidate pages might be found.

Detailed Designs - Query previews: For large documents or collections, especially when searching across the network, this principle can be expanded by using query previews. The search process is split into two phases: a rapid rough search that previews only the number of items in the result set, and a query refinement phase that allows users to narrow their search and retrieve the result set (Doan, Plaisant & Shneiderman, 1996).

For example, in searching for a restaurant (Figure 3) the query preview screen gives users limited choices with buttons for the type of food (e.g. Chinese, French, Indian), double-boxed range sliders to specify average price and time, and maybe a map to specify rough regions. As users make selections among these attributes, the query preview bar at the bottom of the screen is updated immediately to indicate the number of items in the result set. Users can quickly discover that there are no cheap French restaurants in downtown New York, or that there are several Chinese restaurants open after midnight. When the result set is too large users can restrict their criteria and when the result set is too small they must alter their plans.

Query previews require database maintainers to provide an updated table of contents that users can download to facilitate the rapid search on the users's local machine. The table of contents contains the number of items in each attribute, but its cardinality is only the product of the cardinality of the attributes, which is likely to be much smaller than the number of items in the database. Storing the table of contents burdens users who may have to keep 10K-100K tables of information for each database that they search. Of course the size of the table of contents can be cut down dramatically by simply having fewer attributes or fewer values per attribute. These burdens seem moderate when weighed against the benefits, especially if users search a database repeatedly. The table of contents is only the size of a typical image in a website and it can be automatically downloaded with the necessary software when mechanisms such as Java are used.

Detailed Designs - Session Management: Each search or jump is one step to accomplish a task within a session. When sessions cover many complex tasks it becomes helpful to have a history of the session so that users can review their progress, return to key steps, learn from their failures, and save/edit/reapply previous actions (possibly on related databases). Other useful services are for users to annotate what they have retrieved and extract text or images for use in their own projects. Communications with the owners/designers/maintainers of a website and other users should also be supported, although these services are usually provided by independent software tools. Website users should be encouraged to comment about errors or suggested improvements.

Detailed Designs - Assistance: No matter how well-designed a website is, there will always be a need for online and human assistance. The designers goal should be to reduce the need for assistance, but with ever greater numbers of users with ever greater expectations, descriptions of system features and contents, files with frequently asked questions (FAQs), email help desks, and access to phone service (possibly for a fee) should be made available.

Figure 3: The Restaurant Finder

4.3 Designing displays

The task concepts guide design of the information objects and actions. Then designers can materialize the interface concepts with metaphors for information objects and structures accompanied by handles for actions. But successful design also requires wise choices for the display design (e.g. menu layout, query results, fonts, colors) and of mechanisms to invoke commands (e.g. typing, dragging, or button presses). These visible design elements are often the most discussed aspects of design and the ones most directly implemented by HTML coding. Initial subjective satisfaction is strongly determined by these surface features and therefore they deserve intense attention (Horton et al., 1996).

Designers must accommodate small and large displays, monochrome and color, slow and fast transmission, and the disturbing variety of browsers that may not support desired features. The pressure for lowest common denominator design is often outweighed by the desire to assume larger displays, use more detailed and more numerous graphics, support Java applets, and employ newer features. Fortunately, balanced approaches that enable users to indicate their environment and preferences are possible. Since many key design decisions involve the semantics, several versions of the syntactic presentation can be developed for relatively small incremental costs.

Providing text only versions for users with small displays and low bandwidth access is likely to be strongly recommended for many years to come. Low income users using low-cost devices, users in developing countries with poor communications infrastructure, those wanting low bandwidth wireless access, users with small personal display devices, and handicapped users constitute a large proportion of the potential users.

Many personal websites can be developed by individuals who learn a modest amount of HTML or use a graphic interface to generate HTML. Simple websites can be created successfully with these tools, but innovative and effective page layouts for a large website requires as much care and skill as laying out a newspaper, magazine, or book. Page layout is a well-developed topic for graphic designers, whose expertise is vital for innovative and effective designs (Meggs, 1938). Grid layouts and consistent structure help guide the reader. Distinctive headings and graphics signal boundaries and provide familiar landmarks during navigation on the first visit and return visits. Indexes and short cuts give frequent users paths for rapid traversal.

An hour spent browsing websites will reveal diverse screen design philosophies. The poster designers use centered titles, large graphics, ample white space, and a small number of visually striking buttons, sometimes from the Peter Max school of colorful and fanciful imagery. Book designers use left-justified titles, a few small graphics, dense text that goes on for many pages, and numerous text links. Newspaper designers start several stories on the home page, each with its own heading, fontstyle, column, inset photos, and continuations. GIF-heads are eager to show their scanned photos, art, scientific images, or logos and place them on the page with little care for captions, layout, or the burden on users with low bandwidth access. Hypertext fanatics chop up documents into paragraph sized chunks or smaller and put as many links as possible per sentence.

Each design philosophy is meant to appeal to certain users and support certain tasks, but abuses which hinder task completion will eventually fade as users express their desires by favoring more convenient designs.

Traditional graphic design rules often apply for the web environment. Large fontsizes or boldface typically indicate major headings, and medium fontsizes can signal minor headings. Text is best left as black on white or gray, enabling links to be highlighted by color and/or underlining. A graphic logo is typical for an organization home page, and as users move down in a hierarchy, a moderate or small size logos can indicate location in the hierarchy. Three sizes of logos are probably as much as most users can quickly grasp. For different branches of a large hierarchy, variant logos, color coding of banners or backgrounds can be effective, with a limit of 6-8 variations. These recommendations emerge from graphic design books for paper documents, but new opportunities appear for electronic documents.

Since the key indicator of position in a paper book is not available online, innovative substitutes are appearing. The simple approach of indicating "Page 171 of 283" can be effective, but various analog progress indicators such as scroll bars and page bars are emerging. More elaborate indicators such as a small tree or network diagram using a highlight for the current location are being tried with variations on the size and amount of detail.. Dynamic indicators that respond to mouse cursor placement by opening up a hierarchy or popping up detailed information in a small window are still novel. Animated indicators that reveal underlying structures or offer more details are likely to emerge, along with auditory feedback, three-dimensional displays, and rich information visualizations.

While scroll bars are the primary navigation tool since they provide a simple and standard mechanism, a paging strategy using page bars for discrete page turning is cognitively less demanding since users have a clearer sense of position in a document. Designers can make use of tops and bottoms of pages to provide navigational cues (headers, footers, page numbers). Users become familiar with a document be remembering a photo or figure at the top of a certain page. Unfortunately this strategy is undermined by the wide variation in screen sizes, so designers have to commit to a specific size, such as 640 x 480 pixels, and then users of larger or smaller screens have to accommodate to the standard. When designers can assume a larger screen as standard, then the shift towards page orientation will be more common.

The great disparity in transmission speeds has led to design of two versions of websites: text only and graphical layouts. A second solution is the design of browsers that download and display the textual components first and fill in the graphics if time permits. The use of image thumbnails which can be optionally expanded is another appropriate accommodation. Opinions are split over the use of low resolution graphics that become enhanced as time permits.

Accommodating diverse users should be a strong concern for most designers since it enlarges the market for commercial applications and provides democratic access for government services. Testing of websites should be done with monochrome only devices, low bandwidth transmission lines, and with small displays. Additionally access by way of telephone or voice input/output devices will service handicapped users and enlarge access dramatically. Access to websites might also come from small wristwatch-sized displays, wallet-sized pocket PCs, or tiny personal video devices that could be mounted on eyeglasses (e.g. Reflection Technologies innovative display).

Pointing devices could be the traditional mouse, trackball, trackpoint, touchpad, touchscreen, or eyegaze detection devices. Cursor control arrow keys could be used to support jumping among highlighted items.

Branching factor is a key design issue for websites. The evidence from menu selection systems is that broad shallow trees are almost always superior. High fan-out or branching factors for websites appears to be good advice although conclusive empirical evidence is yet to emerge. After three jumps a user begins to become dis-oriented. Well designed pages with dozens of links can be a great help to users. The wildly successful Yahoo index has 83 links in 16 categories in a two column layout with a header for general links and a footer with navigational links. When links are embedded in paragraphs of text, some caution is needed to prevent excessive links that are repetitious. A common strategy is to highlight only the first occurrence of a potential link name, e.g. an organization or individual name. Repeated highlighted links in the text disrupt reading.

5. Usability testing for websites

Usability testing is recommended for all user interface projects, but there are special needs for website testing. As always, the questions of Who are the users? and What are the tasks? guide designers. The testing should be done with representatives of each of the primary user communities and as many of the secondary communities as time and money allow (Nielsen, 1995). Users of varied ages, gender, ethnic backgrounds, as well as international users may be included. The task frequency list developed during needs assessment provides guidance for constructing test tasks.

Users should be tested in realistic settings that resemble the office or home environments that are anticipated. A range of devices with varying screen sizes and transmission speeds should be tested. Voice access should be tested for handicapped and other users. Since browsers have such varied features, testing should be done with the most widely used browsers so as to be able to inform users about which browsers are needed for full access. Unfortunately, there appears to be greater diversity as time goes by.

After early in-house testing with limited numbers of users, a more extensive in-house test might be conducted before the intensive field testing on the web before a public announcement. A phased roll-out process will protect against disaster, improve quality, and ensure the highest satisfaction by the largest number of users.

6. Logging usage, inviting comments, and maintaining the website

The website developer's work is never done. The more successful a site is the more opportunities there are for revision and improvement. Software logs should capture the frequency of usage for each page or at least each component of a database. High and low frequency page statistics reveal patterns that provide evidence for improving a website. If some components are never accessed then they can be removed or the references to these components might be improved to draw attention. Logging software can also reveal patterns of usage over a month, week, or day, and can indicate the paths users took to arrive at and to traverse a website.

In addition to automated logging, website maintainers can solicit feedback from users by email or survey questionnaires embedded in the website. User demographics and motivations may be helpful in refining a website. To get in-depth understanding, website maintainers may interview users individually by phone or personally, or conduct focus group discussions among users.

7. Practitioners Summary

Good design makes the difference between a must-see top-ten site and a worst webpage award. Specifying the users and setting goals come first, followed by design of the task concepts for information objects and actions. Next designers can create the interface concepts represented by the metaphors for information objects (e.g. bookshelf, encyclopedia) and the handles for actions (e.g. querying, zooming). Finally, the display design and commands can be created in multiple visual formats and international versions, while providing access for handicapped or poor readers. Every design project, including website development, should be subjected to usability testing and other validation methods, plus monitoring of use to guide revision.

8. Researcher's Agenda

Many results from other user interface areas such as menu, hypertext, and screen design can be applied to website design. On the other hand the novel communities of users, innovative databases, ambitious services, emphasis on linking and navigation, and intense use of graphics present fresh challenges and rich opportunities to researchers to validate hypotheses under these constraints. Theories of information structuring are emerging as are standards for representing traversal actions, but the creative frenzy on the web is likely to present new opportunities for design research for many years to come.

Controlled experimental studies are effective for narrow issues, but field studies, data logging, and online surveys are attractive alternative research methods in the wide-open web. Focus groups, critical incident studies, and clinical interviews may be effective for hypothesis formation. Other low hanging fruit include sociological studies about impact of web use on home or office life, and political studies of its influence on democratic processes.

Acknowledgments: My appreciation to Maryle Ashley. Cheryl Graunke, Richard Greenfield, Gary Marchionini, and Catherine Plaisant for their comments on early versions.

References

Chimera, R. and Shneiderman, B., Evaluating three user interfaces for browsing tables of contents, ACM Transactions on Information Systems 12, 4 (October 1994).

Doan, K., Plaisant, C., and Shneiderman, B., Query previews for networked information services, Proc. Advanced Digital Libraries Conference (May 1996).

Flynn, Kaurie, Making searches easier in the webís sea of data, New York Times (October 2, 1995).

Horton, William, Taylor, Lee, Ignacio, Arthur, and Hoft, Nancy L., The Web Page Design Cookbook, John Wiley & Sons, Inc., New York, NY (1996).

Isakowitz, Tomas, Stohr, Edward A., and Balasubramanian, P., RMM: A methodology for hypermedia design, Communications of the ACM 38, 8 (August 1995), 34-44.

Lemay, Laura, Teach Yourself Web Publishing with HTML in a Week, Sams Publishing, Indianapolis, IN (1995).

Lynch, Patrick J., Yale, C/AIM WWW Style Guide, http://info.med.yale.edu/caim/StyleManual_Top.HTML (September 5, 1995).

Marchionini, Gary, Information Seeking in Electronic Environments, Cambridge University Press (1995).

Meggs, Philip B., A History of Graphic Design, Van Nostrand Reinhold (1983)

Nielsen, Jakob, Multimedia and Hypermedia, Academic Press, San Diego, CA, (1995).

Nielsen, Jakob, A home-page overhaul using other web sites, IEEE Software (May 1995), 75-78.

Nielsen, Jakob, Using paper prototypes in home-page design, IEEE Software (July 1995), 88-97.

Nielsen, Jakob, Sun studies of WWW design, http://www.sun.com/sun-on-net/www.sun.com/uidesign

Pejtersen, A. M., A library system for information retrieval based on a cognitive task analysis and supported by an icon-based interface, Proc. ACM SIGIR Conference (1989), 40-47.

Pitkow, Jim and Kehoe, Colleen, GVU's 3rd WWW User Survey, www-survey@cc.gatech.edu (1995).

Shneiderman, B., Designing the User Interface: Strategies for Effective Human-Computer Interaction, Second Edition, Addison-Wesley Publ. Co., Reading, MA (1992).

Shneiderman, B., and Kearsley, G., Hypertext Hands-On!, Addison-Wesley Publishing Co., Reading, MA (1989).

Young, D. and Shneiderman, B., A graphical filter/flow model for boolean queries: An implementation and experiment, Journal of the American Society for Information Science 44, 6 (July 1993), 327-339.

Number of

Web pages Examples

1-10 Personal bio Restaurant review

Project summary Course outline

5-50 City guide Photo portfolio/exhibit

Conference program Organization overview

50-500 Book or manual White House tour

Corporate annual report Product catalog/advertisement

500-50,000 Photo library Museum tour

Technical reports Music/film databases

5,000-50,000 University guide Newspaper/magazine

50,000 - 500,000 Yellow pages Airline schedule

>500,000 Congressional digest Journal abstracts

> 5,000,000 Library of Congress

­­

Table 1: Website genres with approximate sizes and examples

Sell products

publishers, airlines, department stores

Advertise and promote products

NBC, Ford, IBM, Microsoft, Sony

Inform and announce

universities, museums, cities

Provide access

libraries, newspapers, scientific organizations

Offer services

governments, public utilities

Create discussions

public interest groups, magazines

Nurture communities

political groups, professional associations

Table 2: Website goals tied to typical organizations

Figure 1: Yahoo index page (http://www.yahoo.com/)

OBJECTS/ACTIONS INTERFACE MODEL

Figure 2: Objects/Actions Interface Model as a basis for website design

Web Accessibility