Running Head: PREATTENTIVE PROCESSING AND TARGET.

COM

Preattentive Processing and Target.com Armen J. Chakmakjian Bentley University

PREATTENTIVE PROCESSING AND TARGET.COM Abstract This paper is an expert review of the current implementation of visual elements on the Target.com home page through the concept of preattentive mechanisms. The paper starts with a description of visual perception and very briefly touches on the concepts of saccadic motion and signal processing that occur in the eye. In order to understand what the purpose of preattentive processing is, the paper goes over relevant biological and psychological research on how the visual sensory system uses preattentive processing to distinguish interesting groupings of elements in the visual field. The paper uses the available research to describe preattentive mechanisms such as constancy, color, relative size, and Gestalt properties including proximity,

similarity, alignment, continuity, and closure. This paper will then study the Target.com website, concentrating on elements that stimulate preattentive grouping responses, as well as any distractors. The paper closes with some recommendations for the Target.com site.

PREATTENTIVE PROCESSING AND TARGET.COM Preattentive Processing and Target.com Visual perception relies on many stages of processing of signal data before ultimately being used by higher cognitive functions. (Gazzanina, Ivry, & Mangun, 2002, p. 150) After detection in the eye, preattentive processing allows the organization of stimulus being sent through the visual sensory system. (Moore & Egeth, 1997) Preattentive processes involuntarily and in less than 250 milliseconds signal the presence of a grouping of differences in the environment confronting a sensory input and are recognized by sensory memory. (Yoo, 2007) The preattentive mechanism seems to be there to attempt to process items so that they seem to pop out of the background and allow the observer to choose to attend to them. (Gazzanina, Ivry, & Mangun, 2002, p. 253). These impressions may be lost if active attention is not triggered, possibly indicating a near term memory of patterns which informs preattention. (Yoo, 2007) At the start the paper briefly describes the biological stages of visual sensory processing including eye movements. In order to understand what the purpose of preattentive processing is, the paper will go over both the biological and psychological research available in this area and

describes the processing that our visual sensory system uses to distinguish interesting elements in the visual field. The paper then considers preattentive mechanisms such as constancy, color, relative size, and Gestalt properties including proximity, similarity, alignment continuity, and closure. This paper then investigates the use of elements on the Target.com website that stimulate preattentive responses. The paper closes with some recommendations based on the survey of research for the Target.com site. Visual Perception, Gestalt Theory and the Preattentive Mechanism Visual perception follows the process of visual detection that starts in the eye. Cornsweet tells us that the eye is in constant motion due to voluntary scanning, involuntary tremors and saccadic movements. Saccadic movements are drift of the object of focus and the eyes reaction to bring that object back to the center of the fovea. (Cornsweet, 1970, 400). Concurrently, the rods that surround the fovea detect changes in light, and generate a movement called prosaccades or externally movement triggered towards the sudden appearance of a peripheral stimulus. (Pierrot-Desilligny, Milea, Muri, 2004). Once detected, the visual perception system behaves in a way that groups information for efficient processing through systems called preattentive mechanisms. As Ware points out, the preattentive mechanisms can be characterized by the Gestalt principles of grouping such as proximity, similarity, alignment, continuity, and symmetry (as cited in Fekete, van Wilk, Stasko & North, 2008). Pomerantz makes an argument that color should be accepted as a psychological primitive (Pomerantz, 2006) since it may lead to a pop-out, in other words a signal that something significant should be attended to in the visual field. Constancy is also thought of as a preattentive mechanism and one research study points to data that describes how children

PREATTENTIVE PROCESSING AND TARGET.COM

