Introducción
La usabilidad es un factor clave en el éxito de cualquier aplicación móvil, especialmente en el competitivo mundo del e-commerce. Una buena experiencia de usuario puede ser la diferencia entre una venta concretada y un cliente frustrado.
En este post, llevaré a cabo un análisis heurístico de la aplicación móvil de Adidas en Colombia. El objetivo es evaluar su interfaz para identificar aciertos y problemas de usabilidad que afecten la experiencia del usuario.
Para realizar esta evaluación, he seguido el método de análisis heurístico de Jakob Nielsen. El proceso consistió en explorar los flujos clave de la aplicación (como la búsqueda, el filtrado y el proceso de checkout), comparando cada pantalla e interacción con los 10 principios heurísticos. Durante esta inspección, documenté con capturas de pantalla tanto los ejemplos positivos como los negativos para cada principio, para finalmente clasificar los problemas encontrados según su gravedad.
Lista de principios heurísticos – J Nielsen.
- Visibilidad del estado del sistema
- Coincidencia entre el sistema y el mundo real
- Control y libertad del usuario
- Consistencia y estándares
- Prevención de errores
- Reconocimiento en lugar de recuerdo
1. Visibilidad del estado del sistema
El sistema siempre debe mantener al usuario informado sobre lo que está ocurriendo, proporcionando retroalimentación adecuada en un tiempo razonable.
✅ Buen ejemplo: Aviso de «No reserva» y carga de pago
Como se ve en la captura, al entrar al carrito muestra un aviso claro de que «TUS ARTÍCULOS DEL CARRITO NO ESTÁN RESERVADOS». Esto gestiona las expectativas del usuario y le informa de una regla importante del sistema.
Además, al pulsar «PAGAR», la app muestra un estado de «Cargando detalles…», informando al usuario que la acción fue registrada y el sistema está trabajando.
❌ Mal ejemplo: Estado de «Agotado» oculto.
La app falla en visibilizar un estado clave en el listado de productos. Como se ve en la primera imagen, un producto se muestra como disponible. Sin embargo, al hacer clic en él, la siguiente pantalla recién revela que está «AGOTADO».
2. Coincidencia entre el sistema y el mundo real
El sistema debe «hablar el idioma del usuario», utilizando palabras, frases, iconos y conceptos que le resulten familiares, en lugar de términos técnicos o jerga interna. La información debe seguir un orden lógico y natural.
✅Buen ejemplo: Iconografía y lenguaje claros
La aplicación usa de forma excelente convenciones del mundo real para facilitar la navegación. Las categorías principales de «CALZADO» y «ROPA» están acompañadas de iconos universales (¿un zapato y una camiseta ?) que son inmediatamente reconocibles. Esto permite al usuario entender la sección de un vistazo, incluso antes de leer el texto.
❌ Mal ejemplo: Jerga ambigua «Mini Me»
La app falla en este principio al usar jerga de marketing. En la sección «Originals Store» aparece un filtro llamado «MINI ME». Este término no es universal y obliga al usuario a adivinar qué significa. ¿Es ropa para niños? ¿Ropa de adulto y niño a juego? ¿Una colección específica? Tras explorarlo, vi que contenía una mezcla de productos, lo que confirma la confusión.
3. Control y libertad del usuario
Este principio establece que los usuarios necesitan tener control sobre el sistema y la libertad de salir de estados no deseados. Siempre debe haber una «salida de emergencia» clara, y las acciones deben ser fáciles de deshacer.
✅ Buen ejemplo: Salida de emergencia clara en el checkout
La aplicación ofrece una «salida de emergencia» excelente en uno de los momentos más críticos: el proceso de pago. Al entrar a la pantalla de «PAGAR», se muestra un ícono «X» grande y claro en la esquina superior. Esto le da al usuario control total para abandonar el proceso en cualquier momento.
❌ Mal ejemplo: El ícono «❤️» realiza una acción inesperada.
Irónicamente, encontré un mal ejemplo de control en el «CARRITO DE COMPRA». Al lado de cada artículo, hay un ícono de corazón (❤️). La convención universal para este ícono es «Guardar en favoritos» , una acción que no debería afectar al carrito.
Sin embargo, al pulsarlo, la app elimina el artículo del carrito y lo mueve a la «LISTA DE DESEOS». Esto es una violación del control del usuario, ya que el sistema realiza una acción destructiva (borrar del carrito) que el usuario no solicitó explícitamente. Para revertirlo, el usuario se ve forzado a ir a otra sección y volver a añadir el producto.
4. Consistencia y estándares
Los usuarios no deberían tener que adivinar si diferentes palabras, iconos o acciones significan lo mismo. El diseño debe seguir las convenciones de la industria (estándares externos) y ser coherente consigo mismo (estándares internos).
✅ Buen ejemplo: El logo como botón «Home»
La aplicación respeta un estándar externo muy establecido: el logo de la marca funciona como un botón para regresar a la pantalla de inicio. Como se ve en la barra de navegación inferior, el logo de Adidas está siempre presente, permitiendo al usuario «reiniciar» su navegación.
❌ Mal ejemplo: Iconos idénticos para categorías diferentes
En la captura, se utiliza el mismo ícono de un zapato para dos categorías distintas: «ENTRENAR» y «CALZADO». Esto crea una ambigüedad innecesaria. ¿»ENTRENAR» se refiere solo a calzado de entrenamiento? ¿O es una categoría de actividades? El usuario no puede diferenciar las secciones por el ícono y se ve forzado a leer, ralentizando la navegación.
5. Prevención de errores
Un buen diseño no solo ayuda a los usuarios a recuperarse de los errores, sino que, idealmente, está diseñado para evitar que ocurran en primer lugar.
✅ Buen ejemplo: Indicador visual de producto agotado
La aplicación previene activamente un error común en el e-commerce: hacer clic en un producto no disponible. Cuando una variante de un producto (en este caso, un color) está agotada, la app la tacha con una línea diagonal. Esto comunica el estado de «no disponible» de forma inmediata y visual.
❌ Mal ejemplo: Botones de cierre juntos
En la sección de ayuda, al abrir una ventana modal (como la del chat), aparecen dos íconos «X» para cerrar: uno para el modal y otro para la sección principal. Estos dos botones están tan cerca que es extremadamente fácil tocarlos por error.
6. Reconocimiento en lugar de recuerdo
El diseño debe minimizar la carga cognitiva del usuario haciendo visibles las opciones, acciones y objetos. Es mejor que el usuario pueda «reconocer» la información en la pantalla en lugar de tener que «recordar» datos de una pantalla a otra.
✅ Buen ejemplo: Sección «Vistos recientemente»
Al mostrar un historial visual de los productos que el usuario ha consultado, la app reduce su carga de memoria. El usuario no tiene que recordar «cuál era esa camiseta que vi hace 10 minutos»; simplemente puede ir a esta sección y añadirla.
❌ Mal ejemplo: Ausencia de una función para «Comparar»
La app falla en este principio cuando un usuario necesita tomar una decisión de compra entre varios artículos. No ofrece una función para «Comparar» productos side by side. Si un usuario quiere decidir entre dos zapatillas basándose en su peso o materiales, se ve forzado a memorizar las especificaciones de una, navegar a la otra y comparar los datos de memoria.
7. Flexibilidad y eficiencia de uso
El diseño debe ser eficiente tanto para usuarios novatos como expertos. Debe permitir a los usuarios frecuentes (expertos) usar «atajos» o «aceleradores» para realizar tareas comunes más rápidamente.
✅ Buen ejemplo: Gesto de deslizar (swipe) para eliminar
El usuario experto puede simplemente deslizar un artículo hacia la izquierda para revelar la opción de eliminarlo. Este gesto es un atajo estándar en iOS y permite una gestión del carrito mucho más rápida.
❌ Mal ejemplo: No guardar datos recurrentes del usuario
A pesar de tener una cuenta y guardar datos como la dirección de envío, la app obliga al usuario a rellenar campos como «TIPO DE IMPUESTO» e «IDENTIFICACIÓN» en cada compra. Esto es un claro obstáculo para la eficiencia, ya que no «recuerda» al usuario experto y lo frena con tareas repetitivas.
8. Diseño estético y minimalista
Las interfaces no deben contener información irrelevante o que se necesite raramente. Cada elemento extra compite por la atención del usuario y disminuye la visibilidad de la información importante.
✅ Buen ejemplo: Selector de tallas minimalista
Al momento de «ELIGE TALLA», en lugar de usar un menú dropdown u otra opción más pesada, presenta un simple menú horizontal. Esto enfoca al 100% la atención del usuario en la tarea crítica de seleccionar su talla, eliminando cualquier distracción visual.
❌ Mal ejemplo: Sección «Originals Store» sobrecargada
Es un ejemplo de diseño «ruidoso» y sobrecargado. Hay demasiados elementos visuales compitiendo por la atención: una imagen de fondo, un título, un párrafo de texto, botones de filtro y tarjetas de categorías. Esta sobrecarga hace que sea difícil para el usuario procesar la información. Además, el texto de la descripción (en blanco) sobre una imagen oscura y con texturas tiene muy bajo contraste, dificultando la lectura y fallando tanto en estética como en usabilidad.
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores.
Los mensajes de error deben expresarse en lenguaje claro (sin códigos), indicar con precisión el problema y sugerir de forma constructiva una solución. Este principio es crucial, aunque en la práctica fue uno de los más difíciles de encontrar bien implementado.
✅ Buen ejemplo: Mensaje de error en código de descuento
La app maneja bien los errores al ingresar un código promocional. Si el código es incorrecto, muestra un mensaje claro: «Código promocional inválido». Más importante aún, ofrece una solución constructiva: «Por favor, revisa tu entrada (¡ingrésala tal como la ves!) e inténtalo de nuevo». Esto guía al usuario para que corrija el error por sí mismo.
❌ Mal ejemplo: Mensaje de error «límite de compra»
El mensaje «has alcanzado el límite de compra permitido» da el problema, pero no ofrece ninguna solución. No informa al usuario cuál es el límite ni cómo proceder (ej. «Ajusta la cantidad en tu carrito»). El único botón es «ACEPTAR», cierra el mensaje, pero no resuelve el problema y deja al usuario inconcluso.
10. Ayuda y documentación.
Aunque lo ideal es que un sistema se pueda usar sin ayuda, esta siempre debe estar disponible. La ayuda debe ser fácil de encontrar, relevante para la tarea del usuario y presentar pasos concretos.
✅ Buen ejemplo: Sección de «Preguntas» contextual
La app implementa esto muy bien al final de sus páginas de producto, con una sección clara de «¿PREGUNTAS?«. Es fácil de encontrar y es contextual. Además, da opciones claras para autoayuda («Consulta nuestra sección de ayuda») o ayuda humana («Chatear con un representante»).
❌ Mal ejemplo: Ausencia de ayuda en «Configuración»
La app falla al no ofrecer documentación en pantallas que pueden ser confusas, como la «CONFIGURACIÓN» de la cuenta. El flujo para llegar allí es poco intuitivo (a través de un ícono de rueda , nuevamente hacer tap en otro ícono de rueda), lo cual es confuso porque hace parecer que el ícono representa a la página anterior y no la opción a la que debes acceder para ir a la configuración de la cuenta («DATOS PERSONALES», «AGENDA DE DIRECCIONES», etc.) .
Listado priorizado de hallazgos y soluciones
Tras completar el análisis de los 10 principios, he identificado numerosos hallazgos. Sin embargo, no todos los problemas de usabilidad tienen el mismo impacto. Para priorizar cuáles deben solucionarse primero, he utilizado como criterio la escala de gravedad de usabilidad (Severity Ratings) de Jakob Nielsen.
Esta escala clasifica los problemas basándose en una combinación de tres factores:
- Frecuencia: ¿Qué tan común es que los usuarios se encuentren con este problema?
- Impacto: ¿Qué tan difícil es para el usuario superar este problema? ¿Impide que complete una tarea?
- Persistencia: ¿Es un problema que el usuario encuentra una sola vez o es un problema recurrente?
Combinando esto, se crea una escala de gravedad, generalmente de 0 a 4:
- 0 = No es un problema: Realmente no es un fallo de usabilidad.
- 1 = Cosmético: Un problema menor, estético. No necesita ser arreglado a menos que haya tiempo.
- 2 = Menor: Un problema de usabilidad menor. Frustra al usuario, pero puede superarlo y completar la tarea.
- 3 = Mayor: Un problema de usabilidad grave. Causa mucha frustración y es probable que impida a algunos usuarios completar la tarea.
- 4. = Catastrófico: Un problema crítico. Impide que todos los usuarios completen la tarea. Es un bloqueo total que debe arreglarse inmediatamente.
Basándome en esto, he creado el siguiente ranking (de mayor a menor gravedad) con los 5 hallazgos problemáticos encontrados, detallando una propuesta de solución para cada uno.
- Hallazgo (P3): El icono «❤️» en el carrito elimina el producto.
- Gravedad: 3 – Mayor.
- Solución propuesta: El icono «❤️» debe añadir el producto a «Deseos» pero sin eliminarlo del carrito de compras.
- Hallazgo (P6): Ausencia de una función para «Comparar» productos.
- Gravedad: 3 – Mayor.
- Solución propuesta: Implementar una función de «Comparar», permitiendo al usuario seleccionar 2 o más artículos y ver sus especificaciones (materiales, peso, precio) en una única pantalla lado a lado.
- Hallazgo (P7): No se guardan datos recurrentes (impuestos/ID) en el perfil.
- Gravedad: 3 – Mayor.
- Solución propuesta: Añadir campos para «Tipo de Impuesto» e «Identificación» en el perfil del usuario para que, una vez guardados, se rellenen automáticamente en futuras compras.
- Hallazgo (P2): Jerga confusa «Mini Me».
- Gravedad: 2 – Menor.
- Solución propuesta: Reemplazar el término «Mini Me» por categorías claras y estándar del mundo real, como «Niños», «Infantil» o «Colección Familiar».
- Hallazgo (P1): El estado «Agotado» está oculto en las páginas de categorías.
- Gravedad: 3 – Mayor.
- Solución propuesta: Mostrar la etiqueta o badge de «Agotado» directamente sobre la imagen del producto en las páginas de listado y categorías, no solo en la página de detalle.
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.
Debatecontribution 0en Análisis Heurístico – Adidas app (Col)
No hay comentarios.
Lo siento, debes estar conectado para publicar un comentario.