Bonjour ! Hotjar est maintenant disponible en français 🇫🇷 Commencez gratuitement.

Apprendre / Guides / Le guide des heatmaps

Retour aux guides

Le guide complet des heatmaps

Les heatmaps sont un moyen puissant de comprendre ce que font les utilisateurs sur les pages de votre site web : où ils cliquent, jusqu’où ils font défiler la page et ce qu’ils regardent ou ignorent.

Dernière mise à jour

23 oct. 2023

Temps de lecture

7 min

Partager

Dans ce guide, vous trouverez une introduction aux différents types de heatmaps et comment les créer et les analyser. Vous obtiendrez également des cas d’étude réels ainsi que des exemples pratiques, afin que vous puissiez constater par vous-même la valeur et l’utilité des heatmaps lorsqu’il s’agit d’améliorer et de développer votre site web.

(Vous obtiendrez même un aperçu complet de l’outil gratuit Heatmaps de Hotjar si vous lisez jusqu’à la fin. 😉 )

Inscrivez-vous gratuitement à Hotjar, ajoutez le code de suivi et commencez à utiliser les heatmaps pour améliorer votre site ou votre produit.

Qu'est-ce qu'une heatmap ?

Une heatmap (ou heat map) est une représentation graphique des données où les valeurs sont représentées par des couleurs.

Elles sont essentielles pour détecter ce qui fonctionne ou ne fonctionne pas sur un site web ou une page, et avec quelles parties et éléments d’une page les utilisateurs interagissent.

En expérimentant la façon dont certains boutons et éléments sont positionnés sur votre site web, les heatmaps vous permettent d’évaluer les performances de votre produit et d’augmenter l’engagement et la fidélisation des utilisateurs lorsque vous hiérarchisez les tâches à effectuer qui augmentent la valeur client.

Les heatmaps facilitent la visualisation de données complexes et leur compréhension en un coup d’œil :

#Les données de gauche sont les mêmes que celles de droite, mais une image est beaucoup plus facile à comprendre que l’autre.
Les données de gauche sont les mêmes que celles de droite, mais une image est beaucoup plus facile à comprendre que l’autre.

La pratique que nous appelons aujourd’hui “heatmaps” remonterait au 19e siècle, lorsque l’on utilisait des nuances de gris pour représenter à la main des modèles de données dans des matrices et des tableaux.

#Une vieille heatmap montrant la densité de population dans les quartiers parisiens du 19e siècle.
Une vieille heatmap montrant la densité de population dans les quartiers parisiens du 19e siècle.

Le terme “heatmap” a été déposé pour la première fois au début des années 1990, lorsque le concepteur de logiciels Cormac Kinney a créé un outil permettant d’afficher graphiquement des informations en temps réel sur les marchés financiers.

De nos jours, les heatmaps peuvent encore être créées à la main, à l’aide de feuilles de calcul Excel ou d’outils d’analyse de l’expérience digitale tels que Hotjar.

Qu'est-ce qu'une heatmap de site web et comment pouvez-vous l'utiliser pour améliorer votre produit ?

Les heatmaps de produit et de site web visualisent les éléments les plus populaires (chauds) et les moins populaires (froids) de votre contenu à l’aide de couleurs sur une échelle allant du rouge au bleu.

Mais qui utilise les heatmaps et comment fonctionnent-elles ?

Les heatmaps donnent aux équipes produit, aux marketers, aux digital et data analysts, aux UX designers, aux spécialistes des médias sociaux et à tous ceux qui vendent quoi que ce soit en ligne des informations approfondies sur le comportement des visiteurs sur leur site, les aidant à découvrir pourquoi les utilisateurs n’adoptent pas leur produit, n’utilisent pas les boutons d’appel à l’action (CTA) ou ne convertissent pas.

