Gestalt Principles of Perception - 1: Figure Ground Relationships

Almost everything that makes graphic design work can be found in a set of laws and principles collectively known as the Gestalt principles of perception. There is no more powerful tool at a designer’s disposal than a comprehensive grasp of these principles. By the same token, those who don’t have a good grasp of them are lost when faced with design projects and often go “fishing” on design gallery sites, being relegated to cliché motifs and layouts. But clients deserve better than our vague understanding. If you haven’t already, resolve to learn the Gestalt principles of perception.

Why learn this stuff? At the risk of sounding like a late night TV commercial, Gestalt principles of perception help to take the guesswork out of design. For instance, once the page content is defined and the communicative objectives are known, Gestalt principles make clear how to distribute elements on the page, when and why to use line delineation, background shading, a gradient, or when and why to group things in an enclosure (or not). Once you understand Gestalt principles, design becomes much simpler and your creative ideas will enjoy a far more effective articulation.

The name makes them sound complicated, but Gestalt principles are not so difficult to get your head around. In fact, each of them can be explained in one short sentence, but often they’re defined in ways that makes most peoples’ eyes glaze over. Well, I want to present them for you here in terms that directly relate to what Web designers do, supported by examples from the Web. This article is the first in a series concerned with better explaining these principles. Each will deal with one of them.

First, here are simple definitions for the Gestalt principles of perception:

Figure Ground Relationship

Elements are perceived as either figures (distinct elements of focus) or ground (the background or landscape on which the figures rest).

Law of Prägnanz

Humans tend to interpret ambiguous or complex images as simple and complete.

Uniform Connectedness

Elements that share uniform visual characteristics are perceived as being more related than elements with disparate visual characteristics.

Good Continuation

Elements arranged on a line or curve are perceived to be more related than elements not on the line or curve.

Closure

When looking at a complex arrangement of individual elements, humans tend to first look for a single, recognizable pattern.

Common Fate

Humans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions.

Proximity

Things that are close to one another are perceived to be more related than things that are spaced farther apart.

Similarity

Things that are similar are perceived to be more related than things that are dissimilar.

* * *

You’ll notice that most of these principles seem to be variations of each other and are otherwise closely related. There’s good reason for this, as they all refer to relationships. Human perception is governed by relationships; how things are similar or dissimilar, how they contrast or blend with one another, and how arrangements of things suggest hierarchies and are affected by context.

For designers, that last sentence pretty much sums up much of what you deal with in your job so it might be nice to get a handle on this stuff. Let’s dive in and learn how to make Gestalt principles work for your designs.

Figure ground relationship

Elements are perceived as either figures (distinct elements of focus) or ground (the background or landscape on which the figures rest).

Why is it important?

I’m talking about this principle first because it is likely the most important. Determining the figure ground relationship is also the very first thing people do when they direct their gaze; new things come into view and our brains need a basis upon which to make sense of things. We have to determine which elements are figures (requiring immediate concern and attention) and which are ground (not so important right now, but do provide context).

This process is of vital importance to humans and likely has its evolutionary basis in threat detection (am I walking on just leaves and weeds or am I about to step on a rattlesnake?). Of course, it also ensures that we are able to prioritize our perception so we don’t go banging into things accidentally or ignore something of immediate proximity and importance. Our perception of the figure ground relationship allows us to organize what we see by how each object relates to others. The short and sweet version is: it allows us to determine what we’re supposed to look at and what we might safely ignore.

We do this instantly and without effort in most cases, as we’re often in familiar surroundings and looking at familiar things. But when we are made to look at something unfamiliar, especially if it is a designed page, figure ground relationship clues determine the success of our experience. This success is the designer’s mandate.

Specifics:

