Evaluación Heurística – Zara

A continuación voy a analizar la usabilidad de la interfaz de la página web de Zara. Zara es una cadena de moda española, insignia del grupo textil Inditex. Cuenta con más de 7000 tiendas repartidas por todo el mundo. En su web podemos encontrar ropa, calzado, accesorios y productos de belleza.

La decisión que me ha llevado a escoger esta página web es mi propia experiencia como usuaria de la marca. A pesar de que visualmente me gusta mucho su web, las veces que he comprado en ella he experimentado confusión y creo que tiene cosas que podrían mejorar en cuanto a usabilidad.

La metodología con la que voy a analizar la usabilidad de la página web es la evaluación heurística. Me centraré en el flujo principal de búsqueda y compra de ropa. Para ello, utilizaré los diez principios de Jacob Nielsen, y buscaré ejemplos de buenas y malas prácticas para cada uno de ellos.

Por cada mala práctica, se indicará la gravedad del mismo en una escala de 1 a 5. Una vez terminado el análisis, se seleccionarán los hallazgos más graves y se propondrán mejoras y soluciones.

∙  ∙  ∙

1. VISIBILIDAD DEL ESTADO DEL SISTEMA

El sistema debe dar feedback a los usuarios sobre lo que está sucediendo en la web en un tiempo razonable.

Buenas prácticas:
  • En la página de producto, se visualizan los colores y las tallas disponibles. Además, si una talla no está disponible, se puede hacer click en ella para ver prendas similares.
  • Cuando se añade una prenda a la cesta de compra, un ventana muestra la información del producto añadido. 

     

✘ Malas prácticas: 
  • Cuando el usuario pasa el ratón por encima de las categorías en el menú de navegación, el estado del texto no cambia, por lo que el usuario puede confundirse de categoría. (Gravedad: 2/5)
  • En el proceso de pago, no hay información del número de pasos que se deben realizar para finalizar la compra. (Gravedad: 5/5) 

   

∙  ∙  ∙

2. COINCIDENCIA ENTRE EL SISTEMA Y EL MUNDO REAL

El sistema debe hablar el idioma de los usuarios. Debe utilizar palabras, frases y conceptos que le sean familiares.

✔ Buenas prácticas: 
  • La cesta de la compra utiliza un icono que es fácil de entender.
✘ Malas prácticas: 
  • Un control deslizante permite al usuario cambiar la cuadrícula de los productos pero no hay nada que explique su función. (Gravedad: 2/5)
  • Hay fotos que no dan ninguna información sobre el producto al que están vinculados. (Gravedad: 3/5) 

    

∙  ∙  ∙

3. CONTROL Y LIBERTAD DEL USUARIO

El sistema debe dar a los usuarios la capacidad de deshacer de forma rápida acciones que haya podido realizar por error.

✔ Buenas prácticas: 
  • El sistema permite eliminar un producto del carrito y también deshacer la acción si se ha eliminado por error.

✘ Malas prácticas: 
  • En la pagina de producto no hay forma de volver atrás. (Gravedad: 4/5)
  • Si el usuario hace click en buscar, se abre una página que no tiene botón de salida. (Gravedad: 4/5)
  • Si el usuario se equivoca de talla, no puede editarlo en el carrito de compra. Debe eliminar el producto y volver a buscarlo para añadirlo a la cesta. (Gravedad: 4/5)
  • Una vez se inicia el proceso de compra, el usuario no tiene la opción de ir atrás ni de salir. (Gravedad: 4/5)

   

∙  ∙  ∙

4. CONSISTENCIA Y ESTÁNDARES

Los usuarios no deben cuestionarse si acciones, situaciones o palabras diferentes significan lo mismo. Se deben seguir las normas y convicciones establecidas en la industria.

✔ Buenas prácticas: 
  • Debajo de cada producto se indican productos similares.
  • El icono del menu burger se mantiene fijo en la esquina al hacer scroll.

