Cartes de chaleur de la souris : 8 façons d’améliorer votre produit
Observez ce que font réellement les utilisateurs, pas seulement ce qu'ils disent: Les enquêtes et les analyses ne racontent qu'une partie de l'histoire. Les cartes de chaleur de la souris révèlent où les utilisateurs hésitent, rencontrent des difficultés ou s'engagent le plus—vous aidant à prendre des décisions éclairées basées sur les données.
Priorisez les correctifs et fonctionnalités qui comptent vraiment: Au lieu de deviner sur quoi travailler ensuite, les cartes de chaleur mettent en avant les zones où les utilisateurs passent du temps (ou se frustrent), vous guidant clairement sur ce qui nécessite une attention prioritaire.
Découvrez pourquoi les utilisateurs abandonnent—et corrigez-le: Tous les abandons ne se valent pas. Les cartes de chaleur montrent si les utilisateurs ratent des appels à l'action importants, ont du mal avec des champs de formulaire ou se perdent—ce qui vous permet de lever les obstacles avant qu'ils n'abandonnent.
Détectez les points de friction cachés dans votre tunnel d’activation: Les utilisateurs cliquent-ils là où ils ne devraient pas ? Restent-ils bloqués à certaines étapes clés ? Les cartes de chaleur exposent les blocages afin que vous puissiez fluidifier le parcours et améliorer les conversions.
Probablement la partie la plus intéressante et gratifiante du métier de chef de produit est d’apprendre comment leurs utilisateurs pensent et agissent lorsqu’ils utilisent leurs produits.
Pour cela, nous réalisons généralement des entretiens utilisateurs, organisons des sondages et analysons nos données. Il existe cependant un autre outil précieux dans l’arsenal du chef de produit qui peut vous aider à mieux comprendre vos utilisateurs : les heatmaps de souris !
Aujourd’hui, je voudrais que nous examinions les cas d’usage pratiques des heatmaps de souris ainsi que leurs applications efficaces pour améliorer votre produit.
Vous voulez plus de The CPO Club ?
Inscrivez-vous gratuitement pour terminer la lecture de cet article :
Have an account? Log In
Que sont les heatmaps de souris et comment fonctionnent-elles ?
Une heatmap de souris (ou carte thermique d’attention) est un outil d’analyse produit qui visualise la façon dont les utilisateurs interagissent avec votre interface via les mouvements de leur souris. Elle crée une surcouche visuelle — typiquement en utilisant des dégradés de couleurs — sur une capture d’écran de votre interface pour montrer les zones où les utilisateurs survolent, déplacent, et cliquent le plus fréquemment.
Cela peut vous aider à identifier quels éléments attirent l’attention, où les utilisateurs hésitent, ou ce qui est totalement ignoré. Les heatmaps de souris sont particulièrement utiles lorsqu’on les combine à d’autres types de heatmaps, comme les scroll maps, qui montrent jusqu’où les utilisateurs font défiler la page.
Utilisés ensemble, ces outils vous offrent une vision plus complète de l’engagement utilisateur : ce qu’ils regardent, ce qu’ils ignorent, et comment leur attention circule naturellement.
Différents types de heatmaps sont couramment utilisés par les chefs de produit et les designers UX pour obtenir des insights sur le comportement de leurs utilisateurs, notamment les cartes de scroll, les cartes de clics, les cartes d’attention d’utilisateurs, les heatmaps d’eye-tracking, ainsi que bien d’autres exemples de heatmaps. Chaque type peut offrir des éclairages spécifiques pour booster la rétention et l’engagement utilisateur, cependant aujourd’hui je veux que nous approfondissions un type en particulier : la heatmap de souris.
Une heatmap de souris est ce qu’on appelle un « agrégat » puisqu’elle combine les données de plusieurs types d’interactions utilisateur : comportements de clic, de scroll, et de mouvement de souris.
Les heatmaps de souris sont relativement récentes dans le monde de l’analytics produit visuel, car combiner ces trois types de comportements différents en une seule vue visuelle est une tâche difficile. Ce sont les modèles d’IA qui ont permis aux outils d’analyse de le faire.
Cas d’usage concrets de l’optimisation de votre produit par le suivi de la souris
Maintenant que nous avons une compréhension générale de ces heatmaps, plongeons dans quelques cas réels où l’analyse de vos heatmaps de souris peut vous permettre d’apporter des améliorations significatives à votre produit.
Comment les chefs de produit utilisent les heatmaps de souris
Bien qu’analyser les interactions utilisateur puisse sembler plus adapté aux besoins des designers UX, les chefs de produit peuvent aussi utiliser les heatmaps de souris pour résoudre leurs propres problématiques. Voici quelques façons d’utiliser cet outil pour améliorer vos produits.
#1 : Identifier les points de blocage dans votre tunnel d’activation
D’après mon expérience sur les questions d’activation, l’optimisation du tunnel est l’une des missions les plus complexes mais à fort impact d’un chef de produit. Même une hausse modérée de 10 % de l’activation peut avoir un effet boule de neige sur tout le tunnel, augmentant fortement la conversion Free → Paid.
Cependant, l’activation n’est pas qu’une question de chiffres : c’est un casse-tête qui demande des insights comportementaux poussés, des expérimentations itératives et une volonté de remettre en question les hypothèses sur la façon dont les utilisateurs s’engagent avec votre produit. La clé n’est pas seulement d’inciter davantage d’utilisateurs à progresser dans le tunnel mais de vraiment comprendre pourquoi ils décrochent en premier lieu.
Pour cela, un chef de produit utilisera pratiquement tous les outils à sa disposition, dont l’analytics, les sondages, etc. Les cartes de souris en font aussi partie. Voici l’une des nombreuses façons dont elles peuvent aider à améliorer l’activation.
Imaginez que vous travaillez chez Atlassian et que vous vous fixez pour objectif trimestriel d’améliorer le taux de configuration de Jira Cloud.
En regardant le tunnel d’activation via votre outil d’analyse, vous remarquez une chute importante à l’étape où les utilisateurs saisissent le nom de leur instance Jira et créent leur site Atlassian.
Pour comprendre ce qui se passe, vous pouvez ouvrir votre outil de heatmap et examiner la heatmap de souris. Vous constatez que les utilisateurs passent beaucoup de temps sur la page, en cliquant activement sur le champ de nom du site et sur le champ « Commencer dans Jira ».
Ce comportement n’est pas normal, car vous souhaitez que les utilisateurs ne cliquent qu’une seule fois sur chaque champ et ne passent pas plus de 10-15 secondes sur cette page. Vous lancez une enquête et demandez à votre équipe QA de vérifier ce qui se passe.
Ce que découvre votre équipe, c’est que, pour un certain groupe d’utilisateurs, le validateur de nom de site (qui vérifie si le nom existe déjà) génère une erreur peu importe ce que l’on saisit.
La raison est qu’un Google Recaptcha invisible pense que ces utilisateurs sont des robots. Donc, pour corriger cela, vous discutez avec votre équipe sécurité, comprenez que le seuil de sécurité pour Recaptcha est plus élevé que nécessaire, et le diminuez.
En conséquence, vous débloquez vos utilisateurs, leur permettant de créer leur site, et améliorez significativement votre taux d’activation.
#2 : Aider à la priorisation des fonctionnalités
En matière de priorisation des fonctionnalités, le facteur unique le plus déterminant reste l’impact de cette fonctionnalité sur vos utilisateurs. Vous mesurez cet impact en vous basant sur les données, votre connaissance des besoins utilisateurs (basée sur des enquêtes et interviews), votre intuition, et la façon dont les utilisateurs interagissent avec votre interface.
C’est là que vos cartes de chaleur des mouvements de souris deviennent utiles.
Revenons à notre exemple Jira. Supposons que vous souhaitiez améliorer la manière dont les gens organisent le backlog et que plus de 20 idées de fonctionnalités existent à ce sujet. Pour les prioriser selon les besoins des utilisateurs, vous examinez la carte de chaleur de la page backlog. Après analyse, vous constatez qu’il y a beaucoup d’activité dans la section des filtres rapides.
Vous vous rendez donc sur votre outil d’analyse et extrayez un graphique de répartition des filtres rapides appliqués le plus souvent par vos utilisateurs. À la vue de ces données, vous constatez qu’environ 50% des utilisateurs Jira créent un filtre rapide pour afficher les tâches avec le statut « À faire ».
Une excellente façon d’améliorer l’expérience de vos utilisateurs, dans ce cas, serait d’ajouter un bouton filtre dédié aux statuts. Supposons que cette idée figurait déjà dans votre liste d’améliorations : vous pouvez ainsi utiliser cet enseignement pour lui accorder une plus grande priorité et la placer en tête du backlog de votre équipe.
#3 : Optimisation du taux de conversion
En termes de complexité, l’optimisation du taux de conversion (CR) peut facilement rivaliser avec les funnels d’activation. J’ai passé des mois à analyser le CR et des métriques similaires pour mes produits, à ajouter des fonctionnalités pour l’améliorer, à constater que cela ne fonctionnait pas, à ajouter autre chose, puis à répéter ce cycle jusqu’à développer quelque chose qui augmente réellement le taux de conversion.
Tout comme pour l’activation, les cartes de chaleur des souris sont un outil efficace pour analyser les défis liés à la conversion de vos produits.
Dans la plupart des cas, le principal avantage de cet outil est d’identifier les situations où les gens cliquent sur les mauvais CTA et ignorent ceux qui mènent à la conversion. Permettez-moi de le démontrer sur la page produit d’un magasin d’équipement de cuisine professionnelle.
Imaginez que nous examinons la carte de chaleur de cette page web. Il est probable que nous constaterions qu’un certain nombre de personnes cliquent sur le bouton « Chat Now » situé au-dessus du principal appel à l’action (afficher le produit). Je comprends, l’entreprise l’a ajouté pour convaincre ses utilisateurs que leurs produits sont les moins chers du marché.
Cependant, le problème ici est que cliquer sur « Chat Now » interrompt le parcours des utilisateurs qui consultent le produit et l’achètent – ce qui diminue considérablement le taux de conversion.
Ma suggestion ici serait de déplacer ce message et cet appel à l’action à un endroit moins visible de la page afin de ne pas perturber le parcours des utilisateurs.
#5 : Tests A/B pour valider les fonctionnalités
Une autre application utile des cartes de chaleur de la souris est la validation des fonctionnalités via les tests A/B. Ici, les cartes de chaleur peuvent servir de source précieuse de données en vous montrant visuellement les améliorations (ou leur absence) dans la manière dont les utilisateurs interagissent avec votre fonctionnalité.
Dans ce cas, vous effectuez le test A/B avec votre fonctionnalité activée pour la variante A et désactivée pour la variante B. Vous vous assurez alors que votre outil de cartographie de chaleur suit les interactions utilisateurs sur les deux variantes, afin de pouvoir comparer côte à côte la carte de chaleur de la souris de chacune.
En les observant, vous pouvez facilement repérer les changements de comportement des utilisateurs et voir si votre nouvelle fonctionnalité a eu l’impact escompté.
Un exemple de ceci serait l’ajout d’un bouton « Tout télécharger » sur la page de gestion des fichiers de votre produit de stockage cloud. Si les utilisateurs commencent à cliquer activement sur ce bouton au lieu de télécharger manuellement chaque fichier de leur espace de stockage, alors votre nouvelle fonctionnalité sera un succès.
Comment les UX designers utilisent les cartes de chaleur de souris
Les cartes de chaleur sont un outil fantastique pour analyser les interactions des utilisateurs. Ainsi, je considère qu’il s’agit d’un indispensable dans l’arsenal des UX designers. Voici quelques façons dont mon équipe UX a utilisé les cartes de chaleur de souris pour améliorer leurs conceptions.
#6 : Améliorer le taux de complétion des formulaires
Quel que soit le produit que vous proposez, il y aura probablement au moins un formulaire dans votre tunnel d’activation ou de monétisation. De plus, selon mon expérience, vous perdez très souvent des utilisateurs ou des conversions à l’étape où ils doivent remplir ce formulaire.
La principale raison de cette perte est probablement une mauvaise expérience utilisateur, laissant les gens ennuyés ou frustrés. Pour comprendre si cela se produit avec votre formulaire et pour y remédier, les designers produit réalisent des tests d’utilisabilité et observent attentivement le comportement des utilisateurs. Cependant, le problème avec ces tests est qu’ils sont coûteux en temps et en ressources.
L’analyse des formulaires via les cartes de chaleur de souris, en revanche, peut identifier une grande partie des problèmes d’utilisabilité à moindre coût.
Par exemple, si vous constatez un grand abandon sur votre formulaire d’inscription lors du paiement et que vous consultez la carte de chaleur, il se peut que vous remarquiez une forte activité de la souris dans les premiers champs, puis une chute soudaine sur le champ « numéro de téléphone ».
Cela peut indiquer que les utilisateurs n’ont pas envie de partager leur numéro de téléphone avec vous, et vous devriez envisager une autre façon de les identifier.
#7 : Corriger les problèmes de navigation
Parfois, la baisse de découverte et d’utilisation de certaines fonctionnalités ou sections de votre site Web s’explique par le fait que les utilisateurs n’arrivent pas à les trouver sur votre plateforme.
Si vous êtes un site e-commerce qui vient de commencer à vendre des chaussures de sport professionnelles (par exemple lutte, basketball, etc.), vous ajouteriez naturellement une nouvelle section dans votre menu de navigation avant de passer à autre chose.
Cependant, imaginez que le trafic de votre section chaussures de sport est beaucoup plus faible que prévu. Après examen de la carte de chaleur de souris, vous pourriez constater que très peu de personnes survolent cette section « sport » dans votre navigation.
D’une part, cela peut venir d’un manque d’intérêt pour les chaussures de sport. D’autre part, il se peut aussi que les utilisateurs n’aient pas remarqué son ajout tout simplement parce que la liste des types de chaussures dans votre navigation est très longue.
Même s’il est important de garder vos sections bien organisées, quand vous ajoutez une nouveauté, il faut l’afficher à un emplacement bien visible (au moins au début). Ainsi, un UX designer pourrait envisager de placer cette nouvelle section directement sur la barre de navigation principale. Sinon, il pourrait la laisser à la même place mais lui ajouter une étiquette « nouveau » afin d’attirer l’attention.
#8 : Améliorer la lisibilité
Ce cas est particulièrement pertinent pour les blogs ou d’autres ressources proposant du contenu long. Parfois, la façon dont vous avez conçu votre texte affecte négativement sa lisibilité — ce qui conduit les utilisateurs à abandonner l’article.
Comme pour les cas précédents, vous pouvez diagnostiquer ce problème grâce aux cartes de chaleur de souris. Par exemple, si en consultant la carte de chaleur vous voyez que les gens suivent chaque ligne du texte avec leur curseur, cela signifie peut-être que la largeur du paragraphe est trop grande pour qu’ils puissent suivre chaque ligne des yeux (ils utilisent alors le curseur pour se repérer).
Solutions de cartes de chaleur à considérer
Après avoir abordé les cas d’usage pratiques des cartes de chaleur de souris, laissez-moi vous présenter quelques logiciels d’analyse de cartes de chaleur qui proposent cet outil et vous montrer leurs différentes approches.
Hotjar
Hotjar ne propose pas de carte de chaleur de souris à proprement parler. À la place, l’outil a divisé les informations qu’on retrouve dans une carte de chaleur classique en plusieurs visualisations distinctes : cartes des clics de souris, cartes de défilement, cartes de mouvements de souris, et cartes de clics frénétiques. Voici à quoi ressemble leur « move map ».
Bien qu'avoir des cartes séparées puisse sembler incommode à première vue, elles sont bien plus efficaces pour fournir des données plus précises pour chaque type d’interaction (par exemple le scroll).
De plus, cet outil offre également des fonctionnalités supplémentaires telles que le comptage en temps réel des visiteurs du site, les relectures de sessions, la représentation visuelle des zones d’engagement sur la mise en page, etc.
Crazy Egg
Avec Crazy Egg, vous obtenez une carte de chaleur qui inclut des ensembles de données issus à la fois des clics utilisateurs et des survols de souris. Grâce à leurs algorithmes propriétaires, ils peuvent combiner ces deux types d’interactions distincts en une seule carte qui affiche les zones générales d’intérêt de vos utilisateurs.
Comparé à Hotjar, vous obtenez une granularité légèrement inférieure. Toutefois, ce type de carte de chaleur combinée est très utile lorsque votre objectif est d’obtenir une vue d’ensemble de la façon dont les utilisateurs interagissent avec votre expérience utilisateur plutôt que d’identifier les emplacements exacts des clics, la profondeur de scroll, etc.
Tout comme Hotjar, vous bénéficiez également d’enregistrements de session et d’autres capacités analytiques avec Crazy Egg.
Mouseflow
Tout comme Hotjar, Mouseflow vous propose 6 types distincts de cartes de chaleur du suivi de la souris, plutôt qu’une seule carte combinée. Vous trouvez les types habituels, dont les cartes de chaleur de clics, de survol et de scroll.
En outre, Mouseflow propose également un type de carte de chaleur spécial que l’on trouve rarement sur ce type de plateforme : la carte de chaleur géographique.
Au lieu de visualiser les interactions utilisateurs sur votre interface, cette carte de chaleur affichera la carte du monde et mettra en évidence les régions où vous obtenez le plus d’utilisateurs (et d’interactions).
Indispensable à ajouter aux entretiens utilisateurs et aux tests d’utilisabilité
Je soutiens que les entretiens utilisateurs sont l’activité la plus précieuse que les chefs de produit réalisent. Mais, tout comme les tests d’utilisabilité, cela prend beaucoup de temps.
Pensez donc à utiliser les cartes de chaleur de la souris comme une excellente (et économique) alternative pour répondre à certaines de vos questions les plus simples sur vos clients, et réservez vos heures d’entretien pour les plus complexes.
Vous cherchez d’autres moyens d’améliorer vos produits ? Développez vos connaissances et vos compétences dans cette profession fascinante en vous abonnant à notre newsletter. Vous resterez informé(e) des sujets les plus récents en gestion de produit grâce à notre contenu éducatif de premier plan et nos listes de logiciels.