Preattentive Processing

The Pre Attentive Processing System Discussion and Design Review March 3, 2015

What is pre attentive processing?

Pre attentive processing is the automatic and unconscious gathering of information from stimuli and the immediate environment. This stage in the process of cognitive perception occurs in the matter of 200 to 250 milliseconds (Healy, Booth, & Enns, 1996) and serves as the first coding of stimuli in the environment. (Treisman, Preattentive Processing in Vision , 1985 )Through pre attentive processing, neurons discern characteristics of the environment such as colors, edges, movement, and distance and piece them together to perceive a multifaceted whole. (Treisman, Features and Objects in Visual Processing , 1986)David C Marr described a “primal sketch". Pre attentive processing has been described as “The first stage of processing, in which the pattern of light reaching an array of receptors is converted into a coded description of lines, spots, or edges and their locations, orientations, and colors, the representations of surfaces and volumes.” (Treisman, Features and Objects in Visual Processing , 1986)Treisman described it as “the extraction of features from patterns of light” (Treisman, Features and Objects in Visual Processing , 1986) Pre attentive processing serves as a prelude to the next stage of cognitive perception, the conscious identification and labeling of stimuli. It was developed in humans as a means of survival. “When a predator strikes, it strikes fast and conscious deliberation before defensive action is likely to leave the genes of the prey unrepresented in the next generation. Thus, the evolution of human consciousness requires another, more basic level of mental functioning where “the blink of an eye” provides a more convenient temporal unit of information processing. It is at this level of evolutionary facilitations and constraints on psychological events are likely to show up most clearly, uncontaminated by the culturally conditioned whims of consciousness.” (Lang, Simons, & Balaban, 1997)Through natural selection, humans developed strength in pre attentive processing. It was an evolutionary advantage. Humans needed to process information as quickly as possible in order to survive. They did this by gathering information automatically instantly detecting information including: sound for example, “how close is the predator in relation to me?” ; edge, for detecting danger in spatial layouts; am I going to fall of this cliff?, color is this fresh meat or rotten?, motion “where is the incumbent object coming from? And at what speed?” (Albustin & Bacheitner, 2010) It was developed as a pre attentive function to facilitate rapid response to increase response time and accuracy of reaction.

Objects are processed through different areas of specialization through areas of the brain: one which focused on retinal variables, and the other on spatial variables. (Treisman, Preattentive Processing in Vision , 1985 ) In the following paragraphs, each of these faculties, their physiological processes, and the features they detect will be explored. The concept of how these variables are perceived in order to form perceptual groups will be then be discussed, followed by the analysis of a based on the critical variables of pre attentive processing.

Retinal Structure Retinal structure refers to variables that are perceived through the retina such as color, brightness and motion. Distinctive features of a stimuli are processed by different functions of the brain due to the physical capability of the human body. Features such as motion and depth are perceived by the magnocellular layers of the LGN, while color and form are perceived by parvocellular layers. (Heeger, 2010) Humans detect these retinal variables of color and form when information from the stimuli passes from the retina, into the optic nerve, through the optic chasm, and into the optic tract, until the information reaches the parvocellular layers of the LGN. From the parvocellular layers, information is sent to V1 and V2 of the visual system where specialized neurons receive and process the information, based on the characteristics of the stimuli, for example hue. (Hubel, 1988) (Livingstone & Hubel, 1988) Two salient retinal characteristics perceived in pre attentive processing include color and motion. Color is the characteristic that enables humans to detect stimuli that differ from their surroundings solely by their hue. (Heeger, 2010) According to Healey, three variables must be controlled to choose distinct collections of equally distinguishable color: color distance, linear separation, and color category. (Healy, Booth, & Enns, 1996)This ensures the distinct perception of color from the background. Motion is another feature of stimuli whose properties influence perception. Three main characteristics have been identified that directly impact the user’s ability to perceive information, flicker, direction of motion, and velocity of motion.

