Grouping Elements: Turning Visual Chaos into Intuitive Design
A FuguUX blog post using elevator button panels as a running example to teach Gestalt-based grouping, then extending the same diagnosis to several real web-interface examples. No byline or publish date is given in the file itself; year above reflects the access date, not a stated publication year.
License: FuguUX’s own published content — proprietary, not externally licensed
Key points
- Elevator button panels as a running example: photographed real panels where it’s genuinely hard to tell which button corresponds to which floor number, because neither position nor any other visual cue reliably pairs them.
- Three fixes for the same grouping problem: move the floor number and its button closer together (proximity); add a connecting bar spanning both, so they read as one unit regardless of surrounding spacing (an explicit-connection cue distinct from proximity or similarity); or sidestep the grouping problem entirely by printing the number directly on the button, so there’s only one element to perceive rather than two that need pairing.
- Gestalt principles named directly: proximity (near items read as one group), similarity (shared color/shape/size/orientation reads as one group even when spread apart), and connection (an explicit visual link, like a line or bar, groups elements regardless of spacing or appearance).
- Real-world grouping failures: Amazon’s older customer-review layout, where four rating categories (Durability, Fun, Educational, Overall) ran on one line, each preceded by its own star rating, but the gap between one category’s label and the next category’s rating was no wider than the gap within a pair, leaving no visual marker for where one pairing ended and the next began; a fan-community poll page, where each option’s result bar sat between two option labels with no stronger tie to its own label than to the next one down; and Facebook’s older account-security page, where icon labels sat closer to the wrong icon (the one above) than the one they actually described (one row below).
- Framing: grouping problems are common enough, once you’re looking for them, to have already been noticed on the elevator’s own panel before ever reaching a screen — the same failure mode recurs physically and digitally.
- Conclusion: consistent grouping via proximity, similarity, and connection reduces cognitive load and produces a more consistent, professional, accessible interface.