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

Apprendre / Blog / Article

Retour au blog

Utiliser les heatmaps pour améliorer l'expérience utilisateur de votre site web : 5 façons de commencer

De la conception de la page à la convivialité du site, de nombreux facteurs influent sur l'expérience de l'utilisateur. Identifier ce qui conduit à une mauvaise expérience peut sembler une tâche ardue. Grâce aux heatmaps, vous pouvez visualiser les principales interactions avec les utilisateurs et recueillir facilement des informations utiles pour vous assurer que votre site offre une expérience utilisateur d'exception tout au long du parcours de l'utilisateur.

Dernière mise à jour

14 juin 2024

Temps de lecture

13 min

Partager

L'indice est dans le nom : l'expérience utilisateur (UX) est axée sur l'utilisateur. Il est donc logique que plus vous vous concentrez sur l'utilisateur lorsque vous collectez des données sur votre site web. Mieux vous serez équipé, mieux vous pourrez effectuer des optimisations qui répondent aux besoins de vos utilisateurs.

Vous avez sans doute déjà quelques indices sur le comportement de l'utilisateur à partir des données d'analyse traditionnelle de l'expérience utilisateur (par exemple le taux de rebond, les pages vues et les conversions). Mais comment savoir ce qu'il faut corriger en premier lorsque vous repérez un problème ? Et par où commencer lorsque vous cherchez à augmenter les conversions ?

Si vous êtes un UX designer, un développeur ou un marketer et que vous cherchez à améliorer l'expérience utilisateur, les heatmaps peuvent vous aider à collecter des données sur les interactions des internautes avec votre site web, afin que vous puissiez utiliser ces informations pour améliorer l'expérience utilisateur et les métriques qui comptent pour votre entreprise.

Configurez une heatmap dès aujourd'hui

Avec Hotjar, vous pouvez utiliser des heatmaps pour savoir comment les utilisateurs se déplacent, cliquent et font défiler vos pages afin d'améliorer votre expérience utilisateur.

Qu'est-ce qu'une heatmap ?

Une heatmap (ou carte thermique) est une visualisation de données qui montre comment les utilisateurs d'un site web cliquent, se déplacent et font défiler la page. La partie "heat" du nom provient de l'échelle de couleurs : le rouge représente les zones populaires (chaudes) de la page et le bleu les zones moins populaires (froides).

#‘Hot’ and ‘cold’ engagement areas visualized in a scroll heatmap (left) and a click heatmap (right)
‘Hot’ and ‘cold’ engagement areas visualized in a scroll heatmap (left) and a click heatmap (right)

Vous pouvez collecter des données de heatmap sur n'importe quelle page d'un site web, sur ordinateur ou sur mobile, et les visualiser de différentes manières :

  • Les heatmaps de clics mettent en évidence les endroits où les utilisateurs cliquent avec la souris (ou appuient sur mobile)

  • Les heatmaps de défilement mettent en évidence les endroits où les utilisateurs font défiler la page

  • Les heatmaps de mouvement mettent en évidence les mouvements de souris des utilisateurs (sans clic)

Vous voulez voir une heatmap en action ? Jouez avec la démo Hotjar Heatmaps pour vous familiariser avec l'outil. Passez d'un type de heatmap à l'autre dans la barre latérale de droite pour voir les différentes informations que vous pouvez tirer de chacun d'eux.

Démo d'une heatmap Hotjar

5 façons d'utiliser les heatmaps pour évaluer l'expérience utilisateur

Si une image vaut mille mots, une heatmap vaut mille idées. Pour commencer, voici cinq façons d'utiliser différents types de heatmap pour collecter des données sur l'expérience utilisateur, valider vos idées et repérer des axes d'optimisation.

1. Présentez vos conceptions les plus performantes

Vos pages web sont peut-être superbes en elles-mêmes, mais les heatmaps vous permettent de montrer à vos clients et collègues à quel point elles sont performantes.

Les heatmaps sont très faciles à comprendre en un coup d'œil et peuvent vous aider à expliquer votre travail à des non-designers, vous permettant d'obtenir un soutien important pour des propositions de refonte de site web ou de présenter vos projets réussis de conception sur l'expérience utilisateur. Cet impact est particulièrement utile si vous souhaitez que vos pages soient plus performantes.

