16 de Noviembre

Principios del diseño de interacción importantes para la accesibilidad

LLevo unos meses pensando en qué principios del diseño de interacción son más útiles a la hora de crear webs o cualquier tipo de aplicación accesible.

Cuando se va a crear un sitio web accesible siempre se habla de seguir las WCAG y tener en cuenta la usabilidad, dando los típicos consejos de bolsillo (llenos de razón, ojo) de “No me hagas pensar” de Steve Krug o de los libros de Nielsen. Pero no se habla de reglas mas de fondo sacadas de la teoría clásica del diseño de interacción y que están ahí desde hace mucho tiempo.

Estas son las fuentes de las que beben Nielsen y compañía, y hay que ir a ellas para aprender diseño de interacción de verdad. Si sólo leemos a Nielsen, cuando nos dice que los enlaces tienen que estar subrayados, aceptamos la idea pero no sabemos decir claramente porqué es así con lo que no podemos aplicarla en otros casos, ni ponerla en duda en ciertos contextos. Sabiendo que es por respetar el affordance del elemento y por aprovechar convenciones de uso ya aprendidas por los usuarios reduciendo así su gasto cognitivo al usar nuestra web, podremos aplicar estas ideas en cualquier situación. Hay muchos principios del diseño de interacción que son muy interesantes a la hora de crear desarrollos accesibles. En esta entrada voy a explicar algunos muy importantes:

• Ley de Fitts
• Ley de Hick
• Ley de Miller
• Ley de Tesler de la conservación de la complejidad
• Principio de Poka Yoke
• Principios del buen diseño de Donald Norman

Ley de Fitts

Según esta ley, el tiempo necesario para moverse desde un punto a otro está determinado por la distancia entre el punto inicial y el objetivo, y por el tamaño de este. Cuanto mas grande sea el objetivo mas rápida será la acción, y de la misma forma, cuando mas cerca esté el objetivo, más rápida será la acción también.

Esta ley tiene tres implicaciones fundamentales a nivel de diseño de interfaz:

• Los elementos interactivos (botones, enlaces, etc) deben ser lo mas grandes que sea posible para facilitar la interacción: a mas tamaño mejor interacción. Siempre dentro de lo razonable, pero hay que tratar de evitar enlaces muy pequeños o los típicos iconos diminutos.
• Los bordes y esquinas de la pantalla son los mejores lugares para situar los menús y botones porque por mucho que muevas el ratón es imposible ir mas allá de la pantalla, así que interactuar con elementos en esas posiciones es mas cómodo.
• Los menús contextuales (los típicos menús que aparecen al hacer clic con el botón derecho del ratón) son más cómodos de usar (al margen de otras implicaciones) que los menús en la parte superior de la pantalla, porque la distancia entre el punto inicial y el final es mas corta.

Respecto a la accesibilidad, las implicaciones son las mismas pero todavía mas intensas, especialmente en el caso de personas con problemas para usar el ratón u otros dispositivos apuntadores. Crear un menú con botones de tamaños grandes facilita que sean vistos y se llegue a ellos con el ratón. Si además el menú está en una zona periférica de la pantalla, aunque el usuario mueva demasiado el ratón, como este nunca puede superar los límites de la pantalla, permanecerá sobre el menú, lo que facilita la interacción.

Crear elementos de tamaños grandes también beneficia a las personas con problemas de visión.

Ley de Hick

Esta ley dice que el tiempo que le supone a una persona tomar una decisión depende del número de posibles opciones que tenga y de la complejidad de estas. También influye la familiaridad que se tenga con la decisión (si ya hemos tomado una decisión similar en el pasado) y el formato de esta (listado de palabras, videos, sonidos, etc).

Esta ley requiere una interpretación cuidadosa, porque hay que contextualizarla mucho en función del caso ante el que estemos. En esta cita de la Wikipedia se dice:

“Hick’s law is similar in form to Fitts’ law. Intuitively, one can reason that Hick’s law has a logarithmic form because people subdivide the total collection of choices into categories, eliminating about half of the remaining choices at each step, rather than considering each and every choice one-by-one, requiring linear time.”

Siguiendo la idea anterior muchas veces se ha interpretado la Ley de Hick diciendo que es mejor un menú con diez opciones que uno en el que los diez elementos estén organizados en dos submenús de 5 opciones. Pero en otra cita de la Wikipedia se dice lo siguiente:

“Hick’s law is sometimes cited to justify menu design decisions (…). However, applying the model to menus must be done with care. For example, to find a given word (e.g. the name of a command) in a randomly ordered word list (e.g. a menu), scanning of each word in the list is required, consuming linear time, so Hick’s law does not apply. However, if the list is alphabetical and the user knows the name of the command, he or she may be able to use a subdividing strategy that works in logarithmic time.”

Así que hay que interpretar todo con cautela y contextualizar el problema que tengamos. En cada situación necesitaremos un tipo de solución particular, pero lo importante es recordar que para tomar esta decisión tenemos como referencia el enunciado de la ley, que aún siendo interpretable y contextualizable, es una base sólida a partir de la cual poder tomar una decisión.

