Results tagged “visual thinking”

Web Browsers and Navigation

My PSYC579 essay on Web Browsers and Navigation (pdf) (lazy to display it in html format).

Scene Perception

My presentation on scene perception
Juggling

  1. Introduction to Scene Perception

  2. Theories of Scene Perception
    • Coherence Theory
    • Virtual Representation
    • Triadic Architecture
  3. Application to visual design
    • Visual Transitions
    • Attentional Coercion

Download [pdf] notes

References

  1. BRADFORD PALEY, W. Illustrative interfaces: building special-purpose interfaces with art techniques and brain science ?ndings. In Smart Graphics (2003), Springer, pp. 145-166.
  2. PYLYSHYN, Z. W. Visual indexes, preconceptual objects, and situated vision. Cognition 80, 1-2 (2001), 127 - 158. Objects and Attention.
  3. RENSINK, R. A. The dynamic representation of scenes. Visual Cognition 7 (1January 2000).
  4. TRAFTON, J. G., KIRSCHENBAUM, S. S., TSUI, T. L., MIYAMOTO, R. T. , BALLAS, J . A. , AND RAYMOND, P. D. Turning pictures into numbers: extracting and generating information from complex visualizations. International Journal of Human-Computer Studies 53, 5 (2000), 827 - 850.
  5. TREISMAN, A . , AND GORMICAN, S. Feature analysis in early vision: Evidence from search asymmetries. Psychological Review 95, 1 (1988), 15 - 48.

Icon Design

1. Introduction

In this essay, I am going to discuss some aspects of visual perceptual mechanisms careful application of which can support effective icon design and assist visual search in Graphical User Interfaces: simplicity principle to facilitate visual attention, Gestalt principles for perceptual organization and usage of color as preattentive feature.

2 Perceptual Mechanisms

2.1 Visual Attention: Simplicity

The graphical user interface includes many situations where the user's attention must be guided [7]. One of these situations would be visual search in icons, which may take essential time in tasks on different visual displays. Therefore, factors that may possibly slow down visual search should be taken into consideration [6].

OOne of these factors was found to be icon complexity: "the more complex icons are the longer search times on an interface is likely to be" [5]. Icons are regarded as complex if they contain a lot of details, and simple if only few elements are used [8]. Reducing its formal and conceptual elements to minimum supports simplicity principle of design. Thus, in addition to aesthetic advantages of applying this principle for icons, the functional benefit would be optimizing search time [7]. For example, there are two styles for the "previous" button design in Figure 1. If the goal is to improve visual search performance, and the target group is not children that do not mind spending time exploring the system, then it is advised to use type of design such as the one on the right. [3]

The left icon is more complicated than the right.
Figure 1: The left icon is more complicated than the right. [3]

2.2 Perceptual Organization: Gestalt Principles

Perceptual organization is effectively described by Gestalt principles [12] [10]. The principles identify many different factors that regulate which visual elements are perceived as going together in groups [10]. In visual search, if perceptually grouped items are accepted together, the search can be performed within the group. In other words, the grouping of items reduces the number of items to be searched [9].

In addition to the powerful proximity principle, that states that things that are close together are perceptually grouped together, similarity principle applied to icons provides consistent visual appearance to the icons of the same nature and users would naturally group them together. [2]. Features such as color, line thickness and structure can be used to keep icons consistently within the same icon group. See Figure 2 for an example of grouping of icons using Gestalt laws.

Search query for the word
Figure 2: Grouping of icons through Proximity and Similarity principles in Grasshopper software [1]. There are three groups: "Boolean", "Domain" and "Operators"; the last two have subgroups. All three groups use different designs elements and positioned in groups of 3-4 icons. Color is used in icons of the "Domain" group.

2.3 Color Perception: Preattentive feature

It has been concluded by numerous researchers, that all the components of a Graphical User Interface, including icons, should be designed in monochrome first, and then the color can be applied. Strong color with high saturation may be effective in small regions (up to 2 mm in diameter), but should be avoided in large regions [4]. Design of an effective icon within the limitations of a small area of pixels requires clarity, simplicity, and careful consideration of what the user will see at the usual viewing distance. [4]

Color is an element that is preattentively processed and "pops out" [12] when used as "unique feature" [11]. Thus, color should be the last element added to icons design, and then used only minimally to reinforce symbolism and guide users' attention [4]. Figure 2 provides an example of effective color application.

3. Conclusion

Knowledge of human visual perceptual mechanisms can provide an effective implementation in the field of icon design. In this essay, I have presented how understanding of visual attention, perceptual organization and color perception and careful application of some related principles can improve visual search for icons in Graphical User Interfaces.

