Gestalt Principles

Your constantly-updated definition of Gestalt Principles and collection of topical content and literature

84 shares
51
26
7

What are Gestalt Principles?

The Gestalt Principles are a set of laws arising from 1920s’ psychology, describing how humans typically see objects by grouping similar elements, recognizing patterns and simplifying complex images. Designers use these to engage users via powerful -yet natural- “tricks” of perspective and best practice design standards.

The Gestalt Principles – a Background

The Gestalt Principles of grouping (“Gestalt” is German for “unified whole”) represent the culmination of the work of early 20th-century German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler, who sought to understand how humans typically gain meaningful perceptions from chaotic stimuli around them. Wertheimer and company identified a set of laws addressing this natural compulsion to seek order amid disorder, where the mind “informs” what the eye sees by making sense of a series of elements as an image, or illusion. Early graphic designers soon began applying the Gestalt Principles in advertising, encapsulating company values within iconic logos. In the century since, designers have deployed Gestalt Principles extensively, crafting designs with well-placed elements that catch the eye as larger, whole images so viewers instantly make positive connections with the organizations represented.

The whole is other than the sum of the parts.

- Kurt Koffka

CEO of Syntagm, UX Strategist and author, William Hudson explains the Gestalt Principles’ UX relevance.

Gestalt Principles

Some of the most widely recognized Gestalt Principles include:

Closure (Reification): Preferring complete shapes, we automatically fill in gaps between elements to perceive a complete image; so, we see the whole first.

Common Fate: We group elements that move in the same direction.

Common Region: We group elements that are in the same closed region.

Continuation: We follow and “flow with” lines.

Convexity: We perceive convex shapes ahead of concave ones.

Element Connectedness: We group elements linked by other elements.

Figure/Ground (Multi-stability): Disliking uncertainty, we look for solid, stable items. Unless an image is truly ambiguous, its foreground catches the eye first.

Good Form: We differentiate elements that are similar in color, form, pattern, etc. from others—even when they overlap—and cluster them together.

Meaningfulness (Familiarity): We group elements if they form a meaningful or personally relevant image.

Prägnanz: We perceive complex or ambiguous images as simple ones.

Proximity (Emergence): We group closer-together elements, separating them from those farther apart.

Regularity: Sorting items, we tend to group some into larger shapes, and connect any elements that form a pattern.

Similarity (Invariance): We seek differences and similarities in an image and link similar elements.

Symmetry: We seek balance and order in designs, struggling to do so if they aren’t readily apparent.

Synchrony: We group static visual elements that appear at the same time.

Gestalt Principles are in the Mind, Not the Eye

The Gestalt Principles are pivotal in UX design, notably in interfaces, as users must be able to understand what they see—and find what they want—at a glance. A good example are the principles of proximity and common region, as seen in the IDF landing page, below – where colors and graphics divide the page into separate regions. Without it, users will struggle to make associations between unrelated clustered-together items, and leave. For designers, the true trick of Gestalt is never to confuse or delay users, but to guide them to identify their options and identify with organizations/brands rapidly.

Designers must appreciate how the mind strives for ordered pictures and how easily ill-ordered elements frustrate users. Some images are ambiguous; in trying to “decode” Rubin’s Vase, we possess information about profiles and vases, and perceive it in two ways – but never simultaneously. In closure (reification), we recognize a whole image, and deconstructing it into its various elements takes considerable effort. Designers must remember that while the Gestalt Principles are universal to the human experience, fine-tuning their application demands attention to color use and other cultural considerations.

Learn More about the Gestalt Principles

Learn more about how designers employ Gestalt psychology, by enrolling in the IDF’s online course: https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide

For more on building relationships via Gestalt Principles, see Smashing Magazine’s article: https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/

Usertesting.com’s blog features many tips and examples: https://www.usertesting.com/blog/2016/02/24/gestalt-principles/

Content strategist Jerry Cao’s piece on Gestalt Principles for Designers offers many helpful insights: http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-design


Literature on Gestalt Principles

Here’s the entire UX literature on Gestalt Principles by the Interaction Design Foundation, collated in one place:

Featured article

The Law of Similarity - Gestalt Principles (1)

The Law of Similarity - Gestalt Principles (1)

Gestalt is a German word that carries much importance, especially for us as designers. Let’s have a close look at its principles so that we can see how much information this little word encompasses!

The central principle to the Gestalt theory was neatly summarized by the Gestalt psychologist Kurt Koffka: "The whole is other than the sum of the parts." The human eye and brain perceive a unified shape in a different way to the way they perceive the individual parts of those shapes. This global whole is a separate entity that is not necessarily formed by the sum of its parts.

