Por Elizabeth Aguero Selva, Laurent Favre, Ane Mella, Adeline de Gaulejac y Sofía Ayala

“Cervezas Online” es un sitio web orientado a la compra de cervezas de manera virtual, el público objetivo son personas que disfrutan de la cerveza pero no son expertos en el tema.

 

Objetivo general

Identificar los problemas y realizar una propuesta de mejora en relación a la arquitectura de la información y navegación del sitio web en dispositivos móviles.

Metodología de trabajo

  • Análisis heurístico 

Antes de comenzar con nuestro estudio, realizamos en primer lugar un análisis que consiste en evaluar e inspeccionar la usabilidad de la interfaz para determinar la usabilidad del sitio web cervezasonline.com en su versión mobile. 

En esta concluimos que la web tiene serios problemas a nivel general, en primer lugar hay un lenguaje muy técnico, lo que complejiza la interacción que pueda tener el usuario con la web. También tiene problemas a nivel visual, pues tiene diferentes colores y tipografías, hay muchas imágenes que son innecesarias y sobrecargan mucho la página.

Por otro lado, la organización de la información es muy confusa y la navegación del menú está mal estructurada y no se entiende.


Análisis de competencia

Realizamos un análisis de las categorías y subcategorías de competidores importantes como Es Cerveza (España), Beyond Beer (Alemania) y Mister Hop (Holanda).

 

Esto nos permitirá más adelante poder tomar las mejores características de cada sitio y así poder aplicarlas primeramente en nuestro card sorting y luego en nuestros wireframes.

  1. Es Cerveza
  • Tiene un menú desplegable y no interfiere en la experiencia visual del usuario.
  • La opción de menú desplegable aparece al principio de la web, pero a medida que se va haciendo scroll aparece fijo en la parte inferior.
  • La home page no está saturada con información e imágenes de los productos.
  • Las secciones del menú son correctas, porque aparece en primer lugar “ Todas las cervezas” y una pestaña que te indica que si clicas puedes encontrar subsecciones. 
  • La ficha de producto es muy detallada y gráfica
  • Hacen una explicación de terminología

 

  1. Beyond Beer
  • Interesante organización de la web a través de un menú hamburguesa.
  • La categoría “Beer” del menú es sencilla y lleva subcategorías claras.
  • El home banner animado es visualmente atractivo e interactivo.
  • En el home destacan los productos nuevos y también hay botones tipo SEE ALL BEERS que dirigen a todas las cervezas disponibles.

 

  1. Mister Hop

 

  • Las subcategorías “Top 10”, “Tipos de cervezas” y “ganadores de premios” ofrecen una oportunidad al usuario (especialmente si no sabe mucho de cervezas) de encontrar buenas cervezas rápidamente. 
  • La sección “sale %” permite a los usuarios que no quieren gastar demasiado dinero encontrar opciones baratas.
  • En el menú burger, se repiten las categorías que permiten elegir de manera rápida: Top 10, Tipos de cervezas y ganadores de premios.  

Card Sorting

Para conducir este experimento, le solicitamos a cuatro participantes clasificar 15 cartas; cada una de ellas representa una marca de cerveza y contiene seis informaciones sobre el producto: procedencia, envasado, tipo, precio y color. 

 

Para ello, comparamos los sitios web de la competencia y guardamos las categorías que encontramos con más frecuencia. Nos hemos asegurado de que estos elementos se escribieran en un orden aleatorio en las cartas, para que el juicio de los participantes no se vieran sesgados por alguna jerarquía de información.

 

Luego de eso, realizamos una prueba para asegurarnos que el discurso de nuestra moderadora sea el adecuado para garantizar que su función sea únicamente la de guiar al participante y no influir en el. 

 

A nuestros participantes les pedimos datos demográficos y la frecuencia con la que compran cervezas por Internet. 

 

Después de que se presentarán y se sentaran frente a la mesa con las 15 cartas en orden aleatorio, la moderadora les pidió que se imaginaran como un comprador que quisiera adquirir cerveza para que luego clasificaran las tarjetas de la forma que les pareciera más relevante para comprar cerveza. 

Conclusiones obtenidas en base al card sorting:

 

  • El tipo de cerveza/ estilo de cerveza es lo que más interesa al usuario.

 

  • El público objetivo no es experto en cerveza, por lo tanto no conoce que significa que una cerveza sea tipo lager, dorada, ambar… Sería más adecuado que se indicará el sabor (dulce, amarga, frutal, fresca, invernal…) o la intensidad de la misma. Les interesan datos menos técnicos.

 

  • Un usuario sugirió añadir la información de la IBU (International Bitterness Units) en la descripción de la cerveza

 

  • Mezclar el estilo de cerveza (lager, stout, ale) y el color de estas (dorada, roja) en las descripciones  confunden al usuario.

 

  • Muchos usuarios mencionaron al principio la procedencia para categorizar las cervezas, pero al final pensándolo un poco más, no les dieron tanta importancia a esto. Permite tener más información sobre la cerveza ( por ejemplo, si son de  Alemania son de trigo y por tanto, son más dulces o si son de España, son de cebada y por tanto más amargas) pero no para  categorizarla. 

 

  • El precio, en general, no interesa al usuario porque se asume que si se entra a una página web con mucha oferta de cervezas ( tanto comerciales, como artesanales y de diferentes procedencias) el usuario está dispuesto a pagar. Pero si les interesaría diferenciar entre comerciales y premium/artesanal.

 

  • La mayoría de usuarios indicaron que compran cerveza online cuando están en busca de un producto más puntual. También una persona indicó que lo utilizaría si hubiera alguna promoción o si tuviera que hacer una compra de cantidad.

 

Wireframes

 

Para reducir la información de la página actual e implementar las conclusiones sacadas del card-sorting decidimos crear un único filtro con todas las opciones para que el usuario pueda seleccionar y buscar el producto que desea. 

 

El orden de los filtros los hemos dispuesto en función de las conclusiones sacadas en el card-sorting. Es decir, las preferencias de los usuarios:

 

  1. Color
  2. Tipo
  3. Sabor
  4. Intensidad del alcohol
  5. Intensidad del amargor
  6. Procedencia
  7. Artesanal/premium – comercial
  8. Lata- botella

La creación de los wire-frames lo hemos hecho a través de la herramienta Figma:

 

Como resultado, hemos creado un menú mucho más simplificado en la que la categoría principal es la de cervezas. Asimismo, si el usuario quisiera especificar en su búsqueda, tendría la opción de abrir el filtro y seleccionar las propiedades que le interesan de la cerveza. 

Deja un comentario