Gestalt: the laws of human perception 

'Gestalt' is German for "unified whole". German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler created the Gestalt Principles in the 1920s. The principles are laws of human perception that describe how humans group similar elements, recognize patterns and simplify images when they initially perceive complex objects. Designers use the principles to organize content so it is aesthetically pleasing and easy to understand.

More specifically, the principles are based on the idea that humans subconsciously demand pattern and structure in visuals. Humans are innate order-seekers, and are constantly trying to impose this upon things they see. This instinct is driven from a desire to process things that are seemingly chaotic. 

It came about in 1910, where psychologist Max Wertheimer observed a series of lights flashing on and off at a railroad crossing in Germany. He noted the similarity to how lights surrounding a movie theater marquee also flash on and off. The lights gave the illusion of moving in a circle around the marquee, traveling from one bulb to the next. However, the bulbs were simply turning on and off in sequence and did not move. This observation sparked the idea behind the gestalt principles of perception, which were formulated by Max Wertheimer and two other German psychologists, Kurt Koffka and Wolfgang Köhler. Kurt Koffka once said: 'The whole is other than the sum of the parts.' This again reinforces that humanity subconsciously seeks to organize complex images that consist of multiple elements into a much simpler whole; they are innately seeking patterns and structure in their environment.

In design, Gestalt principles are the foundation of visually appealing and effective designs. They are used to arrange elements and information in ways that our brains naturally organize and perceive them. From mobile apps to brochures, designers use these principles to deliver visually stunning work and useful experiences.

Gestalt psychological principles therefore help designers access their viewer's subconscious, anticipating how they will perceive a logo, layout, or website. When designing, gestalt is important to consider and factor how the design would be considered as a whole. This helps the designer focus on the overall impact of a design, rather than being weighed down by complex details. The following work aims to break down the principles individually, and explain their relevance and application in modern design.

Gestalt theory is made up of a number of guiding principles, which break down specific elements of the theory of perception. The principles of gestalt theory include: similarity, continuation, closure, proximity, figure/ground, symmetry & order (or Prägnanz), common fate, past experience and parallelism.

The similarity principle states that we see elements which are similar to each other to be more related than those that are different. We percieve similarity through the same use of color, form, or style. 

As in the case above, there might be a group of elements that share the same form, but feature two colors across the group. The eye perceives the elements that share the same color as more similar than those which feature a different color. This principle can therefore be applied to graphic design by helping viewers categorize a complex layout; the viewer should be more likely to connect, for example, that a series of titles in one colour would differ from a similar title in a different colour.

The important application of this principle can therefore be used to direct attention away from a mass of similar items; a call-to-action button could be a different color from other buttons to mark out its significance.

The continuity principle of Gestalt states that we group elements that seem to follow a continuous path in a particular direction. 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. The human eye continues to follow the path even if an obstacle hides it or its flow is "broken" by interlinking or bisecting visual elements. It relates back to the instinct to seek the most efficient solution to a problem.

Consequently, such a tendency can be harnessed by the designer to lead the viewer's eye; it can become particularly useful for directing the gaze towards a key piece of information. A further example might include graphic lines or pathways on a website that encourage the onlooker to scroll down, sideways, or towards an important button or registration terminal.

The principle of closure expounds that humans complete or fill in the gaps of incomplete shapes to create the illusion of a whole shape. For example, a triangle without one of its points will still be identifiable as a triangle to the eye. 

Closure is most commonly seen in “optical illusion” logos. This common design strategy creates the impression of a whole object using simple and often incomplete lines and shapes. Some of the most recognizable examples of closure logos include those for WWF, IBM, and NBC. Another very important example of closure is when a partial image is shown to be fading off the user’s screen in order to show them that there is more to be found if they swipe left or right. Without a partial image - like if only full images are shown- the brain does not immediately interpret that there might be more to be seen, and therefore the user is less likely to scroll or swipe as closure has already been made.

The principle of proximity states that we perceive objects which are close to one another as a group. This is true even if the color, size, or shape of the objects differ. The above example illustrates that although both groups of circles have differing colour, each group still appears related to itself becaus of proximity.

In practice, proximity is therefore useful for visually separating elements or items of information. In website design, white space can separate menu options, images, or buttons from each other. On a newspaper site design, for example, the headline stories might be made to appear separate from other stories, and more related to other headlines by simply inserting more white space between headlines and other columns. In this way, the proximity principle is also useful for helping to establish a sense of hierarchy in the design by separating different areas of it in a hierarchical order. 

The figure/ground theory describes how people instinctively seek to separate a whole image into foreground and background. Such a trait is born from living in a 3D environment, in which it is necessary to assess those objects which are closer or further away. But even when seeing something in 2D, the human eye still attempts to impose this 3D conversion, separating images into two dimensions: the figure at the forefront and the ground behind.

The designer can exploit this tendency by experimenting with contrast and color (darker or bolder elements are often perceived as a figure), size, or focus; an optical illusion is thus possible using figure/ground where a surprising element can be situated in the 'ground' that the viewer only sees after assessing the figure. Such a technique was famously accomplished by Rubin where two faces exist outside the silhouette of a vase.

