Spacing and size are two independent parameters

What it is

In touch layout, size answers "can this target be hit on its own," while spacing answers "if the finger lands slightly off, does it land on the neighbour instead." These are independent design parameters: enlarging a target does not automatically increase the distance to its neighbour — it may even eat into that spacing — and widening the gap does not by itself make any one target easier to hit. Layout has to manage both, rather than folding them into a single "is there enough whitespace" question.

Why it happens

Why do the two parameters constrain each other instead of acting independently? Within a fixed screen region, size and spacing draw from the same layout budget: the total width of a row is fixed, so enlarging every target necessarily compresses whatever space is left for spacing, unless the overall layout reduces the number of targets or adds scrolling or paging. At the same time, whether a mis-landed finger hits the neighbour is not determined by target size alone but by the margin between two hit regions, which size and spacing jointly set — a target can be made large, but if it sits flush against its neighbour, the hit-region boundaries still touch, and whenever contact area or centroid bias produces an error, it crosses that flush boundary onto the neighbour just as easily.

Studying it

A factorial design — systematically varying both size and spacing together rather than fixing one while changing only the other — is needed to measure accuracy, neighbour-error rate, and completion time, because only a factorial design reveals the interaction between the two variables: enlarging size can raise hit rate when spacing is generous, but can cancel out that gain when spacing is tight, since the hit regions simply sit closer together. A methodological point: visual density (how crowded a layout looks) and hit-region overlap are two separate things that must be checked independently — ample visual whitespace does not guarantee the two controls' actual clickable regions do not overlap, a gap that is especially easy to miss once a small icon has been given a hidden hit region.

Where it stops holding

In severely constrained space it is often impossible to guarantee both adequate size and adequate spacing at once, and the usual resolution is not to compress both parameters but to change the interaction form entirely — merging several small targets into one expandable group, switching to hierarchical navigation, or replacing a row of adjacent buttons with a long-press or swipe gesture — sidestepping the assumption that this many targets must fit on one screen simultaneously, rather than shrinking every target down to a bare-minimum size. Conversely, adding a purely visual divider line or colour distinction does not reduce false taps if the underlying hit regions remain contiguous — which is why an interface that visually "looks well separated" can still have a high false-tap rate.

Applying it

• Define minimum touchable area and minimum safe separation as two independent design tokens in the component system, rather than covering both with one generic "control spacing" value.
• Check whether neighbouring controls' hit regions touch or overlap using the actually rendered hit boundaries, not the visual outline in a design file.
• When space is genuinely insufficient, prefer grouping, hierarchy, or an alternative interaction form over pushing both size and spacing down to the threshold at once.

Related

• Same group: C2.03.2 Adequate size with inadequate spacing still causes false taps · C2.03.3 Adjacent targets with very different consequences need extra spacing or isolation
• Nearby: C2.02 Minimum Touch Target Size · C2.04 Fat-finger problem
• Search terms: target spacing · factorial design · touch layout