Heatmap : voir ce que vos visiteurs font vraiment sur votre site
Ce qu'est une carte de chaleur, les quatre types qui comptent, comment la lire sans se tromper, les outils gratuits et payants, et un orienteur qui vous dit quelle carte lancer pour la question que vous vous posez.
Vous regardez vos chiffres d'analytics. Le trafic est là, les pages sont visitées, mais les demandes stagnent. Et rien dans les rapports ne dit pourquoi. C'est normal : les données chiffrées (pages vues, taux de rebond, durée de session) vous disent combien. Elles ne disent jamais pourquoi. Pour ça, il faut voir ce que les visiteurs font sur la page : où ils cliquent, jusqu'où ils descendent, ce qu'ils ignorent. C'est le travail d'une heatmap.
Chez Kelcible, on s'en sert comme d'un outil de décision, pas comme d'une jolie image à montrer en réunion. Cette page explique comment l'utiliser de la même façon.
Une heatmap, c'est quoi ?
Une heatmap, ou carte de chaleur en français, est une représentation visuelle du comportement des visiteurs sur une page web. Elle agrège les clics, le défilement ou les mouvements de souris de centaines de sessions et les superpose à la page, avec un code couleur : rouge là où l'activité est forte, bleu là où elle est quasi nulle.
Son intérêt tient en une phrase : là où l'analytics vous dit « cette page convertit mal », la heatmap vous montre que le bouton principal est sous la ligne de flottaison, que personne ne clique sur le formulaire, ou que les visiteurs cliquent sur une image qui n'est pas un lien. Pas besoin d'être analyste pour la lire : un dirigeant, un commercial ou un développeur la comprend au premier regard.
Le mot « heatmap » désigne aussi d'autres choses, ce qui brouille souvent les recherches. Pour être clair, cette page parle uniquement des heatmaps de site web.
Les types de heatmaps, et la question à laquelle chacun répond
Toutes les cartes ne mesurent pas la même chose. Le bon réflexe est de partir de votre question, pas de l'outil.
Click map (carte de clics)
Les zones où les visiteurs cliquent, ou touchent l'écran sur mobile (« touch map »). Elle montre si vos boutons sont cliqués et si des éléments non cliquables attirent des clics, signe de confusion.
Mon bouton est-il cliqué ?Scroll map (carte de défilement)
La part des visiteurs qui atteint chaque hauteur de la page. Elle révèle le point où la majorité abandonne la lecture : tout ce qui est placé dessous est vu par une minorité.
Mon argument clé est-il vu ?Move map (carte de déplacement)
Le trajet du curseur sur ordinateur. Un curseur qui erre partout signale une page peu claire, un curseur qui stagne signale une lecture attentive ou une hésitation. Elle n'existe pas sur mobile.
Où les visiteurs hésitent-ils ?Carte d'attention (eye-tracking)
Le parcours du regard, mesuré en laboratoire avec des capteurs, ou estimé par algorithme dans les outils en ligne. Utile pour comprendre l'ordre de lecture d'une page dense.
Dans quel ordre la page est-elle lue ?Clics morts et clics de rage
Les clics sur des éléments qui ne réagissent pas, et les clics répétés au même endroit en quelques secondes. Ce sont les signaux de frustration les plus directs, et Clarity les isole automatiquement.
Où mes visiteurs s'énervent-ils ?Heatmap prédictive (IA)
Une simulation de l'attention probable, calculée sur une maquette, sans aucun visiteur réel. Pratique avant une mise en ligne, mais c'est une estimation : elle ne remplace jamais une carte mesurée.
Ma maquette met-elle en avant le bon élément ?
Quelle carte de chaleur pour votre question ?
Trois questions, et l'orienteur vous dit quelle carte lancer, avec quel outil, combien de temps la laisser tourner et ce qu'il faut regarder en premier. Rien n'est envoyé ni enregistré.
La bonne heatmap, l'outil et la durée de collecte
Une recommandation, pas une vérité : elle part de ce que nous faisons sur les sites de nos clients.
Pourquoi installer une heatmap sur votre site
Réponse courte : parce que votre site ne fonctionne pas comme vous le pensez. Vous avez conçu la page avec un parcours logique en tête, et vos visiteurs ne le suivent pas. La heatmap rend l'écart visible en une image.
Trouver la fuite de conversion
Une page qui reçoit du trafic mais peu de demandes a un point de friction : bouton mal placé, formulaire trop long, élément qui capte l'attention au mauvais endroit. Vous corrigez un problème vu, pas un problème supposé.
Trancher un débat de design
Deux placements possibles pour un bouton, une page produit qui vient d'être refaite : la carte de chaleur arbitre entre ce que l'équipe pense et ce que font les utilisateurs.
Nourrir vos tests A/B
Un test lancé sans observation teste une intuition. Avec une heatmap, vous partez d'une hypothèse fondée : « le bouton est noyé dans le contenu, testons-le plus haut ».
Éviter la refonte inutile
Avant de tout refaire, regardez. Souvent, trois corrections ciblées suffisent. Et si l'analyse révèle des blocages de structure, une refonte ciblée devient un choix argumenté, pas une envie.
Une heatmap ne dit pas quoi faire. Elle montre ce qui ne marche pas.Retour terrain : le bouton que plus personne ne voyait
Un site e-commerce constate une baisse nette du taux de conversion de sa page produit phare, sans aucune modification récente. Trafic stable, produit et prix inchangés. L'analytics confirme la baisse, mais rien n'explique la cause : taux de rebond et durée de session identiques.
On installe Microsoft Clarity sur la page, avec carte de clics et carte de défilement. En quelques jours, le diagnostic est limpide.
- La scroll map montre qu'une grande partie des visiteurs ne descend pas au-delà du deuxième tiers de la page. Or un ajustement CSS de quelques semaines plus tôt avait poussé le bouton « Ajouter au panier » juste sous la ligne de flottaison sur les écrans les plus courants.
- La click map montre des clics en masse sur l'image produit (non cliquable) et sur un bandeau promotionnel décoratif qui ressemblait à un bouton. Deux clics morts, de la frustration, aucune vente.
Trois corrections, déployées en une demi-journée : bouton remonté, bandeau trompeur supprimé, image rendue cliquable vers le formulaire d'achat. Le taux de conversion est revenu à son niveau d'avant, et les clics morts ont fortement baissé.
Sur les pages à fort enjeu (fiche produit, landing page, page de contact), posez une heatmap avant de toucher au design. L'erreur classique est de refaire une page sur des intuitions. La carte évite de « réparer » ce qui marchait déjà.
Comment lire une heatmap sans se tromper
Avoir la carte sous les yeux, c'est la partie facile. Voici les clés de lecture par type, puis les erreurs que nous voyons le plus souvent.
Lire une click map
Vérifiez d'abord que vos boutons principaux sont dans les zones chaudes. Un bouton d'action en zone froide est une alerte immédiate. Repérez ensuite les clics sur des éléments non interactifs : un texte souligné, une image qui ressemble à un bouton. Chaque clic mort est un visiteur déçu.
Lire une scroll map
Cherchez l'endroit où la couleur bascule du chaud au froid. Si votre promesse, votre bouton ou vos preuves (avis, références) sont dessous, remontez-les. Une page longue n'est pas un problème en soi : c'est l'ordre des blocs qui l'est.
Lire une move map
Un curseur qui erre sur toute la page traduit un visiteur perdu. Des zones de stagnation traduisent une lecture ou une hésitation. Des allers-retours vers la recherche interne disent que la navigation ne répond pas au besoin.
Quatre erreurs de lecture qui coûtent cher
Elles viennent toutes de la même tentation : conclure vite sur une belle image.
Conclure sur trop peu de sessions
Une carte faite sur 50 visites ne représente personne. Nous attendons quelques centaines de sessions par appareil sur la page avant d'en tirer quoi que ce soit.
Ne pas séparer mobile et ordinateur
Les deux publics n'ont ni le même écran ni le même comportement. Une carte agrégée décrit un visiteur qui n'existe pas.
Croire que rouge veut dire « ça marche »
Une zone très cliquée peut être une zone de frustration : des clics en rafale sur un élément inerte sont rouges, et c'est un échec.
Oublier que la carte ne donne pas l'intention
Elle montre ce que font les visiteurs, pas ce qu'ils cherchaient. Pour le pourquoi, regardez quelques enregistrements de session ou posez une question courte sur la page.
Les outils de heatmap : gratuits et payants
Plutôt qu'une liste de quinze noms, voici les outils que l'on croise chez nos clients, avec ce qu'ils font de mieux. Les éditeurs revoient souvent leurs paliers : vérifiez l'offre en vigueur sur leur site avant de choisir.
| Outil | Cartes proposées | Offre gratuite | Point fort | Pour qui |
|---|---|---|---|---|
| Microsoft Clarity | Clics, défilement, enregistrements de session | Oui, sans limite de trafic | Détection automatique des clics de rage et des clics morts, lien avec GA4 | Tout le monde, pour démarrer |
| Hotjar | Clics, défilement, déplacements, enregistrements | Oui, limitée | Enquêtes et retours visiteurs dans le même outil | Équipes qui veulent aussi « faire parler » les visiteurs |
| Contentsquare | Zones d'engagement, parcours, cartes multi-appareils | Selon l'offre | Analyse très fine des parcours et de l'engagement par zone | E-commerce et sites à fort trafic |
| Mouseflow | Clics, défilement, déplacements, attention | Oui, limitée | Entonnoirs et analyse des formulaires champ par champ | Sites centrés sur la conversion |
| Crazy Egg | Clics, défilement, confettis par source | Essai seulement | A/B tests intégrés, clics colorés par source de trafic | Petites équipes qui testent beaucoup |
| Lucky Orange | Clics, défilement, cartes dynamiques | Oui, limitée | Cartes qui suivent les éléments dynamiques, chat intégré | Sites avec menus et contenus dynamiques |
| Matomo | Clics, défilement, déplacements (module dédié) | Logiciel libre, module heatmap payant | Données hébergées chez vous | Exigences fortes sur la souveraineté des données |
Microsoft Clarity, que nous installons sur la plupart des projets : gratuit, sans plafond de sessions, avec la détection des clics de rage. Pour un e-commerce à fort trafic qui veut analyser les parcours en profondeur, Contentsquare va plus loin. Quand l'hébergement des données est un critère, Matomo est l'option à étudier.
Heatmap et tracking : la photo et le tableau de chiffres
Une heatmap seule, c'est une photo. Un plan de tracking seul, c'est un tableau de chiffres. Ensemble, ils forment un diagnostic. Exemple : votre analytics dit que le formulaire de contact convertit peu. La carte de clics montre que beaucoup de visiteurs cliquent dans le premier champ puis s'arrêtent, juste avant un champ « téléphone obligatoire ». L'analytics donne le quoi, la heatmap donne le pourquoi.
C'est pour cela que nos missions d'analyse de données et tracking associent les deux : un tracking server-side pour des chiffres fiables malgré les bloqueurs, et une heatmap pour la couche qualitative. Et pour savoir lesquels de ces chiffres présenter à votre direction, notre guide des KPI marketing fait le tri.
Ce que la heatmap montre et que le tracking ne capte pas
- Les éléments qui attirent l'attention sans générer de clic.
- Les zones de frustration : clics morts, mouvements erratiques.
- La profondeur réelle de lecture, plus parlante qu'un temps passé.
- L'écart entre l'intention du designer et le comportement du visiteur.
Pour mesurer l'effet de vos corrections, gardez un chiffre de référence avant et après : notre calculateur de taux de conversion et notre calculateur de taux de rebond font le calcul proprement.
La heatmap d'email : lire vos campagnes comme une page
La même logique s'applique à vos emails. Brevo, Mailchimp ou Klaviyo proposent une carte des clics superposée à l'email envoyé : vous voyez quels liens sont cliqués, lesquels sont ignorés, et si le bouton principal fait réellement le travail.
Ce qu'une carte de clics d'email révèle
- Les zones réellement cliquées, souvent loin du bouton prévu.
- Les liens parasites (réseaux sociaux, menu) qui détournent l'attention du message.
- L'écart entre lecteurs mobiles et ordinateur, sur un format plus fragmenté.
- La bonne longueur : un email trop long dilue le clic sur l'appel principal.
Depuis la protection de la vie privée d'Apple Mail, une partie des « ouvertures » est déclenchée par le logiciel de messagerie, sans lecture humaine. Le taux d'ouverture est donc gonflé et instable. La carte des clics, elle, reste un signal humain. Pour suivre vos envois, notre calculateur de taux d'ouverture vous aide à poser le bon dénominateur.
C'est la démarche que nous appliquons dans nos accompagnements emailing et Klaviyo : les clics servent de base aux tests, jamais l'intuition.
Mettre en place une heatmap en 5 étapes
Pas besoin d'être développeur. La plupart des outils s'installent en quelques minutes. Voici l'ordre que nous suivons sur chaque projet.
De la question à la correction mesurée
L'installation est la partie la plus courte. La patience et la lecture font le reste.
Poser la question
Bouton ignoré, contenu non lu, formulaire abandonné : la question choisit la carte.
Installer proprement
Un script dans le <head> ou via Google Tag Manager, déclaré dans votre bandeau de cookies.
Cibler les pages à enjeu
Landing pages, fiches produit, contact, tunnel. Pas tout le site.
Laisser tourner
De quelques jours à quelques semaines selon le trafic, hors pics atypiques (soldes, grosse campagne).
Corriger, puis remesurer
Segmenter, formuler une hypothèse, corriger, relancer une carte pour vérifier l'effet.
Les outils de heatmap déposent des traceurs : ils se déclarent dans votre politique de cookies et ne se déclenchent qu'après le consentement du visiteur, comme tout outil de mesure qui n'est pas exempté. Microsoft demande d'ailleurs désormais de transmettre ce consentement à Clarity pour les visiteurs européens. Les bons outils masquent par défaut les champs de saisie.
Notre conseil : faites-en un cycle, pas un coup unique. Une lecture par trimestre des pages stratégiques, et une carte systématique après chaque changement important. C'est cette régularité qui transforme un site correct en site qui convertit. Si vous voulez aller plus loin sur l'expérience utilisateur, voyez notre approche d'agence UX design.
Une heatmap montre où les visiteurs décrochent. La suite, c'est corriger la page : c'est le travail de notre agence web à Angers sur les refontes et les landing pages.
Questions fréquentes sur les heatmaps
Comment dit-on heatmap en français ?
On dit carte de chaleur, ou plus rarement carte thermique. Pour un site web, on précise souvent le type : carte de clics, carte de défilement ou carte de déplacement. Le terme anglais heatmap reste le plus employé par les outils et les professionnels.
Quel est le meilleur outil de heatmap gratuit ?
Microsoft Clarity est le plus complet des outils gratuits : cartes de clics et de défilement, enregistrements de session et aucune limite de trafic. Hotjar, Mouseflow et Lucky Orange ont aussi une offre gratuite, mais plafonnée. Si l'hébergement des données est un critère, Matomo est libre, avec un module heatmap payant.
Quelle différence entre une heatmap et Google Analytics ?
Google Analytics donne des chiffres : visites, sources, conversions. La heatmap montre visuellement où et comment les visiteurs interagissent avec chaque élément d'une page. GA4 dit qu'une page convertit mal, la heatmap montre l'endroit qui bloque. Les deux se complètent.
Combien de sessions faut-il pour qu'une heatmap soit fiable ?
Il n'existe pas de seuil officiel. Dans la pratique, nous attendons quelques centaines de sessions par type d'appareil sur la page avant de conclure, et davantage si la page est longue ou très variée. Sur une page peu visitée, laissez l'outil collecter plus longtemps ou regroupez les pages qui partagent le même gabarit.
Une heatmap ralentit-elle le site ?
L'impact est faible avec les outils actuels, qui chargent leur script de façon asynchrone sans bloquer l'affichage. Il reste un script de plus : chargez-le après le rendu initial, n'empilez pas trois outils qui font la même chose, et retirez-le des pages où vous n'en avez pas besoin.
Les heatmaps sont-elles conformes au RGPD ?
Elles peuvent l'être, à condition d'être déclarées dans la politique de cookies et de ne se déclencher qu'après le consentement du visiteur. Les outils sérieux masquent les champs de saisie et n'enregistrent pas de données identifiantes. Le cadre reste celui de tout traceur de mesure non exempté.
Quelle différence entre une heatmap et un enregistrement de session ?
La heatmap agrège tous les visiteurs en une seule image, c'est une vue d'ensemble. L'enregistrement de session montre le parcours d'un seul visiteur en vidéo, c'est une vue de détail. La heatmap repère la zone qui pose problème, les enregistrements expliquent comment on y arrive.
Peut-on faire une heatmap sur mobile ?
Oui, et c'est indispensable : sur mobile, on parle de carte des touchers et de carte de défilement. La move map n'existe pas puisqu'il n'y a pas de curseur. Les outils produisent une carte par type d'appareil : analysez-les séparément.
Vos visiteurs vous envoient des signaux. Les voyez-vous ?
On installe la mesure, on lit les cartes avec vous et on corrige les frictions qui coûtent des demandes. Observer d'abord, refaire seulement si c'est utile.
Analysons vos points de friction invisibles
SEO
Démarrage 
Croissance 
Accélération 