A nivel de accesibilidad es importante de cara a reducir la complejidad de la toma de decisiones de navegación. Si esto es importante para los usuarios que no presentan problemas, para los que tienen problemas cognitivos (de concentración, distración, etc) es crítico. Hay que tratar de simplificar al máximo la toma de decisiones creando arquitecturas de información sólidas y bien pensadas, estudiando bien los modelos conceptuales de los usuarios y adaptándonos a ellos, y rotulando bien los elementos.

Ley de Miller

Relacionada con la anterior, esta ley dice que los seres humanos somos capaces de recordar correctamente información en grupos de siete elementos, mas o menos dos. Más allá de ahí, empezamos a cometer errores y a olvidar información.

Muchos diseñadores lo han interpretado de forma incorrecta, no creando nunca menús de navegación o bloques de información de mas de siete elementos. Esto no es correcto, porque la ley de Miller se refiere a recordar información usando la memoria a corto plazo y las opciones de los menús no hay que recordarlas.

Pero sí aplica a la hora de tener que recordar elementos, algo que se debería tratar de evitar. No es bueno tener que recordar elementos al usar una web o cualquier otra aplicación. En caso de que sea obligatorio que el usuario tenga que recordar cosas, sí que hay que tener muy en cuenta la ley de Miller.

De cara a la accesibilidad la idea es la misma pero teniéndola todavía mas en cuenta. Como se ha comentado en el punto anterior, hay que reducir especialmente el gasto cognitivo de los usuarios con problemas de concentración o similares, por lo que tener en cuenta esta ley es importante.

Ley de Tesler de la conservación de la complejidad

Según esta ley, un cierto grado de complejidad es inherente a cualquier proceso. Al reducir la complejidad de un proceso siempre se llega a un punto en el que no se puede reducir más, sólo se puede mover de un lado a otro.

Por ejemplo, para enviar un email se necesitan dos elementos: tu dirección de email y la del destinatario. Si falta uno de los dos, el proceso no se puede llevar a cabo. Los programas de gestión de correo normalmente te ayudan a no tener que introducir manualmente estos dos elementos una y otra vez. Tu dirección de email la escriben automáticamente en el mensaje, y para escribir la dirección del destinatario te proporcionan la libreta de direcciones y, mientras escribes la dirección, sugerencias de direcciones de emails escritas anteriormente, para así no tener que escribir la dirección entera. Pero aún así, los dos elementos mínimos están ahí, sólo que el sistema te ayuda a lidiar con ellos más fácilmente.

Resumiendo, hay dos ideas importantes:

• Hay elementos o procesos con una complejidad que no se puede reducir más. Cuando nos enfrentemos con un problema hay que tratar de desglosarlo en sus partes fundamentales para detectar su complejidad mínima
• Una vez detectada la complejidad mínima, tenemos que pensar muy bien dónde colocarla: sería absurdo tener que escribir nuestra dirección de email en todos y cada uno de los emails que enviamos. Es mucho mas inteligente cargar esta complejidad sobre el programa y que se encargue él de esta tarea. Siempre que sea posible hay que hacer que la complejidad mínima caiga sobre el software, no sobre el usuario.

La importancia a nivel de accesibilidad es la misma que para el resto de usuarios pero, como casi siempre, mas intensa: hay que reducir la complejidad de las tareas y distribuir inteligentemente esta complejidad por la aplicación para reducir el gasto cognitivo al usar la aplicación. Para un usuario con problemas de concentración, retraso mental o similares, es fundamental que la aplicación se haga cargo lo máximo posible de la gestión de la complejidad mínima.

Poka-Yoke

Este principio fue creado en 1961 por Shigeo Shingo, un ingeniero industrial japonés que trabajó para Toyota. Se suele traducir por “a prueba de errores“.

La idea es introducir limitaciones en un sistema o proceso para prevenir y evitar los errores, obligando a los usuarios a realizar las tareas de una determinada forma. Un buen ejemplo es el cable de conexión al PC de un USB, que sólo tiene una ranura en la que puede entrar. Si lo intentamos meter en cualquier otra, no podremos. Así se garantiza que no nos equivoquemos.

Las aplicaciones de este principio en diseño industrial y de servicios son infinitas, pero en diseño de interfaz también hay que tenerlo muy en cuenta. Debemos tratar de minimizar o eliminar la posibilidad de que los usuarios comentan errores al introducir datos en formularios, darse de alta o realizar procesos, hacer transferencias, en sistemas de drag&drop, etc.

En cuanto a la accesibilidad, también es un principio a tener en cuenta para guiar por los procesos a las personas con problemas cognitivos de forma que el diseño les de pistas claras de qué acciones tienen que realizar y cómo realizarlas, y les evite cometer errores.

Los cuatro principios del buen diseño de Donald Norman

En su libro “Psicología de los objetos cotidianos” norman analiza los errores de diseño mas comunes, las causas cognitivas que están tras ellos y propone unos principios de diseño que son una referencia para cualquiera que se dedique al diseño de interacción.

