Un cóctel muy heurístico
‘Lo principal es descubrir las razones por las que un usuario llega hasta nuestra web y hacerlas extremadamente rápidas y fáciles de encontrar’
Llevo tiempo intentando escribir esta storie y por fin he sacado un rato para poder darle forma. Muchas veces centramos nuestra forma de diseñar en conseguir algo llamativo y que entre por los ojos, pero dejamos muy de lado al usuario y a la facilidad que este tiene de acceder a nuestra propuesta. En un ejercicio muy interesante, te presento un análisis de las heurísticas de Nielsen y cómo se llevan, tanto para bien como para mal, en distintas empresas. Espero que no me denuncien y que todo se quede en una mejoría. ¡Acompáñame!
Antes de empezar, déjame hacer un pequeño resumen de las 10 Heurísticas de Jakob Nielsen, donde deja claros sus principios básicos de usabilidad y que todo producto digital debería tener para considerarse adaptable y comprensible para un gran número de usuarios.
- Visibilidad del sistema.
Mantener siempre informado al usuario del progreso de sus acciones y lo que está pasando en el sistema. Genera transparencia y credibilidad.
2. Coincidencia entre sistema y mundo real
Hablar el idioma del usuario, con palabras, frases y conceptos familiares para este, siguiendo las convenciones del mundo real, haciendo que la información aparezca en un orden lógico y natural.
3. Control y libertad del usuario
Los usuarios suelen realizar acciones por error. Necesitan una ‘salida de emergencia’ claramente marcada para abandonar la acción no deseada sin tener que pasar por un proceso largo.
4. Consistencia y estándares
Apegarse a las convenciones de la interfaz de usuario y seguir los estándares existentes, para que los usuarios sepan qué esperar y cómo operar la interfaz.
5. Prevención de errores
Un buen producto debería informar a sus usuarios sobre un error, pero los mejores productos son aquellos que previenen que ocurra. Una buena UX anticipa un error y ayuda al usuario con la prevención de errores.
6. Mostrar en vez de hacer recordar
Minimiza la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones. El usuario no debería tener que recordar información de una parte de la interfaz a otra.
Las interfaces que promueven el reconocimiento reducen la cantidad de esfuerzo cognitivo requerido por los usuarios.
7. Flexibilidad y eficiencia de uso
Todo sistema tiene dos tipos de usuarios: principiantes y usuarios avanzados. Tu sistema debe crearse para habilitar y facilitar las tareas de ambos.
8. Diseño estético y minimalista
Las interfaces no deben contener información que sea irrelevante o que rara vez se necesite. Cada unidad adicional de información en una interfaz compite con las unidades de información relevantes y disminuye su viabilidad.
No se refiere que el diseño deba ser flat design, sino de asegurarse de mantener el contenido y el diseño visual enfocado en lo esencial.
9. Ayudar a reconocer, diagnosticar y recuperarse de errores
Los mensajes de error deben expresarse en lenguaje sencillo (sin códigos de error), indicar con precisión el problema y sugerir una solución de manera constructiva.
Estos mensajes de error también pueden presentarse con elementos visuales que ayudarán a los usuarios a notarlos y reconocerlos.
10. Ayuda y documentación
Es mejor si el sistema no necesita ninguna explicación adicional. Sin embargo, puede ser necesario proporcionar documentación para ayudar a los usuarios a comprender cómo completar sus tareas.
El contenido de la ayuda y la documentación debe ser fácil de buscar y centrado en la tarea del usuario. Debe ser conciso y enumerar los pasos concretos que deben llevarse a cabo.
Ahora sí que sí, disculpa el tostón y vamos a lo interesante. ¿Preparad@? 3, 2, 1… Go!
1. Visibilidad del estado
Buena práctica
Domestika: Nos indica en todo momento que disciplina vamos a seleccionar para añadir a nuestros intereses.
Mala práctica
Cex: Pese a contar con una barra de navegación, en ningún momento se indica al usuario dónde se encuentra. Se camufla de tal manera que parece formar parte del hero.
2. Coincidencia entre sistema y mundo real
Buena práctica
Amazon: La app/web nos muestra la cesta de la compra con un carrito. Además, nos indica la cantidad de elementos que contiene.
Mala práctica
Agencia Tributaria: Sí, tenía que hacerlo, lo siento por ser clásico. Es un caos, si es la primera, o la vigésima, vez que haces la declaración de la renta te pierdes entre tecnicismos. Es un descontrol total de cómo presentar la información.
3. Control y libertad del usuario
Buena práctica
Udemy: Permite navegar libremente entre las distintas secciones de los cursos.
Mala práctica
Ebay: No hay opción de retroceder una vez accedemos a la opción de pago.
4. Consistencia y estándares
Buena práctica
Apple: El menú de navegación de su web presenta una consistencia clara con espacios bien definidos, fuentes, estilos, colores… Buen sistema de diseño.
Mala práctica
Cex: El menú de navegación se divide en dos zonas, donde el inferior se mezcla con el hero, lo que dificulta su identificación. He dado con él por casualidad al pasar el ratón por encima de la palabra ‘Juegos’.
5. Prevención de errores
Buena práctica
Mercadona: La validación de su formulario de login es correcta ya qué nos indica en todo momento si el email que estamos introduciendo es válido y, además, deja el botón de acceso en disabled hasta que hayamos metido un email que esté bien.
Mala práctica
Concello de Boiro: La web del ayuntamiento no señala los errores que vamos cometiendo en el formulario. Además, la validación del formulario solo nos avisa de un único fallo, si hay más no lo sabremos.
6. Mostrar en vez de hacer recordar
Buena práctica
Game: Nos muestra todos los filtros que hemos ido seleccionando en el menú de búsqueda y además nos permite editarlos, eliminarlos o añadir filtros nuevos.
Mala práctica
Nespresso: No muestra los filtros que vamos usando en nuestra selección de productos, lo que obliga al usuario a recordarlos en todo momento.
7. Flexibilidad y eficiencia de uso
Buena práctica
Figma: Nos presenta un apartado de atajos de teclado para poder saber cómo utilizarlos y manejar la herramienta con más fluidez.
Mala práctica
Renfe: O yo soy muy malo o la web no indica bien cómo se pueden comprar los billetes. Por mucho que seleccione un trayecto y los precios no consigo avanzar para pagar. Menos flexible que eso…
8. Diseño estético y minimalista
Buena práctica
Github: Fácil, sencillo y para toda la familia.
Mala práctica
Cex: … Bueno.
9. Ayuda a reconocer y diagnosticar errores
Buena práctica
Domestika: Ofrece una creativa página de error además de darnos varias opciones de ayuda.
Mala práctica
Renovación DNI: Sin palabras…
10. Ayuda y documentación
Buena práctica
Miro: Sea la primera vez que lo usas o cuándo recibe cualquier tipo de actualización, la plataforma te indica qué es lo que ha cambiado y hace un tour visual por ella.
Mala práctica
Universidad Pontificia de Salamanca: Se hace bastante complicado, por no decir imposible, dar con la sección de ayuda.
Y con esto y un bizcocho hemos llegado al final de esta storie. Espero que la hayas disfrutado y hayas descubierto algo nuevo e interesante para tu día a día. Poco más, nos seguimos leyendo.
See you soon!
