Ley de Fitts: la piedra angular del diseño de interacción web

¿Qué es la Ley de Fitts? Descubre este concepto clave en el diseño de interacción web y ponlo en práctica.

[Artículo revisado, mejorado y ampliado el 1 de Junio de 2014]

La ley de Fitts es un modelo relacionado con el movimiento humano, aplicado en ergonomía, diseño de interacción y psicomotricidad que ha tenido un éxito extraordinario desde su formulación en los años 50. Fue creado originalmente por el psicólogo Paul Fitts, posiblemente a partir de sus experiencias previas en las Fuerzas Aéreas de los Estados Unidos.

Tras la publicación de las conclusiones de Fitts en 1954, se han realizado incontables estudios, desarrollos y comentarios posteriores, hasta nuestros días.

Básicamente, la Ley de Fitts suele definirse como un modelo aplicado al movimiento humano que establece que:

El tiempo necesario para alcanzar un objetivo con un movimiento rápido es una función del tamaño de dicho objetivo y de la distancia que hay que recorrer hasta él.

…Pero esta definición probablemente no dice demasiado. Para entender mejor en qué consiste la Ley de Fitts, te propongo que sigamos el mismo camino que recorrió él…

Reproduciendo empíricamente la Ley de Fitts

Imagina que realizas el siguiente experimento:

Partiendo de una posición de reposo, mueves la mano rápidamente para interactuar sobre un dispositivo, por ejemplo un pequeño interruptor, situado a una distancia determinada.
Variando esta distancia y el ancho del interruptor con respecto al eje de desplazamiento de tu mano, repites una y otra vez la operación, anotando los tiempos conseguidos.
Finalmente, intentas deducir un modelo matemático que te permita calcular el tiempo necesario para realizar esa operación en función de las dos variables (ancho y distancia), sin tener que medirlo empíricamente cada vez.

Interesante, ¿verdad?

Pero puedes ahorrarte el trabajo, ya que Fitts hizo todo esto por nosotros, con pleno éxito, hace más de 50 años. Gracias a sus conclusiones, desde entonces nos hemos podido beneficiar de un modelo matemático de extraordinaria utilidad para el diseño de dispositivos ergonómicos y para la mejora de cualquier tipo de interacción hombre-máquina que requiera movimientos rápidos y precisos.

Sin embargo, me gusta pensar que, más allá del modelo matemático:

La Ley de Fitts nos ayuda a entender principios básicos en diseño de interacción que podemos aplicar intuitivamente para perfeccionar nuestras decisiones.

Veamos a continuación cómo…

Ley de Fitts y diseño de interacción web. Consejos básicos.

La ley de Fitts y su posteriores desarrollos llevan implícitas algunas conclusiones que nos pueden servir para tomar decisiones correctas a la hora de diseñar o auditar nuestra web.

La primera conclusión práctica que podemos extraer de la Ley de Fitts es clara:

Cuando esperamos que el usuario haga clic en un elemento de interacción, el tamaño del elemento y su posición con respecto al punto de partida del cursor importan. Mucho.

Los expertos en diseño de interacción, especialmente aquellos curtidos en el exigente mundo del eCommerce, saben bien que:

Cuando “nos la estamos jugando” en un formulario de proceso de compra, en ese instante mágico en el que nuestro cliente está apunto de comprar o arrepentirse, los pequeños detalles en el diseño pueden marcan la diferencia.

Veamos qué aspectos debemos considerar para entender esa «diferencia»:

1º.- El tamaño y la posición importan más de lo que crees

Las acciones más habituales o más importantes para los usuarios de una web deben estar lo más cerca posible de la posición previa del cursor y tener una superficie clicable mayor (a este respecto ten en cuenta también el epígrafe siguiente).

Ejemplo común de mala práctica:

Al completar el último campo en un proceso de registro, nos encontramos con que el botón “enviar” está más lejos de ese punto que otros botones del formulario y su tamaño es exactamente el mismo (¡MAL HECHO!).

2º.- El concepto de “ancho” es más relativo de lo que crees

Si aumentamos el tamaño de los enlaces, debemos tener en cuenta cuál es la dirección de movimiento del cursor más probable cuando éstos se usan, ya que lo que cuenta es el recorrido útil sobre el eje de desplazamiento del cursor. Si el movimiento es predominantemente vertical, por ejemplo, será la altura del botón, y no su ancho, la medida a potenciar.

3º.- Atención al despliegue de menús jerárquicos

En los menús jerárquicos, asegúrate de que las opciones que aparecen quedan cerca de la posición original y que no se cambia la dirección del desplazamiento.

Veamos un ejemplo de práctica «mejorable», muy habitual en prensa online: en el menú superior, tras hacer clic (o colocar el cursor sobre) una sección, se despliegan las sub-secciones horizontalmente sobre una estrecha banda, de modo que en ocasiones hay que recorrer toda la pantalla para hacer clic el destino elegido, manteniendo además la componente horizontal del desplazamiento (y eso, tras haberlo encontrado visualmente). La ilustración siguiente lo explica probablemente mejor:

Esta discutible práctica está muy extendida, incluso en sitios web de grandes empresas e instituciones. En algunos casos es una decisión consciente y deliberada, que se debe probablemente al deseo de evitar que los menús se desplieguen sobre los contenidos y la publicidad, ocultándolos o creando solapamientos no deseados (¡cuestión de prioridades!).

4º.- Pon el diseño al servicio de tus usuarios, y no al revés

No es buena idea sacrificar el tamaño y la ubicación de los enlaces por criterios meramente estéticos o de economía de espacio

…Quizás tengamos una buena razón para hacerlo en determinadas ocasiones, pero debemos sopesar antes los pros y los contras con detenimiento.

5º.- Si se lo ponemos más fácil al usuario, que se note

Si ampliamos el espacio sobre el que el usuario puede hacer clic en un enlace, sus límites deben ser claramente perceptibles, ya que de lo contrario esto no servirá de nada:

Por lo que al usuario respecta, la superficie clicable es la que él percibe como tal.

6º.- No te lo tomes a la tremenda

La fórmula nos dice que cada incremento en el tamaño del objeto conlleva una mejora progresivamente menor (un matemático nos diría que esto se debe a la naturaleza logarítmica de la función). La traducción es que hacer enlaces grandes ayuda, pero hacerlos “enormes” no aporta ningún beneficio adicional.

No olvides la variable “distancia”. Quizás no puedas (o no quieras) hacer más grande un objeto, pero posiblemente sí puedes ubicarlo más cerca.

Las matemáticas de la Ley de Fitts

Si tienes curiosidad por conocer la parte matemática, aquí está la fórmula:

MT = a + b log₂(2A/W)

Donde MT es el tiempo necesario para completar el movimiento, a y b son constantes empíricas relacionadas con las condiciones concretas de la prueba, W es al ancho del objetivo y A la distancia (en la actualidad suelen aplicarse modelos posteriores algo diferentes, propuestos por otros investigadores; puedes encontrar más información en los enlaces que aparecen en las notas de este post).

Más información sobre la Ley de Fitts

Espero que todo lo relacionado con la Ley de Fitts y sus aplicaciones en el entorno web te resulte tan apasionante como a mí. Si quieres saber más, a continuación tienes interesantes enlaces sobre el tema.