Web Page Design Inspired by Edward Tufte The following set
of questions and answers about Web design forms the basis of an article in the
French magazine "Influx" where I was
interviewed about the influence of Edward Tufte's design principles as they
apply to pages on the World Wide Web.
The issues I find most relevant are:
- Output media: hardcopy writers know their target media, but Web content
may be rendered on radically different devices in terms of size, resolution,
and even the type of media itself (high end workstations, small laptops, PDAs,
braille, spoken words, etc)
- User expectations: Web users approach information differently than on
paper and are more likely to scan information than read it
- Ergonomics: the current technology for Web browsing is much inferior to
hardcopy in many ways. The displays are low resolution, the viewing position
is fixed, and mouse/keyboard controls are very awkward compared with pencil
- Content space: much of Web page space is taken up by menus, toolbars, and
navigation controls, thus reducing space for content
- Spelling errors: these cause actual failure of navigation and search as
opposed to just embarrassment or confusion
- Conversion to hardcopy: this often fails due to missing fonts, missing
graphic conversions, as well as size and page layout problems
- Chart junk and dis-information: the low resolution of current displays
coupled with the flickering of CRT displays means that clutter and moire
patterns subtract even more from a display than on paper and contribute to
fatigue and confusion.
- Colors: the low resolution of displays and the ease and zero cost of color
means that colors can either be used to more effectively convey information
(for example, when all elements of a single topic share the same color) or can
be misused to exacerbate confusion.
- Documentation of data: because it is far easier to fling up a Web page
than publish an article in a journal or magazine, and because search engines
can dredge up a page based on keywords, there is a much greater probably of
encountering junk knowledge on the Web. I see a strong need in the future to
have sites certified in some way to insure quality information and to have
search engines sensitive to this certification.
- Information density: the low resolution of screens and the slow download
times for large files make high density information less desirable on the Web.
Various techniques can be used to compensate for this, such as documentation
of file sizes and download times, choices of different resolution graphics,
collections of thumbnail and/or cropped images which, when clicked on display
a high resolution version of the thumbnail, etc.
- Text versus graphics: the download times, different browser capabilities,
and resolution issues tip the balance of text versus graphics more toward
- Sequential versus gestalt comprehension: Tufte points out that high
density graphics on paper let you see complex patterns as a single gestalt.
However, interactive Web displays can lead you sequentially though steps that
expose you only to the context that you need to know based on your previous
choices, rather like a visual phone tree. In some cases this is more effective
than a high density display, in other cases it is less so.
- Maintaining context: it is much easier to get lost in a Web site than a
book because there are so many pathways to pursue. Hence, effective navigation
tools are much more important on the Web than for hardcopy.
Among the sites I like best are:
- The NASA Skywatch site at:
It provides information about many large satellites in orbit. The initial
page explains the purpose in both text and streaming media format, discusses
the resources needed in terms of download time and file size, and contains a
nice two-tiered navigation control that directs you to any part of the NASA
The Java Applet provides information on satellites and orbital positions
that serve both the technical engineer and the public through tables and a
color map of annotated orbital tracks against identified and outlined
constellations for a given location. It is easy to use, attractive, and highly
- Another good site is: http://www.nsf.gov Its initial page is attractive,
compact, uses few graphics, and downloads quickly. It also contains a nice
two-tiered navigation control, contact, privacy, help, and customization
information, a search tool, choices for the category of viewer (students,
teachers, Principle Investigators), and many of the subsequent pages offer
several choices for viewing data, such as HTML, plain text, and PDF format.
Many, but not all, pages retain the same look and feel and navigation controls
of the home page.
- Some exceptionally informative graphics can be found by clicking on a "Map
of the Market" at: http://www.smartmoney.com/maps/
While it initially opens with a completely useless and annoying
advertisement that remains on the screen for a long time and gives you no clue
as to what follows, the resulting display is well worth it. It contains
representations of many stocks, grouped by sector, and coded by colored areas
whose size reflects their market share, and whose hue and intensity show their
stock performance: bright red meaning steep declines, black meaning no change,
and bright green indicating strong gains, with intermediate shades in between.
Glancing at today's screen, I can see that Technology stocks are way down,
energy stocks are up, as are consumer staples. I can view a sector in more
detail, can mouse over an area to identify the specific stock and get some
performance information, and can click on the stock to get detailed
information. It also contains a panel that lets you customize the map. It is a
fine example of multi-functioning graphics that let you view information in
many different ways.
Web site incorporates the following:
- It is based on a user centered (as opposed to corporate, structural, or
any other viewpoint), user tested design
- Its initial page contains simple low-tech HTML that loads quickly, does
not require plugins, works on nearly all browsers, places the most important
information near the top, and tells people right away:
- what subjects it covers or what issues it addresses
- if it has the information they seek
- if the information is current (e.g., date-last-modified)
- what evidence that the information is accurate
- The initial page has an identifying logo and contains or has links to:
- a site map
- contact information
- information about the organization responsible
- a site feedback form or pointers to a discussion group
- assurances as to security and privacy
- related sites
- Information on the technology needed to view subsequent pages in the
site (e.g., browser versions, necessary downloads, file sizes or ownload
- Subsequent pages in the site possess many of the qualities of the initial
page, but also:
- use the same look and feel as the home page in terms of the appearance
and location of the logo and other information that uniquely identify the
site (external style sheets are useful for this)
- provide consistent navigation controls that look the same and are in the
same location, such as "Next", "Previous", and "Home" buttons (especially
avoid pages where the "Back" button does not work)
- display context and location: In complex sites it is very important to
know where you are, and where you have been. While frames pose major
usability problems they are sometimes used to provide a table of contents
that remains constant throughout the site. URLs containing only simple words
and without symbols can help identify location in a site, as well as tree
diagrams that highlight the user's current location
- control windows properly: A proliferation of windows that stay around
causes clutter and confusion (as well as security risks if the user is doing
more than surfing) but windows that automatically close themselves may
startle and confuse the user: the web designer needs to weigh these issues
based on the circumstances that apply
- All pages use:
- a muted background that does not interfere with overlaying information
- good contrast between background and text or controls
- bright colors sparingly to highlight important contents
- the same color for all items that belong to the same category
- text unless graphics confer a real advantage
- visible structural information, such as titles, sub-titles, and bullet
lists in place of long paragraphs
- white space as the primary delimiter
- substantially reduced text compared with hardcopy
- spell checking to insure that navigation and search functions work
some extent beauty is in the eye of the beholder in that a user trained to
interpret certain patterns may see beauty in a site that makes sense to them,
but appears ugly and disorganized to someone without their background (often we
see what we expect rather than what is there, rather like a Frog that is largely
blind to anything that is not small, dark, and moving jerkily -- a fly).
However, for sites that do not require specialized knowledge, I believe
aesthetics can be achieved through a clear design which emphasizes usability,
especially if aesthetic additions are only added when they are consciously
justified in terms of their utility
This is a large and important topic and is perhaps the reason for the
major differences between design on the Web versus paper:
- Differences in size: if we confine our discussion to "traditional"
computers and displays, then differences in screen size (as opposed to
resolution) don't greatly affect the comprehension of graphics since large 19
inch screens have only 2.5 times the area of small 12 inch screens. However,
we now see an increasing number of devices, such as PDAs, cell phones, and
even wristwatches, that surf the Web and whose screens are 100 times smaller.
Typical Web pages simply won't fit on such devices, and page designs must be
specifically targeted for them, although XML/XSL may often be used to
re-purpose larger documents to fit.
Compared with large fold out maps or pages that allow the eye to easily
sweep over large areas, the Web viewer relies on links to multiple pages that
contain portions of the view, and so the overall context is lost -- anyone
using a book type map knows how difficult it is to follow a route that crosses
different pages; similarly, comparisons in a large scientific chart are very
difficult to make when the viewer cannot see all of it at once.
In addition, current LCD screens offer limited screen viewing angles, so
even if they were large or high resolution, they would make comprehension over
large areas difficult.
- Differences in resolution: these are even more important than size.
Theoretically even a page designed for a 20 inch display would fit on a
wristwatch display if the resolution were the same, but low resolution screens
not only force a user into horizontal scrolling, but may fail to render major
portions of it.
Compared with paper, displays in common use today have five to 10 times
less resolution. As a result, detail is coarse, small text is faint and fuzzy,
and viewing is tiring, especially when screen flicker is present. Also, the
overall context is lost, forcing the user to remember and connect information
from previous screens, something for which the human mind is poorly suited.
On the other hand, the Web provides tools that partially compensate for
- despite certain usability drawbacks, especially with respect to
navigation, one can use frames to display an overall view of a scene in one
frame in the form of a clickable image map: when the user clicks on an area
in the overview map, a high resolution view of a portion of the image
appears in the 2nd frame. This is particularly effective if the image in the
first frame highlights the area that was clicked on, displays the current
mouse position relative to the map, and if the image map includes a large
amount of overlap as well as varying degrees of zoom, bettering the chance
of displaying all the context that is desired.
- sometimes animation can be effectively used in place of "small
multiples": a smooth and quickly changing image, especially when it is under
full user control, can often convey information better than a static high
- However, note that the size and resolution advantages of paper over
displays will disappear in 5-10 years: already two-megapixel LCD screens on
Laptop computers are on the market; IBM recently unveiled a 22 inch LCD with
an amazing 9 megapixels that thoroughly rivals the printed page (at present it
is very expensive but will surely drop in price), and Miscosoft's ClearType
(TM) sub-pixel technology greatly enhances the effective resolution of text
and black/white images, sometimes by 300%
In addition, newer LCDs have a wider field of view, and they don't flicker.
In the near future, tablet PCs with stylus input can be held and manipulated
much like a magazine, are superior for pointing, drawing, and writing than
mice and keyboards, and will be augmented by voice and audio input/output.
Very large screen displays are on the way as well as retinal displays for
wearable computers providing true high resolution stereoscopic images that
appear to the wearer to be 6 feet wide.
The Web can provide a richer information environment than is possible
with static pages on paper, such as:
- Up-to-date information: Web information can not only be more current than
hardcopy, but can be instantaneous as in the case of traffic Web cams, ticket
reservations, stock reports, GPS readouts, etc.
- User controlled animation: small multiples are typically used to simulate
animation on paper, but the Web offers far greater possibilities, such as
- real time motion
- user control of speed and direction (forwards and backwards)
- animation of user-selected subsets so that particular transitions can be
observed at varying speeds and directions
- freeze frames that capture one or more frames in animations
- real time response to input supplied either from the user or external
- 3D graphics: it is often difficult to find the right viewpoint for complex
3D scenes on paper, as any single view, or even a set of views, may hide or
distort important information. But 3D data visualizations on the Web, as
provided by VRML or other programs, permit the user to view the data from any
angle. Many years ago I saw an insightful demonstration by J.W Tukey who
explored multi-dimensional (10-12 dimension) data sets interactively.
Initially all that appeared were sets of random meaningless dots, but as he
collapsed data along certain dimensions and applied rotations, strong and
simple curves emerged that illustrated important relationships.
While it is true that the control of 3D objects is somewhat difficult
today, as we usually do so through a mouse on a 2D surface, it will be easier
in the near future through attractive and lightweight headsets that offer true
stereoscopic vision combined with stereo cameras that track hand positions in
3D, allowing us to "grab" and manipulate 3D images as easily as we do real
- High density graphics: although hardcopy offers higher resolution than
current displays, certain Web technologies let you zoom in to view data sets
in far more detail than is possible on paper.
- Exploratory data analysis: the Web permits one not only to view but
manipulate and apply transformations to data in order to uncover relationships
that could never be observed on paper
- Universal information devices: the Web, especially through wireless
access, may tie together all forms of information that today are provided by
many different devices: watches, alarm clocks, radios, TV, newspapers,
magazines, books, CDs, computers, video games, legal, financial, and medical
records, licenses, permits, classrooms, theaters, etc.
Among the more annoying design defects I frequently see are:
- Lack of date/time information: most information is volatile to some
degree. A "date-last-modified" is essential for most sites, and any
time-dependent data on a page needs time documentation
- Confusing navigation, windows that disable navigation, or too many pop-up
- Initial pages that load too slowly or require plugins or exceptional
resources, or scripts that disable browsers
- Lack of site information, such as a site map and contact information
- Clutter in terms of a confusing layout, long paragraphs, distracting
graphics, gaudy backgrounds, inconsistent use of color (different colors
within the same topic or the same color for different topics), moire patterns
- Insensitivity to technical or user limits: Web pages should provide
alternative viewing resources for those with limited browsers, computers, or
© Copyright 2000 University of Washington Computing &
Communications. Larry Gales