SlideShare une entreprise Scribd logo
1  sur  33
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
p.88
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
The choice of designer
• 3D or 2D?
• Which depth cues to apply?
                               p.91
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
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
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
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
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
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
Shading
          The surfaces of objects reflect more or less light
          depending on how they are oriented towards the light
          source.




                                                          p.93
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
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
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
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
STRUCTURE FROM MOTION

  Structure from motion
  • Non-pictorial
  • More useful and powerful than stereoscopic depth
  • Provides better depth information than stereopsis




                                                        p.95
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
• 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
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
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
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
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
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
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
• 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
Workbenches and kitchens are structured to
afford good support for manual construction tasks.

(Image courtesy of Joshua Eckels. josh@jeckels.com.)




                                                       p.100
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
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
p.104
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
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
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
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

Contenu connexe

En vedette

G1 c2 王柔堯_吳思儀_張緹葳_丁星顥
G1 c2 王柔堯_吳思儀_張緹葳_丁星顥G1 c2 王柔堯_吳思儀_張緹葳_丁星顥
G1 c2 王柔堯_吳思儀_張緹葳_丁星顥visualization, ID, NCKU
 
G1 b2 丁星顥吳思儀王柔堯張緹葳
G1 b2 丁星顥吳思儀王柔堯張緹葳G1 b2 丁星顥吳思儀王柔堯張緹葳
G1 b2 丁星顥吳思儀王柔堯張緹葳visualization, ID, NCKU
 
G1 w2 吳思儀_王柔堯_張緹葳_丁星顥
G1 w2 吳思儀_王柔堯_張緹葳_丁星顥G1 w2 吳思儀_王柔堯_張緹葳_丁星顥
G1 w2 吳思儀_王柔堯_張緹葳_丁星顥visualization, ID, NCKU
 
G1 b4 丁星顥王柔堯吳思儀張緹葳
G1 b4 丁星顥王柔堯吳思儀張緹葳G1 b4 丁星顥王柔堯吳思儀張緹葳
G1 b4 丁星顥王柔堯吳思儀張緹葳visualization, ID, NCKU
 
G1 b1 王柔堯_吳思儀_張緹葳_丁星顥
G1 b1 王柔堯_吳思儀_張緹葳_丁星顥G1 b1 王柔堯_吳思儀_張緹葳_丁星顥
G1 b1 王柔堯_吳思儀_張緹葳_丁星顥visualization, ID, NCKU
 
YDN CAS Openapi at NCKU
YDN CAS Openapi at NCKUYDN CAS Openapi at NCKU
YDN CAS Openapi at NCKUYDN Taiwan
 
Season review 2009 2010
Season review 2009 2010Season review 2009 2010
Season review 2009 2010sgmboro
 
G1 b2 王柔堯_吳思儀_張緹葳_丁星顥
G1 b2 王柔堯_吳思儀_張緹葳_丁星顥G1 b2 王柔堯_吳思儀_張緹葳_丁星顥
G1 b2 王柔堯_吳思儀_張緹葳_丁星顥visualization, ID, NCKU
 
G4 c2 何元杰陳禹安陳虹誼鍾承庭
G4 c2 何元杰陳禹安陳虹誼鍾承庭G4 c2 何元杰陳禹安陳虹誼鍾承庭
G4 c2 何元杰陳禹安陳虹誼鍾承庭visualization, ID, NCKU
 
G1 w4 吳思儀_王柔堯_張緹葳_丁星顥
G1 w4 吳思儀_王柔堯_張緹葳_丁星顥G1 w4 吳思儀_王柔堯_張緹葳_丁星顥
G1 w4 吳思儀_王柔堯_張緹葳_丁星顥visualization, ID, NCKU
 
那些 Functional Programming 教我的事
那些 Functional Programming 教我的事那些 Functional Programming 教我的事
那些 Functional Programming 教我的事Wen-Tien Chang
 
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2Wen-Tien Chang
 

En vedette (12)

G1 c2 王柔堯_吳思儀_張緹葳_丁星顥
G1 c2 王柔堯_吳思儀_張緹葳_丁星顥G1 c2 王柔堯_吳思儀_張緹葳_丁星顥
G1 c2 王柔堯_吳思儀_張緹葳_丁星顥
 
G1 b2 丁星顥吳思儀王柔堯張緹葳
G1 b2 丁星顥吳思儀王柔堯張緹葳G1 b2 丁星顥吳思儀王柔堯張緹葳
G1 b2 丁星顥吳思儀王柔堯張緹葳
 
