Les visiteurs ne lisent que 20 % du texte d'une page web (source : Nielsen Norman Group, étude eye-tracking, mise à jour 2024). Le reste est scanné, survolé ou ignoré. Les heatmaps et les enregistrements de session te montrent exactement ce qui est vu, cliqué et ignoré sur chaque page de ton site, des données totalement invisibles dans Google Analytics.
En audit, j'ai vérifié une page avec des CTA importants. Heatmap montrait que 85% des visiteurs ne scrollaient pas assez pour voir le bouton. Pendant ce temps, GA4 disait "taux de rebond normal, engagement bon". La heatmap a révélé le vrai problème.
Qu'est-ce qu'une heatmap ?#
Une heatmap (carte de chaleur) est une représentation visuelle de l'activité des visiteurs sur une page web. Les zones chaudes (rouge, orange) indiquent une forte activité ; les zones froides (bleu, vert) indiquent peu ou pas d'interaction.
La click map montre où les visiteurs cliquent. Code couleur chaud là où il y a beaucoup de clics, froid où personne ne touche. Utile pour identifier les éléments qui attirent l'attention (vrais CTA qui fonctionnent, liens populaires) et les zones "mortes" où tu croyais avoir un CTA mais personne ne clique.
La scroll map montre jusqu'où les visiteurs scrollent. Rouge en haut (tout le monde voit ça), qui se refroidit progressivement vers le bas. Si 70 % des visiteurs ne scrollent pas plus bas que le premier tiers, ton contenu important est invisible. C'est souvent la plus révélatrice.
La move map montre où se déplace le curseur. C'est une approximation de l'attention visuelle (grosso modo, tu regardes où tu mets ton curseur). Ça fonctionne sur desktop, pas sur mobile (pas de curseur). Moins fiable que click et scroll, mais utile pour voir où les gens hésitent.
La scroll map est souvent la plus révélatrice. Si 70 % des visiteurs ne scrollent pas au-delà du premier tiers de la page, tout le contenu en dessous est invisible.
Les outils disponibles en 2026#
Microsoft Clarity (gratuit, illimité)#
Clarity est l'outil le plus généreux du marché : entièrement gratuit, sans limite de sessions ni de pages vues. Lancé par Microsoft en 2020, il est devenu une alternative crédible à Hotjar.
Ce qu'il offre :
- Heatmaps (click, scroll, area)
- Enregistrements de sessions (replay intégral de la visite)
- Détection automatique de "rage clicks" (clics répétés par frustration)
- Détection de "dead clicks" (clics sur des éléments non interactifs)
- Intégration Google Analytics native
- Dashboard avec insights automatiques
Limites :
- Pas de sondages sur site (feedback utilisateur)
- Pas de funnels personnalisés
- Interface moins polie que Hotjar
Installation : script JS à insérer dans le <head> ou via Google Tag Manager.
Hotjar (freemium)#
Hotjar est la référence historique des heatmaps. Son interface est la plus intuitive du marché.
Ce qu'il offre :
- Heatmaps (click, scroll, move)
- Enregistrements de sessions
- Sondages sur site (feedback contextuel)
- Enquêtes longues (NPS, satisfaction)
- Funnels de conversion
Tarifs : Plan Basic : gratuit, 35 sessions par jour enregistrées (1 050 par mois).
Plan Plus : 32 EUR/mois, 100 sessions par jour (3 000/mois).
Plan Business : 80 EUR/mois, 500 sessions par jour (15 000/mois).
Plan Scale : sur devis, accès illimité pour les grosses structures.
Recommandation : commence avec Clarity (gratuit, illimité) pour les heatmaps et enregistrements. Ajoute Hotjar si tu as besoin de sondages et enquêtes.
FullStory : session replay + analytics avancé. Positionné enterprise, prix sur devis et cher.
Lucky Orange : heatmaps + chat live intégré. 18 USD/mois. Bon pour ajouter un support en direct sur la même plateforme que tes heatmaps.
Mouseflow : excel à analyser l'abandon de formulaires. 31 EUR/mois. Hyper spécialisé si tu as beaucoup de formulaires importants.
Contentsquare : enterprise, avec IA. Sur devis. Overkill sauf si tu es une grosse entreprise.
Ce que les heatmaps révèlent#
Les heatmaps révelent plusieurs anomalies structurantes. Quand ton bouton "Demander un devis" est en bleu froid sur la heatmap, les visiteurs ne le voient simplement pas, souvent à cause de sa position trop basse, d'une couleur qui ne contraste pas avec le fond, ou d'un texte qui n'incite pas à l'action. L'outil te force à reconnaître ce que tu avais supposé visible et urgent.
La scroll map révèle aussi le contenu ignoré. 60 % des visiteurs ne dépassent jamais le hero ? Ton argument de vente principal est en bas de page et personne ne le lit. C'est une donnée brutale qui te pousse à restructurer : remonte les informations critiques au-dessus de la ligne de flottaison.
Les faux clics sont un autre symptôme. Quand les visiteurs cliquent sur des éléments qui ne sont pas des liens (images, textes en gras, icônes), c'est un signe de confusion UX. L'élément ressemble à un lien mais n'en est pas un. Tu as deux solutions : le rendre cliquable, ou modifier son style pour qu'il ne trompe pas.
Enfin, la distribution de l'attention sur une page de liste (résultats de recherche, catalogue produits) suit le pattern dit "en F" décrit par Nielsen Norman Group : les visiteurs scannent le premier résultat en entier, survolent le deuxième, et ne regardent que le début des suivants. C'est un pattern qui persiste depuis vingt ans.
Ce que les heatmaps ne disent PAS#
- Le "pourquoi". La heatmap montre que les visiteurs ne cliquent pas sur le CTA, mais pas pourquoi. Pour le "pourquoi", complète avec des enregistrements de session ou des sondages. Des outils gratuits comme Clarity te donnent les deux, pas besoin de jongler entre trois applications.
- L'intention. Un clic n'est pas toujours intentionnel. Un déplacement de curseur ne signifie pas que le visiteur regarde cet endroit. J'arrive pas toujours à savoir si le mouvement de souris c'est de l'attention ou juste du bruit. C'est pour ça qu'il faut croiser avec les session replays.
- La représentativité. Une heatmap basée sur 50 sessions n'est pas fiable. Attends au moins 1 000 sessions pour des conclusions solides sur les pages à fort trafic, 200 minimum pour les pages secondaires.
Les enregistrements de session#
Qu'est-ce qu'un enregistrement de session ?#
Un enregistrement de session (session replay) est une vidéo de la visite d'un utilisateur : mouvements de souris, clics, scrolls, saisie dans les formulaires (données sensibles masquées automatiquement). Tu vois exactement ce que le visiteur a vu et fait.
Comment les utiliser efficacement#
Ne regarde pas 1 000 sessions. Filtre :
- Sessions avec "rage clicks" (Clarity les détecte automatiquement)
- Sessions qui ont visité la page pricing sans convertir
- Sessions qui ont abandonné un formulaire
- Sessions depuis une source spécifique (Google, campagne email)
Cherche les patterns, pas les anecdotes. Si 8 sessions sur 10 montrent le même comportement (hésitation sur le même élément, scroll back vers une section), c'est un pattern actionnable.
Quand les visiteurs scrollent vers le haut après avoir vu le prix, c'est généralement un signe : le prix choque, ils remontent pour relire les bénéfices et justifier la dépense. Solution ? Ajouter les bénéfices clés avant le prix, pas après.
Des rage clicks sur une image ? L'image ressemble à un lien (design, contraste, position). Soit tu la rends vraiment cliquable, soit tu modifies son style pour qu'elle ressemble moins à un bouton.
Abandon du formulaire au champ "téléphone" ? Friction excessive. Les utilisateurs ne veulent pas donner leur numéro. Rendre ce champ optionnel, ou simplement le supprimer et tester.
Scroll rapide au-delà des témoignages ? Le contenu n'accroche pas. Les témoignages sont peut-être trop longs, trop génériques, pas assez ciblés sur l'audience. Tester des versions plus courtes ou différentes.
Méthodologie d'analyse comportementale#
Le cycle en 4 étapes#
- Observer : installe Clarity ou Hotjar, collecte 2 à 4 semaines de données
- Identifier : repère les anomalies (zones froides sur des éléments importants, rage clicks, abandons)
- Hypothéser : formule une hypothèse ("si on déplace le CTA au-dessus de la ligne de flottaison, le taux de clic augmentera")
- Tester : lance un A/B test pour valider l'hypothèse (voir notre guide sur l'A/B testing)
Pages prioritaires à analyser#
- Page d'accueil : première impression, navigation, engagement
- Pages produit / pricing : conversion, objections, friction
- Landing pages : taux de conversion du formulaire, scroll depth
- Articles de blog à fort trafic : engagement, maillage interne, CTAs
- Pages de checkout : abandons, erreurs, confusion
RGPD et analyse comportementale#
Les outils de heatmap et de session replay collectent des données comportementales. En Europe, le RGPD s'applique :
- Consentement : nécessaire si l'outil dépose des cookies (Hotjar : oui, Clarity : cookies first-party)
- Données personnelles : les enregistrements peuvent capturer des saisies de formulaire. Active le masquage automatique des données sensibles (activé par défaut sur Clarity et Hotjar)
- Base légale : intérêt légitime possible pour l'analyse comportementale anonymisée, mais le consentement est recommandé par la CNIL
Microsoft Clarity a l'avantage de pouvoir fonctionner sans cookies tiers (first-party uniquement), ce qui simplifie la conformité.
FAQ#
Hotjar ou Microsoft Clarity ?#
Clarity pour le budget (gratuit, illimité). Hotjar pour les sondages et enquêtes intégrés. Les deux en parallèle si le budget le permet, Clarity pour l'analyse quantitative, Hotjar pour le feedback qualitatif.
Combien de sessions faut-il avant d'analyser ?#
Minimum 200 sessions pour une page, 1 000+ pour des conclusions fiables. Les heatmaps agrégées sur moins de 100 sessions sont trop bruitées pour être exploitables.
Les heatmaps fonctionnent-elles sur mobile ?#
Oui, Clarity et Hotjar génèrent des heatmaps séparées pour desktop, tablette et mobile. C'est crucial car le comportement diffère radicalement : sur mobile, le scroll est plus profond mais les clics sont moins précis.
Les enregistrements de session ralentissent-ils le site ?#
L'impact est minimal (moins de 1 % sur le LCP) car les scripts se chargent de manière asynchrone. Clarity et Hotjar sont optimisés pour ne pas impacter les Core Web Vitals. Vérifie quand même dans PageSpeed Insights après installation.
Peut-on voir les données saisies dans les formulaires ?#
Par défaut, Clarity et Hotjar masquent automatiquement les champs de mot de passe et les données sensibles (numéros de carte, etc.). Tu peux configurer un masquage supplémentaire sur des champs spécifiques si nécessaire.
Comment interpréter une heatmap#