8 min read

Principios heurísticos de usabilidad

¿Existen reglas que deben cumplirse para que las interfaces sean más usables? ¿A qué elementos afecta? ¿Qué son los principios de usabilidad de Nielsen? Repasamos los diez principios de usabilidad con ejemplos.
Principios heurísticos de usabilidad

Si hay una persona que ha sido pionera y referente en el campo de la Usabilidad, desde hace más de 40 años ese es Jakob Nielsen. Sus aportaciones a este campo no cesan, manteniendo activo el Nielsen Norman Group, centro de investigación sobre Experiencia de Usuario en el que se publican numerosos estudios con un gran valor didáctico.

Los principios heurísticos de usabilidad o "10 reglas heurísticas de Nielsen" se publicaron por primera vez en 1994, y sin embargo se mantienen aún vigentes para facilitar la identificación de errores de usabilidad antes incluso de que éstos sean reportados por las personas usuarias.

Estos principios nos ayudarán a identificar errores típicos de usabilidad en diferentes fases del proceso de diseño y desarrollo y están fundamentados en la forma en la que los humanos interactuamos con las máquinas.

Conviene conocerlos e interiorizarlos porque acabarán convirtiéndose en requisitos de prácticamente cualquier producto o servicios digital que hagamos.

1 - Visibilidad del sistema

Una barra de estado que muestra el progreso de una descarga proporciona visibilidad del sistema al mostrar el estado actual del sistema.
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Establece la norma de que cualquier sistema debe informar a las personas de qué sucede, pero no de cualquier manera. Debe hacerse en el momento justo con el recurso adecuado.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Animaciones,
  • Mensajes de confirmación,
  • Breadcrumbs,
  • Barras de progreso,
  • Pantallas de carga.

2 - Correspondencia entre el sistema y el mundo real

Brújula en el mundo digital (izquierda) inspirada en la brújula física (derecha)
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

Este principio da especial importancia a que el lenguaje que se usa y las convenciones se ajusten a las personas objetivo. De aquí la importancia de la famosa frase de Nielsen: "You are not the user", puesto que conviene investigar y entender qué conceptos son familiares para la audiencia objetivo y evitar el argot técnico.

Una aplicación de jardinería que utiliza términos y símbolos comunes en el jardín en lugar de términos técnicos desconocidos para el usuario es un ejemplo de correspondencia entre el sistema y el mundo real.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Uso del lenguaje familiar,
  • Metáforas visuales,
  • Evitar el uso de tecnicismos.

3 - Control y libertad del usuario

En esta app puedes cancelar una acción de salida (accidental) y decidir qué hacer con el contenido que estabas creando.
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

Éste es probablemente el principio que de no cumplirse, puede generar mayor frustración, puesto que parte del hecho de que los humanos cometemos errores y como diseñadore/as debemos facilitar resolver o salir de una situación equivocada.

Un botón de "deshacer" que permite a los usuarios deshacer sus últimas acciones proporciona control y libertad al usuario.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Deshacer una acción (sea o no accidental)
  • Volver a atrás y guardar para luego
  • Multimodalidad para interactuar mediante modos alternativos
  • Salir, apagar o cerrar una pantalla, app, servicio, etc.

4 - Consistencia y estándares

La misma metáfora de calendario interpretada por tres lenguajes visuales diferentes: iOS, Android y Microsoft.
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Hacer diseños consistentes y estándares es otro principio importante, reduce la curva de aprendizaje y la confusión. Sin embargo, debemos entender que debe usarse cuando sea necesario y no para añadir restricciones a ideas innovadoras.

Utilizar los mismos iconos y términos en toda la aplicación es un ejemplo de consistencia y seguir los estándares de diseño de iconos conocidos por los usuarios es un ejemplo de adherirse a estándares.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Iconografías estándares (menú, guardar, etc.),
  • Metáforas similares en distintas plataformas,
  • Layout similar dentro de la plataforma.

5 - Prevención de errores

Diferentes tipos de selectores ayudan a prevenir errores en la introducción de datos.
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

Todas conocemos el dicho "más vale prevenir que curar" y este principio es reflejo de esta misma idea. Debemos diseñar para eliminar al máximo la posibilidad de que una persona cometa un error o use de forma poco adecuada el producto.

Mostrar un mensaje de advertencia antes de eliminar accidentalmente un archivo es un ejemplo de prevención de errores.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Placeholders,
  • Comprobación de errores en línea,
  • Campos con máscara o restringidos a un tipo de dato.

