Expanded hit areas must not overlap each other
Aliases: hit area overlap · touch target · expansion
What it is
Expanding small controls improves touchability, but expanded hit areas must not overlap. Overlap maps one contact to several commands, forcing hierarchy, nearest-distance, or implementation order to decide; people cannot predict the result from visuals, so errors feel random.
Why it happens
Hit testing selects a target by region, z-order, or event order. It helps to separate two kinds of overlap that are qualitatively different. One is intentional layering — a tooltip floating over a button, say — which naturally carries a visible layer order (the tooltip sits on top), so the winner is predictable. The other is unintended overlap between sibling controls at the same level, caused by expansion, which has no layer to appeal to at all; whichever one is actually hit ends up decided by an implementation detail such as traversal order in the framework's view tree, and that order is invisible and unguessable to both users and designers — there is no visual cue anywhere telling someone "these two buttons' hit areas actually overlap here, and whichever was declared later wins."
Studying it
Visualize actual hit regions on devices and tap boundaries, recording selected control, expectation, and error. Test scale, orientation, and dynamic layouts, particularly responsive lists, toolbars, and floating controls after reflow. Tabulate "overlap between layered elements" and "overlap between same-level sibling controls" separately — the former's resolution usually matches visual intuition, while the latter's is entirely unguessable from any visible property, and any instance found should be treated as a layout defect to fix, not accepted as a tolerable priority rule.
Where it stops holding
Intentional layered interactions such as menus and modals can express precedence through visible scrims and layer order, but adjacent independent small icons cannot. If space is inadequate, regroup, collapse, or confirm rather than packing more actions through overlap.
Applying it
- Test component hit rectangles or shapes for no intersections.
- Preserve real safe space and recompute or limit expansion after dynamic layout changes.
- Use visible hierarchy and clear close rules for unavoidable layers, not hidden competition.