Escaping the flatland is the essential task of envisioning information--for all the interesting worlds (physical, biological, imaginary, human) that we seek to understand are inevitably and happily multivariate in nature. No flatlands. --Edward Tufte

Links
First, you should consider some style issues. Decide how your page will be organized. Will your argument be on one continuous page with nonlocal links or anchors added within the text, or will it be a series of HTML documents with local links? Creating a hypertext with a number of levels is not a problem if the structure is organized or at least navigable. The author must make a choice about the composition of the hypertext and then reconcile his or her choice with the constraints of navigation and structure. If you want to emphasize a chaotic reading then you may choose to let the reader control the path, as a participatory action. If you want to impart a structured or even guided reading, then navigational markers become more important. If you are using hypertextual software like StorySpace, presenting in chunks may be appropriate because your links are visually mapped. Unless you set up a similar map for your readers, they may get confused when trying to link from page to page without any clear references. You should also differentiate between your local and nonlocal links. If your link takes your reader to another page on the net, you need to insure that you have indicated that fact in some way. You don't want to lose your reader to a more promising page, but you do want to provide pertinent information. Many web authors advocate using links as you would references, so that instead of including your link within your written composition, you can create a bibliography of pertinent links. That is, create a linked works cited page. It's okay to include links within your text as long as they are clearly referenced. This works like any standard citation--you should set up your link like a standard citation by providing context for the use of that link. In terms of references, be sure to carefully read the *entire* source. In a hypertextual medium like the World Wide Web, people can click on your link and read the supporting material for themselves. Remember ethos here! If the information you've linked to does not support your text the way you claim it does, you can lose your reader altogether. However, if you provide useful links with pertinent information it can bolster your argument in many ways. Also, consider annotating your links as much as possible. Remember that it may not be clear what you want the reader to get from the linked material. If you annotate the link you will have an additional opportunity to present why you think the link is useful and what kind of information it contains.

Graphical Design
Tufte said "Graphical elegance is often found in simplicity of design and complexity of data." Don't use graphics for the trivial or the useless. If you weigh your graphical choices as carefully as your textual ones, your entire page will reflect the wisdom of your choices. Some things to consider:

• Choose your format and design first. Map it out on (gasp) paper if you wish, but don't try to impose design after the fact. It's often painful as well as painfully obvious.
• Use words, numbers and drawings together with a reasonable explanation of the data. If you are using a statistical chart or table to augment your argument, take time to explain the relevance of the information before presenting the graphical data. This is an important point when presenting quantitative data analysis.
• Present your images with care (if you use GIFs, remember to interlace them) and make sure that they are formatted properly. It is considered improper for someone to use large (memory-wise) inline graphics on a page because of the time it takes to download them. Keep your graphics under 30k in size and you should do fine. Sometimes you need to use larger images, but remember to consider the reader. Make a link to the image or place it on another page with some corollary information for the reader. Don't overwhelm the reader with too many images. Such an approach will distract from your overall composition.
• Avoid "chartjunk." Tufte uses this word to describe content-free decoration, or data presentation of style and no substance. Remember, that in *any* composition environment, style matters little without substance.
• Use well-designed small multiples whenever possible. This is especially important for image maps. "Small multiples work as efficient and convincing summaries of data or an argument, making the same point again and again by offering complementary variations on the major substantive theme" (Tufte 30). An old image map of the CWRL home page exemplifies this idea. The image map is that of a large bulletin board with notes of paper denoting specific local links within the overall site. These notes are small multiples. In data representation, they should be multivariate (subtly dissimilar in terms of color or outline) so their differences are offset for the reader.

Even in grayscale, such an approach will help clarify rather than confuse the reader. Don't let the data enclosure detract from the data and try not to create a space that brackets your information--visual clutter can make the wrong thing stand out and create a vibrating space that detracts from your information. This addition of strong borders combined with white space exemplifies what Josef Albers calls the 1+1=3 or more problem. Tufte explains this concept by his example of when"you draw two black lines, a third visual activity results, a bright white path between lines. And a complexity of marks generates an exponential complexity of negative shapes. Most of the time, that surplus visual activity is non-information, noise and clutter" (Envisioning Information 61).

