Hack22.Depth Matters

Hack 22. Depth Matters

Our perception of a 3D world draws on multiple depth cues as diverse as atmospheric haze and preconceptions of object size. We use all together in vision and individually in visual design and real life.

Our ability to see depth is an amazing feature of our vision. Not only does depth make what we see more interesting, it also plays a crucial, functional role. We use it to navigate our 3D world and can employ it in the practice of visual communication design to help organize what we see through depth's ability to clarify through separation¹.

Psychologists call a visual trigger that gives us a sense of depth a depth cue. Vision science suggests that our sense of depth originates from at least 19 identifiable cues in our environment. We rarely see depth cues individually, since they mostly appear and operate in concert to provide depth information, but we can loosely organize them together into several related groups:

Binocular cues (stereoscopic depth, eye convergence)

With binocular (two-eye) vision, the brain sees depth by comparing angle differences in the images from each eye. This type of vision is very important to daily life (just try catching a ball with one eye closed), but there are also many monocular (single-eye) depth cues. Monocular cues have the advantage that they are easier to employ for depth in images on flat surfaces (e.g., in print and on computer screens).

Perspective-based cues (size gradient, texture gradient, linear perspective)

The shape of a visual scene gives cues to the depth of objects within it. Perspective lines converging/diverging or a change in the image size of patterns that we know to be at a constant scale (such as floor tile squares) can be used to inform our sense of depth.

Occlusion-based cues (object overlap, cast shadow, surface shadow)

