Principios de usabilidad web de Jakob Nielsen

¡Comparte este artículo!

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

Los principios de usabilidad web de Jakob Nielsen que vas a ver a continuación son la base de cualquier página web para que esté centrada en el usuario, mejore su experiencia y, consecuentemente, sea eficaz.

Tenemos que facilitar el camino al usuario (o user flow) que usa nuestra web para que no se sienta frustrado por no conseguir lo que busca y así evitar los llamados pain points. O dicho en otras palabras: diseñar pensando en mejorar la usabilidad, la accesibilidad y la satisfacción que obtienes al interactuar con una interfaz.

¿En qué consiste la usabilidad?

La usabilidad es la facilidad con las que las personas interactúan con una herramienta con el fin de alcanzar un objetivo concreto. Si un sitio web es fácil de usar, los usuarios podrán alcanzar mejor los objetivos que persigue el sitio web. Por lo tanto, un sitio web con buena usabilidad debe permitir al usuario utilizarlo de forma eficaz e intuitiva.

¿Por qué necesitamos conocer los principios de usabilidad web de Jackob Nielsen?

Para conseguir que el usuario que visite nuestra web se quede en ella necesitamos que su experiencia con la misma sea positiva.

¿Qué conseguimos si mejoramos la experiencia del usuario aplicando los principios de usabilidad web?

  1. Aumentar el tráfico recurrente. Es decir, que tenemos más puntos para que un usuario después de haber visitado nuestra web o blog, vuelva a ella en un futuro. Aplicando estos consejos podemos aumentar el número de visitas de nuestras páginas webs.
  2. Disminuir el porcentaje de rebote. El porcentaje de rebote no es otra cosa que conseguir que el tiempo de estancia del usuario sea alto y conseguir que navegue por las diferentes partes de nuestro sitio web.

Eso se consigue facilitándole las decisiones a tomar dentro de nuestra página.

Jackob Nielsen es un gurú de la usabilidad web reconocido en todo el mundo. En este caso, me centraré en sus 10 principios básicos de usabilidad web (los famosos Principios Heurísticos), aun vigentes desde 1995.

Para llegar a estos 10 Principios de usabilidad y accesibilidad web aplicó el Método Heurístico:

  1. Identificar el problema.
  2. Definir el plan para solucionar el problema.
  3. Realizar el plan establecido.
  4. Analizar el resultado.

Después de esta breve introducción, nos metemos de lleno en el Principios de usabilidad web de Jackob Nielsen

1. Visibilidad del estado del sistema

Este principio de usabilidad web nos indica que siempre tenemos que tener informado al usuario de lo que está pasando en nuestra web y ofrecerle una respuesta en el menor tiempo posible.

Breadcrumbs example
Ejemplo de breadcrumbs para situar al usuario dentro de la web

Maneras de aplicarlo:

  • Las barras de carga de las imágenes o de los procesos de descarga de archivos.
  • Los Breadcrumbs o migas de pan que nos muestran dónde nos encontramos dentro de la web.
  • Los indicadores de los procesos de compra que suelen indicarnos en qué fase nos encontramos.
  • Las páginas de situación de suscripción con confirmación donde cargas una página que indica que hemos enviado un mail para que haga click en el enlace

2. Relación entre el sistema y el mundo real

El sistema tiene que “hablar” el lenguaje del usuario con palabras o frases que a éste le sean familiares y que pueda reconocer con facilidad. La información tiene que mostrarse con un orden lógico y las imágenes o iconos usados tienen que ser claros, sin darle la posibilidad al usuario de equivocarse.

Por ejemplo, lo más normal es que en la versión responsive de una web implementes el icono “hamburguesa” como menú desplegable y no inventes uno nuevo porque te parezca más bonito. Si lo haces por ganar en originalidad, estarías empeorando la usabilidad web. De hecho, el usuario puede llegar a no entender dicho icono porque seguro que está buscando el icono de las líneas horizontales.

Con esto, conseguimos que la interacción con el lector sea natural y no le cueste moverse por la web.

3. Control y libertad del usuario

A veces, un usuario se equivoca y tenemos que darle la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo. Debe poder deshacer y rehacer acciones; debe sentir que tiene el control en todo momento.

¿Nunca has añadido un producto en un carrito de la compra y luego te has arrepentido?

El botón de borrar el artículo de la lista de la compra es un claro ejemplo de este principio de usabilidad para páginas web o tiendas online.

Opción para cancelar el envío en GMail
Opción para cancelar el envío en GMail

Otros ejemplos:

  • Botón de deshacer.
  • Dar la posibilidad de editar un perfil personal.

4. Consistencia y estándares

Es importante mantener la misma consistencia a lo largo de todo el sistema (color, lenguaje, flujo de navegación, etc.). La consistencia es clave a la hora de diseñar interfaces usables. Cuando el esquema de navegación está estructurado de acuerdo al modelo mental de la mayoría de los usuarios, se tiene el 80% de éxito.

En cuanto a los estándares:

  • Los botones verdes los asociamos a aceptar una cosa, y los botones rojos cancelar Nunca se nos ocurriría poner los colores al revés, porque el número de errores que cometería la gente sería enorme. Tenemos que facilitar el camino todo lo posible.
  • Si el menú de navegación lo tienes a la izquierda, no lo cambies dependiendo de las páginas, volverás loco al usuario. Son segundos los que el usuario tarda en encontrar el menú en “el otro sitio”, pero lo justo para ir empeorando la satisfacción con el sitio web.

5. Prevención de errores

Tenemos que prevenir cualquier error que pueda cometer el usuario y poner a su alcance todas las opciones posibles para poder corregirlo.

