Nesting cards collapses the grouping they were meant to show

What it is

A card uses one plate to say “these fields are one object.” Put another plate, stroke, or shadow inside that plate and the same grouping cue is applied twice. Nested cards are not a legitimate way to draw hierarchy; they are one perceptual rule called recursively. The outer card claims the fields are one record; the inner card claims a subset is a record of its own. What remains is a stack of boxes at different elevations, with no agreement about which layer to count, select, or announce.

Why it happens

Common region asks which items share a closed surface. One closed surface yields one object hypothesis. A second closed surface cuts inside it, asserting both “this is part of the whole” and “this is another whole.” Elevation and stroke intensify the fight: the outer card already lifts off the page, the inner card lifts off the outer card, and depth reads as “box in a box” rather than “fields in an object.” Alignment and whitespace cannot rescue it, because closed contours are read first. Counting fails (one item or two), selection fails (highlight the outer frame or the inner), and assistive technology fails (two articles nested, heading structure fighting the visual structure). Drop the inner plate and keep a single region, and grouping restabilises.

Studying it

Object-counting and selection tasks present the same information as a single card, as a card-in-card, and as an outer card with an unplated inner block. Ask “how many items?” and “select this one.” Independent variables: nesting depth, whether inner and outer shadows match, whether radii match. Dependent variables: count accuracy, whether the circled frame is outer or inner, and how often a title is announced. If answers split under nesting and converge for a single plate, nesting is dismantling grouping rather than expressing hierarchy.

Where it stops holding

A summary card that contains a sparkline or a progress bar is not a nested card if the inner piece has no plate of its own. Real containment — project, task, comment — belongs to indentation, headings, or a tree, not to stacked cards. Printed-matter metaphors (a sticker on a ticket) can suppress the competition because people bring the physical object with them; a feed has no such metaphor. In dark themes, if inner and outer plates lose contrast, the failure shifts from competing groups to “there is no card,” which is a contrast problem, not this mechanism.

Applying it

• Default to no card inside a card. Carry inner content with a heading, a divider, or an unstroked block, and keep the plate on the outermost object only.
• If the product metaphor really is “an envelope holding a card,” make the two contour languages different (outer is a container, inner is a slip). Do not clone the same shadow and radius.
• Selection, drag, and highlight should address the outermost object. Do not let the inner frame be selected on its own unless it is a separate record in the data model — in which case it should not be wrapped as the same object.
• How to check: print a greyscale thumbnail and ask someone to circle each item. If both frames get circled and they cannot say which one is the item, remove the inner plate.

Related

• Within the group: E4.01.1 A card groups content by placing it in a shared region · E4.01.2 A clickable card conflicts with clickable elements inside it
• Adjacent: E4.06 Tree controls · E4.20 Dividers versus whitespace · F2.06 Proximity grouping
• Search terms: nested cards · common region · visual hierarchy