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.