Design Principles from Tufte

Minoru Niijima's version of E.J. Marey's train schedule from Paris to Lyon. X-axis is time, Y-axis is space. Horizontal red lines are stations. Diagonal red lines chart out individual trains. Copied from cover graphic of The Visual Display of Quantitative Information.

I have recently been reading some of Edward Tufte's books on information graphics. Tufte is an expert on the subject and I'd highly recommend the books to anyone who finds beauty in data visualization. Video games seem to have a bad reputation for honest and direct graphical feedback. At several points in his books, Tufte makes comparisons to video games in order to point out bad design. Referring to one particularly gaudy chart, Tufte writes, "Credibility vanishes in clouds of chartjunk; who would trust a chart that looks like a video game" (Envisioning Information (EI from here on), page 34). The implication is video game graphics are flashy and decorative, but content-poor. Sometimes that's fine -- colorful, loud graphics can convey an amusement park fun that has no need for deep content. But other times, games do benefit from elegant information graphics. This is especially true for game editors. I've recently been adding more graphical feedback to the map editor, and I've been thinking about how Tufte's principles might apply.

Concise, Multi-Functioning Elements

Charles Minard's visualization of Napoleon's invasion of Russia. The dominate line depicts several variables at once: army position in space and time, number of troops, and army advance versus retreat.

One of Tufte's key theses is that good information graphics "maximize the data-ink ratio" (The Visual Display of Quantitative Information (VDQI), page 105). That is, effective graphics show a lot of data with only a little ink (or only a few pixels, as the case may be). Related are the principles "Erase non-data-ink" and "Erase redundant data-ink" (VDQI, page 105). I have been trying to follow each of these rules for the map editor. Avoiding redundant icons and uninformative embellishment has been relatively easy -- I simply have less work to do! Packing in useful information is a bit harder. One way to condense the presentation is to make each stroke multi-function. I've tried to apply this idea to the grid in the editor: it shows both the plane of locked movement and it shows the snap lengths. Further, so as not to clutter the map with redundant information, the grid lines fade away after a certain distance, having served their purpose. And, the fade out of the grid is also meant to multi-function. To me it urges motion, as the fading lines thin out and point like needles.

The editor grid display multi-functions.

Micro/Macro Readings

Stem-and-leaf plot of volcano heights. A histogram of heights is built out of the actual full listing of all 218 mountains' heights. Copied from The Visual Display of Quantitative Information, page 140.

One particularly interesting way to create dense graphics is through what Tufte calls micro/macro readings. These are graphics that convey one layer of information on a micro scale and another layer on a zoomed out, macro scale. One nice consequence of this technique is information is consumed hierarchically. The viewer may glance from a distance to observe an aggregate trend, and later peer in closely to examine individual pieces of that trend. Stem-and-leaf plots provide a good example of this technique. In these plots, numbers become the 'pixels' that graph the data, and these numbers carry micro-scale information. Tufte quotes John Tukey, the inventor of these plots: "If we are going to make a mark, it may as well be a meaningful one" (EI, page 46).

I have only just begun to think about micro/macro readings for the map editor (any suggested uses are welcome :)), but I can share one simple effect along these lines. The latest cursor, which changes according to what the user is doing, can be viewed as a micro/macro graphic. On the large scale, the cursor serves to locate the mouse, and on the small scale, the cursor both indicates the tool selected and suggests how that tool should be used.

The rotation icon locates the cursor and, on a smaller scale, also indicates what the user should do with it.

Color

Natural color palettes. Photos by Gretchen Garner, A Grove of Birches. Copied from Envisioning Information, page 90.

Yet another way to create data-rich strokes is to give them multiple feature dimensions. For example, color provides a nice addition over black and white. With color we have at least three perceptible dimensions, but we have to be careful how we choose these. Computers tend to parameterize color with red, green, and blue (RGB). Unfortunately RGB is not easily visualized by humans. For example, try it yourself: which is more blue, pale pink or bright yellow? When mixed with other colors, blueness is hard to identify. For a more perceptually salient parameterization, artists often use hue, saturation, and value (HSV). HSV describes the familiar color wheel, which actually becomes a color cylinder when value (i.e. brightness) is added as the height dimension. Angle parameterizes hue and radius parameterizes saturation. Thus, HSV provides three useful dimensions of information, since each dimension can be visualized independently.

Tufte of course has ample advice for color use. Two lessons I've extracted are to use bright colors sparingly (only for important content), and to choose a color palette drawn from nature, as these tend to be easily digestible. With regard to these lessons, I am exploring use of bright colors to hightlight only the most important actions, and for less important selections I'm shifting toward a more subdued palette of blues, greens, browns, and grays (though the colors are still awfully bright in the screenshot below).

Group color conveys information. Exactly what information is still something I'm experimenting with... Here, hue indicates the number of subgroups within a group.

For editors, it's relatively straightforward to apply principles of information design. But what about for the game itself? One thing I've liked about David's past games is he always paid close attention to concise, multidimensional, visceral feedback. For example, in Lugaru, health was conveyed by character posture, screen dimness, and motion blur -- these are high impact channels that most games either leave empty or else fill with data-thin binary shifts. I think David's techniques were effective cues to orient and involve the player.

What do you guys think? What are good ways to provide salient feedback in games and/or editors? Can you think of any games that have excelled at information graphics? Is empty (but fun) decoration a fine thing to have in games, or should Tufte's principles of information design be more rigorously applied?