¿Qué es la ley de Fitts?
En 1954 el psicólogo Paul Fitts publicó una serie de experimentos sobre el control motor humano. Los participantes tocaban alternativamente dos objetivos con un punzón mientras él variaba la distancia entre ellos y su anchura. El resultado fue muy consistente: el tiempo de movimiento crecía con la distancia y se reducía con la anchura del objetivo, siguiendo una relación logarítmica sencilla.
Décadas después, la investigación en interacción persona-ordenador demostró que la misma ley predice el apuntado con ratón, trackpad y dedo. Por eso es uno de los principios más citados del diseño de interfaces.
La fórmula de la ley de Fitts
La versión más usada hoy en interacción persona-ordenador es la formulación de Shannon, popularizada por I. Scott MacKenzie:
TM = a + b · log2(D / A + 1)
- TM: tiempo de movimiento, lo que se tarda en alcanzar el objetivo.
- D: distancia desde el punto de partida hasta el centro del objetivo.
- A: anchura del objetivo medida en la dirección del movimiento.
- a, b: constantes que se miden para un dispositivo y una persona.
El logaritmo se llama índice de dificultad y se mide en bits. Duplicar la distancia, o reducir el tamaño a la mitad, añade aproximadamente un bit —y una cantidad fija de tiempo— a cada clic.
Qué significa la ley de Fitts para el diseño web
Haz grandes los objetivos principales
Da a los botones un relleno generoso y haz clicables las tarjetas completas, no solo el pequeño enlace «Leer más».
Reduce la distancia
Coloca el botón de enviar justo debajo del último campo del formulario y las acciones junto al contenido al que afectan.
Aprovecha bordes y esquinas en escritorio
El puntero se detiene en el borde de la pantalla, así que los objetivos situados allí se comportan como si fueran infinitamente profundos; por eso los sistemas operativos ponen menús y docks en los bordes.
Separa los objetivos pequeños
Los iconos apiñados provocan pulsaciones erróneas. El espacio vacío actúa como margen de seguridad.
Diseña para el pulgar
En el móvil mucha gente navega con una sola mano. Las acciones principales cerca de la parte inferior y central de la pantalla son más fáciles de alcanzar que las esquinas superiores.
Tamaños recomendados para áreas táctiles
| Pauta | Tamaño mínimo | Notas |
|---|---|---|
| WCAG 2.2 — 2.5.8 Tamaño del objetivo (mínimo), nivel AA | 24 × 24 px CSS | Los objetivos más pequeños solo cumplen si tienen suficiente separación; los enlaces dentro de un texto están exentos. |
| WCAG 2.2 — 2.5.5 Tamaño del objetivo (mejorado), nivel AAA | 44 × 44 px CSS | El objetivo más seguro para los controles principales. |
| Apple Human Interface Guidelines | 44 × 44 pt | Área de toque recomendada para controles en iOS. |
| Android / Material Design | 48 × 48 dp | Tamaño de área táctil recomendado. |
Una regla práctica para webs: 44 × 44 px en todos los botones principales y botones de icono, al menos 24 × 24 px con separación en los controles secundarios, y tamaño de texto normal en los enlaces dentro de frases.
Ejemplos de la ley de Fitts: buenos y malos
| Patrón | Por qué funciona o falla |
|---|---|
| ✓ Botón de pago a todo el ancho en móvil | Objetivo grande en la zona natural del pulgar: rápido y difícil de fallar. |
| ✓ Toda la tarjeta de producto es clicable | El objetivo pasa a ser la tarjeta completa, no un enlace pequeño. |
| ✗ Una «×» diminuta para cerrar un pop-up | Pequeña y lejos, en la esquina: se falla y frustra. |
| ✗ Botones de icono de 24 px separados 4 px | Se pulsa el vecino por error, sobre todo en pantallas táctiles. |
| ✗ La llamada a la acción principal como enlace de texto | Objetivo pequeño y señal visual débil: menos clics. |
Cómo comprobar la ley de Fitts en tu web
Abre tu página en las herramientas de desarrollo del navegador, cambia a una vista de móvil e inspecciona el tamaño de cada botón y enlace. Cualquier control principal por debajo de 44 px en alguna dirección merece un arreglo; por debajo de 24 px sin separación no cumple WCAG 2.2 AA.
Lensux abre tu página en un navegador real en escritorio y móvil, mide cada elemento interactivo y lista los que miden menos de 44 px con su tamaño y posición. Los enlaces dentro de frases se excluyen, como permite WCAG.
Preguntas frecuentes
¿Qué tamaño de botón es bueno según la ley de Fitts?
La ley de Fitts no fija una cifra: dice que más grande es más rápido. En la práctica, 44 × 44 px es el mínimo recomendado para controles principales en pantallas táctiles, y WCAG 2.2 exige al menos 24 × 24 px (o suficiente separación) en el nivel AA.
¿La ley de Fitts se aplica a las pantallas táctiles?
Sí. La investigación la ha extendido al uso con el dedo. Como la yema es mucho menos precisa que un puntero y tapa lo que toca, las áreas táctiles tienen que ser más grandes que los objetivos para ratón.
¿Es mejor 44 px o 48 px?
Ambos son buenos objetivos: 44 pt viene de las pautas de Apple y 48 dp de las de Android. Elige uno para tu sistema de diseño y aplícalo con coherencia; cualquiera de los dos es mucho mejor que el mínimo de 24 px.
Fuentes
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391
- MacKenzie, I. S. (1992). Fitts' law as a research and design tool in human–computer interaction. Human–Computer Interaction, 7(1), 91–139
- W3C — Understanding WCAG 2.2: Target Size (Minimum)
- Apple — Human Interface Guidelines: Accessibility
- Laws of UX — Fitts's Law