Gestalt Ui Organisation

Gestalt UI Organisation

UI should be organised so that the visual structure communicates relationships — which commands, controls, and elements belong together — without requiring users to read labels or documentation.

Core Gestalt Principles for UI Layout

1. Proximity

Elements that are close together are perceived as a group.

• Place related controls (e.g. Bold / Italic / Underline) close together with minimal gap between them
• Separate unrelated groups with larger whitespace
• Do not use lines or borders as the primary grouping mechanism — proximity alone should convey the relationship

Example: A toolbar with [Cut] [Copy] [Paste] grouped tightly, then a wider gap before [Undo] [Redo], communicates two distinct command groups without any visual divider.

Prefer whitespace over separator lines

Default to whitespace, not divider lines, for grouping. Most separators do work that spacing does better — they add noise and a "boxed-in" feel without adding information. Remove the majority and let proximity carry the grouping.

Caveat: a line takes almost no space, so removing it leaves groups too close. Removing separators usually means adding spacing — budget the whitespace (occasionally a subtle background or heading) rather than just deleting the line and leaving the layout cramped.

2. Similarity

Elements that look alike are perceived as related.

• Use consistent colour, shape, size, and iconography within a functional group
• Differentiate groups through visual contrast (shape, fill, size) — not just position
• Primary actions and secondary actions should look visually distinct from each other

Example: Destructive actions (Delete, Remove) use a different colour than constructive actions (Save, Add), signalling different intent groups.

3. Common Region

Elements enclosed in a shared region are perceived as a group.

• Use cards, panels, or background fills to enclose logically related content
• Avoid wrapping unrelated elements in the same container
• Nested regions should reflect nested logical hierarchy

Example: Form sections grouped in bordered cards signal that fields inside each card form a logical unit.

4. Connectedness

Elements connected by lines or visual links are perceived as related.

• Use connectors, lines, or flow arrows only when a genuine relationship exists
• In navigation trees or node-based editors, visible connections should match data relationships exactly

5. Figure / Ground

Users distinguish foreground interactive elements from background context.

• Interactive controls should have sufficient contrast against their background
• Disabled or contextual information should visually recede (lower contrast, smaller weight)
• Modals and overlays must clearly separate from the underlying content layer

6. Continuity

The eye follows smooth paths and lines.

• Align related controls along a consistent axis (left edge, baseline, or centre line)
• Avoid breaking alignment within a logical group
• Grid-aligned layouts reinforce groupings through shared axis continuity

Review Checklist

When reviewing a UI layout for Gestalt compliance:

• [ ] Can a new user identify which controls belong together without reading labels?
• [ ] Is proximity used as the primary grouping signal (not only borders/lines)?
• [ ] Do visually similar elements share a functional purpose?
• [ ] Are unrelated groups separated by meaningful whitespace?
• [ ] Have unnecessary divider lines been removed in favour of whitespace (with spacing added to compensate)?
• [ ] Does visual hierarchy match interaction hierarchy (primary > secondary > tertiary)?
• [ ] Are destructive or irreversible actions visually distinct from constructive ones?
• [ ] Is the figure/ground contrast sufficient for all interactive elements?

Common Anti-Patterns

| Anti-pattern | Problem | Fix | |---|---|---| | All buttons same size and colour regardless of function | Similarity principle violated — implies all actions are equivalent | Differentiate primary, secondary, destructive visually | | Related controls spread across distant areas of the screen | Proximity violated — user cannot perceive the relationship | Co-locate related controls | | Overuse of divider lines to group elements | Relies on decoration rather than spatial logic | Use whitespace and proximity instead | | Identical whitespace between all elements | No grouping signal — everything reads as a flat list | Apply 8pt/4pt spacing scale: tight within group, loose between groups | | Mixed icon styles within one toolbar | Similarity broken — implies different functional families | Use a single consistent icon set and weight per toolbar |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: dembrandt
• Source: dembrandt/dembrandt-skills
• License: MIT

Install and usage instructions live in the source repository linked above.