✘ Malas prácticas: 
  • El layout irregular no es estándar en las tiendas de ropa y dificulta el proceso de seleccionar prendas. (Gravedad: 3/5)

∙  ∙  ∙

5. PREVENCIÓN DE ERRORES

Es importante diseñar buenos mensajes de error, pero es aún más importante que un diseño cuidadoso del sistema prevenga esos errores.

✔ Buenas prácticas: 
  • Se indica con una descripción cómo se debe rellenar cada campo de los formularios.
  • Si el usuario introduce un dato no válido en un campo de un formulario se le indica al momento.

✘ Malas prácticas: no se han encontrado.

∙  ∙  ∙

6. RECONOCIMIENTO MEJOR QUE RECUERDO

Minimizar la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones. Los usuarios no deben tener que recordar la información de una parte del sistema a otra.

✔ Buenas prácticas: 
  • En la página de búsqueda, el usuario puede ver sus búsquedas recientes y sugerencias de búsqueda.
✘ Malas prácticas: 
  • En la pestaña de filtros, no hay ningún resumen de los filtros seleccionados por lo que el usuario debe ir abriendo cada apartado para recordar qué filtros había seleccionado. (Gravedad: 2/5)
  • Justo antes de autorizar el pago, se muestran fotos de los productos que se van a comprar pero no se muestra ninguna otra información. (Gravedad: 5/5)

 

∙  ∙  ∙

7. FLEXIBILIDAD Y EFICIENCIA DE USO

El sistema debe ofrecer aceleradores, ocultos a usuarios principiantes, para ofrecer una mejor interacción a los usuarios experimentados. El sistema debe permitirles personalizar sus acciones frecuentes.

✔ Buenas prácticas: 
  • El sistema permite guardar artículos en un listado de favoritos a usuarios registrados.
  • Se puede realizar la compra como invitado.

 

✘ Malas prácticas: 
  • No es posible ordenar los productos en base a ningún parámetro (precio, novedad…). (Gravedad: 2/5)

∙  ∙  ∙

8. DISEÑO ESTÉTICO Y MINIMALISTA

El sistema no debe contener información irrelevante o poco utilizada. Cada unidad extra de información compite con la información importante y disminuye su visibilidad relativa.

✔ Buenas prácticas: 
  • La web tiene un diseño minimalista y moderno.
✘ Malas prácticas: 
  • El menú superior tiene el fondo transparente por lo que es difícil de ver cuando solapa con determinados elementos. (Gravedad: 1/5)
  • Se utiliza más de una imagen para el mismo producto en las paginas de categorías, añadiendo un exceso de información innecesaria. (Gravedad: 3/5)

 

∙  ∙  ∙

9. AYUDA AL USUARIO A RECONOCER, DIAGNOSTICAR Y RECUPERARSE DE LOS ERRORES

El sistema debe expresar los mensajes de error con un lenguaje claro (sin códigos), indicando el problema y sugiriendo una solución.

✔ Buenas prácticas: 
  • Los formularios identifican los errores y muestran cómo solucionarlos con un comentario en rojo, facilitando su comprensión.
  • Los errores se explican con un lenguaje sencillo y se sugiere una solución.

✘ Malas prácticas: no se han encontrado.

∙  ∙  ∙

10. AYUDA Y DOCUMENTACIÓN

Es mejor si el sistema se puede utilizar sin explicaciones adicionales, pero se le debe proporcionar al usuario documentación que le ayude a completar sus tareas.

✔ Buenas prácticas: 
  • La web proporciona un excelente asistente de accesibilidad.
  • La herramienta encuentra tu talla permite al usuario conocer la talla recomendada en base a sus medidas.

 

✘ Malas prácticas: 
  • La sección de ayuda, aunque es fácil de encontrar, es difícil de navegar ya que hay que ir entrando en cada categoría para ver si lo que el usuario busca está en esa pagina. (Gravedad: 1/5)

 

1 – Antes de autorizar el pago solo se muestran fotos de los productos que se van a comprar.

