Fitts Law as a Target-Size Constraint: Throughput, Index of Difficulty, and Hit Area

A pointer target has a size, and the size is not a matter of taste. The time to move a pointer onto a target is governed by a relationship that has held up across devices, populations, and decades: it grows with the distance to the target and shrinks with the target’s width. That relationship is the only quantitative model of pointing that interface design has, and it converts target size from a stylistic decision into a constraint that can be reasoned about.

The model and its units

Fitts’s law describes the movement time $T$ for a target of width $W$ at distance $D$ as

$$T = a + b \log_2!\left(\frac{2D}{W}\right)$$

where $a$ and $b$ are empirically fitted constants for the device and the person. The logarithmic term is an index of difficulty measured in bits: doubling the distance adds one bit, and doubling the width removes one bit. A target twice as wide at the same distance is one bit easier, which is the same reduction in difficulty as halving the distance.

import math

def index_of_difficulty(distance_px, width_px):
    # Shannon form, which behaves better than 2D/W when W is large
    # relative to D. Returns bits.
    return math.log2(distance_px / width_px + 1.0)

for w in (8, 16, 24, 44):
    print(w, round(index_of_difficulty(400, w), 2))

The Shannon formulation, $\log_2(D/W + 1)$, is the variant used in most human-computer interaction work because the classical form goes negative when the target is wider than twice the distance, which happens constantly on small screens. The two agree for small $W/D$ and diverge exactly where the classical form stops making sense.

The reason width dominates in practice is that the coefficient $b$ multiplies the whole log term, so a one-bit change costs the same wherever it comes from. But $D$ is bounded by the viewport and by the physical reach of the hand, while $W$ is bounded only by the designer’s willingness to spend pixels. At a fixed distance, going from an 8-pixel to a 44-pixel target is a change of roughly two and a half bits, a substantial fraction of the total difficulty for a typical screen-distance movement. At a fixed width, halving the distance from 400 to 200 pixels is one bit. The width lever is larger and cheaper.

The effective width problem

The naive reading of the model treats $W$ as the drawn size of the control. The model’s actual quantity is the effective width of the region within which a pointer press is accepted, which is not the same thing.

Three mechanisms change the effective width.

The first is the edge of the screen. A target flush against a viewport edge has an effective width that extends past the edge, because overshooting the edge still lands on the target. This is the reason a menu bar at the top of a screen or a dock at the bottom is easy to hit despite being short: the effective height is unbounded in one direction. Any target with a hard boundary in the direction of approach behaves the same way. The corollary is that a target floating in the middle of the layout has no such advantage, which is why identical controls feel different depending on placement.

The second is the shape of the acceptance region. A press is accepted within the control’s hit area, which in modern layout engines is a rectangle that may be larger than the visible painting. A visible 16-pixel icon inside a 44-pixel hit box has an effective width of 44, and the user’s aim is judged against the box, not the ink. Padding is therefore not decoration; it is the width term of the model.

The third is tolerance for error. A user with a tremor does not produce a single clean movement; the pointer trajectory oscillates around the target. A wider target absorbs the oscillation. The model’s $W$ captures this as a widening of the region that counts as a hit, which is exactly right, and it is why a target that looks comfortable to a precise user can be unusable to a user with a tremor: the trajectory amplitude is larger than the margin.

/* The visible glyph is small; the acquisition region is the padding box. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;   /* effective width in the horizontal axis */
  block-size: 44px;
  padding: 0;
}

/* Adjacent targets need separation, or the acceptance regions merge. */
.icon-button + .icon-button {
  margin-inline-start: 8px;
}

Separation is part of the constraint

The model assumes one target. Interfaces have many, and the failure mode of dense controls is not that each is individually too small but that the gaps between them are too small to discriminate. When two targets are adjacent, the effective width of each is reduced by the boundary between them, and a press near the boundary becomes a coin flip. The user’s corrective movement after a miss is the expensive part: the initial movement is fast and ballistic, and the correction is slow and deliberate, so a target that is missed half the time costs far more than half again the time of a clean hit.

This is why minimum target size specifications are usually paired with a separation requirement, and why spacing is a separate token from size. A 24-pixel control with 12 pixels of clear space around it is easier to acquire than a 24-pixel control with 2 pixels of space, even though the width term in the model is identical. The spacing changes the probability of a boundary error, which the model does not describe.

The specifications that exist reflect the same reasoning with less theory. WCAG 2.2’s Target Size (Minimum) criterion sets a floor of 24 by 24 CSS pixels for pointer targets, with exceptions for targets that are inline in a sentence, targets whose position is determined by the user agent, and cases where an equivalent control of adequate size exists elsewhere on the page. The exceptions matter: an inline link inside a paragraph cannot be enlarged without breaking the text, so the criterion exempts it and relies on the alternative path instead. Platform guidance from the major mobile toolkits converges on a larger figure, commonly around 44 to 48 points or density-independent pixels for primary controls, which is roughly double the web floor and consistent with a thumb-driven, one-handed use case where the trajectory amplitude is larger.

Where the model stops

Fitts’s law predicts movement time for a single aimed movement toward a stationary target. Interfaces violate every clause of that description.

Targets move. A control that appears on hover, or that animates into place, has a width that is changing while the pointer is travelling, and the model has no term for a target that is not where it was. The practical consequence is that appearance animations shorter than the time to complete the movement leave the user chasing the target, and the standard remedy is to place the target where it will be and animate only its opacity.

The user does not always aim once. A press may be a deliberate two-stage action (move, then confirm), which changes the difficulty by adding a decision point, not by changing the geometry.

The device is not always a mouse. Touch input has a contact patch rather than a point, and the centroid of the patch is not the location the user intended; the finger occludes the target, so the user aims using a preview offset above the contact point. A touch target that is adequate in width can still be inadequate in height because the occlusion hides the boundary. This is the reason touch guidance is expressed as a minimum in both axes with additional spacing, rather than as a single area figure.

The population is not homogeneous. Fitted constants $a$ and $b$ vary substantially between individuals and between populations, and they change with fatigue and with practice. A design that is comfortable at the fitted constants for a young, practised mouse user is not thereby comfortable for a user with reduced motor control, whose effective $b$ is larger. This is why a floor stated in the specification is a floor and not a target: satisfying it establishes a minimum, and the tail-of-the-distribution reasoning behind the constraint says the minimum should be set by the users with the largest constants, not by the average.

The model’s value is not that it predicts a millisecond count, which no design review can use. Its value is that it gives the target-size decision a direction and an exchange rate: width buys difficulty reduction at a logarithmic rate, distance buys it at the same rate, and width is the cheaper lever because the layout controls it. A review that asks “what is the effective width here, and what is it adjacent to” is applying the model correctly, and it is a review that can be run without measuring anything.

One further asymmetry deserves a mention because it is easy to miss in a model built around time. A target that is too small does not merely cost more time; it converts a single action into a sequence of attempts, and each attempt carries a risk of triggering the wrong action. Time is recoverable and a wrong action may not be, which is why the reversibility constraints on destructive actions sit alongside target size rather than being a separate concern.