Los 10 principios de usabilidad de Jakob Nielsen

Te presentamos los diez puntos imprescindibles para que una web tenga una buena usabilidad. ¡Vamos allá!

La fórmula de la página web perfecta combina estos cuatro elementos: usabilidad, diseño, creatividad y contenido. En este artículo hablaremos del primero, la USABILIDAD.

¿Qué es?

Es sabido que la línea recta es el camino más corto entre dos puntos, ¿verdad? Pues la usabilidad es la línea recta de la página web, es decir, no crear puertos de montaña para llegar a la información.

Dicho de manera más técnica, la usabilidad es el grado de facilidad de uso que tiene una página web por los visitantes que entren o interactúen con ella. Para que así sea debe permitir una interacción sencilla, intuitiva, agradable y segura.

top Ventajas:

Una buena usabilidad web nos permite obtener muchos beneficios, entre ellos:

Mejorar la experiencia y la satisfacción de los visitantes.
Fidelizar a los visitantes, por lo que vuelvan a visitar la web.
Facilitar que los usuarios recomienden la web y así generar visitas adicionales.
Conseguir más tráfico.
Conseguir una mayor comunicación y feedback con el usuario.
Aumentar la duración de las visitas.
Disminuir el porcentaje de rebote.
Aumentar las ventas a través de la página web.
Conseguir que el usuario se familiarice con la web y, por tanto, que se desarrolle de manera fácil e intuitiva.

Decálogo de usabilidad de Jakob Nielsen

Jakob Nielsen es un ingeniero de interfaces danés que se considera uno de los creadores del concepto de usabilidad. En 1990 definió 10 principios de diseño basados en el usuario que a día de hoy todavía siguen vigentes. Son los siguientes:

1. Visibilidad del estado del sistema.

¡Minuto y resultado!

El usuario debe saber en todo momento qué está pasando y obtener una respuesta lo más rápida posible a todas sus acciones. Lo peor que puede pasar en una web es que no pase nada. No saber si está cargando o no saber si hemos realizado bien o mal una acción, porque no hay nada que nos lo indique.

Ejemplos:

Barras de carga.
Los breadcrumbs, o migas de pan, que nos muestran en qué punto nos encontramos en la web.
Los indicadores de los procesos de compra, nos indican a qué fase nos encontramos y cuántas nos quedan para finalizar.
Páginas de la situación de la suscripción con confirmación.

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

¡Las cosas claras y el chocolate espeso!

El sistema debe hablar con el lenguaje del usuario, con imágenes claras, un orden lógico y con una interacción que sea natural.

Ejemplos: el símbolo de la papelera como símbolo de borrar o eliminar elementos es el más claro. La mayoría de símbolos deben tener lógica y ser intuitivos, como ocurre con las múltiples apps, las que tienen una nota musical son de música, la del sobre es el correo electrónico, etc.

3. Control y libertad del usuario.

¡Quien tiene boca se equivoca!

Este punto quizás parece muy obvio pero no se debe pasar por alto. Debemos dar la opción al usuario de deshacer la acción que acaba de hacer, ya sea porque se ha equivocado o porque se arrepiente.

Ejemplos: sacar elementos del carro de la compra de la tienda online o cambiar la cantidad de productos. Editar el propio perfil o, simplemente, el botón de deshacer (que viene que nos iría a la vida real, ¡eh!).

4. Consistencia y estándares.

¡No hagas inventos o los usuarios se perderán!

Romper las normas está bien, pero no aquí. Lo lógico es que si hay unas normas establecidas que todos siguen nuestra web también las siga.

Ejemplos:

La tipología de los menús en formato hamburguesa.
Las cruces (x) para cerrar.
Los botones verdes para aceptar y los rojos para rechazar.
Todos los menús deben ir al mismo lugar, si cambia de lugar dependiendo de la página el usuario se volverá loco.

Foto: Viviane Okubo

