Comment utiliser les heatmaps pour améliorer votre site et l'expérience utilisateur

À l’aide d’un outil d’analyse du comportement des utilisateurs comme Hotjar, vous pouvez commencer à créer des heatmaps et à découvrir des informations précieuses sur les zones où les visiteurs concentrent leur attention, ce qui les intéresse et où ils restent bloqués.

Voyons cela de plus près.

Qu'est-ce qu'une heatmap et en quoi est-ce l'outil ultime d'optimisation de l'expérience utilisateur ?

Les heatmaps sont un outil puissant d’analyse et de visualisation des données, utilisant une représentation codée par couleur de valeurs allant du rouge au bleu. Elles permettent de voir facilement les zones les plus populaires (chaudes) et les moins populaires (froides) de vos pages web.

L’utilisation d’une heatmap vous livre une compréhension approfondie de la façon dont les internautes interagissent avec votre site web :

• Les clics

• Les défilements

• Les mouvements de la souris

L’analyse de la heatmap est l’étape qui suit, une fois que vous disposez de cette représentation visuelle des données d’interaction et de comportement des utilisateurs. Elle fait émerger des informations qui auront un impact sur tout changement, toute décision ou toute stratégie liés à l’expérience utilisateur. Donc, oui, vous pouvez accomplir beaucoup de choses lorsque vous créez une heatmap :

1. Testez et répétez : effectuez des tests A / B, mettez à jour ou (re)concevez votre site en vous basant sur des données et des faits concrets

2. Découvrez les bugs et les obstacles : étudiez en profondeur et corrigez un problème tel qu’un taux de conversion réduit

3. Obtenez une adhésion immédiate : persuadez les membres de l’équipe et les parties prenantes à l’aide de preuves visuelles pour une meilleure priorisation

Comment utiliser les heatmaps pour améliorer votre site et augmenter les conversions

Cela peut paraître simple, mais n’en doutez pas : vous porterez votre entreprise en ligne vers de nouveaux sommets en ajoutant des heatmaps à votre arsenal. Vous trouverez ci-dessous quelques conseils pratiques à mettre en pratique sans plus attendre si vous cherchez à améliorer l’expérience utilisateur de votre site.

Ajoutez du contexte à l’analyse du site web traditionnelle

Si vous êtes nouveau ici, vous vous demandez peut-être si Hotjar est destiné à remplacer les outils d’analyse traditionnels comme Google Analytics. Nous en profitons pour dire que non !

GA n’est pas seulement un favori. C’est aussi un leader du secteur. De nombreux utilisateurs, comme les marques de e-commerce et les équipes produit, l’utilisent pour obtenir des informations précieuses sur ce qui se passe sur leurs sites web, comme :

• Quelles sont les pages les plus populaires ?

• Combien de temps les internautes restent-ils sur nos pages produits ?

• Où les abandons ont-ils lieu ?

Mais Google Analytics est un outil spécialisé : il n’est pas censé tout faire pour tout le monde. L’une des choses qu’il ne peut pas faire est de révéler le comportement réel derrière l’utilisation. Et ça, c’est une tâche que vous pouvez confier à Hotjar.

Avec Hotjar Heatmaps en complément, vous pouvez creuser les chiffres GA et découvrir :

• Pourquoi notre taux de conversion baisse-t-il ?

• Les utilisateurs voient-ils le contenu important sur cette page d’accueil ?

• Pourquoi les visiteurs restent-ils bloqués ?

Une fois que vous avez identifié les zones de votre site web qui pourraient faire l’objet d’améliorations, utilisez les informations de vos heatmaps pour apporter des changements. Par exemple, supposons que les utilisateurs aient du mal à trouver un bouton ou un lien en particulier. Vous pouvez le déplacer à un endroit plus visible de la page web ou le faire ressortir davantage avec des couleurs vives ou d’autres éléments de conception.

