Heatmaps : lire la data pour agir vite

Les heatmaps sont probablement l'outil le plus accessible du CRO — et pourtant, la grande majorité des e-commerçants qui les installent ne savent pas quoi en faire. On installe Hotjar, on regarde des taches colorées, et on ne prend aucune décision. Voici comment lire tes heatmaps et en extraire des actions concrètes en moins d'une heure.

Les 3 types de heatmaps et ce qu'ils révèlent

1. La heatmap de clics (click map)

Elle montre où les utilisateurs cliquent sur ta page. Ce que tu cherches :

• Les "rage clicks" : clics répétés sur un élément non cliquable — signal de frustration
• Les clics sur des éléments non-liés (images décoratives, titres) — signifie que les visiteurs s'attendent à une interaction
• Les zones mortes : zones importantes (CTA, navigation) que personne ne clique

Action : si ton bouton principal n'est pas dans le top 3 des éléments cliqués sur une page produit, il y a un problème de visibilité ou de hiérarchie visuelle.

2. La heatmap de scroll (scroll map)

Elle montre jusqu'où les utilisateurs descendent dans la page. C'est l'outil le plus utile pour identifier la "ligne de flottaison" réelle.

• Si 60 % des visiteurs ne voient pas ton CTA principal, ton problème n'est pas le CTA — c'est ce qui précède
• Un drop soudain à 40 % de la page signifie que quelque chose à cet endroit décourage la lecture
• Un contenu important en bas de page (FAQ, avis) vu par moins de 20 % des visiteurs mérite d'être remonté

Règle pratique : sur mobile, plus de 80 % de tes visiteurs ne descendent pas en dessous de 3 longueurs d'écran. Tout ce qui est critique doit être dans les 3 premières longueurs.

3. La heatmap de mouvement de souris (move map)

Elle suit le mouvement de la souris comme proxy du regard (corrélation d'environ 88 % selon les études eye-tracking). Utile pour identifier les zones d'attention et de lecture.

Comment analyser une heatmap de page produit : méthode en 5 étapes

Étape 1 : Filtrer par device

Mobile et desktop se comportent différemment. Analyse-les séparément — une optimisation pertinente sur desktop peut être neutre ou négative sur mobile.

Étape 2 : Identifier la ligne de flottaison réelle

Sur la scroll map, note le pourcentage de visiteurs qui atteignent ton CTA. Si c'est moins de 70 %, travaille sur ce qui précède — pas sur le CTA lui-même.

Étape 3 : Analyser le ratio attention / importance

Compare les zones où les utilisateurs cliquent avec les zones que tu veux qu'ils activent. Un fort décalage entre les deux = problème de hiérarchie visuelle.

Étape 4 : Repérer les patterns d'abandon

Sur les heatmaps d'enregistrements de sessions, observe où les utilisateurs s'arrêtent de scroller, puis ferment la page. C'est généralement là que se trouve le frein à l'achat.

Étape 5 : Formuler une hypothèse testable

Ne te contente pas d'"améliorer". Formule une hypothèse précise : "Si on remonte le sélecteur de taille avant la description, le taux d'ajout au panier va augmenter parce que les visiteurs cherchent cette information avant de décider."

Les outils : lequel choisir ?

• Hotjar — le plus populaire, excellent rapport qualité/prix pour les PME (gratuit jusqu'à 35 sessions/jour)
• Microsoft Clarity — gratuit, illimité, intégration Google Analytics native. Idéal pour démarrer
• FullStory — solution enterprise, le plus précis pour les analyses de funnel complexes
• Lucky Orange — bon outil intégré Shopify, interface simple

Notre recommandation pour commencer : Microsoft Clarity (gratuit, illimité) + Hotjar pour les enregistrements de sessions. Ces deux outils couvrent 90 % des cas d'usage CRO.

Les 3 insights les plus fréquents sur les boutiques Shopify

Après avoir analysé des heatmaps sur des dizaines de boutiques, ces 3 problèmes reviennent systématiquement :

• Le sélecteur de taille/couleur est trop bas dans la page — les visiteurs ne le trouvent pas et abandonnent
• Les avis clients sont en bas de page et vus par moins de 25 % des visiteurs — alors que c'est ce qu'ils cherchent
• Sur mobile, les images du produit prennent 90 % du viewport et le CTA n'est visible qu'après scrolling

Conclusion : de la data à l'action

Une heatmap sans action est inutile. L'objectif est toujours le même : transformer une observation ("les visiteurs ne cliquent pas sur le CTA") en hypothèse ("si on augmente le contraste du bouton et on le rend sticky sur mobile, le CVR va augmenter") en test A/B (variante B avec bouton modifié) en décision.

Installe Microsoft Clarity sur ta boutique aujourd'hui — c'est gratuit et tu auras tes premières données exploitables dans 48 heures.