Preattentive Processing Ryan Hunt

HF700, Spring 16

HUNT 1

Introduction

Equipped with an understanding of how preattentive vision works, designers can gain

an advantage in their design process by applying certain design patterns that highlight and

differentiate different objects in a scene. Human vision begins its initial processing quickly

and automatically organizes visual information according to the different elements in the

field of view. The preattentive phase is less than 250ms so web designers armed with the

knowledge of how the process works, can be sure that users are drawn to the areas on the

screen that designers want them to be.(Healey, n.d.)

In this paper, I’ll begin by reviewing the neurological and physiological factors in

human vision followed by an examination of contrast and difference recognition applied

using the framework set out by the Gestalt Principles of Psychology. These principles

provide a way to understand how the neurological and physiological components of visual

signal processing can be used in design.

Neurological components of pattern recognition

Once a visual signal is received, it is passed through the optic nerve to the lateral

geniculate nucleus (LGN). The LGN has six main layers of cells with smaller layers of

cells in between, all will different functions. The largest cells are in the two magnocellular

layers are for detecting movement and are not sensitive to color. The other four layers are

called the parvocellular layers are for contrast discrimination (form) and are sensitive to

color. The small layers between the six main layers are made of koniocellular nerve cells

that detect color. The cells in the magnocellular layers (mLGN), parvocellular layers

(pLGN), and koniocellular layers (kLGN) all feed into the visual cortex. (Dragoi, n.d.)

At the front of the visual cortex, known as visual area 1 (V1) and visual area 2 (V2),

there are cells that are specifically intended to process form, color, movement, binocular

depth, and orientation. When a signal hits the retinas, it is inverted both horizontally and

vertically and the processing done in V1 and V2 orient the image and to create a

stereoscopic scene. The information processed through V1 and V2 is sent along pathways

known as the ventral and cortical streams. The ventral stream is a pathway that further

processes form and is known as the ‘what’ pathway. The cortical stream processes motion

and location and is known as the ‘where’ pathway. (Dragoi, n.d.; Krauzlis & Stone, 1999,

p. 559; Ware, 2013, pp. 144–145)

HUNT 2

Physiological components of pattern recognition

As different components of a visual signal are processed, these features are mapped

to different parts of the brain automatically. Anne Treisman, et al. developed a theory called

the Feature-Integration Theory of Attention that states that features are processed

preattentively and primary features are grouped together for processing. Features that don’t

fit into the primary group visually pop into our focus and out of the preattentive phase.(A.

M. Treisman & Gelade, 1980, p. 99; Ware, 2013, p. 153)

Characteristics that can make something pop out as distinct from other things are

ones that are detectible preattentively by the different elements of the LGN, V1, and V2 -

form, color, motion, and location. These distinctions are not equally weighted and as

features are grouped for processing, some features differences can be given a height weight

than others:

… if a single curved letter (e.g., "S") is presented in a display of straight or angular letters (e.g., "X" and "T "), it is also immediately salient. But if the task is to find a target which conjoins two properties (e.g., green and T), each of which is present in other distractors (e.g., green "X"s and brown "T"s), the search is much more difficult. (A. Treisman, 1985, p. 159)

The differences in form and color appear preattentively but further discrimination requires

some degree of cognition and focused attention but it is the popping effect of these

characteristics that indicate where our attention should be focused. (Theeuwes, Kramer, &

Atchley, 1999; A. Treisman, 1985; Ware, 2013, pp. 154–156)

Pattern Perception and Case Study

Gestalt theory is commonly used in design evaluation because of the way it describes

the organization of form. The Gestalt laws were first introduced in 1924 and it can still be

used in understanding visual perception are helpful in analyzing graphic compositions and

visual displays. Here I’ll define some of the Gestalt laws and apply them in a critique of

the design of the website Buzzfeed.com. (Chang, Dooley, & Tuovinen, 2002; Ware, 2013,

p. 181)

HUNT 3

Proximity

Objects that are close together appear as

if they are part of a group. This group of objects

is perceptually treated as an object itself.

Buzzfeed’s articles consist of four distinct elements that are proximately located: an image,

a headline, a tagline, and a byline. These elements are perceived as single object purely

due to their proximity to one another. (Chang et al., 2002; Ware, 2013, p. 181)

Similarity

There are no separators used in the column

of articles to differentiate one article from the

next. And each article is similarly drafted with an

image on the left and the remaining content on

the right. Since each clusters of article elements

are perceived as individual objects, the group of

articles are perceived as a column of similar

objects. Some of the images have icons or badges overlaid in their upper right corner that

perceptually group them together as like objects. (Prinzmetal, 1981; A. Treisman, 1985;

Ware, 2013, p. 182)

Also of note in this example is another illustration of how the yellow win badge not

only pops above the image. Since it’s part of the group of elements for that article, the

entire group can be perceived as popping out and the visual tension between the article