En agrégeant le comportement des utilisateurs, les heatmaps facilitent l’analyse des données, en combinant des données quantitatives et qualitatives, et donnent une compréhension instantanée de la façon dont votre public cible interagit avec un site web ou une page de produit individuel (ce sur quoi il clique, ce qu’il fait défiler ou ce qu’il ignore), ce qui vous aide à identifier les tendances et à optimiser votre produit et votre site pour augmenter l’engagement des utilisateurs, les conversions (CRO) et les ventes.

#Une map de défilement (à gauche) et une map de mouvement (à droite) sur la page d’accueil hotjar.com
Une map de défilement (à gauche) et une map de mouvement (à droite) sur la page d’accueil hotjar.com

En général, les heatmaps affichent aussi la ligne de flottaison moyenne, c’est-à-dire la partie de la page que les visiteurs voient sur leur écran sans la faire défiler dès qu’ils arrivent dessus.

Les avantages de l'utilisation des heatmaps sur votre site web

Les heatmaps aident les product managers et les propriétaires de sites web à comprendre comment les visiteurs interagissent avec les pages de leur site web pour trouver des réponses à des questions et des objectifs commerciaux critiques tels que “Pourquoi mes utilisateurs ne convertissent-ils pas ?” ou “Comment inciter plus de visiteurs à passer à l’action ?” Grâce aux heatmaps, vous pouvez déterminer si les utilisateurs:

  • Atteignent un contenu important ou ne le voient pas

  • Trouvent et utilisent les principaux liens d'une page, les boutons, les opt-ins et les CTAs

  • Se laissent distraire par des éléments non cliquables

  • Rencontrent des problèmes d’un appareil à l’autre

En tant qu’outil visuel, les heatmaps vous aident à prendre des décisions éclairées et basées sur des données pour les tests A / B, la mise à jour ou la (re)conception de votre site web. Elles sont également utiles à plus grande échelle. Les heatmaps vous permettent  de montrer aux membres de l’équipe et aux parties prenantes ce qui se passe et d’obtenir leur adhésion plus facilement lorsque des changements sont nécessaires. Il est difficile de contester une heatmap !

#Un utilisateur Hotjar partage une heatmap avec un membre de l’équipe pour créer une analyse de rentabilité afin d’augmenter l’adhésion
Un utilisateur Hotjar partage une heatmap avec un membre de l’équipe pour créer une analyse de rentabilité afin d’augmenter l’adhésion

Hotjar Heatmaps collecte en permanence des données et vous permet de les filtrer et de créer des heatmaps spéciales basées sur les caractéristiques de l’utilisateur, comme le rôle ou le titre de l’utilisateur, la date à laquelle il a créé son compte, s’il utilise une version d’essai de votre produit, etc., afin que vous puissiez rapidement trouver des informations ciblées.

Par exemple, les équipes produit peuvent utiliser des heatmaps pour tester les interactions des utilisateurs avec une nouvelle fonctionnalité ou hiérarchiser les corrections de bugs, tandis que les UX et UI designers utiliseront les heatmaps pour mesurer la popularité ou l’aversion d’une conception de page et mettre en œuvre des modifications qui facilitent la navigation des clients sur leur site web.

Avec la fonctionnalité Highlights de Hotjar, vous pouvez mettre en favori et partager rapidement les connaissances spécifiques d’une heatmap avec d’autres services ou individus de votre entreprise, ce qui permet une collaboration interfonctionnelle réussie.

Vous pouvez également créer une “collection” de heatmaps pour mettre en évidence des éléments spécifiques que vous souhaitez que votre entreprise ou votre équipe priorise.

Par exemple, un digital marketer peut créer une collection de heatmaps pour tester une page de destination, puis décider de déplacer un bouton CTA au-dessus de la ligne de flottaison moyenne, réduisant ainsi le taux de désabonnement et augmentant le nombre d’inscriptions à son site web ou à son produit.

Nous avons utilisé les informations de Hotjar pour affiner les causes possibles des abandons. Cela nous a permis de nous concentrer sur quelques solutions réelles et de les tester au lieu de courir après des solutions hypothétiques basées sur des conjectures.

