Web Page Design Inspired by Edward Tufte

Note:> A translation of this page is available at: in Polish provided by SkyClinic

Ukrainian translation:X Ukrainian provided by StudyBounty.

and in Russian provided by StudyCrumb

and in Spanish

and in Italian provided by Istruzione Messina

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

(Q) What are the issues from Edward Tufte's works that are relevant for a Web site?

• 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.

(Q) What are your recommended web sites in terms of content, graphic relevance, aesthetics and effectiveness, and why?

• 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.

(Q) How can a site be effective, interesting, and attractive for the Net surfer as well as for the in-depth user?

• 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

(Q) Should a site be beautiful, to be effective ?

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

What affects do screen size and resolution have on graphics on the Web, and how do you develop effective graphics under these constraints?

• 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.

(Q) What new potentials are offered to design by web technology ?

• 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.

(Q) What are the most common errors found in Web design?

• 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.

© Copyright 2000 University of Washington Computing & Communications.