References

  1. Grasshopper, generative modeling for rhino. http://www. grasshopper3d.com/.
  2. CHANG, D., AND NESBITT, K. V. Developing gestalt-based design guidelines for multi-sensory displays. In Proceedings of the 2005 NICTA-HCSNet Multimodal User Interaction Workshop Volume 57 (Darlinghurst, Australia, Australia, 2006), MMUI '05, Australian Computer Society, Inc., pp. 9-16.
  3. HUANG, S.-M., SHIEH, K.-K., AND CHI, C.-F. Factors affecting the design of computer icons. International Journal of Industrial Ergonomics 29, 4 (2002), 211 - 218.
  4. MACDONALD, L. Using color effectively in computer graphics. Computer Graphics and Applications, IEEE 19, 4 (1999), 20 -35.
  5. MCDOUGALL, S., FORSYTHE, A., ISHERWOOD, S., PETOCZ, A., REPPA, I., AND STEVENS, C. The use of multimodal representation in icon interpretation. In Proceedings of the 8th International Conference on Engineering Psychology and Cognitive Ergonomics: Held as Part of HCI International 2009 (Berlin, Heidelberg, 2009), EPCE '09, Springer-Verlag, pp. 62-70.
  6. MCDOUGALL, S., TYRER, V., AND FOLKARD, S. Searching for signs, symbols, and icons: Effects of time of day, visual complexity, and grouping. Journal of Experimental Psychology: Applied 12, 2 (2006), 118 - 128.
  7. MULLET, K., AND SANO, D. Designing visual interfaces: communication oriented techniques. Prentice-Hall, Inc., Upper Saddle River, NJ, USA, 1995.
  8. NG, A. W. Y., AND CHAN, A. H. S. Visual and cognitive features on icon effectiveness. Lecture Notes in Engineering and Computer Science 2169 (2008), 1856-1859.
  9. NIEMELA, M. Visual search for grouped versus ungrouped icons in a computer interface. Human Factors: The Journal of the Human Factors and Ergonomics Society 42 (Winter 2000), 630-635(6).
  10. PALMER, S. E. Vision Science: Photons to Phenomenology, vol. 2. MIT Press, 1999.
  11. RENSINK, R. Human Attention in Digital Environments. Cambridge: University Press, 2011, ch. The Management of Visual Attention in Graphic Displays, p. 40.
  12. WARE, C. Information Visualization: Perception for Design. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA, 2004.

Visual Attention

1. Introduction

Visual attention is a selective visual process, required because the brain has a limited information processing capacity [6]. The theoretical mechanism that explains how certain features "pop out" from the surrounding design is called preattentive processing [5]. Understanding this can help us design effective visual displays and get users to react to something before they actually consciously know that it exists [3].

The most straightforward application of processing is highlighting [5]. It can be achieved by various techniques, such as adjusting lighting level, using featural cues, creating configural focus, positioning at centres of gravity and reducing visual clutter [4].

In the following sections, I am going to discuss three examples of how knowledge of visual attention is effectively implemented in three design areas: user interface of a stock exchange system, "search mode" design in a text editor and images presentation in websites.

2 Visual Attention in three Design Areas

2.1 User Interface of a stock exchange system

New York Stock Exchange system interface screenshot.

In "Interface and Mind" white paper, Paley introduces visual display design for a handheld device, to be used on the floor of the New York Stock Exchange (see Figure 1) [3]. In order to understand the interface and the system, we would need to be experts in the subject area; however, just by glancing once on the interface, we can tell right away what section of the screen captures most of our attention.

One of the important issues with attention management is ensuring that users attend to the right place at the right time [4]. The most striking highlighting techniques Paley used in the design to make the "window" at the centre of the screen instantly "pop out":

  • Lighting level: It is the lightest area. The areas of secondary importance are shaded and information at the background is dimmed.
  • Configural focus: There are line elements pointing to it.
  • Centres of gravity: The position of it is at the top part of the centre of the screen.







Figure 1: New York Stock Exchange system interface screenshot.

2.2 "Search mode" design in a text editor

Espresso is a text editor for MAC [2] with a user-friendly and effective "Search mode" (see Figure 2). Finding a piece of text involves one step - typing it. The system uses the following highlighting techniques:

  • Lighting level: The document is instantly dimmed, which is a use of lighting to divert attention away from a particular region or object. [4],
  • Featural cues: Every match is clearly highlighted. Since the color is preattentively processed [5], the current selection captures users' attention with a "unique" color feature, which creates high salience. Notice that the color is yellow and the text is black on the grey background. Ware states that in such cases yellow highlighting of text works well because of it's high luminance that maintains text contrast [5]. Moreover, "unique" motion feature is used to make the items literally "pop out" and be noticed.
