elearningpost logo

you are here: articles

Visual Design for Instructional Content (Part I)

First published March 18, 2001 by Venkat Rajamanickam (.(JavaScript must be enabled to view this email address))

In an earlier article 'Monkey Instruction', we addressed the issue of effective writing for online instruction. We asked why some online courses are boring and analyzed a Webmonkey course to understand its writing style that makes it such a popular course.

In planning for this article we looked at several resources, addressing disparate issues, conflicting theories, numerous principles, techniques and rules - that it was difficult to bring them all together in one article. Hence we have decided to tackle them in a series of parts, with each part devoted to one set of guiding principles or a specific resource.

Part I of the article analyses Edward Tufte's principles of visualizing information.

What do we mean by visual design for instructional content?

Here we refer to the visual elements that specifically illustrate or aid learning. We are talking about visuals that directly illuminate and enhance the comprehension of content.

Examples: Diagrams, charts, graphs, illustrations, drawings, photographs etc.

Visual elements used in containers (such as user interfaces, page layout, navigation etc.), though important, are covered in other excellent resources.

Tufte on Visualizing Information

Tufte, a designer, statistician and professor at Yale, has a series of self-published books on visualizing information. The series began in 1983 with The Visual Display of Quantitative Information (Pictures of Numbers), followed seven years later by Envisioning Information (Pictures of Nouns). In 1997, he published Visual Explanations, Images and Quantities, Evidence and Narrative (Pictures of Verbs).

Denouncing the presumption that graphics are "devices for showing the obvious to the ignorant," Tufte advises designers instead to assume a smart, curious reader who's willing to explore complex information as long as it's presented with grace and clarity. He quotes E.B. White: "No one can write decently who is distrustful of the reader's intelligence, or whose attitude is patronizing."

Problem with presenting information

The world is multidimensional. Even something as simple as giving travel directions to someone requires expression of three or more dimensions of information (latitude, longitude, direction, time). The main problem is visualizing and representing such high-dimensional information is that we only have low resolution display surfaces such as paper & display monitors. He calls them 'flatland' and offers the following principles to "escape from flatland".

Five Principles of Information Display

1. Show Cause and Effect.

When we try to comprehend something, we are looking for information to understand the underlying mechanisms. Reasoning is about examining causality. Hence your visual should not merely provide descriptive narration; instead it should explain the cause and effect.

Tufte provides a classic example of John Snow's medical detective work in which Snow identified the cause of Cholera epidemic in London in 1854. Faced with two sets of data about number of deaths and their corresponding locations, Snow recast the one-dimensional temporal data sets into a two-dimensional spatial comparison that helped him pinpoint the notorious contaminated pump well.

2. Make Comparisons.

To be persuasive, which is the ultimate goal of communication, together with what is the cause, and what is the effect, the third important question that needs to be answered is, compared to what?

Citing the same example of Cholera epidemic, Tufte describes how Snow's map with great clarity, presented several intriguing clues for comparison between the living and the dead, clues about various locations etc.

3. Make displays Multidimensional.

To demonstrate this principle Tufte shows a 19th century map of Napoleon's 1812 march into Russia.

Minard manages to portray six dimensions on this two-dimensional paper - the size of the army, latitude, longitude, direction the army is moving, temperature, and date. On a single sheet of paper with no text, Minard eloquently captures Napoleon's failed march to take Russia.

4. Integrate Words, Numbers and Images.

Tufte stresses on the importance of telling a "coherent story". This means avoiding references for figures and examples, which are physically removed from the flow of the text.

Also information for comparison should be put side by side. That is, within the eye span, not stacked in time on subsequent pages

5. Effectiveness of Visual Design depends upon the Quality, Relevance and Integrity of the Content.

Good design is clear thinking made visible. Tufte shows a book by Galileo published in 1613, which reported the discovery of sunspots and the rings of Saturn for the first time.

Galileo wrote in Italian, not Latin, because he wanted to reach a wider audience than the scientific elite. His tone of writing is wide-eyed, straightforward, undiplomatic, sardonic and sounds a lot like the modern voice of Richard Feynman. The report of the discovery of sunspots has a simple drawing of the sun on each page to show daily observations. From these observations he learned that the sun was rotating as the spots moved across the page and changed apparent shape at the edges due to foreshortening.

Sleight of Hand

Magic is expressed in five dimensions: 3-dimensional space, time, and what is revealed and concealed. Tufte calls magic the art of "disinformation design."

"The techniques of conjuring are especially relevant to theories of information display. To create illusions is to engage in disinformation design, to corrupt optical information, to deceive the audience. Thus the strategies of magic suggest what not to do if our goal is truth-telling rather than illusion-making."

He identifies several devices that that magicians employ to misinform their viewers. They

Hence effective visual communication design involves doing exactly the opposite of what magicians do.


Tufte's series of books are essential reading for anyone engaged in visualizing and communicating information. And we need more instructional content to be available visually to balance out 'boring, text-heavy content'.


The commenting section is closed for this article.

Commenting is not available in this channel entry.