Las leyes de UX más importantes en diseño web: la Ley de Fitts

A la hora de enfrentarnos a un lienzo en blanco para crear un diseño web, nos asaltan muchas dudas acerca de dónde colocar un elemento, cómo se va a relacionar con el resto, qué forma y color es el más adecuado, etc. Y es que el diseño de interfaces web (UI) conlleva una serie de decisiones complejas que deben tener en cuenta muchos aspectos técnicos y humanos.

Es este último factor, el humano, el que estudia la psicología, y de las conclusiones de algunos de sus estudios pueden extraerse una serie de leyes que ayudan a tomar decisiones para mejorar la experiencia de usuario (UX). En este post vamos a ver cómo nos afecta en diseño web y de qué trata la Ley de Fitts.

¿Quién es Paul Fitts?

Paul Fitts fue un psicólogo que centró sus estudios en el movimiento humano. Fue teniente coronel en las Fuerzas Áreas de EEUU y desarrolló su modelo de movimiento rápido dirigido para mejorar la reacción de los pilotos y la seguridad en la aviación. Su ley se basa en una fórmula:

T=a+b.log2(D/W+1)

En la fórmula podemos ver el tiempo promedio que se tarda en completar la tarea de alcanzar un objetivo según su distancia y tamaño. La ecuación toma en cuenta A + B, que se refiere a la velocidad que se tarda en llegar a un objetivo en línea recta.

¿Qué aporta la Ley de Fitts a UX?

La fórmula establecida por Paul Fitts determina el tiempo que se tarda en alcanzar un objetivo desde la posición actual del usuario y el tamaño de ese objetivo. Si lo aplicamos a la interacción en web, el usuario realiza sus acciones con el ratón o dedo, lo que será la posición, y el objetivo serán los elementos de tipo botón.

Entonces, según los estudios de este psicólogo, ¿cómo podemos mejorar nuestro diseño UI según la Ley de Fitts?

Crear objetivos más grandes

Se trata de reducir el número de tareas principales para el usuario en cada página y ampliar los objetivos que permiten acceder a dichas tareas, como los botones, para que se puedan ejecutar de forma rápida.

Captura de la página de inicio de Spotify.

En una interfaz como la de Spotify se reduce al mínimo los reclamos y se potencia el objetivo principal con un botón en forma de píldora que sirve para lo más importante, descargar la aplicación.

Si no creamos un área amplia en la que se puede hacer clic o contaminamos la interfaz con múltiples objetivos, el usuario requerirá más precisión para mover el cursor y activarlo, lo que conduce a tiempos de navegación más lentos o incluso a fallar.

Reducir el desplazamiento

Consiste en distribuir los botones y vínculos próximos entre sí de forma regular para reducir la cantidad de desplazamiento que el cursor debe recorrer. De esta forma se daría lugar a grupos de enlaces o menús.

En este ejemplo de la web de awwwards, al desplegar el menú oculto, el botón de cierre queda de pronto distanciado de la posición del usuario, lo que implica un desplazamiento innecesario para completar el objetivo.

En el caso contrario, en esta sección de Squarespace de videos con testimonios, una vez ejecutas el vídeo, el propio puntero del ratón representa el icono de equis para cerrarlo, reduciendo la distancia a 0 entre el punto A y B de la Ley de Fitts.

Evitar la tensión muscular

La Ley de Fitts no solo determinaba la distancia, sino el esfuerzo físico que se requiere para realizar la tarea de alcanzar el objetivo. Por ejemplo, en los móviles, la posición del menú desplegable, también conocido como menú burger, está en muchas ocasiones en una posición que nos obliga a forzar la postura de la mano para alcanzarlo.

A pesar de los numerosos estudios que ya existen, todavía hay una fuerte tendencia a poner el botón burger en la zona más inaccesible.

Sobre esta problemática se ha profundizado más allá de la simple aplicación de la Ley Fitts. Como ejemplo, el artículo de Josh Clark en A List Apart, que deja claro que lo más óptimo sería posicionar este botón en la parte inferior, donde requiere menos desplazamiento y una postura más accesible.

Muchas de las aplicaciones móviles como Instagram ya posicionan abajo los botones más importantes.

Uso de Prime Pixels y Magic Pixels

Las esquinas y los bordes de la pantalla se consideran de acceso rápido, ya que el marco de la ventana guía y posiciona al usuario con respecto al conjunto de la página, y por lo tanto, sirve de orientación.

En este ejemplo de la web de inicio de Figma se puede ver representadas las posiciones más habituales para colocar los elementos más importantes: la marca, en la esquina superior izquierda, el botón de acceso para los usuarios, en la esquina superior derecha. Y por último, en el centro de la pantalla, el botón de acceso a la prueba del software gratuito.

Este patrón lo podemos ver repetido en otras webs similares como, por ejemplo, en la home de Wix.

Conclusiones

Aunque cuando Paul Fitts elaboró sus estudios no tenia en mente las páginas web, la forma en la que las personas afrontamos tareas concretas cuando nos relacionamos con cualquier interfaz no ha cambiado demasiado desde entonces. Por eso podemos seguir aplicando estos conceptos para facilitar el uso de nuestras webs a los usuarios. Aunque siempre existe el lado oscuro, y también reconoceremos estas pautas aplicadas al contrario, para confundirnos y hacernos errar.