Heatmaps : comment les utiliser pour améliorer vos conversions e-commerce

Une heatmap (carte de chaleur) superpose à une page de votre site les zones où les visiteurs cliquent, jusqu’où ils font défiler et où passe leur souris, du rouge (beaucoup d’activité) au bleu (peu). Sur un site e-commerce, elle sert à repérer ce qui freine l’achat : un bouton que personne ne voit, une image cliquée alors qu’elle n’est pas un lien, une information clé placée là où plus personne ne descend. Elle ne dit pas pourquoi les visiteurs agissent ainsi : elle indique où chercher.

Un taux de conversion faible est frustrant, surtout quand on ne sait pas d’où vient le problème. Les causes classiques sont connues : design qui distrait, tunnel d’achat confus, formulaire de paiement pénible, bouton d’action noyé dans la page. Les heatmaps permettent de vérifier lesquelles s’appliquent à votre boutique, au lieu de les deviner. Voici comment les lire, les exploiter page par page, et les mettre en place dans les règles.

• Qu’est-ce qu’une heatmap ?
• Quels sont les types de heatmaps ?
• Quels signaux chercher dans une heatmap ?
• Comment utiliser les heatmaps page par page ?
• Comment réduire l’abandon de panier grâce aux heatmaps ?
• Quels outils de heatmap choisir ?
• Faut-il le consentement des visiteurs ?
• Comment démarrer : la méthode en 6 étapes
• Quelles sont les limites des heatmaps ?
• Questions fréquentes
• Sources

Qu’est-ce qu’une heatmap ?

Une heatmap est une représentation en deux dimensions de données, où les valeurs sont traduites en couleurs. Appliquée à un site web, elle agrège les interactions de nombreux visiteurs sur une même page et les affiche en surimpression : les zones chaudes concentrent l’activité, les zones froides sont ignorées.

Son intérêt par rapport à un outil d’analyse classique comme Google Analytics : là où l’analytics vous dit combien de visiteurs quittent une page, la heatmap montre ce qu’ils ont fait sur cette page avant de partir. C’est un outil d’optimisation du taux de conversion (CRO), que l’on détaille dans notre article sur l’optimisation du taux de conversion.

Quels sont les types de heatmaps ?

Type	Ce qu’elle montre	Question à laquelle elle répond
Carte de clics	Où les visiteurs cliquent ou touchent l’écran	Mes boutons sont-ils cliqués ? Des éléments non cliquables attirent-ils les clics ?
Carte de défilement (scroll map)	La part des visiteurs qui atteint chaque hauteur de la page	Mon contenu important est-il vu ? Où la majorité décroche-t-elle ?
Carte de survol (move map)	Les zones parcourues par la souris sur ordinateur	Quelles zones retiennent l’attention sans provoquer de clic ?
Enregistrements de sessions	La navigation de visiteurs individuels, rejouée comme une vidéo	Que se passe-t-il concrètement avant un abandon ?
Suivi oculaire (eye tracking)	Où se pose réellement le regard	Que lit-on vraiment ? (réservé aux études en laboratoire)

Deux précisions utiles. Les enregistrements de sessions ne sont pas des heatmaps à proprement parler, mais les outils les proposent presque toujours ensemble, et ils se complètent : la heatmap repère une zone à problème, l’enregistrement montre comment le problème se produit. Quant au suivi oculaire, il nécessite un équipement spécifique : les outils du marché n’en font pas, et la carte de survol n’en est qu’un indicateur indirect.

Quels signaux chercher dans une heatmap ?

• Beaucoup de clics sur des éléments non cliquables (photo produit, titre, icône) : les visiteurs attendent une action qui n’existe pas. Rendez l’élément cliquable ou changez son apparence.
• Des clics répétés au même endroit : souvent un bouton qui ne réagit pas assez vite ou un élément cassé.
• Un appel à l’action placé sous la zone où la majorité décroche : peu de clics, non pas parce que l’offre déplaît, mais parce qu’on ne la voit pas.
• Des éléments secondaires plus cliqués que l’action principale : la page distrait au lieu de guider.
• Beaucoup de clics vers l’accueil ou le menu depuis le tunnel de commande : le visiteur cherche une information qu’il ne trouve pas (frais, délais, retours).
• Un long survol avant un clic : hésitation, libellé peu clair.

Pour interpréter la carte de défilement, gardez en tête cet ordre de grandeur : dans une étude de suivi oculaire publiée par le Nielsen Norman Group en 2018, les utilisateurs passaient environ 57 % de leur temps de consultation au-dessus de la ligne de flottaison, et 74 % dans les deux premiers écrans. Le haut de page reste le plus regardé, même si l’on fait davantage défiler qu’avant.