In the context of a website design our figure ground perception helps us to distinguish content from structure, perceive affordances, and understand the importance or implications of implied depth in a 2-dimensional medium. A designer can utilize a great many visual mechanisms and styling treatments in order to provide this sort of context and to communicate important clues to establish figure ground relationships. One can also exploit common figure ground perception conventions to “confuse” the layout in creative ways in order to add interest. Let’s see some examples.

Examples:

In the very simple example above there are two different sorts of pictures, even though both images have identical composition. The picture on the left shows a gray object (figure) resting on a white field (ground). The picture on the right shows a gray object (figure) with a hole in it (all placed on the white background). These relationships are determined both by contrast and by common conventions of human experience …and by other things, as well.

The image above from Nathan Ford's site presents a complex array of graphics, textures, colors, and shapes, but it works. Because of certain treatments to the various elements we’re able to quickly define what constitutes content (figure) and what constitutes structure and background (ground).

Regarding the examples above, one is successful and easy to understand and one is too complex to be effective. The two navigation arrays are identical in composition, but the one the left is quickly perceived to be text content (figure) resting on almost inconsequential background shading (ground). The array on the right is perceived as twice as many figures, since the structure and the content are composed of lines. In this case, lines are perceived to be content, so the structure competes with the content. The result is ugly and distracting.

In this example above, we must make a figure ground relationship decision in order to perceive affordance. Both of these objects are submit buttons, but the one on the left looks as if it could be just another part of the page structure or background shading. The button on the right graphically invites us and affords pushing/clicking. Shading and highlights have made clear what part of this is figure and what part is ground.

There can even be varying levels of hierarchy in the “ground” element. In the example above, Chuck Mallott effectively communicates levels of “ground depth” on his site’s main page and, therefore, levels of hierarchy via the use of a drop shadow. The white area is “on top,” while the shaded area is at a lower depth. This combined with the shading and lowered contrast helps to communicate its slightly diminished importance in the overall page hierarchy.

Figure ground creativity

Working to establish clear relationships with figure and ground in a Web page layout is important, but clear delineations are not always best. A design can be imbued with interesting character and enhanced effectiveness by blurring these lines, so to speak. Here are a few examples of creative figure ground confusion.

Veerle Pieters’ Duoh! site employs a wonderful array of graphics and text that seem to weave in and out of figure and ground. What’s more, cursor interactions with the content sometimes trigger transformations from figure to ground. The overall effect is stimulating and interesting. It’s an example that seems to break the rules, but actually it just obeys deeper concepts within the rules, and to good effect.

David Lam’s main page would seem in some respects to be a complex array of multitudinous elements. But by way of contrast and taking into account people’s typical figure ground relationship determination, David has crafted a design where we quickly “blur” the background and see a very clean design and open layout. Playing with degrees of in-focus is the mechanism used here.

The thoughtpile.org site has an interesting design and an interaction mechanism that plays with relationships of figure and ground. With this site, these relationships seem to constantly change, with seeming ground elements turning out to be interactive figure elements. The effect is interesting, but this sort of thing can be overdone (and frequently is on flash-based websites). When doing this sort of thing, you’ve got to know your audience and your brand very well. This particular example would seem to be quite well done.

Homework

Many of the effects touched on in this article are components of other Gestalt principles and I’ll get to those in subsequent articles. For now, begin working to consciously distinguish between figure and ground elements in designs and elsewhere. Start paying attention to your surroundings with a thought to this particular Gestalt principle. Developing this habit will pay great dividends and by applying these newfound insights you’ll soon begin to easily recognize why some designs or layouts work and why others do not; in both your own work and that of others.

References:

1. Universal Principles of Design, by William Lidwell, Kritina Holden, and Jill Butler

Gestalt Principles Series:

1. Gestalt Principles 1: Figure/Ground
2. Gestalt Principles 2: Similarity
3. Gestalt Principles 3: Proximity, Uniform Connectedness, and Good Continuation
4. Gestalt Principles 4: Common Fate
5. Gestalt Principles 5: Closure

* * *

Hero photo by Neil McIntosh.