Análisis Heurístico de la tienda online de Head Banger (rare guitars)

Se trata de revisar si el sitio headbangerstore.com cumple con los 10 principios básicos de usabilidad web establecidos por Jakob Nielsen.

El resultado podemos verlo en este canvas:

Pero voy a pasar a analizarlo con algo más de detalle.

1.- Estado del sistema: GOOD

El sistema siempre debe mantener a los usuarios informados sobre lo que está pasando, a través de una retroalimentación apropiada en un tiempo razonable. Feedback constante.

Incluye un sistema de bread crumbs, que permite saber donde te encuentras en cada momento y poder volver sobre los pasos dados.

Cuando incluyes un artículo en el carrito de la compra, aparece un spinner sobre el botón, para indicar que el artículo se está añadiendo.

Spinner sobre el botón AÑADIR AL CARRITO

Y cuando el artículo ya está en el carrito, aparece desplegada una ventana modal con el artículo añadido.

2.- Hablar el lenguaje del usuario: BAD

El sistema debe hablar el lenguaje de los usuarios, en lugar de usar términos orientados al sistema. Debe seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico. Usar palabras, frases y conceptos familiares para el usuario.

Utiliza un lenguaje muy estándar de ecommerce. Quizás hubiera estado bien usar un lenguaje mas guitarrero/rockero, para conectar mejor con el usuario. La temática de la web y el usuario te permite este tipo de licencias.

Por ejemplo, en vez de usar la leyenda del botón “AÑADIR AL CARRITO”, se podría haber usado algún microcopy del tipo “LO QUIERO”, “ME LO LLEVO”, o algo más macarra como “PA LA SACA”.

Y aunque todos los guitarristas que acuden a este sitio no son rockeros, el nombre del sitio “Head Bangers”, claramente evoca a un público más “duro”.

“No puedes añadir esa cantidad al carrito…” ¿No te parece demasiado serio y poco empático con el usuario?

3.- Control y libertad del usuario: GOOD

Los usuarios deben sentir que tienen el control en todo momento. El usuario debe poder navegar libremente, encontrar fácilmente salidas, y rutas alternativas. Libertad para deshacer — Libertad para explorar — Libertad para interrumpir (posibilidad de deshacer un envío, de customizar la aplicación según las necesidades…).

El usuario puede navegar libremente por toda la web, incluso durante todo el proceso de compra puede salir de él en cualquier momento, o eliminar artículos del carrito cuando lo desee.

4.- Consistencia y estándares: GOOD

Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Se debe seguir un estándar y ser consistentes con las decisiones que tomamos a lo largo de toda la plataforma.

El sitio muestra consistencia en botones, cajas de info, fichas de producto y resto de elementos. Aunque me gustaría hacer un pequeño inciso, dentro de la Home, en la sección Headbanger, aparecen unos iconos con una falsa affordance de botones, que luego no lo son.

¿También te parecen botones, o es cosa mía?

5.- Prevenir errores: BAD

Mejor que comunicar correctamente un error, es ayudar a los usuarios a no cometer errores. La mayoría de los errores son previsibles. Prevenir pérdida de datos, errores en el ingreso de datos, salidas de un flujo.

El rellenado de datos en el carrito de la compra sólo detecta el correo electrónico como que no tiene el formato adecuado, en el resto de campos: teléfono, ciudad, código postal puedes poner cualquier cosa, que te dejará registrarte e incluso comprar. Por lo cuál no previene correctamente la pérdida de datos, o errores de ingreso de datos.

Al introducir cualquier dato, sólo marca el campo de correo electrónico como erróneo

6.- Aliviar la carga en la memoria del usuario: GOOD

Haciendo visible objetos, acciones y opciones. El usuario no debería tener que recordar información de una parte a otra. Las instrucciones de uso del sistema deberían ser visibles o fácilmente accesibles cuándo sea necesario.

El carrito de la compra siempre está accesible para, colocando el cursor sobre él, mostrar todos los artículos que se han ido añadiendo, desde cualquier pantalla y en cualquier momento.

Ventana modal del carrito siempre visible al colocar el cursor sobre su icono

7.- Flexibilidad y eficiencia de uso: GOOD

Aceleradores, no vistos por el usuario principiante, a menudo pueden acelerar la interacción para el usuario experto de tal manera que el sistema puede servir tanto a los usuarios sin experiencia, como con experiencia. Aceleradores, atajos de teclado y Recomendaciones.

El buscador cuenta con sugerencias de búsquedas que van apareciendo según vas ingresando caracteres en el buscador, con lo cuál facilita y acelera la experiencia de uso.

Según vas tecleando en el campo de búsquedas, aparecen distintas sugerencias

8.- Estética y minimalismo: GOOD

Eliminar el ruido visual. Jerarquizar la información. Eliminar información irrelevante o que no suele utilizarse.

La información está bien jerarquizada, ordenada, clara y accesible. No hay ruido visual y no se detecta datos irrelevantes.

9.- Comunicar errores con claridad: BAD

Que sean fáciles de reconocer visualmente. Explicar el problema con claridad. Proveer una solución o camino a seguir. Proponer una alternativa.

El error 404 de página no encontrada, es muy estándar, incluso se muestra en inglés cuando todo el sitio está en español. Parece que han usado el que viene por defecto en la plantilla de diseño utilizada. Aunque en su favor se puede decir que por lo menos han incluido una caja de búsquedas para seguir buscando otros productos.

El sitio da juego para poder haber creado una página de error mucho más “atractiva/creativa”, donde se ofreciera un guiño al usuario. Una excelente oportunidad para conectar emocionalmente con el usuario, que ha sido desperdiciada.

10.- Ayuda y documentación: BAD

El usuario necesitará en ocasiones, ayuda y documentación. Es preciso que sea fácil de encontrar y, preferentemente, que esté orientada a tareas concretas. Necesidad de aprendizaje — Soporte — Tour en pantalla.

No cuenta con un apartado de ayuda, tan sólo un formulario de contacto en la página de Contacto. Ni siquiera hay una ayuda en el carrito de la compra, donde sería interesante poder resolver cualquier duda de un posible comprador durante este proceso.

Y eso es todo amigos…

Sólo decir que tienen verdaderas joyitas. Long Live RnR!!!

UX/UI Designer + Brand Strategy • luispascual.es

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store