Une heatmap, ou carte de chaleur, est une couche de couleurs posée sur une page web qui montre où les visiteurs cliquent, jusqu’où ils font défiler la page et, sur ordinateur, où passe leur souris. Les couleurs chaudes (rouge, orange) signalent les zones qui concentrent le plus d’interactions, les couleurs froides (bleu, vert) celles qui en reçoivent peu. Elle permet de repérer ce que les visiteurs ignorent, ce qu’ils essaient de faire sans y parvenir et l’endroit où ils abandonnent la lecture. Interprétée trop vite, elle peut aussi pousser à des refontes coûteuses fondées sur une simple impression. La difficulté vient de là : une heatmap montre ce qui se passe, jamais pourquoi. Pour en tirer des décisions, il faut la lire au regard de l’action que la page doit déclencher, sur des données collectées dans de bonnes conditions, puis transformer chaque observation en hypothèse à vérifier plutôt qu’en certitude.
En bref :
- Trois familles principales : la carte de clics, la carte de défilement (scroll map) et la carte de mouvements, complétées par le repérage des clics de rage et des clics sans effet.
- Une zone rouge n’est ni bonne ni mauvaise en soi : elle se juge par rapport à l’action que la page doit déclencher.
- Une carte qui mélange mobile et ordinateur, ou qui repose sur trop peu de sessions, induit en erreur.
- La bonne lecture tient en cinq questions : objectif, attention, points d’arrêt, tentatives ratées, éléments ignorés.
- Chaque constat devient une hypothèse, qu’on vérifie avec d’autres données puis qu’on teste avant de modifier la page pour de bon.
Ce qu’une heatmap montre vraiment, et ce qu’elle ne montre pas
Une heatmap agrège le comportement de nombreuses sessions sur une même page. Elle ne raconte pas le parcours d’un visiteur précis : c’est le rôle des enregistrements de sessions, qui rejouent la navigation d’une personne du début à la fin. Elle ne remplace pas non plus un outil d’analytics, qui dit combien de visiteurs sont arrivés, d’où ils venaient et combien ont converti. La heatmap se situe entre les deux : elle rend visible la répartition de l’attention et des actions à l’intérieur d’une page.
Un point de lecture échappe souvent aux débutants : dans la plupart des outils, l’échelle de couleurs est relative à la page analysée. Le rouge désigne la zone la plus cliquée de cette page, pas un seuil absolu. Sur une page peu visitée, une tache rouge peut correspondre à une poignée de clics. Avant d’interpréter une couleur, regardez donc toujours le nombre de sessions et de clics derrière la carte.
Surtout, une heatmap est descriptive. Elle montre que les visiteurs cliquent massivement sur une photo non cliquable ou qu’ils décrochent à mi-page, sans dire s’ils cherchaient une information, s’ils étaient perdus ou s’ils avaient simplement trouvé ce qu’ils voulaient. L’explication viendra d’autres sources : enregistrements, parcours dans votre outil d’analytics, questions posées aux visiteurs, retours du service client.
Les types de heatmaps et la question à laquelle chacun répond
Les outils du marché proposent des variantes sous des noms différents, mais on retrouve presque toujours les mêmes familles. Chacune répond à une question précise et comporte une limite qu’il faut garder en tête.
Type de carte Ce qu’elle mesure La question à lui poser Sa principale limite
Carte de clics Les endroits où les visiteurs cliquent ou touchent l’écran, y compris sur des éléments non cliquables Que cherchent-ils à faire sur cette page ? Elle ignore les visiteurs qui n’ont cliqué nulle part
Carte de défilement (scroll map) La part des visiteurs qui atteint chaque niveau de la page Qui voit quoi, et où la lecture s’arrête-t-elle ? Voir un bloc en faisant défiler ne veut pas dire l’avoir lu
Carte de mouvements Les trajectoires et zones de survol de la souris Où l’attention semble-t-elle se porter ? Ordinateur uniquement, et la souris ne suit pas toujours le regard
Clics de rage Des clics répétés et rapides au même endroit Où les visiteurs sont-ils frustrés ? La cause peut être technique ou liée à la compréhension
Clics sans effet Des clics qui ne déclenchent rien Qu’est-ce qui ressemble à un lien sans en être un ? Il faut vérifier sur la page réelle ce que le visiteur attendait
La carte de clics et la carte de défilement suffisent dans la plupart des diagnostics. La carte de mouvements apporte un complément sur ordinateur, à prendre avec prudence. Les clics de rage méritent une mention à part : des clics répétés sur un élément non interactif signalent plutôt un problème de clarté (le visiteur croit que c’est cliquable), alors que des clics répétés sur un vrai bouton orientent vers un souci de réactivité ou un bug.
Avant de lire : les conditions pour que la carte soit fiable
Une heatmap mal préparée mélange des situations qui n’ont rien à voir entre elles. Quatre précautions évitent la plupart des contresens.
Séparer mobile et ordinateur. La mise en page change d’un appareil à l’autre : un bouton placé à droite sur ordinateur se retrouve sous un long paragraphe sur mobile. Une carte qui agrège les deux superpose des positions qui ne correspondent à aucune des deux versions. Commencez par l’appareil qui génère le plus de trafic ou le plus de chiffre d’affaires, souvent le mobile pour une boutique en ligne.
Attendre un volume suffisant. Il n’existe pas de nombre magique de sessions, car tout dépend de la longueur de la page et de la dispersion des clics. Un test simple consiste à comparer la carte de la première moitié de la période avec celle de la seconde. Si les zones chaudes restent aux mêmes endroits, la carte est stable. Si elles bougent, il faut encore patienter.
Travailler sur une version stable de la page. Un changement de gabarit, un bandeau promotionnel ajouté en cours de période, une fenêtre surgissante ou un carrousel qui fait défiler plusieurs visuels brouillent la carte. Selon la façon dont l’outil enregistre la position des clics, une carte collectée avant une modification de mise en page peut devenir illisible après. Notez la date de chaque changement pour ne comparer que des périodes homogènes.
Tenir compte du consentement et de la source du trafic. La plupart de ces outils reposent sur des traceurs soumis au consentement des visiteurs. La carte ne reflète donc que ceux qui ont accepté, ce qui peut créer un biais. De même, des visiteurs venus d’une campagne publicitaire et des visiteurs venus d’une recherche Google n’ont pas la même intention : quand l’outil le permet, filtrez par source.
Lire une heatmap en cinq questions
Une fois la carte fiable, la lecture gagne à suivre toujours le même ordre. Cela évite de se laisser happer par la tache rouge la plus spectaculaire.
1. Quelle est l’action attendue sur cette page ? Ajouter au panier, remplir un formulaire, cliquer vers une catégorie : sans objectif écrit noir sur blanc, impossible de dire si la répartition de l’attention est saine. Une page d’accueil, une fiche produit et une page de contact ne se lisent pas de la même façon.
2. Où va l’attention par rapport à cet objectif ? Si le bouton principal reste froid alors qu’une image décorative concentre les clics, la page détourne l’attention de ce qu’elle doit obtenir. À l’inverse, un bouton très cliqué suivi d’un faible taux de conversion indique que le problème se situe plus loin dans le parcours.
3. Où les visiteurs s’arrêtent-ils ? Sur la carte de défilement, cherchez la chute la plus nette et regardez ce qui se trouve juste avant. Un bloc très large, un grand aplat de couleur ou une rangée d’icônes peuvent créer un faux plancher : le visiteur croit être arrivé en bas de la page et s’en va.
4. Qu’essaient-ils de faire sans y parvenir ? Les clics sur des éléments non cliquables sont souvent les plus instructifs. Des clics sur une photo trahissent une envie de zoomer. Des clics sur une mention « livraison gratuite » ou sur un pictogramme de garantie montrent qu’une information est recherchée et n’est pas accessible.
5. Qu’est-ce qui est ignoré ? Un bloc de réassurance que personne n’atteint, un avis client placé tout en bas, un argument clé enterré sous une longue description : ce que les visiteurs ne voient pas ne peut pas les convaincre.
Des observations aux décisions : les motifs les plus fréquents
Certains motifs reviennent d’un site à l’autre. Le tableau ci-dessous les relie à des interprétations possibles, à ce qu’il faut vérifier avant d’agir et à une modification à tester. Il s’agit de pistes, pas de diagnostics automatiques : un même motif peut avoir plusieurs causes.
Ce que vous voyez Interprétations possibles À vérifier avant d’agir Modification à tester
Beaucoup de clics sur une photo produit non cliquable Envie de voir le produit de plus près ou sous d’autres angles Enregistrements de sessions sur mobile et sur ordinateur Rendre la photo zoomable, ajouter une galerie
Bouton principal froid Bouton pas vu, pas compris, ou offre pas assez convaincante à ce stade Part des visiteurs qui atteint le bouton sur la carte de défilement Remonter le bouton, reformuler son libellé, renforcer l’argumentaire au-dessus
Chute brutale du défilement à mi-page Faux plancher visuel, ou contenu qui décroche Aspect de la zone juste avant la chute, sur chaque appareil Casser l’effet de fin de page, remonter les éléments décisifs
Nombreux clics sur le menu ou le logo depuis une page d’atterrissage Visiteurs qui ne trouvent pas ce qu’ils attendaient Cohérence entre l’annonce ou le résultat de recherche et la page Aligner le titre sur la promesse de l’annonce, limiter les sorties
Clics de rage sur un vrai bouton Bouton lent à réagir, bug, bouton désactivé sans explication Test manuel sur plusieurs appareils, temps de réponse Corriger le problème technique, afficher un état de chargement
Clics sur un texte qui ressemble à un lien Mise en forme trompeuse (souligné, couleur de lien) Ce que le visiteur espérait trouver Changer la mise en forme, ou en faire un vrai lien
Les clics de rage sur un bouton qui réagit lentement méritent d’être traités vite, parce qu’ils touchent souvent l’étape la plus proche de l’achat. La lenteur y joue un rôle fréquent, comme le détaille l’article sur le temps de chargement et la conversion.
Exemple de lecture : une fiche produit qui convertit mal sur mobile
Prenons une boutique fictive qui vend des sacs à dos. Sa fiche produit phare reçoit un trafic correct, mais convertit nettement moins bien sur mobile que sur ordinateur. La carte de défilement mobile montre que la majorité des visiteurs s’arrête après la description, avant d’atteindre le bloc d’avis clients et le tableau des dimensions. La carte de clics mobile, elle, concentre l’activité sur la photo principale et sur la mention « voir le guide des tailles », pourtant affichée comme un simple texte gris.
La lecture en cinq questions donne ceci. L’action attendue est l’ajout au panier. L’attention se porte sur la photo, ce qui est logique pour un produit qu’on veut voir avant d’acheter. Les visiteurs s’arrêtent avant les avis, qui constituent pourtant un argument de poids. Ils essaient d’accéder aux dimensions sans y parvenir. Et le bloc de réassurance sur les retours gratuits, placé en bas de page, est ignoré.
Trois hypothèses en découlent, par ordre de facilité : transformer la mention du guide des tailles en lien réel qui ouvre les dimensions sans quitter la page, rendre la galerie photo zoomable et plus fournie, remonter une note moyenne et quelques avis juste sous le prix. Chacune se teste séparément, en commençant par celle qui demande le moins de développement. Pour la structure d’ensemble de ce type de page, l’article sur la structure d’une page produit qui convertit donne un cadre complet.
Les erreurs qui mènent à de mauvaises conclusions
La première erreur consiste à croire qu’une zone chaude est forcément une bonne nouvelle. Une image très cliquée peut simplement être une impasse qui détourne les visiteurs du bouton d’achat. La deuxième consiste à passer directement de la carte à la refonte. Une heatmap produit des hypothèses, et une hypothèse se vérifie : c’est tout l’intérêt de mettre en place un test A/B avant de généraliser un changement, surtout sur une page qui génère une part importante du chiffre d’affaires.
Troisième erreur : vouloir analyser toutes les pages du site. L’effort doit aller aux pages qui pèsent réellement dans le parcours, en général la page d’accueil, les pages d’atterrissage des campagnes, les fiches produits les plus vendues et les étapes du panier. Quatrième erreur, plus discrète : lire la heatmap seule. Croisée avec les données de votre outil d’analytics (taux de sortie, parcours, conversion par appareil), elle permet de relier une zone ignorée ou un point d’arrêt à une perte de conversion mesurée. Si vous hésitez sur la combinaison d’outils adaptée à votre site, le guide pour choisir ses outils analytics aide à y voir clair.
Dernière erreur : ne jamais revenir à la carte après une modification. Relancer une heatmap sur la nouvelle version permet de vérifier que le comportement a bien changé dans le sens attendu. Si les visiteurs cliquent désormais sur le lien du guide des tailles mais que la conversion ne bouge pas, l’hypothèse était juste sur le comportement et fausse sur son effet commercial. Vous savez alors que le frein se trouve ailleurs, et vous pouvez passer à l’hypothèse suivante.
Par où commencer : trois pages, un appareil, une hypothèse à la fois
Pour démarrer sans se noyer, choisissez les trois pages qui pèsent le plus dans votre chiffre d’affaires ou vos demandes de contact, et analysez-les d’abord sur l’appareil majoritaire. Laissez tourner la collecte jusqu’à ce que la carte se stabilise, puis appliquez les cinq questions en notant chaque constat sous la forme « nous observons…, nous pensons que…, nous allons tester… ». Traitez une hypothèse à la fois, mesurez son effet sur la conversion et non sur les clics, puis passez à la suivante. Tenue dans la durée, cette routine intègre la heatmap à une démarche de CRO structurée, où chaque carte débouche sur un test daté et un résultat mesuré.