Maria Teresa Cuenca Ramirez

Introducción

La interfaz que se va a analizar, a continuación, es la tienda online de Zara, cadena de moda perteneciente al grupo Inditex y una de las marcas más valoradas del mundo. A raíz de la pandemia, Inditex ha decidido apostar por el comercio online, llegando a cerrar numerosos establecimientos. Por ello, resulta interesante analizar una web que se presupone que debe estar bien diseñada tanto estéticamente como a nivel usabilidad.

Metodología

Para llevar a cabo este análisis heurístico, se ha seleccionado la página web de Zara, como se ha mencionado anteriormente, y se ha analizado a partir de los 10 principios heurísticos de Nielsen. De cada principio, se han extraído un buen y/o mal ejemplo de aplicación según correspondiese y se han explicado los motivos por los que se consideran buenas o malas prácticas.

Y, para finalizar, se ha realizado un listado de los hallazgos obtenidos a través del análisis y la propuesta de mejora y solución de cada hallazgo.

Los 10 principios heurísticos de Nielsen

Visibilidad del estado del sistema

Buen ejemplo

Se proporciona feedback al usuario a partir de las acciones que realice. Como se puede ver en el ejemplo, cuando el usuario añade un producto a la cesta, si no se ha seleccionado la talla de este, se le avisa mediante un mensaje mediante un pop-up. Una vez seleccionada la talla, al añadir el producto a la cesta, se abre una ventana con los productos añadidos para que le quede constancia al usuario.

Mal ejemplo

Cuando se entra dentro de la categoría, por ejemplo, “vestidos”, no existe ningún indicador como “migas de pan” que muestre al usuario en qué página se encuentra. Lo mismo ocurre dentro del producto, y tampoco existe una opción que permita volver hacia atrás.

Empate entre el sistema y el mundo real

Buen ejemplo

La opción “características” en el menú “filtro” proporciona al usuario la posibilidad de filtrar el producto según sus características, empleando un lenguaje coloquial para descrir a este. Por ejemplo,  si deseas un vestido de manga larga, puedes escoger la característica «manga larga» dentro del filtrado.

Mal ejemplo

El icono que se usa para visualizar la cantidad de productos que se desean ver en una misma pantalla no es nada intuitivo ni presenta el aspecto que se suele usar para esta funcionalidad. Se trata de una barra de desplazamiento, la cual se acostumbra a utilizar para delimitar precios.

Control y libertad del usuario

Buen ejemplo

El usuario puede eliminar un producto, en caso de haberlo añadido erróneamente de la cesta de la compra, o cambiar la cantidad de producto que desea, de forma automática.

Mal ejemplo

A la hora de realizar la compra, el usuario no puede volver hacia atrás para modificar los datos durante el proceso.

Consistencia y estándares

Buen ejemplo

Los elementos se encuentran ubicados donde el usuario espera encontrarlos: el logo de Zara en la parte superior izquierda o la cesta de la compra, la opción de búsqueda y el inicio de sesión en la parte superior derecha.

Asimismo, los botones de acción tienen el mismo aspecto.

Prevención de errores

Buen ejemplo

En el formulario de registro de usuario, si el usuario teclea de forma incorrecta, por ejemplo, la contraseña, se le indica el formato que esta tiene que tener sin tener que hacer clic sobre el botón “crear cuenta” y esperar a que aparezca un mensaje de error.

Reconocimiento mejor que recuerdo

Buen ejemplo

Para que el usuario reconozca y reciba la información que necesita de forma asequible, el buscador de Zara sugiere posibles opciones de búsqueda referentes al producto que se está escribiendo.

Diseño estético y minimalista

La página web de Zara es un buen ejemplo de diseño estético y minimalista. Se trata de una página limpia, la cual se centra en mostrar lo que importa: los productos que pretende vender y la información necesaria acerca de estos.

La hero section de  esta web presenta las nuevas colecciones de la marca, a través de la cuales, se pueden visualizar y acceder a la compra de los productos pertenecientes a cada colección.

No obstante, para acceder a las categorías (hombre, mujer, niños…) y a sus artículos es necesario entrar en el menú hamburguesa (propio de las tiendas online). No existe ninguna llamada a la acción en la hero section que te dirija a esas categorías.

Flexibilidad y eficiencia de uso

No se ha detectado ningún aspecto en esta web que pueda coincidir con este principio. Sin embargo, en cuanto a eficiencia de uso, quizá debe mencionarse que cuando se crea una cuenta de usuario, conforme se escribe la dirección de envío, aparece un listado con direcciones para autocompletar. Si se selecciona una, también se autorellena el código postal y la provincia.

Ayudar a reconocer, diagnosticar y recuperarse de errores

Buen ejemplo

Si se produce algún error, este debe ser indicado de forma precisa y sugiriendo una solución.

La página de error 404 es bastante simple y comprensible. Se le indica al usuario que esa página ya no existe y se le dirige mediante un CTA a la página principal.

Mal ejemplo

Al iniciar sesión, si se escribe mal la contraseña o el usuario, el mensaje de error no solo no informa al usuario sobre cuál de los dos campos introducidos no es correcto, sino que además indica que no existe ninguna cuenta con esa contraseña y usuario. Es decir, puede dudar sobre si se tiene una cuenta ya creada o no.

Ayuda y documentación

Buen ejemplo

En esta página web, se proporciona al usuario ayuda mediante una sección específica, bien localizada y visible, en la esquina superior derecha. En ella, se indica la documentación más relevante con respecto al envío, pago, devolución de los productos e información sobre estos.

Además, en la propia página del producto aparece información importante con referencia a este, como es: “envíos, cambios y devoluciones”, “guía de tallas”, o “ver disponibilidad en tienda”. De esta manera, no es necesario ir directamente a la sección de ayuda para consultar esa información.

Listado priorizado según gravedad

A continuación, se indican, por orden de prioridad, los hallazgos obtenidos y la propuesta de mejora para cada uno de ellos.

-La imposibilidad de volver hacia atrás durante el proceso de compra de un producto. No es posible modificar los datos que se han rellenado en los pasos anteriores, a no ser que se use la opción “retroceder” del navegador, llegando a bloquearse la página en algunas ocasiones y teniendo que comenzar el proceso de nuevo. La solución sugerida sería permitir volver hacia atrás pinchando sobre la opción anterior y  mediante un icono que también dirija al paso anterior, como en el ejemplo de la web de Pull & Bear.

– Falta de información acerca de la categoría en la que se encuentra el usuario. Para solucionarlo, se añadirían migas de pan que también permitieran volver hacia atrás en los pasos, como en la tienda online de Asos.

– La página de inicio no incluye ninguna opción para acceder a la categoría que se desee, a excepción del menú hamburguesa. El usuario tardará más tiempo en encontrar lo que busca. Una buena propuesta podría ser incluir llamadas a la acción que puedan ser seleccionadas por el usuario y le dirijan a la categoría deseada (Ejemplo extraído de Asos).

– Cuando se inicie sesión, en caso de que se escriba mal la contraseña o el usuario sería recomendable especificar cuál de los datos se ha escrito mal. También podría permitirse iniciar sesión a través de la cuenta de gmail, facebook, apple… (Ejemplo extraído de Asos).

– El icono “vista” es muy poco intuitivo. Sería adecuado modificarlo por una opción que se asemeje más al modelo mental que tenemos de este (Ejemplo extraído de Bershka).