Wednesday February 21, 2007

Information Design for the Web

By Colin Lieberman

The art and science of preparing data for human consumption is Information Design. Every train schedule, product data sheet, and customer survey we encounter was designed, either expertly or crudely, to organize information to facilitate interaction.

Good information design solves problems and communicates effectively. Bad design muddles facts and misses causality. When we’re lucky, bad design results merely in confusing or misleading information displays; at its worst, ineffective information design can cost lives.

Not Hyperbole: The Challenger Disaster

Edward Tufte, one the most widely published voices in the field, in his book Visual Explanations: Images and Quantaties, Evidence and Narrative, argues a strong case that the cause of the Challenger explosion was chiefly a failure of information presentation.

Excellent summaries of his argument are available online. In short: when trying to make a case that cooler temperatures were related to O-ring failures, engineers chose a visual representation of the data that convoluted their point.

Had they represented the data in a manner that directed the viewer to the causal relationship being explained, the decision to launch in subfreezing temperatures might not have been made.

The Flip Side: Solving Real Problems

On a more positive note, strong information design can solve very real problems. Epidemiologist John Snow discovered the source of London’s 1854 cholera epidemic through a brilliant organization of data.

By grouping cholera deaths geographically and by quantity on a map that featured public water pumps (suspected sources of contamination), he was able to correctly identify the offending pump as the one most closely situated to the most deaths.

Life and Death on the Web?

The above example are extreme, but the principles of information design at work in those events are no different than the ones at work helping people catch the right train.

Much of what’s written on information design focusses on print design, but the principles are equally applicable online. We have the added benefit online of user interaction — our information designs can live and breath, and meet user needs in a way that print data cannot. But again, the principles are the same.

Principles of Information Design

I’ve tried to distill a lot of reading into just three topics (all of which are Tufte’s), which though fuzzy and slightly overlapping, may help give you specific ideas for your own work. They are:

Data Richness

Data richness is the principle of incorporating as much information as possible into a single graphic or chart. By including as much information as possible, we invite the viewer to make comparisons and give her the opportunity to see the forest as well as the trees, coming away with a fuller understanding of the information available.

The Onion’s weekly Statshot feature does a superb job of poking fun at the bad, information-lean designs that are the hallmark of television news graphics.

Joke information graphic: Why didn't we vote

This graphic (taken from theonion.com) is perfectly terrible:

Information is presented much more effectively by Google Analytics website traffic software:

screen shot of Google Analytics showing web browsers used to access a website

Taken from jeffooi.com, this pie chart showing web browser usage among visitors to a website clearly presents several layers of information, and does it very well:

When presenting information graphically, including sufficient information, and organizing it to provide both the big picture as well as individual data points, allows viewers to fully understand the subject being presented. Information-scarce design, and design that stresses graphical contrivances over content, tends to miss the forest for the trees (or vice versa), and does not invite comparison or understanding.

The Smallest Effective Difference

The smallest effective difference is the principle of weighting individual design elements only as much as is needed.

The principle comes into play most frequently with charts and other tabular information. Heavy black rules between rows and columns can distract from the data they contain, and row or column shading, which is meant to aid the eye in perceiving data, can become a distraction when overdone.

Here’s a table showing percentages of children with disabilities in various U.S. metro areas from the Annie E. Casey Foundation’s Kids Count census data site:

table: Percent of Population Ages 5 to 15 with One or More Disabilities: 2000, organized by metro area. Eerie, Pennsylvania, number 7 nationally at 9.6% is highlighted.

The table needs work in a few areas:

The manual selection highlighting is a strong feature, though. The target audience for this table is children, and nothing interests the young more than themselves. A feature that helps kids find their own region in a large table makes the data more interesting to this audience.

This next table, from Geoscience Australia, gets a little more right, but still could use some work.

table of map names, databases, and person responsible for each resource

The pale gray highlight is an excellent use of the principle of smallest effective difference. It’s just dark enough to allow the eye to accurately follow each row, but not so dark that it stands out as a design element. It serves its purpose without distracting.

However, the cell borders could use some fixing up. The white space between cells is completely unnecessary, and is only made worse by the black borders on the tops and left edges of the cells. The strong black-on-white contrast of these borders makes reading difficult — the contrast is stronger than the contrast of the text itself (except for the bold table names). This high contrast distraction makes the table appear to vibrate on the screen, and pulls the eye away from the data.

Replace both the heavy borders and the white space between cells with a narrow, pale gray line, and this table would be much more readable.

This last table, of Indian census data, despite the color choices, has a lot going for it:

table of Indian census data showing languages spoken, and number of speakers per 10,000 population

The blue-on-teal of the table title is awful, but easily fixed, and the numbered column headings serve no discernible purpose, and could be safely removed. The table also suffers from excessive color, and columns could be more narrow.

Those issues aside however, this is generally a very strong table: the data is clearly presented, and treated as the most important element of the presentation.

The principle of smallest effective difference dictates that by paying attention to line weight, contrast, and color, and we can aid the viewer’s eye in easily perceiving data, without causing unnecessary distraction.

