Análisis Heurístico

Análisis de una página web con e-commerce

Tabla creada por @soniasaez en Airtable

INTRODUCCIÓN

🔍 Principios heurísticos

Piensa en unas 𝙞𝙣𝙨𝙩𝙧𝙪𝙘𝙘𝙞𝙤𝙣𝙚𝙨 de montaje de IKEA 🪑. Sin ellas, montar el mueble sería una experiencia 𝙘𝙖𝙤́𝙩𝙞𝙘𝙖. Con ellas, el proceso fluye y la 𝙛𝙧𝙪𝙨𝙩𝙧𝙖𝙘𝙞𝙤́𝙣 en la experiencia del usuario desaparece.

Eso mismo son los principios heurísticos en 𝙙𝙞𝙨𝙚𝙣̃𝙤 𝙙𝙞𝙜𝙞𝙩𝙖𝙡: un conjunto de guías 𝙥𝙧𝙖́𝙘𝙩𝙞𝙘𝙖𝙨 que nos ayudan a crear 𝙞𝙣𝙩𝙚𝙧𝙛𝙖𝙘𝙚𝙨 claras, intuitivas y 𝙛𝙖́𝙘𝙞𝙡𝙚𝙨 de enterder y usar.

🧩 Evaluación heurística

Es una 𝙧𝙚𝙫𝙞𝙨𝙞𝙤́𝙣 𝙙𝙚 𝙪𝙨𝙖𝙗𝙞𝙡𝙞𝙙𝙖𝙙. Un método de inspección de la usabilidad sin usuarios. Un experto analiza una 𝙞𝙣𝙩𝙚𝙧𝙛𝙖𝙯 (web o app) y encuentra 𝙥𝙧𝙤𝙗𝙡𝙚𝙢𝙖𝙨 antes de que los sufra el usuario.

🔑 Análisis heurístico resumen

• 𝙋𝙧𝙞𝙣𝙘𝙞𝙥𝙞𝙤𝙨 heurísticos = guías 🧭
• 𝙀𝙫𝙖𝙡𝙪𝙖𝙘𝙞𝙤́𝙣 heurística = revisión 👀

¡EMPEZAMOS!

Para llevar a cabo este análisis he aplicado los 10 Principios heurísticos de Jakob Nielsen. Iré mostrando los 10 principios asociados a los problemas que he ido encontrando en la web.

TE PRESENTO AL SEÑOR NIELSEN, EL ARTÍFICE DE TODO ESTE LÍO

Para ayudar a la jerarquización de la gravedad de los problemas detectados, Nielsen también plantea una escala de calificación adicional:

0 — 🌟 No es un problema · Sin incidencia en la usabilidad. 1 — ✅ Problema sin importancia · Leve, no necesita arreglarse a menos que haya tiempo. 2 — ➖ Problema de poca importancia · Tiene impacto, pero no es prioridad. 3 — ⚠️ Problema grave · Importante, debe arreglarse. Dificulta el uso y afecta negativamente a los usuarios. 4 — ❌ Catástrofe · Problema crítico, imprescindible arreglar. Problema crítico que puede provocar errores, frustración o abandono del uso.

Infografía creada por @soniasaez

Problemas identificados

Identifiqué muchos problemas en el sitio web, aquí te resumo alguno de ellos.

1) Visibilidad del estado del sistema

El sistema siempre debe mantener a los usuarios informados sobre lo que está pasando, a través de una retroalimentación apropiada en un tiempo razonable. Feedback constante.

1.1. No se advierte si el stock es limitado hasta intentar comprar.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Mostrar advertencias de stock limitado en la página de producto.

1.2. No se muestra el precio final con impuestos incluidos hasta el checkout. No se sabe cuanto cuesta el envío. Proceso de compra confuso.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Mostrar el precio final, con impuestos incluidos, desde la página de producto.

1.3. No hay mensaje de confirmación al agregar un producto al carrito.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Incluir una notificación o animación que confirme la acción de agregar al carrito.

1.4. Algunas imágenes de la web no tienen alt o tienen textos poco descriptivos. Usuarios que usan lectores de pantalla o que navegan con imágenes desactivadas no saben qué representan.

• Ranking de Severidad: 4 ❌ Catástrofe
• Posible solución: Añadir atributos alt descriptivos en todas las imágenes relevantes. Usar textos que expliquen claramente la función o el contenido de la imagen (“Pizza Margarita con tomate y albahaca”). Revisar que los alt no sean genéricos como “imagen1” o “foto”.