Aviso de GMail si te olvidas el adjunto
Aviso de GMail si te olvidas el adjunto

La opción de autocompletar de Google es un buen ejemplo de usabilidad.

El buscador te da la opción de completar tu texto, con esto te ayuda, por un lado, a acotar tu búsqueda y, por otro, porque así de esta forma se asegura de que escribes el texto correctamente.

Ejemplos:

  • Confirmación de dirección de correo electrónico o de la contraseña con doble campo en los formularios
  • Comprobación de campos de formularios en tiempo real

6. Reconocer antes que recordar

Se trata de minimizar la carga de memoria del usuario haciendo visible objetos, acciones y opciones. Siempre se deben indicar los campos por los cuales se ha realizado la búsqueda.

Aquí vuelven a entrar en acción los campos que se autocompletan, el uso de palabras que el usuario reconozca e incluso mostrar determinados productos que ya has visto, como hace Amazon en sus páginas y en los correos que envía.

Ejemplo visual de tipografías

Por ejemplo, cuando vas a seleccionar una fuente de las tropecientas que has instalado, ¿qué es más fácil? acordarnos del nombre de cada una de ellas y de cómo era; o por el contrario, que nos hagamos una idea de cómo es si nos muestra una previsualización de la fuente.

7. Flexibilidad y eficiencia de uso

Aceleradores, atajos (visuales o no) y recomendaciones que faciliten la navegación, tanto para los usuarios sin experiencia como con experiencia. Es importante que el sistema permita personalizar acciones frecuentes.

Tenemos que tener un sitio web preparado para todo tipo de usuario, desde los más novatos hasta los más experimentados. Si conseguimos que cualquiera pueda navegar por nuestra web logramos flexibilidad. Y si tenemos opciones para los más experimentados obtenemos eficiencia.

Si no tienes mucha experiencia en su uso, simplemente pones lo que quieres buscar y listo. Pero si eres más experimentado y quieres conseguir búsquedas más específicas puedes usar operadores dentro del buscador.

Búsqueda avanzada de Google
Búsqueda avanzada de Google

No es necesario conocer los operadores de Google para poder cumplir tu objetivo, pero si los conoces puedes tardar la mitad de tiempo en alcanzar tu meta.

8. Diseño estético y minimalista

Las páginas web no deben contener información innecesaria, ya que distraerá al usuario y puede llegar a molestar en la navegación. El usuario busca sitios web limpios y que carguen rápido, así que elimina todo lo que consideres innecesario y que no aporta nada a lo que quieres decir.

Es un ejemplo clásico, pero piensa en la página principal de Google. Con la cantidad de productos y servicios que tienen, podrían caer en la tentación de ponerlo todo allí.

Buscador de Google
Buscador de Google, estilo minimalista

La mejor forma de recordar este principio básico de usabilidad web es con el acrónimo KISS, Keep It Simple Stupid. O, como diríamos en español: “aporta o aparta”.

9. Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores

Tenemos que intentar que todos los errores que puedan ocurrir en tu web estén expresados en un lenguaje entendible por todos, no por códigos.

Permite que el usuario comprenda qué está pasando y cómo solucionarlo. Un mal ejemplo de cómo hacer esto es el clásico “se ha producido un error con el usuario o la contraseña”: es lo mismo que no decir nada, porque ni siquiera permite al usuario ver en qué se está equivocando.

La mayoría conocemos qué es un error 404, pero hay gente que no sabe lo que es. Quizás en vez de que aparezca “Error 404”, debe decir más amigable como: “Lo siento, página no encontrada” y darle una posible salida añadiendo páginas relacionadas o un buscador interno para que pueda buscar y no se vaya de la web.

Ejemplo de buena práctica de página de error 404
Ejemplo de buena práctica de página de error 404

De esta forma tan sencilla, estamos indicando al usuario qué es lo que pasa en ese momento y que tiene que hacer para salir de ahí. 

10. Ayuda y documentación

Un sistema ideal no debería necesitar un manual o una documentación muy elaborada. Pero aun así, unas FAQ (preguntas frecuentes) son un gran ejemplo de cómo puedes evitar llamadas al servicio técnico o servicio de atención al cliente.

Aun así, siempre tenemos que dar al usuario la posibilidad de tener un pequeño manual de funcionamiento. Esta ayuda debe ser fácil de localizar, definir los pasos claramente y no ser muy extensa.

Otra forma de cumplir este principio es el de añadir explicaciones en los campos complejos de los formularios, como las contraseñas, o indicar mediante tooltips aclaraciones de los textos.

Existen numerosos ejemplos de este principio general de usabilidad web:

  • FAQs, Frequently Asked Questions, preguntas frecuentes
  • El icono de la interrogación cerca de algunas opciones
  • Minitours nada más abrir una aplicación donde se muestra lo esencial

Cómo evaluar la heurística de un producto

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

Necesitas crear 6 columnas:

  • Listado de reglas y preguntas
  • Ranking de gravedad
  • Rating para evaluar la facilidad de solucionar el problema
  • Puntuación promedio (entre el ranking y el rating)
  • Explicación de por qué no se cumple esa regla
  • Recomendaciones sobre cómo resolverlo

Ya has visto que estos Principios de usabilidad web de Jakob Nielsen son muy sencillos. Ahora ya entiendes el porqué de ellos y cómo puedes mejorar la experiencia del usuario de tu página web.

Ya no sólo te tienes que quedar con elegir un buen tema para decorar tu web, un hosting que sea fiable y un puñado de palabras claves para aparecer en las SERPs de Google.

Como información relacionada te aconsejo que leas este otro artículo sobre cómo aplicar una correcta jerarquía web con ejemplos y consejos para mejorar la experiencia de usuario.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *