La ley de Fitts expresa que el tiempo para llegar a un objetivo (visual) es una función de la distancia a dicho objetivo y su tamaño. En otras palabras: El tiempo que se requiere para alcanzar a pulsar un objetivo depende de una relación logarítmica entre su superficie y la distancia a la que se encuentra.
La siguiente ecuación permite calcular el tiempo con cierta precisión:
T = a + b log2 ( D / S + 1 )
T: es el tiempo medio necesario para completar el movimiento.
a: representa el tiempo de inicio / parada en segundos para un dispositivo determinado
b: mide la velocidad inherente del dispositivo
D: es la distancia desde el punto inicial hasta el centro del objetivo.
W: es el ancho del objetivo medido sobre el eje del movimiento. También puede entenderse W como la tolerancia de error permitida en la posición final, dado que el punto final del movimiento debe quedar a +/- W/2 del centro del objetivo.
La siguiente ecuación permite calcular el tiempo con cierta precisión:
T = a + b log2 ( D / S + 1 )
T: es el tiempo medio necesario para completar el movimiento.
a: representa el tiempo de inicio / parada en segundos para un dispositivo determinado
b: mide la velocidad inherente del dispositivo
D: es la distancia desde el punto inicial hasta el centro del objetivo.
W: es el ancho del objetivo medido sobre el eje del movimiento. También puede entenderse W como la tolerancia de error permitida en la posición final, dado que el punto final del movimiento debe quedar a +/- W/2 del centro del objetivo.
1º.- Lo más importante debe ser más grande o estar más cerca (si es tan obvio ¿por qué no lo hacemos?)
Las acciones más habituales o más importantes para los usuarios de un sitedeben 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!).
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!).
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).
Esta discutible práctica está muy extendida, incluso en sitios web “importantes”. 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 deseado.
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).
Esta discutible práctica está muy extendida, incluso en sitios web “importantes”. 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 deseado.
4º.- Pon el diseño al servicio de tus usuarios, y no al revés
No suele ser una 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.
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.