When we fully understand Gestalt design principles, we can utilize them to create more interesting and engaging visual experiences for website and app users. You can take advantage of these laws to design more thoughtfully and effectively, knowing exactly how your work can impact your users.

What Are Gestalt Principles?

Author/Copyright holder: Impronta. Copyright terms and licence: CC BY-SA 3.0

Gestalt principles or laws are rules that describe how the human eye perceives visual elements. These principles aim to show how complex scenes can be reduced to more simple shapes. They also aim to explain how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

“Gestalt” refers to “shape” or “form” in German; the principles – originally developed by Max Wertheimer (1880-1943), an Austro-Hungarian-born psychologist. – were improved later by Wolfgang Köhler (1929), Kurt Koffka (1935), and Wolfgang Metzger (1936).

Researchers have integrated all of these theories to show how people unconsciously connect and link design elements.

This article covers one of the Gestalt Principles (the Law of Similarity). The rest of the principles will be covered in upcoming articles:

  • Similarity (also known as Invariance): The human eye tends to build a relationship between similar elements within a design. Similarity can be achieved using basic elements such as shapes, colors, and size.
  • Continuation: The human eye follows the paths, lines, and curves of a design, and prefers to see a continuous flow of visual elements rather than separated objects.
  • Closure (also known as Reification): The human eye prefers to see complete shapes. If the visual elements are not complete, the user can perceive a complete shape by filling in missing visual information.
  • Proximity (also known as Emergence): Simple shapes arranged together can create a more complex image.
  • Figure/Ground (also known as Multi-stability): The human eye isolates shapes from backgrounds.
  • Symmetry and order: The design should be balanced and complete; otherwise, the user will spend time and effort trying to perceive an overall picture.

The Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. The brain seems to craft a link between elements of a similar nature. Then, we perceive them in a relationship with each other, separating them from other elements in a design. Human eyes are good at filling in “gaps” or connecting “dots”. It happens naturally.

Similarity is influenced by the shape, size and color of the elements. When you mix objects with high degrees of similarity to each other with a group of dissimilar objects, the brain then devotes time and energy to creating a link between them so that it can try to understand their relationship with each other.

Let’s try a quick experiment to check this out. If you’ve got a pencil and paper handy, draw about ten, rough circles on a page (spreading them across the page), leaving enough space between them to fit shapes of a similar size. Now, anywhere in those gaps, draw five or six triangles. Don't worry about geometric perfection: it doesn't matter in this simple illustration. Then, put about three dots anywhere between these shapes. Look away and stand back for a moment. Now, return to your sketch.

Do you notice anything? Your eye takes you right to the dots, doesn’t it? This is because the dots are points, while the shapes are made up of lines.

Designing with Similarity in Mind

In web and interactive design, the similarity law can be used to contribute to building connections between linked elements. This relationship may be either physical or conceptual. You can make the most of this natural human inclination by helping your user’s eye to discern parts of your design you want to accentuate.

Using this linkage might improve the user experience as follows:

Links

Links and navigation systems are essential to allow users to view website content and navigate between different pages.

While links are embedded inside the content, they must certainly be presented uniformly to allow users to identify linked text.

Thus, text links should be differentiated by color and usually shape as well. No matter how you do it, the important thing is that links should be clearly identifiable as such. Make them stand out. Many users will typically consider a link to be any text that is blue and underlined.

The use of the principle of similarity in menus and navigation helps users see the relationship between each group of navigation links. They will then perceive similar navigation items as being related or having a similar place in the site’s data hierarchy.

Content

We can also use color, font size and type, highlighting, etc. to distinguish between and mark the types of content before a user reads them.

For example, quotes that appear in boxes, in a slightly bigger font, with an italic emphasis, are easily recognizable as such. The law of similarity carries our recognition of this standard from one website to another. Each site may use a variant on this theme, but, overall, the pattern is incredibly similar.

Breaking the law of similarity can also help draw a user’s attention to a specific piece of content – such as a call to action. That’s right; we can make use of both sides of the line or border the law makes. The user’s eye is a remarkably easy tool to manipulate; you just need to figure out what parts of your design you want to bring out or tie together.

Headers

Website headers play another essential role in organizing and building well-structured content for search engine crawling and for the reader.

We normally place headers above content in a different font, color, size, etc. from the body of the content. They assist the reader in finding the relevant points in content and help control the overall flow of the work. They’re great milestones and using them wisely (which isn’t hard) will keep your users on your page.

Remember that a user’s eye will activate the brain to work to interpret your design in a certain way. Nothing is more tiring than a solid block of text on a page, with no discernable features to draw the reader’s eye. If you’re near an old literary classic, why not open it and look at a spread of pages?

