A card groups content by placing it in a shared region

What it is

Common region is the grouping cue that appears when several elements sit inside one enclosed background, stroke, or plate. A card is that cue made into a control surface: title, summary, thumbnail, status, and actions share a floor, so a viewer can treat them as one object before reading every field. The job is not decoration. It is an object boundary. Two neighbouring cards with a tiny gap between them remain two records for as long as the floor breaks; they do not become a run of continuous text.

Why it happens

People parse a list by cutting it into chunks, not by assembling sentences first. A closed contour, a shared fill, and inner padding jointly propose “this is one thing”; proximity, similarity, and alignment then operate inside the chunk. A card is a harder grouping than whitespace alone because the boundary becomes a surface you can point at — a finger can hit “this card,” a screen reader can name the block as an article or list item. When the floor is faint — no edge, no elevation, no contrast with the page — the cue collapses into mere spacing, and fields leak across cards. Conversely, heterogeneous type sizes and colours inside one plate still bind, because they share the region.

Studying it

Grouping-report tasks put the same elements inside a closed plate, with spacing only, or with colour similarity only, and ask observers to circle what belongs together. Common region typically outranks proximity alone. Independent variables: plate contrast, presence of a stroke, gap between cards, heterogeneity of inner fields. Dependent variables: grouping accuracy, whether first fixations land on the card edge or on inner fields, and whether speech refers to “this card.” On eye-tracking traces, card edges should be pause points; a scan path that streams across cards means the region is not being read as an object.

Where it stops holding

The cue needs the plate to separate from its surround. Full-bleed photographs, hairline strokes, or cards packed flush against each other stop looking like containers. On a dashboard of independent metrics the grouping is doing work; wrapping a page’s only content in one more card has no competing objects, so the plate is leftover chrome. Screen-reader users never see the floor — grouping must land on role and accessible name, or a visual card becomes an unstructured field stream. Young children and low-vision readers detect shallow drop shadows poorly; elevation alone is not enough.

Applying it

• Make plate, inner padding, and inter-card gap work together: tight inside, looser outside, and a floor distinguishable from the page.
• Bind one object per card. Two records on one plate will be welded into one group.
• Do not let a card stand in for heading structure or list roles; the plate is for the eye, the name and role are for assistive technology.
• How to check: shrink to a thumbnail or squint and still count the cards. Ask someone new to the UI how many items there are; every miscounted boundary is a region that failed to form.

Related

• Within the group: E4.01.2 A clickable card conflicts with clickable elements inside it · E4.01.3 Nesting cards collapses the grouping they were meant to show
• Adjacent: E4.02 List items · E4.20 Dividers versus whitespace · F2.06 Proximity grouping
• Search terms: common region · card grouping · Gestalt grouping