Comment utiliser les heatmaps page par page ?

Sur un site e-commerce, commencez par les pages qui pèsent le plus dans le parcours d’achat : accueil, pages catégories, fiches produits, panier et tunnel de commande. Pour chacune, une question principale.

Page d’accueil et pages catégories : les visiteurs trouvent-ils leur chemin ?

Regardez quels blocs sont cliqués et lesquels sont ignorés. Un carrousel qui ne reçoit presque aucun clic occupe la meilleure place de la page pour rien. Sur les catégories, vérifiez l’usage des filtres et du tri : s’ils sont très utilisés, rendez-les plus visibles sur mobile ; s’ils sont ignorés, demandez-vous s’ils sont compris.

Fiches produits : l’information décisive est-elle vue ?

La carte de défilement montre si les visiteurs atteignent la description, les caractéristiques, les avis. Si la majorité s’arrête avant, remontez l’essentiel : prix, disponibilité, délai de livraison, principaux arguments. La carte de clics montre si les photos sont agrandies, si les onglets sont ouverts, si le choix de taille ou de couleur pose problème. Une fiche claire contient des images, des caractéristiques, des dimensions et des informations exactes : voyez nos conseils pour écrire des descriptions de produits.

Boutons d’appel à l’action : sont-ils vus et cliqués ?

• Avec la carte de défilement, vérifiez qu’un appel à l’action clair apparaît avant la zone où les visiteurs décrochent.
• Avec la carte de survol, voyez si le bouton attire l’attention.
• Avec la carte de clics, comparez ses clics à ceux des éléments voisins.

Ensuite, testez : taille, couleur, libellé, emplacement, espace libre autour du bouton. Un test A/B combiné à une carte de clics permet de valider qu’une nouvelle version fait mieux, au lieu de le supposer. Nul besoin de refondre la page : de petits changements testés un par un suffisent souvent.

Comment réduire l’abandon de panier grâce aux heatmaps ?

Selon Baymard Institute, qui compile 50 études, le taux moyen d’abandon de panier documenté est de 70,22 % (mise à jour de septembre 2025). Parmi les acheteurs qui abandonnent pendant la commande (hors simple navigation), les motifs les plus cités sont :

Motif d’abandon	Part des répondants
Frais supplémentaires trop élevés (livraison, taxes, frais)	40 %
Délai de livraison trop long	20 %
Manque de confiance pour la carte bancaire	19 %
Création de compte obligatoire	18 %
Processus de commande trop long ou compliqué	17 %
Bugs ou erreurs du site	17 %

Plusieurs de ces motifs se voient directement dans les heatmaps et les enregistrements du panier et du tunnel de commande :

• Frais découverts tard : clics vers la page livraison ou la FAQ depuis le panier. Affichez les frais et le total dès le panier.
• Création de compte forcée : sorties au moment de l’écran de connexion. Proposez la commande en tant qu’invité.
• Bouton de paiement mal placé : clics dispersés, défilement de haut en bas. Un seul bouton principal, visible sans chercher.
• Formulaire trop long : temps passé élevé sur l’étape et abandons au même champ. Supprimez les champs superflus, préremplissez l’adresse de facturation à partir de l’adresse de livraison.
• Doute sur la sécurité : survol des mentions de paiement, retours en arrière. Affichez clairement les moyens de paiement acceptés et les garanties.
• Perte de repères : retours vers la fiche produit depuis le panier. Montrez une miniature et un résumé de chaque article, et un indicateur de progression dans les étapes de la commande.

On détaille les autres leviers dans notre article Comment réduire l’abandon de panier.

Quels outils de heatmap choisir ?

Outil	Ce qu’il faut savoir
Microsoft Clarity	Gratuit, sans limite de trafic annoncée, avec heatmaps et enregistrements de sessions. Depuis le 31 octobre 2025, il exige un signal de consentement pour les visites venant de l’Espace économique européen, du Royaume-Uni et de Suisse.
Hotjar	Outil historique des heatmaps, désormais fusionné avec Contentsquare : l’inscription se fait via Contentsquare, qui propose une offre gratuite avec heatmaps et enregistrements de sessions.
Contentsquare	Plateforme d’analyse de l’expérience qui intègre désormais Hotjar, avec des offres payantes plus complètes (entonnoirs, enquêtes, suivi des erreurs).
Crazy Egg	Heatmaps, enregistrements de sessions, enquêtes et tests A/B dans un même outil.
Lucky Orange	Heatmaps, enregistrements de sessions, entonnoirs, enquêtes et chat en direct.

