Los compradores en línea no leen, ojean

La mayoría de los compradores en línea no están "comprando" en el sentido romántico. Están desplazándose rápidamente por la pantalla de un móvil con los pulgares, medio concentrados, haciendo varias cosas a la vez como usted hace en su móvil, intentando hacer un trabajo en menos de 10 minutos, y la brutal verdad, fácilmente observable mediante eye tracking, es simple: Apenas leen nada.

Echan un vistazo a las imágenes, hojean lo suficiente para sentirse seguros y siguen adelante. Si la historia, el tamaño o la variante de su marca solo existen en forma de texto diminuto y con poco contraste en un envase de gran belleza, es posible que no existan en una pantalla móvil.

Esta entrada de blog reúne tres vertientes de mi trabajo:

Los resultados de un estudio de Eye tracking a gran escala sobre los compradores de comestibles online en el Reino Unido, realizado con la tecnología Tobii Insight el estándar Mobile Ready Hero Image, respaldado por Cambridge y GS1, y Rhino, la herramienta que automatiza las pruebas de contraste y claridad visual a gran escala.

Juntos cuentan una única historia: Si quiere triunfar en la estantería digital, debe diseñar en función de cómo ven y deciden realmente los usuarios en Internet, no de cómo desearía que lo hicieran.

Cómo el eye tracking llevó a Unilever a crear una nueva norma para las imágenes primarias de comercio electrónico

Cuando realizamos con Tobii un estudio exhaustivo de eye tracking en los "cuatro grandes" supermercados del Reino Unido, la magnitud del estudio ya era considerable: 58 grandes compradores online, 28 horas de compra real, 4.000 productos comprados y 4.600 páginas capturadas.además de vídeos y entrevistas. El objetivo era comprender lo que la gente realmente mira, ignora y actúa cuando compra en su hábitat natural, no en la fantasía de un grupo de discusión. Hicimos la compra tanto desde el móvil como desde el ordenador y pedimos a los participantes que hicieran su compra semanal en línea como hacían habitualmente.

Los datos hicieron saltar por los aires muchas suposiciones cómodas. No había una única forma "normal" de comprar, pero sí estilos de comportamiento claros: Los "adictos a la búsqueda", que buscan primero, los "inteligentes", que se guían por listas de favoritos, y los "que se quedan con el menú", que ojean los departamentos.

¿Cuál es el elemento que más destaca? Las miniaturas de los envases primarios. Los mapas de calor, las repeticiones de la mirada y los gráficos de fijación mostraron que gran parte de la página simplemente se ignoraba, pero los compradores casi siempre se fijaban en el mosaico de la imagen del producto principal en las listas y los resultados de búsqueda. Los resultados del Eye tracking demostraron una y otra vez que las imágenes existentes no captaban la atención del comprador.

La gente escaneaba verticalmente la columna de miniaturas, utilizando las imágenes como principal herramienta de selección, y sólo se sumergía en el texto cuando algo no estaba claro o faltaba. Si la imagen no comunicaba la marca, el formato, la variante y el tamaño de un vistazo, aumentaban los errores y la frustración.

Las 4W: Lo que los compradores deben ver al instante

Los resultados de nuestro trabajo con Tobii sentaron las bases para que el equipo de Diseño Inclusivo de la Universidad de Cambridge y GS1 definieran exactamente lo que debe comunicar una miniatura para ser realmente "lo primero para el comprador". La conclusión se redujo a cuatro preguntas sencillas — las 4Ws — que los compradores deberían ser capaces de responder a partir de la imagen, sin leer el título del producto:

• ¿Qué marca? Una marca o dispositivo claro y reconocible.

• ¿Qué formato? El tipo de producto o la palabra clave de la categoría (por ejemplo, champú, helado).

• ¿Qué variante? El diferenciador clave, como sabor, fragancia o variante funcional.

• ¿Qué tamaño / cantidad? La cantidad — mililitros, lavados, número de pastillas, tamaño del pañal, etc.

La fotografía convencional de la parte frontal del envase suele fallar en la legibilidad de la mirada en al menos uno de estos aspectos:

El tamaño y el recuento son los fallos más comunes: En la estantería digital, las indicaciones de tamaño relativo del envase físico desaparecen, y los pequeños textos del envase se convierten en un borrón ilegible a escala miniatura. A los compradores no les gusta leer largos títulos de los productos; quieren confirmar lo que compran solo con el aspecto visual, y la "talla equivocada" es uno de los errores más frecuentes en las compras en línea.

En los casos en que las marcas adoptaron auténticas imágenes de héroe preparadas para móviles, los resultados fueron cuantificables.

No se trata de "colorear" —, sino de un movimiento material de los ingresos al eliminar la fricción en una pequeña, pero fundamental, baldosa. El trabajo reciente de Neem con Sodastream lo ha vuelto a confirmar, con un aumento de dos dígitos de la marca online desde que se añadieron elementos visuales listos para móviles.

Por qué el móvil hace que todo esto no sea negociable

Si sólo se tratara del escritorio, las marcas aún podrían salirse con la suya con una tipografía diminuta, pero el móvil es ahora la principal puerta de entrada al comercio minorista. El tráfico se ha inclinado de forma decisiva: Alrededor de tres cuartas partes de todo el tráfico minorista es móvil, y los compradores se desplazan continuamente, a menudo gastando tan poco como 1,7 segundos por producto en un rápido barrido por los listados. La pantalla media de un smartphone es 6,1 pulgadas La pantalla media de un smartphone es de 6,1 90 píxeles cuadrados para una ficha de producto y la mayoría de los compradores son multitarea, distraídos e impacientes.

Al mismo tiempo, la vista no mejora. Los datos demográficos y clínicos muestran que a partir de 2050 la edad media aumenta, y la acomodación ocular — la capacidad del ojo para enfocar pequeños detalles — disminuye constantemente a partir de los 40 años. Muchos compradores de más de 40 años tienen problemas con los textos pequeños y de bajo contraste incluso en condiciones ideales; si a esto le añadimos el movimiento, el deslumbramiento, una vista subóptima y una pantalla abarrotada, la legibilidad cae por los suelos.

En efecto, las marcas están financiando activos muy bien elaborados que una parte significativa de su audiencia literalmente no puede leer en el momento de la elección. En un mundo en el que la conversión móvil sigue estando por detrás de la de escritorio, a medida que la brecha se reduce, no actuar es un autosabotaje.

Del conocimiento a la norma: Imágenes de héroe preparadas para móviles

Para convertir estos conocimientos en algo escalable, el equipo de Diseño Inclusivo de la Universidad de Cambridge, GS1 y los principales fabricantes de bienes de consumo crearon unas directrices formales de directrices formales Mobile Ready Hero Image que se aprobaron en todo el mundo en 2022.

Los estándares GS1 hacen tres cosas importantes:

En primer lugar, definen la función de una imagen Mobile Ready Hero
Una representación simplificada, despejada y optimizada para la pantalla del envase que da prioridad a las 4W en un tamaño pequeño, en lugar de una fotografía literal del envase completo. Esto significa a menudo ampliar el dispositivo de la marca, añadir un rombo claro con el tamaño o el recuento para los envases "altos y delgados", y eliminar los reclamos no esenciales y el ruido.

En segundo lugar, establecen normas estrictas para preservar la coherencia y evitar el "Armagedón Visual"

Las menciones de talla deben situarse en un rombo estandarizado en la parte inferior derecha, utilizando Open Sans Bold en negro para facilitar la legibilidad, sobre un fondo blanco limpio que se ajuste a las especificaciones generales de imagen de GS1. El rombo sólo puede contener el tamaño o el recuento —, no eslóganes de marketing —, y no se permiten elementos flotantes en ninguna otra parte del lienzo.

En tercer lugar, vinculan las decisiones de diseño a pruebas objetivas

Las directrices enlazan directamente con la prueba de claridad visual de Cambridge, que evalúa si una imagen es lo bastante clara para ser reconocida a tamaño de miniatura para móviles; si una imagen no supera esta prueba, por definición no está preparada para móviles. Se ponen a disposición de proveedores y minoristas plantillas de Photoshop de código abierto y ejemplos de diseño para que el cumplimiento no sea una conjetura.

El resultado neto es un lenguaje compartido entre marcas, agencias y minoristas: En lugar de debatir sobre gustos, todo el mundo puede hablar sobre si una imagen ofrece las 4W bajo umbrales de claridad y contraste controlados en una pantalla de teléfono típica.

La brecha: No se puede arreglar lo que no se prueba

Incluso con una norma global sólida, la mayoría de las organizaciones chocan contra el mismo muro: Escala

Una cartera multimarca típica puede abarcar fácilmente decenas de miles de SKU en múltiples minoristas y mercados. En la práctica, es imposible comprobar manualmente el tamaño mínimo del texto, la anchura de los trazos, el contraste de color y la claridad de cada imagen para distintos tamaños de pantalla.

Muchos equipos recurren al "globo ocular": Si un diseñador o comercial puede leerlo en un monitor de alta resolución en una oficina bien iluminada, asume que está bien. Otros intentan realizar comprobaciones manuales de contraste WCAG color a color, o confían en que las agencias hagan lo correcto sin contratos explícitos ni comprobaciones automatizadas.