G1 w2 吳思儀_王柔堯_張緹葳_丁星顥
G1 w2 吳思儀_王柔堯_張緹葳_丁星顥G1 w2 吳思儀_王柔堯_張緹葳_丁星顥
G1 w2 吳思儀_王柔堯_張緹葳_丁星顥
 
G1 b4 丁星顥王柔堯吳思儀張緹葳
G1 b4 丁星顥王柔堯吳思儀張緹葳G1 b4 丁星顥王柔堯吳思儀張緹葳
G1 b4 丁星顥王柔堯吳思儀張緹葳
 
G1 b1 王柔堯_吳思儀_張緹葳_丁星顥
G1 b1 王柔堯_吳思儀_張緹葳_丁星顥G1 b1 王柔堯_吳思儀_張緹葳_丁星顥
G1 b1 王柔堯_吳思儀_張緹葳_丁星顥
 
YDN CAS Openapi at NCKU
YDN CAS Openapi at NCKUYDN CAS Openapi at NCKU
YDN CAS Openapi at NCKU
 
Season review 2009 2010
Season review 2009 2010Season review 2009 2010
Season review 2009 2010
 
G1 b2 王柔堯_吳思儀_張緹葳_丁星顥
G1 b2 王柔堯_吳思儀_張緹葳_丁星顥G1 b2 王柔堯_吳思儀_張緹葳_丁星顥
G1 b2 王柔堯_吳思儀_張緹葳_丁星顥
 
G4 c2 何元杰陳禹安陳虹誼鍾承庭
G4 c2 何元杰陳禹安陳虹誼鍾承庭G4 c2 何元杰陳禹安陳虹誼鍾承庭
G4 c2 何元杰陳禹安陳虹誼鍾承庭
 
G1 w4 吳思儀_王柔堯_張緹葳_丁星顥
G1 w4 吳思儀_王柔堯_張緹葳_丁星顥G1 w4 吳思儀_王柔堯_張緹葳_丁星顥
G1 w4 吳思儀_王柔堯_張緹葳_丁星顥
 
那些 Functional Programming 教我的事
那些 Functional Programming 教我的事那些 Functional Programming 教我的事
那些 Functional Programming 教我的事
 
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2
 

Similaire à W10 visual space and time

Intro to data visualization
Intro to data visualizationIntro to data visualization
Intro to data visualizationJan Aerts
 
Surface Normal Prediction using Hypercolumn Skip-Net & Normal-Depth
Surface Normal Prediction using Hypercolumn Skip-Net & Normal-DepthSurface Normal Prediction using Hypercolumn Skip-Net & Normal-Depth
Surface Normal Prediction using Hypercolumn Skip-Net & Normal-DepthChinghang chen
 
Photo composition
Photo compositionPhoto composition
Photo compositionTara Neff
 
P.maria sheeba 15 mco010
P.maria sheeba 15 mco010P.maria sheeba 15 mco010
P.maria sheeba 15 mco010W3Edify
 
Psychophysics for interface
Psychophysics for interfacePsychophysics for interface
Psychophysics for interfaceBrock Dubbels
 
Rendering Algorithms.pptx
Rendering Algorithms.pptxRendering Algorithms.pptx
Rendering Algorithms.pptxSherinRappai
 

Similaire à W10 visual space and time (9)

Intro to data visualization
Intro to data visualizationIntro to data visualization
Intro to data visualization
 
Surface Normal Prediction using Hypercolumn Skip-Net & Normal-Depth
Surface Normal Prediction using Hypercolumn Skip-Net & Normal-DepthSurface Normal Prediction using Hypercolumn Skip-Net & Normal-Depth
Surface Normal Prediction using Hypercolumn Skip-Net & Normal-Depth
 
Photo composition
Photo compositionPhoto composition
Photo composition
 
Depth & space
Depth & spaceDepth & space
Depth & space
 
3 D texturing
 3 D texturing 3 D texturing
3 D texturing
 
P.maria sheeba 15 mco010
P.maria sheeba 15 mco010P.maria sheeba 15 mco010
P.maria sheeba 15 mco010
 
Psychophysics for interface
Psychophysics for interfacePsychophysics for interface
Psychophysics for interface
 
Visual realism
Visual realismVisual realism
Visual realism
 
Rendering Algorithms.pptx
Rendering Algorithms.pptxRendering Algorithms.pptx
Rendering Algorithms.pptx
 

Plus de visualization, ID, NCKU

G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧
G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧
G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧visualization, ID, NCKU
 
G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡visualization, ID, NCKU
 