Parallelism

The simplest, clearest way to invite the view to make comparisons among data is to show similar information close together. This is parallelism.

An example of this with which we are all familiar is a typical search engine results page.

screen shot of Google search for 'cat litter'

These pages, when done well, are masterpieces of information design:

Good search engine results pages like Google’s allow the viewer to compare a wealth of parallel information.

Toyota.com’s Model Selector tool is another example of strong parallelism:

Screen shot of Toyota's Model Selector tool

The tool shows 21 models of cars, trucks, vans, and SUVs, clearly depicting the body shape of each, in more than a half-dozen available colors. The vehicles are arranged on a well-conceived grid by vehicle type and price (note the strong use of the principle of smallest effective difference).

At a glance, the viewer can compare these 21 vehicles by appearance and cost, and consider color options.

The viewer may then mouse-over any vehicle for additional information, including MSRP, fuel-efficiency, and passenger capacity, as well as for a slightly larger graphic. If these other options are more import to the viewer, she can use the menu on the left to request a new chart with other criteria for axes. This display is highly effective.

The examples of good parallelism we’ve looked at so far compared information in the present. Naturally, we also want to compare changes in data over time and geography.

An excellent map of hummingbird migration at hummingbirds.net clearly shows the range of the journey across the eastern United States, with individual data points color-coded by month, and with individual legends by sighting date.

Map of the Eastern United States showing hummingbirds' northern migration from the south (Florida to Texas) in March to the north (from North Dakota to Maine) in May.

Note: due to its very large size I’ve shrunk the image. See the original for the full picture.

Parallels among the colored swaths, as well as among individual sightings, provide a broad and deep picture of the birds’ migration. The political boundaries between U.S. states are clear enough to provide context, but not so sharply delineated that they distract from the point of the map (a very strong example of the principle of smallest effective difference).

Effective parallelism provides the viewer with information needed to fully take in the point the data is trying to convey. The viewer is not left wondering “but what about this?” or “I wonder how that fits into this.”

Case Study: bart.gov

The subway in the San Francisco area, the Bay Area Rapid Transit (BART) system, like all major metropolitan transport, has a website with a great deal of information available. A quick look at the information design of bart.gov may help clarify any of these principles I’ve failed to explain clearly.

The Homepage

screen shot of the www.bart.gov homepage

The home page of bart.gov lacks parallelism. The Quick Planner looks useful, but if I don’t know where in the system stations are located, it’s not terribly helpful. If the information about the sports sponsorship were replaced with a system map, I could more effectively compare my options on the left with geographical information.

So, I’ll click the “System Map” link…

The System Map

screen shot of the  BARt system map from bart.gov

The BART system map, an icon of the Bay Area.

This map gets a lot right:

While it would be nice to have some other information, such as major freeways, or popular tourist spots, this map does provide a much greater degree of geographical context than metro maps in London or Tokyo (for example).

The page itself has a major problem though: where’s the trip planner we had on the home page? I’ve got the map now, but I can’t look up a schedule for my trip. These features should be on the same page.

Line Schedules

Buried under the “Stations and Schedules” menu is a Line Schedules link, and voilà:

screen shot of train line schedule form from bart.gov

A schedule lookup form with the map adjacent.

The radio button options for the desired train line could stand some improvement. A complete lack of table rules makes it difficult to correlate the round radio option with the vertical line color selection, and the legends are far away.

It’s not impossible to use, but it could be better. Here’s my suggestion:

The timetable is also in need of improvement:

screen shot of timetable from bart.gov

The station names written vertically across the top are difficult to read, especially once you scroll down towards later trains.

There are a lot of repeated numbers taking up unnecessary space; removing the unnecessary hours would trim hundreds of characters from this display.

There is no shading to guide the eye.

Here’s my improvement:

5 am6 am7 am
Richmond5:122742576:122742577:1227
El Cerito del Norte1631466:011631467:011631
El Cerito Plaza19344904193449041934
North Berkeley22375207223752072237
Dowtown Berkeley25405510254055102540
Ashby27425712274257122742
MacArthur31466:011631467:01163146

This still doesn’t solve the problem of using only color to indicate when bicycles are not permitted, but overall, it’s a little easier to read.

Final Thoughts

We’ve dealt entirely with visual representations of information. When designing for the web, it is important to remember that our work is accessible to users who can not perceive information visually (such as the googlebot and those with vision disabilities). Many excellent references already exist on how to make graphical data accessible. Proper markup of tables (lacking in my own examples here) is important. Don’t forget to do it.

Good information design makes data clear, and its interpretation readily apparent to viewers. Poor information design results in confusion, lack of usability, or worse. Good information design accessibly marked up and with text descriptions makes clear data widely consumable — which is a goal that when achieved drives understanding as well as traffic.

As responsible web professionals, our mission is to keep traffic and conversions up, while simultaneously making the web a better place. Strong, accessible information design achieves these goals.

Comments:

  1. thanks very useful!good job


    — sal    Aug 27, 04:59 AM    #
  Textile Help