Las 10 heurísticas de usabilidad según Jakob Nielsen. ¿Cuáles son las reglas generales que debemos tener en cuenta para crear una interfaz accesible y usable?
Hoy quiero que conversemos sobre las famosísimas heurísticas, pero, ¿qué son exactamente?
Las leyes, principios o heurísticas de usabilidad son una serie de principios descritos por Jakob Nielsen, quien es considerado el padre de la usabilidad. Resulta que, en la década de los 90’s, teóricos como Nielsen y Roff Molich comenzaron a indagar e investigar la relación entre las personas y los sistemas. Así fue como nació la evaluación heurística, como una metodología para analizar y mejorar la interacción entre los seres humanos y el software.
Con más de dos décadas desde su creación, las heurísticas permanecen vigentes como el primer día y continúan siendo un manifiesto sagrado para los diseñadores de experiencia de usuario no sólo para analizar, sino para crear productos digitales que sean user-centric.
1. Visibilidad del estado del sistema
La primera heurística nos indica que el diseño siempre debe mantener informados a los usuarios de lo que está ocurriendo, mediante una respuesta que le brinde información y en un tiempo razonable. Esta práctica proporciona a los usuarios control para tomar decisiones, alcanzar su objetivo y confiar en la marca.
Por ejemplo:
- Rappi aplica este principio cuando nos muestra en qué fase exacta se encuentra nuestro pedido, también cuando una plataforma nos muestra indicadores de progreso al crear una cuenta (el famoso “completaste el 70% de tu perfil”) o cuando un sitio nos confirma que ha procesado una acción que hicimos.
¿Cuán necesaria es esta heurística? Mucho. Para entender lo frustrante y ambiguo que sería el mundo si los sistemas que nos rodean no aplicaran este principio, pongamos este ejemplo: Imaginemos que el homebanking no nos indicara “transferencia realizada” cuando hacemos una transferencia y simplemente nos devolviera a la pantalla de inicio. Así, sin más, sin mensajes de confirmación ni tildes verdes. ¿Cómo nos sentiríamos? Desorientados y preocupados, seguro. ¿Se hizo la transferencia o no? ¿Cómo hago para saber si le llegará a la otra persona? ¿Se me descontó el dinero? ¿Tengo que hacerlo de nuevo?
2. Compatibilidad entre el sistema y el mundo real
En la segunda heurística, Nielsen nos dice que los sistemas deben hablar el idioma de los usuarios con palabras y conceptos familiares a ellos. Es un hecho que las personas construimos modelos mentales de las cosas y teorías de cómo funcionan basándonos en experiencias pasadas con objetos reales. Constantemente, nuestro cerebro está reciclando información ya adquirida para aplicarla en el presente, resolver situaciones nuevas y entender elementos de la realidad que se nos presentan por primera vez.
Volviendo al mundo de las interfaces, veamos estos dos ejemplos:
- El “basurero” de Mac (y la “papelera” de Windows) tienen la misma forma que una papelera en la vida real -más comúnmente llamada “tacho de basura”, por estos lados-.
- El ícono de “adjuntar archivo” que encontramos cuando queremos anexar un archivo, refiere al objeto “clip” o “gancho” que cumple la misma función en el mundo tangible, el de agrupar o adjuntar hojas. Este símbolo funciona a escala global, por cierto, pero la iconografía universal es tema para otro artículo.
3. Control y libertad del usuario
Para garantizar que los usuarios tengan libertad y control al usar un producto, deben poder abandonar fácilmente una tarea, retroceder un paso y deshacer un cambio que hayan realizado. Estas salidas evitan que los usuarios se sientan atascados y frustrados al intentar completar una tarea.
Entonces, la tercera heurística nos dice que debemos incluir:
- Un vínculo que nos lleve “atrás”, para volver a una página o pantalla anterior.
- Un enlace que nos dé la posibilidad de “cancelar”, para abandonar una tarea.
- Un enlace que nos permita “cerrar” la ventana actual, para cerrar una ventana emergente.
- Una opción de “deshacer” y “rehacer”, para retroceder un cambio que hicimos en la interfaz.3.
De nuevo, podemos establecer una analogía entre estas salidas en la UI y las salidas que existen en la vida real. Si entramos a un lugar y nos arrepentimos, podemos dar media vuelta y volver atrás. Si estamos intentando llamar a un ascensor y nos arrepentimos, podemos cancelar la tarea, y la lista sigue…
4. Cumplimiento de consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Esta heurística nos enseña que es recomendable seguir las convenciones ya establecidas en la industria y las mismas convenciones internas de la marca, convenciones que sostiene en sus diferentes productos (o debería hacerlo).
- Un claro ejemplo de consistencia en la industria es el diseño y la ubicación del carrito de compras en los e-commerce. Siempre encontramos el carrito de compra arriba a la derecha y siempre tiene un diseño similar, sea cual sea el rubro de la tienda online que estamos visitando. No hay definición más clara de lo que es cumplir un estándar.
- Nos falta ejemplificar un caso de consistencia interna, así que vamos a lo seguro: Google. Google tiene la misma barra de herramientas en toda su línea de productos. No importa si estamos trabajando en una presentación, una hoja de cálculo o un documento de Google, la barra superior que dice, en este orden, “archivo, editar, ver, insertar, formato…” y que utiliza los mismos íconos en el mismo orden; es igual.
Así, si sabemos usar uno, sabemos usar todos. Y si tenemos un poco de experiencia navegando por la web, entonces podremos reconocer fácilmente elementos y significados que se repiten. Así, además, nos ahorramos bastante esfuerzo cognitivo.
5. Prevención de errores
Mejor que un buen diseño de mensajes de error, es un buen diseño del viaje del usuario. Si es bueno, entonces es cuidadoso, y se enfoca en prevenir y evitar que los errores ocurran en primer lugar.
Cuando mapeamos el recorrido que transitará el usuario al recorrer la interfaz intentando completar una tarea, imaginamos que recorre un camino desde un punto A hacia un punto B. Como cualquier camino, tiene obstáculos y problemas.
Podemos distinguir dos tipos de errores:
- Los deslices, que son causados por distracción del usuario que, como cualquier persona, no es perfecto
- Y los errores como tal, que son causados por un desajuste entre el modelo mental del usuario y el diseño. Recordá que hablamos de mapas mentales y representaciones de la realidad en la segunda heurística.
Pongamos un ejemplo: cuando estamos creando una contraseña por primera vez (o recuperándola) y ésta no cumple con los estándares de seguridad que nos pide el sistema, la plataforma nos avisa qué requisito no estamos cumpliendo antes de “confirmar” y que recién ahí nos dé error.
6. Reconocer en vez de recordar
Esta heurística nos explica que el usuario no debería tener que recordar información de una parte de la interfaz. No tiene por qué hacer tal esfuerzo mental (sí, de nuevo estamos hablando de actividades cognitivas). Cuando el diseño le brinda más información al usuario para que pueda “reconocer” algo en vez de evocar a que lo “recuerde”, le está ahorrando carga de memoria.
Este ejemplo me encanta. La empresa Brubank, un banco argentino 100% digital, aplicó este principio hace poquito. Antes, la app no tenía descripción alguna de sus botones, sólo estaban presentes los íconos. Se volvía muy complicado recordar qué significaba cada uno, terminabas clickeando uno que no era y yendo a un lugar que no querías… bastante engorroso, la verdad. Por suerte, el equipo de UX incluyó este simple y funcional UI copy. Tan simple como escribir a qué refiere cada ícono. Un pequeño cambio hace toda la diferencia, demostrándonos que el contenido es el rey.
7. Flexibilidad y eficiencia
Diseñamos pensando en que nuestros usuarios son novatos y no tienen experiencia con el producto. Eso está bien. Pero, ¿qué pasa con aquellos que sí?
Este principio nos indica que también debemos satisfacer a aquellos usuarios más experimentados, para que puedan navegar de forma cómoda y ágil por nuestra interfaz.
Empecemos entendiendo que los usuarios con y sin experiencia no tienen las mismas necesidades. Los aceleradores (como el teclado en nuestro celular que nos permite escribir uniendo las letras sin levantar el dedo) y los atajos (como el famosísimo ctrl+c y ctrl+v) pueden hacer una interacción más rápida y fluida.
8. Diseño estético y minimalista
Las interfaces no deben contener información que sea irrelevante o que rara vez se necesite, ya que los elementos innecesarios pueden distraer a los usuarios de su objetivo y dificultar el acceso a la información que realmente necesita.
Por ejemplo: En la red social X/Twitter (en todas sus versiones), cada tuit tiene 4 acciones disponibles: comentar, retuitear, dar like y compartir. Recién cuando seleccionamos “compartir” se nos despliegan todas las demás opciones que corresponden al botón de compartir: enviar por mensaje directo. ¿Te imaginas lo incómodo que sería tener todas las opciones juntas?
9. Ayuda a los usuarios a reponerse de sus errores
Los mensajes de error deben expresarse en un lenguaje sencillo y humano. El clásico “error 404” que no explica ni ayuda en nada, no va más. Debemos diseñar estos mensajes de forma que indiquen qué fue lo que causó el problema, cuál es la consecuencia o qué es lo que le impide hacer al usuario, cómo salir de ahí y cómo corregirlo.
No es lo mismo decir “compra no aprobada” a decir:
- “Compra rechazada por VISA.
- La tarjeta de débito aún no está habilitada.
- Te sugerimos que te comuniques con VISA de 08:00 a 20:00 h para solucionarlo.
- Salir/Llamar”.
Decimos qué pasa, por qué, cómo solucionarlo y cómo salir. Sí, usualmente los mensajes de error no son tan extensos, pero siempre tenemos que considerar la cantidad de información que necesita el usuario según la etapa del user journey en la que se encuentre y la tarea que está intentando completar. En el caso de un pago fallido, necesita saber todos los detalles posibles para recuperarse.
10. Ayuda y documentación
Incluso en el mejor de los casos donde el sistema pueda ser usado sin tutoriales, puede ser necesario ofrecer ayuda y documentación. La última heurística nos indica que la información debería ser fácil de encontrar, estar pensada para el usuario y tener una lista concreta de pasos.
Tenemos dos formas de ofrecer ayuda:
- De forma proactiva: cuando intentamos familiarizar a los usuarios con la interfaz (como cuando pasamos el cursor del mouse por un elemento e instantáneamente se despliega una explicación que desaparece al mover el cursor)
- De forma reactiva: cuando buscamos responder a un problema determinado. Las preguntas frecuentes y los tutoriales son muy buenos ejemplos de ayuda reactiva. Aquí no debemos incluir información obvia, sino instrucciones detalladas que ayuden al usuario a encontrar la información que necesita para completar la tarea que intenta terminar.
Espero que las explicaciones y los ejemplos hayan sido de utilidad para entender las 10 heurísticas del UX según Jacob Nielsen. Ahora están listos para diseñar experiencias intuitivas y agradables.
Si les encantó este tema como a mí, no dejen de leer la web de NN Group. Los fundadores son los mismísimos Donald Norman (autor de La Psicología de los Objetos Cotidianos) y Jakob Nielsen.
¡Que lo disfruten! Nos vemos en el próximo artículo
