Leyes y principios: Fitts’ Law

Fitt’s Law - Ley de Fitts

Últimamente he estado pensado en los fundamentos teóricos de esta profesión y me gustaría compartir con vosotros una serie de artículos “Especiales” relacionados con principios y leyes aplicadas en el entorno de la usabilidad, UX, UCD, IA, etc, etc… Hoy comenzaremos con uno fácil, la Ley de Fitts.

Enunciado

La ley de de Fitts dice: el tiempo en alcanzar un objetivo visual (target) es la relación entre distancia y el tamaño del objeto.

En otras palabras “si es está cerca y es más grande tardaré menos en alcanzar mi obejtivo”.

¿Cómo la aplico?

Esta ley matemática de 1954 tiene 3 aplicaciones básicas en el diseño de interfaces:

  1. Las acciones más frecuentes deberían tener un botón más prominente. Sin embargo se debe tener cuidado porque atenta contra la consistencia. La propuesta sería las acciones más frecuentes deben estar diferenciadas y jerarquizadas de tal manera que se reduzca el tiempo de alcance del objetivo
  2. Las acciones más frecuentes deberían estar más cerca de la posición más frecuente del cursor. Si el foco de atención se centra en un área por lo regular será la posición más frecunte del cursor.
  3. En la medida en que el cursor se acerca al objetivo la velocidad del desplazamiento se reduce, con lo cual los objetos pequeños son susceptibles de la posibilidad de error. Por lo tanto acciones frecuentes enlaces prominentes.

Ejemplos

El clásico ejemplo utilizado por Tog (Bruce Tognazzini) es el menú de Apple vs. el de Microsoft. El menú de apple es 5 veces más rápido de alcanzar que el de Microsoft. ¿Por qué?

  1. Es más ergonómico mover el cursor hacia arriba que hacia abajo, además Apple cubre las 4 esquinas de la pantalla con accesos mientras que Microsoft condensa la navegación abajo. Provadlo y veréis como la muñeca hace un movimiento raro cuando os acercáis a la esquina inferior izquierda. Además la posición habitual del ratón se centra en la parte superior de la pantalla, que es donde se focaliza el “Core” de las acciones. Menú, Navegación, accesos a la información, etc.
  2. Los botones para acceder a los programas en Apple son 3 veces más grandes, de hecho toda la iconografía utilizada en Apple es un poco grande, fijaros en el dock del OS X. De allí el éxito del de la interfaz del IPhone todo a la mano y muy ergonómico. Cuando se quiere plantear un diseño de innovador, este tipo de cosas se deben de mirar, no todo son colores e iconos bonitos. Sin embargo debo apuntar que en Windows Vista ha tomado más en cuenta este principio para el diseño de la intefaz

Fijaros en las áreas señaladas en estas capturas.

Leopard

Vista

Enlaces de interés:

Leyes y principios en Usandolo.com

Acerca de Jorge Márquez

User experince designer

6 thoughts on “Leyes y principios: Fitts’ Law

  1. Jorge, buen artículo, aunque convendría recordar que con el menú inicio de vista prácticamente no hay que usar el ratón.

    Es más, si usas el sistema de voz, no hay que utilizar ni el teclado.

  2. Jordi, es una muy buena alternativa como shortcut, sin embargo esta ley se aplica más que todo a desplazamientos con el puntero.

    Por cierto, tu que controlas Linux, tienes algún buen ejemplo de la ley de fitts en algún KDE?

  3. Buenas Jorge,

    Justamente esta comentando esta regla con Antonio el otro día.

    Muy didáctico el Post. Creo que a mucha gente le será útil saber, que detrás de lo que uno por experiencia aplica intuitivamente, hay una base teórica.

    Que en nuestro país falla.

    Como ya te comente, esa es la conclusión que extraíamos del CHI 2008.

  4. Gracias, David.
    Justamente este feedback que comentas es lo que me plantea crear esta serie de artículos “Especiales” relacionados con principios y leyes. Creo que apartir de reflexiones de fondo se puede innovar.

    Seguimos.

  5. Pingback: Usabilidad en microsites: caso iPhone y movistar > Usándolo.com

Responder a Jorge Márquez Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>