(Gravedad: 5/5) Es un error crítico, ya que al no mostrar al usuario el nombre, talla o color de los productos de su cesta es fácil que compre algún producto equivocado.

Solución: Mostrar toda la información relevante de cada producto de la cesta durante todo el proceso de compra. Las imágenes de los productos pueden hacerse más pequeñas para colocar el texto junto a ellas.

∙  ∙  ∙

2 – No hay información del número de pasos que se deben realizar en el proceso la compra.

(Gravedad: 5/5) El usuario tiene que pasar por seis pantallas para finalizar la compra por lo que se trata de un proceso bastante largo. Al no informar al usuario de los pasos que le quedan para terminar, es muy probable que abandone el proceso de compra.

Solución: En la parte superior de la pantalla se debería indicar el número de pasos que debe completar el usuario para finalizar su compra y mostrarle en todo momento en qué paso se encuentra. Además, es posible reducir el número de pasos al condensar la información requerida en menos páginas.

∙  ∙  ∙

3 – No se puede editar la talla de un producto en la cesta de compra.

(Gravedad: 4/5) Añadir una talla equivocada a la cesta es un error muy común. Al no permitir al usuario editar la talla en la cesta de compra, se le obliga a eliminar el producto y volver a buscarlo para poder finalizar su compra.

Solución: De la misma forma que se puede editar la cantidad de cada producto en la cesta de compra, en lugar de indicar simplemente la talla, se debería sustituir por un desplegable en el que seleccionar la talla correcta.

∙  ∙  ∙

4 – No es posible salir o retroceder de las páginas de producto, búsqueda o cesta de compra.

(Gravedad: 4/5) Es un error muy repetido en la web que se debería solucionar ya que dificulta la navegación del usuario y lo obliga muchas veces a volver al inicio.

Solución: La solución más sencilla es incluir un botón para ir atrás o para cerrar la página actual. Otra opción es incluir breadcrumbs en la navegación que permitan al usuario ir a la página anterior que desee.

∙  ∙  ∙

5 – El layout irregular no es estándar en las tiendas de ropa y dificulta el proceso de seleccionar prendas.

(Gravedad: 3/5) El layout irregular hace que el usuario deba pasar mucho más tiempo en cada página para poder ver todos los productos disponibles. 

Solución: Un layout más regular y al que el usuario esté más acostumbrado mejorará su experiencia en la web.

∙  ∙  ∙

6 – Se muestra el mismo producto con imágenes diferentes.

(Gravedad: 3/5) Mostrar el mismo producto en repetidas ocasiones pero con diferentes imágenes lo único que logra es confundir al usuario, ya que si no se fija bien en el nombre o precio del producto (que tienen un tamaño de fuente muy pequeño) es probable que piense que se trata de productos diferentes.

Solución: Sera más fácil para el usuario ver las opciones disponibles si solo se muestra cada producto una vez. Solo se debería poder repetir un producto si se trata de un color diferente.

∙  ∙  ∙

7 – Hay fotos que no dan ninguna información sobre el producto al que están vinculados.

(Gravedad: 3/5) Al navegar por las páginas de producto muchas de las fotos tienen el nombre y el precio escritos debajo, pero muchos otros no muestran ninguna información. Por ejemplo, una foto de una mujer con un collar sin más información puede hacer pensar al usuario que si hace click podrá comprar el collar pero, en cambio, se le redirige a un pintalabios. Esto puede generar confusión y pérdida de tiempo.

Solución: Todas las fotos de producto deberían tener asociado claramente un nombre, para que el usuario sepa de que se trata.

∙  ∙  ∙

8 – No se explica la función del control deslizante que permite cambiar la cuadrícula.

(Gravedad: 2/5) Como ya hemos comentado antes, la web tiene un layout que dificulta su navegación. Este control deslizante mejora ese problema, pero pasa muy desapercibido y no hay nada que explique su función.

Solución: Sería recomendable sustituirlo por iconos que indiquen el número de productos a mostrar por cada fila, ya que es un recurso habitual en muchas webs y es más fácil de entender.

