Introducción:

En esta evaluación heurística analizo la interfaz web de la tienda online de moda Zalando.  Esta plataforma ha sido elegida debido a que presenta muchos recorridos y muchas variables de interacción en una misma página. Sus múltiples herramientas e innovaciones la hacen interesante para analizar tanto lo que funciona, como lo que no.  Además, es una tienda bastante reconocida y muy utilizada en varios países europeos, por lo que analizarla supone un aprendizaje muy nutritivo y ofrece la oportunidad de sugerir mejoras que tendrían gran impacto positivo en una gran extensión de usuarios.

El objetivo de este análisis es la adquisición de experiencia y conocimiento práctico sobre la usabilidad, dentro del marco de objetivos de la asignatura de Evaluación de la usabilidad.

 

Metodología:

Para este análisis utilizo las heurísticas de Jakob Nielsen, exponiendo un ejemplo de buena práctica, como un ejemplo de mala práctica por cada principio, acompañado de un gif o captura de pantalla que lo ilustra. La observación de campo se ha llevado a cabo analizando tanto datos cualitativos como cuantitativos, mediante los numerosos recorridos que incluye la página, prestando atención a cada detalle de la interacción. Finalmente, exponemos la matriz de gravedad, en la que analizamos los casos según su importancia. Finalmente, exponemos propuestas de mejora para cada mala práctica presentada.

 

Evaluación Heurística según los diez principios de Nielsen:

 

Consistencia y Estándares

 

• • Elemento de la interfaz: Página de inicio para un nuevo usuario

  • Ejemplo de aplicación: Mala práctica ✘

Esta página de inicio muestra una mala práctica del principio de consistencia y estándares, dado que en una página de primer contacto, el nuevo usuario se encuentra con una distribución de interfaz que puede llevarle fácilmente a la confusión y resulta inconsistente: el elemento más destacado y de mayor peso visual es la sección de tendencias de Zalando, que deja casi fuera del campo de interés a la barra de búsqueda, o el menú principal de los productos ofrecidos, que son los elementos que realmente serían reconocidos como familiares por el usuario, y le ayudarían a establecer una base consistente para su aprendizaje sobre la nueva interfaz.

 

 

• • Elemento de la interfaz: Menú principal y sus categorías de productos

  • Ejemplo de aplicación: Buena práctica  ✔

El menú desplegable y la clasificación principal de los productos cumple muy bien con el principio de consistencia y estándares, ya que expone, de forma muy organizada, la clasificación de los productos, que resulta coherente con las categorías de productos del desplegable, y cuyo modelo mental de categorías  es bien reconocido entre los usuarios de tiendas online, y resulta lógico y coherente.

 

Adecuación entre el sistema y el mundo real

 

• • Elemento de la interfaz: Icono de cesta de la compra

  • Ejemplo de aplicación: Mala práctica ✘

La utilización del icono del bolso en vez del de la cesta de la compra puede resultar confuso a algunos por dos cuestiones: En un primer lugar, en cuanto a su función, ya que el usuario está más acostumbrado a ver un icono de cesta de la compra. Y en segundo lugar, aunque el usuario descubrirá que el bolso es la cesta de la compra cuando añada artículos, puede resultarle algo incoherente si no identifica la utilización de un bolso con su propio estilo. Y aunque probablemente Zalando ha intentado plasmar una bolsa de la compra con este icono, en su estado de «cesta llena» resulta especialmente similar a un bolso personal. Por la ambigüedad que pueda despertar este icono, lo considero una mala práctica de la adecuación al sistema y el mundo real.

 

 

• • Elemento de la interfaz: Icono de la cuenta personal

  • Ejemplo de aplicación: Buena práctica  ✔

El icono de cuenta personal se simboliza con un busto minimalista, como se suele hacer en la mayoría de las aplicaciones que incluyen cuenta personal. Por ello, aunque el icono esté personalizado, se asimila casi de forma automática a su función y su familiaridad despierta confianza en el usuario.

 

 

Visibilidad del estado del sistema

 

• • Elemento de la interfaz: Sistema de eliminación de filtros

  • Ejemplo de aplicación: Mala práctica ✘

Cuando estamos dentro de la búsqueda de una categoría de productos específica, y hemos aplicado una serie de filtros, resulta muy difícil eliminar dichos filtros de forma efectiva: Al pulsar en el botón de «Borrar», el sistema se queda colgado durante un instante. Hay un punto muerto y ningún elemento del menú desplegable parece funcionar. No es hasta que el usuario pulsa fuera de la casilla que se da cuenta de que el filtro ya ha sido eliminado.

 

