How To Organize Information for Early Visual Perception

Posted: 14 Apr 2014 05:30 AM PDT

Visual perception is a 2-direction process of information flow. Visual data at each end of the process interacts with and influences what happens at the other end. Understanding how the process works allows us to form design principles based on how we perceive our visual environment.

A texture of stripes — The primitive feature color, is used to organize the texture into stripes

The last couple of weeks I talked about the mechanics of visual perception. I’d like to spend the next few weeks talking about design principles that arise from those mechanics and consider what we can do as designers to take advantage of the way our senses take in information and how our memory processes what we see.

Much of what follows in this series will come from the book Visual Language for Designers by Connie Malamed. The topics I cover here will follow the chapters below from the book.

Organize for Perception
Direct the Eyes
Reduce Realism
Make the Abstract Concrete
Clarifying Complexity
Charge it Up

Note that my post titles probably won’t follow the above chapter titles exactly, but hopefully the above gives you a sense where this series of posts is heading.

What Happens in Early Vision?

To understand our surroundings we first form a rough picture of our visual environment and later use our rough picture to determine where to look next. The rough picture is formed unconsciously in early vision, while conscious decision is made during later vision. Two different types of processing are involved.

Parallel processing — occurs in early vision. Instead of scanning objects one by one to find something we quickly see features that pop out from some objects.
Serial processing — occurs in later vision and is a longer process. It’s guided by selective attention and we do scan objects one by one based on something we’re consciously looking for.

Through primitive features, textures, and grouping, we reduce the cognitive load of our visitors

Pre-attentive processing is the unconscious accumulation of visual information that occurs in early vision. Our eyes scan our surroundings to detect prominent features. Eye movement is driven by the attributes of objects rather than conscious decision about where to look.

Early vision organizes what we perceive visually and gives it structure. Our eyes can quickly see primitive features like color and size that pop out. We’re able to unconsciously recognize the relationships elements have with each other and the relationship they have with the whole.

Our ability to recognize relationships allows us to separate figure and ground and organize the information we see into meaningful groups of units.

Being able to quickly recognize primitive features like color and size also enables us to distinguish textures, which are essentially areas with similar features. We recognize changes in texture and see the change as a border or boundary between two textures.

Knowing how quickly and unconsciously early vision occurs, we can design in a way that enhances the visual process. We can organize and structure our designs in ways that complement and speed up visual processing. We can grab attention and provide meaning to what’s on the page through the use of primitive features and grouping. We begin the process of communicating with our viewers before they’re even consciously paying attention.

Offload Cognition — Don’t Make Me Think

Pre-attentive vision begins when something new appears in our visual field and before conscious attention is paid to it. The process scans the new information and gives it meaning that’s recognized by the unconscious.

It’s an important step for understanding our visual surroundings. How well we organize the visual data we take in and how well we combine it with existing schemas can determine how well we comprehend the information.

As designers we can attract the eye to the most important information by emphasizing primitive features and creating the pop out effect. By grouping related information we can help the viewer know which information goes together and which should be compared to which.

Organizing and emphasizing information for early vision creates something of a domino effect. We reduce cognitive load (don’t make me think) from the moment a person encounters our design. We group information so the viewer doesn’t have to. We call attention to the most important information so the viewer doesn’t have to decide where to look for it.

Both help viewers interpret the information they see as we intended and it enhances their comprehension. Our message is more likely to be understand if we align our design with the pre-attentive process in early vision.

Think about how people will find, organize, and group visual information and make it easy for them. Reduce the cognitive load of your audience. Think how quickly they can recognize primitive features.

Emphasize the features of some objects against a background without distraction. Make those objects stand out and attract attention. Group like elements together and create textures to help people quickly understand the structure of your design.

Cognition takes effort and if we offload some of the work we can help viewers move some visual processing from working memory to early visual perception. We can reduce their cognitive load by doing some of the work for them and leaving more room for them to process our message.