(Healy, Booth, & Enns, 1996)Flicker can be described as when a stimuli appears and then disappears. According to Huber and Healy, “target elements or the background elements have to complete at least half a cycle before a viewer perceives a difference in the target and background flicker rate” (Huber & Healey, 2005)Direction of motion is when a stimuli or element is traveling across a static background while the velocity of motion is when an object is moving significantly faster than the background, but in the same direction. “Coherent motion can also be used to separate elements into groups” (Nakayama & Silverman, 1986) The elements of color, motion, and brightness should all be considered in the design of a product or interface because they are received at a pre attentive level, and are determining factors for the grouping of elements, as will be discussed later on in this writing. The other category of elements that contribute to the grouping of stimuli is spatial structure.

Spatial Structure Spatial structure refers to the location, size, layout and physical attributes that characterizes the occupation of space by stimuli in the context of the environment, in addition to the spatial arrangement of the environment itself. Spatial structure is predominately processed by V1 of the LGN. As noted by David Marr, “V1 neurons are orientation selective meaning that they respond strongly to lines, bars, or edges of a particular orientation (e.g., vertical) but not to the orthogonal orientation (e.g., horizontal).” (Marr & Hildreth, 1979 )Research has shown that the retina receives information regarding the spatial layout of the environment, and records a “feature map” of the environment. David Marr developed the theory of the primal sketch.

According to this research Marr stated, “The first primitive description of the was image was called the primal sketch and it is formed in two parts. First, a description is constructed of the

intensity changes in an image, using a primitive language of edge-segments, bars, blobs, and terminations. This description was called the raw primal sketch. Secondly, geometrical relations are made explicit using virtual lines and large more abstract tokens are constructed by selecting, group and summarizing the raw primitives in various ways.”(Marr & Hildreth, 1979 )Variables of spatial features that are detected in this area of pre attentive processing include; edge, proximity, direction, depth and common region. (Heeger, 2010)Discerning edges in the environment could be considered a primary task of pre attentive processing. This is the perception of large breaks and lines of differentiations between objects and a background.

Edges have orientations which are characterized by corners, kinks, and curvatures which are detected in the pre attentive process. (Marr & Hildreth, 1979 )Proximity is another characteristic that is received in pre attentive processing. Proximity refers to the spatial area between objects, and the relative space occupied in relation to the environment as a whole.

Direction is a variable that can be displayed in the texture of a stimuli and has two common orientations: isotropic, all flowing in the same direction, or anisotropic, elements flowing in different directions. “Preliminary results suggest anisotropic textures that follow both the first or second principle curvature directions produce surface perception that is as good or better than either principle direction alone, or than other orientation rules (Kim, Jorgenson, & Coon, 2003)Good Continuation is another variable that is perceived in pre attentive processing. The concept of continuation can be defined as the ability for the mind to perceive a line in vision even after it overlaps with other shapes. (Heeger, 2010) Depth is another spatial variable perceived in pre attentive processing, “Stereoscopic depth Elements placed in a different depth layers are pre attentively identified regardless of distractors placed in other depth layers.”

(Huber & Healey, 2005)This is relevant in design when creating the simulation that an object is 3D rather than 2d. It also applies to later stages in the design process, such as affordances.

Now that a foundation for retinal and spatial characteristics has been laid out, grouping is the next stage in the perceptual process that allows for the cognitive synthesizing the information in the environment.

Grouping Grouping is the pre attentive process of atomically perceiving elements in an environment as having a relationship based on perceived shared characteristics or relative properties, and the subsequent acceptance of these elements as a single group. According to Fellenz and Hartman, “a perceptually satisfying segmentation should result in regions corresponding to the observed perceptual groups and objects, using discontinuities to indicate region boundaries” (Fellenz, 2005) Perceptual grouping indicates a relationship between like elements or stimuli in an environment. The process of grouping was developed as a necessity of survival in order to increase accuracy and efficiency in detecting threats, in addition to faster priming for next stage of cognitive processing. (Lang, Simons, & Balaban, 1997)Grouping also serves as the basis for how humans create information structures within the mind. Relationships between elements are determined by several variables including; proximity, alignment, and similarity. Proximity can be characterized as the perception of relative distance. In the context of pre attentive processing, proximity implies that objects located near one another are recognized as a group.

(Wagemans, Elder, & Palmer, 2012 ) Alignment is defined as stimuli or objects that create a

