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.

Ejemplos:

• Formulario: Creas una página para que se cargue nada más enviar el formulario informando que en breve nos pondremos en contacto con él. Además en esta página puedes ofrecer enlaces a contenidos interesantes para él y así, conseguir retenerlo en tu web.
• 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

Tenemos que conectar con el usuario.

• 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.
• Usa imágenes claras.
• La información tiene que mostrarse con un orden lógico y las imágenes e iconos usados tienen que ser claros, sin darle la posibilidad al usuario de equivocarse. Con esto, conseguimos que la interacción con el lector sea natural y no le cueste moverse por la web.

Ejemplo:

Uso de la papelera como símbolo de borrar. Este icono sabemos para qué sirve o por lo menos lo intuimos sólo con verlo.

3. Control y libertad del usuario

A veces, un usuario se equivoca, es normal, está dentro de la naturaleza humana el equivocarse. Tenemos que darle al usuario la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo.

Ejemplos:

• ¿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.
• Botón de deshacer.
• Dar la posibilidad de editar un perfil personal.

4. Consistencia y estándares

• Otro punto que tenemos que tener en cuenta es seguir los convenios establecidos para ciertos iconos.
• Con el auge de los dispositivos móviles han aparecido nuevos gestos e iconos que ya hemos asumido como normales.

Ejemplos:

• El menú hamburguesa: que indican el menú desplegable.Que quiero decir con esto, pues que si ahora vas a modificar tu web, lo más normal es que en la versión responsive implementes ese icono como menú desplegable y no inventes uno nuevo porque te parezca más bonito. Con ello 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.
• Los botones verdes los asociamos a aceptar una cosa, y los botones rojos a cancelar, ¿o no? 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 site.

5. Prevención de errores

“Prevenir mejor que curar”, seguro que te suena. Tenemos, en todo lo posible, que prevenir cualquier error que pueda cometer el usuario. Y dado el caso de que este cometa uno, tenemos que poner a su alcance todas las opciones posibles para poder corregirlo.

Ejemplos:

• La opción de autocompletar de Google es un buen ejemplo de este principio de usabilidad web.
• 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.
• 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

Siempre es mejor reconocer que obligar al usuario a memorizar acciones u objetos para que pueda cumplir su objetivo. ¡Ayuda al usuario a no memorizar!

Ejemplos:

Un editor de textos. 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

• 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.

Ejemplos:

•  el buscador de Google: 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. 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, distrae al usuario y puede llegar a molestar en la navegación.
• Si no hace falta no lo pongas.
• No recargues el diseño de tu sitio web.
• El usuario busca sites limpios y que carguen rápido.
• Elimina todo lo que consideres innecesario y que no aporta nada a lo que quieres decir.
• La mejor forma de recordar este principio básico de usabilidad web es con el acrónimo KISS, Keep It Simple Stupid.

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.
• La mayoría conocemos qué es un error 404, pero hay gente que no sabe lo que es.
• Es por esto, por lo que tenemos que cambiarlo para que en vez de que aparezca error 404, diga algo 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.
• 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

• Con estos principios se intenta siempre que el usuario no tenga que usar documentos de ayuda para poder navegar o utilizar una aplicación.
• 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.

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

Ya has visto que estos Principios de usabilidad de Jakob Nielsen son muy sencillos y seguro que utilizabas más de uno por sentido común. Ahora, ya entiendes el porqué de ellos y cómo puedes mejorar la experiencia del usuario de tu página web.