• • Elemento de la interfaz: Añadido de un producto nuevo a la cesta

  • Ejemplo de aplicación: Buena práctica  ✔

Esta es una buena práctica del principio de visibilidad del estado del sistema, dado que nada más pulsar en el botón de «añadir al carrito» que aparece en los detalles de cada artículo, se despliega un menú con nuestros productos en la cesta de la compra, indicándonos todos los artículos presentes, incluyendo también el que acabamos de añadir. A parte, nos aparece un pequeño sub-icono encima de la cesta, que nos indica tanto la presencia de artículos en la misma como el número.

 

 

Control y libertad del usuario

 

• • Elemento de la interfaz: Redirección de algunos botones del menú principal

  • Ejemplo de aplicación: Mala práctica ✘

Aquí se muestra una mala práctica del principio de control y libertad del usuario, ya que, en el momento de escoger algunas de las categorías principales del menú superior, se enciende un artículo de prensa Zalando relacionado con el tema de la categoría elegida, pero que el usuario no buscaba encontrar, ya que al pulsar, por ejemplo «Deportes», lo que deseaba es entrar en la búsqueda de los productos de esta categoría, no leer un artículo de moda. En este punto se quebranta el control y  la libertad del usuario.

 

 

• • Elemento de la interfaz: Transacción del pedido

  • Ejemplo de aplicación: Buena práctica  ✔

El proceso de compra en Zalando sigue de forma idónea el principio de control y libertad del usuario. Mediante la barra superior, el usuario tiene la total libertad de elegir volver a cualquiera de los puntos anteriores de la transacción si se ha equivocado o cambia de opinión. El envío tanto como la forma de pago ofrecen numerosas alternativas entre las que el usuario puede decidir. Además, abajo del todo aparece el botón de «Volver a la tienda», que permite que el usuario pueda salir del proceso de compra y volver a la página principal en cualquier momento que lo desee.

 

 

Prevención de errores

 

• • Elemento de la interfaz: Carrito de compra: eliminación de artículos

  • Ejemplo de aplicación: Mala práctica ✘

Cuando hemos añadido varias unidades de un mismo artículo al carrito sin darnos cuenta, y queremos eliminarlo en la barra deslizable de la cesta, no existe opción alguna que nos permita elegir entre eliminar todas las unidades de un mismo artículo, o cambiar el número de unidades. Como resultado, quien desee eliminar todas las unidades, pero tenga que hacerlo una a una; se ve obligado a pulsar en la cruz de eliminación por cada unidad que desea suprimir de un mismo artículo. Y como las letras que indican las unidades que hemos comprado son realmente pequeñas, se puede llegar fácilmente a la confusión de dejar en el carrito productos indeseados.

 

 

• • Elemento de la interfaz: Transacción del pedido

  • Ejemplo de aplicación: Buena práctica  ✔

Las indicaciones durante la transacción del pedido aplican muy bien el principio de prevención de errores, dado que la buena estructuración y fácil diseño que presentan, visualizan en todo momento en qué fase de la compra nos encontramos. Se nos resume todos los detalles de cada paso de la compra de forma clara, y además, se ofrece un botón de «¿Necesitas ayuda?» en la parte inferior. Por lo que, se minimaliza la posibilidad de equivocación por parte del usuario al máximo.

 

 

Reconocimiento antes que recuerdo

 

• • Elemento de la interfaz: Filtros de búsqueda de una sección de artículos

  • Ejemplo de aplicación: Mala práctica ✘

Los filtros de búsqueda de Zalando que aparecen en muchas de las secciones de artículos, no cumplen de forma adecuada el principio de reconocimiento antes que recuerdo, ya que disponen un gran número de opciones, que sobrepasan claramente los límites de agrupación asimilables por el usuario, para que éste pueda recordarlas, (4+/-1, o 7+/-2). A parte, una vez que elegimos el filtro, nos aparecen indicadas solamente con una notificación encima de la categoría de filtro a la que corresponden, pero sin mostrarnos qué variable hemos escogido hasta que pulsamos en la categoría. De esta forma, si hemos aplicado muchos filtros en una compra, puede resultar confuso tener que memorizar y acordarse de los filtros aplicados cada vez, a parte de la confusión de por sí que ya implica la existencia de tantos filtros, a cuya complejidad no suele estar acostumbrado el usuario.

 

• • Elemento de la interfaz: Categoría de «Ropa» del menú principal

  • Ejemplo de aplicación: Buena práctica  ✔

La sección de ropa de Zalando, una de las opciones accesibles desde el menú principal, nos enseña un submenú con categorías de artículos muy bien reconocidas por los usuarios, y que se asemejan tanto a las secciones de textil en una tienda de ropa física, como en otra tienda digital. De este modo, el usuario navega de forma mucha mas funcional, ya que tiene bien asimilado este modelo mental.

 

 

Flexibilidad y eficiencia de uso:

 

• • Elemento de la interfaz: Subcategorías de artículos

  • Ejemplo de aplicación: Mala práctica ✘

Las subcategorías de búsqueda de artículos en Zalando resultan demasiado complejas a nivel organizativo para un usuario menos experimentado. La gran cantidad de información a recordar puede resultarle abrumante, especialmente si no comprende muy bien el funcionamiento de menús desplegables que se excluyen entre sí. Y más aún teniendo en cuenta que este tipo de menús aparecen en esta sección de forma oculta, ya que no existen ningún tipo de gráficos que nos ayuden a comprender qué categorías tienen otras subcategorías, y cuáles nos llevan a una sección de productos directamente. En estas condiciones, el usuario puede abandonar el proceso de búsqueda aún estando interesado por los productos.

 

 

• • Elemento de la interfaz: Sección de artículos del menú principal

  • Ejemplo de aplicación: Buena práctica  ✔

El menú principal de búsqueda de artículos de Zalando está muy bien adaptado a diversos tipos de públicos según su conocimiento de la tecnología. Al deslizar el cursos sobre cada categoría principal, se despliega un menú con categorías más complejas a la izquierda. Este apartado está hecho para un público más experimentado. En cambio, a la derecha, coincidiendo con la regla de la dirección visual de más peso, se colocan elementos muy llamativos y visuales, que facilitan al usuario poco experimentado a dirigirse hacia ellos. Ahí se encuentra con un buscador de artículos por palabras, indicado por una lupa y el texto «Busca aquí», y una ilustración llamativa debajo a modo de botón, que incluye el texto «Descubre más», que asegura que el usuario primerizo en tecnología no se vea abrumado por tantas opciones a la izquierda, y en vez de ello, pueda optar por entrar directamente en la categoría o buscar el artículo deseado introduciendo alguna palabra clave en el buscador..

 

 

Diseño estético y minimalista:

 

• • Elemento de la interfaz: Los artículos de moda, tendencias y redes sociales en toda la plataforma

  • Ejemplo de aplicación: Mala práctica ✘

Aunque Zalando tiene un claro objetivo de crear y marcar tendencia dentro del mundo de la moda, la saturación de elementos con este fin en su plataforma resulta muy molesto al usuario común. Cada acción de búsqueda de artículos que se realiza, viene acompañada de algún anuncio o artículo sobre tendencias en el mundo de la moda o en las redes sociales, Este elemento puede resultar realmente confuso para los usuarios no experimentados, y puede incluso, desviar la atención de un objetivo de compra, ya que su saturación dificulta en gran medida la navegación por la interfaz.

 

 

• • Elemento de la interfaz: Sección informativa de pie de página

  • Ejemplo de aplicación: Buena práctica  ✔

Esta sección informativa aparece en el pie de todas las páginas de la interfaz. Tiene un diseño muy simple, reducido a lo esencial, sin distracciones y reducido exclusivamente a su uso práctico; pero a su vez resulta estético y actualizado, dentro de las tendencias de diseño web actuales, y encajando con el diseño de la marca Zalando.

 

 

Ayuda en la identificación y solución de errores:

 

• • Elemento de la interfaz: Cierre de cuenta personal por error

  • Ejemplo de aplicación: Mala práctica ✘

Al desplegar el menú de la cuenta personal, se puede pulsar por error el botón de abajo del todo: «¿No eres ..? Desconectar», que sirve para cerrar sesión, ya que este botón se encuentra muy cercano al de «Ayuda y contacto». Ante este error, el usuario debería tener una oportunidad en la que volver a confirmar si está seguro de que desea cerrar su sesión. Mientras tanto, lo único que sucede al pulsar «¿No eres…? Desconectar», es que la cuenta personal se desconecta automáticamente, llevando al usuario de nuevo a la página inicial, sin incluir ninguna notificación de que su cuenta ha sido desconectada. Por lo que, si la cuenta se desconecta en un momento de despiste, el cambio de la página con cuenta a la página sin cuenta puede incluso pasar por desapercibido y resultar en confusión, si se procede con pasos que requieren la identificación personal en la página.

 

• • Elemento de la interfaz: Ventana de formas de pago

  • Ejemplo de aplicación: Buena práctica  ✔

La interfaz web de Zalando ofrece una magnífica ayuda en la identificación y solución de errores en la transacción de la compra. En este caso, apreciamos cómo se aplica en la ventana de formas de pago. Si nos equivocamos en algunos pasos, a parte de no dejarnos seguir, los campos rellenados erróneamente se iluminan de rojo, especificándonos en una ventanilla roja de forma clara el elemento que hemos introducido mal, o que nos hemos olvidado de introducir. De esta forma, somos redirigidos con facilidad hacia la solución.

 

 

Proporciona ayuda y documentación:

 

• • Elemento de la interfaz: Falta de documentación para el manejo de la interfaz

  • Ejemplo de aplicación: Mala práctica ✘

Este punto es muy negativo para la buena comprensión de la página por el usuario. No aparece en ningún punto clave donde los apartados de ayuda general suelen aparecer, y donde el usuario normalmente los buscaría. No está ni en el menú principal superior ni en el informativo, inferior. Si bien se incluye una sección de ayuda en las transacciones de la cuenta personal, no se presta atención alguna a ayudar al usuario ante las dificultades que puedan surgir a la hora de interaccionar con la interfaz.

 

 

• • Elemento de la interfaz: Indicaciones de ayuda para la navegación

  • Ejemplo de aplicación: Buena práctica  ✔

Este tipo de indicaciones, que aparecen a lo largo de toda la aplicación, cumplen muy bien con el principio de ayuda y documentación. Destacaríamos: las indicaciones de presencia de productos en la cesta de compra o en favoritos, la barra de búsqueda con el texto «Busca aquí», el botón de «Volver arriba» que aparece a medida que deslizamos la página hacia abajo, los botones de «Mujer/Hombre/Niños», que nos acompañan en todas las páginas de la interfaz y nos permiten cambiar la plataforma según sus tres apartados principales; o las indicaciones «Descubrir» a modo de hipervínculo, que nos muestran que el anuncio que estamos viendo es interactivo y lo podemos pulsar. Todas ellas sirven de gran ayuda, sobre todo al usuario primerizo que puede verse desorientado por la fuerza gráfica de la interfaz.

 

Matriz de gravedad y propuesta de soluciones:

La siguiente matriz de gravedad establece la severidad de los problemas detectados según tres parámetros:

• El impacto de la problemática en la experiencia del usuario.
• La frecuencia con la que se repite el problema.
• La facilidad de detección del problema por el usuario. (Cuanto más fácil resulta detectarlo, más grave es el problema, dado que implica conciencia y posible frustración aumentada por parte del usuario).

Además, se ordena los diferentes casos de severidad de mayor a menor, según su aparición en la tabla. Se utiliza un sistema de iconografía a modo de semáforo para determinar la graduación de los distintos parámetros. Entendiéndose por rojo el nivel más alto de gravedad, el amarillo el mediano, y el verde el más bajo. Al final, se propone posibles soluciones al problema.

 

 

Bibliografía:

 

Fundació Universitat Oberta de Catalunya (FUOC). (s. f). Design Toolkit | Evaluación heurística. Recuperado el 19, 2024, de https://design-toolkit.recursos.uoc.edu/es/guia/evaluacion-heuristica/

Gondomar Miñana, R. (2021). Cuaderno de Diseño de interacción. https://quadern-disseny-interaccio.recursos.uoc.edu/es/

Legaspi, A., & Jakhu, A. (n.d.). IxD (Interaction Design) Checklist – Orium. Recuperado el 19, 2024, de https://ixdchecklist.com/

Philips, M. (s.f.). Análisis Heurístico para UX – Cómo Ejecutar una Evaluación de Usabilidad | Toptal®. Recuperado el 19, 2024, de https://www.toptal.com/designers/usability-testing/analisis-heuristico-para-ux-como-ejecutar-una-evaluacion-de-usabilidad

Serafinelli, S. (2020). Los 10 principios heurísticos de Nielsen explicados con ejemplos. https://www.teacuplab.com/es/blog/los-10-principios-heuristicos-de-nielsen-explicados-con-ejemplos/

Zalando. (s.f.). Zapatos, ropa y accesorios online-La mejor selección en Zalando. Recuperado el 19 de abril de 2024, de https://www.zalando.es/