Piriya Kantong
Senior Online Marketing Analyst, Gogoprint

Inscrivez-vous gratuitement à Hotjar, ajoutez le code de suivi et commencez à utiliser les heatmaps pour améliorer votre site ou votre produit.

Quels sont les différents types de heatmaps ?

Heatmap est vraiment un terme générique pour différents outils de heatmap : les maps de défilement, les heatmaps des clics et les maps de mouvement. Il est important de faire cette différence, car chaque type vous permet d’étudier un aspect légèrement différent de votre site web et de la performance de votre produit.

Voyons tout cela plus en détail !

1. Les maps de défilement

Les maps de défilement indiquent le pourcentage exact de visiteurs qui font défiler la page jusqu’à un point donné : plus la zone est rouge, plus les visiteurs la voient.

#Un exemple de map de défilement
Un exemple de map de défilement

2. Les heatmaps des clics

Les heatmaps des clics vous montrent un agrégat des zones où les visiteurs cliquent avec leur souris sur ordinateur et appuient avec leurs doigts sur mobile (dans ce cas, on les appelle heatmaps tactiles). La carte est codée par couleur pour montrer les éléments sur lesquels les visiteurs ont le plus cliqué et appuyé (rouge, orange, jaune).

#Un exemple de heatmap des clics
Un exemple de heatmap des clics

3. Les maps de mouvement

Les maps de mouvement permettent de suivre les déplacements de souris des utilisateurs lorsqu’ils naviguent sur ordinateur. Les points chauds d’une map de mouvement représentent les endroits où les utilisateurs ont déplacé leur curseur sur une page, et la recherche suggère une corrélation entre l’endroit où les visiteurs regardent et l’endroit où se trouve leur souris, ce qui signifie qu’une map de mouvement vous donne une indication de l’endroit où les visiteurs pourraient regarder lorsqu’ils parcourent votre page.

#Exemple de map de mouvement
Exemple de map de mouvement

4. Les zones d'engagement

Les zones d’engagement combinent des ensembles de données d’interaction provenant des heatmaps des clics, de défilement et de mouvement dans une vue simple.

C’est un puissant outil de visualisation des données qui vous aide à analyser les pages en quelques secondes, pour obtenir une vue complète de l’engagement des utilisateurs avec votre produit.

#Les zones d’engagement vous permettent d’élargir vos connaissances, comme sur les images qui n’obtiennent pas de clics, mais qui séduisent vos utilisateurs dans l’ensemble.
Les zones d’engagement vous permettent d’élargir vos connaissances, comme sur les images qui n’obtiennent pas de clics, mais qui séduisent vos utilisateurs dans l’ensemble.

5. Les maps de rage clicks

Les map de rage clicks vous permettent de localiser exactement les endroits où les utilisateurs se sentent frustrés sur la page. Identifiez et traitez ces points de douleur pour réduire rage clicks et frictions dans vos flux clés, améliorer l’expérience utilisateur et stimuler les conversions.

#Découvrez où les utilisateurs cliquent sur vos pages clés
Découvrez où les utilisateurs cliquent sur vos pages clés

6. Les heatmaps sur ordinateur, tablette et mobile

#Une heatmap des clics sur ordinateur (à gauche) et sur mobile (à droite)
Une heatmap des clics sur ordinateur (à gauche) et sur mobile (à droite)

Les heatmaps sur ordinateur, tablette et mobile vous permettent de comparer les performances de votre site web sur différents appareils. Par exemple, un contenu bien visible sur une page d’ordinateur peut se trouver beaucoup plus bas sur mobile, et vous devez voir si l’interaction change, et comment.

Prêt à créer une heatmap et à améliorer l'expérience de votre site web ?

Les heatmaps sont faciles à créer et à comprendre, et elles vous permettent de découvrir des connaissances exploitables qui vous aident à améliorer le parcours de l’utilisateur et vos pages produits pour augmenter la rétention et les inscriptions sur votre site web !

Set up your heatmap today

Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.

Heatmap FAQs