Diseño web: 10 principios de UX que hacen feliz al usuario

¿Qué es la usabilidad web?

La propuesta de Nielsen

1. Visibilidad del estado del sistema

A las personas les encanta mantener las cosas bajo control, es la forma en la que nos sentimos seguros. Por eso, hay que mantener al tanto a los usuarios sobre lo que está pasando en ese momento mediante un feedback adecuado después de cada interacción. Una señal visual, como el cambio de color del botón o un icono giratorio de carga, puede ayudar al usuario a comprender lo que está sucediendo y evitar otras interacciones innecesarias.

Un ejemplo muy común sería cuando un usuario hace clic en el botón de enviar de un formulario para, por ejemplo, suscribirse a la newsletter. Si no aparece un mensaje de confirmación explicando que la acción se ha completado correctamente es muy probable que el usuario vuelva a pulsar varias veces el mismo botón, esperando que «pase algo», lo que produce frustración, ya que no tiene claro si la página está fallando, si el problema es suyo porque no ha seguido los pasos correctos... Hay que evitar este tipo de situaciones a través de un diseño adecuado pensando en «¿qué espero que pase y qué está pasando en realidad?».

 

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

Las personas intuyen cómo podría funcionar el sistema en función de su experiencia previa con otros sistemas que similares. Al usar un lenguaje con el que están familiarizados, los usuarios tendrán más fácil superar la posible incomodidad inicial.

El lenguaje y los conceptos de nuestro día a día en el mundo real son grandes aliados. Por eso entendemos fácilmente que un icono de «papelera» sirve para eliminar archivos o utilizamos el del «carrito de compra» mientras compramos online. ¿A la hora de elegir una imagen que identifique el contacto telefónico de tu web qué es más útil, escoger el icono de un móvil o el de un teléfono candelabro del siglo XIX? Usar referentes cotidianos ayuda enormemente a asociar conceptos fácilmente.

3. Control y libertad del usuario

Es frecuente que los usuarios se equivoquen al interactuar con el sistema, por lo que es necesario ofrecer formas de subsanar el error de forma fácil y rápida. Puede ser algo tan simple como una flecha hacia atrás, como en un navegador, una papelera que nos protege de eliminaciones accidentales o el botón «deshacer», que permite al usuario revertir la última acción. Todos estos ejemplos hacen que los usuarios no se frustren cuando cometen un fallo y, en cambio, permiten que ellos mismos los corrijan.

Esto también es útil a la hora de mostrar el orden de las opciones, elegir los colores o hacer que resalten. Imagina que vendes cascos de moto personalizados y tienes una página donde el usuario puede elegir el color, acabado, dibujo... Si a los usuarios registrados les ofreces las opciones de «cerrar sesión y salir» y «guardar configuración y cerrar sesión» ¿en qué orden las mostrarías? ¿usarías un texto en rojo en la segunda opción?

4. Consistencia y estándares

La consistencia es uno de los mayores contribuyentes a la usabilidad. Un sistema comprensible nunca debe confundir a los usuarios al usar diferentes palabras, imágenes o acciones para los mismos conceptos. 

Además, nunca olvides que las personas pasan el 90 % de su tiempo interactuando con otras aplicaciones y plataformas, por lo tanto, utilizar lo que ya se ha establecido como estándares (icono de pulgar hacia arriba como aprobación o «me gusta», corazón como «producto favorito» ...) hacen que tu usuario se sienta más cómodo, ya que se encuentra con patrones que ya conoce y le hacen sentir cómodo.

5. Prevención de errores

La prevención de errores es otro de los aspectos clave. Está bien que podamos corregir fallos, pero evitarlos desde un inicio es mucho más satisfactorio. 

Si quieres minimizar las posibilidades de que ocurran, puedes utilizar restricciones que no permitan que un usuario establezca un valor incorrecto (por ejemplo, no permitas introducir letras en una casillas donde se debe introducir el número de teléfono) o sugerir las opciones más comunes para facilitar la elección (por ejemplo, en las opciones de la búsqueda, incluyendo los errores de escritura más comunes).

6. Reconocer antes que recordar

Una buena interfaz no requiere que el usuario recuerde con frecuencia. En cambio, ofrece todas las opciones e información necesarias para realizar una elección. Eliminar la carga mental y no obligar al usuario a «pensar demasiado» ayuda a que la navegación sea más sencilla y fluida.

Para eso, da pistas a los usuarios para recordar información y proporciona un icono junto al nombre de la función, usa un color específico para las funciones relacionadas o incluye en cada casilla de un formulario un ejemplo de la información a cubrir (como en «Introduce tu nombre, ej. Paco Pérez Prados»).

7. Flexibilidad y eficiencia de uso

Cada persona es única, por eso el diseño debe adaptarse tanto a usuarios con experiencia como sin ella. Por ejemplo, muestra en pantalla solo los elementos y comandos más relevantes y que el usuario medio utiliza y añade atajos invisibles que puedan acelerar la interacción para los usuarios más avanzados. De este modo el sistema satisface a ambos, ofreciendo las opciones que cada tipo necesita.

8. Diseño estético y minimalista

Un aspecto minimalista ayuda a acceder rápidamente a la información importante o al resultado que buscamos. No es necesario «mostrarlo todo» en todo momento, es mejor priorizar la información que se muestra en cada pantalla, ofreciendo únicamente la que es relevante en cada paso.

Esta es una buena manera de aumentar la legibilidad del contenido, resaltar las llamadas a la acción y crear un aspecto equilibrado y agradable. También el uso del color es importante. Utiliza solo los colores necesarios para respaldar la jerarquía visual, para eso, piensa en el propósito y el significado de cada color, y utilízalo con coherencia.

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

Cada mensaje de error debe ser lo más explícito y preciso posible, nadie quiere leer mensajes vagos como «error». Para poder solucionarlo, el usuario necesita entender el problema, por eso es básico indicar exactamente qué es lo que ha pasado en un lenguaje comprensible.

Proporciona consejos sobre qué hacer a continuación, cómo solucionarlo o dirigir al usuario al departamento de atención al cliente para que puedan ayudarle con la situación.

10. Ayuda y documentación

Aunque lo ideal es que el sistema pueda usarse sin recurrir a la documentación, nunca está de más proporcionar esta ayuda al visitante.

Incluir una sección de «preguntas frecuentes» es una buena idea, pero recuerda que esta información debe ser fácil de encontrar, estar enfocada al usuario, no utilizar tecnicismos que es posible que no conozca o comprenda y no ser demasiado extensa.