A clickable card conflicts with clickable elements inside it

What it is

When an entire card is wired as one large control and the same surface also holds a favourite, a menu, a switch, or a link, two hit targets occupy one area. That is nested hit-target conflict: the outer surface promises “tap anywhere to open,” while an inner control demands “hit only this small widget to change state.” Appearance does not tell the user whether the next press will navigate, toggle, or fire both. The problem is not grouping. It is unclear ownership of the action on one surface.

Why it happens

Pointing is geometry. Once the outer card registers as a hit region, inner controls are holes in a larger target. A mouse can find the hole; a thumb on a phone often clips the hole’s edge and is scored as outer navigation. Event bubbling makes it worse: the inner control handles the press, then the outer still receives the same event, so a favourite is saved as the page already leaves. Keyboard users meet a different clash. If the card is a link, Tab collects both the card and the inner button, so two destinations are announced as if they were one sentence. The stronger the “whole card is clickable” cue, the more inner widgets look like decoration rather than separate actions.

Studying it

Pointing tasks compare card-only, inner-controls-only, and both-together layouts. Log landing coordinates, wrong actions (meant to favourite, opened detail), and dual-trigger rate. Independent variables: inner control size, distance to the card edge, whether the outer surface is a semantic link. Dependent variables: whether the first hit matches intent, returns or undos, and number of keyboard stops. Touch studies should split thumb from index finger; small holes in large cards punish the thumb. In logs, a paired “open detail, immediately back, then favourite” is the conflict being taken apart by hand.

Where it stops holding

If the card holds only inert text and an image, and the only action is opening detail, there is no rival target. A wide desktop card that confines actions to a button strip and leaves the rest inert also avoids the clash. The opposite failure — it looks like a card but only the title is a link — is a hit region smaller than the visual region, not nested conflict. Gamepads and switch access have no pointer coordinate; the clash shows up as which focused object answers first.

Applying it

• Decide whether the card’s primary action is navigation. If it is, do not put a second peer click target inside; move secondary actions into the detail, or onto a gesture that is clearly not the open action (swipe, long-press menu).
• If both must exist, stop bubbling so an inner action cannot also navigate, and give the inner control a real hit area rather than a few pixels of icon.
• When the whole card is clickable, wrap the main content in one role (link or button) and keep extra controls outside that role so a reader does not hear a button nested in a link.
• How to check: on a device, thumb-tap corners, icons, and empty plate across twenty cards. Count how often the fired action was not the intended one. Each “wrong page then back” is one conflict.

Related

• Within the group: E4.01.1 A card groups content by placing it in a shared region · E4.01.3 Nesting cards collapses the grouping they were meant to show
• Adjacent: E4.02 List items · E4.05 Inline and bulk actions · E1.07 Button hit targets
• Search terms: nested hit target · event bubbling · clickable card