Web Page Design Inspired by Edward Tufte
Note:> A translation of this page is available at:
in Polish
Ukrainian translation:X
Ukrainian provided by StudyBounty.
and in
Russian provided by
StudyCrumb
and in
Spanish
and in
Punjabi
and in
Hindi provided by BorderCollieTalk
and in
Estonian
provided by
besteonlinecasinoinorge.com
and in
Norwegian
provided by
Lanfordeg
and in
Urdu
provided by MobileMail
and in
SindHi
provided by CouponToaster
and in
Indonesian
and in
Bulgarian
and in
Slovenian
Translation into Portuguese for https://www.homeyou.com/~edu/
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.
Note: click
here to read Belorussian translation
Note: click
here to read the Portuguese translation (provided by
Travel-ticker.com)
Index
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 and paper
- 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 text.
- 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.
Back to Index
Among the sites I like best are:
- The NASA Skywatch site at:
http://spaceflight.nasa.gov/realdata/sightings/index.html.
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
site.
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
informative.
- 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.
Back to Index
A good 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 times)
- 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
Back to Index
To 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
Back to Index
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 this:
- 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 resolution page
- 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.
Back to Index
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 sources
- 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 world objects.
- 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.
Back to Index
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 windows
- 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 physical limitations.
Back to Index
© Copyright 2000 University of Washington
Computing & Communications.
Larry Gales