Análisis de usabilidad y accesibilidad de la web de Zalando

1. Introducción

En la era digital actual, el e-commerce se ha convertido en parte integral de nuestras vidas. Entre las numerosas plataformas de e-commerce disponibles, Zalando destaca como una de las más populares de Europa. Con una amplia gama de productos que abarca ropa, calzado y accesorios, Zalando se ha ganado la confianza de millones de clientes gracias a su interfaz fácil de usar y a un servicio de atención eficiente.

Sin embargo, como cualquier otra plataforma digital, la usabilidad y la accesibilidad de Zalando son aspectos cruciales que pueden determinar su éxito o su fracaso. La usabilidad de un sitio web es, en esencia, lo fácil que le resulta al usuario interactuar con él y lograr sus objetivos. La usabilidad se ha definido a partir de cinco componentes: facilidad de aprendizaje (lo sencillo que es realizar tareas básicas la primera vez), eficiencia (la rapidez para completar tareas una vez aprendido el sistema), memorabilidad (la facilidad para retomar el uso tras un periodo de inactividad), errores (la cantidad y gravedad de los errores cometidos, y la facilidad para recuperarse) y satisfacción (lo agradable que resulta el sistema). Jakob Nielsen, pionero en el campo de la usabilidad, estableció diez principios de diseño, conocidos a menudo como las “heurísticas de Nielsen”, muy usadas por los profesionales para evaluar y mejorar la usabilidad de un sistema o sitio web.

Por otro lado, la accesibilidad en el contexto de la web se refiere a la práctica de hacer que los sitios web sean usables por el mayor número posible de personas, independientemente de sus capacidades físicas o cognitivas. Esto puede incluir asegurar que una web sea legible para personas con discapacidad visual, ofrecer subtítulos para quienes tienen discapacidad auditiva, o diseñar interfaces fáciles de usar para personas con discapacidades motoras. Las Pautas de Accesibilidad para el Contenido Web (WCAG), desarrolladas por la Iniciativa de Accesibilidad Web (WAI) del World Wide Web Consortium (W3C), son un conjunto de recomendaciones que ofrecen un marco para hacer el contenido web más accesible para personas con discapacidad. Las WCAG están ampliamente reconocidas y adoptadas internacionalmente como el estándar de facto en accesibilidad web.

En este post realizaremos un análisis heurístico de Zalando basado en los principios de Nielsen para evaluar la usabilidad de la web. Además, usaremos las pautas WCAG para evaluar su accesibilidad. Nuestro objetivo es identificar los puntos fuertes y débiles de Zalando en términos de usabilidad y accesibilidad, y ofrecer recomendaciones para mejorar la experiencia de usuario. La tarea concreta que analizaremos es la compra de unas zapatillas negras y azules con descuento, un proceso que involucra varias etapas y puede revelar aspectos importantes de la usabilidad y accesibilidad del sitio.

2. Metodología y procedimiento

El análisis heurístico es una técnica de evaluación de usabilidad que consiste en examinar la interfaz de un sistema y compararla con un conjunto de principios de usabilidad (heurísticas). En nuestro caso, usaremos los diez principios de Nielsen como guía.

Aplicándolos a Zalando, evaluaremos aspectos como la visibilidad del estado del sistema, la correspondencia con el mundo real, el control del usuario, la consistencia, la prevención de errores, la facilidad de reconocimiento, la flexibilidad, el diseño minimalista, la ayuda para recuperarse de errores y la disponibilidad de ayuda y documentación. Estos principios nos permitirán determinar si Zalando ofrece una experiencia de usuario eficiente y satisfactoria.

Para evaluar la usabilidad de Zalando, nos centramos en la tarea de un usuario típico: comprar unas zapatillas negras y azules con descuento. Este proceso involucra varios pasos, incluyendo entrar en la web, seleccionar la categoría ‘Hombre’, acceder a la sección ‘Sale’, buscar ‘Zapatillas’, elegir el producto deseado y, finalmente, realizar la compra. Cada paso corresponde a una pantalla concreta de la web de Zalando, desde la home hasta el carrito. Este análisis nos permitirá evaluar la facilidad de uso de Zalando en un escenario de compra realista.

