J3.04.1target sizedesignresearch

The size floor applies to every clickable control

Aliases: hit area · click target · 24 px minimum

What it is

The target-size floor governs every object that will be clicked, tapped or activated, not the primary button. Close crosses, pagination dots, icon tools, map pins, custom checkboxes, carousel arrows — if they perform an action, they are in. A large primary CTA with a 12-pixel “×” in the corner still fails someone with limited motor control: the miss happens on that cross, so the task still cannot complete.

The floor is an accessibility criterion, not a platform visual spec. Platform recommendations may sit higher. “The primary button is already large” does not stand in for a census of the whole set.

Why it happens

Hitting a region depends on the effector (fingertip, stylus, pointer hotspot) and motor noise, not on acuity. A small target squeezes allowed landing variance below that noise. Failures look like misses, hits on a neighbour, or giving up after retries. The smallest clickable object on the page sets the operable floor for the whole page — people cannot click only the large ones. Close, delete and pagination are often exactly those smallest objects.

Design sequences usually lock the primary button first and “drop in” icons afterwards; size falls at that step. Reviews that only look at primary-path screenshots never see the long tail. The criterion has to be written as “all clickable”, or measurement automatically biases toward the few controls already enlarged.

Studying it

List every activatable object on the page (including custom hit areas). Measure each in CSS pixels. Record the minimum and its role. Common comparison values: about 24×24 CSS pixels as a middle-tier floor on many checklists, about 44×44 as enhanced; platforms also publish 44 pt / 48 dp — do not mix those into the same measurement.

Independent variables: control role (primary / icon / close / pagination), input method (mouse / touch / switch-scan landing). Dependent variables: smallest target edge, count below the floor, misses and accidental hits on a set task.

Measure the rendered hit area, not the spec annotation. A large hit area under a small glyph splits visual size from hit size — that is a separate engineering tactic. This leaf first requires the hit area itself to clear the floor.

Where it stops holding

Text links inline in a paragraph have their own exception; they are not cut by this “all” in one stroke. User-agent controls (browser scrollbars, system date panels) are not measured by the page’s authored floor. Dense map points may be merged into a selection or a list rather than turning every pixel into its own target — after the merge, that selection or list item still has to meet the floor. Pointers are precise, touch is coarse; a desktop pass with a mouse does not copy onto a touch device. Measure again.

Applying it

  • Inventory every activatable object, including close, icons, pagination and pins, not only the primary button.
  • Bring each object’s hit area up to the chosen floor (a common middle tier is about 24 CSS pixels on a side). Enlarge the hit area if needed; drawing the glyph more clearly is not the same thing.
  • How to check: overlay an approximately 24-pixel square on every clickable object. Any role that shows white around the square means the census is not complete.

Related

  • Same group: J3.04.2 Spacing and size must both hold · J3.04.3 Inline links are a common exception and need careful handling
  • Nearby: C2.02 Minimum touch target size · J3.09 Accidental activation and undo · A8.16 Pathological and intentional tremor
  • Search terms: target size · hit area · minimum target

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/J3.04.1