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)
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)
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)
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.
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 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)
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)
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. (Ware, 2013, p. 186)
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 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)
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.
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-15184.108.40.2061
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.
Ware, C. (2013). Information visualization: perception for design (Third edition). Waltham, MA: Morgan Kaufmann.