Qu’est-ce qu’une Heatmap ? La définition

Une Heatmap (ou carte thermique en français) est une représentation visuelle de données concernant une interface. Dans le contexte de l’UX et de l’optimisation du taux de conversion, la heatmap nous permet de d’enregistrer et de quantifier le comportement des utilisateurs concernant la souris et le trackpad.

Finalement, les heatmaps peuvent concerner différentes catégories de données. Mais en général, elles sont réalisées à partir des mouvements de souris, des clics et du scroll.

À première vue, la heatmap peut être une bonne solution pour comprendre le comportement des utilisateurs sur un site web par exemple.

Néanmoins, cette technique a quelques limites. Il est d’abord nécessaire d’avoir un trafic et un nombre de pages vues acceptables pour obtenir des heat maps significatives. On parle de minimum 2000 - 3000 pages vues par design et par appareil (mobile et bureau). Rien ne sert de se fier à des heatmaps basées sur 100 utilisateurs par exemple, vous ne serez pas sûr à 100% que ces résultats reflètent la réalité avec aussi peu de pages vues.

La heatmap est un retour visuel mais il ne concerne pas qu’une seule donnée. Elle peut calculer plusieurs types de retour. Nous allons voir quels sont les différents types de heat maps.

La heatmap est donc une méthode de recherche assez poussée qui nécessite déjà un minimum de trafic sur son site. La heat map n'est donc pas à utiliser au départ d'un projet web. Le mieux, au début, est de se concentrer sur l'optimisation de l'UX grâce à des bonnes pratiques.

Heatmap basée sur le survol

C’est le type de heatmap le plus connu et le plus utilisé. Lorsque l’on pense à heatmap, on pense en général à celui-ci.

La heatmap basée sur le survol vous montre les zones où les utilisateurs ont survolé avec leur souris sur une page en question. On peut donc assimiler l’endroit où les utilisateurs survolent et où ils regardent sur la page.

Des tests utilisateurs avec des outils spécifiques sont possibles pour faire un réel suivi des yeux, un suivi oculaire. Avec ce genre de tests, on peut donc comprendre et observer parfaitement où les utilisateurs regardent sur une page et comprendre comment ils naviguent sur les pages.

La heatmap basée sur le survol tente donc de copier le suivi oculaire tant bien que mal. En effet, les gens peuvent regarder des éléments d’une page sans les survoler avec leur souris. Les résultats ne sont donc pas parfaitement convaincants.

En 2010, des chercheurs en UX ont réalisé des tests permettant d’affirmer ceci :

• Seulement 6% des personnes ont montré certaine corrélation verticale entre le mouvement de souris et le suivi des yeux.
  
• 19% des personnes ont montré une corrélation horizontale entre le mouvement de la souris et le suivi des yeux.
  
• 10% ont survolé un lien, puis ont continué à lire autour de la page en regardant d’autres choses.

Il est donc difficile d’apporter beaucoup d’importance à ces y heatmaps, elles ne veulent finalement pas dire grand chose mis à part quelques indices concernant le comportement des utilisateurs.

Heatmap basée sur le clic

La heatmap basée sur des clics permet d’observer les zones où les utilisateurs cliquent le plus.

Pour représenter ça plus efficacement, le bleu signifie peu de clics, le rouge indique plus de clics tandis que les couleurs blanches et jaunes désignent un nombre de clics moyen.

Ce code couleur permet de montrer explicitement le comportement des utilisateurs et de comprendre l’importance de l’optimisation de l’expérience utilisateur globale sur un site. La heatmap est une bonne solution également pour faire comprendre des données à des personnes qui ne sont pas expertes.

Pour prendre un exemple d’utilisation de la heatmap basée sur le clic. Imaginons que vous observez beaucoup de clics sur une photo qui n’est pas cliquable. Et bien vous pouvez en déduire que les utilisateurs cherchent à cliquer sur la photo en attendant un événement, un zoom sur la photo par exemple.

La heatmap basée sur le clic permet d’observer donc sur quoi les utilisateurs cliquent et donc de modifier votre site par rapport aux comportements observés.

Heatmap basée sur l’attention

La heatmap basée sur l’attention des utilisateurs permet de voir quelles sont les zones des pages les plus vues en termes de temps de visionnage en prenant en compte le scroll vertical et même horizontal.