En la naturaleza los animales también tienen estándares que deben cumplir, un ejemplo son los rituales de apareamiento. Si algún animal lo cambia se quedará solo.

5. Prevención de errores

¡Más vale prevenir que curar!

Esto reza la sabiduría popular, ¡hagámosle caso! Hay que anticipar a todos los posibles errores que pueda cometer el usuario y darle soluciones en caso de que en cometa alguno que no me previsto.

Ejemplos:

Función de autocompletar de Google o los correctores automáticos de los servicios de mensajería instantánea.
La confirmación de la dirección de correo electrónico en doble campo en los formularios.
La comprobación de los campos de los formularios en tiempo real.

6. Reconocer antes que recordar.

¡Una imagen vale más que mil palabras!

Somos de naturaleza perezosa, por eso es mejor darlo todo lo más masticado posible. El usuario no quiere recordar cómo se hacen las cosas o como son, prefiere reconocerlas cuando las tiene delante. Es por eso que le tenemos que poner la vida fácil.

Ejemplos:

Las previsualizaciones, podríamos decir de cualquier tipo, pero un ejemplo concreto sería los de las tipografías que aparecen en editores de textos, donde se muestra cómo son.
Las apps de noticias nos ofrecen un listado de temas que nos pueden interesar en base a lo que ya hemos leído, en vez de introducir nosotros las etiquetas.

Foto: Kim Daniel

Los árboles buscan el sol de la manera más sencilla posible, normalmente el tronco sube recto hacia arriba hasta que la copa llega a hacerse un lugar entre las demás. ¡La naturaleza también sabe que la línea recta siempre es la más corta!

7. Flexibilidad y eficiencia de uso.

¡Web todoterreno!

No sabemos qué tipo de usuario irá a parar a nuestra página web, pueden ser muy experimentados o novatos en cuanto a su uso de la informática. Por este motivo debemos preparar la página web por los dos tipos de usuarios, de manera que puedan navegar, por lo tanto tenemos que conseguir flexibilidad.

Ejemplos:

El buscador de Google, si eres un usuario novato pondrás la palabra en el buscador, en cambio un usuario experimentado podrá hacer una búsqueda más precisa a través de una búsqueda avanzada.
Los tutoriales de aplicaciones que se pueden saltar, los experimentados o harán y los noveles se lo mirarán.

8. Diseño estético y minimalista.

Keep It Simple Stupid (KISS).

Las webs no deben contener información innecesaria, ya que distraerá al usuario. Si no hay, no lo pongas. Este mantra también sirve para el diseño, no se necesitan florituras que no aportan nada, el usuario quiere sites limpios que carguen lo antes posible.

Ejemplo:

El buscador de Google tiene el mínimo imprescindible: el doodle del momento y la barra.

Foto: Virginia Lackinger

En las flores, el polen se concentra en el centro de las mismas. Puede variar la forma, el diseño, pero la situación es siempre la misma y todos los insectos saben dónde tienen que ir a encontrar.

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

¡Quién tiene boca se equivoca!

Debemos ayudar al usuario a que entienda todo lo que está pasando, sobre todo cuando hay errores, por eso nos debemos expresar con un lenguaje que pueda ser entendido por todos.

Ejemplos:

No es lo mismo poner sólo Error 404 o ponerlo acompañado de un "lo siento, la página no ha sido encontrada ...".
Cuando un usuario se equivoca al poner una contraseña preguntarle si la ha olvidado y darle soluciones: enviar un mensaje de texto, recuperación vía mail, etc.

10. Ayuda y documentación.

¡Responde a todas las preguntas antes de que te las pregunten!

Le tenemos que dar al usuario un manual de funcionamiento, aunque seguimos los puntos anteriores al pie de la letra. Esta ayuda debe estar en un lugar visible y ser muy concisa.

Ejemplos:

FAQS (Frequently Asked Questions)
Signo de interrogación o la y de información
Minitours, tutoriales

Si nos quieres conocer mejor,
¡contáctanos! Y si te gusta, ¡síguenos!