8 exemples de cartes thermiques pour une gestion de produit basée sur les données
Probablement la qualité la plus importante d’un bon chef de produit est la capacité à faire preuve d’empathie envers les utilisateurs. Pour muscler cette compétence, les PM passent des heures en entretiens utilisateurs et à explorer les données derrière les comportements des utilisateurs.
Mais il existe une autre manière d’affiner votre intuition utilisateur—en analysant la façon dont les utilisateurs interagissent avec votre produit à l’aide de cartes de chaleur.
Les cartes de chaleur font partie des nombreux outils de recherche utilisateur qui permettent de révéler les points de friction, les intentions et les opportunités tout au long du parcours utilisateur. Elles relèvent également de l’analytique produit, vous aidant à aller au-delà des métriques de vanité pour réellement voir ce que font vos utilisateurs.
Vous voulez plus de The CPO Club ?
Inscrivez-vous gratuitement pour terminer la lecture de cet article :
Have an account? Log In
Si vous êtes arrivé ici, il y a de fortes chances que vous soyez déjà curieux des avantages des cartes de chaleur—ou que vous cherchiez des exemples concrets pour justifier l’investissement.
Dans tous les cas, vous êtes au bon endroit. Décortiquons les différents types de cartes de chaleur et comment vous pouvez les utiliser pour atteindre vos objectifs produit.
#1 : Cartes de Clics et Cartes de Taps
Commençons par la plus populaire—la carte des clics (pour les interfaces desktop) ou des taps (pour les interfaces mobiles).
Les cartes de clics représentent visuellement la façon dont vos utilisateurs cliquent sur votre interface. Il s’agit simplement d’une capture d’écran de votre interface utilisateur, dont certaines parties sont surlignées en différentes couleurs.
Si votre outil de carte de chaleur met en évidence un certain élément de votre interface, cela signifie qu’un utilisateur (ou plusieurs) y a cliqué. La couleur, quant à elle, renseigne sur le nombre de clics que cet élément particulier a reçus.
Les outils de carte de chaleur utilisent généralement les couleurs de l’échelle de température.
Vous verrez des couleurs chaudes sur ce dégradé pour les zones qui reçoivent beaucoup de clics et des couleurs plus froides pour celles qui sont peu sollicitées.
Voici à quoi ressemble la visualisation de données d’une carte de taps pour une application mobile de gestion financière.
On remarque que les zones indiquant le montant dépensé pour chaque transaction sont surlignées en rouge. Cela signifie que de nombreuses personnes cliquent dessus (probablement pour développer la transaction et en voir les détails).
Le solde du compte en haut, quant à lui, est mis en évidence en vert—ce qui indique que peu de gens y cliquent.
Comment utiliser une carte de clics
Les cartes de clics sont véritablement riches en enseignements exploitables. On peut tirer beaucoup d’informations sur le comportement de vos utilisateurs simplement en étudiant les zones sur lesquelles ils cliquent.
Par exemple, si vous gérez une application de refuge pour chiens avec une page de dons permettant de soutenir financièrement votre refuge, vous pouvez utiliser une carte de clics pour voir quelle option de don fonctionne le mieux.
En examinant la carte de taps ci-dessus, on constate que les options à $10 et « Autre » sont de loin les choix les plus populaires en matière de montant de don.
Un point important que l’on peut en déduire, c’est qu’il existe sans doute un montant de don absent de la liste (par exemple $1) et que les utilisateurs cliquent sur « Autre » pour saisir ce montant.
Il serait donc judicieux de vérifier ce que les gens saisissent dans la section « Autre », d’identifier les montants les plus fréquents et de les ajouter à notre liste.
#2 : Cartes de Défilement
Comme son nom l’indique, ce type de carte de chaleur permet d’analyser le comportement de défilement de vos utilisateurs.
Les cartes de défilement sont elles aussi codées par couleur à l’aide de l’échelle de température. Mais au lieu de surligner des points de votre interface où les gens ont cliqué, elles mettent en valeur des sections entières de votre page en fonction du nombre de personnes ayant fait défiler jusqu’à cet endroit et vu cette section.
Tout comme les autres cartes de chaleur, vous obtenez des couleurs chaudes lorsque de nombreuses personnes défilent et voient cette section, et des couleurs froides lorsqu’elles sont peu nombreuses.
Comment utiliser une carte de défilement
Les scroll maps sont excellents pour optimiser la position de certains éléments ou sections sur votre page ainsi que pour diagnostiquer des problèmes d'utilisation ou d'engagement avec ces sections.
Passons en revue un cas typique de dépannage en examinant la scroll map de la page de tarification d’un service SaaS appelé Nelio.
Imaginez que vous avez des difficultés à rivaliser. Pour une raison quelconque, les gens préfèrent s’inscrire chez vos concurrents. Lorsque vous leur demandez pourquoi, ils disent que l’autre outil proposait une fonctionnalité de suivi multi-objectifs, ce qui n’était pas votre cas.
Or, le problème est que vous proposez bien cette fonctionnalité ; il vous faut donc comprendre pourquoi les gens ne la voient pas.
En regardant la scroll map de votre page de tarification, vous constatez que la grande majorité de vos utilisateurs ne font pas défiler la page du tout. Puis, vous remarquez que la description de votre fonctionnalité de suivi multi-objectifs se trouve en dessous de la ligne de flottaison, dans la zone bleue. Cela signifie que seuls quelques utilisateurs font défiler et lisent cette information, ce qui est fréquent dans la plupart des analyses du comportement utilisateur basé sur le scroll.
Problème identifié ! Pour le résoudre, vous pouvez envisager d’ajouter les fonctionnalités de la section “Tous les forfaits incluent” comme éléments supplémentaires dans vos listes de plans tarifaires – en veillant à ce qu'elles apparaissent au-dessus de la ligne de flottaison et que les gens les voient sans avoir à faire défiler la page.
#3 : Heatmaps de survol
Également appelée carte de mouvement, ce type de heatmap suit la position de la souris – vous permettant de visualiser le comportement de « déplacement » de vos utilisateurs à travers une interface.
Dans la plupart des cas, en utilisant les heatmaps de survol, nous partons du principe que les utilisateurs regarderont très probablement l’élément sur lequel leur curseur survole. Ainsi, en suivant le mouvement de la souris, nous corrélons cela avec le suivi des éléments que les gens regardent en parcourant notre interface.
Visuellement, cela se présente sous forme de points mis en évidence (toujours avec un code couleur « température ») sur les parties de votre interface où le curseur de l’utilisateur est resté le plus longtemps. De plus, certains outils de heatmap fournissent également une « trace » du chemin de navigation de vos utilisateurs à travers l’interface.
Voici à quoi ressemblent ces traces.
Voici la heatmap de suivi de souris d’une des interfaces les plus réussies en matière d’expérience utilisateur au monde : le site web d’Apple (après tout, ils sont à l’origine des premiers designers UX de l’histoire). Ces traces montrent que les visiteurs commencent à explorer la page d’accueil de MacOS Snow Leopard en examinant d’abord le félin fascinant lui-même, avant de lire le titre, puis de poursuivre avec les autres éléments de la page.
Comment utiliser une carte de survol
Une façon intéressante d’utiliser une carte de mouvement est d’identifier les éléments distrayants pour les utilisateurs.
Par exemple, si vous êtes responsable de l’optimisation de la page de résultats de recherche d’Amazon (votre objectif étant que les utilisateurs cliquent sur un produit trouvé par Amazon), vous pouvez examiner la heatmap de survol et constater que la majorité des utilisateurs se dirigent d’abord vers une de vos bannières (par exemple, une annonce quelconque) avant de regarder les résultats de recherche.
Cela représente une distraction importante pour vos utilisateurs et peut réduire les chances qu’ils cliquent sur les résultats de recherche. Vous allez donc soit retirer cette bannière, soit la rendre moins visible sur votre interface.
#4 : Heatmaps d’attention
Jusqu’ici, nous avons évoqué trois outils d’analyse qui permettent d’analyser visuellement vos utilisateurs – via les clics, les déplacements de la souris et le scroll de la page.
Bien que chacun puisse nous fournir des informations précieuses, se baser uniquement sur l’un d’eux peut être trompeur. Observer le comportement utilisateur isolément sans un contexte approprié pourrait ne pas offrir une vision assez large de ce qu’il se passe réellement.
Ainsi, les équipes produit utilisent généralement tous ces types à la fois et croisent les informations recueillies avant de les analyser et d’en tirer des conclusions. Pourtant, cette solution n’est pas parfaite non plus, car il vous faudra probablement passer trois fois plus de temps à faire l’analyse complète.
Heureusement, avec l’arrivée des modèles d’IA et des algorithmes avancés, les outils modernes de visualisation de heatmaps peuvent combiner les informations recueillies à partir des clics utilisateur, des survols de souris et du scroll dans une seule heatmap.
Ce quatrième type est appelé la heatmap d’attention, car il indique essentiellement quelles parties de l’interface sont le plus remarquées par vos utilisateurs. Visuellement, il ressemble beaucoup à une carte de clics, avec certains éléments de votre interface mis en évidence dans différentes couleurs de la palette thermique selon le niveau d’attention de l’utilisateur.
#5 : Heatmaps géographiques
Les cartes de chaleur existent depuis bien avant que l'on commence à appliquer cette technique aux interfaces utilisateur. L'un des types les plus traditionnels de cartes de chaleur est la carte géographique.
Dans ce cas, il s'agit de mettre en évidence certaines parties d'une carte en fonction du type de point de données sélectionné. Par exemple, si vous souhaitez analyser la répartition géographique des sites touristiques en France, vous pouvez utiliser cette carte de chaleur géographique.
Dans la carte ci-dessus, elle indique le nombre de lits d'hôtel (principalement destinés aux touristes) par kilomètre carré. Comme on peut le voir, la Corse, les Alpes françaises et la Côte d'Azur se démarquent clairement dans cette catégorie.
Comment utiliser une carte de chaleur géographique
Consulter les données touristiques françaises, c'est intéressant, mais ces cartes de chaleur peuvent-elles m'aider à analyser mon produit numérique ? Laissez-moi vous donner un exemple.
Restons dans le domaine du tourisme (et de la France) et imaginons que vous dirigez un service de location en ligne à court terme (un équivalent d'Airbnb). Vous avez l'idée de créer et de distribuer des supports promotionnels pour les festivals locaux des villes françaises afin d'inciter davantage de personnes à réserver un logement sur votre plateforme.
La première question qui vous viendrait à l'esprit serait : par quelle ville/festival commencer ?
Pour répondre à cette question, vous pouvez créer une carte de chaleur géographique affichant la répartition des maisons et appartements en location utilisant votre service.
En observant la carte, vous constaterez que votre service est particulièrement populaire dans le sud de la France. Vous pourriez donc envisager de commencer par promouvoir les festivals de Provence et de la Côte d'Azur.
#6 : Cartes de clics de frustration
Il s'agit d'un sous-type de cartes de clics qui filtrent et n'affichent que les cas où vos utilisateurs ont cliqué de manière répétée avec frustration. Les outils de cartographie de chaleur identifient généralement un clic de frustration (ou clic mort) lorsque l'utilisateur clique plusieurs fois de suite sur le même élément.
Comment utiliser une carte de clics de frustration
Les cartes de clics de frustration sont d'excellents outils pour identifier les expériences utilisateur problématiques. Cela peut concerner un élément qui semble être cliquable sans l'être, peu intuitif ou simplement un bouton qui ne fonctionne pas.
Par exemple, si nous réalisions une analyse des clics de frustration sur l'une des pages d'Iterate, nous obtiendrions certainement des clics de frustration à au moins deux endroits : en voici la raison :
Avez-vous remarqué les deux éléments textuels mis en évidence en bleu ? Eh bien, ce ne sont pas des liens. Il s'agit simplement de texte normal coloré en bleu. De nombreux visiteurs d'Iterate (moi y compris) ont tenté de cliquer sur ces textes en pensant être redirigés vers une autre page.
Bien sûr, rien ne se passe après avoir cliqué, ce qui peut entraîner de la frustration chez l'utilisateur et des "clics de frustration".
Les enseignements tirés de l'analyse de la carte des clics de frustration de cette page seraient, par exemple, de veiller à ce que votre texte ne ressemble pas à des liens. Vous pouvez également effectuer un test A/B avec différentes couleurs pour vérifier si votre hypothèse selon laquelle le texte bleu provoque des clics de frustration est vraie ou fausse.
#7 : Cartes de chaleur oculométriques
Jusqu'à présent, nous avons utilisé les cartes de survol pour comprendre où nos utilisateurs regardaient lorsqu'ils naviguaient sur notre page web. On suppose que les yeux des utilisateurs suivent la position du curseur la plupart du temps. Ainsi, le mouvement du curseur sur votre interface pourra indiquer ce sur quoi les yeux de vos utilisateurs se concentrent.
C'est une méthode courante pour analyser l'attention. Cependant, les données de carte de chaleur qu'elle fournit ne sont pas parfaites puisque les utilisateurs ne regardent pas toujours leur curseur.
Si vous souhaitez obtenir des données précises sur la localisation et des chiffres sur ce que vos utilisateurs regardent réellement, vous devriez envisager d'utiliser une carte de chaleur basée sur l'oculométrie.
Contrairement aux autres méthodes, les cartes de chaleur de suivi oculaire nécessitent des équipements spéciaux que vos utilisateurs devront porter afin de suivre le mouvement de leurs yeux et d'identifier précisément les éléments sur lesquels ils se concentrent.
Cela signifie que vous devrez inviter vos utilisateurs à des sessions de test spéciales, leur demander de porter ces capteurs et de commencer à utiliser votre produit. Bien que cela prenne beaucoup plus de temps et soit plus coûteux, la qualité des données obtenues est bien supérieure à tout ce que vous pourriez obtenir avec d'autres types de heatmaps de sites web.
Comment utiliser une heatmap d'oculométrie
Compte tenu du coût de l'organisation des sessions de test d'oculométrie, vous n'utiliserez probablement l'oculométrie que dans des domaines d'optimisation UX à fort impact.
Les études d'oculométrie sont très courantes pour les produits des grandes entreprises technologiques, où une amélioration de 1% de la convivialité de leurs produits peut se traduire par des dizaines de millions de revenus et de retour sur investissement.
Imaginez combien de revenus récurrents supplémentaires Amazon pourrait gagner s'ils réalisaient une étude d'oculométrie et plaçaient leurs bannières de produits mis en avant de manière à augmenter le taux de conversion de 1%.
#8 : [Bonus] Cartes de confettis
Les cartes de confettis sont un sous-type de cartes de clics classiques qui affichent les clics individuels au lieu de mettre en évidence la zone générale où les utilisateurs ont cliqué.
L'intérêt d'analyser les clics individuels réside dans votre capacité à les filtrer selon divers points de données complexes.
Ici, par exemple, nous avons regroupé les clics sur le CTA de recherche par jour de la semaine où l'événement du clic s'est produit.
Selon les données, on constate que les mardis reçoivent le plus de clics, tandis que les personnes visitant le site le lundi sont les plus distraites (de nombreux clics sur toute l'interface).
Comment utiliser une carte de confettis
Les cartes de confettis sont particulièrement utiles lorsque vous devez analyser le comportement utilisateur de façon granulaire. Contrairement aux heatmaps traditionnelles qui affichent des données agrégées, les cartes de confettis vous permettent de filtrer les clics individuels selon des paramètres comme le type d'appareil, la source de provenance ou même l'heure de la journée.
Ce type de heatmap est idéal pour détecter des schémas qui passeraient autrement inaperçus. Par exemple, si votre bouton de validation reçoit plus de clics le vendredi mais beaucoup moins le lundi, vos utilisateurs sont peut-être des acheteurs impulsifs, motivés par le jour de paie — et votre audience du lundi est encore en train de récupérer du week-end, fixant votre page de tarification sans convertir.
Les cartes de confettis peuvent aussi mettre en avant des distractions inattendues. Si les utilisateurs cliquent partout sur la page au lieu de là où vous le souhaitez, c'est qu'ils sont peut-être désorientés — ou cherchent désespérément un signe de vie. Si votre menu de navigation reçoit plus de clics que votre CTA, cela peut signifier que les utilisateurs sont perdus et cherchent à partir plutôt qu'à s'engager. Vous pouvez exploiter les insights des heatmaps pour affiner votre carte du parcours utilisateur, particulièrement lorsque vous identifiez ces points de friction. Filtrer par segment d'utilisateur peut vous permettre de voir quels groupes rencontrent le plus de difficultés et où il faut fluidifier l'expérience.
Les heatmaps renforcent votre empathie utilisateur
Chaque type de heatmap que nous avons exploré ensemble ici est capable de vous offrir un aperçu de la façon dont vos utilisateurs découvrent et utilisent vos produits. Si vous travaillez en méthode lean, les heatmaps offrent un moyen rapide et léger de mener des recherches UX avant d'investir dans des tests d'utilisabilité plus approfondis. Grâce à elles, vous serez en mesure de voir et de ressentir les difficultés rencontrées par vos utilisateurs, et d'avancer vers leur résolution.
Combinées à des outils d’analyse produit, les heatmaps peuvent fournir une vision plus claire sur la façon dont les utilisateurs interagissent avec votre produit et là où ils abandonnent. Par exemple, associer les heatmaps à des outils de relecture de session vous donne à la fois le « quoi » et le « pourquoi » derrière le comportement utilisateur.
Les heatmaps sont précieuses, mais elles ne sont qu’un des nombreux outils à votre disposition pour développer votre empathie ; pour découvrir les autres, assurez-vous de vous abonner à notre newsletter.