Summary
The Gestalt principles describe how human perception organises what we see into groups and shapes before we consciously read anything. They come from Gestalt psychology (Max Wertheimer and colleagues, from the 1910s–1920s). In game UI they matter because players read a HUD in a fraction of a second, often mid-action: layout that groups related information correctly tells players what belongs together before they read a single word, and layout that groups it wrongly makes them hunt.
Key ideas
| Principle | What perception does | In game UI |
|---|---|---|
| Proximity | Elements close together are seen as one group | Put health beside shields, ammo beside the weapon icon; don’t scatter related stats across the screen |
| Similarity | Elements that look alike (colour, shape, size) are assumed to be the same kind of thing and to behave alike | Every interactable shares one highlight; every currency uses one icon style; enemies and allies have distinct colour codes |
| Common region (enclosure) | Elements inside a shared boundary are grouped, even if they are far apart | Inventory grids, party frames, a panel behind a skill bar |
| Continuity (good continuation) | The eye follows lines and curves, and groups elements along them | Skill trees joined by lines; a row of menu items read as a sequence; a trail of coins that leads the eye |
| Closure | The mind completes incomplete shapes | Segmented health pips read as one bar; a radial wheel reads as a circle even with gaps between segments; minimal icons drawn with partial outlines |
| Figure–ground | Perception separates a foreground figure from its background | Text and icons need contrast, an outline or a backing plate to stand off a busy, moving game world |
In practice
- Wireframe in grey boxes first. Decide groups and their positions before colour and style; if the grouping only works in colour, it isn’t grouping, it’s decoration.
- One group, one place. Cluster information by the player’s question (“am I in danger?”, “can I fire?”) rather than by data type.
- Use similarity as a promise. If two things look the same, players will assume they work the same; breaking that (one yellow ledge you can’t climb) costs trust. See signifier.
- Figure–ground over moving worlds. In Unity UI or UI Toolkit, give text a subtle outline or shadow, or a semi-transparent backing panel, and test it over the brightest and busiest scenes in the game, not just the menu backdrop.
- Test it. A “two-second test” works well: flash a screenshot for two seconds and ask a player what their health and current goal are. If they can’t answer, the grouping or the hierarchy has failed.
Evidence
- Lidwell, Holden and Butler, Universal Principles of Design (revised and updated edition, Rockport, 2010) gives a page each to the main grouping principles, including proximity, similarity, closure, figure–ground, good continuation and common region, with design examples.
- The course lecture series teaches four principles as doing most of the work in HUDs: proximity, similarity, enclosure (common region) and figure–ground, with the two-second readability test and a contrast check as practice (course lecture series, see source-player-psychology-lectures).
- Common region as a named principle comes from later perception research (Palmer, 1992) rather than the original Gestalt list; design references now usually include it alongside the classic principles.
Implications
- Grouping is free information: a well-grouped HUD needs fewer labels.
- Gestalt principles and visual hierarchy work together. Grouping says what belongs together; hierarchy (size, contrast, position, motion) says what matters most.
- Colour-coded grouping must not rely on colour alone. Pair colour with shape or position so that colour-blind players see the same groups (see accessibility-and-localisation, colour-theory-fundamentals).
Open questions
- Do diegetic UIs (health on a character’s back, ammo on the weapon) lose grouping clarity because world geometry, not layout, decides proximity?
- How should grouping adapt when the HUD is contextual and elements appear and disappear?
Related
ui-design · colour-theory-fundamentals · composition-and-tonality · signifier · affordance · diegetic · player-guidance · unity-ui-toolkit · accessibility-and-localisation · vfx-value-and-colour