generate a preattentive memory of constancy of features (Molholm, Gomes & Ritter, 2001) In this particular case there are some differences in opinion on whether the affects of constancy precede or are part of an iterative grouping and processing mechanism. (Palmer, Brooks & Nelson, 2003). Palmer and Rock argue that preattentive processes are a multi-stage event that results in a concept of uniform connectedness. (Palmer & Rock, 1994). In their theory, individually detected and perceived elements are grouped together by subsequent stages that are both bottom-up Gestalt groupings and informed by pattern memory, indicating involvement of an involuntary top-down process. (Palmer & Rock, 1994). This variety of processing implies that biological systems inhibit a significant amount of information. (Mattingley & Davis, 1997). The next logical question is why did a biological mechanism evolve in which information is sorted and filtered before attentive processing is done. Cornsweet posits that because we have a system that can learn, only the stimulus that indicates change needs to be passed along to higher cognitive processes. Unchanging conditions of the sensory field are not processed thoroughly since it would be redundant to a learning system. (Cornsweet, 1970, 443) Research in Preattentive Mechanisms In 1966, Beck ran an experiment in which fields of letters in different orientations were presented to a subject for a short fixed amount of time via a shutter. The experiment found that grouping by similarity was still possible despite changes in orientation of the letters in the visual field. (Beck, 1966) Vuilleumier and Landis researched grouping and filling-in in 1997 on patients with left spatial neglect (they were unable to detect attentively on the left side). In this study it was shown that contours were perceived without explicit attention, meaning they were handled by a preattentive mechanism. (Vuilleumier & Landis, 1997) Findings from infant research done by Quinn, et al, show that 6 to 7 month-olds retain information about the elements presented in the visual field as well as being able to form larger perceptual groupings such as rows and columns. (Quinn, Bhatt, Brush, Grimes & Sharpnack, 2002) Later research by Beck, et al, shows that detection of symmetry is preattentive since subjects neural activity was heightened even when they were not attending to that symmetrical stimulus because a red dot was detected in the stimulus field. (Beck, Pinsk, Kastner, 2005). Finally, a 1997 study described a patient that had had a cardiac episode that left him with normal speech and motor functioning but tests proved that his connection between his preattentive grouping processes and his spatial attention had been impaired. (Vecera & Behrmann, 1997, p. 30) The tests showed that for proximity, similarity, and closure that the patient scored very close to a control subject. However, the patient had significant difficulty with symmetry and continuity tests. (Vecera & Behrmann, 1997, pp. 39-42) From this research it can be extrapolated that the brain can still do grouping of visual stimulus in many cases, but this may

PREATTENTIVE PROCESSING AND TARGET.COM indicate that preattentive processing allows it to be more efficient. Preattentive Processes and the Target.com Website

Todays e-commerce websites are full of rich, interactive information that convey a sense of engagement with the user and Target.com is a typical example of this. This paper will analyze Target.com to see what elements are present that stimulate preattentive mechanisms. The concept of competition for attention and distraction and the malicious use of preattentive stimulating elements will also be discussed. On the left side of figure 1, the top of the landing page of Target.com that was available on October 14, 2012 is shown. The right side of Figure 1 is skeleton sketch of regions that are numbered to facilitate this discussion. We will navigate through the regions under 3 basic topics: The Page Header, The Main Body, and Motion, Distractors and Competition for Attention.

Figure 1: Target.com screen capture (Left) and Skeleton region map (Right)

The Page Header Regions 1, 2 and 3, are the page header. Regions 1 and 2 are separated because the background colors of white for region 1 and red for region 2 would lead to an obvious discernable border. The subtle saturation difference in red between regions 2 and 3 would also get processed preattentively and the fact that regions 2 and 3 are different would get registered. Because these regions have a color difference, anything inside of those regions would be grouped together under then mechanism of closure. Adding to this, the text items inside those regions run parallel to the regional boundaries, the alignment Gestalt mechanism would further imprint grouping on the text within those regions. Items 13 and 14 are in these regions also. Item 13 is a search box, in white, inside of

PREATTENTIVE PROCESSING AND TARGET.COM region 2. While being a normal part of the top of many web pages, and might be a pattern in pattern memory that is normally grouped in this area of the screen, the color and shape of the object are distinct enough from the text to achieve pop-out. Item 14 contains the shopping cart and a number in black in the yellow bubble. Preattentively, this looks like items that are superimposed on region 3 and while they might satisfy proximity, would pop-out because the alignment of the cart crosses the boundaries of region 3 at an angle and the yellow bubble would achieve pop-out since both by shape and color would be different than the contents of region 3.

