Key Insight
We automatically separate visual scenes into foreground figures and background, enabling layered UI.
Key Points
- •The brain always assigns elements as either "figure" (focus) or "ground" (backdrop)
- •Smaller, enclosed, or higher-contrast elements are perceived as figure
- •Shadows and elevation cues reinforce figure/ground separation
- •Modals, dropdowns, and tooltips rely on figure/ground to appear "above" the page
- •Ambiguous figure/ground creates visual tension and confusion
- •[FIGURE 2.11 - Figure/ground perception] Shows: Ambiguous shapes that can be perceived as either figure or ground depending on focus. Teaches: The brain must assign figure vs ground-when ambiguous, perception alternates between interpretations. Reproduce as: Classic figure/ground illusion with toggle highlighting each interpretation.
- •[FIGURE 2.13 - Closure and figure/ground] Shows: Complex overlapping shapes perceived as simple figures due to closure principle. Teaches: We see complex arrangements as overlapping simple shapes rather than complex single shapes. Reproduce as: Shape decomposition animation.
Guidelines
- ✓Use backdrop overlays (dimming) to push page content to ground when showing modals
- ✓Apply box-shadow or elevation to elements that should appear above their context
- ✓Ensure sufficient contrast between layered elements
- ✗Don't stack more than 2-3 visual layers-depth becomes ambiguous
- ✓Use z-index intentionally and document your elevation scale
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention