curiositech/gestalt-web-design

Gestalt Web Design

Applies Gestalt psychology principles to create interfaces that feel "obvious" to users by aligning with hardwired patterns of human visual processing.

Decision Points

When Proximity and Similarity Conflict

IF elements are functionally related BUT visually different:
  └── Apply proximity first (group with spacing)
  └── Then break similarity deliberately (e.g., accent color on primary CTA)
  └── Use 3:1 spacing ratio minimum between groups

IF elements look similar BUT serve different functions:
  └── Increase visual difference (color, size, or shape)
  └── Maintain proximity grouping for actual relationships
  └── Test: can user distinguish purpose at 3-second glance?

IF user needs to scan many similar items:
  └── Perfect similarity for easy scanning
  └── Break similarity only for critical state changes (error, selected)
  └── Use consistent spacing grid throughout

Spacing Hierarchy Conflicts

IF content requires more than 4 spacing levels:
  └── Audit for over-segmentation
  └── Combine related groups using similarity instead
  └── Reserve spacing jumps for major semantic boundaries

IF equal spacing is creating false groups:
  └── Implement 2:1 minimum ratio between spacing levels
  └── Map spacing to information architecture
  └── Test grouping perception with 5-second exposure

Figure-Ground Ambiguity

IF multiple elements compete for attention:
  └── Apply elevation hierarchy (ground/surface/raised/overlay)
  └── Dim background elements using opacity/desaturation
  └── Ensure only ONE primary figure per screen area

IF modal/overlay feels weak:
  └── Darken backdrop to 50-70% opacity
  └── Add substantial shadow to modal container
  └── Remove competing elements from z-index stack

Failure Modes

Schema Bloat

Symptoms: Users report "too busy" or "overwhelming" despite minimal content Diagnosis: Too many visual groups breaking proximity law Fix: Consolidate related items using tighter spacing, remove unnecessary dividers, establish 3-tier spacing system maximum

Invisible Boundaries

Symptoms: Users click wrong targets, miss related controls, confused navigation flow Diagnosis: Insufficient proximity differentiation between groups Fix: Increase inter-group spacing to 2.5x+ intra-group spacing, audit click heatmaps for misdirected interactions

False Similarity

Symptoms: Users expect identical behavior from visually similar elements that function differently
Diagnosis: Inconsistent visual treatment for different interaction types Fix: Create distinct visual categories for each interaction pattern, audit all buttons/links for consistent styling within function type

Ground Competition

Symptoms: Users cannot locate primary content or miss critical CTAs Diagnosis: Multiple elements competing for figure status, weak figure-ground separation Fix: Establish clear elevation hierarchy, ensure single primary action per view, increase contrast between content and navigation areas

Dead-End Flows

Symptoms: Users abandon tasks before completion, report "getting lost" Diagnosis: Continuity violations breaking expected visual flow Fix: Create alignment grids, add visual connectors (arrows, lines, number sequences), test completion rates before/after continuity improvements

Worked Examples

Settings Page Redesign Walkthrough

Initial State: Equal 16px spacing throughout, bordered cards everywhere, inconsistent button styles User Feedback: "Can't tell what goes together"

Step 1 - Proximity Audit:

• Measure all gaps: 16px everywhere (proximity failure)
• Decision: Implement 8px/24px/48px hierarchy
• Related fields get 8px gaps, section breaks get 48px

Step 2 - Similarity Audit:

• Found 3 different button styles for same "edit" function
• Decision: Standardize all secondary actions to ghost buttons
• Keep only primary CTA as filled button per section

Step 3 - Closure Application:

• Remove all card borders, use spacing + background color for grouping
• Test: Can users still identify sections? Yes, cleaner appearance

Step 4 - Figure-Ground Enhancement:

• Danger zone gets red-tinted background (5% opacity)
• Primary actions get higher elevation shadow
• Form inputs get subtle inset appearance

Result: Task completion up 23%, "ease of use" rating improved from 3.2 to 4.6

Expert vs Novice:

• Novice would focus on visual "polish" (gradients, shadows for decoration)
• Expert recognizes proximity spacing as the primary tool for reducing cognitive load

Quality Gates

• [ ] Spacing uses exactly 3 levels maximum: intra-group (8px), inter-group (24px), section breaks (48px+)
• [ ] Spacing ratio between adjacent levels is minimum 2:1, preferably 3:1
• [ ] All elements serving same function share identical visual treatment (color, size, spacing, typography)
• [ ] No visual borders where proximity spacing can handle grouping
• [ ] Primary content area passes squint test: distinguishable from navigation at 50% blur
• [ ] Interactive elements have distinct figure-ground relationship from static content
• [ ] Hover states on grouped elements coordinate together (common fate test)
• [ ] Grid layouts maintain regular dimensions (no arbitrary sizing)
• [ ] Visual flow guides toward primary CTA without dead ends
• [ ] Zero arbitrary spacing values (all measurements from defined scale)

NOT-FOR Boundaries

Do NOT use for:

• Color palette harmony → use color-theory-palette-harmony-expert
• Typography pairing and font selection → use typography-expert
• Accessibility compliance (contrast, screen readers) → use design-accessibility-auditor
• Animation timing and easing → use web-design-expert
• Brand identity visual language → use brand-design-expert

Delegate when:

• User reports accessibility barriers → design-accessibility-auditor
• Content requires complex data visualization → data-visualization-expert
• Mobile-specific touch interaction patterns → mobile-ux-expert
• Performance optimization of visual assets → web-performance-optimizer