Chez Spotahome, une plateforme en ligne de location de biens immobiliers à moyen et long terme, Sara Parcero-Leites, Customer Knowledge Manager, utilise des heatmaps pour s'assurer que son équipe est consciente des domaines de l'expérience utilisateur à améliorer.

#Sara hosting a Hotjar party in February 2022
Sara hosting a Hotjar party in February 2022

Lors des " soirées " Hotjar organisées régulièrement, Sara présente 3 ou 4 heatmaps intéressantes, ainsi que des informations provenant d'autres outils Hotjar, afin de susciter la discussion et de collaborer à la recherche de solutions.

Sara nous a dit que la plupart des développeurs et des product managers n'avaient jamais vu les utilisateurs interagir avec les fonctionnalités qu'ils avaient créées avant qu'elle ne commence à organiser ces soirées et à leur montrer des preuves visuelles comme des données de heatmap. Maintenant, ils quittent chaque soirée avec des informations révélatrices et de nombreux bugs à corriger.

2. Trouvez les CTA les plus (et les moins) cliqués

Les CTA (appels à l'action) sont des incitations à l'action de l'utilisateur (généralement, des boutons ou des liens) et peuvent être spécifiquement conçus pour attirer les clics afin d'augmenter les inscriptions ou les ventes.

#A Hotjar click map that shows the number and percentage of user clicks on call-to-action buttons and other elements
A Hotjar click map that shows the number and percentage of user clicks on call-to-action buttons and other elements

Les heatmaps de clics indiquent les CTA les plus cliqués et ceux qui sont ignorés. Vous pouvez constater que d'autres éléments de la page empêchent les utilisateurs de voir votre CTA principal, ou vous pouvez identifier une opportunité de tester un nouveau CTA dans une zone qui attire plus d'engagement de la part des utilisateurs.

Voici un exemple : en présentant les outils Hotjar à son équipe, Conan Heiselt, UX designer de l'entreprise de logiciels Techsmith, a découvert que les utilisateurs n'interagissaient pas comme prévu avec les CTA des produits. Cette révélation a été faite en consultant une heatmap des clics.

#A click map showed that many users clicked on the product icon instead of the CTA text
A click map showed that many users clicked on the product icon instead of the CTA text

Après avoir appliqué une heatmap des clics à leur page de services, Conan et son équipe ont constaté que de nombreux utilisateurs ignoraient les boutons de texte des CTA et préféraient cliquer sur les images des produits, si bien qu'ils ont décidé de rendre l'ensemble de la zone cliquable lors d'une refonte. Les preuves visuelles concrètes recueillies à partir d'une seule heatmap des clics ont permis à son équipe d'offrir aux utilisateurs une expérience plus intuitive.

3. Mesurez la distance de défilement des utilisateurs

Tous les utilisateurs qui arrivent sur votre site web ne font pas défiler la page jusqu'en bas, ce qui signifie qu'ils risquent de passer à côté d'informations importantes. Les internautes visitent également votre site à partir d'appareils et de navigateurs différents, ce qui explique qu'ils ne voient pas tous les mêmes informations au-dessus de la ligne de flottaison (la partie de la page immédiatement visible sans défilement).

#This Hotjar scroll map shows the average fold and that most users see what’s displayed in the red area
This Hotjar scroll map shows the average fold and that most users see what’s displayed in the red area

Les outils de heatmap de défilement peuvent vous montrer où se trouve la ligne de flottaison moyenne sur mobile et sur ordinateur, pour que vous puissiez placer les informations essentielles et les CTA à l'endroit où ils sont le plus vus. Vous pouvez également savoir jusqu'où les utilisateurs font défiler la page et déplacer les éléments vers le haut de la page pour qu'ils soient vus par un plus grand nombre de personnes.

N'oubliez pas que vous n'avez pas besoin de regarder les données de défilement seules : comparez vos heatmaps de clics et heatmaps de défilement pour obtenir une image complète de l'endroit où vous perdez l'attention de l'utilisateur.

Et avec Hotjar, vous n'avez pas besoin de basculer frénétiquement entre deux ou trois heatmaps : la map de la zone d'engagement est optimisée pour combiner les données de clics, de déplacement et de défilement en une seule vue afin que vous puissiez voir les parties de votre page avec lesquelles les utilisateurs s'engagent le plus.

#Discover which areas see the most user engagement with a Hotjar Engagement Zones map
Discover which areas see the most user engagement with a Hotjar Engagement Zones map

4. Repérez les clics problématiques

Il arrive que les utilisateurs cliquent sur des éléments (par exemple, des images ou des titres) qu'ils considèrent comme des liens. Il peut s'agir de clics erronés, mais les heatmaps collectent des données auprès d'un nombre suffisant d'utilisateurs pour ne pas tenir compte des anomalies et vous montrer les schémas de clics communs à l'ensemble de votre audience.

En examinant une heatmap des clics, vous pouvez repérer les clics erronés et résoudre le problème en ajoutant des liens à cet endroit ou en modifiant des éléments sans importance pour les rendre moins cliquables.

Vous pouvez même trouver des bugs de site web ou des erreurs de conception qui frustrent vos utilisateurs et les poussent à quitter votre site. Il existe une heatmap spécialisée pour visualiser ce phénomène : les maps de rage click de Hotjar permettent de découvrir les éléments qui causent des frictions en montrant où les utilisateurs cliquent de manière répétée sur une courte période de temps. C'est l'outil idéal auquel vous pouvez faire appel si vous voulez éviter d'énerver les utilisateurs pendant leur expérience.

#Example of a rage click map on Hotjar’s homepage
Example of a rage click map on Hotjar’s homepage

5. Optimisez pour le mobile et l'ordinateur

La conception web réactive (les pages qui s'adaptent à l'écran de l'utilisateur) est un moyen rapide et efficace de fournir du contenu à tous vos utilisateurs, mais vous devez garder à l'esprit que ce qui prend la forme de quelques lignes sur ordinateur peut nécessiter beaucoup de défilement sur mobile.

#Pages display differently on different devices
Pages display differently on different devices

Comparez les heatmaps sur mobiles et sur ordinateur pour repérer toute différence de comportement et voir si les utilisateurs de l'application mobile manquent des CTA importants ou d'autres éléments. Il se peut que vous deviez concevoir des interfaces conviviales différentes pour mobile et ordinateur afin de garantir une bonne expérience utilisateur sur tous les appareils.

L'utilisation de heatmaps pour optimiser les pages pour plusieurs appareils a considérablement augmenté les conversions pour Materials Market, un site web qui met en relation des fournisseurs de matériaux de construction avec des clients dans tout le Royaume-Uni.

#Hotjar Heatmaps revealed how Materials Market mobile users couldn’t see the CTA above the fold
Hotjar Heatmaps revealed how Materials Market mobile users couldn’t see the CTA above the fold

Le PDG Andrew Haehn a utilisé une heatmap de défilement Hotjar et s'est rendu compte que très peu d'utilisateurs mobile faisaient défiler la page suffisamment loin pour voir le CTA principal. Son équipe a redessiné le bouton et l'a placé plus haut sur la page. Ce simple changement a contribué à une augmentation de 1,1 % du taux de conversion, générant plus de 10 000 £ de chiffre d'affaires annuel supplémentaire.

Configurez une heatmap dès aujourd'hui

Avec Hotjar, vous pouvez utiliser des heatmaps pour savoir comment les utilisateurs se déplacent, cliquent et font défiler vos pages afin d'améliorer votre expérience utilisateur.

Utilisez les heatmaps avec d'autres outils d'expérience utilisateur

Les données des heatmaps sont impressionnantes et vous donneront beaucoup d'informations en elles-mêmes, mais vous en tirerez davantage en les combinant avec d'autres outils d'analyse, de feedback et de conception sur l'expérience utilisateur. Examinons quatre exemples :

1. Heatmaps + analyse traditionnelle

Les outils d'analyse web traditionnelle (comme Google Analytics) vous donnent de nombreux points de données quantitatives comme les pages vues, les sources de trafic et les taux de rebond, mais ils ne peuvent pas expliquer le pourquoi, ni même le comment de ce qui se passe.

En combinant les analyses traditionnelles avec l'analyse des heatmaps, vous pouvez éliminer une partie de l'incertitude et découvrir pourquoi vos métriques se produisent. Vous avez une page très fréquentée qui ne convertit pas ? Configurez une heatmap et commencez à voir ce qui incite les visiteurs à partir.

Vous pouvez faire passer votre analyse de heatmap au niveau supérieur avec Hotjar Trends. Créez une heatmap pour analyser le comportement de l'utilisateur avant et après le lancement ou la refonte d'une page, puis passez directement de la heatmap aux graphiques pour voir comment l'engagement évolue dans le temps.

2. Heatmaps + enregistrements de sessions

Un enregistrement de session (ou rediffusion de session) est un rendu de la session de navigation d'un utilisateur qui vous permet d'observer les actions d'un seul utilisateur (anonymisé) sur plusieurs pages.

Si les heatmaps vous aident à visualiser les données de tous vos utilisateurs en même temps, les enregistrements sont créés pour chaque utilisateur individuel. Au lieu de faire des suppositions sur les clics et les défilements que vous voyez sur une heatmap, essayez de visionner quelques enregistrements de sessions pour voir comment de vraies personnes interagissent avec la page.

Supposons que vous découvriez une interaction utilisateur préoccupante au cours d'un enregistrement de session et que vous souhaitiez savoir s'il s'agit d'un incident isolé ou d'un problème de fonctionnalité plus répandu. La fonctionnalité de zoom arrière de Hotjar vous permet de visualiser l'enregistrement d'un utilisateur en difficulté, puis de passer directement à la heatmap de cette page pour voir si d'autres utilisateurs rencontrent le même problème.

#Toggle between session recordings and heatmaps with Hotjar’s zoom out feature
Toggle between session recordings and heatmaps with Hotjar’s zoom out feature

Pour vous donner un exemple concret, voyons comment l'association de Hotjar Recordings et Heatmaps ont aidé l'agence de conception sur l'expérience utilisateur digitale Turum-burum à augmenter le taux de conversion du magasin de chaussures Intertop de 55 %.

Les enregistrements de sessions ont d'abord révélé que les clients rencontraient des problèmes avec les filtres de produits d'Intertop. Ils naviguaient à travers un grand nombre de pages pour trouver leur pointure.

#A Hotjar click map showed that Intertop customers clicked ‘show all’ while browsing products
A Hotjar click map showed that Intertop customers clicked ‘show all’ while browsing products

Après avoir analysé une heatmap de clics, l'équipe de Turum-burum a constaté que de nombreux utilisateurs cliquaient sur "tout afficher" lorsqu'ils recherchaient un produit parce qu'ils ne disposaient pas des filtres nécessaires pour trouver ce qu'ils cherchaient.

Grâce aux informations tirées des enregistrements de sessions et des heatmaps, Turum-burum a pu optimiser sa fonctionnalité de filtrage en identifiant et en hiérarchisant des catégories de produits claires, un élément de navigation essentiel dans l'expérience d'achat e-commerce. L'amélioration apportée par Turum-burum a conduit à une meilleure expérience utilisateur et à une augmentation des ventes pour leur client.

Hotjar nous aide à cartographier le parcours client de nos clients du point de vue de l'utilisateur. Cela nous permet d'être beaucoup plus efficaces dans la création de valeur.

Denis Studennikov
Chief Operating Officer chez Turum-burum

3. Heatmaps + feedback sur la page

Les données quantitatives (numériques) sont extrêmement importantes pour prendre des décisions sur l'expérience utilisateur fondées sur des données, mais ne négligez pas la valeur des données qualitatives (non numériques).

#Uncover valuable insights by directly asking users about how they think your site can be improved
Uncover valuable insights by directly asking users about how they think your site can be improved

Après avoir utilisé les heatmaps pour révéler les problèmes de conception sur des pages spécifiques du site, demandez à vos utilisateurs un feedback sur l'expérience utilisateur sur chaque page pour savoir ce qu'ils pensent qu'il manque ou ce que vous devriez changer pour les aider à atteindre leurs objectifs.

Le feedback sur le site web ne doit pas nécessairement perturber les utilisateurs : une simple enquête à une question, non intrusive, peut suffire à lancer des améliorations sur l'expérience utilisateur auxquelles vous n'aviez pas pensé.

En plus des connaissances sur les heatmaps de clics qui ont conduit l'éditeur de logiciels Techsmith à améliorer l'expérience utilisateur en repensant les CTA de ses produits, l'UX designer Conan Heiselt a également utilisé les enquêtes Hotjar pour mieux comprendre les besoins de ses clients.

#An on-page Hotjar survey asking users what frustrates them
An on-page Hotjar survey asking users what frustrates them

Avec une simple enquête sur la page, Conan a posé une question ouverte aux utilisateurs qui ont complété certaines interactions : "Quelle est votre plus grande frustration avec cette page ?" Il a pu recueillir suffisamment de réponses pour identifier 15 thèmes généraux et commencer à passer à l'action pour répondre aux besoins spécifiques des utilisateurs.

#UX improvement areas collected from Hotjar survey responses
UX improvement areas collected from Hotjar survey responses

Si vous n'avez pas assez de temps pour préparer un rapport de recherche approfondi et exploitable sur l'expérience utilisateur comme celui de Conan, essayez AI for Surveys de Hotjar et découvrez comment il génère un rapport automatisé avec des informations clés et des suggestions d'étapes suivantes basées sur le feedback réel de vos utilisateurs.

4. Heatmaps + tests A/B

Les données des heatmaps et les tests A/B vont de pair : vous pouvez utiliser les données des heatmaps pour élaborer une hypothèse de test et vous pouvez exécuter des heatmaps sur les variations des tests A/B pour recueillir des données utiles sur les raisons du succès (ou de l'échec) d'une variation de page.

#Click map data that shows increased user engagement after a page redesign
Click map data that shows increased user engagement after a page redesign

Par exemple, les UX designers de l'entreprise de conception de bannières Bannersnack utilisent des heatmaps sur les principales pages de destination pour recueillir des preuves de la façon dont les visiteurs interagissent avec elles. Sur la base de ces données, l'équipe crée une autre conception et effectue des tests A/B sur l'ancienne et la nouvelle version. Lors d'un test, Bannersnack a augmenté les inscriptions de 25 % en combinant l'analyse des heatmaps et les tests A/B.

Comment commencer avec les heatmaps

Un outil de heatmaps du site web comme Hotjar est très facile à utiliser : il suffit d'ajouter des scripts de suivi. Vous pouvez configurer une heatmap en quelques minutes seulement et les données commenceront à être collectées chaque fois qu'un utilisateur visitera votre site web.

Que vous utilisiez les heatmaps pour présenter votre travail, augmenter les conversions ou trouver des idées pour de nouveaux tests, les informations inestimables que vous obtiendrez de ces graphiques aux couleurs de l'arc-en-ciel donneront probablement à votre approche de l'expérience utilisateur le coup de fouet dont elle a besoin pour faire passer votre travail à l'étape suivante.

Configurez une heatmap dès aujourd'hui

Avec Hotjar, vous pouvez utiliser des heatmaps pour savoir comment les utilisateurs se déplacent, cliquent et font défiler vos pages afin d'améliorer votre expérience utilisateur.

Related articles

Conception sur l'expérience utilisateur et analyse

Design a homepage that delights your users in 9 easy steps (with tips and examples)

While product, UX, and marketing teams help shape a website or app’s homepage, a more powerful group holds the reins: the users. Their needs and preferences are key deciding factors in locking in an effective homepage design.

Shadz Loresco

Conception sur l'expérience utilisateur et analyse

The anatomy of a stellar website: the dos and don’ts of design

Over the past five years, buyers have largely shifted their shopping habits to be primarily online. For brands wishing to remain competitive in the digital marketplace, this means an accessible and attention-grabbing website has become more important than ever before. 

Consumers agree: respondents to Hotjar’s Coming in Hot report told us that they have higher expectations for brands’ websites than they did five years ago.

Hotjar team

Conception sur l'expérience utilisateur et analyse

Coming in hot: the power of first impressions

Consumers have more than their fair share of vendors to choose from when shopping online. When attention is split between different brands and devices, ensuring your online presence stands out from the crowd hinges on first impressions. 

But catering to the ever-changing habits and preferences of digital buyers is no small feat. That’s why Hotjar surveyed hundreds of US-based consumers—to reveal the insights you need to guarantee your website exceeds user expectations.

Hotjar team