El libro trata bastantes conceptos y principios, pero creo que se pueden resumir en cuatro:

Visibilidad

Los elementos con los que interactuar y las claves importantes del objeto deben poder ser percibidos por el usuario. Puede parecer una obviedad, pero es un principio que muchas veces se pasa por alto. Este problema se puede plantear en muchos casos: una puerta que no muestra claramente de dónde hay que empujar o tirar, un icono diminuto cuya función tenemos que descubrir poniendo el ratón sobre él para ver su tooltip, un combo que sólo muestra una opción, etc.

Buena topografía (affordance)

La topografía es la relación entre dos cosas, por ejemplo entre el movimiento de un volante y el giro de un coche. Si mueves el volante a la derecha, el coche gira a la derecha. Es un ejemplo de buena topografía. Este es un punto clave en el diseño de interfaces de usuario y también hay cientos de ejemplos de su mala aplicación: enlaces que no parecen enlaces, botones que no parecen botones, puertas que hay que empujar con pomos para agarrar, fogones dispuestos en dos filas de dos cuyos mandos están dispuestos en una fila de cuatro, etc.

Retroalimentación (feedback y feedforward)

El feedback es una indicación del estado del sistema o de que se ha realizado una acción y qué resultado se ha logrado. Toda acción que lleve a cabo el usuario debe proporcionar feedback y debe hacerlo enseguida. Por ejemplo, si un usuario hace una transferencia bancaria y no le damos feedback rápido puede ejecutar varias veces la operación pensando que no ha ocurrido nada.

Relacionado con el feedback está el feedforward, que consiste en informar al usuario del objetivo y efectos de la acción antes de que la lleve a cabo.

Buen modelo conceptual

Las personas, cuando usamos un objeto u operamos con una interfaz de usuario, nos formamos un modelo conceptual de su funcionamiento. Para que un usuario se forme un buen modelo conceptual de nuestro producto, las partes importantes de este deben ser visibles, los elementos de interacción deben ser topográficamente correctos, y el sistema en general y cada acción nos deben dar un feedback apropiado.

Otra herramienta importante para crear buenos modelos conceptuales es el uso de las prestaciones y las limitaciones. Hay que mostrar claramente al usuario qué se puede y qué no se puede hacer. Un buen ejemplo son unas tijeras, con dos agujeros para meter los dedos, uno mas grande que el otro. Prácticamente la mano va sola a los huecos apropiados de la tijera porque es la única manera de usarla.

A nivel de accesibilidad es fundamental seguir estas normas de diseño para crear objetos y aplicaciones fáciles de entender y usar, y además hay que saber adaptarlas a los usuarios con necesidades especiales. Por ejemplo, en un baño de autobús si el cartelito está en verde indica que el baño está libre y si está en rojo indica que está ocupado. Los principios de visibilidad y feedback son correctos: la señal se ve y da buena información. Pero ¿qué pasa con los usuarios daltónicos? ¿y con los ciegos? Podrían no distinguir los colores o directamente no verlos, así que habría que usar alguna otra pista visual o tactil que diera esa información. Normalmente este tipo de problemas se solucionan dando la información por varias vías sensoriales: vista y tacto, vista y oido, etc.

Conclusión

Esta lista es una primera aproximación que iré ampliando y matizando. No está completa y, mas adelante, me gustaría aplicar todos sus puntos en un ejemplo completo que los explique de forma mas práctica. Por supuesto, ¡cualquier ayuda es bien recibida!

Referencias

• La Psicología de los objetos cotidianos de Donald Norman
• Principios de Norman: Visibilidad, affordance, feedback y feedforward
• Designing for Interaction de Dan Saffer
• Ley de Fitts y Fitt’s Law demonstration
• Ley de Hick
• Ley de Miller
• Ley de Tesler de la conservación de la complejidad
• Poka-Yoke

Comentarios #9

Escribe un comentario

(*) Campos obligatorios

Nombre *

Web

E-mail

Comentario *

Categorías

• accesibilidad (16)
• arte (2)
• diseño (5)
• Diseño de información (8)
• Diseño de interacción (15)
• experiencia de usuario (16)
• front-end (8)
• general (11)
• producto (4)
• Redes sociales (4)
• SEO (4)
• WAI-ARIA (6)
• Web móvil (6)
• Web semántica (4)

Archivo

• Abril 2009 (2)
• Marzo 2009 (1)
• Febrero 2009 (2)
• Enero 2009 (1)
• Diciembre 2008 (3)
• Noviembre 2008 (4)
• Octubre 2008 (4)
• Septiembre 2008 (2)
• Agosto 2008 (1)
• Julio 2008 (1)
• Junio 2008 (3)
• Mayo 2008 (10)
• Abril 2008 (16)

Me gusta...

• Adaptive path
• Grancomo
• Índica
• Information aesthetics
• Juicystudio
• Lady on the Bus
• MakeMeMinimal
• Nitroglicerine
• Outsider
• Putting people first
• Signal vs. Noise
• Small surfaces
• Tentándote
• The Paciello Group Blog
• Visual complexity
• WebAIM