∙  ∙  ∙

9 – No es posible ordenar los productos en base a ningún parámetro.

(Gravedad: 2/5) En algunas categorías hay centenares de productos, pero el usuario no tiene ninguna forma de organizarlos de la manera que le sea más conveniente. La única opción que tiene para encontrar lo que busca es utilizando los filtros.

Solución: Es posible que el usuario no desee filtrar su búsqueda pero sí organizarla por precio o novedad, por lo que se debería incluir esta función junto a la herramienta filtro.

∙  ∙  ∙

10 – No se informa al usuario de los filtros que ha aplicado.

(Gravedad: 2/5) La única información que puede ver el usuario a simple vista es el número de filtros que ha seleccionado, pero si quiere recordar cuáles son debe entrar en la herramienta de filtro y mirar en cada categoría, algo que puede resultar tedioso.

Solución: Se debería indicar un breve resumen de los filtros seleccionados.

 

Como es habitual en las páginas webs dedicadas a la venta de ropa, se hace una distinción entre productos para hombres y para mujeres, aunque en este caso está parcialmente justificado ya que sino se hiciese esta distinción habría demasiados productos en cada categoría. Aun así, sería recomendable que se pudiese buscar un producto en ambas categorías.

Además, vemos que en la categoría de belleza, disponible tanto en la sección de mujer como de hombre, solo se utilizan modelos femeninas, a pesar de que cada vez es más amplio el público que utiliza estos productos. Todo esto puede generar conflicto en personas de género fluido o que simplemente quieran productos asociados tradicionalmente a otro género.

Otro apartado en los que la web tiene perspectiva de género es en los formularios, ya que en ningún momento se pregunta por el género. El principal problema que nos encontramos en cuanto a los usuarios es la imposibilidad de cambiar el nombre una vez creada la cuenta. Lo que obliga a personas que deciden cambiar su identidad de género o su nombre a crear una cuenta nueva.

En cuanto a la representación, muestran algo de diversidad étnica en la selección de modelos, aunque podría mejorar considerablemente. Lamentablemente, no muestran diversidad en cuanto a tallas, ni se esfuerzan en mostrar una representación real del cuerpo. Además, en muchos productos la talla más grande que ofrecen es la XL, lo que excluye a un gran número de personas.

Por último, vemos que la marca conoce la importancia de la accesibilidad. Ya que aunque los textos son excesivamente pequeños para una gran parte de usuarios, soluciona este problema ofreciendo una herramienta de accesibilidad que permite editar muchísimos parámetros.

PEC 1 – EL MERCADO DEL DISEÑO

MOWE

https://mowe.studio/

Mowe es una agencia creativa nacida en Brasil que cuenta con presencia en Portugal, España y Estados Unidos. Están especializados en motion graphics y animaciones 2D. Sus trabajos se caracterizan por tener un estilo propio en el que destaca el uso de colores vivos y la presencia de personajes. Según indican en su web crean “Animaciones hechas con amor.”

Se trata de una agencia B2B, ya que ofrecen sus servicios a empresas y agencias de diseño. Han trabajado con grandes clientes como Adobe, Google, Visa, Pepsico y Pfizer, entre otros. Su público objetivo son agencias de diseño que buscan ayuda para vender este tipo de proyectos a sus clientes.

Mowe combina una visión estratégica y un enfoque único para ayudar a sus clientes a crear animaciones memorables que comunican y conectan. Son conocidos por buscar constantemente una visión panorámica del proyecto, para poder brindar soluciones a problemas reales en lugar de simplemente hacer que los diseños se muevan.

Su mensaje central “Way more tan just animation” es lo que los hace únicos. Más allá de sus resultados creativos, su propuesta de valor es la forma en la que ven y trabajan la animación aplicada al marketing. Demuestran que saben utilizar el video de la mejor manera para crear campañas exitosas.

