group-related-elements

name	group-related-elements
description	Use proximity and spacing to show relationships
domain	ui-design
skill-type	generative
version	1.0.0
author	refactoring-ui-expert
prerequisites	[]
dependencies	["04-apply-consistent-spacing"]

Skill: Group Related Elements

Purpose

Use proximity and spacing to visually group related elements together and separate unrelated groups.

Type

Generative + Evaluative

Input

• Element inventory
• Relationship mapping (what belongs together)
• Current spacing between elements

Output

• Spacing recommendations to show relationships
• Pass/Fail assessment of current grouping

Transformation Performed

Adjusts spacing so elements within a group are closer together than elements in different groups, using the Gestalt principle of proximity.

Decision Criteria

PASS (Good Grouping)

• Related elements have small gap (8-16px)
• Unrelated groups have larger gap (24-48px)
• Form labels close to their inputs (4-8px)
• Sections clearly separated
• Hierarchy of space: tightest within component, looser between components, loosest between sections

FAIL (Poor Grouping)

• Uniform spacing everywhere
• Labels far from inputs
• Related elements visually disconnected
• Unrelated elements too close
• Using borders instead of space to group

The Proximity Principle

Elements that are close together are perceived as more related than elements that are farther apart.

Spacing Hierarchy

Within component (label + input): 4-8px
Between related components: 16-24px
Between sections: 32-64px
Between major page areas: 64-96px

Common Grouping Patterns

Pattern	Structure	Spacing
Form field	Label → Input	4-8px between, 16-24px after
Card	Header → Content → Footer	16-24px internal padding
List items	Item 1 / Item 2 / Item 3	8-12px between items
Button group	Primary + Secondary	8-12px between
Sections	Section A (gap) Section B	48-64px between

Common Failure Modes

Failure	Description	Fix
The Great Divide	Equal spacing everywhere	Tighten within groups, expand between groups
Label Drift	Labels 20px+ from inputs	Reduce to 4-8px
Section Smush	Sections barely separated	Add 48px+ between major sections
Border Dependency	Boxes around everything	Use space instead of borders
Card Clump	Cards touching each other	Add 16-24px gap between cards

Prerequisites

• Spacing system defined
• Content grouped logically

Dependencies

• apply-consistent-spacing (uses spacing scale)

Refactoring UI References

• "Group related information"
• "Use whitespace to create relationships"
• "Proximity beats similarity"

Example Assessment

Input: Form with: Title (24px margin), Label (8px margin), Input, Label (8px), Input, Section header (16px margin), Label (8px), Input

Evaluation: PARTIAL

• Label to input spacing not specified
• Section header too close to previous section
• Consistent 8px but not creating hierarchy

Recommendation:

• Label to input: 4px (tight coupling)
• After input group: 24px
• Section header margin-top: 48px (clear break)
• Within section: 16px between fields