Loading…
Loading…
The brain separates visual scenes into figure (focus) and ground (background), directing attention to the foreground.
stellae.design
The Figure-Ground principle is one of the foundational Gestalt laws, first described by Danish psychologist Edgar Rubin in 1915. His famous Rubin's Vase illusion demonstrates how the brain toggles between seeing a vase (figure) and two faces (ground). In UI design, this principle governs how users distinguish interactive elements from their backgrounds, how modals overlay content, and how visual hierarchy directs attention to what matters most.
The figure-ground principle — one of the foundational Gestalt laws — describes the brain's automatic process of separating visual elements into a foreground subject (figure) and a background field (ground), and it operates within the first milliseconds of perceiving any interface. This perceptual mechanism determines what users see as the primary content versus the supporting context, making it the most fundamental building block of visual hierarchy in interface design. When figure-ground relationships are ambiguous or inverted, users struggle to identify what to focus on, which interactive elements sit in front, and how overlapping layers relate to each other — creating confusion that no amount of labeling or instruction can resolve because the problem is perceptual, not informational.
Apple's system modals overlay a blurred, dimmed background that pushes the entire underlying interface into perceptual ground while the sharp, elevated dialog box commands attention as the figure. The contrast between the crisp foreground panel and the defocused background is so strong that users immediately understand the spatial relationship and focus hierarchy without any instructional text. This pattern has become a universal convention precisely because it leverages the figure-ground principle so effectively.
Spotify's persistent Now Playing bar sits at the bottom of the screen with a distinct background color and subtle top shadow that separates it from the scrollable content above, establishing it as a foreground figure that always remains accessible. The bar's visual weight is strong enough to register as a distinct layer but not so dominant that it competes with the primary content area for attention. This calibrated figure-ground balance lets users maintain awareness of playback state while browsing without either element overwhelming the other.
A web application opens a confirmation popup directly on top of the page content with no background dimming, no shadow, and the same white background as the underlying page, so the popup visually merges with the content behind it. Users cannot tell where the popup ends and the page content begins, and they accidentally click elements on the background layer thinking they are interacting with the popup. The absent figure-ground separation turns a simple confirmation into a disorienting experience that requires users to actively search for the boundaries of the dialog.
• The most common mistake is relying solely on borders or outlines to separate figure from ground, which provides weak perceptual separation compared to value contrast, shadow, or blur — borders delineate boundaries but do not create the depth perception that triggers the brain's figure-ground response. Another frequent error is using background scrims with insufficient opacity, so the underlying content remains visually active and competes with the foreground element for attention, creating an ambiguous layer hierarchy. Teams also often forget that figure-ground relationships must work in both light and dark modes — a shadow that clearly elevates a card on a light background may be completely invisible on a dark background, requiring a different depth strategy such as lighter surface colors or luminous borders for dark mode contexts.
Was this article helpful?