Tous les types de heatmap de site web, et ce que chacun mesure

Qu'est-ce qu'un site web heatmap ?

Quiconque cherche un site web heatmap parle en réalité d'une heatmap de site web, un calque coloré qui agrège le comportement de nombreuses visites sur une seule image de page, où les couleurs chaudes marquent les interactions fortes et les couleurs froides les zones que les visiteurs ont ignorées. Le script de suivi enregistre une coordonnée et un horodatage pour chaque clic, chaque position de scroll et chaque déplacement du pointeur, puis l'outil range ces coordonnées dans une grille posée sur une capture d'écran et colore chaque cellule selon sa densité. Lisez le résultat comme une distribution de l'attention sur une population, jamais comme le relevé de ce qu'une personne précise a fait.

Pourquoi "heatmap" désigne-t-il deux choses différentes ?

Le mot "heatmap" désigne à la fois la catégorie des calques agrégés et une carte précise à l'intérieur de cette catégorie, et c'est pour cela que deux personnes peuvent débattre des heatmaps en ayant en tête des images totalement différentes. Au sens large, une heatmap est n'importe quel calque comportemental dessiné sur la capture d'une page. Au sens strict, c'est la carte ombrée par densité qui colore une grille selon le nombre d'interactions, aux côtés de quatre soeurs qui utilisent des points, des bandes ou du temps plutôt qu'un dégradé de densité. Nommez la carte précise avant de comparer vos conclusions avec quelqu'un, car "la heatmap dit que les gens ignorent le tableau de prix" ne veut rien dire tant que vous ne savez pas si cette affirmation vient des clics, de la profondeur de scroll ou du temps passé dans le viewport.

Quels sont les cinq types de heatmap de site web ?

Cinq calques partagent l'étiquette heatmap, et chacun enregistre un signal différent :

La click map répond aux questions d'intention et la scroll map répond aux questions de portée, donc utiliser l'une sans l'autre ne donne qu'un demi-argument. Une page peut retenir l'attention jusqu'en bas et ne récolter aucun clic sur son appel à l'action. Une autre peut récolter beaucoup de clics dans le premier écran et perdre quatre-vingt-dix pour cent des visiteurs avant que la section qui vous intéresse ne s'affiche. La confetti map répartit ces mêmes clics par segment, et c'est ce qui transforme "le bouton reçoit des clics" en "le bouton reçoit des clics du trafic payant sur desktop et rien de l'organique mobile".

Combien de sessions faut-il à une heatmap de site web ?

Une heatmap a besoin d'assez de sessions pour que ses écarts de couleur survivent au bruit d'échantillonnage, et le seuil approximatif vient d'une seule formule. Pour une proportion, la marge d'erreur conservatrice à 95% s'approxime ainsi :

margin of error = 1 / √n

Avec 400 sessions, cela donne 1 / √400 = 0,05, soit 5 points de pourcentage. Un élément qui a capté 12% de tous les clics de la page se situe quelque part entre 7% et 17% de la part de clics réelle. Diviser cette marge par deux, à 2,5 points, demande quatre fois plus de données, soit 1 600 sessions. Chaque filtre que vous appliquez redivise l'échantillon : répartir 1 600 sessions entre mobile et desktop, puis entre deux sources de campagne, laisse quatre groupes de 400 et repousse la marge à 5 points pour chacun. Décidez de vos segments avant de décider que l'échantillon est assez grand.

Que ne peut pas vous dire une heatmap de site web ?

Une heatmap ne peut pas vous montrer un parcours cassé précis, parce que la moyenne est tout le mécanisme qui rend l'image lisible. Dix mille sessions s'effondrent en une image, donc les quarante personnes qui ont tapé sur un champ de code promo, ont eu une erreur de validation silencieuse et ont abandonné le paiement apparaissent comme une tache légèrement plus chaude, indiscernable d'un intérêt ordinaire. La carte n'a par ailleurs aucune notion d'échec : un dead click qui ne renvoie aucune réponse brûle exactement de la même couleur qu'un clic qui a ouvert la bonne modale, et un clic rageur répété sur un bouton figé se lit comme le point le plus chaud de la page.

C'est là que l'agrégation doit passer la main à la lecture individuelle. Regarder les sessions enregistrées derrière un point chaud est ce qui sépare un bouton bien conçu d'un bouton cassé. Flowsery détecte automatiquement les rage clicks, les dead clicks, les erreurs JavaScript et les abandons, regroupe les sessions correspondantes en un seul problème, et classe les problèmes selon le nombre d'utilisateurs touchés, si bien que l'anomalie repérée comme une tache chaude arrive en problème chiffré et non en intuition. Son AI session replay joint en plus les étapes de reproduction au problème, ce qu'une heatmap ne pourra jamais fournir.

Comment les pages dynamiques et personnalisées cassent-elles les heatmaps ?

Toute page qui s'affiche différemment selon les visiteurs casse l'hypothèse d'image unique sur laquelle une heatmap est bâtie. Le calque a besoin d'une capture sur laquelle dessiner, donc une page avec un test A/B, un hero personnalisé, un état connecté, un accordéon fermé au départ, une bannière de cookies qui décale tout vers le bas, ou du scroll infini produit des coordonnées issues de mises en page que la capture n'a jamais montrées. Les clics enregistrés sur la variante B atterrissent sur la capture de la variante A, et la carte obtenue est un composite de pages qui n'ont jamais existé.

Deux mécaniques limitent les dégâts. Capturez les heatmaps séparément pour chaque breakpoint responsive au lieu de redimensionner une capture desktop pour expliquer le comportement sur téléphone, et limitez chaque carte à une variante, un état d'authentification et un état de dépliage. Les outils qui rattachent les interactions à des sélecteurs DOM plutôt qu'à des coordonnées de pixels bruts survivent mieux au reflow, puisque le sélecteur identifie toujours le bouton après que la mise en page l'a déplacé.

