Look at every path closely and deliberately.
Carlos Castaneda The Teachings of Don Juan
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.
Department of Computer Science
University of Maryland
College Park, MD 20742
ben@cs.umd.edu
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