Ley de Fitts: lo importante, más grande y más cerca.
El freno es más grande y está más cerca que el acelerador porque se necesita rápido. Esa misma ley decide si un botón resulta cómodo o difícil.
En esta página
Al sentarse en cualquier coche y mirar hacia abajo, el pedal de freno es más grande que el acelerador y está un poco más cerca y más bajo, para que el pie lo encuentre rápido. No es una decisión estética. Es la ley de Fitts, descrita por el psicólogo Paul Fitts en 1954, y también determina cómo se siente una interfaz.
La ley es sencilla. El tiempo para alcanzar un objetivo depende de su distancia y su tamaño. Más cerca y más grande significa más rápido y más fácil de acertar. Más lejos y más pequeño significa más lento y más propenso a errores. He aplicado esta regla al diseñar interfaces usadas por más de dos millones de personas porque convierte una vaga sensación de facilidad en algo que se puede colocar y medir. Así se usa.
Ideas clave
- El tiempo para alcanzar un objetivo crece con la distancia y disminuye con el tamaño (Fitts, 1954). Las acciones importantes deben ser grandes y estar cerca.
- Un dedo necesita un objetivo de al menos 1 por 1 cm (Nielsen Norman Group): 44pt en las plataformas Apple, 48dp en Material y 44 píxeles CSS para WCAG 2.5.5.
- La acción principal debe estar donde ya descansa la mano. En un móvil es la zona del pulgar en la parte inferior, no un enlace en la esquina superior.
- Las acciones poco frecuentes y destructivas deben ser más pequeñas y estar separadas para evitar toques accidentales.
- El borde de la pantalla detiene el cursor, por lo que un objetivo pegado a él actúa como si fuera infinitamente grande. Un botón inferior de ancho completo resulta fácil de pulsar.
¿Qué es la ley de Fitts?
Es una predicción de 1954 sobre cuánto se tarda en señalar algo. Paul Fitts descubrió que el tiempo para moverse hasta un objetivo depende de dos cosas: su distancia y su tamaño. Duplicar la distancia aumenta el tiempo. Duplicar el tamaño lo reduce. Más cerca y más grande siempre gana.
El pedal de freno es la ley de Fitts hecha acero. Es más grande que el acelerador y está algo más cerca y más bajo porque, cuando hace falta, hace falta ya. Las pantallas siguen la misma regla. La acción que se quiere que la gente realice debe ser fácil de alcanzar, y la distribución ayuda a la mano o se lo impide.
¿Qué tamaño debe tener un objetivo táctil?
El suficiente para un dedo, que es más grande de lo que dibujan muchos diseñadores. Nielsen Norman Group recomienda elementos interactivos de al menos 1 por 1 cm para evitar errores al tocar. Un objetivo más pequeño obliga a apuntar, y al apuntar se falla.
Las plataformas coinciden y dan cifras.
| Plataforma | Tamaño del objetivo | Fuente |
|---|---|---|
| iOS y iPadOS | 44 × 44 pt, tamaño predeterminado del control | Guías de interfaz humana de Apple |
| Android, Material Design | 48 × 48 dp, separados 8 dp | Accesibilidad de Material Design |
| Web, WCAG 2.5.5 (AAA) | 44 × 44 CSS px | WCAG 2.1, tamaño del objetivo |
Ante la duda, 44 es el mínimo, no la meta. La acción más importante merece más espacio.
¿Dónde debe ir la acción principal?
Donde ya descansa la mano. En un móvil sostenido con una mano, es la zona del pulgar en la parte inferior de la pantalla, no un pequeño enlace en una esquina superior que obliga a estirarse y forzar la vista. Al colocar la llamada a la acción principal donde cae el pulgar, deja de sentirse lejana.
Por eso se han extendido las barras inferiores, los botones de ancho completo y los paneles que salen desde abajo. No son una moda. Son la ley de Fitts aplicada al pulgar. Cuanto más cerca esté el objetivo de la mano en reposo y más grande sea, más parece que la interfaz se adapta a la persona.
¿Y las acciones peligrosas?
Deben ser más difíciles de alcanzar, deliberadamente. La regla funciona en ambos sentidos, y en la segunda mitad se reconoce el buen diseño. Eliminar, pagar, confirmar para siempre. Conviene mantener esas acciones más pequeñas, separadas y a cierta distancia para que un toque descuidado no se convierta en un arrepentimiento que haya que deshacer.
La fricción suele ser el enemigo, pero aquí tiene sentido. Un botón destructivo algo más pequeño y más alejado, o protegido por un segundo paso, cuesta una fracción de segundo y evita algún desastre. El tamaño y la distancia comunican lo que importa y lo que merece una pausa.
¿Por qué funcionan tan bien los bordes y las esquinas?
Porque el borde detiene el cursor o el pulgar. No se puede sobrepasar. En términos de Fitts, un objetivo pegado a un borde se comporta como si fuera infinitamente grande en esa dirección, así que es fácil acertar incluso sin mirar. Es el principio de un botón que ocupa toda la parte inferior y de un menú pegado a la esquina del escritorio.
Conviene aprovechar los bordes disponibles. Una acción principal fijada al borde inferior del móvil y de ancho completo es uno de los objetivos más fáciles de pulsar. El marco de la pantalla hace la mitad del trabajo.
La revisión de dos minutos
Nada de esto exige rediseñar. Basta con abrir el producto y localizar la acción principal. ¿Es el elemento más grande, más cercano y más fácil de pulsar? Después se localiza la acción más destructiva y se comprueba que no lo sea. Si ocurre al revés, ya hay tarea para la tarde.
El tamaño y la distancia no son decoración. Son la forma en que una interfaz indica a la mano qué importa. Al acertar con ellos, el producto resulta cómodo sin que nadie sepa explicar por qué. Para aplicarlo a un producto en desarrollo, basta con contarme de qué se trata.
Preguntas frecuentes
¿Qué es la ley de Fitts?
La ley de Fitts establece que el tiempo para llegar a un objetivo depende de su distancia y de su tamaño. Los objetivos más cercanos y grandes son más rápidos y fáciles de alcanzar, por lo que las acciones importantes deben ser grandes y estar al alcance.
¿Cómo se aplica la ley de Fitts al diseño de interfaces?
La acción principal debe ser grande y estar donde ya se encuentra la mano, como la zona del pulgar en la parte inferior del móvil. Las acciones poco frecuentes o destructivas deben ser más pequeñas y estar separadas para dificultar los toques accidentales.
¿Por qué son buenos los bordes de pantalla para los botones?
El borde detiene el cursor o el pulgar, por lo que un objetivo pegado a él actúa como si fuera infinitamente grande en esa dirección. Un botón que ocupa todo el borde inferior resulta fácil de pulsar: es la ley de Fitts a favor del usuario.
Fuentes
- en 1954 doi.org
- Nielsen Norman Group nngroup.com
- Guías de interfaz humana de Apple developer.apple.com
- Accesibilidad de Material Design m2.material.io
- WCAG 2.1, tamaño del objetivo w3.org
