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

Une Heat Map (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 heat map nous permet de d’enregistrer et de quantifier le comportement des utilisateurs concernant la souris et le trackpad

Heat Map

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

A première vue, la heat map 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 nombre de 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 heat maps 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 heat map est un retour visuel mais il ne concerne pas qu’une seule données. Elle peut calculer plusieurs types de retour. Nous allons voir quels sont les différents type de heat maps. 

Heat map basée sur le survol

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

Heat map survol

La heat map 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 utilisateur survolent et où ils regardent sur la page.

Des tests utilisateurs avec des outils spécifiques sont possible 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 il naviguent sur les pages. 

Le heat map basé 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 heat maps, elles ne veulent finalement pas dire grands choses mis à part quelques indices concernant le comportements des utilisateurs. 

Heat map basée sur le clic 

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

Heat map basée sur le clic

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ésigne un nombre de clics moyen.

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

Pour prendre un exemple d’utilisation de la heat map basé 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é sur le clic permet d’observer donc sur quoi les utilisateurs cliquent et donc de modifier votre site par rapport aux comportements observés. 

Heat map basée sur l’attention

La heat map basé sur l’attention des utilisateurs permet 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’heat map prend en compte les différents 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. 

Heat map basée sur le scroll 

La heat map basé 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. 

Heat map basée sur le scroll

Pour les longues pages de services, les landing page de SaaS ou les fiches produits e-commerce, cette heat map est très utile pour les longues page 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 heat map 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 heat maps mais ce sont grâce à elles que des heat maps 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

Enregistrement session utilisateur

Les replays vidéos ressemblent donc à des tests utilisateurs, dans la mesure où vous observez la navigation exact 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 relecture 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 conversions, la relecture vidéo des session 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 utilisateur, il est nécessaire de regarder beaucoup d’enregistrement de session, et cela peut prendre du temps. C’est pour cela que les heat maps ont été mis en place d’ailleurs, pour représenter une moyenne des comportements des utilisateurs concernant de nombreuses sessions.

4 outils pour mettre en place des heat maps 

CrazyEgg

CrazyEgg

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

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

Decibel 

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 heat maps, des observations de formulaires, des rapports d’erreurs, etc.

Heap

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

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 heat maps 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. 


  • 📌Qu’est-ce qu’une Heat Map ?

    Les heat maps sont des représentations visuelles de données concernant le mouvement de souris, les clics et les comportements de navigation des utilisateurs sur des pages web. Cela permet dans un contexte UX d’enregistrer et de quantifier le comportement des utilisateurs de façon plus visuelle avec des couleurs plus ou moins chaudes afin d’illustrer le volume.

  • 🖥️Pourquoi utiliser une Heat Map ?

    La heat map est une bonne solution pour faire comprendre facilement aux personnes qui ne sont pas experts les comportements des utilisateurs sur un site web par exemple. Des observations sur le mouvement de souris, les zones de clics, les scrolls sont possibles avec les heat maps.

  • 🛠️Quels sont les outils pour réaliser des heat maps de son site ?

    De nombreux outils de suivi de souris, de relecture de session et de heat maps existent. On en trouve des gratuits, des payants et des freemiums. Parmis les plus connus, on retrouve Hotjar, Crazy Egg ou encore Heap.