1.4. El restaurante está cerrado por vacaciones, pero la web no lo comunica, solo en su Instagram, sin informar si siguen haciendo pedidos a domicilio o no.

• Ranking de Severidad: 4 ❌ Catástrofe
• Posible solución: Colocar un aviso destacado en la home de la web sobre el cierre temporal.

2) Hablar el lenguaje del usuario

El sistema debe hablar el lenguaje de los usuarios, en lugar de términos orientados al sistema. Debe seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.

2.1. En la carta se utilizan términos gastronómicos en italiano o demasiado técnicos (Focaccia mortadella e pistacchio, Vitello tonnato, etc.) sin acompañarlos de una explicación clara en castellano. Esto puede generar confusión en los usuarios que no conozcan estos conceptos culinarios.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Mantener el nombre original del plato (aporta autenticidad y valor gastronómico), pero añadir siempre una explicación sencilla y en lenguaje cotidiano.
• Ejemplo: Vitello tonnato → “Ternera fría con salsa cremosa de atún”. Focaccia mortadella e pistacchio → “Pan italiano con mortadela y pistacho”.

3) Control y libertad del usuario

La posibilidad de enmendar los errores humanos, dejando que sea siempre el usuario quien mantenga el control sobre las acciones a realizar.

3.1. No se permite volver atrás fácilmente si el usuario se equivoca al registrarse.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Agregar opción de volver atrás o guardar borrador en el formulario de registro.

3.2. No se ofrece chat en vivo ni contacto inmediato.

• Ranking de Severidad: 1 ✅ Problema sin importancia.
• Posible solución: Implementar chat en vivo o un sistema de tickets para soporte rápido.

3.3. No se permite editar fácilmente los datos personales.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Permitir edición directa y sencilla de los datos del perfil de usuario.

3.4. No hay opción clara para cancelar o modificar el pedido durante el checkout.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Incluir botones visibles para cancelar o modificar el pedido en cualquier paso del checkout.

4) Consistencia y estándares

Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Se debe seguir un estándar y ser consistentes con las decisiones que tomamos a lo largo de toda la plataforma.

4.1. Los nombres de las secciones no son consistentes con los términos habituales de un restaurante (pedido).

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Usar términos estándar y reconocibles para facilitar la navegación y comprensión. Usar un lenguaje claro y familiar en menús, categorías y botones, manteniendo la personalidad de la marca en descripciones y mensajes secundarios.

4.2. No se explica claramente el proceso de requisitos especiales, no se sabe a que alude. No se sabe como agregar los ingredientes.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Incluir instrucciones claras y ejemplos visuales para la personalización de productos.

4.3. Se muestran productos que no corresponden al negocio (cosméticos, decoración, etc.), generando confusión y desconfianza en los usuarios y dando la impresión de que la tienda está en construcción o mal gestionada.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Eliminar productos no relacionados, poner la página en contrucción mientras añaden los productos reales.

5) Prevenir errores

Mejor que comunicar correctamente un error, es ayudar a los usuarios a no cometer errores. La mayoría de los errores son previsibles.

5.1. Enlaces legales ausentes, el usuario no actúa con seguridad, puede haber problemas legales, no hay acceso a información importante sobre responsabilidades o procesos.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Asegurar que los enlaces legales y de contacto sean visibles y accesibles en el footer.

5.2. Los campos de error no se destacan claramente.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Resaltar los campos con error en rojo y mostrar mensajes claros sobre el problema detectado.

5.3. No hay validación en tiempo real de los datos de la tarjeta.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Implementar validación en tiempo real y mensajes de error inmediatos en los campos de pago.

5.4. Te deja pasar el proceso sin * de obligatoriedad, te pide cosas que ni siquiera ves, como añadir el horario de envío.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Poner * y hacer un proceso más corto y fácil para el usuario, sino habrá desconfianza y acabará no comprando.

6) Reconocer mejor que recordar

Minimizar la carga de memoria del usuario haciendo que los objetos, las acciones y las opciones estén visibles. El usuario no debería tener que recordar la información de una parte del diálogo a otra.

6.1. En la página de inicio, el usuario debe recordar el número de teléfono para realizar un pedido para llevar. Aunque el número está disponible, no se destaca de manera prominente ni se ofrece una forma rápida de copiarlo o marcarlo directamente desde la web.

• Ranking de Severidad: 1 ✅ Problema sin importancia.
• Posible solución: Destacar el número de teléfono: Colocar el número de teléfono en un lugar más visible y accesible, como en la parte superior de la página o en un botón flotante. Hacerlo clicable: Implementar un enlace que permita marcar el número directamente desde dispositivos móviles, facilitando la acción al usuario.

