Join David Hogue for an in-depth discussion in this video Gestalt principles, part of Interaction Design Foundations.
Studying how we perceive the world around us has long been an area of interest for artists, designers, and scientists. In 1910, Max Wertheimer, a German psychologist, noticed that a series of blinking lights creates the illusion of motion. Theater marquees take advantage of this illusion, known as the phi effect, to create the racing lights encircling the name of the play or movie. Modern design software uses a similar effect, often called marching ants, to highlight a marquee drawn to outline an area of an image.
Wertheimer and his colleagues, Kurt Koffka and Wolfgang Kohler, studied perception for the next several years, and in the 1920s, Gestalt psychology emerged. The term Gestalt is a German word that means shape or form, and the Gestalt principles and laws describe how we perceive the world around us as meaningful and complete objects, with a clear distinction between foreground and background. We perceive whole objects; not a series of independent parts. There are several Gestalt Laws that describe how we organize our perceptual experiences, and we can use these organizational principles to create designs that are more meaningful, and easier to perceive.
Good design, with solid perceptual structure, actually makes it easier for people to understand and interact with the interface. Before we describe the Gestalt Laws, we need to define two fundamental organizational principles: Figure-Ground, and the Law of Pragnanz. Figure-Ground describes how we organize our perceptions in terms of foreground objects or figures, which are clearly defined, such as a tree, and the background, which may be unbounded or vaguely defined, such as the sky.
The Law of Pragnanz describes how we organize our perceptions into the simplest possible experience. We will interpret ambiguous, vague, or complex objects in the simplest possible way. The Law of Pragnanz is also sometimes called the Law of Good Figure, or the Law of Simplicity, which make perfect sense. Why would our brains expend the effort necessary to process overly complex perceptions, when it easier and faster to perceive things in a simpler way? The Gestalt Laws help us describe and understand how we arrive at this perceptual simplicity, but they also help us understand why vague or ambiguous shapes and images can be hard to understand, and may even lead to perceptual illusions.
The Law of Proximity states that objects near one another in space or time are perceived as being a group, and belonging together. The Law of Similarity states that objects with similar characteristics, such as form, color, size, and brightness, are perceived as belonging together. The Law of Closure explains why incomplete figures are perceived as complete or whole. The Law of Common Fate describes how objects moving together are perceived as belonging together.
The Law of Continuity states that objects aligned along a line or curve are perceived as belonging together, and we will perceive the simplest, smooth path, rather than a complex path. And the Law of Symmetry explains our tendency to perceive symmetric objects as figures on a background. People show a preference for symmetry, but this law also explains perceptions that exhibit multistability; situations where our brain flips back and forth between two distinct perceptions, such as this Rubin vase.
The Gestalt Laws can be used to describe how we perceive much of the structure and meaning in digital interfaces. Looking at this Web page, we can find examples of each law. These tabs and this checkout information form two distinct groups, because of the Law of Proximity. These tabs and the navigational system strengthen our perception of groups, because they have similar characteristics. We perceive this rectangle for the coupon, as a whole rectangle, even though it is clearly obstructed, and we cannot see all of it.
The use of the dashed stroke in the product grid relies on the Law of Continuity for us to perceive this as a solid line, and our eyes follow along that dotted path. And when we choose to add an item to the cart, we receive feedback in the form of a mini cart, and it slides down as a drawer, and we perceive that as a group because all of those pieces of information move together; the Law of Common Fate. Remember, the Gestalt Laws has describe how and why we perceive the world as filled with whole distinct objects.
They're not rules for how to design. When we encounter devices or interfaces that are vague, ambiguous, and difficult to understand, we can use the Gestalt Laws to help us identify the source of the confusion, then develop ways to improve the design, and ensure that people are perceiving the device or interface in a clear and understandable way.
- Understanding the origins of interaction design
- Understanding gestalt principles
- Designing with grids
- Understanding design patterns
- Exploring how people respond to motion and color
- Communicating through labels and icons
- Framing for content and decision making
- Understanding mental models
- Avoiding cognitive overload
- Defining behavior for interaction design
- Designing for clicks and taps
- Understanding the feedback cycle
- Professional resources