Hit regions need not match the visual shape of a control

What it is

The outline the user sees and the geometry the system hit-tests need not be the same drawing. A circular icon with a square hit region, a pill button with a rectangular hot zone, are legitimate splits: painting follows vision, hitting follows input. Extra pixels at the square’s corners are invisible, yet a fingertip there still fires. Conversely, a visual circle whose hit region is also a strict circle leaves the corners dead. The two choices answer whether a tap on that corner counts.

Why it happens

The GPU fills by alpha or vector path; hit-testing often runs on the CPU against a simple convex polygon. Circle-circle distance needs a square root; an axis-aligned rectangle needs four comparisons, which is cheaper in a list of hundreds of icons. Designers also use the square to absorb aiming scatter: landings on a round icon look more like an ellipse, and a square gathers error to the sides and below without drawing a larger glyph. The cost is learnability. A tap outside the disk but inside the square is “empty glass did something”; a tap on the disk whose hit region was clipped is “I hit the icon and nothing happened.” If press highlight traces only the visual circle, both complaints appear.

Studying it

Give the same circular icons circular, square, and elliptical hit regions and collect natural taps relative to icon centre. Independent variables are hit geometry, icon size, and whether press highlight follows the visual or the hot zone. Dependent measures are hit rate, fire-on-empty fraction, miss-on-ink fraction, and a rating of hot-zone visibility. Heatmaps beat mean hit rate: they show which corners the square actually gathers. Mouse studies do not substitute: a cursor hotspot is a point, a finger is an area, and those extra corner pixels mean different things to each.

Where it stops holding

Destructive actions and legal checkboxes, where people must see what they hit, should keep hit region and visual aligned—better to miss than to fire in the dark. Pixel-perfect combat in games makes a square hot zone register hits on transparency. A vector glyph with a hollow (a ring, the letter O) fires from the hole if the hit is a solid square, and is unhittable on thin strokes if the hit is the exact path. Accessibility focus rings for keyboards and switches usually follow the visual; when they disagree with the touch hot zone, the two modalities select different objects.

Applying it

• Write two geometries for icon-like controls: the paint path and the hit polygon. Draw the hit region as a translucent debug overlay for developers, not for end users.
• Let press highlight cover the whole hit region, or show the same pressed state when the tap is outside the visual but inside the hot zone, so “empty glass fired with no feedback” cannot happen.
• Record a real-finger landing heatmap before choosing circle-on-circle versus circle-on-square; visual symmetry is the wrong criterion.

Related

• Same group: C2.20.2 Irregular visuals are often hit-tested as bounding rectangles · C2.20.3 Bounding-box simplification can make neighboring irregular targets overlap · C2.20.4 Hit shapes should follow where fingers actually land
• Nearby: C2.14 Separating touch targets from visual boundaries · C1.05 Cursor hotspots and hit testing
• Search terms: hit region · hit-testing · visual versus input geometry