Search query for the word
Figure 2: Search query for the word "graphic" in Espresso

2.3 Images presentation in websites

It appears that the famous social network has implemented knowlegde of visual attention in their recent version of images presentation. Figure 3 shows (a) the standard version of presentation and (b) the "theatre" presentation of pictures in Facebook [1].

There are obvious improvements realized by the following highlighting techniques:

  • Lighting level: The most salient area is an image itself, enhanced by black surrounding placeholder and dimmed background.
  • Visualclutter: The efficiency of attention is improved by reducing visual clutter, because the fewer the items in a display, the faster and easier its allocation [4]. In this case, most of the advertisements are covered.
a) Standard presentation b) Theatre presentation of pictures in Facebook [1]
Figure 3: a) Standard presentation b) Theatre presentation of pictures in Facebook [1]

3. Conclusion

Knowledge of visual attention mechanism can provide an effective application in different design areas. In this essay, I have presented how careful consideration of visual attention supports effective design in three examples: a stock exchange system's user interface that made brokers' performance significantly faster [3], an elegant "search mode" design in a text editor [2] and a neat images presentation in websites [1].

References

  1. Facebook, social network service and website. http://www.facebook. com/.
  2. Searching and replacing text in espresso web editor. http://macrabbit. com/espresso/features/find/.
  3. PALEY, W. B. Interface and mind --a "paper lecture"about a domain-specific design methodology based on contemporary mind science benutzerschnittstelle und verstand --u ?ber eine design-methodik basierend auf aktuellen erkenntnis- sen der psychologie. it - Information Technology 51, 3 (2011/02/22 2009), 131-141..
  4. RENSINK, R. Human Attention in Digital Environments. Cambridge: Univer- sity Press, 2011, ch. The Management of Visual Attention in Graphic Displays, p. 40.
  5. WARE, C. Information Visualization: Perception for Design. Morgan Kauf- mann Publishers Inc., San Francisco, CA, USA, 2004.
  6. WOOD, S., COX, R., AND CHENG, P. Attention design: Eight issues to con- sider. Computers in Human Behavior 22 (2006), 588-602.

Graphic Design; Visual Interfaces

1. Introduction

I am a new "MAC convert". Being used to using only Windows and to it's user interface, did not make much problems for me. Even my prejudices against Apple ergonomics did not influence on my experience. In this essay, I am going to focus on three examples that show how perceptual mechanisms support effective visual design for design and provide examples from MAC OS X interface that made me 24/7 Apple user lately.

2. Perceptual Mechanisms

2.1 Lightness and Brightness Perception: Search in System Preferences

The current knowledge of perceptual mechanisms helped us define some basic principles for graphic design. One of them is Simplicity (also known as K.I.S.S.) principle. It is important to keep design simple and avoid visual clutter, because: "the most powerful designs are always the result of a continuous process of simplification and refinement" [4]. Even without going into complexities of color application, knowledge of lightness and brightness perception may help with achieving simplicity: the most important elements should be salient and non-critical elements should be de-emphasized [3].

According to Theeuwes' study users are good with noticing abrupt luminance change [6]. Fig. 1 shows how instant change of luminance helps with visual search. The hierarchy of high lighted, neutral, and low lighted states for all areas of the visual display is used to maximize simplicity and clarity. The most relevant element is emphasized with the lightest and the sharpest circle, others options are highlighted with blurry and darker circle and all background area is dimmed.

Search in System Preferences in MAC OS X
Fig. 1: Search in System Preferences in MAC OS X.

2.2 Motion Perception: Notifications via Growl

Studies in motion perception show that people are very sensitive to motion in vision periphery and it is even very difficult to ignore it [2]. This knowledge can provide useful application in graphical user interfaces, when it is important to guide users' visual attention to different locations of interest. Fig. 2 displays an example of how MAC interface implements this idea to provide users with notifications via Growl (Fig. 2). Notifications are a way for applications to provide users with new information that user deems important, without switching from the application users are working in. [1]

Fig. 2: Growl notification system for Mac OS X and
Fig. 2: Growl notification system for Mac OS X and "the badge" on icons.

2.3 Color Perception: "The Badges"

Color perception is a huge research area and careful application of it can produce very effective designs. First of all, it is very important to follow Simplicity principle - "color is a good example of an area where people can go wild using more features than necessary to get the message across" [5]. When too many colors compete for the viewer's attention, confusion may arise. One of the examples that is consistent to topics addressed in this essay is capturing user attention via color perception. As Marcus states, "the use of bright colors for danger signals, attention getters, reminders, and cursors is entirely appropriate" [3].

