Analyse des heatmaps de demandes : répartition des clics, profondeur de défilement et points d’abandon du formulaire
1. Heatmap de clics : sur quoi l’acheteur clique, et sur quoi vous croyez qu’il clique
La heatmap de clics superpose les positions de clic de tous les visiteurs sur une capture d’écran de la page : plus le point est rouge, plus il y a eu de clics. Ceux qui regardent pour la première fois la heatmap de leur site sont souvent surpris : les utilisateurs ne suivent pas du tout le parcours prévu. Ils cliquent là où vous pensiez que c’était secondaire, tandis que votre bouton d’appel à l’action soigneusement conçu ne récolte que quelques clics.
Voici le constat contre-intuitif :La zone la plus cliquée n’est souvent pas votre bouton de conversion, mais les entrées d’information du type « voir les photos de l’usine », « télécharger le catalogue produits » ou « voir plus de cas clients ». Cela signifie que la plupart des visiteurs sont encore en phase de recherche et ne sont pas prêts à vous contacter. La bonne réaction n’est pas d’agrandir et de rougir le bouton d’appel à l’action, mais de suivre leur intention en rendant ces entrées d’information plus fluides.
| Signal de la heatmap | Signification | Action à mener |
|---|---|---|
| Clics sur le bouton d’appel à l’action bien inférieurs aux attentes | L’acheteur est encore en phase de recherche | Ajouter au-dessus du bouton d’appel à l’action une entrée à faible engagement de type téléchargement |
| Un élément du menu est cliqué de façon frénétique | L’utilisateur ne trouve pas l’information qu’il cherche | Remonter cet élément en haut de page ou ajouter un menu déroulant |
| Nombreux clics sur une image | L’utilisateur croit que l’image est cliquable | Rendre l’image cliquable ou ajouter une fonction d’agrandissement |
| Vaste zone sans aucun clic (zone morte) | Personne ne lit ce contenu | Raccourcir ou supprimer ce passage |
| Clics erronés répétés au même endroit | Illusion visuelle | Modifier le texte ou le style pour lever l’ambiguïté |
Exemple concret : un site de vannes industrielles. La heatmap montre que le bouton « Demander un devis » en haut de page ne récolte que 2 % des clics, alors que la petite icône « Photos de l’usine » en attire 8 %. L’équipe marketing voulait agrandir le bouton de devis ; après avoir vu la heatmap, elle a plutôt intégré des « cas clients du secteur » dans les photos de l’usine. Résultat : les demandes de devis ont augmenté, parce que les acheteurs, rassurés par les photos et les cas clients, remplissent le formulaire d’eux-mêmes.
2. Profondeur de scroll : à quel niveau le contenu est-il ignoré
La heatmap de clics montre seulement ce qui a été cliqué ; la profondeur de scroll montre si la page a été lue jusqu’au bout. Beaucoup d’équipes rédigent de longues présentations produit, des caractéristiques techniques et des cas clients sans savoir ce que les acheteurs ont réellement vu. La carte de profondeur de scroll indique, en pourcentage de la hauteur de page, combien de visiteurs ont atteint chaque écran.
Une profondeur de scroll saine diminue progressivement, mais la courbe doit rester régulière. Si un décrochage brutal apparaît à un niveau, c’est que le contenu de cet écran a fait perdre l’intérêt des acheteurs : trop long, trop aride ou hors sujet. Voici les repères observés sur les pages B2B.
| Profondeur de scroll | Taux sain | En dessous du seuil |
|---|---|---|
| 25 % (bas du premier écran) | 70 %-80 % | Le premier écran n’accroche pas, taux de rebond trop élevé |
| 50 % (milieu de page) | 45 %-55 % | La première moitié est trop longue, à raccourcir |
| 75 % (au-dessus du formulaire) | 25 %-35 % | Forte perte au milieu, cas clients et caractéristiques peu convaincants |
| 100 % (pied de page) | 10 %-15 % | La plupart des visiteurs ne voient pas le CTA en bas de page |
Remarquez la dernière ligne : seuls 10 % à 15 % des visiteurs descendent jusqu’en bas de page. Autrement dit, si vous ne placez votre formulaire principal qu’en bas de page, 85 % des visiteurs ne le verront jamais. C’est pourquoi le formulaire doit apparaître une première fois au milieu de page, puis une seconde fois en bas, et non uniquement à la fin. Pour la logique globale de conception des champs de formulaire, voir Conception des champs du formulaire de demande et taux de conversion.
La profondeur de scroll indique aussi quels contenus sont réellement lus. Si 30 % des visiteurs s’arrêtent encore à la section des cas clients située à 75 %, c’est qu’elle est efficace et qu’il faut l’étoffer. Si plus personne n’est présent à la section des caractéristiques techniques située à 50 %, c’est qu’elle est trop longue et trop théorique : transformez-la en liste à puces. Pour la recherche et le filtrage du catalogue produit, voir l’expérience de recherche du catalogue produit.
3. Points d’abandon du formulaire : à quel champ l’acheteur renonce
Le taux d’abandon de formulaire est le chiffre le plus douloureux pour un site e-commerce. Sur les formulaires B2B, il se situe généralement entre 60 % et 80 % : sur 10 personnes qui commencent à remplir, 2 à 4 seulement vont au bout. Les heatmaps et les outils d’analyse de formulaire vous indiquent à quel champ se concentrent les abandons.
Il y a trois points d’abandon classiques. Le premier, c’est le tout premier champ : si l’acheteur part dès qu’il voit le premier cadre du formulaire, c’est que le formulaire arrive trop brutalement ou que la confiance au-dessus n’est pas assez installée. Le deuxième, ce sont les champs obligatoires à la chaîne : si trois ou quatre champs d’affilée sont marqués d’une étoile rouge, l’acheteur trouve ça pénible et s’en va. Le troisième, c’est le captcha : beaucoup abandonnent à cette étape.
| Point d’abandon | Taux de perte typique | Raison | Action |
|---|---|---|---|
| Dès le premier champ du formulaire | 20 %-30 % | Manque de confiance ou formulaire trop brutal | Ajouter un cas client ou une promesse au-dessus du formulaire |
| Zone des champs obligatoires au milieu | 25 %-35 % | Trop de champs, trop de détails demandés | Réduire à 5-7 champs obligatoires, le reste en optionnel |
| Étape du captcha | 10 %-20 % | Captcha trop pénible | Passer à un captcha invisible ou à la connexion via réseaux sociaux |
| Avant le bouton d’envoi | 5 %-10 % | Peur d’être démarché après l’envoi | Ajouter à côté une promesse de confidentialité et un délai de réponse |
| Erreur après l’envoi | Moins de 5 % | Panne technique du formulaire | À corriger immédiatement, ce sont de vraies ventes perdues |
Exemple concret : un site avait un formulaire de 11 champs. La heatmap montrait que le taux d’abandon décollait au 6e champ et qu’au 9e, il ne restait plus que 20 % des visiteurs. L’équipe a réduit le formulaire à 6 champs obligatoires (nom, société, e-mail, référence produit, volume, message) et transformé les 5 autres en « facultatif, pour nous permettre de vous chiffrer plus vite ».
Résultat : le taux d’envoi est passé de 22 % à 38 %. Réduire les champs ne fait pas perdre d’information : on sépare l’essentiel du facultatif. Pour la fiabilité du formulaire et les problèmes de délivrabilité, voir Fiabilité du formulaire de demande de devis.
IV. Comment choisir un outil de heatmap
Pas besoin de développer votre propre outil de heatmap : il en existe des prêts à l’emploi. Trois critères suffisent pour choisir : les données sont-elles suffisantes, l’impact sur les performances de la page est-il important, le prix est-il abordable. Sur un site B2B indépendant, le trafic est faible : une version gratuite ou à petit prix suffit souvent.
| Outil | Capacités de la version gratuite | Prix de départ payant | Pour qui |
|---|---|---|---|
| Microsoft Clarity | Heatmap + enregistrement d’écran + clics, gratuit | Gratuit | Tous les sites, à commencer par celui-ci |
| Hotjar | 2 000 sessions par jour, limité | À partir d’environ 32 $/mois | Sites ayant besoin d’analyses plus fines |
| Crazy Egg | 3 000 visites/mois, limité | À partir d’environ 24 $/mois | Surtout des heatmaps de clics |
| Heatmap Plausible | Nécessite d’installer les statistiques Plausible | Inclus dans l’offre principale | Sites utilisant déjà Plausible |
Commencez par Microsoft Clarity : entièrement gratuit, avec heatmap, enregistrement d’écran et répartition des clics, il suffit d’installer un script. Laissez tourner un mois pour accumuler assez de données, puis décidez si vous passez à une version payante. Attention à l’impact sur les performances dès que vous installez un script de heatmap tiers : si un outil ajoute une seconde au LCP, le jeu n’en vaut pas la chandelle. C’est cohérent avec Core Web Vitals les principes d’optimisation.
Pour exploiter les recherches internes du site, voir l’exploration des requêtes internes au site. Combinées à la heatmap, elles permettent de reconstituer plus complètement l’intention de l’acheteur.
V. Les erreurs courantes dans l’analyse des heatmaps
| Erreur | Ce qu’on fait | Ce que ça donne | Bonne pratique |
|---|---|---|---|
| Regarder une fois et modifier | Conclure sur un échantillon de 200 visites | Échantillon trop petit, jugement erroné | Attendre d’avoir plus de 2 000 visites avant d’analyser |
| Ne regarder que la heatmap de clics | Ignorer la profondeur de défilement et les enregistrements d’écran | Passer à côté des points d’abandon clés | Croiser les trois types de données |
| Prendre la heatmap pour une base de design | On empile le contenu là où ça chauffe | La page devient illisible | Repérer le problème avec une heatmap, le valider par A/B test |
| Ignorer la heatmap mobile | Ne regarder que la version PC | Passer à côté des vrais problèmes sur mobile | Analyser le mobile séparément |
| On l’installe et on n’y touche plus | Le script est installé, jamais rouvert | Des données gaspillées | Consulter la heatmap une fois par mois |
Le troisième point est le plus important : une heatmap vous dit où est le problème, pas comment le corriger. Par exemple, si elle montre que personne ne clique sur le CTA, vous ne passez pas le bouton en plein écran. La bonne démarche : la heatmap localise le problème, vous formulez une hypothèse, puis vous la validez avec un Test A/B de formulaire test. La heatmap est un outil de diagnostic, pas une ordonnance. Pour la logique globale d’optimisation d’une landing page, voir optimisation du taux de conversion d’une landing page de demande de devis.
FAQ — Questions fréquentes
Comment installer une heatmap et avec quel outil ?
Quelle profondeur de scroll est normale, et à partir de quand y a-t-il un problème ?
Quel taux d’abandon de formulaire est normal, et comment cerner le problème ?
La heatmap montre que personne ne clique sur le bouton : est-ce qu’il n’est pas assez visible ?
À quelle fréquence consulter une heatmap, et comment agir ensuite ?
Faut-il analyser la heatmap mobile séparément ?
Pour conclure
La valeur d’une heatmap ne tient pas à la beauté de cette capture d’écran multicolore, mais au fait qu’elle vous oblige à abandonner l’illusion du “je croyais que l’utilisateur ferait comme ci” pour regarder ce qu’il fait vraiment. Beaucoup de sites indépendants tournent depuis deux ou trois ans, et il reste une épaisse couche de certitudes entre l’idée que l’équipe se fait de son site et le comportement réel des utilisateurs. La heatmap est l’outil qui crève cette bulle.
Trois étapes pour passer à l’action : installez d’abord un outil gratuit comme Microsoft Clarity et accumulez un mois de données ; lisez ensuite séparément les trois catégories clics, scroll et formulaire, en notant chaque écart avec vos prévisions ; transformez enfin chaque doute en hypothèse testable, à valider par un test A/B ou un entretien utilisateur. Ne refaites pas tout après avoir vu une heatmap : diagnostiquez d’abord, prescrivez ensuite.
Une phrase à retenir : une heatmap ne vous dit pas ce que l’utilisateur devrait faire, elle vous dit ce qu’il fait réellement. Regardez d’abord où il clique, jusqu’où il fait défiler la page et où il abandonne, puis décidez quoi modifier, et non l’inverse.