Ley de Fitts: Optimizando el 'Thumb Zone' en Interfaces Móviles

Si un usuario no puede tocar tu botón a la primera, el problema no es su pulgar. Es tu código. La distancia mata la conversión; el tamaño la salva.

El área táctil mínima es de 44x44px. El "Thumb Zone" natural de confort está en el tercio inferior de la pantalla. Usá pseudo-elementos (::after) para agrandar el área de clics sin arruinar tu diseño visual.

La Ley de Fitts es matemática pura: el tiempo para alcanzar un objetivo depende de qué tan lejos está y qué tan grande es. En dispositivos móviles, la investigación de Steven Hoober demostró que el 75% de los usuarios navega con un solo pulgar.

Si ponés el botón primario de "Comprar" en la esquina superior izquierda y mide apenas 20 píxeles, estás forzando al usuario a estirar la mano y apuntar con precisión de cirujano. Frustración garantizada, carritos abandonados.

The Ghost Target

Hacer un botón visualmente gigante arruina la UI. Dejarlo en 24px arruina la experiencia. La solución técnica es engañar al DOM creando un Ghost Target.

.btn-mobile {
  position: relative;
  /* Visualmente parece un icono de 24px */
  width: 24px;
  height: 24px;
}

/* Área táctil real de 44px (Target accesible) */
.btn-mobile::after {
  content: "";
  position: absolute;
  /* Expande 10px en cada dirección (24 + 10 + 10 = 44) */
  inset: -10px; 
  min-width: 44px;
  min-height: 44px;
}

Acomodá las acciones primarias en la zona verde del pulgar (el centro-inferior). Evitá los bordes extremos: aunque el pulgar llega abajo, la precisión mecánica cae drásticamente. Agrandá el área táctil invisible y los usuarios te lo van a agradecer sin darse cuenta.