Cela vous permet donc de comprendre quelles sont les parties qui attirent l’attention des utilisateurs. Cela peut donc grandement vous aider dans la refonte de vos pages.

De plus ce type d’heatmap prend en compte les différentes dimensions d’écran et donc le responsive. Il est donc possible de comprendre l’attention des utilisateurs concernant des pages sur mobile, ordinateur et tablette.

Heatmap basée sur le scroll

La heatmap basée sur le scroll permet d’observer à quelle distance les utilisateurs défilent sur une page. Cette heat map est particulièrement efficace pour comprendre où les utilisateurs abandonnent la navigation.

Pour les longues pages de services, les landing page de SaaS ou les fiches produits e-commerce, cette heatmap est très utile pour les longues pages avec un contenu important et technique.

En règle générale, plus la page est longue, moins les utilisateurs iront jusqu’au bout, et c’est logique. Mais cette heatmap vous permet de mieux comprendre où cela peut bloquer et donc d’optimiser la mise en page et la hiérarchisation de votre contenu. Par exemple insérer les éléments les plus importants en haut de la page par exemple.

Ce sont des données quantitatives extrêmement précises que vous ne pouvez pas voir sur des outils classiques comme Google Analytics. Alors testez et profitez-en.

Enregistrement de session d’utilisateur

Les enregistrements des sessions ne sont pas directement des heatmaps mais ce sont grâce à elles que des heatmaps peuvent être créées sur des logiciels. Les replays de session d’utilisateur permettent d'enregistrer les sessions vidéos des visiteurs qui consultent vos pages.

Les replays vidéos ressemblent donc à des tests utilisateurs, dans la mesure où vous observez la navigation exacte de l’utilisateur. La différence est que vous ne pouvez pas donner de script à l’utilisateur, et vous ne pouvez pas lui parler en temps réel.

Contrairement à la heatmap donc les enregistrements de session sont donc des données qualitatives qui vont vous permettre de détecter des problèmes précis concernant la navigation de votre interface.

Pour les relectures de sessions, vous pouvez donc observer des comportements et des actions très intéressants comme :

• Le remplissage et l’envoie d’un formulaire
  
• La manipulation d’un panier
  
• L’utilisation du menu
  
• L'utilisation de carrousel

Si vous avez une page qui ne fonctionne pas comme vous le voudriez en termes de conversion, la relecture vidéo des sessions peut être une excellente solution donc.  

Finalement, le replay vidéo n’a donc qu’un seul inconvénient, cela prend du temps. En effet, pour se faire une idée globale du comportement moyen des utilisateurs, il est nécessaire de regarder beaucoup d’enregistrements de sessions, et cela peut prendre du temps. C’est pour cela que les heat maps ont été mises en place d’ailleurs, pour représenter une moyenne des comportements des utilisateurs concernant de nombreuses sessions.

4 outils pour mettre en place des heatmaps

CrazyEgg

Avec Crazy Egg vous allez pouvoir créer des heatmaps, analyser le comportement au niveau des mouvements de souris, de scroll…

Seulement, l’outil ne propose aucune solution de relecture des sessions vidéos et vous êtes limité en termes de filtre et de segmentation.

Decibel

Decibel est un outil qui va vous permettre d’observer et d’analyser l’expérience utilisateur de votre interface de manière efficace.

L’outil propose des services de relecture de sessions, des heatmaps, des observations de formulaires, des rapports d’erreurs, etc.

Heap

Heap est un outil assez simple à configurer et à mettre en place. C’est donc une alternative intéressante si vous souhaitez tester rapidement votre site web.

Heap capture automatiquement tous les événements et les actions sans avoir besoin de configurer. Il est donc puissant pour suivre et analyser les performances concernant les tunnels de ventes/conversions.

Hotajr

Hotjar est l’un des outils les plus connus et les plus utilisés dans l'optimisation UX et CRO. L’outil propose des services de heatmaps et relecture de session évidement mais également de mise en place de sondage, d’analyse d'entonnoir de conversion.

Hotjar est gratuit sous un certain nombre de pages vues ce qui fait de lui un outil d’entrée de gamme que vous pouvez tester facilement et rapidement.

Hotjar est donc relativement puissant car il est très complet et possède une UX très agréable. Chez SDLV, nous utilisons Hotjar pour nos analyses qualitatives et quantitatives.

‍