Avaluació de la usabilitat - Aula 1 | Evaluación de la Usabilidad - Aula 1

Pública

Yasmina Mokhtari

Producto: https://tienda.mercadona.es

Mi folio: https://ymokhtarir.folio.uoc.edu/2024/04/10/analisis-heuristico-de-la-web-mercadona/

¿Cumple la nueva web de Mercadona los 10 principios de Nielsen?

Introducción

Hace un tiempo el supermercado español Mercadona cambio su sistema de compra online modernizándolo y llevándolo no solo a versión escritorio si no a app para dispositivos móviles, cambiando su diseño y con ellos sus funcionalidades para sus clientes/usuarios.

Pero… en temas de usabilidad consigue la nueva propuesta de Mercadona cumplir los 10 principios de Nielsen? ¡Veamoslo juntos!

Metodologia

En esta ocasión, vamos hacer una evaluación heurística del soporte web que proporciona Mercadona para realizar la compra de sus productos online. El analisis llevado a cabo estará basado en los 10 principios de Nielsen (mención especial a esta fuente que ha sido de gran utilidad https://www.nngroup.com/articles/ten-usability-heuristics/) veremos cada principio ejemplificado con un ejemplo de la web de Mercadona poniendo en bandeja un ✅ buen ejemplo y ❌un mal ejemplo.

¡Comenzemos!

1.Visibilidad del estado del sistema

✅ La web de Mercadona refleja el principio de Visibilidad del estado del sistema al mostrar constantemente el total de la compra en el carrito, manteniendo informado al usuario sobre el dinero que está gastando en todo momento.

❌Un mal ejemplo sería si el total de la compra en el carrito no se actualiza automáticamente después de agregar o eliminar productos, lo que podría confundir al usuario sobre el monto final que está gastando.

2. Coincidencia entre el sistema y el mundo real

✅ El uso de iconos basados en el mundo real para representar categorías en la página web de Mercadona es un buen ejemplo del segundo principio de Nielsen, Coincidencia entre el sistema y el mundo real. Esto facilita a los usuarios la identificación rápida y comprensión de las diferentes secciones de productos, mejorando así la usabilidad de la página.

❌Si Mercadona hubiese seleccionado iconos quizás más abstractos a la realidad y no tan fieles a nuestra realidad esto haría que la navegación fuera confusa para los usuarios, ya que no podrían asociar fácilmente el icono con el tipo de producto que están buscando.

3. Control y libertad del usuario

✅ La web de mercadona en todo momento permite volver hacia atrás haciendo uso de botones que indican volver hacia atrás si el usuario así lo desea. Refleja el principio de «Control y libertad del usuario». Esto le brinda a los usuarios la libertad de deshacer acciones o explorar alternativas, lo que mejora su experiencia y les da un mayor sentido de control sobre su navegación.

❌ Sería un error muy grande si la web no contara con estos indicadores de volver hacia atras, crearía un problema para el usuario y desconfianza.

4. Consistencia y estándares

✅ Cumple el principio Consistencia y estándares que el botón de carrito esté colocado en la esquina superior derecha dado que es una convención común en muchas páginas web de comercio electrónico, por lo que los usuarios están acostumbrados a buscarlo allí.

❌ Sería un error colocar el carrito en otra disposición y no aportaría nada a mejorar en cuanto a usabilidad puesto que es un acierto asegurado colocarlo en la esquina superior derecha ya que el usuario por convenciones sociales va a buscarlo alli fijo.

5.Prevención de errores

❌  “Recuerde que el importe mínimo para poder realizar tu pedido es de 50€,” este mensaje aparece una vez el usuario a seleccionado sus productos que desea comprar y clica en el botón de tramitar pedido por lo tanto aunque haya un mensaje de aviso no está cumpliendo el principio de prevención de errores puesto que avisa una vez el usuario ya ha comenzado su compra y ha tomado decisiones.

✅ De manera correcta el mensaje debería aparecer de manera proactiva y clara antes de que el usuario comience a seleccionar productos, para que esté informado desde el principio y pueda tomar decisiones de compra acordes con el requisito mínimo establecido

6.Reconocimiento en lugar de recuerdo

✅ La web de mercadona tiene el apartado de “mis habituales” donde se guardan productos  y cantidades que el usuario suele comprar en base a sus pedidos realizados con anterioridad. Así puede comprar de la forma más rápida y sin necesidad de listas. Esta acción promueve el reconocimiento dejando constancia de los productos seleccionados.

7. Flexibilidad y eficiencia de uso

✅ La web proporciona filtros por marca así permite a los usuarios refinar sus búsquedas y encontrar rápidamente los productos de las marcas específicas que prefieren. Esto no solo hace que la experiencia de compra sea más eficiente al reducir el tiempo necesario para buscar productos, sino que también proporciona flexibilidad al permitir a los usuarios personalizar sus resultados según sus preferencias individuales.

Como en este ejemplo : el usuario ha querido buscar agua pero mercadona cuenta con varios productos a los que se puede atribuir “agua” entonces le sugiere la web filtrar  por categoría y marca para afinar su búsqueda.

❌ Una mala práctica es que estos filtros no están presente en todo momento de la navegación para hacer uso de ellos si no que aparecen el momento búsqueda.

8. Diseño estetico y minimalista

✅ Solo hay que ver la comparativa entre la pagina antigua de mercadona con la nueva pagina que aporta un diseño donde se tiene un enfoque mas claro , mas limpia visualmente gracias a eliminar colores demasiados llamativos que ocupaban grandes superficies como eran el verde y el amarillo usado antes.

Ahora encontramos un diseño que simplifica la paleta de colores. Además, el uso de llamadas a la acción (CTAs) en colores contrastantes ayuda a guiar la atención del usuario hacia acciones específicas, lo que mejora la usabilidad y la claridad de la interfaz. En general, este enfoque más claro y minimalista contribuye a una experiencia de usuario más atractiva y centrada en las necesidades del usuario.

❌ Error era como se encontraba antes la página de mercadona con un diseño antiguo basado en las primeras interfaces con ciertas características como; botones con relieve innecesarios, información encorsetada dejando poco margen de espacio entre información, superficie con colores demasiado llamativos …etc

9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores

✅La web de consta de un chat de ayuda  permitie a los usuarios obtener asistencia inmediata cuando experimenten problemas durante su experiencia de compra en línea, lo que ayuda a cumplir con el principio de «Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores».

10. Ayuda y documentación

✅ Mercadona cuenta con otra página adicional para dar soporte y ayuda al usuario sobre varios temas referidos a este supermercado entre ellos el apartado “Compra en Mercadona Online” donde están las preguntas más frecuentes y dudas resueltas. Al tener esta opción para el usuario se está cumpliendo el principio 10 de Ayuda y documentación.

Listado priorizado de problemas detectados

Para priorizar los problemas  e indicar su grado de severidad Jacob Nielsen recomienda usar tres medidas o factores: Frecuencia,Impacto y Persistencia.

Haremos uso de esta escala para detectar la severidad de los diferentes problemas. Me gustaría especificar que algunos problemas que planteo aquí son hipotéticos debido a que no he encontrado problemas graves en mi interfaz, pero creo que igualmente se puede aprender de ello.

2=❌Que los filtros no están presente en todo momento de la navegación para hacer uso de ellos es un pequeño error.

2=❌ Sería un error colocar el carrito en otra disposición y no aportaría nada a mejorar en cuanto a usabilidad, pero si estuviese en otro lugar o flotando creo que igualmente el usuario podría realizar su tarea con más dificultad eso sí.

3= ❌ si el total de la compra no se actualizará automáticamente.

3=❌ Si la página no contara con indicadores para volver hacia atrás, seria un obstáculo que puedo hacer perder algún proceso al usuario.

3=❌ que el mensaje de aviso aparezca una vez el usuario ya ha seleccionado sus productos y quiere finalizar su compra es un grave error puesto que puede causar frustración y abandonar la página.

Propuesta de mejora

Sugerencias propias para mejorar la interfaz  

• Crear un botón de filtros para crear un acceso directo a ellos y así mejorar la navegación, ya que por el momento están escondidos en la interfaz.
• Que el mensaje de aviso de recordatorio “para hacer un pedido el minimo son 50€” aparezca lo primero de todo al cargar la pagina para asi evitar frustraciones al usuario que puedan hacer abandonar la pagina.

Conclusion 

La web de Mercadona si consigue cumplir los 10 principios de Nielsen las bases para que un interfaz tenga buena usabilidad, lo hemos podido observar en este post haciendo un repaso por cada principio y con ello su ejemplo , esta vez mercadona lo ha hecho bien!

Y a vosotros ¿qué os ha aparecido? Os leo!