Diseño UX/UI

Ley de Fitts y su relación con el diseño UX/UI

Cuando trabajamos en experiencia de usuario nos enfocamos en que la navegación y la interacción entre el usuario y el sistema sea agradable, no queremos que el usuario tenga que buscar y buscar dentro del sitio, para llegar a lo que necesita después de 5 clicks. Es por eso que deberíamos tener presente la Ley de Fitts, la cual básicamente dice que cuanto más tardes en llegar a tu destino/objetivo, menos interés tendrás cuando llegues. 

Paul Fitts demostró que el tiempo requerido para alcanzar un objetivo depende de la distancia existente entre ambos puntos, a lo que se le debe agregar la relación inversa con su tamaño.

De esta forma, los elementos que se encuentren más cerca y tengan un mayor tamaño ayudarán a detectar mejor y más rápido lo que estamos buscando.

Por ejemplo, en un control remoto de televisión, el botón para encenderla suele ser de color rojo y a veces más grande que el resto de los botones, ¿Por qué? Esta acción es la principal si queremos ver televisión. 

Sin embargo, en el mundo digital, un CTA pequeño y ubicado lejos nos hará más difícil la tarea de hacer click. Asimismo, aumentará el tiempo y energía que debemos utilizar para poder llegar a nuestro objetivo.

Elementos a considerar en la Ley de Fitts

Ahora bien, para lograr una buena navegación por parte de los usuarios en una interfaz, existen algunos elementos fundamentales. Estos son:

Tamaño

Como mencionamos anteriormente si el botón/imagen tiene un buen tamaño, es claro y de fácil acceso para hacer click, el usuario lo sabrá inmediatamente y podrá acceder rápidamente a la información que está buscando.

En el caso del sitio web de Figma, los botones más importantes se encuentran destacados en color negro y un tamaño predominante en comparación a los otros. Son fáciles de identificar y se encuentran en lugares estratégicos donde el usuario ya tiene incorporado en la memoria donde se puede encontrar cada uno como un patrón de diseño.

Aunque, debemos tener en cuenta que hacer más grande un botón solo por el hecho de que sea identificable no es lo óptimo. Este debe ir en armonía con el resto del diseño del sitio, de lo contrario solo generará un error de usabilidad.

Distancia

Este mismo botón después de tener el tamaño adecuado para poder identificarlo, deberá estar situado lo más cerca posible de la posición natural del cursor. Por ejemplo, si estoy abriendo un menú/dropdown el primer objeto/hijo de este menú deberá estar lo más cerca posible de nuestro cursor.

En mobile sabemos que existe la Thumb Zone, donde todo lo que debería tener el usuario para fácil acceso, debería encontrarse en esa zona.

Thumb Zone para menús desplegables en móvil

Optimizando tus interfaces

Es importante ayudar al usuario a encontrar e identificar fácilmente lo que está buscando. Para esto, debemos utilizar una combinación de tamaño y ubicación del objeto para que pueda llegar a él fácil y velozmente. 

Sin embargo, no todo es disminuir el esfuerzo para realizar alguna tarea, ya que podemos generar un error. Por ejemplo, en una versión móvil, si ponemos todo al alcance, el usuario puede apagar el celular sin querer o enviar un correo que no deseaba enviar todavía. 

Por ello, la Ley de Fitts es relevante, pero no la más importante. Recuerda que existen otras a las que también debes prestar mucha atención y usarlas como base para tus interfaces.