Le plus beau, c’est que la collecte de connaissances sur les heatmaps du site web n’a vraiment rien de sorcier. Prenez une tasse de café et consacrez 20 minutes à l’étude des heatmaps : vous serez étonné de ce que vous y trouverez. Plus tard, vous pourrez afficher vos résultats dans un sprint et résoudre un problème avec votre équipe en un temps record.

Exploitez le bon type de heatmap pour atteindre différents objectifs

Pour vraiment comprendre vos utilisateurs, familiarisez-vous avec les différents types de heatmap et comment elles peuvent vous aider à mieux comprendre leur expérience.

Heatmap des clics

Une heatmap des clics montre où les utilisateurs cliquent avec leur souris sur ordinateur ou tapent avec leurs doigt sur mobile. La map affiche les éléments de page web les plus cliqués dans des tons plus chauds, c’est-à-dire rouge, orange et jaune.

Vous souhaitez savoir si les éléments clés tels que les appels à l’action (CTA), les liens et les boutons obtiennent des clics ou des appuis comme prévu. Vous pouvez répondre à des questions comme :

• Combien d’interactions reçoivent-ils ?

• Les visiteurs ignorent-ils une fonctionnalité du produit que vous aimeriez populariser ?

• Les liens fonctionnent-ils comme prévu ?

Cette enquête menée par les heatmaps des clics vous permet :

• De suivre l'efficacité des principaux CTA

• De repérer les zones où des problèmes de navigation peuvent se poser

• D’identifier et de supprimer les éléments / zones qui causent des frictions

De plus, vous pouvez apporter des modifications à la conception et offrir des résultats rapides aux clients et à vos équipes, ou utiliser des informations visuelles pour justifier la nécessité d’une étude approfondie sur les utilisateurs.

Maps de défilement

Si vous souhaitez savoir jusqu’où les utilisateurs font défiler des pages spécifiques, la map de défilement est votre meilleure alliée. Ce type de heatmap du site web vous aide à visualiser le comportement de défilement de vos visiteurs.

En règle générale, le code couleur de la map de défilement passe progressivement du plus chaud au plus froid. Ces couleurs représentent le pourcentage d’utilisateurs qui ont fait défiler chaque partie de votre page, les zones en haut étant les plus “chaudes”.

Cette caractéristique des maps de défilement en fait l’un des meilleurs outils d’analyse à utiliser lorsque vous procédez à une optimisation du taux de conversion (CRO).

Maps de mouvement

Au lieu de suivre les clics de souris, les maps de mouvement suivent les mouvements de la souris, l’endroit où les utilisateurs sur ordinateur déplacent leur souris en naviguant sur une page. Les points chauds en particulier vous indiquent les zones qu’ils survolent. La recherche suggère un lien entre les zones que les visiteurs regardent et l’emplacement de leur curseur, ce qui pourrait vous indiquer des zones à forte attention et, à l’inverse, à faible interaction.

Consultez les maps de mouvement pour vérifier si l’activité du curseur est répartie sur toute la page au lieu de se concentrer sur les messages clés, les boutons CTA et les liens. Plusieurs éléments de la page pourraient se disputer l’attention des visiteurs. Si c’est le cas, vous devrez réorganiser les éléments ou créer des slogans efficaces pour attirer l’attention des utilisateurs sur les éléments et le contenu qui favorisent la conversion.

Découvrez comment les utilisateurs se comportent sur vos pages clés

Organisez votre analyse centrée sur l’utilisateur en examinant les heatmaps de certaines pages, notamment :

• La page d'accueil

• Les pages de destination

• Les pages les plus visitées

• Les pages peu performantes

• Les nouvelles pages

Abordons quelques autres exemples et scénarios de heatmap du site web basés sur certains des regroupements ci-dessus :

La page d'accueil

