Analyse des heatmaps : comment analyser une heatmap

1. Les utilisateurs voient-ils le contenu important ?

Pour comprendre si les utilisateurs voient réellement les éléments de contenu ou de sections importants sur votre page produit, regardez une map de défilement, c’est-à-dire une heatmap qui vous montre jusqu’où les internautes font défiler la page.

Suivez ces trois étapes pour déterminer si votre contenu vend réellement votre produit et s’il fait passer le message :

1️⃣ Modifiez le contenu au-dessus et au-dessous de la ligne de flottaison moyenne de votre site web

Commencez par examiner la position de la ligne de flottaison moyenne de votre site web, c’est-à-dire la partie de la page que les visiteurs voient sur leur écran sans faire défiler la page dès qu’ils atterrissent sur votre site :1. Les utilisateurs voient-ils le contenu important ?

Pour comprendre si les utilisateurs voient réellement les éléments de contenu ou de sections importants sur votre page produit, regardez une map de défilement, c’est-à-dire une heatmap qui vous montre jusqu’où les internautes font défiler la page.

Suivez ces trois étapes pour déterminer si votre contenu vend réellement votre produit et s’il fait passer le message :

1️⃣ Modifiez le contenu au-dessus et au-dessous de la ligne de flottaison moyenne de votre site web

Commencez par examiner la position de la ligne de flottaison moyenne de votre site web, c’est-à-dire la partie de la page que les visiteurs voient sur leur écran sans faire défiler la page dès qu’ils atterrissent sur votre site :

Savoir où se situe la ligne de flottaison moyenne permet de confirmer si les visiteurs accèdent aux informations les plus importantes sur une page, comme les offres de produits, les annonces de campagne, etc.

Par exemple, vous pouvez avoir un contenu viral très convaincant qui se trouve un peu en dessous de la ligne de flottaison, ce qui signifie que les visiteurs ne le verront que si la page a réussi à capter et à retenir leur attention suffisamment longtemps pour qu’ils soient prêts à faire défiler la page vers le bas.

2️⃣ Évaluez comment les visiteurs interagissent avec les éléments de la page

Poursuivez l’analyse en examinant l’ensemble de la map de défilement et le pourcentage de visiteurs qui atteignent (ou non) des points précis de la page. Ces données peuvent être particulièrement utiles sur les longues pages, comme une page de destination contenant de nombreuses informations que vous souhaitez que les clients voient.

3️⃣ Recherchez les raisons pour lesquelles les utilisateurs quittent votre page

Soyez attentif aux changements brusques de couleur sur votre map de défilement. Cela indique qu’un pourcentage élevé de visiteurs ont arrêté de faire défiler la page, pensant peut-être avoir atteint la fin de la page et ne peuvent pas comprendre, d’après le contexte, qu’il y a plus de contenu plus loin.

Les maps de défilement vous fournissent suffisamment de données pour déterminer si des informations clés sont ignorées par la majorité de vos utilisateurs et s’il est nécessaire de les déplacer vers un endroit plus visible de la page web.

2. Les utilisateurs cliquent-ils sur les éléments clés de la page (liens, boutons et CTA) ?

Alors qu’une map de défilement vous aide à comprendre si les utilisateurs voient des éléments de contenu précis, une heatmap des clics confirme rapidement s’ils cliquent dessus ou non :

Votre site web existe pour que les visiteurs puissent atteindre un objectif. Ils veulent trouver des informations, s’inscrire à un service ou acheter un produit. Lorsque vous examinez une heatmap des clics, tenez compte d’éléments tels que les appels à l’action (CTA), les boutons et les liens qui sont là pour aider les visiteurs à atteindre leur objectif. Clique-t-on ou, dans le cas d’une heatmap mobile, appuie-t-on sur ces éléments ? Combien d’interactions reçoivent-ils ? Les utilisateurs ignorent-ils une fonctionnalité du produit que vous voudriez populariser ?

Utilisez cet aperçu de l’expérience produit pour apporter des modifications rapides à la conception ou pour justifier la nécessité d’une recherche utilisateur plus approfondie. Si vous finissez par modifier la page produit, la heatmap des clics vous aidera à comparer les comportements et à comprendre si votre nouvelle conception est réussie.

