Creating Perceptual Layers

Use the category links below to navigate this web site. All site pages can also be accessed with the site map.

"; } else { print ""; } else { print ""; } else { print ""; } else { print ""; } else { print ""; } else { print ""; } else { print ""; } else { print "

"; } ?> Design Process

"; } ?> Color Graphics Topics

"; } ?> Color Tool

"; } ?> Color Guidelines

"; } ?> Aerospace

"; } ?> Color Science

"; } ?> Utilities

"; } ?> Site Map

CREATING PERCEPTUAL LAYERS
On This Page: • Legibility and Clutter • Graphics for Perceptual Layers

This page discusses methods for creating perceptual layers of data in order to direct the user's attention to more important data. Good perceptual layering allows less important data to remain as context.

The concept of perceptual layers refers to a graphic scheme in which several classes (layers) of data are superimposed while retaining their different demands on the users' attention. This allows less important or less urgent data to be presented as context without detracting from the users' focus on the data that are more critical for the immediate decisions. The metaphor of transparent layers captures the sense of looking through or past other classes of data to see the one of immediate interest. Perceptual layers should not be confused with the layers of data in graphics software, which the designer may or may not choose to make perceptually distinct.

Legibility and Clutter

If legibility were the only consideration, the designer should probably give all text and symbols the same weight and luminance contrast. There is a second consideration, however, clutter. If all of the text and symbols in a complex graphic have high luminance contrast it can be hard to find the relevant information among the context information. Good perceptual layering can greatly increase the amount of information that can be simultaneously displayed by imposing perceptual order on the graphic elements.
More on Attention Management
More on Legibility.
More on Luminance Contrast.

Graphics for Perceptual Layers

There are several graphic manipulations that can be used to establish perceptual layers. The most common are brightness contrast, line weight, symbol size, and blinking and flashing. Of these only brightness contrast is directly affected by color assignments, but color design issues such as legibility and discrimination interact with the others.

Figure demonstrates use of luminance contrast to emphasize and de-emphasize text, lines, and symbols. Symbols in several shades of gray are shown on a white background and a black background.

Brightness contrast. Objects with higher brightness contrasts are more salient than those with lower contrasts. In this figure "Most Important" has the highest brightness contrast and "Least Important" the least brightness contrast. The primary physical determinant of brightness contrast is luminance contrast. Luminance contrast is more easily managed for grayscale graphics like these than for chromatic graphics. To manage luminance contrast in color graphics one must not only keep track of the coding colors for symbols and backgrounds, but also the different range of hues and saturations available at each luminance.
More on Luminance Contrast.
More on Designing with Luminance Contrast.

Line weight. Wider lines are more salient than narrower. For narrow lines this is partly due to the effect of line width on brightness contrast. For the same luminance contrast, wider lines have higher brightness contrast than narrower lines. Line width also affects color discrimination and legibility. Cartographers use line weight extensively to create perceptual layers in maps.
More on Color Discrimination and Identification.

Figure demonstrates use of line width to emphasize and de-emphasize lines. Blue lines in several widths are shown on a white background. The larger lines attract more attention than the smaller.

Image of a section of a road map demonstrates use of symbol size to emphasize and de-emphasize text and symbols. The larger text and symbols attract more attention than the smaller.

Symbol size. Larger symbols and alphanumeric characters are more salient than smaller. They usually have heavier line segments and higher brightness contrast. Small symbols are less legible and less discriminable on the basis of color. Symbol size is the main layering tool in geopolitical mapping.

Blinking and flashing. The most urgent layers of information are often segregated by temporal modulation. Blinking and flashing are the heavy artillery of attention management--so effective at drawing the users' attention that they must be used rarely and with extreme care.

Flashing is not an all-or-none manipulation. By changing temporal frequency and depth-of-modulation the effect can be as subtle as the click of a car's turn signal or as demanding as the blare of a horn.
More on Blinking, Flashing, and Temporal Response.

Graph illustrates several temporal waveforms differing in frequency and depth of modulation. Figure illustrates th parameters that can be manipulated to vary the salience of a flashing graphic object.