Les acheteurs en ligne ne lisent pas, ils jettent un coup d'œil

La plupart des acheteurs en ligne ne font pas de "shopping" au sens romantique du terme. Ils défilent rapidement sur un écran mobile avec leurs pouces, à moitié concentrés, multitâches comme vous le faites sur votre mobile, essayant de faire un travail en moins de 10 minutes, et la vérité brutale, facilement observée à l'aide de l'eye tracking, est simple : Ils ne lisent presque rien.

Ils jettent un coup d'œil aux images, en survolent juste assez pour se sentir en confiance et passent à autre chose. Si l'histoire, la taille ou la variante de votre marque n'existe que sous la forme d'un texte minuscule et peu contrasté sur un emballage magnifiquement conçu, elle pourrait tout aussi bien ne pas exister sur un écran mobile.

Ce billet de blog rassemble trois volets de mon travail :

Les résultats d'une étude d'eye tracking à grande échelle sur les acheteurs en ligne de produits alimentaires au Royaume-Uni, réalisée avec le logiciel Tobii Insight la norme Mobile Ready Hero Image soutenue par Cambridge et GS1, et la norme Rhino, l'outil de Neem qui automatise les tests de clarté visuelle et de contraste à grande échelle.

Ensemble, ils racontent une seule et même histoire : Si vous voulez gagner sur l'étagère numérique, vous devez concevoir vos produits en fonction de la façon dont les gens voient et décident en ligne, et non en fonction de la façon dont vous souhaiteriez qu'ils le fassent.

Comment l'eye tracking a conduit Unilever à créer une nouvelle norme pour les images primaires de l'e-commerce.

Lorsque nous avons mené une étude approfondie de Webcam Eye Tracking en ligne avec Tobii sur les quatre plus grandes chaînes de supermarchés britanniques, l'ampleur de l'étude était impressionnante : 58 gros consommateurs en ligne, 28 heures d'achats réels, 4 000 produits achetés et 4 600 pages saisies.L'objectif était de comprendre ce que les gens achètent et ce qu'ils recherchent, en plus de la vidéo et des interviews. L'objectif était de comprendre ce que les gens regardent, ignorent et font lorsqu'ils font leurs achats dans leur habitat naturel, et non dans le cadre d'un groupe de discussion fantaisiste. Nous avons travaillé à la fois sur mobile et sur ordinateur, et nous avons demandé aux participants de faire leurs achats hebdomadaires en ligne comme ils le faisaient habituellement, et nous avons enregistré ce qui se passait ensuite.

Les données ont fait voler en éclats un grand nombre d'hypothèses confortables. Il n'y a pas une seule façon "normale" de faire ses achats, mais il y a des styles de comportement clairs : Les "accros" de la recherche, les "listes de favoris" et les "accrocheurs de menus" qui parcourent les rayons.

L'élément qui fait mouche en permanence ? Les vignettes du paquet primaire. Les cartes thermiques, les rediffusions du regard et les tracés de fixation ont montré que de grandes parties de la page étaient tout simplement ignorées, mais que les acheteurs se fixaient presque toujours sur l'image principale du produit dans les listes et les résultats de recherche. Les résultats de l'Eye tracking ont permis aux parties prenantes de se rendre compte que les images existantes n'attiraient pas l'attention des acheteurs.

Les internautes parcouraient verticalement la colonne de vignettes, utilisant les images comme principal outil de sélection, et ne consultaient le texte que lorsque quelque chose n'était pas clair ou manquait. Si l'image ne communique pas la marque, le format, la variante et la taille d'un seul coup d'œil, les erreurs et la frustration augmentent.

Les 4W : Ce que les acheteurs doivent voir immédiatement

L'équipe Inclusive Design de l'Université de Cambridge et GS1 se sont appuyés sur les résultats de notre travail avec Tobii pour définir exactement ce qu'une vignette doit communiquer pour être véritablement "à l'écoute du consommateur". La conclusion s'est résumée à quatre questions simples — les 4W — auxquelles les acheteurs devraient pouvoir répondre à partir de l'image seule, sans lire le titre du produit :