Color
There are number of things you should be aware of in terms of color relationships. In terms of a computer screen, computer color is mixed in RGB (red, green, blue), but print and film is mixed in CYM (cyan, yellow and magenta). If you scan a print image, the system must translate the colors from a subtractive to an additive mode. This means the colors of the scanned image displayed on the screen may not match the original colors of the image. There is software to help solve this problem, but spend too much time worrying about the technical terminology, just remember to be prepared for some discrepancy in translation.

You must also consider how a color will work in terms of its background and neighboring colors. Spectral neighbors are hues that are next to each other within the color spectrum. Blue and green, red and orange, and yellow and green all neighbor one another on this continuum. Use these pairs to suggest shadowing or dimension. However, avoid these pairs when you need distinct visual boundaries because the contrast between them is low. These pairs are more useful to draw out subtle relationships. However, complementary colors (those opposite one another on the color wheel) actually intensify their visual distance. If you put them right next to each other they may appear to move or vibrate. You can reduce this effect by separating them by a thin white or black outline.

The smaller the graphical element (for example fonts), the more contrast is needed for readability. As the size increases, the need for contrast decreases.

Graduated or ramped color can be a good contrasting element. However, depending on your software, this can also lead to mistakes. There are three kinds of ramping, horizontal, diagonal and radial. All suggest a certain kind of movement to the reader's eye and should be used accordingly. The more gradual the graduation, the better. This will minimize color interaction and provide better readability. Use graduation to augment your graphical elements, rather than distract your reader from the import of the information.

However, don't hesitate to use color to layer and separate your information.

Remember that GIFs are in 256 colors. That means the gorgeous map you made using millions of colors will be converted to 256 on the World Wide Web. Also try to interlace the GIF images you use (that's an option when you save the file as a GIF). You may want to use JPEG instead of GIF. JPEGs have a better compression ratio and look cleaner on the screen. However, not all web browsers support inline JPEGs.

What palette of colors is particularly useful? Tufte recommends the colors found in nature as ideal for the envisioning of information. Rather than garish artificial colors (a la Las Vegas), lighter shades of blue, yellow and grays help add to the definitive authority of the "natural." But don't assume this is always the case. If you want to use bright colors to help represent your information in a particular way (i.e., a chart about the influx of technology might look great in nonnatural colors), don't hesitate. However, try several different color schemes before settling on one in particular. Your own eyes will be the best judge in this case.

The fundamental uses of color in data design are:

• to label (color as noun)
• to measure (color as quantity)
• to represent or imitate reality (color as representation)
• to enliven or decorate (color as beauty)

Other Media

The World Wide Web currently support film and sound media in various standardized formats. How should you integrate such media into your work? First, such files must be relevant to your composition. Remember that size is an issue here and if your file takes forever to download, your reader may lose interest. Many of my suggestions regarding graphical elements apply to both film and sound files. However, rather than placing them at the end of your composition, I strongly encourage you to include them within the body of your work. They can be especially useful pathos and ethos devices. For example, if you are discussing the Republican Party's Contract with America a soundbite or film clip of Clinton discussing the particular point can be an effective piece of corollary data. However, do not forget to set up/annotate the information like any other citation.

Student Projects

The design process can be described as a set of activities that produce a product. Designers use a concrete series of steps to explain the process: definition of the problem (or analysis of the goal); research; idea development (usually within a group); production or synthesis of group solution into a tangible product (or page); and evaluation of the process. Although these steps are usually interpreted for students of graphic design trying to produce a tangible product, they can also be tentative guidelines for composition students.

Remember that your data should always have a narrative quality. You have a story to tell and your graphical representations should be a part of the narrative, not an intrusion to the storyline.

Copyright 1995 by Tonya Browning
Last updated: December 1996