Por otro lado, los fallos identificados según cada heurística se evaluarán según su grado de severidad, siguiendo este ranking:

Finalmente, conviene señalar que el análisis heurístico no es una ciencia exacta, sino una técnica cualitativa que depende en gran medida de la experiencia y el criterio del evaluador. Aun así, siguiendo los principios de Nielsen, podemos obtener insights valiosos sobre la usabilidad de Zalando.

3. Resultados

A continuación presentamos los hallazgos más significativos de nuestro análisis, organizados por cada uno de los principios de Nielsen.

3.1 Visibilidad del estado del sistema

Esta heurística examina cómo el sistema ayuda e informa al usuario sobre todo lo que ocurre mediante un feedback adecuado (de dónde viene, dónde está y qué necesita hacer para completar cada tarea).

Zalando hace un buen trabajo manteniendo al usuario informado de lo que sucede. Por ejemplo, cuando el usuario añade un artículo al carrito, se muestra una notificación que confirma la acción. Sin embargo, se identificaron algunas áreas de mejora. En ciertos casos, la respuesta del sistema no es del todo predecible, como al filtrar o navegar entre secciones en la home.

Durante el proceso de compra, el sistema informa adecuadamente al usuario.

En este caso, al acceder a la sección Outlet, no queda claro por qué se ha seleccionado el filtro de “precio”. ¿Es el catálogo general con un filtro económico, o el catálogo de artículos con descuento con un filtro? Esto se clasifica como un problema de usabilidad menor (severidad 2).

En la esquina superior izquierda aparece la etiqueta de patrocinado. Sin embargo, no queda claro qué artículos se muestran como patrocinados. Si incluye a todos los de la pantalla, no hay distinción entre artículos patrocinados y no patrocinados. Este error se clasifica como un problema significativo y de alta prioridad (severidad 3).

Por otro lado, en esta imagen vemos que algunos artículos en oferta no muestran su precio rebajado. Este fallo se clasifica como un problema de usabilidad menor (severidad 2).

3.2 Correspondencia con el mundo real

Esta heurística analiza si la información aparece en un orden natural y lógico y si el sistema emplea un lenguaje similar al del usuario. Zalando usa un lenguaje familiar para el usuario. Sin embargo, se identificaron varios problemas:

3.2.1 Filtrado por color

Al usar el sistema de filtros de búsqueda para filtrar zapatillas por los colores negro y azul, el sistema no mostraba únicamente zapatillas negras y azules, sino todas las que incluían tonos de negro o azul. Es decir, las zapatillas mostradas tienen el negro y el azul como parte de su diseño, pero no necesariamente como colores predominantes. Por ejemplo, en la búsqueda anterior con azul y negro seleccionados como filtros, se muestra una zapatilla predominantemente blanca con detalles azules. Esto puede generar confusión y frustración en el usuario, ya que necesita dedicar más tiempo a buscar el producto deseado o le cuesta acotar la búsqueda estrictamente a zapatillas negras y azules.

Como se ve en la imagen, no hay forma de seleccionar solo zapatillas negras y azules. Al filtrar la búsqueda por ambos colores, aparecen todas las que contienen elementos de cualquiera de ellos. Este problema se clasifica como significativo y de alta prioridad (severidad 3).

3.2.2 Categorización y etiquetado de producto

Hay problemas con la categorización, y el etiquetado a veces es confuso. Por ejemplo, algunas categorías no son del todo intuitivas, como “zapatillas bajas”, que puede no quedar clara para el usuario. Por otro lado, varias sandalias están en la categoría de zapatillas deportivas, lo que puede causar confusión.

Chanclas de baño en la categoría de zapatillas deportivas (problema de severidad 2).

Aparece una subsección llamada “Looks seleccionados para ti” incluso si no estás registrado ni has hecho búsquedas previas en la web. Este fallo se clasifica como un problema de usabilidad menor (severidad 2).

En la categoría de zapatillas hay elementos que animan a buscar zapatillas, lo que puede causar confusión (problema de severidad 2).

El sistema asume que el usuario conoce la diferencia entre “zapatillas bajas” y “zapatillas altas” (problema de severidad 2).

En este caso, el significado de la categoría “Designer” puede resultar confuso (problema de severidad 2).

3.2.3. Estructura de navegación

Puede resultar confuso para el usuario determinar dónde buscar zapatillas en la web de Zalando. Por ejemplo, no está claro si debe ir a la sección “Zapatos” o “Deporte”.

3.3. Control y libertad del usuario

Esta heurística examina cómo el sistema da al usuario la capacidad de recuperarse de errores humanos. Zalando permite al usuario tener control sobre su interacción, dejándole realizar y deshacer acciones. El usuario puede añadir y quitar artículos del carrito en cualquier momento, y también filtrar y ordenar productos según sus preferencias.

3.4. Consistencia y estándares

Esta heurística analiza la consistencia interna del sistema, de modo que todo se comporte de forma coherente, siguiendo los estándares actuales (para facilitar la curva de aprendizaje del usuario). Zalando es, en general, consistente en su uso de colores, tipografías e imágenes, y sigue las convenciones de diseño web. Sin embargo, se encontró un exceso de contenido que genera confusión y puede dar al usuario sensación de agobio. Por ejemplo, en la home hay 17 bloques de títulos y subtítulos. Otro elemento confuso es que las CTAs (Call to Action) suelen ser muy pequeñas.

Esta selección de categorías ha cambiado respecto a las categorías mostradas en la home (problema de severidad 2).

Los subtítulos tienen un tamaño mayor que los títulos (problema de severidad 2).

El elemento “descubrir” es demasiado pequeño (problema de severidad 1).

La sección de ayuda en el footer de la home no muestra el sistema estándar de Preguntas Frecuentes (FAQ).

3.5. Prevención de errores

Esta heurística examina cómo el sistema anticipa los errores que el usuario puede cometer. Zalando hace un buen trabajo previniendo errores con validaciones de entrada de datos y confirmaciones antes de acciones críticas. Sin embargo, el sistema podría mejorar ofreciendo recomendaciones de búsqueda más relevantes.

3.6. Reconocer antes que recordar

Esta heurística se basa en la idea de que el usuario no debería tener que recordar y memorizar dónde está o qué tiene que hacer, sino reconocerlo con facilidad. Zalando minimiza la carga cognitiva del usuario haciendo visibles los objetos, acciones y opciones. Sin embargo, hay un exceso de carga cognitiva por la saturación de información en la home.

3.7. Flexibilidad y eficiencia de uso

Este principio analiza el grado en que la interfaz puede ser usada tanto por usuarios expertos como no expertos, y sugiere que el sistema debería permitir al usuario la flexibilidad de usar atajos y acelerar sus interacciones. Zalando ofrece una experiencia de usuario flexible y eficiente. El usuario puede buscar productos concretos con la barra de búsqueda en la parte superior de la página. Además, puede filtrar productos por categorías, marcas, tallas, precios y colores, lo que permite a los usuarios experimentados acelerar su proceso de compra. Sin embargo, la navegación puede resultar confusa en algunos casos. Por ejemplo, si un usuario busca zapatillas, puede no quedar claro si debe ir a la sección “zapatos” o “deporte”. Además, la diferencia entre “zapatillas” y “zapatillas deportivas” no está clara. Por último, la selección de zapatillas con descuento en negro y azul dio un total de 7.331 artículos, divididos en 88 páginas. La selección manual de cada página es laboriosa, y tanto la cantidad de páginas y artículos como la forma de navegar entre ellos requieren un esfuerzo excesivo (problema de severidad 4).

Hay un exceso de categorías nominales, con posibles inconsistencias: “zapatillas”, “zapatillas deportivas” (problema de severidad 3).

El sistema de filtrado es bastante preciso, ofreciendo varios tipos de puntera, por ejemplo. Sin embargo, nunca explica explícitamente qué implican esos tipos. Además, una vez seleccionados, las opciones disponibles son bastante menos, lo que sugiere que no todos los productos se han etiquetado de la misma forma (problema de severidad 2).

Al mostrar “zapatos” con descuento en negro y azul, aparecen un total de 7331 artículos.

Esos 7331 artículos se traducen en 88 páginas que el usuario debe revisar, una a una, para seleccionar su producto. Esto supone una carga cognitiva excesiva, y lo clasificamos como un problema de severidad 4.