• Qu'est-ce qu'une marque ? Un nom de marque ou un dispositif clair et reconnaissable.

• Quel format ? Le type de produit ou le mot-clé de la catégorie (par exemple, shampoing, crème glacée).

• Quelle variante ? L'élément clé de différenciation tel que l'arôme, le parfum ou la variante fonctionnelle.

• Quelle taille / quel nombre ? La quantité — millilitres, lavages, nombre de comprimés, taille des couches, etc.

La photographie conventionnelle de la face avant de l'emballage échoue souvent à la lisibilité du regard sur au moins l'un de ces points :

La taille et le nombre sont les échecs les plus fréquents : Sur l'étagère numérique, les repères de taille relatifs de l'emballage physique disparaissent, et le texte de l'emballage devient un flou illisible à l'échelle de la vignette. Les acheteurs n'aiment pas lire les longs titres des produits ; ils veulent confirmer ce qu'ils achètent par le seul aspect visuel, et la "mauvaise taille" est l'une des erreurs d'achat en ligne les plus fréquentes.

Lorsque les marques ont adopté de véritables images de référence prêtes pour le mobile, les résultats ont été mesurables.

Il ne s'agit pas de "colorier" —, mais d'une évolution matérielle du chiffre d'affaires résultant de la suppression d'une petite tuile, mais d'une tuile critique. Le travail récent de Neem avec Sodastream l'a encore confirmé avec une augmentation à deux chiffres pour la marque en ligne depuis l'ajout de visuels prêts pour le mobile.

Pourquoi le mobile rend tout cela non négociable

S'il ne s'agissait que de l'ordinateur de bureau, les marques pourraient encore s'en tirer avec une typographie minuscule, mais le mobile est désormais la principale porte d'entrée du commerce de détail. Le trafic a basculé de manière décisive : Près des trois quarts du trafic dans le commerce de détail se font sur mobile, et les acheteurs font défiler les pages en continu, ne consacrant souvent que 1,7 seconde par produit. 1,7 seconde par produit en parcourant rapidement les listes. L'écran moyen d'un smartphone est de 6,1 pouces L'écran moyen d'un smartphone est de 6,1 pouces, avec des zones d'image utilisables d'environ 90 pixels carrés pour une fiche produit La plupart des acheteurs sont multitâches, distraits et impatients.

Dans le même temps, la vue ne s'améliore pas. Les données démographiques et cliniques montrent que d'ici 2050 et au-delà, l'âge médian augmente et que l'accommodation oculaire — la capacité de l'œil à se concentrer sur les petits détails — diminue régulièrement à partir de 40 ans. De nombreux acheteurs de plus de 40 ans ont du mal à lire des textes de petite taille et à faible contraste, même dans des conditions idéales ; si l'on ajoute le mouvement, l'éblouissement, une vue sous-optimale et un écran encombré, la lisibilité s'effondre.

Les marques financent en effet des éléments d'information bien conçus qu'une grande partie de leur public ne peut littéralement pas lire au moment où il le souhaite. Dans un monde où la conversion mobile continue d'être à la traîne par rapport à l'ordinateur de bureau, alors que l'écart se réduit, ne pas agir revient à s'auto-saboter.

De l'idée à la norme : Des images de référence prêtes pour le mobile

Pour transformer ces idées en quelque chose d'évolutif, l'équipe Inclusive Design de l'Université de Cambridge, GS1 et les principaux distributeurs de produits de grande consommation ont créé des lignes directrices formelles pour la conception d'une image de héros mobile. lignes directrices officielles sur l'image de héros prête pour le mobile Ces lignes directrices ont été approuvées à l'échelle mondiale en 2022.

Les normes GS1 ont trois fonctions importantes :