straight line or appropriate relative position. Alignment suggests a line of force within the environment. Elements satisfying this alignment principle will be considered as a part of a perceptual group. Similarity is another element that determines perceptual grouping. Stimuli exhibiting similarity in size, color symmetry, and orientation will be perceived as a group.

(Huber & Healey, 2005) In the following case example, the design of CNN Markets website http://money.cnn.com/data/markets/ will be evaluated through the lens of pre attentive processing. Insights into how the design will be received by the pre attentive process will be described.

Case Example CNN Markets The purpose of the CNN Markets webpage is to communicate stock market data to stakeholders interested in tracking the real time status of stocks as they exist in the market.

This nature of this information is very categorical, with frequent minute to minute to changes.

This information should be designed in a format that allows for easy understanding through visualization. The following are design examples for CNN Markets page: Overall Site The site overall does an excellent job at establishing patterns at a pre attentive level. The use common region is prevalent throughout the design for example in the use of tool bar at the top of page, areas bounded by light gray hues to signify a relationship, and placement of headings at the top of these bounded areas. The light blue heading boxes create the feeling that each is related, and contains material of a similar importance. The use of light gray color to bind areas of information together creates a sense of region, however is not overpowering to the viewer. Also, there a strong sense of relationship between areas of similar color for example, pre attentively, one could assume that all green areas are related in some way, and all red areas are related in some way. Parts of this image will broken down more thoroughly in the remainder of this writing. The strong stability in this design and clear grouping of information creates a sense of comfort for the user.

Key Stats This design does a nice job in establishing a relationship between elements contained in this information category by applying a light gray shading to signify a common region. The color of the heading “Key Stats� in addition to the bold font signify that this has a different relationship than the other elements in the region. The positioning at the top of the area eludes to possible importance of information, but the alignment with the other variables beneath assures the user that it is associated with other elements in the area.

Alignment of variables in the grey space, in both columns and rows represent relationships between each of the spaces. A user might also assume a relationship between all green variables, and that all red variables are related. The fact that no other others are used to represent other elements in the chart may also suggest a relationship in significance between green and variables.

Most Popular Stocks The first feature detected by the user would be the diluted red/orange area on the right bottom portion of the region. In this example, color is the driving feature for assessing the information pre attentively. One can assume a relationship in with all areas of red/orange shading, in the red lettering at the top and pattern in the graph. The area of gray shading can also be assumed to have a relationship with all areas that contain this shading. Proximity of these two shaded areas together establishes a pattern of relatedness between the two attributes. Edge is also detected in this examples through the jagged spikes of the colored areas. Alignment and continuation also come into play in this example, with the group horizontal lines creating the perception of relatedness between those variables. The vertical groups of text along the left hand side of the region create a sense of relationship between themselves due to alignment, and could also result in a perceived association with the horizontal lines adjacent to them due to proximity. The heading in this example is also defined, as in examples above, employing color, and edge, to create a feeling of significance.

Sector Performance

This example employs a common region of light grey to establish a relationship between variables displayed in the area. A relationship can be assumed from the similarity and alignment of variables located along the left vertical side, as well as a relationship between rows of information. Color is used to group together green and red variables, while the location in the column, and alignment generate the feeling of relationship between all colored variables. The bars aligned in the middle coloumn of the region share similarity in color, and shape, and although size differs, the relationship between these variables is clear.

Direction could also play a factor, as the bottom two bars extend in a different direction from the remaining bars above. Again, the heading comes into play.

Fear & Greed Index

This example provides an interesting visualization when perceived through a pre attentive lens. The image uses shape, brightness, color, direction, and proximity to relay information. The user can assume that the green areas are related to one another, including the green area of the circular object, and the green lettering in the middle. Proximity of words to areas of the circle signify a relationship between the closest region and the word. The darkened dial area, met with a grey shaded area creates a clear separation between hues. The shape of a circle also suggests a relationships. Once again, a light grey color was dropped in to create a common region, and the blue header remain continuous on the top of the design.

Overall Insights for CNN Market Page Overall, CNN Market page did an excellent job in presenting information in a stable, reliable way. The use of gray to provide the perception of a relationship between common regions without overpowering the user was nicely done. There is a continuity to the design with the presence of headings to signify areas of importance, while still tieing together nicely with the information beneath the heading and within the region. Color was used effectively to signify relationships between like variables.

