• Home
  • Free Resources
    • Storyboard Depot
    • Instructional Design Programs
    • Best Stock Photo Sites
    • PowerPoint Grids
    • eLearning Examples
    • Glossary of Online Learning Terms
    • Graphic Editing Tools
    • Icon Collections
  • My Books
  • About
  • Book Store
  • ON-DEMAND COURSES

The eLearning Coach

For designing effective learning experiences

  • Podcasts
  • LXD
  • eLearning Design
    • Audience
    • Instructional Design
    • Learning Objectives
    • Storyboarding
    • Tests
    • User Interface
  • eLearning 2.0
  • Cognition
  • Multimedia
    • Audio
    • Graphics
    • Video
  • Reviews
    • Book Reviews
    • Software Reviews
  • At Work
You are here: Home / Developing eLearning / The Power Of Visual Grouping

The Power Of Visual Grouping

by Connie Malamed

Tweet19
Pin2
Share14
Share5
40 Shares

visual grouping
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

grouping-by-boundaryWhen 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

grouping-by-proximityThe 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-similarityGrouping 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

grouping-by-connectionWhen 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-fateGrouping 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. Download Visual Design Cheat Sheet

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Writing for Instructional Design

Subscribe to my newsletter AND get my eBook, Writing for Instructional Design.

Get the latest articles, resources and freebies once a month plus my free eBook, Writing for Instructional Design.

CSUN Instructional Design Program

CSUN Instructional Design Program

Fullerton Instructional Design Program

Fullerton Instructional Design Program

University of Denver

university of denver id program

Learn ID at University of San Diego

u of san diego id program

The Learning Guild

ANSWERS TO QUESTIONS ABOUT A CAREER IN ID

answers to 5 key questions about a career in instructional design

BREAKING INTO ID NOW AVAILABLE AS AN EBOOK (PDF)

You can now buy the email course as an eBook to get all the lessons at once and for future reference. Price: $12.50 US.

eBook Cover
Click the image to buy the book.

SITE MENU

Home
Resources
My Books
About
Book Store
Membership Community

TOPIC MENU

Podcasts
LXD
eLearning Design
eLearning 2.0
Cognition
Multimedia (Graphics & Audio)
Reviews
At Work

RESOURCES

Storyboard Depot
Instructional Design Programs
Best Stock Images
PowerPoint Grids
eLearning Examples
Glossary of Online Learning
Graphic Editing Tools
Icon Collections

© Copyright 2021 Connie Malamed · All Rights Reserved