Tout d'abord, ils définissent le rôle d'une image Mobile Ready Hero
Une représentation simplifiée, épurée et optimisée pour l'écran de l'emballage qui donne la priorité aux 4W en petit format, plutôt qu'une photographie littérale de l'emballage complet. Cela signifie souvent un zoom sur le dispositif de la marque, l'ajout d'une pastille claire avec la taille ou le nombre pour les emballages "grands et minces", et l'élimination des allégations et des bruits non essentiels.

Deuxièmement, ils ont établi des règles strictes pour préserver la cohérence et éviter l'"Armageddon visuel"

Les appels de taille doivent se situer dans un losange normalisé en bas à droite, en utilisant Open Sans Bold en noir pour la lisibilité, sur un fond blanc propre qui correspond aux spécifications générales de l'image de GS1. Le losange ne peut contenir que la taille ou le nombre — et non des slogans marketing — et aucun élément flottant n'est autorisé ailleurs sur le canevas.

Troisièmement, ils lient les décisions de conception à des tests objectifs

Les lignes directrices sont directement liées au test de clarté visuelle de Cambridge, qui évalue si une image est suffisamment claire pour être reconnue à la taille d'une vignette mobile ; si une image échoue à ce test, elle n'est, par définition, pas prête pour le mobile. Des modèles Photoshop en source ouverte et des exemples de mise en page sont mis à la disposition des fournisseurs et des détaillants pour que la conformité ne soit pas une devinette.

Le résultat net est un langage partagé entre les marques, les agences et les détaillants : Au lieu de débattre des goûts, tout le monde peut dire si une image respecte les 4W dans des conditions de clarté et de contraste contrôlées sur un écran de téléphone classique.

L'écart : On ne peut pas réparer ce que l'on ne teste pas

Même avec une norme mondiale solide, la plupart des organisations se heurtent au même mur : L'échelle

Un portefeuille multimarque typique peut facilement couvrir des dizaines de milliers d'unités de stock à travers plusieurs détaillants et marchés. En pratique, il est impossible de vérifier manuellement la taille minimale du texte, l'épaisseur du trait, le contraste des couleurs et la clarté de chaque image en fonction de la taille de l'écran.

De nombreuses équipes s'en remettent à l'œil : Si un concepteur ou un spécialiste du marketing peut lire l'information sur un écran à haute résolution dans un bureau bien éclairé, il suppose que tout va bien. D'autres essaient d'effectuer des vérifications manuelles du contraste WCAG, couleur par couleur, ou font confiance aux agences pour faire ce qu'il faut sans contrats explicites ni vérifications automatisées.

