Visual Design of the User Interface
by Edward R. Tufte
An icon in the field of Information Design packs an entire design philosophy into just 12 concentrated and richly-illustrated pages. A must-read for anyone who creates for the screen.
Visual Design of the User Interface
(12-Page Booklet)
Visual Design of the User Interface was prepared for the IBM Design Program during Edward Tufte’s years there as a consultant. The book is a mere 12 pages in length, but in that small “package” Tufte ably encapsulates his thinking about the design of information for maximum understanding. In five short sections, Tufte lays out the basics of how to present information and what to think about when presented with the task of transmitting data or information through screen to an end-user.
Information Resolution
Although this booklet was written back in the late 1980s when personal computing was closer to its infancy, all of the suggestions Tufte makes are still pertinent today and can be successfully applied to nearly any project that will be viewed through a screen, whether it be a website, a web application, a piece of software, an informational kiosk in a museum, or any other such system in which information must be communicated through, “the low-resolution, low-information, narrow-band user interface of a video display terminal.”
The two strategies that Tufte identifies for improving information resolution are (1) reducing noise and (2) improving signal. When designing for the screen, it is essential to eliminate every pixel that doesn’t serve the data, and it is also essential to turn as much screen real estate over to user information as possible. Fundamental tenets of design, but very hard to do well.
Interaction of Design Elements
The interaction of multiple design elements on a screen are powerfully demonstrated by a number of graphics, several of which appear below, that show 1 + 1 = 3 effects that Tufte ascribes to the artist Josef Albers. 
Here, when two or more black lines are drawn, “extra” visual effects occur: active white stripes between the lines. Below, further complexity appears as various shapes interact with white space, producing additional visual effects that can distract from clarity in user interfaces.
This map from 1724 exemplifies an information source that includes the organizing grid within the main structure of the source. Its tidy inclusion into the data container makes the grid seemingly invisible, allowing the data (the map itself) to show through the data container clearly. This clarity also eliminates potential 1 + 1 = 3 effects between various design elements on the map.
Lastly, the map demonstrates the appropriate application of color to a body of data, effectively using nature’s colors for the presentation of data.
Color for the User Interface
Tufte observes that, “Of all design elements, color most exemplifies the wholeness of design, the necessity to reason globally.” The graphic below shows the effect of combining bright, garish colors with 1 + 1 = 3 effects. Such combinations cause “damaging noise and strong after-images.” It very nearly hurts to look at this sort of design.
Tufte states his first principle for use of color: “Above all, do no harm.” He expounds on the proper use of color, using cartography as his primary example of effective use of color in data presentations. What colors should be used on computer screens? “A good way to avoid colorjunk is to use colors found in nature, particularly toward the lighter side, such as grays, blues, and yellows of sky and shadow. Nature’s colors are familiar and have a widely accepted harmony. Particular, local emphasis to screen information is then given by means of spots of stronger colors against the serene background.”
Typography and Icons
According to Tufte, standards for typography and icons should be just as high when creating screen presentation as when designing for print. He asserts that, “Typographic excellence requires the production of clean, crisp images by display terminals; and today the best high-resolution terminals leave no excuse for poor typography.”
Icon design presents its own unique problems to be overcome. Here Tufte discusses the importance of the effective combination of icon graphics with suitable naming conventions to produce the greatest clarity. Especially helpful is his admonition that “cute” icons will not successfully translate to different languages and cultures.
Design Quality
Tufte closes by reminding the reader that the best screen interfaces are consciously designed, with high priority being given to the visual quality of the interface itself (and not just attention given to the underlying system below the interface).
As he states in the first paragraph of this wonderful little booklet, “Today the competition is at the user interface.” Tufte was correct in writing this back in 1989, and this statement still holds true today. “Poor screen design can destroy underlying excellence in software and hardware. Graphic design details are not cosmetic matters or decorative touches. In fact, carful attention to visual craft is a distinguishing characteristic of nearly all excellent user interfaces now in the marketplace.”
Edward Tufte
DESIGNHave a comment? Here’s a nice old typewriter for you to WRITE TO ME.
Looking for more design guidance? Visit my EDWARD TUFTE STORE. By purchasing through this link, you’ll be supporting the future of viaDigita—MANY THANKS!