By the strategic use of yellow here, the most visible color at different levels of luminance, the red items in the page are grouped together, but the yellow becomes a distractor. Even with the color difference the cart and bubble might be grouped with each other because of their proximity to each other. The Main Page Body Regions 4 and 5 are long blank white regions without any content. There is no border between items 4 and 6, but because of the alignment of the blue text in region 6, the preattentive mechanisms would infer that a different region exists and a border would be filled-in between them. Similarly, region 5 and the two abutting regions 10 and 9 would be subject to preattentive filling-in. In this case, regions 5 and 9 are separated from each other with a thin gray line. That line does not extend upward to separate regions 5 and 10, but preattentively that line would be drawn to satisfy closure of region 5. Region 6 is interesting as all the blue text and picture items in the column are in alignment with each other. This proximity and alignment would allow these items to be grouped together within that contour. The icons in the lower half of this region, under the title ways to save would also be grouped together because of proximity and similar color and size. However, this region also has 2 unaligned items superimposed on it. Item 11 corresponds to a picture of the circular sent to peoples homes. Since item 11 is tipped slightly, it pops out from the column indicating that although it is proximate to that column it is unaligned and therefore another area of interest for the user. The item also slightly occludes regions 4 and 7 further indicating superimposition. Region 12 is superimposed on this column and corresponds to the Target brand symbol. Because of closure, the concentric circles would be grouped together and since the top of the circle is apparently occluded by region 3, preattentively the circles would be completed. If the Target symbol were of interest to the reader, it would have already been processed as the full symbol should the user wish to selectively attend to it. The matrix of items in the middle defines region 7. This area might be detected as a region of rows and columns of red items, all similar. In particular, the items change shape but each is red and accompanied by similar blue text captions. From a preattentive point of view, this region of squares would be viewed as a grouping because of similarity of the color red of the

PREATTENTIVE PROCESSING AND TARGET.COM

items, the alignment of blue text to each item in a regular pattern and the fact that each one seems to be in a gray-bordered square. Within that region, one might expect some competition for attention between the differently shaped items. As one study points out that the arrangement of products in a list or a table will offer different amounts of competition for attention and that the tabular form of presentation offers less competition for attention than the list format. (Weiyin, Thong &Yan, 2004). It might be concluded that this format suppresses the preattentive mechanism slightly so that the user can have a pleasurable experience searching the site, but this paper closes with a alternative analysis and recommendation for this area. Motion, Distraction and Competition for Attention Region 8, just above region 7, has a gray-blue background, and contains text using 5 different colors and sizes. The dark black letters pop out and may cause them to be grouped together to also seem to be competing for attention with the rest of the page. Off to the right of region 7 is region 9, containing a Palmolive advertisement inside a dark gray box. This indicates a differently shaped region from the matrix next to it. This advertising region uses different colors than the ubiquitous red and blues of the site. In this case the Palmolive bottles themselves being placed closely together in the ad would lend to grouping items there. Further, the Palmolive brand banner appears large at the top of the region, and on the bottles themselves. Preattentively these banners would signal a grouping based on similarity even though the sizes of the banners were different. Finally in region 10, just above regions 8 and 9, there is a revolving banner that updates every 5 seconds. This area is defined by both the regions that create the perimeter around it, but also by the motion of the banner. While the rest of the page attentively processed as static, Target uses motion as a distractor in region 10. Some of the vendors that advertise in region 9 do the same. In their cases, they are deliberately distracting a user from their current task. For example, on a refresh of this page a Tide detergent advertisement appears in region 9 that has a significant amount of motion (not captured in this screenshot). Recommendations Targets website has some problems which will make for a less than engaging user experience. There are many distractors on the page, even amongst things that might be grouped together effectively by the preattentive mechanism. This competition for attention can lead to distraction and anxiety because of the inability of the subject to ignore irrelevant data and would impair task efficiency or speed of execution. (Derakshan & Eysenck, 2009). In their ubiquitous use of the red brand color, they have created a lot of visual noise. In particular, since they made red a background color, the color of action icons, and the color of objects representing different departments and then further placed them in close grids, all the red starts to become a distractor. A 1992 study showed that response competition was dependent on the proximity of objects to be

PREATTENTIVE PROCESSING AND TARGET.COM grouped but even more so when the target (in the visual field) and distractor of a similar color were somehow connected or showed continuity. (Baylis & Driver, 1992). The recommendations here are to vary the red product icons in the matrix using some other colors and to eliminate the thin gray line that creates the separating effect of the matrix cells. While we have pointed out

previously that tabular presentation might offer less competition for attention than a list (Weiyin, Thong &Yan, 2004), given the contents of the grid being the same colors, this may blunt the good effect of the matrix. Conclusion This paper surveyed the relevant research on preattentive mechanisms and their role in between the physical detection of stimuli by the eye and the later cognitive functions including attention. The paper explained several mechanisms including Gestalt theory with respect to the preattentive mechanism and the role of pop out and various types of grouping. The paper navigated through the Target.com landing page suggesting areas that might stimulate preattentive grouping and offered a few recommendations to reduce the number of distractors to improve the page.

