Apprendre / Guides / Le guide des heatmaps
5 exemples réels de heatmaps et comment utiliser chaque type de heatmap
Le mot Heatmaps est un terme générique qui désigne des représentations visuelles codées par couleur des interactions des utilisateurs avec une page en ligne. Des connaissances très différentes se cachent derrière chaque type de heatmap.
Dans ce chapitre du guide Heatmaps, nous allons examiner cinq exemples de heatmaps et comment les utiliser pour améliorer votre site.
1. Les maps de défilement
2. Les heatmaps des clics
3. Les maps de mouvement
4. Les maps de zones d’engagement
5. Les maps de rage clicks
Inscrivez-vous gratuitement à Hotjar, ajoutez le code de suivi et commencez à utiliser les heatmaps pour améliorer votre site ou votre produit.
1. Les maps de défilement montrent le contenu important ignoré
La heatmap ci-dessus est une map de défilement, qui montre jusqu’où les visiteurs font défiler la page. Elle se trouve sur l’ancienne page Carrières de Hotjar pour voir comment les candidats potentiels interagissent avec le contenu.
Ce que la map de défilement a mis en évidence
Lorsque vous regardez la map de défilement, vous pouvez immédiatement repérer deux changements de dégradé de couleurs très nets : un en haut de la page (du rouge au jaune) et l’autre aux trois quarts de la page (du vert au bleu foncé). Dans une map de défilement, on s’attend généralement à ce que les couleurs deviennent progressivement plus froides. Un changement brutal est le signe qu’un pourcentage élevé d’utilisateurs a cessé de faire défiler la fait après avoir atteint un point précis.
Concentrons-nous sur le changement du vert au bleu en bas de page. En considérant la disposition du contenu, nous pouvons émettre deux hypothèses :
Les visiteurs pensent que la page se termine au niveau de la section “offres d’emploi actuelles”, et quittent la page.
Les candidats potentiels sont intéressés par les postes à pourvoir et cliquent pour passer à la page suivante
Quoi qu’il en soit, le bas de la page n’est vu que par environ 20 % des visiteurs.
La note de 5 sur 5 attribuée à Hotjar sur Glassdoor (qui est bien au-dessus de la moyenne) est un excellent élément de preuve sociale pour les candidats potentiels. Mais 80 % des internautes qui consultent la page ne le sauront jamais.
Que nous apprend une map de défilement dans ce cas d’utilisation ?
Les données de la heatmap ont montré que 80 % des visiteurs n’ont pas atteint le bas de la page web et n’ont pas vu la section de la preuve sociale.
Ces informations exploitables nous ont amenés à raccourcir (considérablement) la page et à placer les témoignages des employés plus haut, juste en dessous de la ligne de flottaison.
À présent, 75 % des visiteurs voient la section des témoignages et 69 % atteignent le bas de la page !
💡Conseil de pro : nous avons combiné les données numériques de Heatmaps avec les informations qualitatives de Hotjar Feedback pour apporter encore plus d’améliorations à la page.
Par exemple, un utilisateur a signalé qu'il ne pouvait pas filtrer les ouvertures par rôle ou par lieu. Nous avons donc ajouté cette option :
Les connaissances sur l’utilisateur sont une mine d’or pour votre site, produit ou service.
2. Les heatmaps des clics révèlent que les utilisateurs ignorent une vidéo
La heatmap ci-dessus est une map de clics ou heatmap des clics, et montre le nombre de clics de l’utilisateur sous la forme d’une palette de couleurs claires (peu de clics) ou foncées (plus de clics). Elle se trouve sur la nouvelle version de notre page “Carrières” pour étudier l’interaction avec les principaux éléments.
Ce que la heatmap des clics a mis en évidence
Dans le cadre de la refonte de la page “Carrières”, nous avons inclus une vidéo dans la section “Témoignages” en haut de la page. Nous avons supposé que les visiteurs seraient impatients de voir à quoi ressemblait notre dernière réunion d’entreprise et de cliquer sur le bouton “lire”. Sauf qu’ils ne l’ont pas fait.
Ce bouton isolé est resté en grande partie non cliqué, avec seulement 2 clics sur 3 300 sessions (soit un taux de clics de 0,02 CTR).
Que nous apprend une heatmap des clics dans ce cas d’utilisation ?
La heatmap des clics a fourni un point de données intéressant sur notre hypothèse selon laquelle les utilisateurs préfèrent regarder la culture Hotjar en action plutôt que de lire à ce sujet.
Cette simple analyse de données nous a permis de formuler deux hypothèses pour expliquer pourquoi les visiteurs ne lisent pas la vidéo :
Cela ne les intéresse pas
Ils ne s’aperçoivent pas qu’il s’agit d’une vidéo et que le bouton est cliquable
Pour valider ces hypothèses, nous pourrions mettre en place un test A / B pour modifier la mise en page ou le contenu de cette section afin d’améliorer l’expérience utilisateur.
💡Conseil de pro : mener des entretiens avec Hotjar Engage pourrait également nous aider à obtenir le feedback direct des utilisateurs sur les raisons pour lesquelles ils ne cliquent pas sur la vidéo. Cette étape préliminaire de recherche sur le produit permettrait de déterminer le type de changement à apporter à la section avant de mettre en place une expérience.
3. Les maps de mouvement montrent où les utilisateurs déplacent leur souris
La heatmap ci-dessus est une map de mouvement ou heatmap de suivi de la souris, qui montre les mouvements de la souris lorsque les utilisateurs naviguent sur une page. Inconsciemment ou non, les yeux des utilisateurs suivent les mouvements de la souris lorsqu’ils cliquent et survolent les différents éléments de la page. Les maps de mouvement pourraient donc servir de technologie fiable de suivi des yeux.
Ce que la map de mouvement a mis en évidence
Placée sur notre guide Heatmaps, la map de mouvement indique ce qui retient l’attention des lecteurs sur le contenu long. Notons que les longs blocs de texte n’arrivent pas à capter l’attention des lecteurs, comme l’indique la palette de couleurs plus claires plus bas dans le paragraphe :
Que nous apprend une map de mouvement dans ce cas d’utilisation ?
Étant donné que peu de visiteurs ont déplacé leur souris sur le bas de cette section de texte, on peut supposer que la majorité d’entre eux commencent à lire, mais finissent par écrémer.
Cela nous indique que :
1. Le contenu lui-même n’est pas assez captivant, ou
2. Les visiteurs obtiennent l’information dont ils ont besoin au début de la section
Dans le premier cas, nous devons changer le texte pour rendre la lecture jusqu’à la fin plus attrayante. La deuxième option indique que nous avons réussi à donner au lecteur ce qu’il voulait dès le départ, auquel cas nous devrions envisager de raccourcir la section.
Mais avant de prendre une décision, nous devrons peut-être comprendre le contexte de ce comportement et valider notre hypothèse . Dans ce cas, la map de mouvement est un excellent point de départ pour une recherche plus avancée et approfondie.
💡Conseil de pro : une enquête de feedback sur le contenu peut également nous aider à déterminer si les lecteurs sont satisfaits du contenu de la page, ce qui pourrait manquer, ou si la mise en page ne leur plaît pas.
4. Les maps de zones d'engagement montrent les interactions des utilisateurs avec la page
Les maps de zone d’engagement combinent des ensembles de données provenant des clics, des mouvements et des défilements sur ordinateur, ou des appuis et des défilements sur mobile et tablette, en une seule vue. L’outil d’analyse de heatmaps par excellence pour la visualisation des données.
Ce que les zones d'engagement ont mis en évidence
Lorsque l’on examine la section “Témoignages” de notre page “À propos de nous”, l’outil de Heatmap montre que les utilisateurs interagissent avec les cartes (super !).
Le logo Glassdoor et l’élément “Employé actuel de Hotjar” suscitent le plus d’engagement, comme si les utilisateurs voulaient cliquer pour voir l’avis sur Glassdoor... Mais aucun de ces composants n’est cliquable (oups).
Pire : le CTA “Lire l’avis”, qui est cliquable, est totalement ignoré (re-oups).
Que nous apprennent les zones d'engagement dans ce cas d'utilisation ?
Le comportement des utilisateurs sur cette section indique qu’ils souhaitent vérifier l’authenticité des avis Glassdoor. Après tout, il serait juste de supposer qu’une entreprise qui ne renvoie pas aux témoignages les a simplement inventés.
Nous ne voulons certainement pas que les utilisateurs aient cette impression, d’autant plus que nous faisons un lien vers les critiques sur Glassdoor.
Les maps des zones d’engagement ont mis en évidence une source potentielle de méfiance. Grâce à ces informations exploitables, nous pouvons revoir la conception de nos cartes de témoignage pour améliorer en toute confiance l’expérience utilisateur en :
Rendant le logo Glassdoor et l'élément en bas à gauche cliquables, et / ou
Rendant le CTA "Lire l'avis" plus visible
💡Conseil de pro : avant d’apporter des modifications, nous pourrions utiliser une enquête de test de concept pour effectuer un test de préférence et évaluer lequel des deux modèles (ou plus) trouverait le plus d’écho auprès des utilisateurs.
Exemple de test de préférence pour le logo Hotjar
5. Les maps de rage clicks permettent de localiser exactement où les utilisateurs se sentent frustrés sur la page
produisent sur une page. Les rage clicks sont des signes essentiels de la frustration des utilisateurs. Ils indiquent des frictions qui pénalisent les taux de conversion.
Ce que la map de rage clicks a mis en évidence
Lorsque vous regardez le tableau de tarification, un élément sort du lot dans le modèle de rage clicks : les fonctionnalités incluses dans chaque plan.
Cela suggère que les utilisateurs ne comprennent pas ce que ces fonctionnalités signifient ou qu’ils aimeraient avoir plus de détails. Les utilisateurs peuvent s’attendre à ce que chaque fonctionnalité renvoie à une explication, sur la même page ou sur une page différente.
Que nous apprend une map de rage clicks dans ce cas d'utilisation ?
Le modèle de rage clicks sur cette page nous indique que les tableaux de notre page de tarification ont besoin d’être retravaillés pour améliorer l’expérience utilisateur. Voici quelques options :
Rendre les bulles d'information plus visibles
Afficher le contenu des bulles d'information lorsque l'utilisateur survole le texte (et pas seulement les bulles)
Remplacement des bulles d'information par un élément déroulant
Renommer les fonctionnalités pour les rendre plus explicites
Ajouter un lien vers les fonctionnalités pour renvoyer les utilisateurs plus bas dans la page, où ils trouveront une explication plus détaillée
En identifiant les objets de frustration des utilisateurs, la map de rage clicks a fourni des axes d’amélioration de l’expérience utilisateur. Nous pouvons désormais faire des tests A / B sur les changements qui ont le plus d’impact sur nos utilisateurs.
💡Conseil de pro : les maps de rage clicks peuvent également mettre en évidence les clics “morts” sur votre page. Si vous remarquez un indicateur de rage click sur un bouton CTA ou un lien hypertexte, cela peut vouloir dire que les utilisateurs ne peuvent pas cliquer sur ce lien. Votre taux de conversion est sûr de baisser en conséquence, donc :
Consultez la page en direct
Gardez un œil sur les taux de conversion dans Funnels
Regardez les enregistrements de session filtrés par “erreurs” sur cette page
S’il y a effectivement un clic “mort” sur la page, corrigez-le et faites décoller vos métriques comme une fusée ! 🚀
Obtenez plus d'informations avec les différents types de heatmaps
Maintenant que vous savez comment utiliser chaque type de heatmap, plus rien ne vous empêche de recueillir des informations exploitables sur le comportement des utilisateurs. Commencez à collecter des données pour améliorer l’expérience utilisateur sur votre site et augmenter les conversions.
Inscrivez-vous gratuitement à Hotjar, ajoutez le code de suivi et commencez à utiliser les heatmaps pour améliorer votre site ou votre produit.
