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 our eyes into something that might be meaningful.
Both the Gestalt psychologists and modern perceptual researchers realized that perception tends to organize information into wholes, rather than parts. For example, you’re most likely grouping the orange shapes above into an arrow, rather than seeing them as separate elements.
We can take advantage of this early perceptual organization so viewers will perceive and understand our visuals correctly and rapidly. One powerful way to impart meaning is through visual grouping. Becoming aware of these principles can also prevent viewers from misinterpreting your visuals from unintended groupings.
Grouping by Boundary or Enclosure
When parts are enclosed by a completed boundary they are perceived as a single unit—as a 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 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 that objects and data are associated in charts, diagrams and maps. In this map, we perceive the countries in blue as a 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
Objects that move or appear to move in a common direction are considered to have a ‘common fate’ and are perceived to be a group. Objects with a common fate are interpreted as more related than elements that are stationary or move in different directions or at different times. This grouping principle is particularly important in animation. To ensure that animated objects are perceived as related, move them at the same time, speed and direction.
Do you use these or similar techniques with visuals? Share your tricks and tips. Comment below.
Get the latest articles, resources and freebies once a month
plus a Visual Design Checklist.
Cooper Design in San Francisco offers a good 2 day Visul Interface Design seminar. Most of this information is covered and the participants are given a number of interesting and challenging exercises demonstrating the principles of visual/ interface design.
This information is great. As an instructional designer we need to use the power of visual to get learner’s attention.
Thanks for the information