Fitts Law Touch Targets

Fitts's Law for touch targets

The finger is a much wider, much less precise pointer than a mouse cursor. Fitts's Law still applies, but the constants change dramatically — and a few touch-specific phenomena (occlusion, thumb reach, edge gestures) layer on top. This skill covers the practical rules.

Minimum sizes

Every major touch platform publishes a recommended minimum. They converge:

The practical rule: 44×44 CSS pixels for any touchable element. This is the safe number across platforms and accessibility levels. Going smaller is occasionally defensible in specific dense expert contexts; never as a default.

The visible icon inside the button can be smaller (16–24px is common). The hit area — the actual touchable region — is what 44×44 measures.

/* Right: a small icon with a generous tap area */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;        /* keeps icon centered while tap area stays at 44 */
  border: 0;
  background: transparent;
  border-radius: 22px;
}
.icon-button svg { width: 20px; height: 20px; }

Spacing between targets

Fitts's Law is about acquiring one target. When targets are clustered, spacing between them prevents accidental neighbor-taps. The convention:

• At least 8px of clear space between adjacent touch targets.
• 44×44 hit area applies to each target, even if visually they overlap (e.g., padded buttons share visual edges).

For dense clusters (chip rows, segmented controls), increase visual differentiation: bordered, with internal padding, with adequate gap.

The thumb-reach map

When a phone is held one-handed, the thumb can reach some screen regions easily and others only with strain. Research (Hoober and others) maps this:

+--------------------+
|       hard         |  <- top of screen, far from thumb base
|   hard | medium    |
| medium | easy      |
| medium | easy      |
| medium | easy      |  <- bottom-right (right hand) is easiest
+--------------------+

For right-handed users, the bottom-right of the screen is easiest; the top-left is hardest. Left-handed users mirror.

Practical implications:

• Primary actions go in the lower portion of the screen. Floating action buttons (FAB) at bottom-right are a strong Fitts-and-thumb-reach win.
• Bottom navigation beats top navigation for high-frequency tap-to-navigate patterns.
• Top-bar actions should be infrequent or hand-agnostic (search, settings, profile menu — not "save" or "publish").
• Reachability features (iOS double-tap-home; Android one-handed mode) exist because top corners are genuinely hard.

<!-- Bottom nav: thumb-friendly, primary destinations -->
<nav style="position: fixed; bottom: 0; left: 0; right: 0;">
  <!-- 3-5 destinations, evenly spaced, 56px+ tall -->
</nav>

<!-- FAB: bottom-right for right-handed primary action -->
<button style="position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 28px;">
  <PlusIcon />
</button>

Occlusion (the finger covers the target)

Once the user's finger touches the screen, it covers the target. A few consequences:

• Confirm visually after touch, not just on touch-up. The user wants to know the press registered before they lift.
• Don't rely on the user reading text under their finger. Tooltips, micro-confirmations, "what does this do?" hints under the touch point are invisible.
• Touch targets should provide visual state changes that radiate beyond the finger — color flash on the whole row, a ripple effect, an outline that extends past the contact area.

Material Design's ripple effect is a classic occlusion-mitigation: the ripple expands outward from the touch point, providing visible feedback that survives the finger's presence.

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
.button-pressed::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  animation: ripple 600ms;
}

Edge gestures and the safe area

Modern phones use the screen edges for system gestures (back-swipe, app-switcher, control-center). A button placed at the absolute edge competes with these gestures.

Practical rule: keep an 8–16px inset from the edges for primary interactive content. Use the system's safe-area insets for top notch and bottom home-indicator clearance:

.bottom-bar {
  padding-bottom: env(safe-area-inset-bottom);
}
.top-bar {
  padding-top: env(safe-area-inset-top);
}

The screen-edge Fitts-Law advantage still works for layout (a tap target abutting the edge is large in one dimension), but interaction must respect system gestures.

Hover states (and why they don't translate)

Touch devices have no hover. UI patterns that rely on hover-revealed actions (a row's "Edit" / "Delete" buttons that appear on cursor over) silently fail on touch. Mitigations:

• Always-visible row actions (perhaps dimmed; see below). Touch users see and can tap them.
• Press-and-hold to reveal a context menu (analogous to right-click).
• Swipe gestures for revealed actions (iOS-style swipe-to-delete on a list row).

Don't ship "hover to discover the action" patterns to mobile.