The Law of Figure-Ground: Designing for Contrast
The rule which untangles elements on the screen and helps you perceive distinct elements
Introduction
Consider for a moment your morning cup of coffee. Your eyes land on the white cup against the black countertop. Instantly, you perceive the cup as separate from the counter, even though both items are in your field of vision. The cup, which captures your attention, is the figure. The countertop, serving as the backdrop, is the ground. It’s an intuitive, effortless process. However, what you’re experiencing here is one of the fundamental principles of visual perception, called the Law of Figure-Ground.
This simple yet profound phenomenon is not just about cups and countertops. It’s a principle deeply ingrained in various aspects of life, from visual arts and psychology to design and user experience (UX). Let’s delve into it!
We are looking at Day 10 of the, “30 days of UX laws and principles” . Read Day 9 article before we dive into today’s session.
In this article, we will explore :
- Breaking Down the Law of Figure- ground
- The Law of Figure- ground and UX design
- Real life brand examples
- Difficulties and Limitations
Breaking down The Law of Figure-Ground
The Law of Figure-Ground is one of the crucial concepts of Gestalt psychology, a school of thought born in the early 20th century Germany. Max Wertheimer, Wolfgang Köhler, and Kurt Koffka, the trailblazers of Gestalt psychology, proposed that humans perceive visual stimuli as organized patterns or whole forms, not merely as a collection of separate parts.
Figure-Ground is one such pattern where our perception differentiates an object (figure) from its surroundings (ground). In the iconic Rubin’s vase illusion, where you can see either a vase or two faces but not both simultaneously, the mind uses the figure-ground principle to switch between the vase (figure) and faces (ground), or vice versa.
The Law of Figure-Ground and UX
Now, how does this psychological principle play out in the field of UX design? Imagine navigating through a website or an app. The text you’re reading (figure) is clearly distinguished from the background (ground). Without this distinction, the information becomes a visual puzzle, hindering the user experience. The Law of Figure-Ground helps designers make crucial decisions about contrast, color, and space to make interfaces usable and intuitive.
Consider the layout of a blog site. The blog title, main content, and images are the figures that stand out, while the whitespace serves as the ground, enhancing readability and focus. Or look at navigation menus: high-contrast buttons against a subdued background enable users to find their way around effortlessly.
The application of the Law of Figure-Ground is a cornerstone of effective UX design. It’s all about how we differentiate between primary elements (figure) and the secondary or background elements (ground) to ensure that users can interact with digital interfaces effortlessly.
To dig deeper, let’s look at a few aspects:
Website Layouts and App Interfaces
Designers use the Law of Figure-Ground to structure content and visual elements effectively. On a website or an app, essential elements like headlines, call-to-action buttons, or a menu bar act as the ‘figure’. These figures are often bold, larger, or more colorful, so they immediately draw the users’ attention. The rest of the interface, which could include background colors, textures, or images, is the ‘ground’. It’s designed to provide context, but not to distract attention from the figure.
A well-crafted blog or news site leverages this principle. The headline, for instance, usually in larger and bolder type, stands out as the figure. The article’s text serves as ground. Even within the text, key points or quotes may become figures by use of typography, color, or styling differences.
Navigation Menus
A key component of any digital platform is the navigation menu, which guides users through different sections of the site or app. Here, the figure-ground principle helps ensure that the menu stands out against the backdrop of other content. High-contrast menu buttons against a subdued background help users intuitively find their way around the platform.
Forms and Input Fields
Forms, such as those used for signing up or filling out information, also depend on the figure-ground principle. Input fields (figure) are differentiated from the form background (ground), helping users understand where they need to input information.
Images and Icons
Images and icons used in design also rely on the Law of Figure-Ground. An icon (figure) stands out against its container (ground), ensuring users quickly identify its function. Similarly, in a photo, the subject (figure) is distinguishable from the background (ground), helping to direct the viewer’s attention.
Interactive Elements
Interactive elements like buttons, links, and sliders are critical figures in UX design. They’re designed to stand out against the ground, signaling to users that they’re clickable or interactive.
Utilizing Tools to Fine-Tune Contrast
Maintaining optimal contrast in designs is critical for applying the Law of Figure-Ground effectively. Tools like the WebAIM Contrast Checker and the Color Contrast Checker by Coolors can help designers achieve this balance.
WebAIM: Contrast Checker
WebAIM’s Contrast Checker helps designers validate the contrast between two colors, ensuring compliance with WCAG (Web Content Accessibility Guidelines) standards. This is particularly useful for determining the readability of text against backgrounds.
Color Contrast Checker — Coolors
Coolors’ Color Contrast Checker lets designers test color contrasts and provides a ‘simulate color blindness’ feature for inclusive design.
Real-life Brand Examples
In branding and advertising, the Law of Figure-Ground plays an instrumental role in capturing audience attention.
Google’s homepage exemplifies the Law of Figure-Ground in web design. The minimalist design places the search box (figure) in stark contrast against a white background (ground), highlighting the core service Google offers. This simplicity makes the interface intuitive and user-friendly.
Coca-Cola’s classic logo, with its distinct white script against a red background, leverages figure-ground contrast effectively. This striking color contrast makes the logo immediately recognizable, standing out on store shelves or in advertisements.
In the automobile industry, Mercedes-Benz’s tri-star logo demonstrates a powerful usage of the Law of Figure-Ground. The silver logo (figure) against a usually darker background (ground) showcases luxury and craftsmanship, aligning with the brand’s identity.
National Geographic’s yellow rectangle is another great example. The frame (figure) instantly stands out against the images it encloses (ground), reflecting the brand’s focus on exploration and storytelling.
Airbnb’s website and app provide clear examples of the Figure-Ground principle at work. The design focuses on simplicity, with property images (figure) standing out against a clean, white background (ground). This emphasis allows users to immediately focus on the listings. The contrast of dark text on a white background also aids in readability and navigability, making the browsing experience intuitive and user-friendly.
Spotify’s user interface is another excellent example of the application of this principle. Album art (figure) stands out against the dark background (ground), making it easy for users to visually parse through the vast array of music options. The use of bold, white text for song titles, artist names, and playlist descriptions against the dark theme further enhances legibility and focus.
Difficulties and Limitations
While the Law of Figure-Ground can enhance visual clarity and aid user experience, it isn’t without its challenges and limitations.
- Ambiguity: Sometimes, it’s not clear what’s the figure and what’s the ground, leading to confusion. Rubin’s vase is a classic example where this ambiguity is deliberate, but in design, such uncertainty can disrupt the user’s understanding.
- Overemphasis on contrast: High contrast is essential to distinguish between figure and ground, but excessive contrast can strain the user’s eyes. Striking a balance is key.
- Complex backgrounds: If the background is too detailed or colorful, it might compete with the figure for attention, reducing clarity.
- Cultural differences: People from different cultures may interpret figure and ground relationships differently, posing a challenge in designing for a global audience.
Conclusion
The Law of Figure-Ground is much more than a psychological theory. It’s an indispensable tool in a designer’s kit, shaping how we interact with interfaces, engage with brands, and perceive the world around us. As we navigate the intricacies of this law, it’s crucial to remember that successful design isn’t about choosing the figure over the ground or vice versa. It’s about establishing a harmonious balance that resonates with the audience’s perception, crafting experiences that are not just visually pleasing but also intuitively comprehensible.
From the cup on the countertop to the screen you’re reading this on, the Law of Figure-Ground is silently at work, underlining the power of perception in shaping our interactions with the world. So, the next time you sip your coffee, take a moment to appreciate the subtle dance of figure and ground, and the captivating simplicity of perception at play.
Check out “30 days of UX laws and principles”
Check out Day 9 : The Law of Symmetry
Check out Day 11 : The Law of Past Experience
ANNOUNCEMENT 🔥
We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!
Check it out here and don’t forget to join the wait-list!