3. Les utilisateurs sont-ils perturbés par des éléments non cliquables ?

Aucun élément cliquable qui semble être cliquable ne peut être source de confusion et de frustration pour les utilisateurs qui gaspillent leurs clics en s’attendant à arriver ailleurs.

Dans l’exemple ci-dessus, il semble que quelqu’un ait appuyé sur un logo de témoignage, s’attendant sûrement à une interaction. Gardez ce scénario à l’esprit lorsque vous examinez vos heatmaps des clics et recherchez des éléments non cliquables tels que des images, des titres ou des formes graphiques qui montrent des signes d’activité de clic et de rage click.

Si vous constatez ce type de comportement de l’utilisateur, vous aurez peut-être besoin de l’aide de votre service technique ou de développement, ou d’un développeur de logiciels voire d’un concepteur web qui pourra apporter quelques modifications visuelles pour différencier vos éléments cliquables des non cliquables, et ajouter des liens là où il n’y en avait pas auparavant.

4. Les utilisateurs sont-ils distraits par du contenu inutile ?

Lorsque plusieurs éléments de page web se disputent l’attention des visiteurs, ces derniers peuvent perdre de vue l’action la plus importante qu’ils doivent entreprendre.

Analysez les heatmaps de mouvement pour observer si l’activité du curseur est répartie sur toute la page au lieu de se concentrer sur les messages clés, les boutons d’appel à l’action et les liens. Vérifiez également si certaines zones de pages de produits ne reçoivent pas ou peu d’interaction. Vous devriez peut-être redistribuer votre contenu ou supprimer / remplacer du contenu qui occupe un espace précieux sur la page.

Avec la fonctionnalité Highlights de Hotjar, vous pouvez créer une “collection” de heatmaps, mettre en valeur un extrait de heatmap en particulier et le partager facilement avec vos coéquipiers ou collègues, les dirigeants et les parties prenantes, ce qui vous permet d’élaborer une analyse de rentabilité solide et de susciter l’adhésion des parties prenantes pour apporter des modifications à votre produit ou à vos pages de site web.

5. Les utilisateurs rencontrent-ils des problèmes d’un appareil à l’autre ?

Votre site web ou votre page produit peut être très différent pour les utilisateurs sur ordinateur et sur mobile. Un contenu important immédiatement visible sur ordinateur pourrait se retrouver bien en dessous de la ligne de flottaison d’un téléphone portable, où moins d’utilisateurs le voient. L’inverse pourrait être vrai : vos pages peuvent sembler très compactes et bien structurées sur mobile, mais clairsemées et mal organisées sur de très grands écrans.

Faites des comparaisons de trafic web de la même page sur les maps de défilement sur mobile et sur ordinateur de Hotjar pour voir si les visiteurs consomment plus / moins de contenu en fonction de l’appareil sur lequel ils se trouvent. Associez les maps de défilement aux heatmaps des clics pour voir si le comportement des clics change et si les visiteurs interagissent plus / moins / différemment sur ordinateur par rapport au mobile. 

Si vous constatez des différences flagrantes, l’étape suivante consiste à apporter des améliorations à l’expérience utilisateur ou à l’interface utilisateur, qu’il s’agisse de changements rapides ou d’une restructuration et d’une refonte complètes de vos pages pour une optimisation maximale.

5. Are people experiencing issues across multiple devices?

Your website or product page can look quite different across different devices.

Important content that is immediately visible on a desktop could end up well below the fold on a cell phone, where fewer users see it. Or the opposite could be true: your pages could look very compact and well-structured on a mobile device, but sparse and poorly organized on very large screens.

Make web traffic comparisons of the same page on mobile and desktop scroll maps to see if people are consuming more or less content depending on the device they're on. Pair scroll maps with click maps to see if clicking behavior changes, or if people interact differently on desktop versus mobile. 

If you spot any glaring differences, the next step is to make UX or UI improvements—from applying quick-win changes to completely restructuring and redesigning your page(s) for maximum optimization.

Super-charge your heatmap insights

In the process of analyzing heatmaps, you might find that they raise additional questions. For example, if you discover that people move their mouse around the page a lot but don’t click on anything, you will naturally want to find out why.

Super-charge your heatmap insights by combining them with other behavior and feedback tools that take you one step closer to understanding the why behind your users’ actions.