Cartes de chaleur de la souris : 8 façons d’améliorer votre produit
Voyez ce que font vraiment les utilisateurs, pas seulement ce qu’ils disent: Les sondages et les analyses ne racontent qu’une partie de l’histoire. Les cartes de chaleur révèlent où les utilisateurs hésitent, rencontrent des difficultés ou interagissent le plus—vous aidant à prendre des décisions fondées sur les données, en toute confiance.
Priorisez les correctifs et fonctionnalités qui comptent vraiment: Au lieu de deviner la prochaine étape, les cartes de chaleur mettent en lumière les zones que les utilisateurs explorent (ou qui les frustrent), vous donnant une direction claire sur ce qui doit être traité en priorité.
Découvrez pourquoi les utilisateurs abandonnent—et corrigez-le: Tous les abandons ne se valent pas. Les cartes de chaleur montrent si les utilisateurs passent à côté de CTA essentiels, rencontrent des difficultés avec des champs de formulaires ou se perdent—vous permettant de supprimer ces obstacles avant qu’ils ne quittent.
Identifiez la friction cachée dans votre tunnel d’activation: Est-ce que des utilisateurs cliquent là où ils ne devraient pas ? Sont-ils bloqués à des étapes clés ? Les cartes de chaleur mettent à jour les goulets d’étranglement pour fluidifier le parcours utilisateur et booster vos 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 interviews utilisateurs, des enquêtes, et nous analysons nos données. Il existe cependant un autre outil précieux dans l’arsenal du PM qui peut vous aider à vous mettre à la place de vos utilisateurs : les heatmaps de souris !
Aujourd’hui, je souhaite que nous examinions les cas d’usages pratiques des heatmaps de souris et les façons efficaces dont elles peuvent servir à 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
Qu’est-ce qu’une heatmap de souris et comment cela fonctionne-t-il ?
Une heatmap de souris (également appelée carte de chaleur d’attention) est un outil d’analyse produit qui permet de visualiser la façon dont les utilisateurs interagissent avec votre interface via leurs mouvements de souris. Elle crée une superposition visuelle—généralement à l’aide de dégradés de couleurs—sur une capture d’écran de votre interface utilisateur pour montrer où les utilisateurs passent leur souris, se 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’elles sont utilisées en complément d’autres types de heatmaps, comme les cartes de défilement, qui capturent 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 voient, ce qu’ils ignorent et vers où leur attention se dirige naturellement.
Différents types de heatmaps sont couramment utilisés par les chefs de produit et les designers UX pour obtenir des informations sur le comportement de leurs utilisateurs, y compris les cartes de défilement, cartes de clics, cartes d’attention, heatmaps oculaires (eye-tracking), et bien d’autres exemples encore. Chaque type peut apporter des informations spécifiques pour stimuler la rétention et l'engagement utilisateur, mais aujourd’hui je veux que nous nous concentrions sur un type particulier : la heatmap de souris.
Une heatmap de souris est ce que l’on appelle un « agrégat » puisqu’elle inclut des données combinées de plusieurs types d’interactions utilisateur distinctes : comportement de clics, comportement de défilement et mouvements de souris.
Les heatmaps de souris sont relativement récentes dans le domaine de l'analyse visuelle des produits, car la combinaison des données issues de ces trois types de comportements en une seule visualisation était une tâche difficile à accomplir. C’est l’avènement des modèles d’IA qui a permis aux outils d’analyse d’y parvenir.
Exemples d’utilisation concrets de l’optimisation de votre produit grâce au suivi de la souris
Maintenant que nous avons une compréhension générale de ce que sont ces heatmaps, plongeons-nous dans plusieurs cas concrets où vous pouvez apporter une réelle valeur à votre produit en analysant vos heatmaps de souris.
Comment les chefs de produit utilisent les heatmaps de souris
Bien qu’analyser les interactions utilisateur puisse sembler relever davantage du designer UX, les chefs de produit peuvent eux aussi utiliser les heatmaps de souris pour résoudre leurs propres problématiques. Voici quelques-unes des façons dont j’ai utilisé cet outil pour améliorer mes produits.
#1 : Identifier les points de blocage dans votre tunnel d’activation
De mon expérience avec les défis d’activation, l’optimisation du tunnel est l’une des responsabilités les plus complexes mais aussi les plus impactantes d’un chef de produit. Même une augmentation modeste de 10 % de l’activation peut avoir un effet boule de neige sur tout le tunnel, augmentant significativement la conversion Free → Payant.
Cependant, l’activation n’est pas qu’une question de chiffres : c’est un casse-tête qui nécessite une compréhension approfondie des comportements, des expérimentations itératives, et la volonté de remettre en question ses suppositions sur la façon dont les utilisateurs interagissent avec votre produit. La clé n’est pas seulement d’encourager davantage d’utilisateurs à passer par le tunnel, mais de vraiment comprendre pourquoi ils décrochent à l’étape concernée.
Pour cela, un chef de produit va utiliser pratiquement tous les outils à sa disposition, y compris l’analytics, les enquêtes, etc. Les cartes de la souris en font également partie. Voici l’une des façons dont elles peuvent contribuer à améliorer l’activation.
Imaginez que vous travaillez chez Atlassian et que vous vous êtes fixé comme objectif trimestriel d’améliorer le taux de configuration de Jira Cloud.
En analysant le tunnel d’activation avec votre outil d’analytics, vous constatez une chute marquée à l’étape où les utilisateurs doivent saisir le nom de leur instance Jira et créer leur site Atlassian.
Pour comprendre ce qui se passe, vous pouvez ouvrir votre outil de heatmap et examiner la carte de chaleur de la souris. Ce que vous voyez, ce sont des utilisateurs passant beaucoup de temps sur la page, cliquant activement sur le champ du nom du site et sur le bouton « Démarrer sur Jira ».
Ce comportement n’est pas normal, car vous voulez que les utilisateurs cliquent sur chaque champ une seule fois et ne passent pas plus de 10 à 15 secondes sur cette page. Vous lancez une enquête et demandez à votre équipe QA d’examiner ce qui se passe.
Ce que votre équipe découvre, c’est que, pour un certain groupe d’utilisateurs, le validateur de nom de site (qui vérifie si le nom existe déjà) affiche une erreur quel que soit le texte saisi.
La raison est qu’un Google Recaptcha invisible considère ces utilisateurs comme des robots. Pour résoudre ce problème, vous discutez avec votre équipe de sécurité, comprenez que le seuil de sécurité du recaptcha est plus élevé que nécessaire, puis vous 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 le plus déterminant que vous prenez en compte est l’impact de cette fonctionnalité sur vos utilisateurs. Vous mesurez cet impact à partir de données, de votre connaissance des besoins utilisateurs (basée sur des enquêtes et des interviews), de votre intuition et de la façon dont les utilisateurs interagissent avec votre interface.
C’est ici que vos cartes de chaleur de la souris deviennent utiles.
Retour à notre exemple Jira. Supposons que vous souhaitiez améliorer la façon dont les gens organisent le backlog et qu’il y ait plus de 20 idées de fonctionnalités pour cela. Pour les prioriser selon les besoins utilisateurs, vous consultez la carte de chaleur de la page du backlog. Après analyse, vous voyez une forte activité dans la section des filtres rapides.
Vous vous rendez donc sur votre outil d’analyse et extrayez un graphique de la répartition des filtres rapides les plus fréquemment appliqués par vos utilisateurs. Vous observez alors qu’environ 50 % des utilisateurs Jira créent un filtre rapide pour afficher les tâches en « Statut À Faire ».
Un excellent moyen d’améliorer l’expérience utilisateur serait alors d’ajouter un bouton de filtre dédié pour les statuts. Supposons que cette idée de fonctionnalité figurait déjà dans votre liste d’améliorations : vous utilisez cet insight pour lui accorder une plus haute priorité et la remonter en haut du backlog de votre équipe.
#3 : Optimisation du taux de conversion
En termes de complexité, l’optimisation du taux de conversion (CR) peut aisément rivaliser avec les tunnels d’activation. J’ai passé des mois à analyser le CR et des métriques similaires pour mes produits, à ajouter des fonctionnalités censées l’améliorer, puis à constater qu’elles ne fonctionnent pas, à en ajouter d’autres, et à répéter ce cycle jusqu’à aboutir à quelque chose qui augmente réellement le taux de conversion.
Tout comme pour l’activation, les cartes de chaleur de la souris sont un outil efficace pour analyser les défis de conversion de vos produits.
Dans la plupart des cas, l’utilité principale de cet outil est d’identifier les cas où les gens cliquent sur de mauvais appels à l’action et ignorent ceux qui conduisent à la conversion. Je vais illustrer cela sur la page d’un produit d’un magasin d’équipement de cuisine professionnelle.
Imaginons que nous observions la carte de chaleur de cette page web. Il est probable qu’un nombre significatif de personnes clique sur le bouton « Chat Now » situé au-dessus de l’appel à l’action principal (voir le produit). Je comprends, l’entreprise l’a ajouté pour convaincre ses clients que ses produits sont les moins chers du marché.
Toutefois, le problème ici est que cliquer sur « Chat Now » interrompt le parcours des utilisateurs en train de consulter puis d’acheter le produit – ce qui fait chuter drastiquement le taux de conversion.
Ma recommandation serait donc de déplacer ce message et cet appel à l’action vers une partie moins visible de la page afin de ne pas perturber le parcours utilisateur.
#5 : Tests A/B pour valider des fonctionnalités
Une autre utilisation utile des cartes de chaleur de la souris est la validation des fonctionnalités via les tests A/B. Dans ce cas, les cartes de chaleur servent de source visuelle précieuse pour constater les améliorations (ou leur absence) dans la façon dont les utilisateurs interagissent avec votre fonctionnalité.
Dans cette situation, vous réalisez un test A/B en activant la fonctionnalité sur la variante A et en la désactivant sur la variante B. Vous vous assurez alors que votre outil de heatmapping suit les interactions utilisateur sur les deux variantes, ce qui vous permet de comparer côte à côte la carte de chaleur de la souris de chacune.
En les observant, vous pouvez facilement constater les changements de comportement des utilisateurs et voir si votre nouvelle fonctionnalité a eu l’effet escompté.
Un exemple serait l’ajout d’un bouton « Tout télécharger » sur la page de gestion de fichiers de votre solution de stockage cloud. Si les utilisateurs commencent à cliquer sur ce bouton au lieu de télécharger les fichiers un par un, alors votre nouvelle fonctionnalité sera un succès.
Comment les UX Designers utilisent les cartes de chaleur de la souris
Les heatmaps sont un outil fantastique pour examiner les interactions des utilisateurs. Ainsi, je considère que c'est l'un des indispensables dans l'arsenal des designers UX. Voici quelques façons dont mon équipe UX a utilisé les heatmaps de souris pour améliorer leurs designs.
#6 : Améliorer le taux de complétion des formulaires
Quel que soit le type de produit que vous proposez, il est fort probable que vous ayez au moins un formulaire dans votre tunnel d’activation ou de monétisation. De plus, d'après mon expérience, vous perdrez probablement des utilisateurs/conversions à l’étape du tunnel où ils doivent remplir ce formulaire.
La principale raison de cette perte est probablement une mauvaise expérience utilisateur qui laisse les gens ennuyés ou frustrés. Pour comprendre si cela se produit sur votre formulaire (et le corriger), les designers produits réalisent des tests d’utilisabilité et observent de près le comportement de leurs utilisateurs. Le problème avec ces tests, cependant, est qu'ils consomment beaucoup de temps et de ressources.
En revanche, l’analyse des formulaires grâce à une heatmap de souris peut identifier une grande partie des problèmes d’utilisabilité à une fraction du coût.
Par exemple, si vous observez un important abandon sur votre formulaire d’inscription lors du paiement et que vous consultez la heatmap, vous pourriez constater une activité intense de la souris sur les premiers champs, puis une chute soudaine sur le champ « numéro de téléphone ».
Cela peut indiquer que les utilisateurs ne sont pas à l’aise de partager leur numéro de téléphone avec vous et qu’il serait pertinent de prévoir un autre moyen de les identifier.
#7 : Résoudre les problèmes de navigation
Parfois, la baisse de découverte et d'utilisation de certaines fonctionnalités ou sections de votre site s’explique simplement par le fait que vos utilisateurs ne parviennent pas à les trouver sur votre plateforme.
Si vous êtes une boutique e-commerce qui commence tout juste à vendre des chaussures de sport professionnelles (par exemple, pour la lutte, le basket, etc.), vous pourriez naturellement ajouter une nouvelle section dans votre menu de navigation et considérer le travail terminé.
Cependant, imaginez que le trafic vers la section chaussures de sport soit bien inférieur à vos attentes. Après avoir consulté la heatmap de souris, vous pourriez constater que très peu de personnes survolent cette section dans la navigation.
D’un côté, cela peut simplement traduire un manque d’intérêt pour les chaussures de sport. D’un autre côté, il est possible que les gens n’aient même pas remarqué que vous l’avez ajoutée, car la liste des types de chaussures dans votre navigation est très longue.
Même s’il est logique d’organiser vos sections de façon structurée, lorsque vous ajoutez quelque chose de nouveau, il vaut mieux le placer quelque part de visible (au moins au début). Ainsi, un designer UX pourrait envisager de placer cette nouvelle section directement dans la barre de navigation supérieure. Alternativement, il pourrait la laisser à son emplacement actuel mais y ajouter une étiquette « nouveau » afin d’attirer davantage l’attention.
#8 : Améliorer la lisibilité
Ce cas de figure concerne tout particulièrement les blogs ou ressources proposant du contenu long format. Parfois, la manière dont vous avez conçu votre texte nuit à sa lisibilité, ce qui pousse les utilisateurs à quitter l’article.
Comme pour les cas précédents, vous pouvez diagnostiquer cela avec les heatmaps de souris. Par exemple, si vous regardez la heatmap et observez que les gens survolent chaque ligne du texte avec leur curseur, la section de texte pourrait être trop large pour un suivi visuel (les utilisateurs utilisent alors le pointeur de souris pour s’y retrouver).
Logiciels de heatmap à considérer
Après avoir évoqué les cas d’usage pratiques des heatmaps de souris, laissez-moi également vous parler des différents produits d’analyse de heatmap qui proposent cet outil et vous montrer les différences quant à leur approche.
Hotjar
Hotjar ne propose pas à proprement parler de heatmap de souris. À la place, il divise les informations d’une heatmap de souris classique en plusieurs types de cartes. Ainsi, vous avez des cartes de clics, de défilement, des heatmaps de mouvements de souris et des heatmaps de rage clicks. Voici à quoi ressemble sa carte de mouvements.
Bien qu'avoir des cartes séparées puisse sembler peu pratique au premier abord, cela permet en réalité d’obtenir des données plus granulaires pour chaque type d’interaction (par exemple, le défilement).
De plus, cela s’accompagne de fonctionnalités supplémentaires, telles que le comptage en temps réel des visiteurs du site, la relecture des sessions, la représentation visuelle des zones d’engagement sur la mise en page de la page, etc.
Crazy Egg
Avec Crazy Egg, vous bénéficiez d’une carte thermique qui intègre à la fois les données issues des clics utilisateurs et des survols de souris. Grâce à leurs algorithmes propriétaires, ils peuvent combiner ces deux types d’interactions distincts sur une seule carte pour mettre en avant les zones d’intérêt général de vos utilisateurs.
Comparé à Hotjar, vous obtenez un niveau de granularité légèrement inférieur. Cependant, ce type de carte thermique combinée reste très utile si votre objectif est d’avoir une vue d’ensemble des interactions des utilisateurs avec votre UX, plutôt que d’identifier l’emplacement exact des clics, la profondeur de défilement, etc.
Tout comme Hotjar, Crazy Egg propose aussi les enregistrements de session et d’autres fonctionnalités analytiques.
Mouseflow
Tout comme Hotjar, Mouseflow vous offre six types distincts de cartes thermiques de suivi de souris, au lieu d’une seule carte combinée. Vous retrouvez les types habituels, dont les cartes thermiques des clics, survols et défilements.
Cependant, Mouseflow propose également un type de carte thermique spécial, rarement présent sur ce type de plateformes : la carte thermique géographique.
Au lieu de visualiser les interactions des utilisateurs sur votre interface, cette carte affiche la carte du monde et met en avant les régions du globe depuis lesquelles vous obtenez le plus d’utilisateurs (et d’interactions).
À ajouter absolument aux entretiens 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.
Alors, pensez à utiliser les cartes thermiques de souris comme une alternative excellente (et peu coûteuse) pour répondre à certaines des questions les plus simples sur vos clients et gardez vos précieux entretiens pour les questions réellement complexes.
Vous cherchez davantage de moyens d’améliorer vos produits ? Faites évoluer vos connaissances et compétences dans cette profession passionnante en vous abonnant à notre newsletter. Vous resterez informé·e sur les sujets de gestion de produit et vous profiterez de nos contenus éducatifs de haute qualité et de nos sélections de logiciels.