Related fields need to form a visual group
Aliases: fieldset · common region · proximity grouping
What it is
Visual grouping is wrapping inputs that answer one question into a cluster the eye can take as a single object: the lines of a billing address, a start and end date, a card number with its expiry. The tools are spacing, rules, a shared background, or an explicit group heading—not merely placing the items next to each other in the question sequence. People use the group to decide “this chunk is done, I can breathe.” If the group cannot be seen, related items flatten into a stream of equal-weight boxes. This entry is about spatial chunking. It is not about which chunk should be asked first down the page, and not about whether a sensitive chunk should wait until trust is in place.
Why it happens
Perception binds elements into objects through proximity, common region, and connectedness. Working memory prices chunks, not boxes: three address lines that share padding and a heading cost about “one address”; the same three lines equally spaced with everything else cost three separate questions. A second layer is scan-stopping at group boundaries. Saccades pause where spacing widens or a heading appears; people use that pause to check whether the chunk is complete. When group spacing equals row spacing, the stop disappears, and omissions hit the last item in the chunk (postal code, extension) rather than the first. Conflict between grouping and meaning is worse: nest an invoice title inside a delivery cluster and people fill it by the delivery schema, treating the title as another name for the street. Grouping answers “which boxes belong to one answer.” It does not answer “which group to ask first.”
Studying it
Use eye tracking or a heading-masked recognition task to see whether people treat fields as one object. Compare equal-spaced stacks, enlarged between-group gaps, boxes or tints, and headings with no spacing difference.
Independent variables: kind of grouping cue (gap / border / background / heading), items per group, whether the cue matches the semantics. Dependent variables: fixation pauses on group boundaries, omission rate on the last item, answers placed in the neighboring group, whether the spoken number of groups matches the design.
Screenshot-sorting in the lab overrates headings, because participants are classifying rather than filling. In live filling, headings are often skipped and spacing is the cue actually used. Faster completion after a reordering is not evidence that grouping worked—that measures question sequence.
Where it stops holding
On a two- or three-field form, heavy boxes turn a receipt into archive cubicles; the grouping cue itself becomes noise. Screen-reader users rely on programmatic group names (and where the group starts and ends in the speech stream); tint and hairlines group nothing for them. On a narrow phone, side-by-side clusters (card number beside expiry) split one group across two scrolls, so the group no longer exists in space. Experts on familiar internal forms ignore decorative grouping and follow input focus downward.
Applying it
- Keep fields for one answer in one visual container: spacing inside the group smaller than spacing between groups, plus a heading in human language (“Delivery address,” not “Module A”).
- The heading and the contents must name the same thing; do not stuff invoice fields, notes, and marketing checkboxes into the address container to save scrolling.
- Group vertically on mobile so a cluster is not split across two scrolls; if desktop places items side by side, lock them into one object with a shared tint or box.
- Verify by masking group headings and asking someone uninvolved to circle “what belongs together.” Wrong circles, or missing the last item, mean spacing and containers are too weak—fix spacing before adding lines. If omissions cluster on each group’s last item, open one more step of gap before the next group and retest whether the omission site moves.