Para que una Web sea “user friendly” o lo que es lo mismo, que tenga un diseño centrado en el usuario para que este pueda navegar por la Web de forma fácil e intuitiva pudiendo alcanzar el objetivo concreto que venía a buscar al visitarla.
A estos principios se les llama también “Principios Heurísticos” porque están basados en reglas generales y no directrices específicas de usabilidad.
Jakob Nielsen, autoridad reconocida en el campo de la usabilidad web, propone diez principios básicos que toda Web debe cumplir:
- Visibilidad del estado del sistema
El sistema, ya sea una app, una web o cualquier otro producto digital, siempre debe informar al usuario del estado en el que se encuentra, dando una retroalineación al usuario de lo que está ocurriendo y ofrecerle una respuesta acorde en el menor tiempo posible.
De este modo, cualquier acción que realice el usuario tendrá que generar una respuesta perceptible en un tiempo corto. Como ejemplo de este principio tendríamos:
- Las barras de progreso cuando está cargando la apertura de una ventana nueva.
- La barra de progreso cuando se está procesando un pago online.
- Las migas de pan o Breadcrumbs que indican al usuario donde se encuentra en cada momento.
- Los mensajes de confirmación cuando el usuario rellena y envía un formulario.
- El cambio visual de los elementos cuando un usuario hace click en uno y pasa el cursor por encima.
- Los indicadores dentro de un proceso de compra que sitúan al usuario en qué parte del proceso de compra se encuentra y que le falta por completar para finalizar dicha compra.
- Relación entre el sistema y los usuarios del sistema
El sistema debe emplear un lenguaje al que los usuarios estén familiarizados, con una terminología que les sea habitual / conocida y legible. Así el usuario se sentirá cómodo al navegar por la web. Para conseguir esto, además será imprescindible el no dar la posibilidad de equivocarse al usuario a la hora de mostrarle un icono que no representa la función real que cumple.
- Consistencia y estándares
Toda web o app, debe mostrar un diseño que sea coherente con el resto de elementos. Esto quiere decir que, el lenguaje empleado debe ser coherente entre sí, los colores, la forma de navegación, los enlaces, los iconos, los campos de los formularios, la tipografía, el tamaño de la fuente de los títulos o los párrafos, los botones, etc.
- Control y libertad para el usuario
Ocurre muy habitualmente que el usuario por error pulsa un elemento que no quería y necesitará que le demos la opción de revertir dicha acción errónea. Así evitaremos su frustración. Para ello, debemos proporcionar botones o acciones que le permitan volver al estado anterior (Botón de cancelar, eliminar del carrito un producto que no quería añadir, un botón de retroceder, botón deshacer, etc).
- Flexibilidad y eficiencia de uso
Se deben proporcionar métodos que permitan interactuar tanto a los usuarios más experimentados como a los más novatos, a través de atajos de teclado que les permitan aprovechar de forma más rápida y eficiente el sistema sin importar los conocimientos del usuario.
Una forma de cumplir este principio es personalizando las acciones más frecuentes en el sistema, dotándolas de funcionalidades como son los atajos de teclado o los valores parametrizables dentro del buscador avanzado.
- Prevención de errores
Antes de que el usuario pueda caer en el error, el sistema debe prevenir las equivocaciones, ya que estas provocan frustración. Para cumplir este principio, toda plataforma web o app debe proporcionar información de ayuda útil en cada elemento que lo requiera. Algunos ejemplos de esto serían: los campos autocompletables en los formularios donde se pide la dirección de envío, avisos en los que deje en blanco algún campo obligatorio de formulario, campos de formularios que no admitan ciertos caracteres que puedan indicarlo al usuario, buscadores autopredictivos o autocompletes para que los usuarios no tengan que escribir toda la palabra y puedan así equivocarse al hacerlo, etc.
- Reconocer antes que recordar
El usuario no debería memorizar toda la información que generan los diferentes elementos y las diferentes acciones dentro del sistema, que recibió con anterioridad (ya sea en un momento cercano o lejano). Por este motivo, debemos ayudar al usuario a minimizar la información que tiene que recordar a través del uso de diversos elementos como pueden ser los objetos, acciones u opiniones.
Ejemplos sobre este principio son:
- Los botones de cancelar en color rojo.
- La barra de navegación en la parte superior y con el menú de hamburguesa (el icono con disposición horizontal de sus tres líneas paralelas) en móvil a la izquierda.
- La diferenciación de los títulos principales
- Mostrar los artículos que ha visto con anterioridad.
- Diseño estético y minimalista
Debemos mostrar unicamente aquellos elementos que aporten información importante al usuario y se deben evitar aquellos que generan ruido y que solo distraen, hacen perder tiempo al usuario y que además pueden distraerle del objetivo principal. Se deben por tanto evitar los diseños recargados, aquellos que tardan en cargar, con exceso de colores y animaciones.
- Reconocimiento, diagnostico y recuperación de errores
Hacer que todos los errores que pueda tener la web, se muestren a los usuarios en un lenguaje claro y entendible, donde se aclare el problema y se den las posibles opciones que tiene hasta que se resuelva. Por ello, se deben evitar los mensajes de error que indiquen únicamente: «Error 404», «Error34-x1″, Error 504», etc.
- Ayuda y documentación
Aunque lo ideal es que el usuario no necesite ayuda para navegar por la web o app, puede ser necesario ofrecerle cierto tipo de ayuda que no sea muy extensa y que se encuentre situada de forma fácil de localizar, donde se especifiquen brevemente y de forma clara los pasos a seguir. Ejemplos:
- Añadir un icono con el símbolo de interrogación en sitios donde se pueda requerir.
- El Chat en línea.
- Sección de preguntas frecuentes FAQs.
- Navegación guiada con lo básico y esencial en aplicaciones o programas y que se muestre nada más se instala o se abre por primera vez dicho sistema.