6.2. En la página de inicio, el usuario debe recordar el número de teléfono para realizar un pedido para llevar. Aunque el número está disponible, no se destaca de manera prominente ni se ofrece una forma rápida de copiarlo o marcarlo directamente desde la web.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Destacar el número de teléfono: Colocar el número de teléfono en un lugar más visible y accesible, como en la parte superior de la página o en un botón flotante. Hacerlo clicable: Implementar un enlace que permita marcar el número directamente desde dispositivos móviles, facilitando la acción al usuario.

7) Flexibilidad y eficiencia de uso

Los aceleradores, no vistos por el usuario principiante, mejoran la interacción para el usuario experto de tal manera que el sistema puede servir para usuarios inexpertos y experimentados. Es importante que el sistema permita personalizar acciones frecuentes.

7.1. No hay filtros avanzados para personalizar la búsqueda de productos.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Agregar filtros avanzados y opciones de ordenación en la página de menú.

7.2. Elementos interactivos demasiado pequeños en móvil. No está trabajada la vista en móvil, ni en tablet, no es responsive. Elementos descolocados.

• Ranking de Severidad: 3 ⚠️ Problema grave.
• Posible solución: Aumentar el tamaño de los elementos interactivos y optimizar el diseño responsive.

8) Diseño estético y minimalista

Los diálogos no deberían contener información irrelevante o que se necesite raramente. Cada unidad extra de información en un diálogo compite con la información importante, disminuyendo su visibilidad relativa.

8.1. El botón de ‘More’ no resalta y el desplegable se lee mal, uso incorrecto de los colores.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Agregar un cambio de color o animación al pasar el cursor para indicar que el botón es interactivo.

8.2. Demasiados elementos visuales compiten por la atención.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Simplificar el diseño visual y priorizar los elementos clave para la conversión.

8.3. Color, no pasa los estándares de accesibilidad.

• Ranking de Severidad: 24 ❌ Catástrofe.
• Posible solución: Hacer una consultoría de accesibilidad, detectar errores y subsanarlos.

8.4. 🧩 Puntos críticos en la web

Jerarquía visual inconsistente

La página de inicio presenta una estructura desordenada, con elementos como el logo, el menú y la información de contacto distribuidos sin un patrón claro. Esto dificulta la navegación y la comprensión rápida del contenido.

Uso excesivo de texto

Se observa una gran cantidad de texto sin subtítulos ni jerarquización, lo que puede resultar abrumador para el usuario. La falta de espacios en blanco y la tipografía pequeña contribuyen a una experiencia de lectura incómoda.

Falta de imágenes representativas

Aunque se mencionan platos como la pizza de Nutella, no se incluyen imágenes atractivas de los mismos. Las imágenes disponibles son limitadas y no reflejan la variedad ni la calidad de la oferta gastronómica.

Navegación poco intuitiva

El menú de navegación es escaso y no proporciona acceso directo a secciones clave como el menú completo, la tienda online o la información de contacto. Esto obliga al usuario a realizar múltiples clics para encontrar lo que busca.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Rediseñar la estructura visual: Organizar los elementos de manera coherente, utilizando una jerarquía clara con encabezados y subencabezados.
• Optimizar el uso del espacio: Incorporar márgenes y espacios en blanco para facilitar la lectura y la navegación.
• Incluir imágenes de alta calidad: Mostrar fotografías atractivas de los platos para despertar el interés del usuario.
• Mejorar la navegación: Agregar un menú de navegación completo y accesible desde cualquier página del sitio.

9) Reconocer, diagnosticar y recuperarse de errores.

Los mensajes de error deben estar expresados en lenguaje llano (sin códigos), indicando con precisión el problema y sugiriendo una solución.

9.1. En la tienda online, si el usuario intenta añadir un producto no disponible temporalmente (agotado, fuera de stock, etc.), la web no informa claramente del error ni indica cómo solucionarlo.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Mostrar un mensaje claro al intentar añadir un producto no disponible (“Producto agotado temporalmente”). Sugerir alternativas o productos similares. Desactivar el botón de añadir al carrito para esos productos y mostrar su estado visible.

10) Ayuda y documentación.

Aunque es mejor que se pueda usar el sistema sin documentación, es necesario proveer al usuario de ayuda y documentación. Esta tiene que ser fácil de buscar, centrada en la tareas del usuario, con información de las etapas a realizar y que no sea muy extensa.