In the previous example (Fig. 2), red colored "badge" on Skype and Mail icons is used for notification of a change for the programs. This symbol creates different "state" for an icon and it stays attached to it till the users' action. The icon is animated in the begining and stays still after that. Thus, even in motionless state, strong color contrast and high saturation of the symbol may make the icons stand out. This effect, of course depends upon the background colors. [3]

3. Conclusion

Knowledge of human visual perceptual mechanisms can provide an effective implementation in graphic design and visual interfaces. In this essay, I have presented how understanding of lightness, motion and color perception can guide user attention in graphical user interface.

References

  1. Growl documentation. http://growl.info.
  2. Douglas J. Gillan. The psychology of multimedia: principles of perception and cognition. In CHI 98 conference summary on Human factors in computing systems, CHI '98, pages 143-144, New York, NY, USA, 1998. ACM.
  3. Aaron Marcus. Human-computer interaction. chapter Principles of effective visual communication for graphical user interface design, pages 425-441. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA, 1995.
  4. Kevin Mullet and Darrell Sano. Designing visual interfaces: communication oriented techniques. Prentice-Hall, Inc., Upper Saddle River, NJ, USA, 1995.
  5. MY Rabb. The Presentation Design Book. Ventana Press, 1993.
  6. Jan Theeuwes. Abrupt luminance change pops out; abrupt color change does not. Attention, Perception, Psychophysics, 57:637-644, 1995. 10.3758/BF03213269.