3.8. Estética y diseño minimalista

Esta heurística examina si la información visual sigue un principio funcional y comunicativo más allá de la mera decoración, aportando un nivel extra de información que ayude al usuario a tomar decisiones adecuadas.

El diseño de la web de Zalando es, en general, limpio y minimalista, con colores, tipografías e imágenes usados de forma consistente en todo el sitio, ofreciendo una experiencia agradable y coherente. Sin embargo, se encontró que en ciertos casos el diseño puede ser excesivo y desviar al usuario de su objetivo principal.

El problema principal es el exceso de categorías. Por ejemplo, en la home se muestran 17 bloques con sus respectivos títulos y CTAs, cada uno con scroll horizontal. Una vez empiezas a buscar productos, la sensación general es que la web te muestra solo el 10% del contenido total que aloja, lo que puede resultar abrumador por la enorme cantidad de productos e información. La jerarquía de la información no se aprovecha del todo, lo que lleva a un bombardeo constante de información. Este exceso genera cierto ruido visual, a pesar de la cuidada estética, ya que hay una gran cantidad de artículos, cabeceras, bloques con varios colores, etc. Apenas hay espacios en blanco; casi todo el espacio está más o menos ocupado por información.

Además, se ha detectado una redundancia de algunos enlaces (por ejemplo, en la sección Outlet se muestra constantemente un componente llamado “Rebajas en Designer”).

Las etiquetas H1 están demasiado pegadas al texto que las sigue (problema de severidad 1).

Hay una carga cognitiva excesiva por la cantidad de categorías y elementos sugeridos por el sistema (problema de severidad 2).

Redundancia excesiva de algunos componentes (problema de severidad 3).

3.9 Ayudar al usuario a reconocer, diagnosticar y recuperarse de errores

Este principio se centra en señalar todos los problemas y sugerir soluciones constructivas al usuario, dejando claro no solo cuál es el error, sino cómo recuperarse de él.

Zalando ofrece mensajes de error claros que ayudan al usuario a reconocer, diagnosticar y recuperarse de errores, asegurando que reciba mensajes claros y útiles durante el proceso de compra para facilitar la resolución de problemas. Estos mensajes, expresados en un lenguaje claro y sencillo, indican el problema y sugieren una solución. Por ejemplo, si el usuario introduce una dirección de envío incorrecta, un artículo está agotado o realiza una búsqueda no reconocida, se ofrecen los mensajes de error adecuados.

3.10 Ayuda y documentación

Esta heurística examina si existe información sobre cómo realizar las tareas.

Zalando cuenta con una sección de preguntas frecuentes y ofrece asistencia al cliente para ayudar al usuario con cualquier problema que pueda encontrar. Esta sección está en el footer de la home. Además, Zalando ofrece otra información relevante, como guías de tallas o información sobre políticas de devolución.

4. Implicaciones y recomendaciones

Los hallazgos de nuestro análisis tienen varias implicaciones para la usabilidad general de la web de Zalando. Aunque Zalando cumple en buena medida con los principios heurísticos de Nielsen, hay áreas de mejora que, de abordarse, podrían potenciar aún más la usabilidad de la web y ofrecer una experiencia de usuario aún mejor.

En cuanto a la visibilidad del estado del sistema, Zalando podría mejorar ofreciendo un feedback más consistente y predecible al usuario. Por ejemplo, podría asegurar que los filtros funcionen de forma consistente y predecible, y que la navegación entre secciones de la home sea clara y fácil de entender. Además, algunos elementos como “Designer” podrían merecer una explicación.

Respecto a la correspondencia entre el sistema y el mundo real, Zalando podría revisar su sistema de categorización de producto para asegurar que sea intuitivo y consistente. Por ejemplo, una recomendación fundamental sería ofrecer opciones de filtrado que muestren solo los artículos con los colores seleccionados (como en el caso de las zapatillas negras y azules). En otros casos, creemos que el exceso de categorías podría reducirse fusionando algunas, ya que la categorización actual no es del todo operativa.

En cuanto al control y la libertad del usuario, Zalando podría revisar la estructura de su web para facilitar la navegación. Por ejemplo, podría simplificar su menú de navegación y asegurar que el usuario pueda moverse con facilidad entre las distintas secciones y páginas.