Conclusion Understanding Pre attentive processing is imperative because it is unconscious foundation on which designers build an experience of trust, credibility and security. Designers must create patterns that elicit a visceral response of trust. This can be achieved by understanding the way humans pre attentively perceive stimuli, and the factors that can be manipulated to shape the users perception to effectively achieve the desired response. From the very foundation of the design through to the rest of the variables. It is imperative for designers to obtain an understanding of how visual perception works in order to effectively design products, interfaces, and visualizations.

References Albustin, A., & Bacheitner, S. (2010, May ). Preattentive Processing . Retrieved from courses.iicm.tugraz.a: http://courses.iicm.tugraz.at/ivis/surveys/ss2010/g2-surveypreatt.pdf Duncan, J., & Humphreys, G. W. (1989). Visual Search and Stimulus Similarity . Psycological Review , 0033-295.

Fellenz, H. (2005). Preattentive grouping and Attentive selection. Universit¨at–GH Paderborn, FB Elektrotechnik, 47–49.

Healy, C. G. (1990). Visualization of Multivariate Data using Preattentive Processing . Waterloo: University of Waterloo.

Healy, C., Booth, K., & Enns, J. (1996). High Speed Visual Estimation Using Preattentive Processing. ACM Tochi , 107-135. Retrieved from www.csc.ncsu.edu: http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf Heeger, D. (2010, September ). Perception: LGN and V1. Retrieved from www.cns.nyu.edu: http://www.cns.nyu.edu/~david/courses/perception/lecturenotes/V1/lgn-V1.html Hubel, D. (1988). David Hubel's Eye, Brain and Vision Publications . Retrieved from hubel.med.harvard.edu: http://hubel.med.harvard.edu/publications.htm Huber, & Healey. (2005). Perception and Visualization . Retrieved from csc.ncsu.edu: http://www.csc.ncsu.edu/faculty/healey/PP/#Hub_Vis:2005 Julezs, B., & Bergen, J. (1983). Human factors and behavioral science: Textons, the fundamental elements in preattentive vision and perception of textures. Bell System Technical Journal , 1619-1645.

Kim, E. A., Jorgenson, E., & Coon. (2003). Positional cloning of the human quantitative trait locus underlying taste sensitivity to phenylthiocarbamide. Science , 1221-5.

Lang, P., Simons, R., & Balaban, M. (1997). Attention and Orienting: Sensory and Motivational Processes. New York : Pyscology Press .

Livingstone, M. S., & Hubel, D. H. (1988). Do the Relative Mapping Densities of the MagnoParvocellular systems vary with density . The Journal of Neuroscience , 4334-4339.

Retrieved from http://hubel.med.harvard.edu/papers/HubelLivingstone1988JournalofNeuroscience.pdf Marr, D., & Hildreth, M. (1979 ). Theory of Edge Detection. London : Proceedins of Royal Society of London .

Nakayama, K., & Silverman. (1986). G. H. Serial and parallel processing of visual feature conjunctions. Nature , 264-265.

Pomerantz, J. R., & Portillo, M. C. (2011). Grouping and emergent features in vision: Toward a theory of basic Gestalts . Journal of Experimental Psychology: Human Perception and Performance , 1331-1349.

Prinzmetal, W., & Banks, W. P. (1977). Good continuation affects visual detection. Perception and Psycophysics , 389-395.

Treisman, A. (1985 ). Preattentive Processing in Vision . Computer Vision, Graphics, and Image Processing , 156-177.

Treisman, A. (1986). Features and Objects in Visual Processing . Scientific American , 114-125.

Trick, L. M. (1993). What enumeration studies can show us about spatial attention: evidence for limited capacity preattentive processing. Journal of Experimental Psycology Human Perception & Performance , 331-351.

Wagemans, Elder, & Palmer. (2012 ). A Century of Gestalt Psychology in Visual Perception:I. Perceptual Grouping and Figure–Ground Organization. Psychological Bulletin Psychological Association, 1172–121.

Wolfe, J. (2004, October 18). Guidance of Visual Search by Preattentive Information . Retrieved from http://search.bwh.harvard.edu/: http://search.bwh.harvard.edu/new/pubs/IttiChapterProof04.pdf