8 exemples de cartes thermiques pour une gestion de produit axée sur les données
Probablement la qualité la plus importante d’un bon chef de produit est sa capacité à empathiser avec les utilisateurs. Pour développer cette compétence, les PM consacrent des heures aux entretiens utilisateurs et à l’analyse des données derrière les comportements des utilisateurs.
Mais il existe une autre façon d’aiguiser votre intuition utilisateur : en analysant la façon dont les utilisateurs interagissent avec votre produit à l’aide des heatmaps (cartes de chaleur).
Les heatmaps font partie des nombreux outils de recherche utilisateur qui permettent de découvrir les points de friction, l’intention et les opportunités le long du parcours utilisateur. Elles relèvent également de la catégorie de l’analytique produit, vous permettant d’aller au-delà des métriques de vanité et de visualiser ce que font réellement 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 à propos des avantages des heatmaps — ou que vous recherchiez des exemples concrets pour justifier leur adoption.
Dans les deux cas, vous êtes au bon endroit. Décortiquons les différents types de heatmaps et comment vous pouvez les utiliser pour atteindre vos objectifs produit.
#1 : Cartes de clics et cartes de tapotement
Commençons par la plus populaire de toutes : la carte des clics (pour les interfaces desktop) ou des tapotements (pour les interfaces mobiles).
Les cartes de clics sont la représentation visuelle de la façon dont vos utilisateurs cliquent sur les éléments de votre interface. Il s’agit simplement d’une capture d’écran de votre interface utilisateur, avec des parties mises en valeur par différentes couleurs.
Si votre outil de heatmap met en évidence un certain élément de votre interface, cela signifie qu’un utilisateur (ou plusieurs) a cliqué dessus. La couleur, quant à elle, vous indique le nombre de clics reçus par cet élément en particulier.
Les outils de heatmap utilisent généralement les couleurs de l’échelle de température.
Vous verrez les couleurs les plus chaudes de ce dégradé dans les zones recevant le plus de clics, et les couleurs les plus froides pour les zones boudées par les utilisateurs.
Voici à quoi ressemble la visualisation de données d’une carte de tapotement pour une application mobile de gestion financière.
On constate que les zones indiquant le montant dépensé pour chaque transaction sont mises en évidence en rouge. Cela signifie que de nombreuses personnes cliquent dessus (probablement pour développer la transaction et consulter les détails).
Le solde du compte, en haut de l’écran, apparaît en vert : peu d’utilisateurs cliquent dessus.
Comment utiliser une carte de clics
Les cartes de clics sont particulièrement riches en enseignements exploitables. Il y a énormément de choses à apprendre sur le comportement de vos utilisateurs en observant les zones où ils cliquent.
Par exemple, si vous gérez l’application d’un refuge pour chiens et que vous disposez d’une page de dons permettant aux utilisateurs de soutenir votre structure financièrement, vous pouvez utiliser une carte de clics pour déterminer quelle option de don fonctionne le mieux.
En analysant la carte de tapotement ci-dessus, on peut affirmer que les options à $10 et « Autre » sont de loin les choix les plus populaires concernant le montant du don.
Une information clé qui en découle est qu’il existe probablement un montant de don absent de la liste (ex. : $1) et que les utilisateurs cliquent sur « Autre » pour saisir ce montant.
Il serait donc pertinent de voir ce que les gens saisissent dans la rubrique « Autre », d’identifier les montants les plus fréquents, puis de les ajouter à la liste.
#2 : Cartes de scroll
Comme son nom l’indique, ce type de heatmap permet d’analyser le comportement de scroll de vos utilisateurs.
Les cartes de scroll exploitent elles aussi un code couleur basé sur l’échelle de température. Mais au lieu de mettre en avant les endroits où les utilisateurs cliquent, elles surlignent des sections entières de votre page en fonction du nombre de visiteurs ayant fait défiler jusqu’à cette zone et l’ayant donc vue.
Comme avec les autres heatmaps, vous aurez des mises en évidence « chaudes » si beaucoup d’utilisateurs scrollent jusqu’à la section concernée, et des zones « froides » si peu de personnes y accèdent.
Comment utiliser une carte de scroll
Les cartes de défilement sont idéales pour optimiser la position de certains éléments ou sections de votre page et résoudre les problèmes d'utilisation ou d'engagement avec ces sections.
Examinons un cas typique de dépannage en analysant la carte de défilement de la page de tarification d’un service SaaS appelé Nelio.
Imaginez que vous rencontrez des difficultés pour rester compétitif. Pour une raison quelconque, les gens préfèrent s’inscrire chez vos concurrents. Lorsque vous leur demandez pourquoi, ils répondent que l’autre outil proposait une fonctionnalité de suivi multi-objectifs, ce que vous n’aviez pas.
Or, le problème est que vous avez bien cette fonctionnalité, donc il vous faut maintenant comprendre pourquoi les gens ne la remarquent pas.
En regardant la carte de défilement 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 situe sous la ligne de flottaison et dans la zone bleue. Cela signifie que seuls quelques-uns de vos utilisateurs font défiler la page jusqu'à la lire, ce qui est généralement vrai pour la plupart des comportements de navigation utilisateur.
Problème identifié ! Pour y remédier, vous pouvez envisager d’ajouter les fonctionnalités de votre section “Tous les forfaits incluent” comme éléments supplémentaires dans vos listes de plans tarifaires – en vous assurant que cela apparaisse au-dessus de la ligne de flottaison afin que les gens le voient sans avoir à faire défiler la page.
#3 : Cartes de chaleur des mouvements de souris
Également appelées cartes de mouvements, ce type de carte de chaleur suit la position de la souris – vous permettant de visualiser le « mouvement » de vos utilisateurs à travers une interface.
Dans la plupart des cas, lors de l’utilisation de cartes de chaleur des mouvements, on suppose que les utilisateurs regarderont très probablement l’élément sur lequel leur curseur se trouve. En traquant les déplacements de la souris, nous corrélons donc ce suivi au regard des utilisateurs lorsqu’ils naviguent sur notre interface.
Visuellement, cela consiste en des points mis en évidence (encore une fois selon un code couleur de température) sur les parties de votre interface où le curseur de la souris de vos utilisateurs est resté le plus longtemps. De plus, certains outils de carte de chaleur vous donneront aussi une « trace » du point de départ des utilisateurs et de leur parcours sur l’interface.
Voici à quoi ressemblent ces traces.
Il s’agit de la carte de chaleur de suivi de souris de sans doute l’une des interfaces les mieux conçues en matière d’UX au monde – le site d’Apple (après tout, ils sont les pionniers de l’UX design dans l’histoire). Ces traces montrent que les utilisateurs commencent à explorer la page d’accueil de MacOS Snow Leopard en examinant d’abord le fascinant félin lui-même, avant de lire le titre, puis de passer aux autres éléments de la page d’atterrissage.
Comment utiliser une carte des mouvements de souris
Une façon intéressante d’utiliser une carte de mouvements est d’identifier les sources de distraction pour les utilisateurs.
Par exemple, si vous êtes chargé d’optimiser la page de résultats de recherche Amazon (votre objectif étant que les utilisateurs cliquent sur un produit trouvé pour eux par Amazon), vous pourriez consulter la carte de chaleur des mouvements et voir que la majorité des utilisateurs commencent par regarder l’un de vos bandeaux (par exemple une annonce), avant d’examiner les résultats de recherche.
C’est une grande distraction pour vos utilisateurs, qui peut diminuer leurs chances de cliquer sur les résultats de recherche. Ainsi, vous déciderez de retirer ce bandeau ou de le rendre moins visible sur votre interface.
#4 : Cartes de chaleur de l’attention
Jusqu’à maintenant, nous avons évoqué trois outils d’analyse permettant de visualiser le comportement de vos utilisateurs – via les clics, les déplacements de souris et le défilement de page.
Si chacun de ceux-ci nous fournit de précieuses informations, il serait trompeur de ne s’appuyer que sur l’un d’eux. Analyser le comportement utilisateur de façon isolée, sans contexte adéquat, ne donne pas une vue d’ensemble suffisante de ce qui se passe réellement.
Ainsi, les équipes produits utilisent généralement simultanément tous ces types d’analyses et combinent les informations recueillies avant de les analyser pour tirer des conclusions. Cependant, ce n’est pas non plus la solution parfaite, car il vous faudra probablement trois fois plus de temps pour mener une analyse complète.
Heureusement, avec l’avènement des modèles d’IA et des algorithmes avancés, les outils modernes de visualisation de cartes de chaleur peuvent combiner les informations issues des clics, des survols de souris et du défilement en une seule carte de chaleur.
Ce quatrième type s’appelle la carte de chaleur de l’attention car elle indique précisément quelles parties de votre interface attirent le plus l’attention de vos utilisateurs. Visuellement, elle ressemble beaucoup à une carte de clics, avec certains éléments de votre UI mis en évidence par différentes couleurs dans la palette de couleurs de température en fonction du degré d’attention des utilisateurs.
#5 : Cartes de chaleur géographiques
Les cartes thermiques existent depuis bien avant que l’on commence à appliquer cette technique aux interfaces utilisateur. L’un des types les plus répandus de cartes thermiques traditionnelles est la carte géographique.
Dans ce cas, vous mettez en valeur certaines parties d’une carte en fonction du type de données que vous avez sélectionné. Par exemple, si vous souhaitez analyser la répartition géographique des sites touristiques en France, vous pouvez utiliser cette carte thermique géographique.
Sur la carte ci-dessus, elle montre le nombre de lits d’hôtel (principalement destinés aux touristes) par kilomètre carré. Comme on le voit, la Corse, les Alpes françaises et la Côte d’Azur sont les grands gagnants dans cette catégorie.
Comment utiliser une carte thermique géographique
Examiner les ensembles de données touristiques de la France, c'est intéressant, mais ces cartes thermiques peuvent-elles m'aider à analyser mon produit numériquea? Laissez-moi vous montrer un exemple.
Restons sur le thème du tourisme (et de la France) et imaginons que vous gérez un service de location de courte durée en ligne (similaire à Airbnb). Vous avez l’idée de créer et distribuer des supports promotionnels pour les festivals locaux dans des villes françaises afin d’inciter plus de personnes à réserver des hôtels via votre service.
La première question qui vous viendrait à l’esprit serait : par quelle ville/festival commencera?
Pour obtenir une réponse, vous pouvez tracer la carte thermique géographique montrant la répartition des maisons et appartements loués qui utilisent votre service.
En regardant la carte, on constate que votre service est assez populaire dans le sud de la France. Vous devriez donc envisager de commencer par promouvoir les festivals de Provence et de la Côte d’Azur.
#6 : Cartes de clics rageux
Il s’agit d’un sous-type de cartes de clics qui filtrera et n’affichera que les cas où vos utilisateurs ont cliqué sur quelque chose de façon répétée et frustrée. Les outils de cartographie thermique considèrent généralement un clic rageux (ou clic mort) quand l’utilisateur clique plusieurs fois d’affilée sur le même élément.
Comment utiliser une carte de clics rageux
Les cartes de clics rageux sont d’excellents outils pour identifier les expériences utilisateur problématiques. Cela peut concerner un élément qui paraît cliquable sans l’être, peu intuitif, ou tout simplement un bouton qui ne fonctionne pas.
Par exemple, si nous analysions les clics rageux sur l’une des pages d’Iterate, nous obtiendrions sûrement des clics rageux à au moins deux endroits – voici pourquoia:
Avez-vous remarqué les deux éléments de texte surlignés en bleua? Devinez quoi, il ne s’agit pas de liens. Ce n’est que du texte ordinaire coloré en bleu. De nombreux visiteurs d’Iterate (moi y compris) ont tenté de cliquer sur ces éléments en s’attendant à être redirigés vers une autre page.
Bien sûr, rien ne se passera après avoir cliqué dessus, ce qui peut amener l’utilisateur à être frustré et à se mettre à "cliquer rageusement".
Les enseignements à tirer de l’analyse de la carte de clics rageux de cette page seraient de s’assurer, par exemple, que votre texte ne ressemble pas à des liens hypertextes. Vous pouvez peut-être effectuer un test A/B avec différentes couleurs pour voir si votre hypothèse selon laquelle le texte bleu entraîne des clics rageux est vraie ou non.
#7 : Cartes thermiques de suivi du regard
Jusqu’à présent, nous avons utilisé des cartes de survol pour comprendre où nos utilisateurs regardent lors de la navigation sur notre page web. Nous faisons l’hypothèse que les yeux de l’utilisateur suivent la majorité du temps le curseur. Ainsi, le déplacement du curseur à travers votre interface vous donne une idée de ce sur quoi se concentrent les yeux de vos utilisateurs.
C’est une méthode courante pour analyser l’attention. Toutefois, les données issues de ce type de carte thermique ne sont pas parfaites, car l’utilisateur ne regarde pas toujours son curseur.
Si vous souhaitez obtenir des données précises sur la localisation et des chiffres précis sur ce que regardent réellement vos utilisateurs, il vaut alors mieux utiliser une carte thermique de suivi du regard.
Contrairement aux autres, les cartes thermiques de suivi du regard requièrent que vos utilisateurs portent des équipements spécialisés permettant de suivre les mouvements de leurs yeux et d’identifier la localisation des éléments qu’ils regardent sur l’écran.
Cela signifie que vous devrez inviter vos utilisateurs à des sessions de tests spéciales, leur demander de porter ces traceurs et commencer à utiliser votre produit. Même si cela prend beaucoup plus de temps et coûte plus cher, la qualité des données que vous en retirez est bien supérieure à tout ce que vous pouvez obtenir avec d'autres types de heatmaps de sites web.
Comment utiliser une heatmap d'eye-tracking
Étant donné le coût de l'organisation de sessions de tests d'eye-tracking, vous n'utiliserez probablement ce type d'étude que pour les domaines d'optimisation UX à fort impact.
Les études d'eye-tracking sont très courantes pour les produits des grandes entreprises technologiques, où une amélioration de 1 % de l'utilisabilité de leurs produits peut se traduire par des dizaines de millions en revenus et ROI.
Imaginez combien d'ARR supplémentaire Amazon pourrait générer s'ils réalisaient une étude d'eye-tracking et positionnaient leurs bannières de produits phares de façon à augmenter le taux de conversion de 1 %.
#8 : [Bonus] Confetti Maps
Les heatmaps confetti sont un sous-type de cartes de clics classiques qui affichent les clics individuels au lieu de mettre en valeur la zone générale où les utilisateurs ont cliqué.
L'intérêt d'analyser les clics individuels réside dans la possibilité de les filtrer selon divers points de données complexes.
Ici, par exemple, nous avons regroupé les clics sur le CTA de recherche selon le jour de la semaine où l'événement a eu lieu.
D'après les données, nous pouvons voir que les mardis remportent le plus de clics, tandis que les visiteurs du lundi sont les plus distraits (beaucoup de clics dispersés sur toute l’interface).
Comment utiliser une carte de chaleur confetti
Les cartes de chaleur confetti sont particulièrement utiles lorsque vous souhaitez analyser le comportement utilisateur à un niveau granulaire. Contrairement aux cartes classiques qui montrent des données agrégées, les cartes confetti vous permettent de filtrer les clics individuels en fonction de paramètres comme le type d’appareil, la source de trafic ou même le moment de la journée.
Ce type de carte de chaleur est idéal pour repérer des schémas qui passeraient sinon inaperçus. Par exemple, si votre bouton de validation reçoit plus de clics le vendredi mais beaucoup moins le lundi, vos utilisateurs pourraient être des acheteurs impulsifs à la paie — et ceux du lundi peinent sans doute à se remettre du week-end, restant figés sur votre page de tarifs au lieu de convertir.
Les cartes confetti peuvent aussi révéler des sources de distraction inattendues. Si les utilisateurs cliquent un peu partout sur la page plutôt qu’aux endroits voulus, ils sont peut-être perdus — ou cherchent désespérément un signe de vie. Si votre menu de navigation reçoit plus de clics que votre CTA, cela signifie peut-être que les utilisateurs sont perdus et cherchent à s’échapper plutôt qu’à s’engager. Vous pouvez utiliser les informations issues des cartes de chaleur pour affiner votre parcours utilisateur, notamment pour identifier ces points de friction. Le filtrage par segment utilisateur vous permet de voir quels groupes rencontrent le plus de difficultés et où vous devez fluidifier l’expérience.
Les cartes de chaleur renforcent l’empathie utilisateur
Chacun des types de cartes de chaleur que nous avons découverts ensemble ici peut vous donner un aperçu de la façon dont vos utilisateurs explorent et utilisent vos produits. Si vous travaillez en mode lean, les cartes de chaleur offrent un moyen rapide et léger de mener une recherche UX avant d’investir dans des tests d’utilisabilité plus poussés. Grâce à elles, vous serez capable de voir et de ressentir les difficultés rencontrées par vos utilisateurs et d’avancer dans la résolution de ces points.
Combinées à des outils d’analyse produit, les cartes de chaleur offrent une vision plus claire de la façon dont les utilisateurs interagissent avec votre produit et où ils décrochent. Par exemple, associer les cartes de chaleur à des outils de relecture de sessions permet d’obtenir à la fois le « quoi » et le « pourquoi » derrière les comportements utilisateur.
Les cartes de chaleur sont précieuses, mais elles ne représentent qu’un des nombreux outils à disposition pour développer l’empathie. Pour découvrir les autres, n’oubliez pas de vous abonner à notre newsletter.