When elements are placed close together they tend to be perceived as a group?

Gestalt principles are an important set of ideas for any designer to learn and their implementation can greatly improve the aesthetics of a design as well as its functionality and user-friendliness. 🔊

By

Cameron Chapman

Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.

SHARE

SHARE

Read the Spanish

When elements are placed close together they tend to be perceived as a group?
version of this article translated by Yesica Danderfer

Listen to the audio version of this article

Negative space has long been a staple of good design. Leaving white space around elements of a design is the first thing that usually comes to mind. But then there are designs that use that white space to infer an element that isn’t actually there (the arrow hidden between the E and X in the FedEx logo immediately comes to mind as an example).

When elements are placed close together they tend to be perceived as a group?

Proximity

Proximity refers to how close elements are to one another. The strongest proximity relationships are those between overlapping subjects, but just grouping objects into a single area can also have a strong proximity effect.

The opposite is also true, of course. By putting space between elements, you can add separation even when their other characteristics are the same.

Take this group of circles, for example:

When elements are placed close together they tend to be perceived as a group?

Symmetry and Order

The law of symmetry and order is also known as prägnanz, the German word for “good figure.” What this principle says is that your brain will perceive ambiguous shapes in as simple a manner as possible. For example, a monochrome version of the Olympic logo is seen as a series of overlapping circles rather than a collection of curved lines.

another one of the gestalt design principles, the principle of pragnanz is illustrated with the olympics logo

Here’s another good example of the gestalt design principle “prägnanz”:

a complex example of the principle of pragnanz, another gestalt principle

Your brain will interpret the image on the left as a rectangle, circle, and triangle, even when the outlines of each are incomplete because those are simpler shapes than the overall image.

Common Fate

While common fate was not originally included in gestalt theory, it has since been added. In UX design, its usefulness can’t be overlooked. This principle states that people will group together things that point to or are moving in the same direction.

In nature, we see this in things like flocks of birds or schools of fish. They are made up of a bunch of individual elements, but because they move seemingly as one, our brains group them together and consider them a single stimulus.

a flock of birds illustrates the principle of common fateA flock of birds is viewed as a single unit when flying in the same direction and thereby sharing a common fate. (by Martin Adams on Unsplash)

This is very useful in UX as animated effects become more prevalent in modern design. Note that elements don’t actually have to be moving in order to benefit from this principle, but they do have to give the impression of motion.

Gestalt Principles in UX Design

As with any psychological principle, learning to incorporate the visual perception principles of gestalt into your design work can greatly improve the user experience. Understanding how the human brain works and then exploiting a person’s natural tendencies creates a more seamless interaction that makes a user feel comfortable on a website, even if it’s their first visit.

Gestalt laws are relatively easy to incorporate into just about any design and can quickly elevate a design that seems haphazard or like it’s fighting for a user’s attention to one that offers a seamless, natural interaction that guides users toward the action you want them to take.

• • •

Further reading on the Toptal Design Blog:

  • Design Principles: Introduction To Hierarchy
  • UI Design Best Practices and Common Mistakes
  • How to Use Powerful Gestalt Principles in Design (with Infographic)
  • The Comprehensive Guide to Information Architecture
  • Boost Your UX with These Successful Interaction Design Principles

Understanding the basics

What are the gestalt principles of design?

The classic principles of the gestalt theory of visual perception include similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also known as prägnanz). Others, such as “common fate,” have been added in recent years.

Why is gestalt theory important?

Gestalt principles can quickly elevate a design that seems haphazard or like it’s fighting for a user’s attention to one that offers a seamless, natural interaction that makes your site feel familiar while guiding users toward the action you want them to take.

What is visual hierarchy in design?

In design, visual hierarchy is the arrangement or positioning of different design elements to give them greater or lesser importance. The various gestalt principles heavily influence visual hierarchy.

What is the gestalt theory of perception?

The gestalt theory of perception attempts to explain the way the human brain interprets information about relationships and hierarchy in a design or image based on visual cues like proximity, similarity, and closure.

Why we tend to group items that are close together?

Principle #3: proximity The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. Proximity is so powerful that it overrides similarity of color, shape, and other factors that might differentiate a group of objects.

Which gestalt principles where the elements that are close together tend to be perceived as a unified group?

The Law of Proximity is the gestalt grouping law that states elements that are close together tend to be perceived as a unified group.

When objects are near each other or closer together they tend to be grouped together?

The Gestalt law of proximity states that "objects or shapes that are close to one another appear to form groups". Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close.

What is closure in perception?

Definition: The principle of closure states that people will fill in blanks to perceive a complete object whenever an external stimulus partially matches that object. Even when we're missing information, we tend to make sense of our environment by filling in the gaps to see a complete object.