Perceptual Mechanisms

  1. Lightness and Brightness Perception
    • Ware, ch. 3 [pdf] [annotated pdf]
    • Edward H. Adelson, "Lightness Perception and Lightness Illusions." [pdf]
    • Palmer, section 3.3.1
  2. Color Perception
    • Ware, ch. 4 [pdf] [annotated summary pdf]
    • Tufte, Envisioning Information, ch. 5 [pdf]
    • P Rheingans. (1999). "Task-based Color Scale Design" [pdf]
    • Palmer, ch. 3.
    • CG Healy. (1996). "Choosing Effective Colours for Data Visualization" [pdf]
    • CA Brewer. (2005). Designing Better Maps, ch.5 [pdf]
    • MA Changizi et al. (2006). "Bare skin, blood, and the evolution of primate colour vision." [pdf]
  3. Texture Perception; Edge Detection
    • Ware, pp. 70-72; 159-176. [pdf]
    • Ware & Knight (1995). "Using Visual Texture for Information Display". [pdf]
    • Interrante (2000). "Harnessing Natural Textures for Multivariate Visualization." [pdf]
    • Kim et al. (2004). "Conveying Shape With Texture." [pdf]
    • Palmer, section 6.2.3
    • Kujala & Lukka. (2003). "Rendering Recognizably Unique Textures." [pdf]
    • Healey & Enns (1999). "Large Datasets at a Glance." [pdf]
    • Essay-1, Essay-2, Essay-3
  4. Motion Perception
    • Ware, pp. 217-225 [pdf]
    • Sekuler et al, "Motion perception" [pdf]
    • Bartram, "Perceptual and Interpretative Properties of Motion for Information Visualization". [pdf]
    • Palmer, sections 5.4, 10.1-10.3
    • Huber & Healey, "Visualizing Data with Motion". [pdf]
    • Essay-1, Essay-2, Essay-3
  5. Perceptual Organization
    • Ware, ch 6. (up to p.206) [pdf]
    • Tufte, Envisioning Information, ch. 3 [pdf]
    • Chang et al. (2002). "Gestalt Theory in Visual Screen Design." [pdf]
    • Kamba et al (1996). "Using small-screen space more efficiently." [pdf]
    • Palmer, ch. 6
    • Mullet & Sano, Designing Visual Interfaces, pp 76-129 [pdf]
    • Essay-1, Essay-2
  6. Visual Attention
    • Ware, ch. 5 (pp. 145-156; 177-181; 355-362). [pdf]
    • RA Rensink (2011). "The Management of Visual Attention in Graphic Displays." [pdf]
    • A MacEachren (1995). How Maps Work, pp 80-101. [pdf]
    • Palmer, section 11.2.4.
    • Wolfe & Horowitz. (2004). "What Attributes Guide the Deployment of Visual Attention and How Do They Do It". Nature Reviews. [pdf]
    • Rosenholtz et al. (2005). "Feature Congestion: A Measure of Display Clutter". [pdf]
    • RA Rensink & JT Enns (1998). "Early Completion of Occluded Objects." [pdf]
    • Findlater et al. (2009). "Ephemeral Adaptation: The Use of Gradual Onset to Improve Menu Selection Performance." [pdf]
    • S Wood et al. (2005). "Attention Design: Eight Issues to Consider". [pdf]
    • Essay-1, Essay-2, Essay-3
  7. Object Perception; Shape
    • Ware, ch. 7 (to p. 243) [pdf]
    • Feldman. "What is a Visual Object?" [pdf]
    • Bar. "Visual Objects in Context." [pdf]
    • Rohrer et al. "A Shape-based Visual Interface for Text Retrieval." [pdf]
    • Palmer, ch. 7 & 8; pp 413-436
    • Irani et al. "Using Perceptual Syntax to Enhance Semantic Content in Diagrams". [pdf]
    • Forsell et al. "Simple 3D Glyphs for Spatial Multivariate Data" [pdf]
    • Ebert et al. "Procedural Shape Generation for Multidimensional Data Visualization" [pdf]
    • Essay-1, Essay-2, Essay-3
  8. Movement Perception; Event Perception
    • Newell et al. "The Role of Characteristic Motion in Object Categorization" [pdf]
    • Zacks. & Swallow. "Event Segmentation" [pdf]
    • Zacks & Tversky. "Event Structure in Perception and Conception." [pdf]
    • Palmer, section 10.4
    • Zacks. "How We Organize Our Experience into Events" [html]
    • Jacobs et al. "Observations" [pdf]
    • Essay-1, Essay-2
  9. Scene Perception
    • Oliva. "Gist of the Scene" [pdf]
    • Rensink. "The Dynamic Representation of Scenes." [pdf]
    • Rensink. "Internal vs External Information in Visual Perception" [pdf]. Examples at [html]
    • Ware, pp. 362-379
    • Oliva et al. "Identifying the Perceptual Dimensions of Visual Complexity of Scenes". [pdf]
    • Varakin et al. "Unseen and Unaware: Implications of Recent Research on Failures of Visual Awareness for Human-Computer Interface Design". [pdf]
    • Essay-1, Essay-2, Essay-3
  10. Space Perception and Spatial Memory
    • Ware, ch. 8 [pdf]
    • Block. "Space" [pdf]
    • Golledge and Stimson. "Spatial Cognition, Cognitive Mapping, and Cognitive Maps" [pdf].
    • Palmer, ch. 5.
    • Kuipers. "The 'Map in the Head' Metaphor." [pdf]
    • Bardel. Depth Cues for Information Design. [pdf]
    • MacEachren. How Maps Work, pp. 136-147. [pdf]
    • Cutting. "Perceiving Scenes in Film and in the World." [pdf]
    • Essay-1, Essay-2, Essay-3
  11. Visuomotor Control; Visual Awareness
    • Ware, pp 317-324. [pdf]
    • Goodale & Haffenden. "Frames of Reference for Perception and Action in the Human Visual System." [pdf]
    • Merikle & Daneman. "Psychological Investigations of Unconscious Perception."[pdf].
    • Palmer, sections 13.2, 13.3.
    • Goodale & Milner. "Separate Visual Pathways for Perception and Action." [pdf]
    • Po et al. "Pointing and Visual Feedback for Spatial Interaction in Large-Screen Display Environments." [pdf]
    • Lui et al. "Target Detection and Localization in Visual Search: A Dual Systems Perspective". [pdf]
    • Hu et al. "Constraints and Principles for the Design of Human-Machine Interfaces: A Virtual Reality Approach." [pdf]
    • Essay-1