G4 c1 何元杰陳禹安鍾承庭陳虹誼
G4 c1 何元杰陳禹安鍾承庭陳虹誼G4 c1 何元杰陳禹安鍾承庭陳虹誼
G4 c1 何元杰陳禹安鍾承庭陳虹誼visualization, ID, NCKU
 
G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪
G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪
G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪visualization, ID, NCKU
 
G5 c1 佳穗、若瑄、凱駿、怡凡_
G5 c1 佳穗、若瑄、凱駿、怡凡_G5 c1 佳穗、若瑄、凱駿、怡凡_
G5 c1 佳穗、若瑄、凱駿、怡凡_visualization, ID, NCKU
 
G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧
G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧
G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧visualization, ID, NCKU
 
G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡
G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡
G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡visualization, ID, NCKU
 
G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡visualization, ID, NCKU
 
G1 b3 王柔堯、吳思儀、張緹葳、丁星顥
G1 b3 王柔堯、吳思儀、張緹葳、丁星顥G1 b3 王柔堯、吳思儀、張緹葳、丁星顥
G1 b3 王柔堯、吳思儀、張緹葳、丁星顥visualization, ID, NCKU
 

Plus de visualization, ID, NCKU (20)

G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧
G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧
G3 c2 許哲豪_孫佳筠_吳典陽_黃玟慧
 
G2 c2 許瑋芸_張耀仁
G2 c2 許瑋芸_張耀仁G2 c2 許瑋芸_張耀仁
G2 c2 許瑋芸_張耀仁
 
G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 c2 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
 
G6 c1 雅筑_怡嘉_昱仁
G6 c1 雅筑_怡嘉_昱仁G6 c1 雅筑_怡嘉_昱仁
G6 c1 雅筑_怡嘉_昱仁
 
Pasta
PastaPasta
Pasta
 
G4 c1 何元杰陳禹安鍾承庭陳虹誼
G4 c1 何元杰陳禹安鍾承庭陳虹誼G4 c1 何元杰陳禹安鍾承庭陳虹誼
G4 c1 何元杰陳禹安鍾承庭陳虹誼
 
G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪
G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪
G3 c1-吳典陽 黃玟慧-孫佳筠_許哲豪
 
G2 c1 張耀仁_許瑋芸
G2 c1 張耀仁_許瑋芸G2 c1 張耀仁_許瑋芸
G2 c1 張耀仁_許瑋芸
 
G5 c1 佳穗、若瑄、凱駿、怡凡_
G5 c1 佳穗、若瑄、凱駿、怡凡_G5 c1 佳穗、若瑄、凱駿、怡凡_
G5 c1 佳穗、若瑄、凱駿、怡凡_
 
1122 雅筑怡嘉昱仁
1122 雅筑怡嘉昱仁 1122 雅筑怡嘉昱仁
1122 雅筑怡嘉昱仁
 
1206 雅筑怡嘉昱仁
1206 雅筑怡嘉昱仁1206 雅筑怡嘉昱仁
1206 雅筑怡嘉昱仁
 
G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧
G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧
G3 b4-許哲豪 孫佳筠-吳典陽_黃玟慧
 
G2 b4 許瑋芸張耀仁
G2 b4 許瑋芸張耀仁G2 b4 許瑋芸張耀仁
G2 b4 許瑋芸張耀仁
 
G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡
G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡
G5 b4-徐佳穗 劉若瑄-鄭凱駿_鄧怡凡
 
G2 b3 許瑋芸、張耀仁
G2 b3 許瑋芸、張耀仁G2 b3 許瑋芸、張耀仁
G2 b3 許瑋芸、張耀仁
 
G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
G5 b3 徐佳穗_劉若瑄_鄭凱駿_鄧怡凡
 
G4 b3 庭安杰虹
G4 b3 庭安杰虹G4 b3 庭安杰虹
G4 b3 庭安杰虹
 
G2 b3 許瑋芸、張耀仁
G2 b3 許瑋芸、張耀仁G2 b3 許瑋芸、張耀仁
G2 b3 許瑋芸、張耀仁
 
G1 b3 王柔堯、吳思儀、張緹葳、丁星顥
G1 b3 王柔堯、吳思儀、張緹葳、丁星顥G1 b3 王柔堯、吳思儀、張緹葳、丁星顥
G1 b3 王柔堯、吳思儀、張緹葳、丁星顥
 
G6 b3 雅筑怡嘉昱仁
G6 b3 雅筑怡嘉昱仁G6 b3 雅筑怡嘉昱仁
G6 b3 雅筑怡嘉昱仁
 

W10 visual space and time

  • 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
  • 29. p.104
  • 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