The presence of one object partially blocking the form of another and the cast shadows they create are strong cues to depth. See [Hack #20] for examples.

Focus-based cues (atmospheric perspective, object intensity, focu

Greater distance usually brings with it a number of depth cues associated with conditions of the natural world, such as increased atmospheric haze and physical limits to the eye's focus range. We discuss one of these cues, object intensity, next.

Motion-based cues (kinetic depth, a.k.a. motion parallax)

As you move your head, objects at different distances move at different relative speeds. This is a very strong cue and is also the reason a spitting cobra sways its head from side to side to work out how far away its prey is from its position.

There isn't room to discuss all of these cues here, so we'll look in detail at just two depth cues: object intensity and known size (a cue that is loosely connected to the prespective-based cue family). More information on depth cues and their use in information design can be found in the references at the end of this hack.

2.11.1. Object Intensity

Why do objects further away from us appear to be faded or faint? Ever notice that bright objects seem to attract our attention? It's all about intensity.

If we peer into the distance, we notice that objects such as buildings or mountains far away appear less distinct and often faded compared to objects close up. Even the colors of these distant objects appear lighter or even washed out. The reason for this is something psychologists call atmospheric perspective or object intensity. It is a visual cue our minds use to sense depth; we employ it automatically as a way to sort and prioritize information about our surroundings (foreground as distinct from background).

Designers take advantage of this phenomenon to direct our attention by using bold colors and contrast in design work. Road safety specialists make traffic safety signs brighter and bolder in contrast than other highway signs so they stand out, as shown in Figure 2-14. You too, in fact, employ the same principle when you use a highlighter to mark passages in a book. You're using a depth cue to literally bring certain text into the foreground, to prioritize information in your environment.

Figure 2-14. Important street signs often use more intense colors and bolder contrast elements so they stand out from other signage²

2.11.1.1 In action

Close one eye and have a look at the two shaded blocks side by side in Figure 2-15. If you had to decide which block appears to be visually closer, which would you choose? The black block seems to separate and appear forward from the gray block. It is as if our mind wants it to be in front.

Figure 2-15. Which block appears closer?

2.11.1.2 How it works

The reason for this experience of depth, based on light-dark value differences, is atmospheric perspective and the science is actually quite simple. Everywhere in the air are dust or water particles that partially obscure our view of objects, making them appear dull or less distinct. Up close, you can't see these particles, but as the space between you and an object increases, so do the numbers of particles in the air. Together these particles cause a gradual haze to appear on distant objects. In the daytime, this haze on faraway objects appears to be colored white or blue as the particles scatter the natural light. Darker objects separate and are perceived as foreground and lighter ones as background. At night, the effect is the same, except this time the effect is reversed: objects that are lit appear to be closer, as shown in Figure 2-16. So as a general rule of thumb, an object's intensity compared to its surroundings helps us generate our sense of its position. Even colors have this same depth effect because of comparative differences in their value and chroma. The greater the difference in intensity between two objects, the more pronounced the sense of depth separation between them.

Figure 2-16. At night, lit objects appear closer

So how does intensity relate to attention? One view is that we pay more attention to objects that are closer, since they are of a higher concern to our physical body. We focus on visually intense objects because their association with the foreground naturally causes us to assign greater importance to them. Simply put, they stand out in front.

2.11.1.3 In real life

Since weather can affect the atmosphere's state, it can influence perceived depth: the more ambient the air particles, the more acute the atmospheric perspective. Hence, a distance judged in a rainstorm, for example, will be perceived as further than that same distance judged on a clear, sunny day.

2.11.2. Known Size

How do we tell the distance in depth between two objects if they aren't the same?

We all know that if you place two same-size objects at different distances and look at them both, the object further away appears smaller. But have you ever been surprised at an object's size when you see it for the first time from afar and discover it is much bigger up close? Psychologists call this phenomenon size gradient and known size. Size gradient states that as objects are moved further away, they shrink proportionally in our field of view. From these differences in relative size, we generate a sense of depth. This general rule holds true, but our prior knowledge of an object's size can sometime trip us up because we use the known size of an object (or our assumptions of its size) to measure the relative size of objects we see.

Being aware of a user's knowledge of subjects and objects is key if comparative size is an important factor. Many visual communication designers have discovered the peril of forgetting to include scale elements in their work for context reference. A lack of user-recognizable scale can render an important map, diagram, or comparative piece completely useless. An unexpected change in scale can disorientate a useror, if employed right, can help grab attention.

2.11.2.1 In action

Have a look at the mouse and elephant in Figure 2-17. We know about their true relative sizes from our memory, even though the mouse appears gigantic in comparison.

Figure 2-17. An elephant and a mouseyou know from memory that elephants are bigger

But what about Figure 2-18, which shows a mouse and a zerk (a made-up animal). Since we've never seen a zerk before, do we know which is truly bigger or do we assume the scale we see is correct?

Figure 2-18. A zerk and a mousesince a zerk is made up, you can use only comparison with the mouse to judge size

2.11.2.2 How it works

Our knowledge of objects and their actual size plays a hidden role in our perception of depth. Whenever we look at an object, our mind recalls memories of its size, shape, and form. The mind then compares this memory to what we see, using scale to calculate a sense of distance. This quick-and-dirty comparison can sometimes trip us however, especially when we encounter something unfamiliar. One psychologist, Bruce Goldstein, offers a cultural example of an anthropologist who met an African bushman living in dense rain forest. The anthropologist led the bushman out to an open plain and showed him some buffalo from afar. The bushman refused to believe that the animals were large and said they must be insects. But when he approached them up close, he was astounded as they appeared to grow in size, and attributed it to magic. The dense rain forest and its limitations on viewing distance, along with the unfamiliar animal, had distorted his ability to sense scale.

2.11.2.3 In real life

Some designers have captured this magic to their benefit. The movie industry has often taken our assumptions of known size and captivated us by breaking them, making the familiar appear monstrous and novel. For example, through a distortion of scale and juxtaposition, we can be fooled into thinking that 50-foot ants are wreaking havoc on small towns and cities.

2.11.3. End Notes

1. Bardel, W. (2001). "Depth Cues for Information Design." Thesis, Carnegie Mellon University (http://www.bardel.info/downloads/Depth_cues.pdf).

2. Street sign symbols courtesy of Ultimate Symbol Inc. (http://www.ultimatesymbol.com).

2.11.4. See Also

• Goldstein, E. B. (1989). Sensation & Perception. Pacific Grove: Brooks/Cole Publishing.

• Ware, C. (1999). Information Visualization. London: Academic Press.

• Tufte, E. (1999). Envisioning Information. Cheshire: Graphics Press.

• Braunstein, M. L. (1976). Depth Perception Through Motion. London: Academic Press.

• Reagan, D. (2000). Human Perception of Objects. Sunderland: Sinauer Assoc.

William Bardel