Displaying only selected data provides clarity and enhances discovery.

Problem

You need to display quantitative information about an image, such as calories of foods, carbon dioxide output per country, or the number of voters per state.

Solution

Display a fixed key alongside the image, and display or highlight relevant data as the visitor points at the image, using either of two methods:

1. Highlight key: If the values are either present or not-present, display a key with names or icons, and flicker the icons on and off as the visitor points at the image. For example, to identify the paints used in a painting, a key containing a series of pigment names (ultramarine, ochre, charcoal, etc.) are displayed next to the image of a painting. As the user glides the cursor over the painting, the pigments in the legend flicker on and off, indicating which paints were used.
2. Dynamic graph: If there are varying amounts of a given value, such as the nutritional content of a food item, animated bars next to the words, “fat,” “sugar,” and “protein” indicate the amounts of different components in the food.

Discussion

This technique provides the visitor with clarity via simplicity. By showing the visitor only partial selections of the overall data, he or she feels less overwhelmed. The user also has a sense of discovery, since he or she needs to point at an item to discover its values. Finally, it allows the user to compare regions in an image.

Details-on-demand expands from a small collection of objects, such as insects in a database, to reveal more about their variables. This shows data on an as-needed basis, preventing clutter and allowing more of the variables to be mapped to the visualization.