Have you ever heard of gestalt design? If you’re considering a web redesign, then it will serve you very well to become familiar with this set of laws and principles. In fact, you may have already seen them or requested something along their lines from a designer, just without really knowing it.
The word “gestalt” actually has its roots in psychology, and it is a German word that essentially means “global form.” The crazy-beautiful thing about this set of principles is that they dictate—in one form or another—virtually all of the laws one follows as a web or graphic designer.
B2B companies that want a really attractive site that also works on all levels because of a fundamental respect for layout and form should go with a designer who is well-versed in gestalt. In this first installment of our gestalt series, we explain the finer points of figure-ground relationships.
The first step in understanding gestalt design is to start to get a handle on some of the fundamental terms you’ll come across. One of the most basic that you have to understand immediately is the figure-ground relationship. This is a principle that is not quite what it seems upon first impression.
In this way of looking at things, the figure’s really a focal point that’s separate from the ground, which is either the background or landscape on which the figure rests. It’s also the most crucial of all the other gestalt principles. Think of it like this: You can’t understand algebra or even basic multiplication if you don’t first understand how to add or subtract. So, too, is it with the figure-ground relationship in gestalt.
Fundamentally speaking, the roots of this figure-ground relationship can be found in evolutionary psychology. As human beings, our brains work in the following way: When new objects come into our field of vision, we need to have a basis on which we’ll make sense of these stimuli.
It's important that we’re able to decide which elements are figures that demand instant attention and which elements are ground and therefore just provide context, but aren’t too important.
Being able to decide what's a figure from ground vital to successful threat detection. For instance, you’d want to know immediately if what you’re stepping on or about to step on is harmless (just a bunch of leaves) or dangerous (a rattlesnake that’s about to strike).
Of course, the figure-ground relationship also offers more practical benefits: It lets us navigate where we walk to avoid colliding with things. You can look at it as empowering us to notice what we need to notice and what we can safely dismiss.
The figure-ground relationship allows the user to tell content from structure, spot affordances and even understand how indirect depth relates to a two-dimensional way of seeing things. A good designer will be able to use a variety of visual tools as well as styling treatments to show the user this type of context.
He’ll also display important indications to clearly define the figure-ground relationship on a website. It’s also possible—based on the skill level of the designer—to take advantage of normal, figure-ground perception to distort the page layout in unique ways to boost visual interest.
Good web designers will know that they have to make the user see the difference between the figures (the elements of focus) and the ground on any given webpage. There are numerous techniques a designer can rely on to achieve this.
For starters, the smart use of color will help to set figures apart from the ground, as will the thoughtful introduction of shading. Something as potent and direct as highlights can also make the distinction between figures and ground starker. Some specific applications include:
Buttons that actually look like they can be pressed (even though skeuomorphism may be on the way out)
Links that change upon rollover
Overlays that utilize shadows
To wrap your head around the figure-ground relationship in design, it’s best to start simple, so that you’re clear on the basic concept. In the example below, you see two pictures, with the one on the left showing a gray figure that’s sitting on the white ground and the one on the right showing a gray figure with a hole in it, sitting on the white ground.
Clearly, that’s not really apparent upon first glance, especially with regard to the picture on the right. This, therefore, is a great illustration of the fact that figure-ground relationships can be determined by the conventions of human interpretation, contrast and additional factors, too, as you’ll see a little later on.
Chevron is a multibillion-dollar American company that is involved in every aspect of the gas, oil and geothermal energy industries. Few would suspect that it can produce a fine though basic example of the figure-ground relationship, but it can. It just boils down to knowing where to look, and that is on its website.
Chevron’s homepage is a textbook case of a well-defined figure-ground relationship. Even though the homepage features a lot of white or negative space and a slideshow that can be distracting to some users, it nevertheless makes it easy for users to immediately spot the difference between the page’s content (the figure) and the background (the ground).
It’s obvious that the headline, the slideshow and the text blocks are the figures while the white space is the background.
What’s affordance? We briefly mentioned it earlier in the post, but affordance is basically an object’s or the environment’s property that permits a person to perform an action. As far as web design goes, this is specifically relatable to the various call to action buttons that you’ll see on any given B2B site.
For affordance to work, though, the user is first going to have to make an all-important, figure ground-relationship decision. Take a look at the picture below to see how affordance plays out in web design.
Note how both call to action buttons contain the same message, which is to “register for free,” yet that’s where the similarities end. Design-wise, the button on the left exhibits a flat design that seamlessly blends into the background while the button on the right is more geared toward skeuomorphism, as seen by its etched border and the shading around the button.
As a result, you can say with certainty that the button on the right boasts a greater affordance of click for the following reason: The user understands better that he can perform the action on the button due to the visual clues. However, the button on the left, with its flat design, doesn't provide the user with as many visual clues, thereby potentially making it less likely that as many users will actually click on it.
Sometimes, you’ll see a brilliant example of different stages of so-called hierarchy in the ground element of the figure-ground relationship. Such an effect can be a bit subtle, so you’ll have to keep a keen eye out for it. Check out the below example of the LinkedIn sign-up page.
If you look closely enough, you'll see the subtle use of drop shadow on the header, just above the headline. As a result of the placement of this drop shadow, you get another, even niftier effect: There now appear to be different stages of so-called ground (as in background) depth on the page. That’s why we say that that there’s a hierarchy of sorts in the ground.
The header clearly appears to be on top in terms of depth while the section with the pictures of the LinkedIn users and the web form is naturally at a lower depth. Then, going further down the page, there’s even another strategic use of drop shadow below the section with the pictures of the LinkedIn users, so that this section now looks to be on top of the footer.
Sometimes, there are exceptions to the rule that says that it’s best to clearly define figure-ground relationships. You can understand why a design that possesses clarity is so highly valued, though: It’s important, after all, to be able to quickly make the significant distinction between what’s a figure and what’s the ground.
In the following examples, however, you’ll quickly learn that infusing some imagination and creativity in the figure-ground relationship can produce some very memorable site designs.
First up is the design company called Duoh!, which focuses on interfaces, illustrations and brand identities. The site design here is a perfect example of what happens when you bring in a lot of imagination to the traditional separation between the figures and the ground.
With this approach, you may be forgiven for at first thinking that it may be confusing to the user, but it actually works exceptionally well becasue the ground is faded, which allows the figures (the characters that make up Daniel's name and the outline of the bird) to stand out even more noticeable.
Finally, we come to the website of Quechua, which is a French sporting goods company. In this example, we can see how the introduction of moving elements into the figure-ground relationship can defy conventions of what’s expected in such a design principle.
This is just an introduction to the wonderful and somewhat esoteric world of gestalt design. While you may have noticed some of these principles before, you may not have known what the specific reasons or relationships between the elements actually meant.
At least now, though, you have a solid understanding of the very basic fundamentals of gestalt, which is your ticket to making sense of the more interesting and advanced concepts that we’ll be covering in our gestalt design series.
You can look at gestalt as the seed from which much of everything in design (web design or otherwise) flows. Its laws and principles have been behind some of the greatest designs you’ve ever laid your eyes on and which, by extension, have remained highly memorable to you.
One of the biggest objectives of designing a great B2B site is designing for the user. What better way than incorporating some of these gestalt principles in your site design or redesign? Since gestalt relies on the all-important figure-ground relationship to produce attractive aesthetics, it’s a great approach to enhancing the user experience for buyers from a purely visual point of view.
For more information and detailed examples of gestalt design and its applications, see the following, helpful links:
The Gestalt Principles: Figure & Ground
Elements of Visual Design – Figure Ground