Comment transformer un constat de heatmap en correction ?

Une heatmap produit une hypothèse, et tout ce qui vient ensuite relève d'autres outils. La carte vous dit que le deuxième appel à l'action fait mieux que le premier, que 60% des sessions n'atteignent jamais le tableau de prix, ou qu'un titre statique récolte des clics. Aucune de ces observations ne nomme une cause. Associez chaque constat aux signaux de frustration enregistrés sur les mêmes sessions et à la lecture individuelle, puis écrivez le changement comme une affirmation testable : remontez le tableau de prix au-dessus du point où la scroll map décroche, et attendez-vous à ce que la portée en profondeur de scroll sur cette section augmente.

Livrez un changement par hypothèse. Relancer une heatmap après trois modifications simultanées vous donne une nouvelle image et aucun moyen d'attribuer la différence à l'une d'elles.

Questions fréquentes

Une heatmap et une click map, est-ce la même chose ?

Une click map est un type de heatmap, pas un synonyme. La catégorie heatmap couvre aussi les scroll maps, les move maps, les confetti maps et les attention maps, chacune enregistrant un signal différent. La confusion entre la catégorie et la click map qu'elle contient cause l'essentiel des désaccords sur ce qu'une heatmap montre.

Les heatmaps fonctionnent-elles sur mobile ?

Les click maps, scroll maps, confetti maps et attention maps fonctionnent toutes sur mobile, puisque les taps, la profondeur de scroll et le temps dans le viewport sont enregistrables sur les appareils tactiles. Les move maps non, parce que les écrans tactiles n'ont pas de pointeur persistant à suivre. Capturez les heatmaps mobiles sur une capture mobile au breakpoint correspondant, car une mise en page desktop réduite déplace chaque coordonnée.

Combien de visiteurs faut-il avant qu'une heatmap soit fiable ?

Environ 400 sessions par carte donnent une marge d'erreur proche de 5 points de pourcentage, avec l'approximation 1 / √n. Atteindre 2,5 points demande 1 600 sessions. Chaque filtre de segment appliqué divise l'échantillon, donc prévoyez le nombre de segments avant de juger la taille d'échantillon suffisante.

Pourquoi ma heatmap montre-t-elle des clics sur des choses qui ne sont pas des liens ?

Les visiteurs cliquent sur des images, des titres, du texte en gras et des icônes qu'ils croient interactifs. Ces clics apparaissent sur la carte à plein poids alors que rien ne s'est produit, et c'est un dead click. Traiter ces endroits comme de l'engagement inverse le constat : la chaleur signale une affordance manquante, pas une interaction réussie.

Les heatmaps peuvent-elles remplacer le session replay ?

Non. Une heatmap agrège de nombreuses visites en une image, ce qui retire précisément le parcours individuel du champ de vision. Le session replay garde chaque visite intacte, donc un paiement cassé qui a touché 40 personnes reste visible au lieu de se dissoudre dans une tache chaude. Les deux répondent à des questions différentes et fonctionnent ensemble.

Les heatmaps collectent-elles des données personnelles ?

Une heatmap stocke des coordonnées, des positions de scroll et des horodatages, pas l'identité de la personne qui les produit. Le risque vient de ce que la capture d'écran contient et de toute saisie de formulaire enregistrée à côté des coordonnées, donc masquez les champs de saisie et toute zone affichant des données de compte avant de capturer une page derrière une authentification.

Qu'est-ce qu'une confetti map apporte qu'une click map n'apporte pas ?

Une confetti map trace chaque clic comme un point à part au lieu de le fondre dans une grille de densité, et chaque point porte la source de trafic, l'appareil et la campagne du visiteur. Cela permet de transformer "le bouton reçoit des clics" en une lecture par segment, du type "le bouton reçoit des clics du trafic payant sur desktop et aucun du trafic organique mobile". À fort volume, les points se superposent et deviennent illisibles, filtrez donc par segment avant de lire la carte.

Pourquoi ma heatmap semble-t-elle cassée après un test A/B ?

L'outil a besoin d'une seule capture d'écran sur laquelle dessiner, or un test A/B affiche plus d'une mise en page pour la même URL. Les clics enregistrés sur la variante B atterrissent quand même sur la capture de la variante A, donc la carte obtenue est un composite de pages qui n'ont jamais existé. Limitez chaque heatmap à une variante, un état de connexion et un état de dépliage pour garder des coordonnées fiables.

Dois-je utiliser la même heatmap pour desktop et mobile ?

Desktop et mobile ont besoin de captures séparées, car le pli se déplace avec la taille du viewport et une capture desktop réduite place mal chaque coordonnée produite par un visiteur mobile. Capturez les heatmaps séparément pour chaque breakpoint responsive au lieu d'étirer une seule capture pour expliquer un autre écran. Les move maps font exception, puisque les écrans tactiles n'ont pas de pointeur persistant à suivre, donc le mobile n'en produit jamais.

Qu'est-ce qu'un rage click, et apparaît-il sur une heatmap ?

Un rage click, ce sont des clics répétés et rageurs sur un élément qui ne répond pas, souvent un bouton figé. Sur une heatmap, il apparaît comme le point le plus chaud de la page, indissociable d'un clic qui a fonctionné, parce que la carte n'a aucune notion d'échec. Flowsery détecte les rage clicks automatiquement et regroupe les sessions concernées dans un problème classé, au lieu de les laisser comme une tache chaude sans étiquette.