Principles of UX / UI (Product Design): Gestalt Principles (Proximity, Similarity, Closure, Continuity)

Gestalt Principles (Proximity, Similarity, Closure, Continuity)

Gestalt Principles: A Portfolio-Ready Study Guide

For aspiring product designers, graphic designers transitioning to UX, and bootcamp students

What This Is

Gestalt principles are visual perception rules that explain how humans group elements into unified wholes—even when parts are missing or disconnected. These principles are the backbone of intuitive, scannable, and delightful interfaces. For example: - Redesigning a checkout flow: Using proximity to group shipping details together reduces cognitive load, lowering drop-off rates.
- Improving a hospital portal: Applying closure to simplify complex appointment cards (e.g., showing only key info with subtle dividers) makes the UI feel less overwhelming.

Mastering Gestalt helps you design faster, justify decisions to stakeholders, and create interfaces that "just feel right."

Key Terms & Principles

• ? Proximity
  Definition: Objects close to each other are perceived as related.
  UI Example: A "Save" and "Cancel" button placed side by side in a modal—users assume they’re part of the same action group.
  Figma Tip: Use auto-layout to maintain consistent spacing (e.g., 8px between related elements, 16px between groups).

• ? Similarity
  Definition: Elements that look alike (color, shape, size) are perceived as part of the same group.
  UI Example: All primary buttons in an app use the same blue fill + white text, while secondary buttons are outlined. Users instantly recognize their hierarchy.
  Design System Link: Define tokenized styles (e.g., button-primary, button-secondary) in Figma to enforce consistency.

• ? Closure
  Definition: The brain fills in missing information to perceive a complete shape.
  UI Example:

• A progress bar with a dashed outline (e.g., ▁▁▁▁▁▁▁▁▁▁▁▁) implies "incomplete" without needing to label it.

• A card with a partial border (e.g., only top and left edges) feels like a cohesive unit, even if the right/bottom edges are "missing." Accessibility Note: Avoid relying only on closure for critical info (e.g., don’t use a dashed line to indicate a required field—add a * or error text).

• ? Continuity
  Definition: The eye follows smooth paths, even if they’re interrupted.
  UI Example:

• A horizontal scrollable list (e.g., Netflix rows) uses continuity to imply "more content to the right" without explicit arrows.

• A timeline UI (e.g., LinkedIn’s "Work Experience" section) uses a vertical line to guide the eye down the page.
  Figma Tip: Use smart animate to create seamless transitions (e.g., a card expanding to show more details while maintaining the "flow" of the layout).

• ? Figure/Ground
  Definition: The brain separates objects (figure) from their background (ground).
  UI Example:

• A modal with a semi-transparent overlay (ground) makes the modal (figure) pop.

• A floating action button (FAB) on Android uses a shadow to separate it from the background.
  ⚠️ Trap: Low-contrast figure/ground (e.g., light gray text on white) fails WCAG standards (aim for 4.5:1 contrast for text).

• ? Common Fate
  Definition: Elements moving in the same direction are perceived as related.
  UI Example:

• A dropdown menu where all options slide down together.

• A loading spinner where all dots rotate in sync.
  Figma Tip: Use prototype mode to animate groups of elements together (e.g., a menu expanding downward).

• ? Prägnanz (Law of Simplicity)
  Definition: The brain prefers the simplest, most stable interpretation of a design.
  UI Example:

• A hamburger menu icon (☰) is universally recognized as "menu" because it’s the simplest representation of stacked items.
• A clean, minimalist dashboard with ample white space reduces cognitive load.
  Stakeholder Tip: When they ask to "add more," remind them: "Prägnanz suggests users prefer clarity over clutter—let’s test if this feature is truly necessary."

Step-by-Step / Process Flow

How to apply Gestalt principles in your workflow:

1. Audit the Current UI (10 min)
2. Open the design in Figma and toggle off layers to see the "bare bones" layout.
3. Ask: Are related elements grouped? Are there visual "orphans" (elements that look disconnected)?

4. Example: In a settings screen, are all toggle switches aligned, or is one randomly placed?

5. Sketch 3 Variations (15 min)

6. Proximity Test: Move elements closer/farther apart. Does the relationship between them become clearer?
   • Bad: A "Submit" button floating alone at the bottom of a form.
   • Good: The button is grouped with a "Cancel" link (proximity) and styled similarly to other CTAs (similarity).
7. Closure Test: Remove borders or dividers. Can users still perceive groups?
   • Bad: A card with a full border around every section.
   • Good: Only top/bottom borders on a card, with white space separating sections.

8. Continuity Test: Add a subtle line or arrow to guide the eye.

   
   
   • Bad: A list of steps with no visual connection.
   • Good: A vertical line connecting steps in a checkout flow.

9. Guerilla Test (20 min)