C'est là que les aspirations bien intentionnées en matière d'accessibilité meurent généralement. L'intention est là, mais la charge opérationnelle est trop lourde, de sorte que les équipes procèdent à des vérifications ponctuelles et espèrent que tout ira pour le mieux. À l'heure où les régulateurs (et les groupes d'activistes) commencent à examiner de près l'accessibilité numérique dans le commerce électronique du secteur privé, cet "espoir" est une position de risque coûteuse.

Automatiser la clarté et le contraste à grande échelle

Rhino a été conçu précisément pour combler cette lacune. Il teste les images numériques en masse et à grande vitesse en utilisant deux composants essentiels : L'algorithme de contraste de l'APCA (un élément essentiel de la réflexion émergente sur les WCAG 3) et le modèle de clarté visuelle de Cambridge qui sous-tend la norme Mobile Ready Hero. En d'autres termes, il encode la science et les normes dans un pipeline automatisé et reproductible.

Le processus est simple : Le système utilise Azure AI Computer Vision et OCR pour détecter tout le texte de l'image — horizontal, vertical, angulaire ou incurvé — puis isole le texte de l'arrière-plan à l'aide d'un algorithme propriétaire en trois phases. Chaque paire texte-arrière-plan est ensuite testée avec l'APCA pour déterminer si elle respecte les seuils de contraste AA et AAA définis, et l'algorithme de Cambridge mesure la hauteur du texte, la largeur du trait et la clarté pour des tailles cibles spécifiques telles que le héros mobile, la bannière web ou les images secondaires.

Les résultats sont présentés sous forme de drapeaux de réussite/échec et d'avis pour chaque élément de texte, avec des superpositions et des mesures détaillées disponibles pour les concepteurs et les réviseurs juridiques. Les équipes peuvent étiqueter des ensembles d'images, exporter des rapports, des historiques de recherche et intégrer Rhino via l'API dans des DAM, des CMS ou des flux de travail d'emballage, de sorte que les vérifications fassent partie du pipeline de production quotidien plutôt que d'être un audit ponctuel. Rhino prend en charge des exclusions réalistes pour les textes décoratifs ou les phrases de marque, ce qui permet de réduire le bruit et de concentrer les efforts là où ils affectent réellement les acheteurs.

De l'utile à l'agréable au non-négociable

Si l'on considère l'ensemble de ces éléments, la direction à prendre est claire. L'eye tracking montre que les acheteurs ignorent systématiquement la plupart des textes des pages d'affichage des produits, mais qu'ils utilisent presque toujours les images comme principal point d'ancrage de leur décision.

Les recherches de l'université de Cambridge, ainsi que mon travail avec GS1, montrent exactement ce que ces images doivent véhiculer et comment les concevoir pour les petits écrans. La réalité démographique et physiologique montre qu'un public vieillissant a besoin d'un texte plus grand et plus contrasté pour participer pleinement. La performance de ces images sur les détaillants et les plateformes de commerce peut ensuite être facilement testée à l'aide d'outils du portefeuille de Tobii, tels que
Sticky by Tobii ou en utilisant un Tobii Pro Spark Eye Tracker combiné avec le logiciel Tobii Pro Lab pour effectuer des tests sur des appareils mobiles ou de bureau.

Pour les produits de grande consommation et les détaillants, il ne s'agit plus d'un sujet marginal.

Il se situe à l'intersection de la croissance, de l'inclusion et du risque :

a) Croissance: Parce que l'élimination des frictions au point de choix augmente la conversion et la part de la recherche dans le canal où se trouve désormais la majeure partie du trafic.

b) Inclusion: Parce que les visuels accessibles et lisibles permettent aux acheteurs âgés et malvoyants de participer de manière autonome plutôt que d'être exclus par un texte minuscule et peu contrasté.

c) Risque: Les régulateurs et les groupes d'activistes examinent de plus en plus attentivement les expériences numériques qui discriminent discrètement de larges pans de la population avec la nouvelle loi européenne sur l'accessibilité, ce qui est désormais au centre de l'attention, les détaillants français étant déjà ciblés par les activistes.

Voici comment gagner le coup d'œil dans le rouleau...

Les marques qui remporteront la prochaine phase du commerce numérique seront celles qui respecteront la façon dont les gens voient et décident en ligne. Cela signifie qu'il faut accepter la vérité inconfortable des données d'eye tracking : Les acheteurs ne lisent pas, ils jettent un coup d'œil. C'est pourquoi la conception de chaque pack, de chaque image de héros et de chaque bannière implique de comprendre que le texte des images doit être "lisible au premier coup d'œil".

Pour passer un coup d'œil de lisibilité :

1. Désencombrez, supprimez tous les petits textes, et plus de 4 messages, c'est trop.

2. Choisissez des couleurs très contrastées pour le texte par rapport à l'arrière-plan.

3. Évitez les dégradés derrière le texte — utilisez un design plat.

4. Utilisez une règle empirique : le texte doit représenter au minimum 8 % de la taille de la toile.

5. Évitez les TITLE CASE qui sont plus difficiles à lire.

6. Effectuez les deux tests, contraste et clarté, lors de la conception.

7. Utilisez Eye tracking de Tobii pour prouver que les gens jettent un coup d'œil ou se fixent sur vos nouveaux héros.

8. Utiliser Rhino de Neem pour prouver que vos dessins finaux sont lisibles par le regard.