1. This chapter is about the perceptual and cognitive structure of
space taking into account both how depth is perceived and
the costs of navigation to access information.
p.87
3. DEPTH PERCEPTION AND CUE THEORY
Depth cue
The information available to the eye and brain from the towards-
away dimension.
2.5-dimension
0.5—towards-away information.
p.89-90
4. The choice of designer
• 3D or 2D?
• Which depth cues to apply?
p.91
5. Occlusion
Objects near to us block or visually occlude objects
farther away.
Occlusion
• The strongest depth cue.
• Both a method and a metaphor for rank-ordering information.
• Partially occluded objects can still be identified.
p.91
6. Perspective
Size gradients: More distant objects smaller
• A visual metaphor for the relative importance of
different information objects.
• Advantage: Less important information takes
less space
p.92
7. Perspective
Texture gradients: There is a reduction in size
and increase in density of texture elements with
distance.
• The texture elements on a ground plane provide a size
reference for objects
• Unfortunately, fine textures are usually not reproduced on
computer displays
p.92
8. Linear Perspective
Projections of parallel lines converge on
the picture plane.
A grid of lines
• provide a reference plane for judging the three-
dimensional layout of objects.
• Provide a ruler for visual queries aimed at
judging the sizes of objects.
p.92
9. Cast shadows
The shadow cast information about distance.
The height of the two cyan balls above the checkerboard can be
seen from the shadows.
The magenta balls, having no shadows, have nothing to tie them
to the ground plane.
p.92
10. Height on picture plane
Objects higher up in the visual field farther
away.
This simple method is often used in non-perspective (sometimes
this is called a parallel or axono-metric projection.)
p.92
11. Shading
The surfaces of objects reflect more or less light
depending on how they are oriented towards the light
source.
p.93
12. Depth of focus
Objects that are farther away or nearer are blurred.
This effect provides inexact depth information.
Sharp images more readily attract the eye than blurred ones.
Degree of blur can be used as a design technique to direct
the attention of a viewer.
p.93
13. Reference to nearby known objects
• Objects of known size provide a reference
against which other objects are judged.
• Perspective cue only give cues to relative
size, but with a reference object absolute
size can be judged.
The pink cow has been placed next to a boulder of
Martian rocks to provide a size reference.
Image courtesy of Kurt Schwehr and NASA.
p.93
14. Degree of contrast
The contrast between an object and its background
is reduced as distance increases.
Most atmospheric contrast effects occur when
considerable distances.
Designers can reduce contrast to exaggerate atmospheric
contrast and create an enhanced sense of depth.
Reducing contrast can be used to direct attention away
p.93
15. STEREOSCOPIC DEPTH
Stereoscopic depth perception
• The ability of using the small differences in the images in the two
eyes to extract distance information.
Stereoscopic vision
• Optimal for visually guiding our hands as we reach for nearby
objects.
• It works best in making judgments of the relative distances of nearby
objects.
p.94
16. STRUCTURE FROM MOTION
Structure from motion
• Non-pictorial
• More useful and powerful than stereoscopic depth
• Provides better depth information than stereopsis
p.95
17. 2.5D DESIGN
Chief tenets:
• Depth cues should be used selectively to support design goals.
• Objects should be laid out with minimum occlusion.
• Ensure critical information is not occluded.
• Joints between compound multipart objects should be made
clearly visible.
p.95
18. • Make clear spatial relationships, such as on top
of, attached to, and inside of.
• Depth should be minimized, but when there are
different depths the layout should be carefully
designed to make relative distances clear.
• Display text in the image plane. Text that is
slanted in perspective views is harder to read.
• Give common views of objects for rapid
identification.
p.96
19. An example—
human digestive system.
• The layout is almost entirely in the picture plane.
• The connections between components are made very clear.
• There is occasional occlusion but it never destroys object identity.
(Image from David Dickson, illustrator.www. daviddicksonillustration.com.)
p.96
20. HOW MUCH OF THE THIRD DIMENSION?
In determining whether a three-dimensional or two-dimensional
design, appropriate is the nature of what is to be displayed.
• The fact that we do not perceive three dimensions.
• Getting around in three dimensions is much harder than
navigation in two dimensions.
• It is useful to mix two-dimensional design elements with three-
dimensional design elements.
• A primarily two-dimensional design with a judicious use of depth
can be useful.
• Many three-dimensional interfaces actually have two-dimensional
controls placed in the margin.
p.97
21. It is a good example of the application of 2.5-dimensional design principles
to the visualization of a complex business system.
• Careful use of occlusion, height on the picture plane, and layering.
• No important objects are obscured through occlusion.
• All the important junctions in the information network are clearly visible.
p.98
22. The small inset perspective view of the
whale combined with an overview map
allows for details to be understood in a
spatial context.
• When designing an interface to a large data space, a two-
dimensional overview map should be provided in combination with
one or more perspective views showing details.
• The two-dimensional overview map will be easier to use if it has
the same general orientation as the magnified image.
p.99
23. AFFORDANCE
The main thread of this chapter—the connections between
perception and action.
• Developed by the psychologist James Gibson in the 1960s
• Gibson started a revolution in the study of perception by claiming that
we perceive physical affordances for actions, and not images on the
retina
Cognitive affordances are readily perceived possibilities for action.
p.99
24. AFFORDANCE
• Developed by the psychologist James Gibson in the 1960s
• Gibson started a revolution in the study of perception by claiming that we
perceive physical affordances for actions, and not images on the retina
p.99
25. • A pedestrian perceives the places that afford safe walking.
• A driver perceives the places that afford vehicle navigation.
• Buildings provide the negative affordances in that they restrict travel.
On the other hand, if a pedestrian’s goal is shopping for shoes, then
affordances relating to the likely presence of shoe stores will be perceived.
p.99
26. Workbenches and kitchens are structured to
afford good support for manual construction tasks.
(Image courtesy of Joshua Eckels. josh@jeckels.com.)
p.100
27. This office space is well structured for cognitive work.
• The computer is the nearest object to the worker and at the focus of attention.
• The most important information close to hand and near the tops of piles.
• Less frequently accessed sources of information, such as books, are more
distant.
The work space has affordances structured for efficient access to information.
p.100
28. SPACE TRAVERSAL AND COGNITIVE COSTS
Moving through space can be regarded as a cognitive cost.
• We weigh the time to go to the library against the time to access
information online, taking into account the relative quality of information
we are likely to get
There are cognitive tradeoffs other than time to consider.
• We choose to travel by train, as opposed to driving a car, because we
can read and write while on the train but not in the car.
In this light, it is useful to review the basic costs of some common
modes of information access.
A list of rough values for various costs is set out in the following table.
p.103
30. SPACE TRAVERSAL AND COGNITIVE COSTS
In this way, the efficiency of one design can be compared against another.
The table is far too rough an approximation.
It is intended as food for thought.
Pure cognitive efficiency is always something that should be taken into
account.
p.104
31. Part of the extraordinary image
sequence created by Charles and
Ray Eames, showing a spiraling in
from space to a point on earth.
The advent of high-performance three-dimensional computer
graphics has led to the invention of navigation methods that are non-
metaphoric in that they are not based on real-world interactions.
p.105
32. CONCLUSION
The main point of this chapter
• The functional aesthetics of space are related to the cost
of accessing information.
Less information being rapidly available in the towards-away
(depth) direction than the sideways and up-down directions.
Depth is perceived in ways that are radically different from
the way patterns in the image plane are perceived.
The set of design principles that takes the space-time structure
of perception into account is called 2.5-dimension design.
p.105
33. CONCLUSION
There is no need to use depth cues all together in a consistent
way unless visual realism is, in and of itself, a design goal.
The piecemeal use of depth cues is part of 2.5-dimension design
The primary design consideration
• The layout of objects
• Patterns as they appear in the image plane
p.106