Techniques d’Eye-Tracking pour développer son site web
Mettre en place un UX efficace pour mieux convertir
“La possibilité de vivre commence dans le regard de l’autre.” Michel Houellebecq
Avoir quelque chose à vendre, c’est bien. Vendre, c’est encore mieux.
Imaginez-vous passer devant une boutique vide.
Aucune inscription sur la devanture. Aucun produit exposé. Derrière la baie vitrée, une personne vous attend debout. Seule. Les mains dans les poches.
Vous entrez ?
… moi non plus !
Personne ne viendra nous demander de sortir ce que vous avez à vendre. Ce qui n’est pas vu n’existe pas (paradoxe du chat de Schrödinger).
L’exposition est une notion centrale de l’expérience de vente.
Une expérience visuelle
Notre boutique ici, c’est notre site web. Comme dans la rue, naviguer sur internet est avant tout une expérience visuelle. Jusque ici, rien de magique.
Là où ça devient intéressant, c’est que le mouvement de notre œil sur une page web n’est pas dû au hasard, il est parfaitement prédictible.
Un ensemble de techniques développées récemment permettent d’enregistrer les mouvements oculaires, imperceptibles à l’oeil nu: on les appelle techniques d’Eye-Tracking. Appliquées aux sites web, elles nous plongent dans la tête d’un utilisateur qui atterrit sur notre site, pour suivre le cheminement de son regard.
Le KPI de l’attention
On utilisera des “cartes thermiques”, en anglais heatmap. Les heatmaps font correspondre un code couleur à des régions selon la fréquence avec laquelle un événement s’y produit. Très utiles pour simplifier la visualisation de données.
Elles permettent dans notre cas de reconstituer le parcours de l’oeil (ou du curseur) sur notre site web ! Pourquoi, me direz-vous ?
Au final ils auront le temps de voir tout ce qui est important !
Pas vraiment ..
Malgré tout le mal qu’on se donne en construisant notre site, peu de gens liront tout notre contenu. Il n’y a pas que nous sur internet. A vrai dire, la majorité n’en verra pas plus de 20%.
Et ce n’est pas la faute à votre site ! (pas que)
Notre cerveau est programmé pour se créer une impression générale en quelques secondes. Le temps d’attention moyen d’un être humain est descendu sous la barre des 8 secondes, soit moins que celui d’un poisson rouge.
Ce qui veut dire qu’en 7 secondes, une personne évalue non seulement votre produit mais votre entreprise dans son ensemble. On a 7 secondes pour être jugé. Paye ta première impression.
Soigner la première impression
C’est là que nos heatmaps prennent tout leur intérêt. On doit s’adapter à un mouvement des yeux instinctif. Ce qui nous fait aller à l’essentiel : sachant qu’on ne peut pas tout montrer, que doit-on absolument montrer ?
Mon conseil:
- Définir 3/4 éléments clés: logo, phrase d’accroche, votre promo super alléchante, une vidéo de démo.. c’est à vous de voir ce qui tend le plus vers votre Aha moment. Ce qui peut vous permettre de capter l’attention (en provoquant un sentiment de surprise, par exemple).
- Les mettre en valeur: en jouant sur leur taille, leur aspect, couleur ou positionnement.. en détaillant le plus possible ces éléments “vitrines”.
Des startups comme Tobii mettent en vente un hardware d’Eye-Tracking très efficace, pour ceux qui ont les moyens de se l’offrir. Pour les autres, il y a Hotjar. Outil analytics gratuit, il met à disposition une heatmap qui reproduit les mouvements de souris. Facile à implémenter, il donne également un visuel de la profondeur du scroll sur votre page mobile.
Chez BLD, il nous a permis d’épurer notre menu, supprimant les éléments qui diluaient notre call-to-action ainsi que les champs du menu sur lesquels personne ne clique.
Prendre en compte le flow
Après la première impression, le chemin. La manière la plus naturelle pour un œil d’analyser une page web suit le schéma du F-pattern. Ce mouvement, qui commence en haut à gauche (en fonction du sens de lecture de notre culture) se déplace ensuite horizontalement vers la droite, puis descend scanner une nouvelle ligne - dessinant la forme un F.
Tout au long de ce F, on constate une perte d’attention progressive. Prendre en compte ce pattern aide à optimiser son UX pour le rendre plus clair et plus percutant. Voici quelques recommandations :
- Le premier paragraphe doit résumer le contenu du texte
- Les idées importantes d’un titre doivent être placées au début
- Possibilité d’utiliser un style d’écriture en pyramide inversée
- Diviser notre page en blocs (plus de techniques ici)
Certains visuels ne sont pas centrés sur du texte, mais plutôt sur un bloc image. L’oeil suit alors une trajectoire définie par le Z-pattern:
Comprendre ces mécanismes aide à simplifier son visuel pour bien mettre en valeur son call-to-action. Et augmenter son taux de conversion.
Enfin, ne pas oublier que de manière générale le regard reste attiré par ce qui est jaune et qui brille ;)
En espérant que cet article vous ait été utile,
Amine
