The law of figure-ground is a visual perception law or Gestalt principle. It describes how humans perceive an image by separating it into the figure (foreground) and ground (background). Designers use it to create a clear visual hierarchy between the front “figure” and surrounding “ground,” guiding users’ attention to important design elements.
The Gestalt law or principle of figure-ground is an essential principle of cognitive psychology. It’s valuable for your work as a designer in user experience (UX) and particularly user interface (UI) design. Also called figure/ground, or figure and ground, the law of figure-ground is a long-used staple in graphic design. When you have a clear division between the foreground and background, it helps you offer users the guidance they need to assist them in performing tasks and achieving the goals they want to on your website or app.
The Gestalt principles of perception describe how the human eye finds and the brain organizes visual elements into groups to find patterns. What is important to bear in mind is that this happens naturally for viewers and users. As humans, we do it with very little information to cue from the individual elements we encounter. We see what we see because our minds automatically strive to find order and meaning in the world around us. For example, the Rubin vase pictured below shows the figure-ground principle at work. We see a black vase or two white faces looking at one another. We interpret one or the other, but not both images at the same time.
The phenomenon of perspective: the famous Rubin vase compels viewers to see one thing or another.
© Nicholas Amendolare, Fair Use
More precisely, the principles of Gestalt psychology, also called Gestalt laws, are psychological principles that describe how our minds perceive visual elements. They suggest how human brains perceive objects and visual information, including lines or curves, and focal points in certain ways. These principles include how an image is more than the sum of its parts and how human minds typically group items into meaningful patterns. Because of this simple fact, the Gestalt laws are vital parts of a designer’s toolkit in visual design. This is especially the case when it comes to optimizing user interfaces to welcome users and assure them that they can enjoy a good experience.
The roots of Gestalt theory are well-founded and go back to Germany in the 1920s. The Gestalt school of psychology comprised psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Köhler. The Gestalt psychologists’ approach involved the development of theories. These include: the law of Prägnanz (or good figure), common region, closed region, principle of similarity, principle of uniform connectedness, principle of proximity, principle of continuity, principle of closure, and figure-ground.
The figure is the object that appears to be in the front, while the ground is the area surrounding the figure. This remarkably simple phenomenon explains why the figure-ground relationship is one of the fundamental concepts in visual perception. Designers use it to create meaningful compositions in art and design. The foreground and background are tools that create contrast, balance, and organization. This makes it easier for users to understand the content and navigate the interface.
Figure-ground is a fundamental Gestalt principle, among others.
© Cameron Chapman, Fair use
As a designer, you can apply the figure-ground principle in a variety of ways to create visually appealing and functional interfaces. You can use the law of figure-ground in your designs to:
Create Contrast – When you use contrasting colors, shapes and textures, you can create a clear distinction between the figure and ground. This makes it easier for users to identify the most important elements on the screen and navigate the interface.
The contrast of eBay’s blue Search button on the white background is an example of figure-ground at work.
© eBay, Fair use
Balance Elements – Use the figure-ground principle to balance the elements on the screen. Make sure that the foreground and background are visually appealing and harmonious. This creates a sense of stability and order, making the interface more user-friendly.
Seriously Unsweetened showcases tasteful, and tasty, balance using figure-ground.
© Smashing Magazine, Fair use
Organize Content – Use the figure-ground principle to organize content in a logical and intuitive way. When you separate the foreground and background, you can create a clear visual hierarchy. That will guide the users’ attention to the most important content on the screen. Sometimes you can do this directly over the background with text, but you can also include boxed content to show your users even more noticeable content.
Ocean Health Index’s homepage exemplifies the use of figure-ground to organize content so users can easily see what they can do.
© Ocean Health Index, Fair use
Enhance the User Experience – Above all, use the figure-ground principle to create a visually appealing and easy-to-use interface. This will make it easier for users to understand the content and navigate the interface, resulting in a more positive user experience.
Trellis’s homepage shows how figure-ground enhances the content, with well laid-out and contrasted “figure” elements—the text—set against an appealing and appropriately fertile-looking “ground.”
© Trellis, Fair use
Use a limited number of colors to create contrast and focus the user’s attention on the most important elements.
Utilize shapes and sizes to create visual hierarchy. Make sure that the foreground elements are larger than the background elements.
Use shadows or outlines to separate foreground elements from background elements. This will create a sense of depth in your design.
Make sure that the figure and ground have enough contrast to be easily distinguishable. But don’t have so much contrast that it becomes too distracting for users. Too much contrast can be garish and strain users’ eyes. If you’re in doubt about your contrast, use a contrast checker such as WebAIM to ensure you have enough to make your work accessible and effective.
Take advantage of negative space by leaving some areas blank or with minimal content. This helps keep the interface organized and clutter-free. Moreover, the calm, unbusy space will keep the background from competing with the foreground. It will also give users a fast track to interpret the message you’re presenting.
Be careful not to make your design ambiguous. Remember, the Rubin vase is an example of ambiguity and in that sense is an optical illusion. However, in a design for an interface, it’s important to give users a clear understanding of what’s going on. Any hesitation from your users—for instance, because they are uncertain where the focal point is—will almost certainly work against your brand message.
Remember the culture of your users. Users from some parts of the world may interpret figure-ground relationships differently from, say, an American consumer context. So, be sure to accommodate these if you’re designing for a global market.
Apple is known for its minimalist design, and the figure-ground principle is a key element of its design philosophy. In the Apple Music app, for instance, the foreground and background are clearly separated. The album cover is the figure, and the background is a solid color. This creates a clear visual hierarchy, making it easy for users to identify the most important elements on the screen.
Apple Music offers clear selections by using a cleanly separated foreground and background.
© Apple Music, Fair use
Naya’s homepage exemplifies effective use of figure-ground for its water products. The contrast of the logo over the outdoor picture is one such example. Also note the image. With the athletic woman in the foreground and the misty backdrop, viewers have connotations of healthy exercise and fresh, dew-soaked nature.
Naya’s figure-ground use echoes the natural and health-oriented essence of the company.
© Naya, Fair use
Amazon’s iconic “Add to Cart” and “Buy Now” buttons show how to leverage figure-ground on a website. They are virtually unmissable and entirely self-explanatory to users seeking to buy desired items.
Amazon’s two buttons here are calls to action that stand out well against a background that includes white space.
© Amazon, Fair use
Remember to take full advantage of the Gestalt principle of figure-ground. It is a fundamental concept in visual perception and plays a vital role in UI design, and for good reason. So, use contrasting colors, balance elements, organize content, and enhance the user experience. That way, you can create visually appealing and functional interfaces that are easy to use and understand. And these can be ones that will be both visually appealing and user-friendly—digital interfaces that your users will “get” and take to quickly.
Take our course to learn all about the Gestalt laws and more: Gestalt Psychology and Web Design: The Ultimate Guide.
Read our piece The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate – Gestalt Principles (Part 3) for examples of figure-ground and other Gestalt principles.
Find further fascinating insights in this article: Exploring the Gestalt Principles of Design | Cameron Chapman.
Check this article out for further in-depth information on the law of figure-ground: The Law of Figure-Ground: Designing for Contrast | Incharaprasad.
The figure-ground law involves the human tendency to perceive objects or visual elements as either being in the foreground or the background. A real-world example illustrating this principle is the perception of an image where the figure stands out prominently in the front, while the ground recedes into the back. For instance, in an image of a white apple sitting on a black background, observers focus on the white apple as the figure, while the black background remains as the ground. This determination occurs quickly and subconsciously in most cases. It enables users to discern what to focus on and what to ignore in your design work. The figure-ground principle is a fundamental concept in visual perception and design projects, including product design and how you set out visual information in a user interface or web design. It plays a crucial role in various design disciplines, including user experience (UX) design and graphic design.
The figure-ground principle significantly influences visual perception in design. This principle asserts that people instinctively perceive objects as either being in the foreground (figure) or the background (ground). This perception is critical in design because it affects how users discern and process information in a visual layout.
In design, when you use the figure-ground principle effectively, it can direct the viewer's attention and improve readability and comprehension. For instance, a well-designed webpage uses contrasting colors, shapes, and sizes to ensure the main content (figure) stands out against the background (ground), which aids in quick information processing. Similarly, in UI design, buttons or interactive elements often appear as figures against a less prominent ground, making them easily identifiable and actionable for the user.
One interesting fact about this principle is its roots in Gestalt psychology, which emphasizes that the whole of anything is greater than its parts. Designers apply this principle to create a cohesive and harmonious visual experience that guides the viewer's eye naturally across the layout.
For actionable insights, consider:
Contrast: Use contrasting colors or shapes to make the figure stand out.
Size and Position: Place important elements (figures) in positions where they are easily noticed.
Simplicity: Avoid cluttered backgrounds that can make the figure less distinguishable.
The figure-ground principle plays a crucial role in web design by influencing how users perceive and interact with content. Here are some examples:
Contrasting Colors: Websites often use contrasting colors to distinguish text (figure) from its background (ground). For example, black text on a white background or vice versa. This contrast makes the content stand out and improves readability.
Whitespace: Effective use of whitespace can highlight key elements on a webpage by setting them apart from the background. For instance, a call-to-action button with ample whitespace around it becomes more prominent and attracts the user's attention.
Layering and Depth: When you create a sense of depth through shadows or layering, you can make certain elements appear to 'pop out' (figure) against a flatter background (ground). This technique often features in card designs or modal windows.
Images as Background: Sometimes, a large, muted image serves as the background (ground), with text or other interactive elements overlaid as the figure. This approach can create a visually striking and engaging user interface.
Navigation Menus: In navigation menus, the currently active menu item often appears highlighted with a different color or style, which makes it stand out against other menu items. This uses the figure-ground principle to indicate to users where they are in the website.
Hover Effects: When users hover over links or buttons, a change in color, size, or style can make these elements stand out (figure) against the rest of the content (ground), indicating interactivity.
These examples showcase how you can apply the figure-ground principle in web design to enhance user experience by guiding attention, improving usability, and creating a visually appealing interface.
The figure-ground principle plays a pivotal role in UI (User Interface) design. It profoundly influences how users perceive and interact with an application or website. This principle is foundational for you as a designer to create interfaces that are both aesthetically pleasing and functionally clear. Its role to assist you as a designer is that it can:
Enhance Usability: The figure-ground distinction helps users identify actionable items (like buttons and links) quickly. When these elements are clearly set as figures against a contrasting ground, it reduces cognitive load, making navigation and interaction more intuitive.
Guide User Focus: Designers use the figure-ground principle to direct the user's attention to the most important elements. For instance, if you highlight a 'Sign Up' button against a less prominent background, you can ensure it catches the user's eye.
Organize Information: In UI design, information hierarchy is key. By differentiating figures (primary information or actions) from the ground (background or less critical information), designers can organize content in a way that naturally guides the user through the interface.
Add Aesthetic Appeal: Beyond functionality, this principle contributes to the aesthetic value of the design. A well-executed figure-ground relationship adds depth and visual interest, making the UI more engaging and enjoyable to use.
Create Context: By effectively using backgrounds (grounds), UI designers can create a context for the primary elements (figures). This context aids in conveying the right mood, theme, or brand message, enhancing the overall user experience.
Improve Accessibility: Proper use of the figure-ground principle aids in accessibility. High contrast between elements and their backgrounds can make the interface more usable for individuals with visual impairments.
Overall, the figure-ground principle in UI design is essential to help you create interfaces that are not only user-friendly and easy to navigate but also visually compelling and accessible. It’s a fundamental part of ensuring that your interface communicates effectively with its users.
When you apply the figure-ground principle in graphic design, beware of several common mistakes that can detract from the effectiveness and appeal of your design. Here are key ones to watch out for:
Beware of Insufficient Contrast: One of the most frequent errors designers make is to fail to create enough contrast between the figure (main element) and the ground (background). Poor contrast can lead to elements blending into the background, which makes them difficult to distinguish and diminishes the design's impact.
Don’t Overcrowd Elements: If you clutter a design with too many elements, it can confuse the figure-ground relationship. This overcrowding makes it challenging for viewers to discern the main focus. That will lead to a loss of visual hierarchy and user interest.
Beware of Inconsistent Focal Points: A common mistake is having multiple elements competing for attention as the figure. This inconsistency can confuse viewers about where to focus, thereby diluting the message or purpose of the design.
Don’t Neglect Whitespace: Another mistake is to underestimate the power of whitespace (negative space). That space is a crucial part of a clear figure-ground distinction in your design work. So, help your designs breathe and keep the elements nice and uncramped. When you have the spacing right, your website or app can grab your users subtly in a seamless experience.
Don’t Misuse Color and Texture: Inappropriate or excessive use of colors and textures can disrupt the figure-ground relationship. This misuse can either overly complicate the background or cause the main elements to lose prominence.
Don’t Ignore Contextual Relevance: Sometimes, designers might choose a figure-ground relationship that does not align with the context or message of the design. This mismatch can lead to a confusing or misleading visual narrative.
Beware of a Lack of Focal Hierarchy: If you fail to establish a clear hierarchy of elements, it can lead to a disorganized and ineffective design. Each element should have a defined role and level of prominence relative to others.
So, avoid these common mistakes; it is crucial for you to effectively apply the figure-ground principle in graphic design. Doing so ensures clear communication, enhances visual appeal, and improves the overall effectiveness of the design.
Color profoundly influences the figure-ground relationship in design by affecting how users distinguish between the main elements (figure) and the background (ground). In the realm of design, particularly in user interfaces and graphics, the figure-ground principle, derived from Gestalt psychology, explains how humans separate visual elements based on contrast and color.
Contrast and Visibility: Strong color contrast between an element and its background makes the element stand out as the 'figure', easily catching the user's attention. For instance, a bright button on a dark background is immediately noticeable, guiding user interaction.
Guiding User Focus: Color can direct user focus to key elements. Use colors to make critical elements like call-to-action buttons or navigation links stand out, ensuring users interact with these elements intuitively.
Emotional and Psychological Impact: Colors evoke emotional responses, which you can utilize to emphasize the figure-ground relationship. Warm colors (like red and yellow) can signify energy or alertness, while cool colors (like blue and green) can induce calmness. Use these psychological effects to reinforce the importance or functionality of specific elements.
Creating Depth and Layering: Different color shades can create a sense of depth, making some elements appear closer (figure) and others farther (ground). This depth perception helps in layering information effectively, enhancing usability.
Harmony and Balance: While color aids in differentiating elements, it's crucial to maintain harmony and avoid overwhelming users with too many high-contrast elements, which can lead to confusion or fatigue.
Here are some highly cited pieces of research about the Law of Figure-Ground:
1. Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172-1217.
This extensive review traces the history and evidence for key Gestalt principles of perceptual grouping and figure-ground organization, evaluating modern computational models and neuroscience evidence. It provides a foundation for theory and research on the figure-ground principle.
2. Peterson, M. A., & Gibson, B. S. (1994). Object recognition contributions to figure-ground organization: Operations on outlines and subjective contours. Perception & Psychophysics, 56(5), 551-564.
This tests how familiar configuration affects emergence of subjective contours and figure-ground perception, relating principles to object recognition. Relevant to leveraging affordances in interface design.
3. Driver, J., & Baylis, G. C. (1989). Movement and visual attention: The spotlight metaphor breaks down. Journal of Experimental Psychology: Human Perception and Performance, 15(3), 448-456.
An influential publication on attention and figure-ground perception during motion, challenging spotlight metaphors, this paper is relevant to animation and video interfaces.
Some popular books on the subject of the law of figure-ground and Gestalt perception include:
1. Perception Beyond Gestalt: Progress in Vision Research by Christian Wästlund (2019). This book focuses on the principles of Gestalt psychology and key issues related to vision research, including the role of color in figure-ground segmentation and chromatic assimilation. It provides a comprehensive exploration of Gestalt principles and their implications in vision research, making it a valuable resource for understanding the complexities of perception beyond Gestalt psychology.
2. Gestalt Psychology: A Survey of Facts and Principles by Christian von Ehrenfels. This comprehensive book explores the theory and principles of Gestalt psychology, including the concept of figure-ground relationship. It provides a detailed examination of Gestalt principles, making it a valuable resource for understanding the foundational concepts of Gestalt psychology
To learn about the law of figure-ground, you can enroll in the online course Gestalt Psychology and Web Design: The Ultimate Guide offered by the Interaction Design Foundation. This comprehensive course will provide you with a deep understanding of Gestalt psychology principles and how to apply them in web design. By the end of the course, you'll be equipped to create more intuitive and user-friendly designs. Sign up for the course here: Gestalt Psychology and Web Design: The Ultimate Guide.
Figure-ground theory plays a crucial role in mobile app design since it influences how users perceive and interact with app elements. This Gestalt psychology principle states that people instinctively separate images into 'figure' (the focal point) and 'ground' (the background). In mobile app design, this translates to how users discern interactive elements (buttons, icons, text) from non-interactive backgrounds.
When you apply it effectively, figure-ground theory ensures that users can easily identify important elements, which enhances the user experience. For instance, a button with a contrasting color against a subtle background prominently stands out. It guides the user's focus and action. Moreover, this theory helps you create a visual hierarchy, where the most important elements (like call-to-action buttons) are what users perceive as figures, which draw their immediate attention.
You as a designer can use this theory when you play with colors, shapes, and textures to create depth and focus. When you clearly differentiate between the figure and ground, it helps to reduce cognitive load for users, which makes the app more intuitive to use. Additionally, if you incorporate whitespace effectively, you can amplify the figure-ground relationship. That will further enhance user engagement and app usability.
However, it's essential to strike a balance. If you overemphasize certain elements or overcrowd the design, it can lead to confusion and undermine the user experience. If you thoughtfully apply figure-ground theory, you can make aesthetically pleasing and functionally superior mobile app designs.
Here’s the entire UX literature on Law of Figure by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