with the yellow badge against the remaining articles with red badges is noticed.

Figure/Ground

The term figure/ground refers to the

relationship between an object and the

background. Darker objects appear to be closer to the viewer than lighter objects. This

illusion of atmospheric perspective is certainly handled preattentively and the relation of

what elements are in the background versus what elements are in the foreground help the

viewer determine what is important on the screen. Buzzfeed uses the figure/ground

relationship in the way that it tags or categorizes articles with graphic badges. Primary

badges use a yellow background with black text. This dual level of attention seeking draws

HUNT 4

viewers to them first by relying on a color that humans are very sensitive to (yellow) with

black text that seems to doubly pop on the screen. The secondary badge type uses a red

background, which our vision is less sensitive to, and a white graphic that appears to be in

the background -or at least on a plane behind the red circle. Even the slight drop shadow

on the yellow badges seems to pop more than on the red badges. By using the figure/ground

relationship to order and assign priority to the badges, hierarchy can be assigned to the

different categories with only visual cues. (Chang et al., 2002; Ware, 2013, pp. 189–191)

Closure

The Gestalt laws of closure make the case that observers

have a tendency to work to make sense of overlapping

forms(Ware, 2013, p. 187). We perceive these forms to be

related as well as spatially overlapped. The aforementioned

category badges overlap article images to illustrate what

category the articles belong to. We perceive the image underneath the badge as being

rectilinear with the left and top sides of the image meeting at a point underneath the

trending badge. This effect is handled preattentively as the badge acts as a distractor that

pops out above the image and we perceive a connectedness in the form behind. (A.

Treisman, 1985)

Common Region

Buzzfeed employs the Gestalt law of Common Region mainly in it’s sub-navigation

bars. This area consists of two horizontal bars across the top of each page that contain links

to different categories of content. Common region refers to an area that is enclosed by a

border and is useful in emphasizing groupings to a degree that is above other grouped

elements. In this case, the navigation bars are a simple application of a common region,

but the color of the bars indicated the links are grouped together and serve a specific

purpose that is separate from the category links. See appendix for examples (Ware, 2013,

p. 186)

Unity

While the design of Buzzfeed is not symmetrical, its columnar layout is consistent

throughout the site. Font types are used consistently and sub-categories of article types all

follow the same general design patterns with the exception of page background colors. This

HUNT 5

cohesiveness in design is an example of how the Gestalt law of Unity allows visitors of the

site to view it as a whole. Related objects are consistent and reliable which allows the site’s

visitors to move through the site knowing what to expect. (Chang et al., 2002)

Conclusion

The preattentive process allows us to filter out visual signals and begin to understand

what is important in the visual field. By making design decisions that take advantage of

preattentive processing and applying the Gestalt laws, designers can guide viewers through

an experience that allows them to find information quickly. Buzzfeed generally applied the

Gestalt Law of Good Form(Chang et al., 2002) by maintaining a simple layout style that is

easy to understand.

HUNT 6

Works Cited

Chang, D., Dooley, L., & Tuovinen, J. E. (2002). Gestalt theory in visual screen design: a

new look at an old subject (pp. 5–12). Presented at the Proceedings of the Seventh

world conference on computers in education conference on Computers in

education: Australian topics-Volume 8, Australian Computer Society, Inc.

Dragoi, V. (n.d.). Visual Processing: Cortical Pathways (Section 2, Chapter 15)

Neuroscience Online: An Electronic Textbook for the Neurosciences | Department

of Neurobiology and Anatomy - The University of Texas Medical School at

Houston. Retrieved February 28, 2016, from

http://neuroscience.uth.tmc.edu/s2/chapter15.html

Healey, C. (n.d.). Perception in Visualization. Retrieved February 29, 2016, from

http://www.csc.ncsu.edu/faculty/healey/PP/

Krauzlis, R. J., & Stone, L. S. (1999). Tracking with the mind’s eye. Trends in

Neurosciences, 22(12), 544–550. http://doi.org/10.1016/S0166-2236(99)01464-2

Prinzmetal, W. (1981). Principles of feature integration in visual perception. Perception &

Psychophysics, 30(4), 330–340.

Theeuwes, J., Kramer, A. F., & Atchley, P. (1999). Attentional effects on preattentive

vision: Spatial precues affect the detection of simple features. Journal of

Experimental Psychology Human Perception and Performance, 25(2), 341–347.

http://doi.org/10.1037/0096-1523.25.2.341

Treisman, A. (1985). Preattentive processing in vision. Computer Vision, Graphics, and

Image Processing, 31(2), 156–177. http://doi.org/10.1016/S0734-189X(85)80004-

9

Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive

Psychology, 12(1), 97–136.

HUNT 7

Ware, C. (2013). Information visualization: perception for design (Third edition).

Waltham, MA: Morgan Kaufmann.

HUNT 8

Appendix I – Screen Captures

HUNT 9