For example, let’s try Victor Hugo’s immortal Les Misérables on for size. Flicking forward six pages finally brought me to a new chapter heading, which my eye instantly noticed and read. None of the other text had stood out for me before I saw that.

The Take Away

Gestalt psychology is a theory of the mind which has been applied to a number of different aspects of human thought, action and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way the underlying processes are organized to help us make sense of the world.

The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes into a cohesive, meaningful and usable representation of the world. Over the last twenty years, interaction designers and other professionals involved in the development of products for human users have adopted the work of Gestalt psychologists.

Realizing the potential for applying Gestalt thinking helps us create (literally!) eye-catching works. Suddenly, we have new insights and ways of approaching problems and challenges. This is a gift – we can tailor our work according to the ”engineering” of the human eye and brain.

Starting with the Law of Similarity, we find that we can make use of the following to draw a user’s attention and let his or her brain do the rest:

  • Links
  • Content
  • Headers

These three short articles will provide you with a first approach to these laws. However, if you want to cement in your own mind the many ways you can organize visual information and improve your designs for all users, we suggest that you take the course explained below!

Where to Learn More

Interested in delving into the Gestalt principles? Check our ”Gestalt Psychology and Web Design: The Ultimate Guide” course: https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide

References:

Hero Image: Author/Copyright holder: Eumedemito. Copyright terms and licence: Public Domain.

Show full article Show collapsed article

Learn more about Gestalt Principles

Take a deep dive into Gestalt Principles with our course Gestalt Psychology and Web Design: The Ultimate Guide.

One of the key ingredients to a successful product is the creation of effective, efficient and visually pleasing displays. In order to produce such high-quality displays, whether they are graphical (e.g., websites) or tangible (e.g., remote controls), an understanding of human vision is required, along with the knowledge of visual perception. By observing, researching, and identifying examples of our perceptual abilities, we can design products according to these unifying qualities. In order to spread such skills within the world of interaction design, we have developed “Gestalt Psychology and Web Design: The Ultimate Guide.”

Gestalt psychology is a theory of mind which has been applied to a number of different aspects of human thought, action, and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way in which underlying processes are organized and how they help us make sense of the world. The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes and how it becomes a cohesive, meaningful and usable representation of the world. Over the last twenty years, the work of Gestalt psychologists has been adopted by interaction designers and other professionals involved in the development of products for human users.

Within this course, we have compiled and consolidated some of the best resources currently available on the subject of Gestalt psychology and visual perception. To help you appreciate how you can apply Gestalt psychology to web design, we have provided many different examples from existing designs. These draw attention to the exact qualities, quirks, and features of visual perception. Moreover, they discuss how these have been accommodated and, on a number of occasions, exploited so as to support either the user's intentions or those of the designer or client.

The application of Gestalt thinking to design provides us with insights and new ways of approaching problems and challenges. By cementing in our own minds the many ways we organize visual information, we can improve our designs for all users.

All literature

Gestalt principles of form perception

Ch 22: Gestalt principles of form perception

Gestalt psychology attempts to understand psychological phenomena by viewing them as organised and structured wholes rather than the sum of their constituent parts. Thus, Gestalt psychology dissociates itself from the more 'elementistic'/reductionistic/decompositional approaches to psychology like structuralism (with its tendency to analyse ment...

Book chapter
The Law of Similarity - Gestalt Principles (1)

The Law of Similarity - Gestalt Principles (1)

Gestalt is a German word that carries much importance, especially for us as designers. Let’s have a close look at its principles so that we can see how much information this little word encompasses! The central principle to the Gestalt theory was neatly summarized by the Gestalt psychologist Kurt Koffka: "The whole is other than the sum of the ...

  • 313 shares
  • 2 months ago
Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (2)

Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (2)

In this, the second part of our examining Gestalt principles, we’ll look at another Law – the Law of Proximity. This one is especially useful as it deals with how our eyes and brains draw connections with design images. Of course, connecting is also important to us – that’s what we want to make happen between our users and our designs!“The eye t...

  • 461 shares
  • 2 months ago
The Building Blocks of Visual Design

The Building Blocks of Visual Design

Visual design is about creating and making the general aesthetics of a product consistent. To create the aesthetic style of a website or app, we work with fundamental elements of visual design, arranging them according to principles of design. These elements and principles together form the building blocks of visual design, and a firm understand...

  • 182 shares
  • 6 days ago
The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate - Gestalt Principles (3)

The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate - Gestalt Principles (3)

We’re now going to take a look at some more Gestalt principles, building on what we’ve learned in the first two articles. This third piece is particularly useful because having a good grasp of Figure/Ground, Prägnanz, Closure, and Common Fate will enhance your ability to design with more thoughtfulness, confident that you’re making the best use ...

  • 508 shares
  • 2 months ago