10. Grab 3–5 people (coworkers, friends) and ask:
    • "What do you think these elements are related to?" (Point to a group.)
    • "Where would you click next?" (Observe if they follow the intended flow.)

11. Pro Tip: Record their mouse movements (use Figma’s prototype mode + UserTesting.com for remote tests).

12. Refine in Figma (30 min)

13. Auto-layout: Group related elements (e.g., form fields + labels) and set consistent spacing.
14. Components: Create reusable styles (e.g., group-container with 16px padding) to enforce proximity.

15. Prototype: Add micro-interactions (e.g., a dropdown menu sliding down) to test common fate.

16. Document Your Decisions (10 min)

17. In your portfolio case study, include:
    • Before/after screenshots (e.g., "Reduced cognitive load by grouping related actions").
    • User quotes (e.g., "I didn’t realize the save button was for this section until we moved it closer.").
    • Data (e.g., "Drop-off rate decreased by 12% after applying proximity to the checkout flow").

Common Mistakes

Design Interview / Portfolio Tips

What Interviewers Look For

1. Problem-Solving with Principles
2. Question: "How would you redesign this cluttered dashboard?"
3. Answer: "I’d apply proximity to group related metrics, use similarity to distinguish primary/secondary data, and leverage closure to simplify complex charts. Here’s a quick sketch..."

4. Portfolio Tip: Include a before/after with annotations (e.g., "Applied proximity to reduce visual noise by 30%").

5. Justifying Decisions

6. Question: "Why did you place the ‘Back’ button on the left?"
7. Answer: "Continuity—users expect left-to-right flow in LTR languages, and figure/ground ensures the button stands out from the background."

8. Portfolio Tip: Add a "Design Rationale" section in your case studies (e.g., "Why We Chose This Layout").

9. Tricky Distinctions

10. Gestalt vs. Affordance:
    • Gestalt: How users perceive relationships (e.g., proximity suggests relatedness).
    • Affordance: How users understand interactions (e.g., a button looks clickable).

11. Gestalt vs. Hick’s Law:

    
    
    • Gestalt: Reduces cognitive load by grouping elements.
    • Hick’s Law: Reduces decision time by limiting choices (e.g., fewer menu items).

12. Portfolio Red Flags

13. ❌ "I used Gestalt principles because they’re cool." → Show impact (e.g., "Increased task completion by 20%").
14. ❌ Only showing final designs → Include sketches, user feedback, and iterations.
15. ❌ Overcomplicating explanations → Use plain language (e.g., "Grouped related items to make it easier to scan").

Quick Check Questions

1. Scenario: A stakeholder wants to add 3 new features to a mobile app’s homepage. The current design already has 5 cards, a banner, and a search bar. How do you use Gestalt principles to push back?

2. Answer: "Applying Prägnanz (simplicity), we should prioritize the most critical features to avoid overwhelming users. We can use proximity to group related features (e.g., ‘Social’ vs. ‘Productivity’ cards) and similarity to distinguish primary/secondary actions. Let’s test a prototype with 5 vs. 8 features to measure cognitive load."

3. Scenario: You’re designing a form where users select their country from a dropdown. The dropdown has 200+ options. How can Gestalt principles improve this?

4. Answer: "Use continuity to guide the eye—group countries by region (e.g., ‘North America,’ ‘Europe’) with subtle dividers. Apply closure by showing only the selected region’s options at first, with a ‘Show all’ link. This reduces the perceived number of choices (Hick’s Law) while maintaining usability."

5. Scenario: A developer argues that a dashed border around a card is unnecessary because "users will figure it out." How do you respond?

6. Answer: "Closure suggests users will perceive the card as a whole even with a partial border, but figure/ground ensures it stands out from the background. A/B testing shows that even subtle borders improve scannability by 15%. Let’s try a 1px solid border instead—it’s less visually noisy but still effective."

Last-Minute Cram Sheet

1. Proximity: Group related elements (e.g., form fields + labels).
2. Similarity: Use color/shape to show hierarchy (e.g., primary vs. secondary buttons).
3. Closure: The brain fills gaps—use it for non-critical visuals (e.g., dashed progress bars).
4. Continuity: Guide the eye with lines/flow (e.g., timelines, scrollable lists).
5. Figure/Ground: Ensure elements stand out from the background (4.5:1 contrast for text).
6. Common Fate: Elements moving together feel related (e.g., dropdown menus).
7. Prägnanz: Simplicity wins—avoid clutter.
8. ⚠️ Trap: Don’t rely on Gestalt alone for critical info (e.g., required fields need labels).
9. Figma Shortcut: Shift + A (auto-layout) to enforce proximity.
10. Portfolio Tip: Annotate screenshots with principles (e.g., "Applied proximity to reduce cognitive load").