Aquí es donde suelen morir las aspiraciones de accesibilidad bienintencionadas. La intención está ahí, pero la carga operativa es demasiado pesada, así que los equipos hacen alguna que otra comprobación puntual y esperan lo mejor. En un momento en el que los reguladores (y los grupos activistas) están empezando a examinar la accesibilidad digital en el comercio electrónico del sector privado, esa "esperanza" es una postura de riesgo muy cara.

Automatización de la claridad y el contraste a escala

Rhino se creó precisamente para colmar esta laguna. Realiza pruebas masivas de imágenes digitales a gran velocidad utilizando dos componentes fundamentales: El algoritmo de contraste APCA (una parte fundamental del pensamiento emergente WCAG 3) y el modelo de claridad visual de Cambridge que sustenta la norma Mobile Ready Hero. En otras palabras, codifica la ciencia y las normas en un proceso automatizado y repetible.

El flujo de trabajo es sencillo: El sistema utiliza Azure AI Computer Vision y OCR para detectar todo el texto de la imagen — horizontal, vertical, en ángulo o curvado — y, a continuación, aísla el texto del fondo mediante un algoritmo patentado de tres fases. A continuación, cada par de texto-fondo se prueba con APCA para evaluar si cumple los umbrales de contraste AA y AAA definidos, y el algoritmo de Cambridge mide la altura del texto, la anchura del trazo y la claridad para tamaños de destino específicos como héroe móvil, banner web o imágenes secundarias.

Los resultados se presentan en forma de indicadores claros de aprobado/no aprobado y de aviso para cada elemento de texto, con superposiciones y métricas detalladas disponibles para diseñadores y revisores legales. Los equipos pueden etiquetar conjuntos de imágenes, exportar informes, buscar en el historial e integrar Rhino mediante API en DAM, CMS o flujos de trabajo de empaquetado, para que las comprobaciones formen parte del proceso de producción diario y no de una auditoría puntual. Además, Rhino admite exclusiones realistas para texto decorativo o frases de marca, lo que reduce el ruido y concentra el esfuerzo donde realmente afecta a los compradores.

De "bonito" a innegociable

Si juntamos todo esto, la dirección a seguir está clara. Eye tracking muestra que los compradores ignoran sistemáticamente la mayor parte del texto escrito de la página de presentación del producto, pero casi siempre utilizan las imágenes como principal ancla de decisión.

Las investigaciones de la Universidad de Cambridge, junto con mi trabajo con GS1, muestran exactamente qué deben transmitir esas imágenes y cómo diseñarlas para pantallas pequeñas. La realidad demográfica y fisiológica demuestra que un público que envejece necesita textos más grandes y de mayor contraste para participar plenamente. El rendimiento de estas imágenes en los minoristas y las plataformas de comercio puede probarse fácilmente con herramientas de la cartera de Tobii, como
Sticky by Tobii o utilizando un Tobii Pro Spark Eye tracker combinado con Tobii Pro Lab para realizar pruebas en dispositivos móviles o de sobremesa.

Para las empresas de gran consumo y los minoristas, ya no se trata de un tema de diseño marginal.

Se sitúa en la intersección del crecimiento, la inclusión y el riesgo:

a) Crecimiento: Porque la eliminación de fricciones en el punto de elección aumenta la conversión y la cuota de búsqueda en el canal en el que reside actualmente la mayor parte del tráfico.

b) Inclusión: Porque los elementos visuales accesibles y legibles permiten a los compradores mayores y con baja visión participar de forma independiente, en lugar de quedar excluidos por un texto diminuto y de bajo contraste.

c) Riesgo: La nueva Ley Europea de Accesibilidad pone cada vez más en el punto de mira a los reguladores y grupos de activistas que vigilan las experiencias digitales que discriminan silenciosamente a amplios sectores de la población, y los minoristas franceses ya están en el punto de mira de los activistas.

He aquí cómo ganar la mirada en el pergamino...

Las marcas que ganen la próxima fase del comercio digital serán las que respeten la forma en que la gente ve y decide realmente en Internet. Eso significa aceptar la incómoda verdad de los datos de Eye tracking: Los compradores no leen, echan un vistazo. así que diseñar cada envase, imagen principal y banner significa entender que el texto de las imágenes debe ser "legible con la mirada".

Para pasar miradas de legibilidad:

1. Despeje, elimine todo el texto pequeño, y más de 4 mensajes es demasiado.

2. Elige colores de alto contraste para el texto y el fondo.

3. Evite los degradados detrás del texto — utilice un diseño plano.

4. Utiliza una regla general: el texto debe ocupar como mínimo el 8% del tamaño del lienzo.

5. Evita TITLE CASE es más difícil de leer.

6. Realiza ambas pruebas, Contraste y Claridad, mientras diseñas.

7. Utilice Eye tracking de Tobii para probar que la gente mira / se fija en tus nuevos diseños.

8. Utilice Rhino de Neem para demostrar que sus diseños finales se pueden leer con la mirada.