Utilizan su página web para transmitir confianza, ya que, además de mostrar ejemplos de sus trabajos, explican todo su proceso de trabajo detalladamente y garantizan un estándar alto de calidad. Tienen una estrategia de trabajo muy definida, donde su metodología es parte del valor que aportan a sus clientes. Además, demuestran sus grandes conocimientos sobre animación a través de su blog.

Es por ello que el eje central de su ecosistema de comunicación es su página web, ya que lo utilizan para exponer claramente sus ideas y su filosofía de trabajo. Muestran y educan a sus posibles clientes sobre las diferentes maneras en las que puede utilizarse la animación y en los beneficios que puede aportarles.

Más allá de su web, tienen presencia en diversas redes sociales. Utilizan plataformas como Dribble y Vimeo para mostrar su trabajo en forma de portfolio y llegar a más número de personas. Las redes sociales que más utilizan son Instagram y Twitter, donde tienen casi 7000 y 2000 seguidores, respectivamente. Suben el mismo contenido a ambas plataformas, en las que realizan publicaciones sobre sus diseños cada pocos días.

Sus redes sociales son la herramienta que utilizan para mostrar a sus posibles clientes de la variedad de contenidos que pueden crearse haciendo uso de la animación. Tienen una estrategia de comunicación bastante informal pero que se alinea muy bien con su estilo visual.

En definitiva, Mowe es un estudio que consigue, aun manteniéndose fiel a un estilo informal, reflejar a la perfección su profesionalidad y el gran nivel de calidad de su trabajo. Tienen una web muy profesional donde aportan valor a las personas interesadas en la animación y demuestran a posibles clientes su gran conocimiento en el campo de la animación.

 

annandaniel

https://annandaniel.com/

Annandaniel son un duo de fotógrafos españoles con sede en Valencia formado por Anna Devís y Daniel Rueda. Se conocieron en la Universitat Politècnica de València, donde ambos se graduaron en la Escuela de Arquitectura. Hoy en día aprovechan sus antecedentes arquitectónicos para contar historias a través de imágenes divertidas y sorprendentes.

Su modelo de negocio es B2B2C, ya que ofrecen sus servicios a empresas, pero también realizan proyectos personales que ponen a la venta como láminas de edición limitada. Es por ello que tienen dos públicos objetivos. Por un lado, gente interesada en la fotografía como forma de arte y, por otro lado, grandes empresas como algunas con las que ya han colaborado: Disney, Netflix, Facebook, Nissan, LG o Pantone.

Estos fotógrafos han logrado hacer algo muy complicado, hacer de su pasión su profesión y hacerse conocidos en todo el mundo gracias a un estilo muy personal. Un estilo caracterizado por su sentido del humor visual, su creatividad y su estética delicada inspirada en la arquitectura, la geometría y el minimalismo. Para ellos, su minimalismo no es solo un estilo, sino una forma de dar significado a todos los elementos que componen su trabajo.

Contar historias a través de imágenes divertidas y sorprendentes que se alejan de la fotografía arquitectónica convencional es el objetivo estos creativos fotógrafos. Una de las cosas más sorprendentes de su trabajo es que Anna y Daniel crean sus escenas sin el uso de software de edición. En cambio, hacen uso de la luz y de todo tipo de objetos cotidianos para configurar sus escenas.

Viendo sus importantes clientes está claro que su creatividad es muy codiciada para generar campañas de marketing únicas y llamativas. Además, su trabajo ha sido publicado en numerosas publicaciones y exhibido por todo el mundo, algo que les permite transmitir confianza fácilmente en todo lo relacionado a la calidad de su trabajo.

Su web es un reflejo perfecto de su estilo minimalista. Llama la atención que toda su comunicación esta en inglés, lo que muestra que apelan a un público internacional. Lo primero que vemos al acceder a la web es un video en el que podemos ver a los dos fotógrafos explicando su estilo y su trabajo, algo que genera cercanía y confianza.

Como ya hemos mencionado antes, venden ediciones limitadas de láminas de sus fotografías, pero no disponen de tienda online. Para poder comprarlas es necesario contactar por email con ellos o con alguna de las galerías con las que trabajan. Esto les da una imagen de calidad y exclusividad.

