In the very early stages of vision—before we’re really conscious of it—our perceptual processes are humming away, attempting to organize the sensory data from vision into something that is meaningful. Visual grouping, also known as perceptual grouping, is one of the key ways that the human visual system provides meaning.
Both the Gestalt psychologists and modern researchers realized that human perception tends to organize information into wholes, rather than parts. Without conscious effort, you most likely used perceptual grouping to transform the orange shapes above into an arrow rather than seeing them as separate elements.
As designers, we can take advantage of this early perceptual organization so viewers will perceive and understand our visuals correctly and rapidly. You can read about these principles of perceptual grouping below. They are a powerful way to impart meaning to your work. Becoming aware of these principles can also prevent viewers from misinterpreting your visuals from unintended groupings. This is one of many ways to improve your infographics.
Perceptual Grouping by Boundary or Enclosure
When parts are enclosed by a completed boundary they are perceived as a single unit—as a visual group. You are telling the viewer that the elements are related. You might draw a line around a set of buttons in the user interface or place a filled area of color in the background of a map or diagram. Here, we perceive the houses on the colored background as grouped and set apart. Enclosure is a compelling way to provide meaning.
Grouping by Proximity
The distance between the elements in a graphic or user interface affects how we perceive and interpret it. We see parts that are close together as one unit and parts that are distant from each other as separate and unrelated. We then assume that visually grouped elements are associated. In this graph on the left, we perceive the bars clustered together as a group. A corollary of this principle is that unintended associations and relationships can occur by placing elements too close together.
Grouping by Similarity
We tend to see elements that are similar in size, color, shape, orientation, brightness and movement as one group. This is an effective way to show the association of objects and data are associated in charts, diagrams and maps. In this map, we perceive the countries in blue as a visual group, indicating they are related in some way.
Grouping by Connectedness
When elements are connected by a line or common edge, we perceive them as part of a group. In fact, it is difficult to perceive the individual elements without seeing the group. Although this may seem obvious, don’t underestimate the power of connection lines. They can override other grouping principles, such as proximity and similarity. Using connection lines between objects is one of the ways we can accurately portray relationships in diagrams and steps in a process.
Grouping by Common Fate
According to the Gestalt principles of grouping, objects that move or appear to move in a common direction have a ‘common fate’ and people perceive them as a group. We interpret common fate objects as more related than elements that move in different directions or at different times. This grouping principle is particularly important in animation. If your intent is to show the relationship between moving objects, then move them at the same time, speed and direction.
For a scholarly look at visual grouping, see Traditional and New Principles of Visual Grouping.
Get the latest articles, resources and freebies once a month
plus a Visual Design Cheat Sheet.
Leave a Reply