J2.11.3zoom target spacingdesignresearch

After zoom, interactive elements must not be squeezed into accidental activation

Aliases: squeezed hit targets · magnified adjacent controls · zoom accidental activation

What it is

When type and buttons grow together, adjacent hit areas glue together unless the gap grows in proportion. Glue “Save” to “Delete” and a aimed save lands on delete; glue “Next” to “Archive” and the same happens. Accidental activation after zoom is not about whether default targets are large enough. It is about whether spacing still separates two actions once magnification has run.

If acceptance only asks whether copy is still visible and columns have stacked, it misses this layer: the content is all there, and the hand still hits the wrong thing.

Why it happens

A hit needs the target’s own area plus an empty band to its neighbour. When zoom scales controls by one factor but the band is a fixed pixel, a negative margin, or an absolutely positioned overlap, the band is eaten. Text-only resize is worse: lengthening labels shove two buttons into leftover row space, hit boxes overlap visually, and the pointer or finger lands on the other action.

Low-vision aiming is already noisy — a magnifier often shows only part of a control, so the landing point is biased. Once the empty band is gone, a small bias is another function. If a destructive action sits against a confirming one, the cost jumps from “wrong click” to “an irreversible submit.”

Studying it

Under both 200% page zoom and text-only enlargement, measure centre-to-centre distance and gap pixels between adjacent hit targets, then run repeated aiming tasks with touch or mouse.

Independent variables: magnification, whether gaps scale with type, whether a destructive action sits next to an ordinary one. Dependent variables: accidental-activation rate, whether first contact lands on the intended target, undo counts mid-task.

Do not measure only under a desktop pointer. Touch simulation or a real device has larger spatial error, so squeeze turns into a miss earlier. Split “they do not look overlapped” from “the press did not hit the other action” — the first is layout, the second is this criterion.

Where it stops holding

Inline links will still sit against neighbouring words after zoom; they cannot be asked to follow button spacing. Their mitigation is line-height and undoable navigation, not turning every word into a large tile. Mutually exclusive segmented controls are meant to sit together; what matters is that the hit stays inside the group and the selected item has a non-spacing cue. Switch-scanning users do not aim, so squeeze is not an accidental-activation problem for them. At extreme screen-magnifier zoom only one button is in view, and the neighbour mechanism recedes.

Applying it

  • Let gaps between controls grow with type. Do not state spacing as zoom-invariant dead pixels, and do not use negative margin to stack two actions in one slot.
  • Keep destructive actions from remaining glued to confirm actions after zoom; when reflowing to a column, separate them vertically rather than packing them at the row end.
  • Let icon buttons drop to the next line when labels lengthen, rather than shrinking hit boxes to keep a single row.
  • How to check: at 200% zoom, repeatedly tap or click every adjacent pair on the primary path (save/cancel, send/delete, next/archive). Each landing on the other action is a squeeze miss.

Related

  • Same group: J2.11.1 Browser zoom and text-only resize are different magnification paths and must be tested separately · J2.11.2 High magnification requires content to reflow into a single column rather than relying on horizontal scrolling · J2.11.4 Text baked into images cannot scale with page text
  • Nearby: J3.04 Target Size Minimum · J3.09 Accidental Activation and Undo · J2.07 Low Vision and Screen Magnification
  • Search terms: zoom target spacing · accidental activation · squeezed hit targets

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/J2.11.3