The Gestalt principle of symmetry and order or Prägnanz - the German word for 'good figure' - relates to the way a person's brain will attempt to order ambiguous shapes into a more simple understanding of the perception. If, for example, a person saw an overlapping black silhouette of a circle and square together (see above), they would still describe these two shapes separately since it would be a simpler classification than describing the combined shape as one. Symmetry therefore relates to this desire to establish the most simplest form of order, as the mind will immediately see a symmetrical design as more balanced and orderly than a random arrangement. The desired goal of using this principle is therefore concerned with helping the viewer find harmony and structure within a design, as this will more likely prompt better engagement and satisfaction.

A composition is balanced when all objects in it have visual equilibrium; it can be achieved both symmetrically and asymmetrically, and relates to the concept of visual weight. This states that every element in a composition has a perceived weight, and is more apparent when an element is compared to another and one seems to be heavier than the other.

When elements of a design and their visual weights are equal on both sides of the axis, the result is symmetrical balance. Reflection symmetry occurs when objects on both sides have the same arrangement; radial symmetry occurs when objects rotate around a center point; and translation symmetry occurs when the same objects are repeated over some interval. On the other hand, if multiple small elements were offset by a single large element and a bias of negative space, then asymmetrical balance would be achieved by targeting visual weight equilibrium on both sides of the axis.

Unexpected breaks in a seemingly symmetrical or asymmetrical design can thereby focus the viewer's attention there, and create the space for a key object like a link or call to action button. The use of balance and order is therefore critical to design, and bears more responsibility than at first may appear.

Common fate is the principle which refers to the human tendency to perceive visual elements moving in the same direction or in unison as grouped. But visuals do not need to be moving to convey motion. Cues such as arrows and the rotation angle can indicate the direction in which the elements are perceived to move. This law therefore suggests that when objects move in the same direction or at a similar pace, our brains automatically group them together. We perceive these objects as a cohesive unit, sharing a ‘common fate’. For example, when watching a parade, the viewer sees each marching band as a separate group, even if there is no actual physical boundary dividing them; they move together, so are perceived as a unit.

An example of this theory's application can be found on Spotify’s web player, where if the user selects 'Your Library,’ a list of their saved songs, albums, and podcasts appears. As they scroll down, every element associated with a song — its title, artist, and album cover — moves upward together, creating the impression of a unified, single entity. Despite these elements being distinct, the user naturally perceives them as one because they move synchronously, reflecting the Law of Common Fate.

However, the Law of Common Fate may be a powerful tool, but it does have its limitations: -

1. Overuse: overusing this principle can lead to visual clutter and confusion. If too many elements move together, it can be difficult to differentiate between them;

2. Misapplication: misapplying the law can mislead users. For example, if unrelated elements move together, users might perceive a relationship that does not exist, leading to misunderstandings;

3. Dependency on movement: the law heavily relies on movement for its effect. Static designs may not achieve this;

4. Cultural differences: perceptions can be influenced by cultural experiences. Therefore, a design based on the Law of Common Fate might not be interpreted similarly by different cultural groups.

In summary, the Law of Common Fate is a potent tool for the designer. Its roots lay in the early development of Gestalt psychology, with its principles being validated through a series of ingenious experiments. Its applications are extensive, from the way we perceive a flock of birds, to how we navigate websites, and even how brands appeal to us. The Law of Common Fate serves as a reminder of how the human mind seeks patterns and coherence in the world around them. By understanding and applying this law, the designer can communicate more effectively, design more intuitively, and connect more deeply with the audience. Indeed, both designer and user share a ‘common fate’ in the quest for understanding and order in the complex visual world they live in.

The Gestalt principle of past experience highlights how human personal experiences and cultural background shape the way they perceive visual information. Moreover, designers can use this principle to create more effective designs by taking into account the experiences and cultural backgrounds of their target audience. By incorporating design elements that are familiar to the them, they can create a more relatable and engaging user experience.

For example, if a designer's research shows that their target audience is familiar with a particular design style, incorporating that style into the design can make it more recognizable and familiar to them. As a result, users are likely to connect more strongly with the look and feel of the design. 

The above two familiar web interface icons - a menu and home icon - provide an example of two widely recognized visual icons, which are commonly used to navigate back to the main screen or site menu of a website or app. Users are already familiar with these icons from their past experiences of using other websites and apps, and have developed an expectation of what it should look like and what it represents. By using similarly familiar icons in the design, the designer can create a more intuitive and user-friendly experience for their audience.

The principle of parallelism is defined by the suggestion that arranging elements in parallel lines, curves or shapes will make them appear as a single unit. This creates a sense of unity and consistency, making the design visually appealing and easy to comprehend.

One example would see the designer aligning text, images, and other elements in parallel lines to create a sense of structure and coherence. This will present information that is more accessible to the viewer, whilst also directing the viewer's eye towards specific areas of the design, such as CTAs.

A further application of parallelism is reflected in the above picture of the drinking glasses: the use of consistent white space around and between the elements helps reinforce the idea they are a set or single unit; there is parallelism of alignment, which reinforces the image as a cohesive and visually appealing layout.