Much@s habréis oído hablar del análisis heurístico en usabilidad, o sea, enfocado al diseño UX/UI, ¿verdad? Aún así, creemos que nunca está de más hacer un repaso. Empezamos por lo principal. 👇
Heurístico: definición
El análisis heurístico es una de las técnicas UX más habitual que se usa dentro del diseño web para poder evaluar la usabilidad de ciertas interfaces. Básicamente consiste en realizar algunas pruebas para comprobar que esas interfaces cuentan con una buena usabilidad y que cumplen con los objetivos requeridos de la web/app en cuestión.
Una vez se han hecho estas pruebas, podremos extraer una serie de conclusiones que nos ayuden a revisar esa interfaz y a mejorarla para que la experiencia del usuario sea lo más óptima posible. Vamos, que te va a venir fetén en cualquier proyecto.
¿Cuándo hay que realizar un análisis heurístico?
Pues realmente nunca te va a venir mal hacer uno, porque vas a detectar mejoras que quizá no habías tenido en cuenta en un primer momento. Pero normalmente son más necesarios cuando, por razones económicas o de cultura, no se vaya a hacer un test de usuarios. Estos test de usuarios, como os comentábamos en este artículo, son realmente útiles, pero muchas veces no hay cultura de empresa en este sentido y a menudo se quedan fuera (los grandes olvidados de la fase UX). ????
Y ahí es donde interviene el análisis heurístico. Pero seguro que te estás preguntando: “Vale, muy bien, pero…¿por dónde empiezo?”. ???? ¡No te preocupes!
Nuestro amigo Jakob Nielsen nos dejó en la década de los 90 algunas claves que te van a venir de perlas para poder poner el foco. Luego te las contamos.
¿Qué se evalúa en un heurístico?
Como comentábamos antes, el análisis heurístico tiene por objetivo detectar todos los problemas de usabilidad de una interfaz y proponer posibles mejoras o soluciones.
Normalmente, el foco está puesto en algunos elementos concretos que son los que van a determinar si una web va a tener una experiencia de usuario correcta o va a resultar difícil en cuanto a la navegación. Estos elementos van desde lo más general como es la estructura, el layout, el lenguaje o el sistema responsive, a lo más específico como pueden ser elementos de búsqueda o de ayuda, titulares, botones, etc.
¿Cuáles son los principios heurísticos de Nielsen?
No te quedes con las ganas, ya os adelantábamos que os íbamos a contar más al detalle los 10 principios heurísticos de usabilidad que nos dejó Jakob Nielsen. Hay que decir que existen otros principios, pero los de Nielsen son los que engloban de una forma más completa todo lo que debemos tener en cuenta. ¿Vamos a por ellos? 👇
- Visibilidad del estado del sistema
- Conexión entre el sistema y el mundo real
- El usuario debe tener el control y la libertad
- Consistencia y uso de estándares
- Prevención de errores
- Reconocer en vez de recordar
- Uso eficiente y flexibilidad
- Diseño minimalista
- Ayuda para reconocer, diagnosticar y recuperarse de errores
- Ayuda y documentación
Visibilidad del estado del sistema
El usuario debe saber en todo momento dónde está y, sobre todo, recibir respuestas a las acciones que realice en un periodo de tiempo prudencial.
Por ejemplo, seguro que alguna vez te ha pasado que has rellenado un formulario en una web y cuando le has dado a enviar no ha pasado absolutamente nada. ¿Se ha enviado? ¿No se ha enviado?¿Vuelvo a darle al botón por si acaso?
Total, que al final te quedas con la duda de si realmente ha funcionado porque no ha aparecido un mensajito que te diga: “¡mensaje enviado! Muchas gracias por contactar con nosotros”.
En este caso quizá no sea tan grave, pero imagínate que algo similar te pasa en un proceso de checkout donde estás comprando un producto que cuesta bastante pasta. Pues probablemente te genere desconfianza y a lo mejor no quieras volver a comprar en esa página. Así que siempre, siempre, el usuario debe recibir respuesta a sus acciones.
Algunos elementos que nos ayudan a esto son el efecto hover o pressed, un mensaje de éxito, una barra de progreso o unas migas de pan, por citar algunos.
Conexión entre el sistema y el mundo real
Pues esto parece bastante claro, pero muchas veces estamos tan metidos en el proyecto que hay cosas que consideramos obvias cuando realmente no lo son así para el usuario.
Por ejemplo, seguro que si te dedicas a este mundillo sabes perfectamente lo que es un error 404 o un recaptcha, pero no puedes dar por sentado que el usuario sabrá lo que es. Por eso sería recomendable traducirlo al idioma “humano” y poner “¡Vaya! La página que buscabas ya no existe” o “Rellena este campo para saber que no eres un robot”.
Esto también aplica a la parte de diseño, donde podremos acercar los elementos a cómo son en el mundo real si, por ejemplo, a un botón le aplicamos un sombreado para generar volúmen. El usuario lo asociará más fácilmente con su entorno real y sabrá que es un botón y que puede pinchar en él.
El usuario debe tener el control y la libertad
Es importante que el usuario pueda tener el control sobre las acciones que realice y, sobre todo, que siempre pueda volver atrás si lo desea. O dicho de otro modo, debemos permitir volver al momento previo a la interacción.
Para esto son muy útiles elementos como botones de cancelar progreso, ir hacia atrás o deshacer (de cuántos líos nos ha salvado este último).
También han salvado bastantes vidas esos mensajes que nos lanzan distintas aplicaciones o incluso nuestro sistema operativo que dicen algo así como “¿Está seguro de que desea realizar esta acción?”. El usuario tendrá total libertad y control para decir “sí, quiero” y no borrar, por ejemplo, su entrega del día siguiente por error.
Consistencia y uso de estándares
Muy sencillo: empleemos convenciones creadas de forma consistente y recurramos a estándares conocidos. Si ya sabemos que un texto que está en azul y subrayado es un link, no liemos al usuario poniéndolo de una forma extraña.
Lo mismo pasa con el resto de botones o de iconos, todos ellos deben tener una coherencia y una consistencia para que el usuario sepa cómo interactuar con ellos. Si ponemos un texto no ciclable con forma de botón, el usuario pensará que puede pinchar ahí y le generará frustración el ver que no hace absolutamente nada. No frustremos al pobre usuario.
Prevención de errores
Alguien muy sabio dijo que hay que prever los imprevistos. Pues de eso va este principio. Es mejor prevenir un fallo que solucionarlo. Si algo ocurre, ofrezcamos siempre una salida.
Por eso veréis, cuando os estáis registrando en algunas plataformas y os toca genera una contraseña, un mensajito que te diga “tu contraseña debe contener al menos 8 caracteres alfanuméricos, un símbolo y una mayúscula”. Así se aseguran de que lo rellenarás correctamente y no te saldrá un error en el proceso.
En este post de Instagram os dejamos un ejemplo visual para que os hagáis mejor idea.
Reconocer en vez de recordar
Tenemos que asumir que el usuario no va a tener una memoria privilegiada y va a recordar dónde está cada cosa dentro de nuestra web. Es por eso que no debemos ocultar elementos dentro de menús o similares porque se lo vamos a poner más difícil al usuario. Por eso, si queremos que le dé a un botón concreto vamos a ponérselo delante de la nariz para que siempre lo tenga presente.
O en este caso también nos pueden ayudan algunos elementos como son las migas de pan para que sepa siempre de dónde viene y hacia dónde va. Vamos, que hay que darle la manita para que no se nos pierda.
Uso eficiente y flexibilidad
Al hilo del principio anterior en el que hablábamos sobre que el usuario no tiene una gran memoria a corto plazo, también debemos tener en cuenta que no todos los usuarios que lleguen a nuestra web van a ser unos cracks que lo entiendan todo.
De hecho, tendremos usuarios más expertos y otros más novatos, por lo que deberemos ajustar nuestra interfaz para que tod@s la entiendan. Para esto vienen fenomenal, por ejemplo, los procesos de onboarding que hacen muchas apps en las que te explican cómo se utilizan los elementos principales. Esto ayuda a que el usuario inexperto pueda enterarse bien de cómo funciona todo y el usuario experto podrá omitir la información y darle caña a la app.
Esto hoy en día es especialmente necesario, porque habiendo generaciones que han crecido en el mundo digital creemos que ya todo el mundo va a entender el funcionamiento, y nos olvidamos de que hay otros usuarios (alias, boomers), que no están familiarizados con ese entorno y necesitan una ayuda extra. Pensemos siempre en los boomers.
Diseño minimalista
Te habrás cansado de escuchar esto pero menos es más. Sobre todo porque es fundamental no saturar al usuario con información que realmente no es relevante en el momento o la página en la que está.
Un ejemplo bueno de esto son algunas aplicaciones de transporte como Bolt en las que, cuando entras, solamente aparece un mapa y un buscador que te pregunta “¿A dónde vas?”. De esta forma, esconden el resto de la información en el menú de hamburguesa y se centran en lo que realmente le importa al usuario en ese momento, que es pedir un coche.
Ayuda para reconocer, diagnosticar y recuperarse de errores
Aunque ya comentábamos antes que es importante prevenir errores, hay muchas veces que son inevitables. Por eso es importante que ayudemos al usuario a entender qué es lo que ha fallado y cómo puede solucionarlo.
Aquí volvemos a los formularios. Cuando el usuario rellena un formulario, ya sea de contacto o de checkout, y se deja sin rellenar algún campo que es obligatorio, debería aparecerle un mensaje explicándole por qué no se ha podido realizar la acción. Un ejemplo es el formulario de contacto que hicimos en Bisiesto Estudio para la web de Prensalink, en el que hay varios mensajes que van a ayudar al usuario a saber qué es lo que tiene que rellenar.
Ayuda y documentación
Y vamos con la última, pero no menos importante, y es que si hemos realizado bien todos los pasos anteriores, el usuario no debería necesitar una ayuda extra, pero nunca está de más.
Por eso es importante que completemos nuestra web/app con cierta documentación que al usuario le pueda ayudar a resolver algunas dudas que le queden pendientes. Para esto son muy recomendables las famosas preguntas frecuentes, pero podemos contar con una documentación mucho más completa si queremos cubrirnos las espaldas o si nuestra app tiene muchas funcionalidades y queremos que todo quede cristalino.
Un buen ejemplo es cómo lo soluciona la app de Airbnb, que tiene un apartado específico en el que el usuario puede ver cómo funciona la app y también pedir soporte si lo necesita.
Y hasta aquí nuestra explicación sobre el análisis heurístico y sus principios más importantes. Ya sabes que en Bisiesto Estudio somos expertos en UX/UI, entre otras cosas, así que si necesitas que te echemos un cable con tu nuevo proyecto, mándanos un mensajito y estaremos encantad@s de aportar en lo que haga falta. 😊
¡Pregúntanos lo que quieras!
Si te has quedado con ganas de saber algo, ¡dinos! No te cortes. 🙂
Le pirra casi tanto el diseño como el teatro. Si te descuidas, te rompe los esquemas. Con dos frasecitas te hila un poema.
- Cómo definir el tono de tu marca y ejemplos - 18 marzo 2024
- Design Thinking y Design Sprint. ¿Cuáles son las diferencias y sus fases? - 22 enero 2024
- Análisis heurístico: definición y principios - 10 febrero 2023
