Web Interface Design: Learning from our Past
Richard H. Miller, Ph.D.
Note: This work was first published as a workshop position statement for the WWW5 Conference. Links may
no longer work as expected. RHM 6/2/99.
VP - Product Design
Table of Contents
- Learning new tricks while still using some old ones
- Design Guidelines
- Icon and Graphic Design
- Separating Icons from Labels
- One Pixel Borders for Icons
- Simple Usability Testing - Usability Sells
The advent of World Wide Web authoring has led to a plethora of graphics
rich web pages. But where's the beef? In addition to placing marketing information
on a company's home page the strength of the web lies in its flexibility
to link to corporate databases and processes running on a variety of machines,
both web and non-web servers. Tasks such as, creating transaction systems
for commerce, creating graphical user interfaces (GUIs) for legacy systems,
and doing queries against corporate databases require the web designer to
take into account more than HTML code and imagemaps. The heritage of interactive
design for network-based solutions has helped interface designers understand
how to apply their craft to create effective World Wide Web solutions.
Traditional interface design skills taught in Human Factors and Applied
Psychology programs can be applied to creating user interfaces for legacy
information on the web. Unfortunately, the tools that were originally available
in HTML 1.0, did not provide the means of presenting information in the
most effective way for users. In fact, in many ways, web pages are becoming
truly interactive for users only recently. HTMLs limited set of objects
and interaction styles is a step backwards for interface design compared
to the growth of interactive computing over the last 30 years (Figure 1).
Computing systems evolved into highly organized multi-user interactive systems,
yet submissions of web forms (i.e., the ubiquitous 'submit' button) are
a form of batch processing. The robust functionality taken for granted in
what-you-see-is-what-you-get (WYSIWYG) word processors would be a gift to
any HTML developer. We are now evolving to support interactive web styles
with Virtual Reality Modeling
Language (VRML) and Sun's Java programming language. Who knows, what next?
Figure 1. The Evolution of Computer Interaction Styles.
Learning new tricks while still using some old
On the web, with HTML forms simplistic "batch" transaction modes,
there is little concern for user feedback. If you are creating a web application
to access legacy data you should consider the leaps one can achieve in the
web compared to command-driven terminal interfaces. Interface designers
can help improve the productivity of information workers, decrease the need
for training, and reduce user errors. All of this should save your company
money. Laurel (1990) suggests that design is part art and part science, and requires the time and patience to iterate design solutions and listen to users. This lesson
is taught time and time again. The web has its roots in a market driven
society, unlike previous legacy systems which were grown in the information
systems group of a large company. As such, the demands for user-friendly
interface must be a requirement, not an afterthought.
Some suggest the Web is a revolution in computing, allowing unknown individuals
across the world to publish and be heard on the Internet. This coupled with
the haphazard and homegrown way the Internet is maturing, indicates an increased
sensitivity to individualism and social change. Even so, we should apply
our knowledge of interface design to these new systems. If we do, the combination
of the individualism expressed on the web and interface design is sure to
heighten the revolutions impact on its participants and the surrounding
The desktop publishing revolution in the 1980's did not signal an end to
professional design, it only flooded the market with poor quality documents
(i.e., inferior presentation and content). The web is doing the same for
information access by making it possible for anyone to design a web page.
However, there is little to help individuals design a web page well,
not to mention the problem of sifting through all the useless data that
results from searching the web.
This paper shall look at how simple issues can help those who want to move
from the traditional raised-floor temperature controlled surroundings of
traditional legacy systems to the caffeine-driven wired World Wide Web.
My position is that existing design guidelines, the use of graphics and
interface designers, and usability principles for the web, will give developers
a framework to move effectively from legacy systems to the web with an eye
towards usability and functionality.
Consistency, feedback, the ability to recover from errors, and user control
are just a few principles of good user-interface design (Apple,
1992). Interface design concerns how effectively users complete tasks and
how well they enjoy their work. While graphics design focuses on the aesthetics
of the interface. Together these fields make traditional graphical user
interface (GUI) design a strong, but incomplete, foundation for good web
design. Not all GUI principles apply, but a majority can help any designer.
One can look to OSF/Motif(tm) (1993) and Microsoft
Windows(tm) (1995) style guides for information on foreground and background
colors, the organization of menus, on-line help, filtering, and the choice
of appropriate GUI objects in addition to multiplatform styleguides which
cover the similarities and differences between platforms (Bellcore,
1994). These concepts can be directly applied (with a knowledgeable eye) to
web design. For example, a typical GUI object is a pop-down menu (Figure
2 - A), with a web equivalent design shown in Figure 2 - B using a HTML
form and a HTML text menu (Figure 2 - C).
Figure 2. A traditional GUI pop-down menu (A), a web pop-down requiring
a view (i.e.,Submit button (B), and a HTML menu (C).
When you select a menu choice in a word processor something happens. Instant
feedback and the concept of selection-activation (i.e., select
a file icon first and then choose the Copy menu choice as an action)
in GUI design are critical to the users interaction with the system. With
the HTML form-based menu nothing happens, since you still need to "submit"
the request using the View button - an unnatural sequence for users of desktop
GUI applications. The submission of an HTML request is similar to sending
in a batch of cards in old card readers - you have to wait for a response.
This means that all error checking, field validation, and field completion
have to occur after submission. In fact, a pop-down menu might be the wrong
GUI object to place on the web page. A pop-down menu is best applied to
cases where one option is possible from a list of 12 or fewer mutually exclusive
items. The pop-down menu does not require as much screen real estate as
an imagemap or text list. In a desktop GUI, with six or fewer items as in
Figure 2 - B, guidelines recommend a grouping of radio buttons for the language
list (Bellcore, 1994). Since that too would require
a submit button, the menu shown in Figure 2 - C might be more appropriate.
It requires more screen real estate but provides instant feedback. Typical
GUI objects like buttons, checkboxes, lists, menus, and text fields are
available, but without a knowledge of user interface design loss in productivity,
increased errors, and inaccurate results are probable if inappropriate objects
are used. Understanding the users intention, the context of use and usability
testing can accurately reveal the selection of an appropriate HTML object.
An alternative to pop-down menus or HTML menus are imagemaps. Poorly designed
imagemaps can cause users to spend minutes navigating down the wrong path.
This is especially true when accessing a web page via a slow modem line.
The difference between a good and bad imagemap can easily come down to its
"look and feel". Just because a design looks good does not mean
it is functional. For example, placing clickable regions on imagemaps too
close together, or not creating graphics that make the functions apparent
to the user are counterproductive. The recent advances in client-side
imagemaps will improve feedback to users. Imagemaps still take considerable time to download compared to an interface with text links.
Position: Do not port legacy systems - rethink, redesign,
test and implement using the most appropriate and robust design paradigm
available on the web. Balance the use of graphics with a proper design and
consideration for users limited bandwidth.
Sun's Java(tm) and Netscape's LiveScript
language can solve some interaction problems. These languages allow for
client-side intelligence which can mean error checking and field validation
can occur in real-time. In addition, Java allows for user interactions to
affect the system in real-time, thus bringing web interaction more in line
with traditional desktop GUI software design. There is rhyme and reason
in designing for the web. Patrick J. Lynch's Manual
of Style is an effective reference for understanding the aesthetics
of web design (and occasionally goes deeper into the science of interface
design). The Web gives designers the opportunity to reengineer the front-end
of the legacy application. Thus, data can be accessed and viewed using newer
more effective presentation methods. VRML
(which is useful for visualizing three dimensional data or even flying through
a data set) and other graphical visualization techniques can be helpful
for presenting complex data. Tufte (1983) explains how designers have created
effective multidimensional data presentations for hundreds of years (see
home page at Yale). Hence trained graphics and interface designers who
are familiar with interactive media design can help create robust visualizations.
They can combine their knowledge of design with an understanding of the
particularities of web design.
The Xerox PARC Map Viewer
was one of the first HTML sites that explored the use of maps for navigation.
While previous legacy systems for charting regions of the earth might have
required esoteric codes and latitude and longitude coordinates, web imagemaps
or VRML simulations allow a user to navigate visually to a region of interest.
This is a good example of combining the capabilities of the web and interface
design into an appropriate web solution. Thus, there are some solutions
to problems in creating interfaces in HTML. One solution is to use new web-based
tools like Java or LiveScript. A second solution is to creatively combine
the capabilities of HTML with interface design expertise.
Position: Do not expect that as a developer and HTML
programmer you will be capable of creating effective user interface designs.
The best of the web combines useful content, competent web mastering, an
experienced interface designer and coordinated graphic design.
points out that "Almost
everything I do on the Web is a work around". Unfortunately, this
is the way of web designers everywhere. The set of objects, layouts, and
interaction styles, is not as robust as those found in Windows, Motif, or
Macintosh user interface toolkits. So what can we do to help the user? Here
are some tips to help you think and appreciate the role of graphic designers
and interface designers on a multidisciplinary design team.
Icon and Graphic Design Testing
When designing or "borrowing" icons for the web, it is important
to ask several key questions;
If you can answer yes to all of these questions, then try to answer the
question; Is the icon unique? Go to icon source books with your graphic
designer, and then follow their suggestions for generating ideas and testing
concepts. Icon design is not a new field. Horton (1994) gives simple methods
for developing and testing icon designs, while Dreyfuss (1972) shows thousands
of icon designs in his book, in addition to expressing his expert views
on icon design. Do not rely on your personal feeling for icon design, it
will come back to haunt you when you are the only person who understands
your icons! Try a simple usability test for your icons:
- Is the icon simple?
- Is the meaning clear for the intended audience?
- Is the whole page of a reasonable size to download?
- Are the graphics large enough to distinguish them on a high resolution
- Does any action represented in the icon standout? (put the emphasis
on the action - move, copy, previous - since it is hard to represent motion
in an icon)
- Are you using consistent and appropriate metaphors? (For example, a
shopping bag is not an appropriate metaphor for a web purchase list, since
you only use a bag after items are purchased. Try using a shopping
cart. Tim Rohrer's discussion on Metaphors
we compute by: bringing magic into interface design raises some good
issues concerning inconsistent metaphors.)
If you find that only few of the dozen users can correctly identify the
icons, you have a problem. I agree this is a harsh test, presented out
of context and without text labels, but if the icon cannot stand alone in
some reasonable fashion, why try to force an association with a text label
that your users will not understand? Try reading Virzi (1990) to understand
how one can use a limited number of users in testing while still capturing
important usability information.
- Remove any text label from the icon
- Print the icons out onto a piece of paper (if necessary, print in color)
- Walk around (or fax them) to a dozen possible users
- Ask them to free associate a meaning to each icon
- Tally your results
Position: Ask users for input, try to work with them
to create sensible icons and designs. Redesign and test with users.
Separating Icons from Labels
Monitors scale graphics differently based on the monitors addressability,
but web browsers can be adjusted to scale text independent of the monitor
type (e.g., 14 point text can appear the same size on different monitors).
Therefore, use tables to label buttons with HTML text, rather than embedding
it in the graphic of the button. There are tradeoffs, but one can easily
change the wording or language associated with the button, without changing
the graphic (Figure 3).
This is not to say that the graphic representation will work well in another
country. For example, the Sherlock Holmes search icon in Figure 3 may not
translate well to South American users. With web interfaces, which are presumably
seen by users throughout the world, one needs to consider graphics design
as well as text translation issues (Nielsen, Galdo, Sprung, and Sukaviriya,
1990). By separating the text from the graphic, it will save download time,
scale better for high-resolution monitors, allow reuse in multiple language
setting, and allow more flexibility for the visually impaired.
Figure 3. Buttons with Separate Text Labels Presented using Tables (A
- regular size text, B - as it would appear on a high-resolution monitor,
C - with larger browser text, and D - with large text in Spanish).
Position: Create modular graphics and text to allow
for flexibility and adaptive interfaces.
One Pixel Borders for Icons
In Figure 4 the 3X magnification of the Sherlock Holmes graphic shows a
one pixel white space between the icon and the border of the corner of the
icon. User testing during the creation of an on-line shopping mall for the
entertainment industry showed users preferred the button with the white
space and a 1 pixel border (after extensive user testing to define the search
icon as Sherlock Holmes). The distinction between the button and the border
gave users additional feedback when the item is selected. This is an HTML
work around to give users feedback. In most applications a button (Figure
5 - A) would appear depressed by shifting a few pixels and highlighted (Figure
5 - B) giving the user feedback that the button was selected. The button
would return to its normal state when released (Figure 5 - C). One needs
to make up for the design limitations of the web by considering options
like using one pixel borders.
Figure 4. The corner of the Sherlock Holmes graphic (3X magnification).
Note the 1-pixel white space between the image and the border.
Figure 5. How most applications (not HTML) show a normal button (A),
a highlighted button shifted slightly to look depressed (B), and it in a
normal state (C) when the button is released.
Position: If you are creating web systems people need
to use day in and day out, consider the functional questions first and spend
time designing useful icons.
To summarize icon design, a web designer should know when to go to professional
interface and graphic designers to get high quality images, layouts, and
interaction methodologies. The importance of expertise provided by a graphic
or interface designer is reviewed in Mullet and Sano
(1995). Web related topics covered by Mullet and Sano include; the Golden
Ratio, design simplicity, unity, clutter, the appropriateness of two-dimentional
and three-dimensional graphics and symmetry. Some excellent designs can
be achieved with the careful application of tables, font size changes, small
powerful graphics, and a sense of style. Just understanding the fundamentals
of graphic or interface design is not enough. The web is different than
other media and the application of existing domain knowledge needs to be
moderated with an understanding of the subtility of web design.
Position: The web is not so radical that traditional
concepts of design should be ignored, but knowing how to design for the
web is different than for other media.
Simple Usability Testing - Usability Sells
Solid design and usability are features explicity used to sell products
to consumers. When we hear someone selling Windows 95(tm) as being "just
like a Mac", or an Infiniti salesman preaching that thousands of customers
were tested in order to determine the placement of displays in Infiniti
automobiles, this suggests that a payoff in terms of customer satisfaction and
There are methods available to web designers that may not have been applied
previously to legacy system design. Bellcore's User-Centered Design (UCD)
methodology helps designers to rethink and redesign existing software
systems to accommodate users and the web. UCD is a process for creating
software that meets "documented objectives for usability and usefulness
(with) an early and continuous focus on users throughout the analysis, design,
and development process" (Salasoo, White, Dayton,
Burkhart, and Root, 1994). It is never too late to start usability testing,
but the earlier one starts, the larger the payoffs in time savings and user
satisfaction. A good example of how usability testing was applied to web
design is presented by Jakob
Nielsen and Darrell
Sano (1995) who wrote about their interface
design testing of the new Sun Microsystems web site.
If you are not familiar with usability testing, consider the following.
A user-friendly web interface can have many advantages over an existing
legacy interface. These advantages include:
Position: Spending time doing usability testing and/or
a User Centered Design session can save a project significant resources
in the long run.
- Reduced errors due to a redesigned process flows, increased error handling,
and embedded help
- Increased number of transactions per worker
- Increased user acceptance of the system
- Reduced strain on users (less mental fatigue and frustration)
- Increased flexibility for changes and improvements to the system (modular
- Increased number of platforms supported with a consistent interface
- World wide access
Our existing understanding of interface design, usability, and information
layout can be used to recast existing legacy data into new, easier-to-use
systems on the web. By attempting to port screens or processes from legacy
applications directly to the web, one will only prolong the inferiority
of most user interfaces and reduce the utility and understanding of the
web as a universal communication and information exchange medium. In order
to maximize web efficiency it is necessary to explore the use of guidelines,
develop usability methods and seek guidance from graphic and interface designers.
Apple Computer (1996).
Human Interface Guidelines. NY: Addison-Wesley.
Dreyfuss, Henry (1972). Symbol Sourcebook. NY, NY: McGraw-Hill.
Bellcore (1994, December).
for Multiplatform Graphical User Interfaces. LP-R13, Issue 2,
December 1994. Piscataway, NJ: Bell Communications Research, Inc. (1-800-521-CORE).
Horton, W. (1994). The
Icon Book: Visual Symbols for Computer Systems and Documentation.
NY, NY: John Wiley and Sons, Inc.
Laurel, B. (Ed.) (1990). The
Art of Human-Computer Interface Design . NY, NY: Addison-Wesley.
Microsoft Corporation (1995). Windows
Windows® Interface Guidelines for Software Design. Redmond, Washington:
Mullet, K., and Sano, D. (1995). Designing
Visual Interfaces - Communication Oriented Techniques. Englewood
Cliffs, NJ: Prentice Hall.
J., Galdo, E. M. d., Sprung, R. C., and Sukaviriya, P. N. (1990). Designing
for International Use. In Proceedings of ACM
CHI '90 Conference on Human Factors in Computing Systems (pp. 291-294).
Open Software Foundation (1993). OSF/Motif Style Guide (Revision 1.2). Englewood Cliffs,
NJ: Prentice Hall.
Salasoo, A., White, E., Dayton, T., Burkhart, B., and Root, R. (1994). Bellcore's
User Centered Design Approach. In M. Wilkind (Ed.), Usability
in Practice. Boston: Academic
E. R. (1983). The Visual Display of Quantitative Information.
Cheshire, Conn: Graphics Press.
Virzi, R. A. (1990). Streamlining the Design Process:
Running Fewer Subjects.. In Proceedings of the Human Factors Society
34th Annual Meeting (pp. 291-294). Santa Monica, CA: Human Factors Society.
Richard H. Miller, Ph.D.
The opinions expressed in this presentation, are that of
the author, and do not in any way reflect the opinion of Bell Communications
Research. My thanks to Rodney Fuller, Catherine Hanson, Bob Root and Aita Salasoo for their
comments and suggestions. Trademarks, Registered Trademark and Copyrights are the property of their respective owners.
Note: References and Links were last updated and checked on June 20, 1998. Some changes were necessary to
keep the reference materials current.