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.
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.
In practice
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.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
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 SheetComponent
- Modal DialogComponent
Related concept
Connected closely enough to change how you apply this.
- Focus ManagementAccessibility
- Common RegionUI foundation
- ContrastUI foundation
- ElevationUI foundation
- ShadowsUI foundation