Preattentive Processing and How to Use it in Design

Using Gestalt Psychology

What is Preattentive Processing?

Human perception plays a vital role in what we see. As designers, developers, product owners etc., it is our job to make usable products. Just having baseline knowledge of visual perception can help improve the quality of the products that we deliver.

Scientist and researchers have studied the human visual system for years.

“Visual analysis appears to be functionally divided between an early preattentive level of processing at which simple features are coded spatially in parallel and a later stage at which focused attention is required to conjoin the separate features into coherent objects”.

(Anne Treisman, Computer Vision, Graphics, and Image Processing)

Why does it matter?

Preattentive processing plays a significant role in human vision. Essentially, it is the conscious experience of processing the visual environment. This experience is automated and can take between 200-500 milliseconds to complete in the spatial memory. As designers we can harness the fundamentals of preattentive processing to make information easier to understand. We can use them to help organize information and create designs that work with the human mind and not against it. Thus information can be placed in a way where we can garner the users attention without conscious thought or with very little effort.

The brain contains feature detectors which are a group or individual neurons that detect important stimuli. This goes along with the four pre attentive properties of visualization:

1. Color
2. Form
3. Spatial Postion
4. Movement

Color

Color is one of the most common properties used to call attention. The reason being is that intensities and hues are subjected to preattentive processing. Leveraging colors and drawing the eyes can save time and reduce the need to sift through the information.

Without much thought your eyes are naturally drawn to the green rectangle

Form

Form applies to various attributes from shape, size, grouping, distance amount and more. Altering the properties can give visual prominence to the important areas.

Acorn uses color, size and distance to highlight the significant area

Spatial Positioning

Is the ability to perceive two or more object’s position in space relative to oneself and in relation to each other. The figure to ground/Gestalt psychology provides categories such as proximity, closure, continuity, connectedness and similarity.

Check out this article by Smashing Magazine that provides more in depth information.

Conclusion

Preattentive processing is an important aspect of the human visual system. It allows our eyes to get information just by glancing at the visual environment. Although, these recommendations may be simple and known it is our jobs as product creators to combine the features to create an organized and meaningful visual area to capture conscious attention. By doing so we are optimizing visual design to the way humans visual system naturally works.