10 Reglas Heurísticas de Nielsen: Cómo aplicarlas para mejorar la UX

Tiempo de lectura aprox: 5 minutos, 26 segundos

 

10 reglas heurísticas de Nielsen

1. Visibilidad del estado del sistema

Una de las reglas heurísticas fundamentales y, sorprendentemente, a menudo olvidada, es la visibilidad del estado del sistema.

Imagina que estás completando un formulario para comprar entradas para un concierto, pero no puedes distinguir en qué campo del formulario estás trabajando en ese momento. Cuando finalmente llegas al final del formulario y haces clic en el botón «Enviar», no hay ninguna indicación visual de que el botón funciona o no. Además, no recibes ningún mensaje de confirmación de envío o error.

Incluso peor, si hay errores en el formulario, no te indiquen en qué campo se encuentran ni cómo solucionarlos.

En el caso de comprar entradas, esto no puede generar mucho pánico en el usuario, pero imagina que estamos hablando de una transferencia bancaria, alquilar un coche o solicitar plazas en una guardería. Él no quiere sorpresas y si no se siente seguro usuario, no volverá a utilizar su producto.

Está de las primeras reglas heurísticas de Nielsen, nos dice que el usuario debe recibir retroalimentación (feedback) cuando realiza una acción y siempre en un tiempo razonable. Esto se logra a menudo mediante cambios de color, iconos, animaciones o indicadores de carga.

Heurística Nielsen: mostrar el estado del sistema

En este caso, el usuario puede visualizar el proceso de carga y cómo va evolucionando.

2. Coincidencia entre el sistema y el mundo real

Cuando trabajas en un producto durante mucho tiempo, es fácil dar por sentado muchas cosas.

Como conocemos el producto en detalle y sabemos cómo funciona cada pantalla, tendemos a asumir que el usuario también lo sabe.

Esto puede llevarnos a escribir textos poco amigables, como «Regístrate», sin ofrecer contexto o resaltar los beneficios. Incluso peor, mostrar los errores tal cual: «Ocurrió un error 404».

Es importante utilizar palabras y conceptos que sean familiares al usuario y le permitan comprender rápidamente qué está sucediendo.

Por ejemplo, en el mundo real, el color rojo indica prohibido, por lo que no tendría sentido mostrar un mensaje de éxito en ese color.

3. Da al usuario el control y la libertad

Esta es la tercera de las reglas heurísticas de Nielsen, se trata de darle al usuario el control y la libertad de realizar las acciones que desee… e incluso de darle la capacidad de deshacer acciones que pueda haber tomado por error.

Es como tener una «salida de emergencia» que encontramos cuando podemos cancelar el envío de un correo electrónico en Gmail, quitar una etiqueta de una foto que ha subido un amigo, o deshacer un texto escrito.

También forma parte de este principio la funcionalidad que tienen Twitter, Facebook y otras redes sociales de preguntarte si realmente quieres borrar una publicación o prefieres dejarla como está.

Heurística Nielsen: el usuario tiene el control y la capacidad de deshacer una acción

El usuario puede deshacer una acción. Ejemplo, cancelar un envío en Gmail.

4. Consistencia y estándares

La consistencia en el diseño UI es muy importante, y este principio se centra en eso mismo: el usuario no debería tener que preguntarse constantemente si ese botón enviar el correo, o si es un botón o un enlace, o si ese elemento se puede hacer clic o no.

Lo mismo sucede con el significado que ya se ha asociado a ciertos iconos: ¿qué te sugiere una mano cerrada con el pulgar hacia arriba? Un «me gusta». ¿Y una estrella? Favoritos.

Intentar cambiar estos estándares puede perjudicar tu diseño, ya que confundirás al usuario y harás que se pierda.

Por supuesto, se pueden modificar los estándares e inventar nuevos patrones de navegación, usos, etc., pero es un cambio que debe realizarse con tiempo o, nos guste o no, comenzar en uno de los «grandes productos» existentes… porque al final, son ellos quienes establecen las bases de las expectativas de los usuarios para el resto de los productos existentes.

5. Prevención de errores

El nombre en sí lo dice todo. Por ejemplo… ¿Cuántas veces has enviado un correo diciendo que adjuntarías algo, pero se te olvida? (y obviamente te das cuenta solo cuando ya le has dado al botón de «Enviar»).

Gmail ha implementado una función para prevenir este error, que consiste en mostrarte una advertencia cuando has escrito «adjunto» (o palabras similares) y no has añadido ningún archivo adjunto al correo.

O algo más sencillo: Google, una vez más, te sugiere palabras clave cuando realizas una búsqueda. O las plataformas que, al crear una contraseña, te avisan si es seguro o no, o si estás utilizando los caracteres necesarios.

