Figure and Ground
The eye separates an object from its background, and interfaces use that separation to signal layers.
Definition
A Gestalt principle describing the perceptual separation of a figure from the surface behind it. Interfaces exploit it to communicate which surface is active and which is behind.
Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.
On this plate
Reach for this when
- Designing modals, drawers, popovers and sheets.
- Establishing an elevation system.
- A layered interface feels unstable, or an overlay does not read as being on top.
Common mistakes
- Floating surfaces without focus management.
- Too many simultaneous layers.
- Blur or transparency that reduces text contrast below threshold.
Signals that establish figure
- Elevation through shadow, which is the most explicit.
- A scrim or dimming overlay behind a modal, which pushes the page back.
- Blur applied to the background layer.
- Reduced contrast on the layer behind.
- Size, since the larger area is usually read as ground.
Signals that decide which layer reads as figure
| Signal | Effect |
|---|---|
| Higher contrast against its surroundings | Comes forward |
| Sharpness, where the rest is blurred | Comes forward strongly |
| Smaller area within a larger field | Reads as the object rather than the ground |
| Shadow or elevation | Reads as a layer above |
| Saturation against desaturated surroundings | Comes forward, and tires quickly |
| Occlusion, overlapping another element | Reads as nearer, and is the strongest depth cue available |
In practice
- i.
Modal scrims
DialogsA dimming layer does two jobs: it establishes the dialog as figure and it signals that the page behind is inert. Removing the scrim usually results in users clicking through.
- ii.
The scrim that was too polite
Ambiguous layeringA modal over a twenty percent scrim left the page behind competing for attention, so neither layer read as the figure. The dialogue felt broken without anyone being able to say why.
Local chart
FND·009 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Synsoplevede Figurer
E. Rubin, 1915
Origin of the figure and ground distinction.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applied through
Where this shows up as a concrete interface decision.
- Drawer and SheetCMP·011 · Component
- Modal DialogCMP·010 · Component
Short definition
The one-paragraph version, for when that is all you need.
Related concept
Connected closely enough to change how you apply this.
- Focus ManagementA11Y·004 · Accessibility
- Common RegionFND·006 · UI foundation
- ContrastFND·002 · UI foundation
- ElevationFND·048 · UI foundation
- ShadowsFND·049 · UI foundation