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.
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 Contentsquare si vous lisez jusqu’à la fin. 😉 )
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.
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.
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 Contentsquare.
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
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
Contentsquare 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 Contentsquare, 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.
Configurez votre heatmap dès aujourd'hui
Inscrivez-vous gratuitement à Hotjar, ajoutez le code de suivi et commencez à utiliser les heatmaps pour améliorer votre site ou votre 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.
Configurez votre heatmap dès aujourd'hui
Inscrivez-vous gratuitement à Hotjar, ajoutez le code de suivi et commencez à utiliser les heatmaps pour améliorer votre site ou votre produit.
Pour créer une heatmap de site web, vous pouvez utiliser un outil de heatmap ou un logiciel comme Hotjar. Inscrivez-vous à Hotjar, ajoutez le code de suivi Hotjar (un extrait JavaScript) à votre site web, puis accédez au dashboard Hotjar. Cliquez sur “Ajouter une heatmap”, sélectionnez la page que vous souhaitez cibler, puis cliquez sur “Créer une heatmap”.
Techniquement parlant, tout script de heatmap que vous ajoutez à votre site web pourrait potentiellement le ralentir, mais Hotjar a été conçu pour minimiser autant que possible le risque de ralentissement de votre site web.
Le script de suivi de Hotjar se charge de manière asynchrone, ce qui veut dire qu’il se charge en même temps que tout le reste de votre site web, et il utilise un CDN (Content Delivery Network) et une mise en cache correcte du navigateur pour assurer un chargement rapide.
Le meilleur outil gratuit de heatmaps de site web que nous connaissons est le plan personnel de base Hotjar « Gratuit à vie », qui vous permet de collecter des données de heatmap jusqu’à 1 050 sessions de site web par mois.
Vous pouvez utiliser des heatmaps sur n’importe quel site web WordPress auto-hébergé pour savoir où les utilisateurs cliquent en activant l’intégration Hotjar-Wordpress, en installant le plugin WordPress heatmap de Hotjar ou en ajoutant manuellement le script de suivi de Hotjar à votre site WordPress.
Pour vous conformer aux réglementations pertinentes en matière de confidentialité et de RGPD, vous devez utiliser un outil de heatmap qui vous permet de gérer de manière responsable toutes les données utilisateur que vous collectez. Hotjar dispose de fonctionnalités de conformité intégrées qui vous permettent d’utiliser l’outil de heatmap de manière conforme au RGPD.
Toutes les informations personnelles identifiables sont automatiquement anonymisées du côté de l’utilisateur final sur toutes les heatmaps. Vous pouvez aussi ajouter des filtres de suppression de formulaire supplémentaires pour bloquer tous les éléments dont vous avez besoin.
L’objectif principal des heatmaps est de visualiser le comportement des utilisateurs du site web. En examinant un agrégat de toutes les interactions des utilisateurs sur une page web, il devient plus facile de repérer les problèmes et les axes d’amélioration.
Une heatmap de site web est une visualisation agrégée des mouvements de la souris, du défilement, des clics et des appuis de l’utilisateur. Les heatmaps sont utilisées par les designers, les spécialistes de l’expérience utilisateur et les marketers pour découvrir les modèles d’utilisation des sites web et effectuer des optimisations basées sur les données afin d’augmenter le taux de conversion et le chiffre d’affaires.
Une heatmap montre une superposition codée par couleur des mouvements de la souris (et des appuis) sur une seule page de site web. La “popularité” des éléments de la page s’affiche à l’aide d’une échelle de couleurs allant du rouge (les parties les plus populaires de la page) au bleu (les parties les moins utilisées de la page).
Hotjar Heatmaps fonctionne en créant une copie du code HTML de votre page, puis en catégorisant chaque élément par balise, éléments parents et ID ou classes, le cas échéant. Lorsque les visiteurs consultent la page, Hotjar collecte les comportements d’utilisation et mappe tous les éléments avec lesquels ils interagissent dans le rapport principal de la heatmap. Les données de la heatmap sont triées en trois catégories de heatmap pour faciliter l’analyse : la heatmap des clics, la map de défilement et la map de mouvement.
Il y a deux manières de lire une heatmap de site web : en regardant la visualisation et en examinant les points de données brutes. Vous pouvez repérer les tendances et les problèmes de clic en un coup d’œil grâce au code couleur des heatmaps (le rouge pour le plus d’interaction, le bleu pour le moins). Les tableaux de données brutes des heatmaps révéleront des informations plus précises, comme les éléments HTML ou les emplacements en pixels des clics et des vues par ordre de popularité.
Le terme “heatmap” a été utilisé pour la première fois (et déposé) par le concepteur de logiciels américain Cormac Kinney au début des années 1990, après avoir développé un logiciel permettant d’afficher graphiquement des informations sur les marchés financiers en temps réel pour les traders.
À des fins d’expérience utilisateur, lesuivi oculaire mesure l’endroit où les visiteurs regardent un site web, tandis que le suivi de la souris mesure l’endroit où les visiteurs bougent et cliquent leur curseur (ou appuient sur mobile). La recherche sur le suivi oculaire peut être coûteuse. Elle se déroule généralement en laboratoire et oblige les participants à porter un équipement spécialisé, tandis que le suivi de la souris (également appelé suivi des clics) est très abordable, voire gratuit, et peut générer des heatmaps similaires.
Des études suggèrent qu’il existe une corrélation positive entre le suivi oculaire et les heatmaps de mouvement, car les utilisateurs ont tendance à regarder où se trouve leur curseur.
Hotjar a été fondé sur le principe suivant : pour vraiment comprendre vos utilisateurs, vous devez combiner l’analyse qualitative et quantitative. Les connaissances provenant des heatmaps peuvent être facilement combinées avec celles de Google Analytics (ou d’autres outils d’analyse) pour obtenir une image plus précise des interactions des visiteurs avec les pages de votre site Web. Jetez un coup d’œil à nos intégrations GA et Mixpanel pour commencer.
Cette page vous donne des exemples de la façon de combiner Hotjar avec d’autres outils d’analyse.
Dana Nicole
Copywriter
Dana is a copywriting specialist with deep expertise in creating assets like blog posts and landing pages that position organizations as the obvious first choice in their market. She holds a Bachelor of Business Administration in Marketing and has over 10 years of experience helping leading B2B brands drive traffic and increase conversions. Having taught more than 1,000 entrepreneurs the art of persuasive copywriting, Dana brings unique insight into what resonates with audiences and delivers results.
Contentsquare's Content Team
Nous sommes une équipe internationale d'experts en contenu et de rédacteurs passionnés par tout ce qui touche à l'expérience client (CX). Des bonnes pratiques aux tendances les plus récentes du digital, nous nous occupons de tout. Explorez nos guides pour apprendre tout ce que vous devez savoir pour créer des expériences que vos clients adoreront. Bonne lecture !
![[Visual] Contentsquare's Content Team](http://images.ctfassets.net/gwbpo1m641r7/3IVEUbRzFIoC9mf5EJ2qHY/f25ccd2131dfd63f5c63b5b92cc4ba20/Copy_of_Copy_of_BLOG-icp-8117438.jpeg?w=1920&q=100&fit=fill&fm=avif)