En cuanto a la consistencia y los estándares, Zalando podría reducir la cantidad de contenido en su home para evitar la sobrecarga de información y la confusión. Por ejemplo, podría limitar el número de bloques y scrolls de la home y asegurar que la información presentada sea relevante y útil para el usuario.

Respecto a la flexibilidad y la eficiencia de uso, creemos que es esencial sustituir el sistema de páginas por el de scroll, ya que el número de páginas de artículos que se muestra a menudo en cada búsqueda es completamente excesivo.

Por último, en cuanto a la estética y el diseño minimalista, Zalando podría revisar su diseño para asegurar que no sea excesivo y no desvíe al usuario de su objetivo principal. Por ejemplo, podría limitar el uso de banners y otros elementos de diseño que generan ruido visual.

5. Análisis de accesibilidad

Texto alternativo en imágenes

Las imágenes de Zalando contienen texto alternativo, esencial para los usuarios que dependen de lectores de pantalla.

Estructura y navegación de la página

La página tiene una estructura clara, con categorías y subcategorías bien definidas. Esto es útil para la navegación por teclado y la comprensión general de la página.

Contraste de color

Todos los contrastes de color están bien diseñados, lo cual es necesario para que los usuarios con problemas de visión puedan leer el contenido con facilidad.

Sin embargo, también se identificaron áreas de mejora potencial. Por ejemplo, se detectaron problemas con el uso de atributos ARIA que no están permitidos para el rol del elemento en cuestión. Para resolverlo, se sugiere eliminar o cambiar el atributo ARIA no permitido.

Además, se encontró que algunos botones de la página carecen de texto discernible. Esto puede ser un problema para los usuarios que dependen de lectores de pantalla, ya que no podrán entender la función del botón. Para resolverlo, se recomienda añadir texto visible al botón o usar el atributo aria-label para ofrecer una descripción del botón a los lectores de pantalla.

Por último, se identificó que algunas imágenes de la página carecen de texto alternativo o tienen un rol de “none” o “presentation”. El texto alternativo es crucial para los usuarios que usan lectores de pantalla, ya que ofrece una descripción de la imagen. Para resolverlo, se recomienda añadir un atributo alt a la imagen con una descripción adecuada, o asignarle un rol de “none” o “presentation” si la imagen es puramente decorativa.

6. Conclusiones

Nuestro análisis de la usabilidad de la web de Zalando ha puesto de relieve varias áreas clave de mejora. Estas implicaciones son las siguientes:

1. Visibilidad del estado del sistema: Zalando se beneficiaría de ofrecer un feedback más consistente y predecible al usuario, especialmente en cuanto a la funcionalidad de los filtros y la navegación entre secciones.

2. Correspondencia con el mundo real: se sugiere revisar el sistema de categorización de producto de Zalando para mejorar la intuitividad y la coherencia, incluyendo la incorporación de filtros de color y la fusión de categorías redundantes.

3. Control y libertad del usuario: se recomienda a Zalando revisar la estructura de su web para facilitar la navegación, simplificando el menú y mejorando el movimiento entre las distintas secciones y páginas.

4. Consistencia y estándares: Zalando podría reducir la cantidad de contenido en su home para evitar la sobrecarga de información, limitando el número de bloques y scrolls y asegurando que la información presentada sea relevante y útil.

5. Flexibilidad y eficiencia de uso: se sugiere que Zalando sustituya el sistema de paginación por el scroll infinito para resolver el número excesivo de páginas de artículos en cada búsqueda.

6. Estética y diseño minimalista: Zalando podría revisar su diseño para reducir el ruido visual, limitando el uso de elementos de diseño como los banners.

En cuanto a la accesibilidad, hemos verificado que las imágenes incluyen texto alternativo para lectores de pantalla; que la estructura de la página, con categorías bien definidas, favorece la navegación por teclado; y que el contraste de color en su diseño facilita la lectura a los usuarios con problemas de visión.

En conjunto, tanto la accesibilidad como la usabilidad de Zalando son bastante adecuadas. Nuestras recomendaciones se centran en las áreas donde la web podría mejorar aún más la usabilidad.