Usabilidad Web: Los Principios de Jakob Nielsen
¿Sabías de la importancia de la usabilidad web para conseguir clientes y mantenerlos? En esta oportunidad, te contamos qué es y cuál es su utilidad.
Publicado el lunes, 05 de junio de 2023 a las 09:00
¿Qué es la usabilidad web y para qué sirve?
La usabilidad es la facilidad con la que las personas interactúan con una herramienta con el fin de alcanzar un objetivo concreto. Si un sitio web es fácil de utilizar, los usuarios tendrán una mejor experiencia y podrán alcanzar mejor los objetivos que persigue la web.
En sencillas palabras, la usabilidad web sirve para aumentar el tráfico recurrente y reducir el porcentaje de rebote, es decir, ampliar el tiempo de estancia del usuario y conseguir que navegue por las diferentes partes del sitio.
¿Cuáles son los principios de la usabilidad descritos por Jakob Nielsen?
Jakob Nielsen es un gurú de la usabilidad web reconocido en todo el mundo por sus teorías sobre el comportamiento del usuario y el uso que da a los sitios web. Sus principios de usabilidad son una serie de 10 ideales y fundamentos que permiten crear productos con un mayor grado de acogida entre los usuarios, ya que se basan en sus necesidades y en su comportamiento.
1. Visibilidad del estado del sistema
La web o aplicación debe mostrar en todo momento al usuario qué está pasando y en qué punto de la navegación se encuentra. Además, sería conveniente que ofrezca una respuesta en el menor tiempo posible.
Ejemplos:
- Barras de carga de las imágenes o de los procesos de descarga de archivos.
- Breadcrumbs que muestran al usuario en qué parte del sitio se encuentra.
- Mensajes de confirmación al enviar un formulario.
2. Adecuación entre el sistema y el mundo real
El sistema debe hablar en el mismo idioma que los usuarios. Debería utilizar palabras, frases y conceptos que les sean familiares y que puedan reconocer con facilidad.
La información tiene que mostrarse con un orden lógico y las imágenes o íconos tienen que ser claros, sin dar lugar a una equivocación. Con esto, se logra que la interacción con el lector sea natural.
Ejemplos:
- Botón de Buscar representado con una lupa.
- Término 404 por un mensaje como «Página no encontrada».
- Opción de borrar representada con una papelera.
3. Control y libertad del usuario
Los usuarios suelen realizar acciones por error. Siempre debería existir una posibilidad de revertir una acción no deseada y volver a un estado anterior. Es conveniente dar las opciones de «deshacer» y «rehacer».
Ejemplos:
- Dar la oportunidad de editar un perfil personal.
- Quitar elementos de un carrito de compras.
- Aplicar y borrar filtros al comprar productos.
- Deshacer una acción de guardado en Pinterest.
4. Consistencia y estándares
Considera seguir y repetir algunos patrones para no confundir a los usuarios. Cambiar ciertos elementos ya establecidos los obligaría a aprender algo nuevo, y esto debe evitarse.
Ejemplos:
- Mientras que los botones verdes se usan para aceptar, los botones rojos se emplean para cancelar. Nunca se nos ocurriría poner los colores al revés, porque el número de errores que se cometerían sería enorme.
- Si el menú de navegación lo tienes a la izquierda, no lo cambies dependiendo de las páginas. Son segundos los que el usuario tarda en encontrar el menú en otra parte, pero lo justo para ir empeorando la satisfacción con el sitio.
- No es recomendable que un botón que tiene una forma establecida cambie el diseño y la funcionalidad.
5. Prevención de errores
No esperes que los usuarios se equivoquen, agrega elementos que lo ayuden a prevenir los errores. Y, en caso de que cometan uno, tienes que poner a su alcance todas las opciones posibles para poder corregirlo.
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.
- Comprobar que la fecha de vuelta sea después de la fecha de ida al seleccionar un vuelo.
Hay que intentar en la medida de lo posible mostrar objetos, acciones y opciones para minimizar el uso de memoria del usuario. Las interfaces deben promover el reconocimiento y evitar que los usuarios memoricen las acciones o elementos al desplazarse por el sistema.
Ejemplos:
- Historial de reproducciones de YouTube.
- Pasarela de pagos que te muestra en qué paso de la compra te encuentras.
- Barra de progreso que señala en qué parte de un video o lección de un curso te has quedado.
- Breadcrumbs que indican al usuario en qué parte del sitio se encuentra.
7. Flexibilidad y eficiencia de uso
Si consigues que cualquier usuario pueda navegar por tu web o app, logras flexibilidad. La clave es la personalización tanto del contenido como de la funcionalidad para cada usuario. A veces hay que crear aceleradores o atajos para mejorar la usabilidad para los más expertos.
Ejemplos:
- El reingreso a la app de Spotify te muestra las playlists que escuchas con más frecuencia.
- El Play/Pause con la tecla espacio en reproductores de video o música.
- La configuración avanzada en la cuenta de Spotify.
8. Estética y diseño minimalista
Intenta simplificar, eliminar el contenido irrelevante para que el usuario se fije en lo realmente importante. Elimina todo lo que consideres innecesario y que no aporta nada a lo que quieres decir.
Los usuarios buscan sitios limpios y que carguen rápido. Cada elemento extra compite con la información relevante y disminuye su visibilidad.
Ejemplos:
- La página principal de Apple muestra solo los productos que desean destacar.
- El buscador de Google solo enseña un campo de texto y un par de botones, no todos sus servicios.
9. Ayudar a los usuarios a reconocer, diagnosticar y solucionar los errores
Los mensajes de error deben expresar con claridad cuál ha sido la causa del problema. Tienes que intentar que todos los errores que puedan ocurrir en la web o aplicación estén expresados en un lenguaje entendible por todos. Debes describir con precisión el problema y sugerir de forma constructiva una solución.
Ejemplos:
- Si inicias sesión en Facebook y colocas un dato erróneo, la app te explicará en qué puedes estar fallando.
- Cuando existen productos agotados, se muestra un mensaje para indicar cuándo se reabastecerá el producto. Además, tienes la opción de ser notificado cuando el producto esté disponible de nuevo.
10. Ayuda y documentación
Lo ideal es que un sistema no necesite ninguna explicación adicional. Pero, en algunos casos, se debe proporcionar una documentación para ayudar a los usuarios a entender cómo completar sus tareas. Esta ayuda debe ser fácil de localizar, definir los pasos con claridad y no ser muy extensa.
Ejemplos:
- FAQs (Frequently Asked Questions) o preguntas frecuentes.
- Minitours nada más abrir una aplicación donde se muestra lo esencial.
- Chats de ayuda o chatbots.
- Tutorial o guías para herramientas web.
- Tooltips sobre cada ícono para brindar información sobre ellos.
Si quieres conseguir el éxito de tu web o aplicación es clave que trabajes la usabilidad web. Ten en cuenta estos principios para revisar o crear tu producto y dejarlo del modo que tus usuarios esperan.