Fitts's Law and Tap Target Sizing

A mobile settings screen had 12 toggle switches, each 20×20px, stacked 6px apart. Users were accidentally toggling the wrong settings. Support tickets poured in: "I turned off notifications but something else got turned off." The developer increased the visual toggle size. But the invisible hit area stayed 20×20px. The problem didn't go away.

The hit area is what Fitts's Law cares about — not the visual size of the element. A 44px minimum hit area means users can tap anywhere in a 44-pixel square and register a hit. A 20px visual element with a 20px hit area means every tap needs to be precise. On a moving phone, in a pocket, with a gloved hand — that precision fails constantly.

The key insight: visual size and interactive hit area are separate things in CSS. You can show a 16×16px icon while giving it a 44×44px tap target by padding the containing element:

/* ❌ Small hit area — same as visual size */
.icon-btn {
  width: 20px;
  height: 20px;
}

/* ✅ 44px hit area, 20px visual icon */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0; /* hit area is the box, icon inside is visually small */
}

The min-width / min-height approach is safer than width / height — it lets the button grow if the text is longer while maintaining a minimum tap target.

A mobile shopping cart had a small "Remove" link next to each item — 18px tall, rendered as a plain text link with 4px of vertical padding. The links were stacked 6px apart. In a week of production data, the support team saw a pattern: "I didn't mean to remove that item." Customers were accidentally tapping "Remove" when they were trying to tap the quantity selector or the item image above it.

On a 390px-wide iPhone screen held loosely while commuting, an 18px tap target that sits 6px from another interactive element is essentially a coin flip. Users were not making mistakes. Physics was making mistakes for them.

The fix converted the "Remove" text link to a button with min-height: 44px and enough horizontal padding to make it comfortable. The trash icon inside stayed visually small — 16px — but the tappable area expanded to meet the 44px minimum. The gap between the Remove button and the quantity stepper above it was increased from 4px to 8px.

Accidental "Add item back" rate fell from 22% to 4% in the first week. No user noticed a visual change — the icon looked identical. Only the invisible hit area changed. Support tickets about accidental removals stopped entirely within two weeks.

Both modes show the same settings screen. The "Small" mode uses 20×20px hit areas. The "Large" mode uses 44×44px hit areas. Try to accurately tap the third toggle from the top in both modes — notice how much more careful you have to be with the small targets.

The padding-extension technique: make the visible element smaller than the tap area by padding the container button rather than setting explicit width/height on the icon.

/* ❌ Visual size = hit area — too small */
.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ✅ 44px hit area, small visual icon */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none; /* prevent SVG from swallowing clicks */
}

Key pitfall: setting width: 44px instead of min-width: 44px. Use min-width so the button grows if a label is added later without breaking the touch target floor.