Create Pop Out with these Primitive Features

Primitive features can be quickly found, scanned, and recognized before conscious attention is paid to them. We can use these features to make elements pop out and get noticed. Our eyes will register the pop out features and they’ll be more likely to hold our conscious attention in later vision.

Features most likely to attract attention include:

size
color
depth
shape
motion
orientation
line curvature
line terminators
closures (enclosed space)

All can be emphasized and contrasted in ways that makes them visually prominent. Emphasizing multiple primitives in a single object will create even more prominence.

For pop out to occur a viewer must be able to distinguish the feature from everything else. The difference between the same feature in other elements must be great enough to quickly distinguish between them. If the difference isn’t large enough, it might be confused as noise.

Use Texture To Structure Your Information

One of the first things we do in pre-attentive vision is organize primitive features into regions of texture, which form the optical grain of a composition.

Our unconscious connects and groups objects into different regions separated and bound by abrupt changes in texture. The change in texture defines where one object begins and another ends. Textures become shapes and organizations of shapes for our later conscious attention to explore.

This is where we decide what is figure and what is ground. Textured areas tend to be seen as figure and non-textured areas as ground. Color and size also contribute to our determining the figure/ground relationship, which is a prerequisite for being able to perceive shapes and identify objects.

When a texture is made from simple primitives like repeating lines or shapes it can pop out. When emphasized enough texture can even be more prominent than shape or line. Pop out can be lost, however, if the texture is placed against a busy and complex background. It becomes more difficult to recognize the boundaries of each texture as they don’t offer enough contrast with the busy background.

Texture presents spatial information and provides depth cues. Separating textures from one another during early vision is one of the keys to understanding the meaning of a design

While it might not be the first thing you think about in regards to texture, text can be repeated, varied, layered, and generally manipulated to create textures. The words convey literal meaning (that may or many not be legible), while the texture created conveys a visual meaning.

Group Information so Visitor’s Don’t Have to

Spatial organization is a fundamental operation of the pre-attentive process. We have a tendency to organize elements into meaningful groups based on location and arrangement. An understanding of where objects are located and how they’re arranged is important to understand and move through the visual environment.

We group the parts into wholes. Elements are associated and thought of as belong to single larger units. The relationship between them becomes a valuable mechanism for cognitive processing and conveying meaning.

It’s Gestalt theory and principles in action. We group parts into wholes and seeing the wholes takes precedence over seeing the individual parts.

By arranging elements into meaningful units we take cognitive load away from the viewer. I’ve mentioned a few times how reducing cognitive load improves comprehension. It makes visual search quicker and helps viewers organize and interpret the information they see.

We can employ several tactics to group our elements and you might notice their connection to Gestalt principles.

Proximity — place related elements nearer each other than to unrelated elements
Similarity — elements that are similar should look similar
Symmetry — symmetrical elements are more likely seen to belong together
Boundary — enclose like elements and separate them from other elements
Connectedness — physically show the connection between related elements

We can even make new features emerge such as having a set of lines radiate from a common central point lead to a picture of the sun emerging.

Summary

In early vision, before we’re consciously controlling where to look, our eyes can quickly find and recognize the primary characteristics of objects. By emphasizing these primitive features we can quickly draw the eye to an element.

In addition to creating pop out, designers can create textures that help viewers separate figure from ground and help them understand the structure a design. We can also take advantage of pre-attentive processing’s desire to group elements by grouping them ourselves.

Through primitive features, textures, and grouping, we reduce the cognitive load of our visitors. We move some of the load from working memory to initial perception. Reducing the cognitive load of the visitor leads to greater communication and comprehension.

Next week I want to continue talking design principles that arise out of visual perception mechanics. I’ll continue with what the mechanics suggest about how we can direct the viewer’s eye through a composition.

Download a free sample from my book Design Fundamentals.

The post How To Organize Information for Early Visual Perception appeared first on Vanseo Design.