The hit target may be larger than the visual area

What it is

The capsule or rectangle that is drawn is the visual area. What actually accepts a pointer or a contact is the hit target (hit slop). They need not coincide. The hit target may be larger: a 24-pixel-tall text button can throw an invisible 10 pixels on every side and still count a finger as a hit. This is not deception. It gives the motor system the terminal width Fitts’s law wants, while leaving visual density to type.

Why it happens

Endpoints scatter. Growing a target’s effective width shortens movement time and cuts misses, but that width need not be drawn—drawing it turns a toolbar into a row of heavy blocks and crowds neighbors. Padding an invisible hit region beyond the contour widens the control for movement only, not for visual hierarchy. Touch depends on this: recommended minimum reach is often larger than the visual size designers want. A mouse benefits too, with a thinner expansion because scatter is smaller. After the split, people still see a small button and experience hitting a large one. The failure mode is the inverse: a large visual with a hit box tight to the glyphs, so an edge that looks hit does not fire.

Studying it

Run a Fitts-style pointing task with visual size fixed and invisible expansion varied. Log movement time and errors. On touch, log the share of contact centroids that land outside the visual and inside the hit—that ring is the expansion doing work.

Independent variables: visual size, expansion in pixels, input channel, spacing. Dependent variables: movement time, miss rate, successful hits that landed in the expansion band.

Testing only “hit the visual center” concludes expansion is useless. Place starts where real tasks come from (upward toward a bottom bar) so scatter is biased.

Where it stops holding

Expansion must not cross a neighboring tappable object, or misses simply become wrong hits. Precision drawing tools on desktop sometimes need hit flush to the visual; expansion fights snapping. Expansion in CSS pixels may be too small after system font scaling; use physical millimeters or the platform minimum. A game sprite whose hurtbox is larger than the drawing is the same logic, but players will study the box; a UI button’s expansion should not be taught or made visible.

Applying it

• Set the platform minimum reach (about 44–48 CSS pixels, or 7–9 mm) as the hit floor; the visual may be smaller.
• Draw hit rectangles in debug and confirm they are larger than the stroke and do not enter another control.
• Do not make a whole row a button while only the glyphs show feedback, which teaches that only the type is hittable.
• Verify on device by tapping a few pixels outside the visual edge: the event should fire. Tap farther until the neighbor; the event must not jump. The share of successes in the expansion band should be clearly above zero.

Related

• Within the group: E1.07.2 Adjacent buttons’ hit regions must not overlap · E1.07.3 A text button’s hit region needs an explicit expansion
• Adjacent: B1.01 Fitts’s law · C2.14 Separating touch target from visual bounds · J3.04 Minimum touch target size
• Search terms: hit target · hit slop · Fitts's law