Su ecosistema de comunicación es bastante limitado, pero altamente eficaz. Solo tienen presencia en Instagram. No tienen una cuenta conjunta de Annandaniel sino que cada uno de ellos tiene su propia cuenta, en la que suben diferentes fotografías de su trabajo y cuentan con 400 mil y 538 mil seguidores.

A pesar de que solo suben 1 o 2 publicaciones mensuales, su estilo es claramente atractivo para el público general. Lo que más destaca de su uso de las redes sociales son sus stories, donde muestran el behind the scenes de su trabajo y de su vida privada. Es una forma de conectar con el público y hacer que su trabajo siga generando interés.

Trabajando en otros soportes y formatos

Buenos días,

Os presento la propuesta final que he realizado para adaptar la revista al medio digital. Lo más importante en todo momento ha sido plantear un diseño que sea reconocible en cualquiera de los canales.

He decidido trasladar la revista a una web responsive, que se adapte a las pantallas de diferentes dispositivos. Para estructurar el contenido se ha utilizado una retícula de ocho columnas. La cabecera es muy sencilla, solo incluye el logo e iconos de búsqueda y menú. En el footer he añadido links a información de interés, un formulario para apuntarse a la newsletter y links a las redes sociales. En la portada se ha dado prioridad a destacar el número actual de la revista, a explicar la filosofía de la revista y a llamar a la acción con un apartado de suscripción. Además, se ha incluido un apartado de tienda para facilitar la compra de la revista a las personas interesadas. El sumario se ha adaptado incluyendo un breve resumen de ese número y creando una galería de historias destacadas, donde priorizan las imágenes. Por último, el artículo se ha creado en una sola columna estrecha, intercalando el texto con fotografías y con mucho espacio en blanco a los lados. Al final se ha añadido un apartado de historias relacionadas para animar a que el lector permanezca en la web. 

En cuanto al díptico, se ha decidido realizar una newsletter, ya que es un medio muy eficaz para captar nuevos lectores. El objetivo de este diseño es dar a conocer la filosofía de la revista y animar a la suscripción de la edición impresa. El tamaño escogido ha sido 600×900 px, un tamaño estándar en este tipo de formatos, y una retícula de cuatro columnas.

El objetivo de ambos diseños es mantener la continuidad de la propuesta anterior, para ello hemos generado un producto sencillo, que proporcione un contenido de interés y que genere una experiencia agradable al lector. Hemos prestado mucha atención en conseguir una coherencia estética, haciendo uso del mismo estilo minimalista, la misma gama cromática y las mismas tipografías.

 Muchas gracias,

Maider Roman

 

El interior de la publicación

Buenas tardes,

Adjunto las propuestas de la PEC 4. Por un lado encontramos la propuesta final para el interior de la publicación, y por otro lado, el interior definitivo del díptico. En ambos casos se ha mantenido la retícula utilizada en la PEC 2.

Todas las propuestas siguen con el estilo minimalista trabajado hasta ahora, con las fotos como protagonistas y bastante espacio blanco. Mantengo también los textos no justificados y alineados a la izquierda, aunque esta vez hago uso de la sangría, lo que creo que mejora el resultado.

También mantengo con las tipografías trabajadas en la práctica anterior, ya que creo que consiguen un buen efecto de equilibrio visual y ayudan a jerarquizar las partes más importantes.

La primera página se destina a una gran fotografía junto a la que se coloca el sumario, con un estilo muy sencillo. En el caso del artículo, se trata de un artículo de seis páginas de las que diseño las cuatro primeras.

 

 

Diseño Editorial: La portada

 

 

 

 

 

 

 

Aquí os presento las dos portadas de los dos primeros números de la revista, que exploran los destinos Río de Janeiro y Bali, respectivamente. El estilo de mi revista es minimalista y elegante, donde predomina la imagen sobre el texto. Por otro lado, incluyo la portada del díptico promocional de la revista.