10.1. No se muestran sugerencias automáticas al escribir en el buscador.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Implementar autocompletado y sugerencias en el buscador.

10.2. No existe una sección de ayuda o preguntas frecuentes accesible.

• Ranking de Severidad: 2 ➖ Problema de poca importancia.
• Posible solución: Crear una sección de ayuda/FAQ visible desde el menú principal.

10.3. No hay documentación sobre alérgenos o ingredientes especiales.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Añadir documentación sobre alérgenos y opciones para dietas especiales.

10.3. No hay documentación sobre alérgenos o ingredientes especiales.

• Ranking de Severidad: 4 ❌ Catástrofe.
• Posible solución: Añadir documentación sobre alérgenos y opciones para dietas especiales.

CONCLUSIONES Y MEJORAS GENERALES

• ⚠️ Jerarquía visual y consistencia: La web necesita organizar mejor la información y los elementos gráficos para que el usuario perciba de forma clara qué es lo más importante.
• ⚠️ Flujo de registro y pedidos: Actualmente no es fácil corregir errores; se recomienda diseñar opciones de retroceso, edición de campos y validaciones en tiempo real.
• ⚠️ Claridad en la interacción: Los botones y enlaces deben ser más visibles e intuitivos, con señales visuales que indiquen claramente dónde se puede clicar.
• ⚠️ Reducción del ruido visual: Es recomendable simplificar elementos superpuestos, transparencias y estímulos gráficos para ofrecer una experiencia más armónica y agradable.
• ⚠️ Confianza y profesionalidad: Mejorar la percepción de seguridad en pagos, mostrar información clara de contacto y transparencia en precios generará mayor confianza en los usuarios.
• ⚠️ Organización del contenido: Aplicar principios de Gestalt (proximidad, similitud, continuidad, cerramiento) ayudará a que la información se perciba de forma más estructurada y fácil de procesar.

🍕 Mejoras principales por cada principio Heurístico de la Web de Pizzcolabis

Aplicamos las 10 heurísticas de Nielsen a la web de Pizzcolabis para identificar problemas y proponer mejoras que optimicen la experiencia del usuario.

1️⃣ Visibilidad del estado del sistema

⚠️ Problema: El usuario no sabe en qué estado está su registro o pedido. 💡 Mejora: Mostrar indicadores de progreso y confirmaciones visibles en cada paso.

2️⃣ Hablar el lenguaje del usuario

⚠️ Problema: Términos confusos o poco familiares para clientes de pizzas. 💡 Mejora: Usar lenguaje sencillo y claro, coherente con la experiencia de compra.

3️⃣ Control y libertad del usuario

⚠️ Problema: No se puede retroceder ni corregir datos fácilmente. 💡 Mejora: Añadir botones de retroceso y edición de campos para mayor control.

4️⃣ Consistencia y estándares

⚠️ Problema: Botones, enlaces y estilos cambian según la sección. 💡 Mejora: Mantener colores, tipografías y estilos consistentes en toda la web.

5️⃣ Prevenir errores

⚠️ Problema: Permite introducir datos incorrectos sin aviso previo. 💡 Mejora: Implementar validaciones en tiempo real y mensajes claros antes de enviar formularios.

6️⃣ Reconocer mejor que recordar

⚠️ Problema: El usuario debe recordar pasos previos o información introducida. 💡 Mejora: Mostrar información relevante en cada paso y opciones visibles para guiarlo.

7️⃣ Flexibilidad y eficiencia de uso

⚠️ Problema: No hay atajos ni personalización para usuarios frecuentes. 💡 Mejora: Añadir pedidos recurrentes, autocompletado y accesos rápidos a productos favoritos.

8️⃣ Diseño estético y minimalista

⚠️ Problema: La página está sobrecargada con colores y elementos que distraen. 💡 Mejora: Simplificar el diseño, priorizando la información importante y usando un estilo limpio y armonioso.

9️⃣ Reconocer, diagnosticar y recuperarse de errores

⚠️ Problema: Los mensajes de error son poco claros o inexistentes. 💡 Mejora: Mostrar mensajes claros y sugerencias de solución para cada error.

🔟 Ayuda y documentación

⚠️ Problema: No hay instrucciones ni asistencia visible para completar pedidos o resolver dudas. 💡 Mejora: Incluir tutoriales breves, FAQs y chat de soporte para guiar al usuario.

👉🏻 Aquí os dejo un link a la tabla con los datos recogidos LINK TABLA