Application Areas (Visual Displays)

  1. Drawings and Diagrams
    • B. Tversky, "Spatial Schemas in Depiction." [pdf]
    • M. Massironi, ch 97-129. [pdf]
  2. Maps
    • M. Monmonier, How To Lie With Maps, ch 1-3. [pdf]
    • A. MacEachren, How Maps Work, pp 21-50. [pdf]
    • A. MacEachren & M-J. Kraak. "Research Challenges in Geovisualization" [pdf]
  3. Statistical Graphics
    • W.S. Cleveland, The Elements of Graphing Data, ch. 1, 4. [pdf] [pdf]
    • E.R. Tufte, The Visual Display of Quantitative Information:
    • ch 4-6. [pdf] [pdf] [pdf]
    • R.A. Rensink & G. Baldridge, "The Perception of Correlation in Scatterplots." [pdf]
    • Bartram & Stone, "Whisper, Don't Scream: Characterizing Subtle Grids" [pdf]
    • Cleveland & McGill, "Graphical Perception: Theory, Experimentation, and Application..." [pdf]
    • Wainer & Velleman, "Statistical Graphics: Mapping the Pathways of Science." [pdf]
    • Essay-1, Essay-2, Essay-3
  4. Depiction of Motion; Animation
    • Tversky, Morrison, & Betrancourt, "Animation: Can It Facilitate?" [pdf]
    • Baecker et al, "Bringing Icons to Life", pp. 444-449. [pdf]
    • McCloud, Understanding Comics, pp. 107-117. [pdf]
    • Williams, Animator's Survival Kit, pp 11-20, 226-230, 273-284. [pdf]
    • Gillan & Sapp, "Static Representation of Object Motion." [pdf]
    • Cutting (2002). "Representing Motion in a Static Image." [pdf]
    • Whitaker & Halas, Timing for Animation, pp. 58-75. [pdf]
    • Buxton & Fournier, "Characterizing Animation Systems by their Vocabulary of Motion". [pdf]
    • Lowe, "Interrogation of a Dynamic Visualization During Learning." [pdf]
    • Kadaba et al, "Visualizing Causal Semantics Using Animations".
    • Harrison et al, "Obscuring Length Changes During Animated Motion." [pdf]
    • Essay-1, Essay-2
  5. Graphic Design; Visual Interfaces
    • R. Williams, Non-Designer's Design Book, ch 1-5.
    • Mullet & Sano, Designing Visual Interfaces, pp. 1-49 [pdf]
    • Rabb, The Presentation Design Book, pp. 47-57. [pdf]
    • Marcus, "Principles of Effective Visual Communication for Graphical User Interface Design." [pdf]
    • Baecker et al., "Vision, Graphic Design, and Visual Display." [pdf]
    • Interface Hall of Shame [html]
    • baddesigns.com [html]
    • Web Pages That Suck [html]
    • Essay-1, Essay-2, Essay-3
  6. Information Visualization
    • Munzner, "Information Visualization" [pdf]
    • SK Card et al, Readings in Information Visualization: ch. 1 [pdf]
    • R Spence, Information Visualization, ch. 1, 2. [pdf]
    • Healey & Enns (1999). "Large Datasets at a Glance." [pdf]
    • Card & Mackinlay. "The Structure of the Information Visualization Design Space". [pdf]
    • Notes on Writing
  7. Cartoons; Icon Design
  8. Depiction of Time and Movement
    • Tufte, Envisioning Information, ch. 6 [pdf]
    • Muller & Schumann. (2003). "Visualization Methods for Time-Dependent Data - An Overview." [pdf]
    • McCloud, Understanding Comics, pp 94-107 [pdf]
    • Massironi, ch. 7 [pdf]
    • Gentner, "Spatial Metaphors in Temporal Reasoning". [pdf]
    • Essay-1, Essay-2
  9. Multi-view Displays; Film
    • Zacks & Magliano. "Film, Narrative, and Cognitive Neuroscience". [pdf]
    • McCloud, Understanding Comics, ch. 3. [pdf]
    • Wang-Baldonado et al. "Guidelines for Using Multiple Views in Information Visualization". [pdf]
    • May. "Perceptual Principles and Computer Graphics". [pdf]
    • North & Shneiderman. "Snap-together visualization: Can Users Construct and Operate Coordinated Visualizations?" [pdf]
    • Brodbeck and Girardin. Using Multiple Co-ordinated Views to Analyze Geo-Referenced High-Dimensional Datasets. [pdf]
    • Essay-1, Essay-2, Essay-3
  10. Navigation of Information Spaces
    • Ware, pp. 325-350. [pdf]
    • S. McCloud. Reinventing Comics, pp. 212-235. [pdf]
    • Spence. "A Framework for Navigation." [pdf]
    • Furnas. Effective View Navigation. [pdf]
    • Plumlee & Ware. "Zooming vs Multiple Window Interfaces: Cognitive Costs of Visual Comparisons." [pdf]
    • Van Wijk & Nuij. "Smooth and Efficient Zooming and Panning". [pdf]
    • Ball & North. "Effects of Tiled High-Resolution Display on Basic Visualization and Navigation Tasks."
    • Carpendale et al. "Extended Distortion Viewing from 2D to 3D". [pdf]
    • Vinson. "Design Guidelines for Landmarks to Support Navigation in Virtual Environments". [pdf]
    • Essay-1, Essay-2, Essay-3
  11. Visual Thinking; Future Directions
    • Ware, ch. 11. [pdf 1] [pdf 2]
    • Johnson. "Top Scientific Visualization Research Problems".
    • Rensink. "Four Futures and a History" [html]
    • Rensink. "The Modeling and Control of Visual Perception." [pdf]