PREATTENTIVE PROCESSING AND TARGET.COM References Baylis, G. C., Driver, J., (1992). Visual Parsing and response competition: The effect of grouping factors, Perception & Psycophysics 51(2), 145-162 Retreived October 14, 2012 From: http://www.springerlink.com/content/4071531p41hp0683/fulltext.pdf Beck, J., (1966) Effect of orientation and of shape similarity on perceptual grouping,

ATTENTION, PERCEPTION, & PSYCHOPHYSICS 1(5), 300-302, DOI: 10.3758/BF03207395 Beck, D. M., Pinsk, M. A., Kastner, S., (2005). Symmetry perception in humans and macaques, Trends in cognitive sciences 9(9), 405-406, doi:10.1016/j.tics.2005.07.002 Conti, G. & Sobiesk, E. (2010). Malicious Interface Design: Exploiting the User, WWW2010, Raleigh, NC: ACM Cornsweet, T. N. (1970). Visual Perception. New York, New York, USA: Academic Press, Inc. Derakshan, N., & Eysenck, M. W. (2009). Anxiety, processing efficiency, and cognitive performance: New developments from attentional control theory. European Psychologist, 14(2), 168-176. doi:10.1027/1016-9040.14.2.168 Fekete, J, van Wilk, J. J., Stasko, J. T., & North, C. (2008) The Value of Information Visualization, Information Visualization: Human-Centered Issues and Perspectives, Berlin, Heidelberg, Germany, Springer Gazzanina, M. S., Ivry, R. B., & Mangun, G. R. (2002). Cognitive Neuroscience - The Biology of the Mind (Second ed.). New York, New York, USA: W. W. Norton & Company, Inc. Mattingley, J. B., & Davis, G. (1997). Preattentive filling-in of visual surfaces in parietal extinction. Science, 275(5300), 671. Molholm, S., Gomes, H., Ritter W. (2001). The detection of constancy amidst change in children: a dissociation of preattentive and intentional processing. Psychophysiology 38(6), 969978 doi:10.1111/1469-8986.3860969 Moore, C. M., & Egeth, H. (1997). Perception without attention: Evidence of grouping under conditions of inattention. Journal Of Experimental Psychology: Human Perception And Performance, 23(2), 339-352. Palmer, S. E., Brooks, J. L., Nelson, R., (2003). When does grouping happen?, Acta Psychologica, 114( 3), 311-330, 10.1016/j.actpsy.2003.06.003. Palmer, S.,E. Rock, I. (1994) Rethinking perceptual organization: The role of uniform connectedness. Psychonomic Bulletin & Review, 1(1), 29-55. doi:10.3758/BF03200760 Pierrot-Deseilligny, C., Milea, D, Muri, R.M. (2004), Eye movement control by the cerebral cortex, Current Opinion in Neurology, 17(1),17-25 Pomerantz, J. R. (2006). Colour as a Gestalt: Pop out with basic features and with conjunctions. Visual Cognition, 14(4-8), 619-628.

PREATTENTIVE PROCESSING AND TARGET.COM

10

Quinn, P. C., Bhatt, R. S., Brush, D., Grimes, A., Sharpnack, H., (2002). Development of Form Similarity as a Gestalt Grouping Principle in Infancy, Psychological Science, 13(4), 320328, Sage Publications, Inc. on behalf of the Association for Psychological Science, Retrieved October 13, 2012, From http://www.jstor.org/stable/40063763 Vecera, S. P., & Behrmann, M. (1997). Spatial attention does not require preattentive grouping. Neuropsychology, 11(1), 30-43. Vuilleumier, P., Landis, T., (1998). Illusory contours and spatial neglect, Neuroreport 9(11), 2481-2484, Retrieved October 13, 2012 From: http://labnic.unige.ch/papers/PV_NR1998.pdf Weiyin, H., Thong, J. L., & Kar Yan, T. (2004). The Effects of Information Format and Shopping Task on Consumers' Online Shopping Behavior: A Cognitive Fit Perspective. Journal Of Management Information Systems, 21(3), 149-184. Yoo, C. Y. (2007). Preattentive processing of web advertising. Youngstown, N.Y: Cambria Press.