Heurística Nielsen: prevención de errores

Gmail te avisa si te olvidas de adjuntar un archivo.

6. Reconocimiento en lugar de recuerdo

En nuestro esfuerzo por diseñar pantallas lo más limpias posibles, a menudo caemos en la tentación de ocultar opciones detrás de menús desplegables (menús hamburguesas), elementos que aparecen al pasar el cursor (hovers) o ventanas emergentes.

Sin embargo, al hacer esto, lo que realmente estamos haciendo es aumentar la carga mental para el usuario: le estamos pidiendo que recuerde dónde se encuentra cada opción, de qué pantalla viene y hacia dónde va.

Aquí es donde ingresar en juego los campos de autocompletar, el uso de palabras que el usuario pueda reconocer e incluso mostrar productos específicos que ya ha visto, tal como hace Amazon en sus páginas y en los correos que envía.

7. Flexibilidad y eficiencia de uso

Este es quizás uno de los principios más complejos: la interfaz que diseños será utilizada tanto por usuarios experimentados como por aquellos que recién llegan a la aplicación o página web.

Una forma de lograr cumplir este principio es implementar la personalización del programa, al igual que lo hacen los programas de diseño. También se puede ofrecer un proceso de incorporación y configuración que los usuarios más experimentados pueden omitir, mientras que los usuarios nuevos pueden seguir.

8. Diseño estético y minimalista

El «diseño minimalista» no es solo una moda. Además, no se refiere exclusivamente a la estética plana, sino a no agregar más información de la estrictamente necesaria.

Para lograrlo, pregúntate si toda la información que muestras en la interfaz es necesaria y útil en ese momento exacto. Si no lo es, ocúltala o elimínala.

Un ejemplo clásico es la página principal de Google. A pesar de la cantidad de productos y servicios que ofrecen, podrían caer en la tentación de mostrarlo todo allí.

Pero no lo hacen: el buscador es casi lo único que se muestra. Y si te fijas, verás que arriba a la derecha hay un menú mínimo. Pero eso es todo.

Heurística Nielsen: diseño minimalista

Diseño minimalista. La página principal de Google

9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores

Los errores son parte del recorrido del usuario. No siempre se pueden evitar utilizando los principios anteriores, pero sí se puede facilitar la experiencia cuando ocurra.

Permite que el usuario comprenda qué está sucediendo y cómo solucionarlo. Un mal ejemplo de cómo hacer esto es simplemente mostrar el mensaje «se ha producido un error con el usuario o la contraseña». Esto no ayuda al usuario a identificar en qué se está equivocando.

Un buen ejemplo de aplicar este principio sería en la página de «Error 404». Se debería explicar qué significa ese error, que no es culpa del usuario, y ofrecer la opción de volver a la página principal o buscar contenido en el sitio.

10. Ayuda y documentación

Un sistema ideal no debería requerir un manual o una documentación muy detallada. Sin embargo, tener una sección de Preguntas Frecuentes (FAQ) es un excelente ejemplo de cómo puedes evitar llamadas al servicio técnico o atención al cliente.

Otra forma de cumplir este principio es agregar explicaciones en los campos complejos de los formularios, como las contraseñas, o proporcionar aclaraciones en forma de información sobre herramientas en los textos.

Evaluación heurística de un producto

Si quieres evaluar la heurística de un producto que estás diseñando, necesitas utilizar un documento de Excel.

Necesitas crear 6 columnas:

  1. Listado de reglas y preguntas
  2. Ranking de gravedad
  3. Calificación o Rating para evaluar la facilidad de solucionar el problema
  4. Puntuación promedio (entre el ranking y la calificación)
  5. Explicación de por qué no se cumple esa regla
  6. Recomendaciones sobre cómo resolverlo

Aquí puedes descargar gratuitamente un documento de Google Spreadsheets con un ejemplo. Recuerda descargarlo o copiarlo para poder utilizarlo.

Las columnas de ranking y calificación te permiten evaluar de forma objetiva si es primordial solucionar el problema detectado para un buen uso del producto, o si puede ser resuelto en futuras iteraciones.

 

De manera, que las 10 reglas heurísticas de Nielsen son una herramienta invaluable para detectar errores significativos en el diseño de productos antes de su lanzamiento. Aunque no reemplazan las pruebas con usuarios, permiten identificar problemas evidentes y mejorar la usabilidad de un producto. Ya sea en el proceso de diseño, en prototipos o en el producto final, el análisis de la heurística proporciona una guía sólida para crear experiencias de usuario más efectivas y satisfactorias. Al aplicar estas reglas, los diseñadores pueden optimizar la calidad y la eficiencia de sus productos, brindando una experiencia positiva a los usuarios.