Vous savez déjà que les conversions peuvent être affectées négativement lorsqu’un visiteur qui arrive sur votre page la quitte sans consulter la partie inférieure. Mais qu’en est-il si vous avez mis votre contenu important au-dessus de la ligne de flottaison et qu’il ne se passe toujours rien ?

Nous en avons fait nous-mêmes l’expérience il y a quelques années, après avoir placé une vidéo au-dessus de la ligne de flottaison de notre page d’accueil. En consultant une heatmap des clics, nous avons remarqué que les visiteurs ne cliquaient pas pour regarder la vidéo. En fait, la vidéo n’a obtenu que trois clics sur les 7 000 clics enregistrés ! 😬

Les données visuelles indiquaient ce qui devait être corrigé sur notre site web. Nous avons donc décidé de créer et d’effectuer des tests A / B sur un ensemble de pages d’accueil, dont beaucoup ne montraient plus de vidéo au-dessus de la ligne de flottaison, afin de résoudre le problème.

Les pages de destination

Supposons que la Marque X publie un formulaire de capture de prospects, une page de destination autonome conçue pour collecter des informations sur les prospects. Depuis, elle n’a généré que très peu de conversions (inscriptions).

À l’aide d’une map de mouvement, ils découvrent que la zone où le formulaire est placé n’a que peu ou pas d’activité de la part des utilisateurs. Ce constat les amène à repenser la page de destination, à réduire le nombre de champs de formulaire, à augmenter leur taille, à ajouter une image à gauche et à rendre le message principal plus lisible. Problème résolu !

Les pages peu performantes

Les heatmaps révèlent aussi si le contraire se produit pour les pages que vous espérez voir bien fonctionner, comme la page de tarification. Si vous observez qu’après avoir passé beaucoup de temps sur cette page, les visiteurs naviguent vers la page des cas d’étude, il convient de réfléchir à la façon de les aider dans leur prise de décision. L’ajout de témoignages clients à la page de tarification serait la prochaine étape logique pour augmenter les conversions.

Examinez les problèmes sur tous les appareils

Enregistrez les heatmaps sur ordinateur et mobile afin de comparer la distance de défilement des utilisateurs sur différents appareils. Ainsi, les équipes de e-commerce, de marketing ou de produits peuvent :

• Déterminer si les visiteurs consomment plus ou moins de contenu en fonction de l'appareil

• Associez des maps de défilement avec des heatmaps de clics pour comparer le comportement des utilisateurs en matière de clics et d'interaction avec les pages sur ordinateur et mobile

• Proposer en toute confiance les changements nécessaires 

Dans l’esprit de la collaboration interfonctionnelle, vous pouvez alors travailler main dans la main avec votre UX designer pour appliquer des changements rapides ou restructurer et reconcevoir complètement les pages.

Complétez les autres outils d'analyse comportementale dans Hotjar

Les heatmaps ne sont qu’un outil parmi d’autres pour comprendre comment les utilisateurs interagissent avec votre site web. Nous avons déjà mentionné le combo de puissance Hotjar et Google Analytics. Pour obtenir un aperçu complet du comportement des utilisateurs, vous devez également prendre en compte d’autres sources de données quantitatives et qualitatives, telles que les analyses de sites Web autres que GA et le feedback des utilisateurs.

Envie de savoir comment combiner les heatmaps et les highlights ? Regardez cette vidéo :

Visualisez le comportement des utilisateurs avec des heatmaps

Les heatmaps offrent une représentation visuelle de l’ensemble des données sur le comportement des visiteurs. Elles complètent également divers outils d’analyse, y compris les outils traditionnels comme Google Analytics et ceux centrés sur le client comme Hotjar Recordings et Feedback.

Ne perdez pas de temps et commencez à maximiser les heatmaps en suivant les conseils et astuces pratiques partagés dans cet article. Et si vous avez besoin de créer et de lancer une heatmap des clics, une map de défilement ou une map de mouvement maintenant, ne cherchez pas plus loin que Hotjar.