Los 10 mandamientos (principios heurísticos) de Jakob Nielsen
Corría el año 1990 donde yo recién estaba cursando de la escuela primaria mientras que nuestro querido Jakob Nielsen desarrollaba los 10 principios heurísticos, que sin duda se convirtieron en uno de sus aportes más significativos al mundo de diseño de productos digitales.
Como nacen los principios heurísticos
Sabemos que no existe usabilidad universal, ya que por definición la usabilidad es capacidad de un producto de permitir a usuarios específicos concretar tareas en un contexto de uso específico, no obstante Jakob Nielsen y Rolf Molich en el proceso de crear un modelo de evaluación heurística, desarrollaron 10 principios universales de diseño de interacción a partir de la observación de 249 problemas de usabilidad; y así nacieron las "heurísticas".
En palabras del mismo Jakob Nielsen:
Los 10 principios de diseño de interacción se llaman “heurísticas” debido a que son reglas generales y no pautas de usabilidad específicas.
Los 10 mandamientos del diseño de interacción
Si bien existen principios similares de otros autores como Donald Norman los creados por Jakob Nielsen son los que han cobrado más popularidad y relevancia en la comunidad de UX, así que veamos de que se tratan y como utilizarlos.
#1: Visibilidad del estado del sistema
El sistema debe mantener siempre informado al usuario sobre lo que está pasando mediante el feedback apropiado y en el tiempo razonable.
Se lo que esta pasando!
Ejemplo de buena práctica:
Cuando enviamos un mensaje por WhatsApp sabemos si el mismo salió de nuestro teléfono, llego al destinatario y hasta si fue visto por del receptor mediante los iconos y colores que aparecen en la pantalla de la app, una vez que aprendemos el significado de los mismos podemos comprender el estado del sistema con el que estamos interactuando.
#2: Relación entre el sistema y el mundo real
El sistema debe hablar el mismo lenguaje que los usuarios, con palabras, frases y conceptos que sean familiares para los usuarios en lugar de usar términos propios del sistema (jerga).
Se deben seguir las convenciones del mundo real haciendo que la información aparezca en un orden lógico y natural.
Se de lo que estás hablando!
Ejemplo de buena práctica:
Es muy común en los sitios web que nos encontremos con un enlace roto que nos lleve a lo que en el lenguaje de los servidores web es llamado error 404, como dije el lenguaje de los servidores web, en el ejemplo de la imagen siguiente podemos ver que airbnb.com hace un muy buen trabajo explicando al usuario que paso hablando con lenguaje simple sin incluir términos técnicos ni jerga de la industria.
#3: Control y libertad del usuario
Es común que los usuarios elijan funciones del sistema por error y por ello necesiten una "salida de emergencia" para volver al estado anterior.
Se debe soportar la posibilidad de hacer y deshacer.
Oops, dejame irme de acá!
Ejemplo de buena práctica:
Cuantas veces nos habrá pasado que eliminamos un correo por error mucho peor que presionamos el botón de enviar antes de tiempo, en estos casos la interfaz de usuario de Gmail nos da algunos segundos durante los cuales nos permite deshacer la acción que acabamos de realizar, si me habra salvado esta función, gracias Google!
#4: Consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Se deben seguir las convenciones del propio sistema.
Se ve familiar, tiene sentido para mi!
Ejemplo de buena práctica:
Si son usuarios de Instagram o de Facebook ademas de Linkedin, seguro les pasó que cuando LinkedIn decidió incluir la función de historias no necesitaron invertir tiempo en aprender ya que esta plataforma aprovechó el aprendizaje que los usuarios de otras redes sociales ya tenemos y creo un diseño muy similar, mi mama seguro diría ya se están copiando!!! A lo que yo le explicaria, no es copiar mamá es mejor la usabilidad usando patrones ya familiares para muchos usuarios.
#5: Prevención de errores
Es mejor crear un diseño que evite que los usuarios comentan errores antes que crear buenos mensajes de error.
Debemos eliminar las condiciones propensas a errores o bien presentar a los usuarios opciones de confirmación antes de que realicen determinadas acciones.
Que bueno que no hice eso!
Ejemplo de buena práctica:
Supongamos que estamos buscando un alojamiento en la ciudad de Nueva York, como es la forma correcta de escribirlo, new york o nueva york, en este ejemplo del sitio de airbnb podemos ver que no se da al usuario la posibilidad de escribir cualquier texto en el campo de búsqueda, sino que se le brindan opciones que concuerdan con las letras que escribió, de esta forma se le evita al usuario cometer errores de tipeo que los lleven a un resultado de búsqueda sin resultados.
#6: Reconocer en lugar de recordar
Debemos minimiza la carga de memoria del usuario haciendo visibles los objetos, las acciones y las opciones. El usuario no debería tener que recordar información de una parte del diálogo a otra. Las instrucciones de uso del sistema deben ser visibles o fácilmente recuperables.
Lo veo, lo entiendo!
Ejemplo de buena práctica:
Cuando queremos comprar un objeto es muy común dedicar muchas horas a buscar y re buscar en distintos lugares en el sitio web de mercadolibre.com podemos ver una buena practica cuando aplicamos filtros a un resultado de búsqueda, los filtros aplicado quedan a la vista de forma que no necesitamos recordar los filtros que habíamos aplicado.
#7: Flexibilidad y eficiencia de uso
El sistema debe contemplar tanto a usuarios inexpertos como experimentados. Debe dar opciones simples para los usuarios nuevos y permitir a los usuarios experimentados usar aceleradores y/o personalizar acciones frecuentes.
Dejame hacer más con menos!
Ejemplo de buena práctica:
Cuando hacemos una búsqueda de imágenes el Google.com la interfaz nos presenta en primer lugar las opciones mas básicas aunque también permite funciones de búsqueda avanzadas permitiendo a usuarios con necesidades mas especificas hacer una búsqueda incluyendo mas variables.
#8: Diseño estético y minimalista
Los diálogos no deben contener información irrelevante o raramente necesaria. Cada unidad adicional de información en un diálogo compite con las unidades de información relevantes y disminuye su visibilidad relativa.
Se ve bien, funciona fabuloso!
Ejemplo de buena práctica:
En el flujo de compra del sitio web apple.com podemos ver que la interfaz presenta únicamente los elementos relativos a la acción que desea realizar el usuario, comprar un iPhone 12.
#9: Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de sus errores
Los mensajes de error deben expresarse en lenguaje simple (sin códigos), e indicar con precisión el problema y sugerir una solución.
Se lo que salió mal y como solucionarlo!
Ejemplo de buena práctica:
En este caso facebook.com ofrece al usuario un mensaje de error mediante el cual le explica con claridad las características que debe tener la contraseña que el sistema espera recibir
#10: Ayuda y documentación
Aunque es mejor que el sistema se puede usar sin documentación, puede ser necesario proporcionar ayuda y documentación. Cualquier información de este tipo debería ser fácil de buscar, centrada en la tarea del usuario, enumerar los pasos concretos que se deben llevar a cabo y no ser demasiado extenso.
Okay, necesito ayuda!
Ejemplo de buena práctica:
Cuando estamos en el proceso de pago de un producto o servicio es común que al tener que ingresar el código de seguridad de la tarjeta de crédito algunos usuarios no sepan cuál es este código o donde pueden encontrarlo, una buena práctica es mostrar una imagen ejemplificando donde se encuentra este número.
Donde uso los principios heurísticos
Los principios heurísticos son nuestra principal herramienta cuando diseñamos interfaces o bien cuando juzgamos las interfaces creadas por otros ya que nos permiten establecer una línea de base de usabilidad basaba en buenas practicas y convenciones universales.
Como diseñadores de experiencias los principios heurísticos deben formar parte de nuestro adn.
Cuando queremos evaluar la interfaz de un producto digital usamos los principios para realizar la famosa evaluación heurística, una de las técnicas más antiguas, simple y de altísimo valor (de esta técnica les hablare en mi próximo artículo).
También usamos los principios heurísticos para realizar otros tipos de evaluaciones expertas como Pure, Design review/critique o caminatas cognitivas.
Las heurísticas también son imprescindibles antes de realizar pruebas con usuarios, ya que nos permiten detectar los problemas de usabilidad más evidentes en nuestros diseños antes de exponer nuestras interfaces ante usuarios reales.