Installer un outil de heatmap prend environ dix minutes. Vraiment exploiter ce qu'il vous montre prend plus de temps, parce que la plupart des gens ne savent pas ce qu'ils cherchent. Le scénario habituel : on ouvre la heatmap, on passe quelques minutes à regarder les couleurs, on remarque que le bouton reçoit beaucoup de clics, on ferme l'onglet. Rien ne change.
Le problème, ce n'est pas la heatmap. C'est qu'une heatmap n'est pas explicite en soi. C'est un instrument de diagnostic, et comme tout instrument de diagnostic, elle exige de savoir quels patterns signalent un problème et lesquels relèvent d'un comportement normal. Un agrégat de clics, c'est du bruit. Un cluster de clics au mauvais endroit, c'est un signal.
Ce guide couvre cinq patterns qui apparaissent systématiquement dans les heatmaps quand quelque chose cloche sur une page. Pas ce qu'est une heatmap ; ça, c'est le glossaire. Mais ce qu'elle vous dit, et quoi en faire.
Un mot rapide sur les types de heatmaps
Avant les patterns : les heatmaps existent sous trois formes, et elles répondent à des questions différentes.
- Les cartes de clics montrent où les utilisateurs cliquent (ou tapent sur mobile). Elles révèlent ce avec quoi les gens interagissent, ce avec quoi ils tentent d'interagir, et ce qu'ils ignorent.
- Les cartes de scroll montrent jusqu'où les utilisateurs scrollent la page avant de partir. Elles révèlent si les utilisateurs atteignent vos contenus clés et vos éléments de conversion.
- Les cartes de mouvement suivent les déplacements de la souris (desktop uniquement). Elles sont un indicateur approximatif de l'endroit où va l'attention, mais moins fiable que les deux autres types.
La plupart des cinq patterns ci-dessous viennent des cartes de clics et des cartes de scroll. Les cartes de mouvement sont utiles pour l'exploration qualitative, mais ne devraient pas guider des conclusions à elles seules.
Pattern 1 : le décrochage de scroll avant votre CTA
Ouvrez votre carte de scroll. Repérez votre appel à l'action principal : le bouton ou le formulaire qui porte votre conversion principale. Regardez maintenant quel pourcentage d'utilisateurs scrolle assez loin pour le voir.
Si la profondeur de scroll chute brutalement à 40-60 % et que votre CTA se trouve à 70 %, les utilisateurs ne l'atteignent pas. C'est l'un des problèmes les plus fréquents et les plus faciles à corriger en optimisation de conversion, et il est invisible sans données de scroll.
La cause du décrochage compte. Regardez quel contenu se trouve juste avant ce point de chute :
- Un long bloc de texte dense qui casse l'élan
- Une section qui ressemble à un pied de page ou à une fin (faible poids visuel, fond clair, formulations de récapitulatif)
- Un élément concurrent qui répond trop tôt à la question de l'utilisateur, supprimant la raison de continuer à scroller
La solution est rarement « remonter le CTA », même si c'est parfois la bonne. Le plus souvent, il s'agit de restructurer la section juste avant le décrochage : des paragraphes plus courts, une rupture visuelle, un repère directionnel qui signale qu'il y a encore quelque chose à voir.
Un repère utile : sur une page produit ou une landing page standard, votre CTA principal devrait être visible par au moins 60 % des visiteurs. En dessous, le décrochage de scroll vous coûte des conversions invisibles dans vos données de taux de conversion, parce que les utilisateurs n'ont jamais atteint le point de décision.
Pattern 2 : des clics sur des éléments non cliquables
Regardez votre carte de clics. Repérez les clusters. Vérifiez maintenant s'ils se trouvent sur des éléments interactifs (boutons, liens, champs de formulaire) ou sur quelque chose sans interaction : une image produit, un titre, une statistique, un logo, une icône de fonctionnalité.
Les clics sur des éléments non interactifs sont un signal précis : l'utilisateur s'attendait à ce qu'il se passe quelque chose, et rien ne s'est produit. On appelle ça un clic frustré ou un rage click, et cela indique une attente brisée plutôt qu'un élément cassé. L'élément fonctionne exactement comme prévu ; c'est le design qui est mauvais.
Variantes courantes de ce pattern :
- Des images produit que les utilisateurs tentent de zoomer ou d'agrandir
- Des noms de fonctionnalités ou des titres que les utilisateurs cliquent en attendant un dépliage ou une fenêtre modale
- Des statistiques ou des chiffres qui semblent renvoyer vers une source
- Du texte souligné qui n'est qu'un style, pas un lien
- Des cartes qui semblent entièrement cliquables mais n'ont qu'un petit lien « En savoir plus »
La solution est soit de rendre l'élément interactif (ajouter le zoom, ajouter le lien, rendre toute la carte cliquable), soit de le repenser pour que l'attente ne soit pas créée. La seconde option est souvent la meilleure. Ajouter une fonctionnalité pour satisfaire une attente confuse résout rarement le problème de clarté sous-jacent.
Pattern 3 : une zone morte au-dessus de la ligne de flottaison
Ce pattern est l'inverse de ce que la plupart des gens attendent : un faible engagement en haut de la page, alors que chaque utilisateur la voit.
Sur une carte de clics, cela se traduit par un nombre de clics quasi nul dans la section hero, sans aucune interaction avec le titre, le sous-titre ou le visuel environnant. Sur une carte de scroll, cela se traduit par des utilisateurs qui dépassent rapidement le haut de page sans s'arrêter.
Ce que cela signifie : votre contenu au-dessus de la ligne de flottaison ne communique pas sa valeur assez vite. Les utilisateurs scannent, ils ne lisent pas. Ils arrivent avec une question (« est-ce pertinent pour moi ? ») et votre section hero n'y répond pas assez clairement pour mériter leur attention.
C'est différent d'un taux de rebond élevé, qui vous dit que les utilisateurs sont partis. Une zone morte avec un faible rebond signifie que les utilisateurs sont restés mais ont sauté votre contenu le plus important. Ils ont continué à scroller à la recherche de quelque chose qui répondait à leur question, ce qui veut dire que le travail de conversion se fait plus bas dans la page, avec moins de contexte et moins d'intention.
Les causes courantes :
- Un titre qui décrit ce que vous faites plutôt que ce que l'utilisateur obtient
- Une image ou une animation hero qui détourne le regard du texte
- Une proposition de valeur enterrée sous une barre de navigation et un grand élément visuel
- Un décalage entre l'annonce ou le lien qui a amené le trafic et ce par quoi la page commence
Testez la clarté du titre avant toute autre chose. Le visuel pourra être corrigé plus tard. Si les utilisateurs n'accrochent pas aux mots, repenser la mise en page autour des mêmes mots ne résoudra pas le problème.
Pattern 4 : l'écart entre appareils
Ne lisez jamais une heatmap en agrégé si vous avez un trafic mobile significatif. Une heatmap agrégée sur une page avec 60 % de visiteurs mobiles est dominée par le comportement mobile, et les deux audiences utilisent une version fondamentalement différente de votre page.
Le pattern de l'écart entre appareils apparaît quand vous comparez la carte de scroll ou de clics selon les appareils et constatez une divergence importante : les utilisateurs desktop scrollent jusqu'à 70 %, les utilisateurs mobiles s'arrêtent à 35 %. Les utilisateurs desktop cliquent le CTA principal, les utilisateurs mobiles cliquent plutôt un lien de navigation secondaire.
Quand cet écart est important, il pointe généralement vers un problème de mise en page spécifique à un appareil :
- Une image pleine largeur sur mobile qui pousse tout le contenu sous la ligne de flottaison
- Un bouton CTA dimensionné pour le desktop, trop petit pour être tapé sur mobile
- Une section à deux colonnes qui s'empile en une liste verticale illisible sur petit écran
- Des tailles de police confortables sur desktop qui obligent à zoomer sur mobile
La correction nécessite d'auditer spécifiquement l'expérience mobile, sans présumer qu'une mise en page responsive est une bonne expérience mobile. Responsive veut dire que ça s'adapte. Ça ne veut pas dire que ça marche.
Segmentez votre heatmap par appareil avant de tirer la moindre conclusion sur la page. Un agrégat « correct » peut masquer une expérience mobile cassée qui touche la majorité de vos visiteurs.
Pattern 5 : le cluster de distraction
C'est le pattern qui prend le plus d'équipes au dépourvu, parce qu'il ressemble à de l'engagement. Un fort volume de clics sur un élément paraît positif, jusqu'à ce que vous vérifiiez où vont ces clics.
Un cluster de distraction est une concentration de clics sur un élément qui éloigne les utilisateurs de votre parcours de conversion : un lien de navigation sur une landing page, un lien « en savoir plus » vers un article de blog au milieu d'une page produit, un logo qui ramène les utilisateurs à l'accueil, un lien de pied de page qui mène à une section sans rapport.
La version la plus claire : une landing page conçue pour une campagne précise, avec la navigation complète du site toujours visible. La heatmap montre la plus forte densité de clics sur les liens de navigation, pas sur le CTA. Les utilisateurs s'échappent par une porte que vous avez oublié de fermer.
Ce qu'il faut chercher : sur toute page avec une seule action visée, repérez les éléments qui reçoivent le plus de clics et vérifiez si ces clics servent votre objectif ou en détournent. Sur les landing pages dédiées, la réponse est presque toujours de supprimer ou masquer la navigation. Sur les pages produit et de contenu, la question est de savoir si le contenu concurrent attire des utilisateurs à forte intention ou des visiteurs à faible intention, et si le compromis en vaut la peine.
Que faire une fois un pattern repéré
Une heatmap vous dit où se trouve le problème sur la page. Elle ne vous dit pas pourquoi il se produit. C'est le rôle des enregistrements de session.
Si vous trouvez un décrochage de scroll à 55 % et que votre CTA est à 70 %, l'étape suivante consiste à filtrer les enregistrements de session sur les utilisateurs qui ont arrêté de scroller dans cette zone et à regarder ce qui s'est passé dans les secondes avant leur départ. Ont-ils lu la section puis fermé ? Ont-ils hésité sur un élément ? La page a-t-elle chargé quelque chose à ce moment-là qui les a interrompus ? La heatmap vous donne la coordonnée ; l'enregistrement vous donne l'histoire.
Ce diagnostic en deux temps, la heatmap pour trouver l'emplacement et l'enregistrement pour comprendre le comportement, est systématiquement plus rapide pour identifier les causes racines que l'un ou l'autre outil seul. La même logique s'applique quand vous filtrez les enregistrements de session par source de trafic : le segment définit la question, l'enregistrement y répond.
La limite des heatmaps agrégées
Au-delà de la segmentation par appareil, la dimension la plus sous-exploitée de l'analyse de heatmap est la source de trafic.
Un utilisateur arrivant d'une recherche de marque (quelqu'un qui a tapé le nom de votre entreprise) apporte un niveau d'intention complètement différent d'un utilisateur arrivant d'une campagne de retargeting display. Ils interagiront différemment avec la même page : profondeur de scroll différente, schémas de clics différents, tolérance différente à la longueur du contenu.
Une heatmap agrégée moyenne ces deux audiences ensemble. Si vos visiteurs organiques à forte intention scrollent jusqu'à 80 % et vos visiteurs payants à faible intention jusqu'à 30 %, la moyenne est de 55 %, ce qui fait paraître la page médiocre alors qu'elle fonctionne peut-être très bien pour l'audience pour laquelle elle a été conçue.
Segmentez vos heatmaps par source de trafic avant de décider si vous avez un problème de page ou un problème de ciblage d'audience. La distinction change complètement la correction : l'un est un problème de design, l'autre un problème de dépenses média.
Transformer les patterns en tests mesurables
Un pattern de heatmap est une hypothèse, pas un diagnostic. « Les utilisateurs ne scrollent pas jusqu'au CTA » n'est pas un constat ; ça le devient quand vous faites un changement et que vous en mesurez l'effet.
Avant de faire des changements à partir de patterns de heatmap, fixez une métrique de référence que vous pouvez suivre :
- Pour corriger un décrochage de scroll : fixez un objectif de profondeur de scroll sur le pourcentage d'utilisateurs atteignant la section du CTA
- Pour corriger une zone morte : suivez le temps passé sur la page ou l'engagement de la section hero comme indicateur avancé
- Pour corriger un cluster de distraction : suivez spécifiquement le taux de clic sur votre CTA principal, pas seulement la conversion globale
Sans référence, vous faites un changement, vous rouvrez la heatmap un mois plus tard, et vous n'avez aucun moyen de savoir si ce que vous voyez est meilleur, pire ou simplement différent. Un objectif mesurable avant le changement transforme l'analyse de heatmap en une vraie boucle d'optimisation, plutôt qu'en une série d'ajustements esthétiques.
En résumé
Les cinq patterns (décrochage de scroll, clics fantômes, zone morte, écart entre appareils, cluster de distraction) couvrent la majorité des observations utiles tirées d'une heatmap. La plupart des pages qui ont des problèmes de conversion en présentent au moins un clairement. La plupart des équipes qui regardent leurs heatmaps ne savent pas qu'il faut les chercher.
La séquence qui fonctionne : ouvrez d'abord la carte de scroll, trouvez où les utilisateurs s'arrêtent. Ouvrez ensuite la carte de clics, trouvez ce avec quoi les utilisateurs interagissent et si cette interaction sert l'objectif. Segmentez par appareil. Segmentez par source de trafic. Puis allez regarder les enregistrements de session pour les segments qui montrent le problème.
Les données vous disent que quelque chose ne va pas. L'observation vous dit pourquoi.