Les offres et les tarifs de ces outils évoluent souvent : vérifiez les conditions à jour sur le site de l’éditeur avant de choisir. Pour une boutique qui débute, un outil gratuit suffit largement pour les premières analyses.

Faut-il le consentement des visiteurs pour utiliser des heatmaps ?

Dans la plupart des cas, il faut le prévoir. La CNIL n’exempte de consentement que les traceurs de mesure d’audience qui servent exclusivement à la mesure d’audience pour le compte de l’éditeur et produisent uniquement des données statistiques anonymes, sans recoupement avec d’autres traitements. Or les outils de heatmap et d’enregistrement de sessions suivent en général des visiteurs individuels, et sont souvent opérés par des tiers : ils sortent en pratique de ce cadre. Le plus sûr est donc de les déclencher uniquement après accord dans votre bandeau cookies, ce que Microsoft Clarity exige d’ailleurs désormais pour les visiteurs européens.

Autre précaution : vérifiez que les champs sensibles (coordonnées, paiement, mots de passe) sont masqués dans les enregistrements, et mentionnez l’outil dans votre politique de confidentialité.

Comment démarrer avec les heatmaps : la méthode en 6 étapes

1. Partez d’une question, pas de l’outil : « Pourquoi la fiche produit convertit-elle moins sur mobile ? » plutôt que « voyons ce que ça donne ».
2. Choisissez les pages : celles qui ont du trafic et un rôle clé dans l’achat, repérées dans votre outil d’analyse.
3. Installez l’outil derrière le consentement, et séparez les analyses ordinateur et mobile : les comportements y sont très différents.
4. Attendez un volume suffisant de visites avant de conclure. Quelques dizaines de sessions donnent des couleurs, pas des conclusions.
5. Croisez avec les enregistrements et l’analytics pour comprendre le pourquoi, puis formulez une hypothèse et une modification.
6. Testez et mesurez : test A/B ou comparaison avant/après sur la même période, puis recommencez sur la page suivante.

Idéalement, on pense à ce suivi dès la conception de la boutique, pour disposer de mesures de référence et suivre l’effet de chaque changement dans le temps. C’est une étape que l’on intègre dans nos projets de création de site e-commerce. Pour les bonnes pratiques de conception elles-mêmes, voyez aussi nos règles de design pour un site e-commerce.

Quelles sont les limites des heatmaps ?

• Elles montrent le quoi, pas le pourquoi. Une zone froide peut être ignorée parce qu’elle est inutile, ou parce qu’elle est mal placée. Seul le test tranche.
• Elles dépendent du volume. Sur un site à faible trafic, la carte d’une page peu visitée est surtout du bruit.
• Elles se trompent sur les pages dynamiques. Menus déroulants, fenêtres modales, contenus personnalisés : la carte peut attribuer des clics au mauvais élément.
• Le survol n’est pas le regard. Sur ordinateur, la souris suit l’œil de façon imparfaite ; sur mobile, il n’y a pas de survol du tout.
• Elles ne remplacent pas les utilisateurs. Quelques tests utilisateurs ou un audit UX éclairent souvent ce qu’aucune carte ne montre.

Questions fréquentes

Quelle est la différence entre une heatmap et Google Analytics ?

Google Analytics mesure des volumes et des parcours entre les pages. La heatmap montre ce qui se passe à l’intérieur d’une page : clics, défilement, survol. Les deux se complètent.

Existe-t-il un outil de heatmap gratuit ?

Oui. Microsoft Clarity est gratuit et propose heatmaps et enregistrements de sessions. Contentsquare, qui intègre désormais Hotjar, propose aussi une offre gratuite.

Les heatmaps ralentissent-elles le site ?

Elles ajoutent un script tiers, donc un peu de poids. Chargez-le après consentement, sur les pages que vous analysez, et retirez-le quand l’analyse est terminée si vous n’en avez plus besoin.

Combien de temps laisser tourner une heatmap ?

Jusqu’à obtenir un volume de sessions suffisant sur la page, ce qui dépend de votre trafic. Évitez de conclure sur une période atypique (soldes, campagne ponctuelle).

Une heatmap fonctionne-t-elle sur mobile ?

Oui pour les cartes de clics (les touchers) et de défilement. La carte de survol, elle, n’a de sens que sur ordinateur. Analysez toujours les deux supports séparément.

Sources

• Baymard Institute : Cart Abandonment Rate Statistics
• Nielsen Norman Group : Scrolling and Attention
• Microsoft Clarity
• Microsoft Learn : Clarity Consent API v2
• CNIL : cookies et outils de mesure d’audience
• Contentsquare : Hotjar fait désormais partie de Contentsquare
• Contentsquare : guide des heatmaps
• Crazy Egg
• Lucky Orange