Visibilidad y Retroalimentación en el Diseño Web

Recientemente Vox, junto con 99% de Invisible, produjeron un cortometraje brillante sobre una puerta en el décimo piso de la oficina de Vox Media. Junto a muchas otras puertas, mostraba a Don Norman: icono del diseño y autor celebrado de The Design of Everyday Things. El propósito de la película fue destacar la usabilidad de los productos y sistemas, reduciéndolo a dos principios fundamentales del diseño centrado en los humanos: la visibilidad y la retroalimentación.

Visibilidad

"¿Qué hago?" Cuando encuentras un objeto, un producto, o un sistema de cualquier tipo, deberías entender cómo interactuar con él. La falta de ser susceptible de descubrimiento da como resultado el que no tengas ni idea de como usar algo.

Retroalimentación

"¿Qué acaba de suceder?"  Una vez hayas realizado una acción con tu objeto o sistema, algunos elementos de retroalimentación deberían informarte sobre lo que ha ocurrido y porqué. Sin retroalimentación, estás solo en la oscuridad.

Echemos un vistazo a algunos ejemplos de interfaces y productos en internet que demuestran un buen empleo de estas ideas.

Empezaremos por la capacidad de ser descubierto; cualquier sitio web, ya sea un ecommerce, un portafolio, marketing, un producto o servicio, o cualquier otra cosa, necesitará que los usuarios entiendan lo que se espera de ellos. La página de inicio de CodePen usa una frase pegadiza, seguida por una propuesta de valor, antes de dirigir nuestra mirada hacia abajo para ofrecernos a los nuevos visitantes dos claros caminos para seguir.

Existe un gran debate en la web sobre la efectividad de los botones "fantasma" (los cuales no tienen relleno, tan solo borde), ya que no tienen necesariamente el aspecto de botones. Esto podría obstaculizar la visibilidad, pero te voy a dejar que saques tus propias conclusiones.

Duolingo, la plataforma para el aprendizaje de idiomas favorita de todo el mundo (¿no?) consigue que su página sea aún más clara para sus usuarios. Existe un botón en el centro de la pantalla, muy obvio y muy susceptible de ser pulsado. Y si lo pulsas sé exactamente en lo que me estoy metiendo.

Los dos primeros ejemplos son dos bien ejecutadas "Llamadas a la Acción" (CTAs, Call To Action). Como propietarios de un producto, queremos que los usuarios se sientan compelidos a realizar una acción, pero crear un botón grande, rojo y brillante no es suficiente. Además de ser visualmente evidente, un CTA necesita ayudar a los usuarios a entender cual es el objetivo de la acción que están realizando.

La reciente promoción para San Valentín de Spotify, en la que podías enviar una nota amorosa en forma de lista de reproducción, fue (como de costumbre) estéticamente brillante. Pero la ruta hacia la acción ha realizar debería haber sido más clara.  Esta claro lo que queremos como resultado, pero las instrucciones (representadas por CTAs) realmente no hacen nada. En su lugar se espera de nosotros que nos deslicemos hacia abajo, lo que a algunos les podría parecer que están siendo alejados de la acción que querían realizar.

En contraste, aquí tenemos un ejemplo de una acción con mucha visibilidad: un humilde botón de reproducción.

Con amplio espacio en blanco, este icono de botón circular incita a los usuarios a realizar la acción.  El botón de reproducción es universalmente reconocible, y y su propia forma sugiere una dirección; un siguiente paso.  Pulsalo y el vídeo se reproducirá.

BuddyApp, un tema para la plataforma de comunidades en WordPress BuddyPress, nos da dos opciones posibles aquí, pero nos muestra claramente cual es la ruta de acceso preferida.

Accesibilidad

Toda lo que hemos hablado sobre la visibilidad hasta ahora asume algo muy importante: el hecho de que no tenemos ningún problema de accesibilidad. Si una interfaz dificulta el descubrimiento de lo que se espera de nosotros bajo condiciones perfectas, ¿imagina como puede afectar a aquellos que tienen una discapacidad visual, física, o cognitiva?

No te puedo recomendar con mayor efusión que le eches un vistazo al curso Guía para Principiantes sobre Accesibilidad Web de John Hartley. Con una duración de 2.5 horas es una seria guía que explica de forma muy comprensible lo que la accesibilidad significa para la web y sobre cómo puedes integrarla en tu flujo de trabajo.

Hoy en día Github permite a los usuarios subir archivos a repositorios directamente desde la interfaz web. En términos de visibilidad de la acción es bastante clara. Existe una segunda camino para realizar la acción, claramente representada, en caso de que la necesitemos.

Una vez arrastro mi archivo a la ventana, obtengo un cambio de estado que me confirma que mi acción ha sido reconocida: líneas de guiones y nuevas instrucciones.

Finalmente, una vez he soltado mi archivo, recibo más feedback en forma de un informe de progreso para hacerme saber que el archivo está en camino, preparado para su asignación.

La línea de guiones se ha convertido en un patrón convencional (disculpa el juego de palabras) para representar feedback, comunicando a los usuarios que pueden soltar lo que estén arrastrando. Invision es otro ejemplo, la visibilidad de este tipo de acción no es tan obvia, confían en cierto dominio por parte de los usuarios.

Y Basecamp hace algo similar, aunque no usa la línea de guiones. En cualquier caso en un buen feedback.

Animación

El movimiento es la mejor forma de ofrecer retroalimentación; estamos acostumbrados a ver acciones y reacciones en el mundo real, así que ¿por qué no también en la web? Desde hace mucho tiempo los diseñadores han estado usando una sutil transición en los estados hover (por ejemplo) ya que ayudan al usuario a comprender la conexión entre antes y después. Hoy por hoy, con la animación y los archivos SVG, podemos ir aún más lejos. ¿Has pulsado algún like en Twitter últimamente?

Esa mini explosión nos permite saber, sin lugar a dudas, que nuestra acción tiene un resultado concreto.

En este ejemplo el ecommerce de Mode para WordPress demuestra el típico comportamiento de Woocommerce. Cuando añades un producto al carrito, una miniatura realiza la transición desde la imagen original del producto hasta el carrito en la parte superior derecha de la pantalla. Esto transmite una información visual excelente, permitiéndome saber que he colocado algo en el carrito, y sugiriéndome a donde puedo dirigirme después para completar el proceso.

FcStore; otro tema de WooCommerce, opta por un enfoque menos literal, en su lugar me ofrecerme una sencilla marca de verificación para indicar que he añadido con éxito mi producto al carro.

Los formularios son el clásico ejemplo de situaciones en las que los usuarios necesitan claramente de retroalimentación. ¿Se ha enviado el formulario correctamente? ¿Me he equivocado en algo? Aquí, Make This Year usa algunos textos personales y un emoji para expresar el éxito de la acción conseguiendo un estupendo efecto. Sin lugar a dudas me suscribí a su boletín. 

Ha Sido Emocionante

Si te centras en la visibilidad y la retroalimentación, te asegurarás de que los usuarios conectan con tu web. Sacar partido de sus hábitos de conducta, ayúdales a entender y predecir lo que está por suceder, y por último haz que se sientan bien con tu producto. Y para terminar, dos referencias para tu inspiración, deberías leer el libro Diseñar para la Emoción de Aaron Walter, y la charla de TED 3 formas en las que el buen diseño te hace feliz.