Reference

Visit the original UBC PSYC 579 course website

Depiction of Motion; Animation

1. Introduction

How can perceptual mechanisms support effective depiction of motion? There are two different types of motion visualization: "panel to panel" (e.g. series of pan- els in comics, images in motion pictures, frames in animations) and within panel (e.g. single still image). [3] In this essay, I am going to focus on three perceptual mechanisms related to "panel to panel" type of motion: persistence of vision, visual attention and inattentional blindness.

2. Perceptual Mechanisms

2.1 Persistence of vision: Fundamental Principle of Motion Depiction

How do we get an illusion of continuous animation when still images are projected in a series? The answer is one of the most important foundations of motion perception - "persistence of vision" principle. It states "that our eyes temporarily retain the image of anything they've just seen". [12]

The way an ancient device, called the thaumatrope, (Fig.1) works explains that principle. [12] It has an image on each side of a card with two pieces of strings to hold it. At first glance, they are two separate images, but if the two images are rapidly alternated, two sides appear to combine into a single image. We know that its not a case, but it makes the motion seem seamless.

Persistence of vision
Fig. 1: Persistence of vision explained by a device, called thaumatrope. This principle played an important role in movies and animation development.

2.2 Visual Attention: Anticipation in Motion Depiction

How can we use our knowledge about visual attention in motion depiction? One of the examples is creating anticipation. If the viewers are not prepared to see something that is animated very quickly, it is possible that they may miss it. [11] Thus, animators should "prepare" the audience. They should focus viewers' "locus of attention" [5] to a place, where an important motion is going to happen. One of the things that attracts our attention is motion onset. [4] Therefore, if a "preparatory" movement is made before the main movement, such as drawing back a hand before a throw, the attention of the audience can be attracted to the hand. (Fig.2) This ensures that they the audience sees the throw when it comes. [11] For the best effect, the anticipation is usually animated slower, than the main action. [12]

Creating anticipation.
Fig. 2: Creating anticipation.

2.3 Inattentional blindness: Caveats in Motion Depiction

The human cognition research reveals surprising limitations of visual perception systems. One of them is called "inattentional blindness" and it is when the viewers fail to perceive a part of animation, even when it is presented in the viewers' field of view and "occupy the same location in space as attended and consciously perceived" part. [10] The famous experiment that supports that phenomenon was conducted by Simons and Chabris in 1999. The observers were "blind" to the sudden appearance a person in a gorilla suit, even if it was walking right through the middle of the scene. [7] [1]

Closely related is "change blindness" which is described as "the inability to notice changes that occur in clear view of the observer, even when these changes are large and the observer knows they will occur." [9] [8] [6] Naive observers may even fail to notice changes of main characters across cuts in a motion picture. [2] Thus, by focusing attention of the audience to a particular part of the animation, there is a probability that the other parts will not be properly perceived. That may help explain some of the difficulties animators have faced in their attempts to depict motion and why the audience do not notice it.

3. Conclusion

Knowledge of human visual perceptual mechanisms can provide an effective imple- mentation in motion depiction. In this essay, I have presented how understanding of persistence of vision, visual attention and inattentional blindness can create an illusion of motion, prepare viewers for main action and make sure that they do not miss important actions in "panel to panel" type of motion depiction.

References

  1. Jason Harrison, Ronald A. Rensink, and Michiel van de Panne. Obscuring length changes during animated motion. ACM Trans. Graph., 23:569-573, August 2004.
  2. D T Levin and D J Simons. Failure to detect changes to attended objects in motion pictures. Psychonomic Bulletin & Review, 4(4):501-506, 1997.
  3. Scott McCloud. Understanding comics: the invisible art / Scott McCloud. HarperPerennial, New York, 1994.
  4. Abrams R.A. Motion onset captures attention. Psychological Science, 14:427-432(6), September 2003.
  5. Jef Raskin. The humane interface: new directions for designing interactive systems. ACM Press/Addison-Wesley Publishing Co., New York, NY, USA, 2000.
  6. Ronald A Rensink. Change detection. Annual Review of Psychology, 53:245- 277, 2002.
  7. D. J. Simons and C. F. Chabris. Gorillas in our midst: sustained inattentional blindness for dynamic events. Perception, 28(9):1059-1074, 1999.
  8. Daniel J. Simons. In Sight, Out of Mind: When Object Representations Fail. Psychological Science, 7(5):301-305, 1996.
  9. Daniel J. Simons and Ronald A. Rensink. Change blindness: past, present, and future. Trends in Cognitive Sciences, 9(1):16 - 20, 2005.
  10. D. Alexander Varakin, Daniel T. Levin, and Roger Fidler. Unseen and Unaware: Implications of Recent Research on Failures of Visual Awareness for Human-Computer Interface Design. Human-Computer Interaction, 19(4):389-422, 2004.
  11. Harold Whitaker and John Halas.Timing for Animation.FocalPress, February 2002.
  12. Richard Williams. The Animator's Survival Kit. Faber & Faber, January 2002.