6 - Reconocimiento en lugar de recuerdo

El orden en el que aparecen las acciones en un menú de una aplicación se mantiene en todas las soluciones parecidas, se convierte en un estándar de la industria.
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Este principio está fundamentado en la manera en la que funciona nuestro cerebro y hablaremos más de ello en la Introducción al Diseño de interacción. Por ahora podemos simplificarlo diciendo que las personas tardamos menos reconociendo lo que percibimos por nuestros sentidos que teniendo que buscar esa información entre nuestros recuerdos la información. Por esta razón, si lo que vemos u oímos es reconocible, seremos más rápidos/as tomando una decisión.

El autor Steve Krug profundiza sobre hasta dónde es relevante este principio en su libro Don't Make Me Think.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Orden de acciones en un menú,
  • Historial de actividad,
  • Proporcionar sugerencias mientras un usuario escribe en un campo de búsqueda,
  • Iconografía con etiquetas,
  • Información de atajos de teclado en contexto de la acción,
  • Tooltips.

7 - Flexibilidad y eficiencia de uso

Los atajos (shortcuts) son una forma de mejorar la eficiencia de uso.
Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Cuando creamos productos debemos tener en cuenta a quienes entran por primera vez, pero también a quienes son usuarios recurrentes. Permitirles usar aceleradores y atajos puede mejorar la eficiencia de uso.

Proporcionar opciones avanzadas ocultas para usuarios experimentados es un ejemplo de flexibilidad y eficiencia de uso.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Contenido frecuente o reciente,
  • Atajos de teclado para acciones comunes,
  • Opciones de personalización.

8 - Diseño simple y directo

Imagen de una web minimalista.
Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

Aquí habréis escuchado lo de 'menos es más' o la importancia del diseño minimalista. Más allá de las tendencias, la realidad es que una interfaz no es un discurso ni un producto de márketing, y por tanto cada pieza extra de información que no resulte útil a las personas que la usan puede resultar contraproducente. Se busca por tanto mostrar siempre información relevante, útil y en el momento adecuado.

Un formulario de inicio de sesión con solo dos campos (nombre de usuario y contraseña) es un ejemplo de diseño simple y directo.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Uso del espacio en blanco,
  • Balance de textos e imágenes,
  • Layout eficaz.

9 - Recuperación de errores

Una forma más amigable de mostrar errores (izquierda) respecto a otro menos amigable (derecha)
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

Los errores suceden, ya sean provocados por una acción de una persona o porque el servicio o el producto tras la interfaz se haya caído, roto o simplemente no funcione. En cualquier de las situaciones, debemos diseñar la forma en la que salir de esa situación ya sea mediante acciones automáticas como si requieren nuevas decisiones y acciones humanas. En ambos casos, el lenguajes que usemos debe ser cercano a las personsa, preciso y debe incluir la solución a dicho error.

Proporcionar opciones para restaurar archivos eliminados accidentalmente es un ejemplo de recuperación de errores.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Informa de la situación, no del código de error interno,
  • Ajusta el tono a la gravedad de la situación,
  • Ofrecer atajos para solucionar el error,
  • Indicae un mensaje claro, conciso y útil,
  • Solicitar confirmación de una acción de borrado.

10 - Ayuda y documentación

Ejemplo de tour de bienvenida para primeras experiencias.
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

Durante mucho tiempo se ha dicho que lo ideal es que no haga falta un manual para usar una interfaz, sin embargo, la ayuda y la documentación puede ser necesaria en muchos contextos.

Proporcionar una guía de usuario en línea o una sección de preguntas frecuentes es un ejemplo de ayuda y documentación.

Conseguiremos cumplir este principio en la interfaz a través de:

  • Preguntas frecuentes,
  • Manuales,
  • Minitours en la primera visita,
  • Tooltips,
  • Mensaje descriptivos en formularios.

Es importante tener en cuenta que estos heurísticos son una guía básica necesaria pero no suficiente para conseguir productos y servicios digitales con una buena experiencia de usuario.

Como decía Nate Bolt en su libro 'Remote Research':

“You don’t come up with an iPod just by making a walkman easy to use”.

La investigación es un proceso fundamental para crear productos realmente innovadores y dirigidos a solucionar problemas incluso para satisfacer a las personas sin que exista la necesidad de que estemos resolviendo un problema.