Fitts's Law: Optimizing the Thumb Zone in Mobile Interfaces

If a user misses your button on the first try, their thumb isn't the problem. Your code is. Distance kills conversion; size saves it.

The minimum touch target area is 44x44px. The natural "Thumb Zone" is located in the bottom third of the screen. Use pseudo-elements (::after) to expand the clickable area without ruining your visual design.

Fitts's Law is pure math: the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. On mobile, Steven Hoober's research proved that 75% of users navigate using a single thumb.

If you place your primary "Checkout" button in the top-left corner and make it just 20 pixels wide, you force the user to stretch their hand and aim with surgical precision. Guaranteed frustration, abandoned carts.

The Ghost Target

Making a button visually huge ruins the UI. Leaving it at 24px ruins the UX. The technical solution is tricking the DOM by creating a Ghost Target.

.btn-mobile {
  position: relative;
  /* Visually looks like a 24px icon */
  width: 24px;
  height: 24px;
}

/* Real touch target of 44px (Accessible target) */
.btn-mobile::after {
  content: "";
  position: absolute;
  /* Expands 10px in every direction (24 + 10 + 10 = 44) */
  inset: -10px; 
  min-width: 44px;
  min-height: 44px;
}

Place your primary actions in the thumb's green zone (the bottom-center). Avoid extreme edges: even though the thumb can reach the very bottom, mechanical precision drops drastically. Expand the invisible touch area and users will thank you without even noticing.