Color Perception

My presentation on color perception drawing elements

  1. The Physical Description of Light
    • Light Components
    • Electromagnetic Spectrum
  2. The Psychological Description of Color
    • Color Space
  3. Theories of Color Vision
    • Trichromatic Theory
    • Opponent Process Theory
  4. Basic Phenomena
    • Color Blindness
    • Color Afterimage
    • Color Contrast
  5. Application to Visual Design
    • Color Specification Interfaces
    • Color for Labeling

Drawings and Diagrams

How do graphics convey meaning? How do we perceive drawings?

In order to answer these questions, we need to understand how do we perceive the elements of drawings and spatial relation between these elements. In this essay, I am going to discuss lines as a graphical element and proximity as graphical space usage.

The basic structural component of drawings is line. It is an element of design that has length and direction. It is often used to communicate a specific feeling or draw viewers' attention to an important part in the design. [4] In the early 1970s, Arnheim proposed three ways of line usage - "lines as objects", "lines as edges" of objects and repeated "lines as texture". In the early 2000s, Massironi has added the forth way - "lines as a crack in a surface". [3] drawing elements

  • Object lines are extended in one direction only, do not divide space into parts and usually open-ended (are not connected to other lines). They are perceived to be "in front" of the background for viewers. Object lines can be useful to represent abstract geometric elements, virtual lines (such as trajectories, line of sight), and transformation of time in statistical graphs.
  • Edge lines create contours and form. They are no longer objects, but edges of drawn objects. They usually form closed contours of figures and make the "inner" part of the space (enclosed region) appear to look "in front" of the background for the observers. We do not perceive them as lines, but as something that makes the figures stand out.
  • Crack lines are defined as lines that separate two parts of a surface, or two juxtaposed objects. In other words, they are usually depicted inside of forms produced by edge lines. Examples of simple crack lines are eyes and mouth in an abstract drawing of a face.
  • Texture lines form a texture, value and density for objects by repetition in regular or slightly regular way. As a rule, the elements of texture should be close to each other to stand out.

The way of lines depiction (spatial arrangement, directionality) defines the manner they are perceived and the meaning they communicate. In addition to cognitive functions stated above, lines can be used to create perspective, sense of continuance in a composition and a mood. [3]

Spatial relations of graphical components are used to convey relations based on proximity. Massironi has introduced four levels of proximity relations: nominal, ordinal, interval, and ratio. [4]

  • Nominal relations use the simplest form of proximity - grouping which requires placing related things close to each other and unrelated things farther away. The concept of "proximity" in visual communication was introduced as one of the Gestalt principles of perceptual organization. It states that elements that are arranged close together are perceived as being relates. [2] In addition to spacing, other visual devices, like color, shading and texture are used. This goes along with another Gestalt principle - similarity, which is grouping visual elements by size, color, shape and style. [2] In other words, we perceive elements to be in the same group even if they are far apart, but have same features stated above.
  • For ordinal relations, design elements that are used to indicate grouping are applied as well. An effect of order is provided by slaient usage of visual and spatial devises. For example visual objects successively spaced (indented), colored or sized.
  • For interval relations the distances between elements are meaningful and for ratio relations, zero and the ratios of the distances between elements are important. For example, we observe values of distance in XY-plot and pie-charts. [5]

References

  1. W.D. Ellis. A Source Book of Gestalt Psychology. International library of psychology, philosophy and scienti?c method. Routledge, 1999.
  2. Forum.Nokia. Design and user experience library v2.1.
  3. M.Massironi. The psychology of graphic images: seeing, drawing, communicating. Volume in the University of Alberta, Department of Psychology, Distinguished Scholar Lecture. L. Erlbaum, 2002.
  4. Joshua David McClurg-Genevese. The elements of design, August 15, 2005.
  5. B. Tversky. Spatial Schemas and Abstract Thought, chapter Spatial Schemas in Depiction. Bradford Books. MIT Press, 2003.
1