La plataforma que será analizada en este post, será la tienda de Adidas Colombia. Esta plataforma, es la tienda oficial de la marca y cuenta con el catálogo completo de productos disponibles, de manera que los usuarios pueden buscar, visualizar y comprar los productos, adicionalmente de poder gestionar su perfil de Adiclub y hacer uso de los puntos que suman en este plan de lealtad.

Para evaluar su usabilidad, se hará uso de los 10 principios heurísticos de Nielsen, buscando en cada uno de los principios, una práctica que sea mejorable dentro del portal web. De esta manera, se toma cada principio y se hace una búsqueda de en qué partes o interacciones se puede aplicar, y se analiza si se está aplicando de manera correcta o si se puede implementar de mejor manera.

Como resultado, a continuación se presenta el análisis de los 10 principios heurísticos, mostrando una propuesta de mejora en aquellos en los que se ha encontrado una práctica mejorable:

1. Visibilidad del estado del sistema:

Revisando el portal de Adidas, la práctica que se ha notado que es más mejorable en relación con esta heurística, es el uso de los estados Hover. Los estados de Hover se usan para marcar elementos que son clicables, y consisten en que el elemento sea modificado cuando el cursor pasa por encima. 

En el caso de esta interfaz, si bien los elementos clicables hacen uso del hover, este no es evidente, ya que solo se representa por una linea negra delgada alrededor del elemento. Se propone añadir movimiento a las fotografías de los elementos clicables, como lo puede ser un ligero zoom, así como un cambio de color en el fondo del elemento.

2. Coincidencia entre el sistema y el mundo real:

En general, es bueno el uso de elementos que se relacionan con el mundo real. Sin embargo, al entrar a detalle un elemento que potencialmente puede ser confuso, es el uso de la ilustración de una bolsa para representar el carrito de compras. Si bien se entiende la relación, se propone que se haga el uso de la ilustración de un carrito de compras para mantener la consistencia.

3. Control y libertad del usuario:

Siguiendo con el carrito de compras, se notó que cuando una persona agrega elementos al carrito de compras, no puede deshacer la acción de manera inmediata, sino que debe cerrar la modal informativa, acceder al carrito, y después eliminar el elemento que agregó.

Se propone como una mucho mejor práctica, dejar un CTA en la modal de confirmación, que permita deshacer la acción, ya que puede ser un error común agregar un item en el color o la talla equivocada y de la manera en la que se plantea actualmente, se limita excesivamente al usuario en la corrección del error.

4. Consistencia y estándares:

Ninguna interfaz es completamente perfecta, pero la consistencia mostró ser uno de los puntos fuertes de la web de Adidas. Las secciones mantienen siempre un mismo orden, y los productos se presentan de la misma hora, ayudando así al usuario en su navegación y entendimiento de los elementos.

5. Prevención de errores:

En línea con la mala práctica encontrada en la heurística de control y libertad de usuario, se notó desde la perspectiva de esta heurística, que no se previene el error al añadir elementos al carrito de compra. La modal informativa que aparece al clicar el CTA de añadir al carrito solo muestra que se añadió el producto al carrito, pero no permite al usuario confirmar si desea o no llevar a cabo la acción. La propuesta de mejora se alínea con la propuesta de la tercera heurística, destacando la importancia de añadir un CTA de cancelación en la modal de confirmación.

6. Reconocimiento en lugar de recordación:

Este es otro de los puntos fuertes en el diseño de la interfaz de la tienda de Adidas. Todos los productos cuentan con un set de fotografías que le permiten al usuario saber cómo se ve el mismo. De esta manera, el usuario no depende solamente en información como el nombre o referencia del item para poder identificarlo.

7. Flexibilidad y eficiencia de uso:

En general se observo que se aplican buenas prácticas con respecto a este principio. Las opciones principales, que son las relacionadas a la compra de productos a través de la plataforma, están a primer nivel, mientras que otras opciones de configuración, como la gestión de información personal o personalización de las preferencias dentro del sitio web, se dejan a segundo nivel.

8. Diseño estético y minimalista:

En general la imagen corporativa de Adidas ayuda a que la interfaz mantenga el minimalismo. Sin embargo, los banners comerciales rompen con este principio, ya que de manera intencionada cubren grandes partes de la pantalla para priorizar la información de promociones, ofertas y nuevos lanzamientos. Si bien es entendible que a nivel de negocio sea importante priorizar esa información, se recomienda que estos banners no afecten la navegación del sitio con un tamaño excesivo, como se puede apreciar en este ejemplo, en el que prácticamente se saca el catálogo de pantalla para poder dar lugar a un baner de black friday.

9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores:

Si bien se suele cumplir con la práctica de mostrar al usuario cuando se comete un error, el diagnóstico o identificación no siempre es eficiente. A continuación se muestran dos casos en los que los copies usados para mostrar al usuario el error no son adecuados. En el primero, el usuario ingresa un código de confirmación erroneo, pero el copy de error, no presenta una acción recomendada al usuario, ni retroalimenta al usuario acerca del posible error.

En el otro ejemplo se aprecia que el usuario no llena uno de los campos obligatorios en un formulario, pero el mensaje de error solicita una acción que parece no coincidir con el input que resalta como el responsable del error.

La recomendación en este caso, es hacer una revisión de los copies de error, de manera que se asegure que los copies describan de manera correcta el error y propongan una acción posterior. Por ejemplo, para el primer caso el copy podría ser «El código que ingresaste no es correcto. Por favor, intenta con otro código».

10. Ayuda y documentación:

Toda  la información del sitio web está apoyada por información de interés que el usuario puede consultar. Por esto se considera que es una práctica que se ejerce correctamente de manera consistente.

Ranking de priorización

Posterior al análisis que se realizó, se procedió a enlistar los 5 errores más graves de la interfaz:

1. No confirmar agregar un artículo al carrito de compra (H3 y H5): Esta práctica va en contra de 2 prinicipios heurísticos. De todos los errores encontrados, es el que genera más reprocesos e incomoda de mayor manera en los flujos que realice el usuario.
2. Problemas en los copies de los mensajes de error (H9): Los mensajes de error son fundamentales para guiar al usuario en su experiencia y permitirle corregir inputs con erratas. Sin embargo, el usuario con algo de comprensión puede interpretar cómo corregir el error, por lo que este error no se coloca en el primer lugar del top.
3. Banners con tamaño excesivo (H8): Esta práctica se lleva el tercer lugar del ranking porque afecta de manera negativa la navegación y exploración de los artículos. Si bien es importante resaltar la información promocional, el tamaño excesivo de los baners está siendo contraproducente y llega a ocultar los artículos que tanto se busca vender al usuario.
4. Estado de hover poco visible (H1): Si bien es una práctica mejorable, los usuarios por intuición pueden identificar que clicar los artículos los lleva al detalle de los mismos, e igualmente el estado hover no es inexistente.
5. Icono incorrecto para el carrito de compras (H2): Esta práctica es solo un detalle de inconsistencia. No obstante, no se considera que pueda tener impacto en la navegación.