Utiliser les heatmaps pour améliorer l'expérience utilisateur de votre site web : 5 façons de commencer

L'indice est dans le nom : l'expérience utilisateur (UX) est axée sur l'utilisateur. Il est donc logique que plus vous vous concentrez sur l'utilisateur lorsque vous collectez des données sur votre site web. Mieux vous serez équipé, mieux vous pourrez effectuer des optimisations qui répondent aux besoins de vos utilisateurs.

Vous avez sans doute déjà quelques indices sur le comportement de l'utilisateur à partir des données d'analyse traditionnelle de l'expérience utilisateur (par exemple le taux de rebond, les pages vues et les conversions). Mais comment savoir ce qu'il faut corriger en premier lorsque vous repérez un problème ? Et par où commencer lorsque vous cherchez à augmenter les conversions ?

Si vous êtes un UX designer, un développeur ou un marketer et que vous cherchez à améliorer l'expérience utilisateur, les heatmaps peuvent vous aider à collecter des données sur les interactions des internautes avec votre site web, afin que vous puissiez utiliser ces informations pour améliorer l'expérience utilisateur et les métriques qui comptent pour votre entreprise.

Qu'est-ce qu'une heatmap ?

Une heatmap (ou carte thermique) est une visualisation de données qui montre comment les utilisateurs d'un site web cliquent, se déplacent et font défiler la page. La partie "heat" du nom provient de l'échelle de couleurs : le rouge représente les zones populaires (chaudes) de la page et le bleu les zones moins populaires (froides).

Vous pouvez collecter des données de heatmap sur n'importe quelle page d'un site web, sur ordinateur ou sur mobile, et les visualiser de différentes manières :

• Les heatmaps de clics mettent en évidence les endroits où les utilisateurs cliquent avec la souris (ou appuient sur mobile)

• Les heatmaps de défilement mettent en évidence les endroits où les utilisateurs font défiler la page

• Les heatmaps de mouvement mettent en évidence les mouvements de souris des utilisateurs (sans clic)

Vous voulez voir une heatmap en action ? Jouez avec la démo Hotjar Heatmaps pour vous familiariser avec l'outil. Passez d'un type de heatmap à l'autre dans la barre latérale de droite pour voir les différentes informations que vous pouvez tirer de chacun d'eux.

5 façons d'utiliser les heatmaps pour évaluer l'expérience utilisateur

Si une image vaut mille mots, une heatmap vaut mille idées. Pour commencer, voici cinq façons d'utiliser différents types de heatmap pour collecter des données sur l'expérience utilisateur, valider vos idées et repérer des axes d'optimisation.

1. Présentez vos conceptions les plus performantes

Vos pages web sont peut-être superbes en elles-mêmes, mais les heatmaps vous permettent de montrer à vos clients et collègues à quel point elles sont performantes.

Les heatmaps sont très faciles à comprendre en un coup d'œil et peuvent vous aider à expliquer votre travail à des non-designers, vous permettant d'obtenir un soutien important pour des propositions de refonte de site web ou de présenter vos projets réussis de conception sur l'expérience utilisateur. Cet impact est particulièrement utile si vous souhaitez que vos pages soient plus performantes.

Chez Spotahome, une plateforme en ligne de location de biens immobiliers à moyen et long terme, Sara Parcero-Leites, Customer Knowledge Manager, utilise des heatmaps pour s'assurer que son équipe est consciente des domaines de l'expérience utilisateur à améliorer.

Lors des " soirées " Hotjar organisées régulièrement, Sara présente 3 ou 4 heatmaps intéressantes, ainsi que des informations provenant d'autres outils Hotjar, afin de susciter la discussion et de collaborer à la recherche de solutions.

Sara nous a dit que la plupart des développeurs et des product managers n'avaient jamais vu les utilisateurs interagir avec les fonctionnalités qu'ils avaient créées avant qu'elle ne commence à organiser ces soirées et à leur montrer des preuves visuelles comme des données de heatmap. Maintenant, ils quittent chaque soirée avec des informations révélatrices et de nombreux bugs à corriger.

2. Trouvez les CTA les plus (et les moins) cliqués

Les CTA (appels à l'action) sont des incitations à l'action de l'utilisateur (généralement, des boutons ou des liens) et peuvent être spécifiquement conçus pour attirer les clics afin d'augmenter les inscriptions ou les ventes.

Les heatmaps de clics indiquent les CTA les plus cliqués et ceux qui sont ignorés. Vous pouvez constater que d'autres éléments de la page empêchent les utilisateurs de voir votre CTA principal, ou vous pouvez identifier une opportunité de tester un nouveau CTA dans une zone qui attire plus d'engagement de la part des utilisateurs.

Voici un exemple : en présentant les outils Hotjar à son équipe, Conan Heiselt, UX designer de l'entreprise de logiciels Techsmith, a découvert que les utilisateurs n'interagissaient pas comme prévu avec les CTA des produits. Cette révélation a été faite en consultant une heatmap des clics.

Après avoir appliqué une heatmap des clics à leur page de services, Conan et son équipe ont constaté que de nombreux utilisateurs ignoraient les boutons de texte des CTA et préféraient cliquer sur les images des produits, si bien qu'ils ont décidé de rendre l'ensemble de la zone cliquable lors d'une refonte. Les preuves visuelles concrètes recueillies à partir d'une seule heatmap des clics ont permis à son équipe d'offrir aux utilisateurs une expérience plus intuitive.

3. Mesurez la distance de défilement des utilisateurs

Tous les utilisateurs qui arrivent sur votre site web ne font pas défiler la page jusqu'en bas, ce qui signifie qu'ils risquent de passer à côté d'informations importantes. Les internautes visitent également votre site à partir d'appareils et de navigateurs différents, ce qui explique qu'ils ne voient pas tous les mêmes informations au-dessus de la ligne de flottaison (la partie de la page immédiatement visible sans défilement).

Les outils de heatmap de défilement peuvent vous montrer où se trouve la ligne de flottaison moyenne sur mobile et sur ordinateur, pour que vous puissiez placer les informations essentielles et les CTA à l'endroit où ils sont le plus vus. Vous pouvez également savoir jusqu'où les utilisateurs font défiler la page et déplacer les éléments vers le haut de la page pour qu'ils soient vus par un plus grand nombre de personnes.

N'oubliez pas que vous n'avez pas besoin de regarder les données de défilement seules : comparez vos heatmaps de clics et heatmaps de défilement pour obtenir une image complète de l'endroit où vous perdez l'attention de l'utilisateur.

Et avec Hotjar, vous n'avez pas besoin de basculer frénétiquement entre deux ou trois heatmaps : la map de la zone d'engagement est optimisée pour combiner les données de clics, de déplacement et de défilement en une seule vue afin que vous puissiez voir les parties de votre page avec lesquelles les utilisateurs s'engagent le plus.

4. Repérez les clics problématiques

Il arrive que les utilisateurs cliquent sur des éléments (par exemple, des images ou des titres) qu'ils considèrent comme des liens. Il peut s'agir de clics erronés, mais les heatmaps collectent des données auprès d'un nombre suffisant d'utilisateurs pour ne pas tenir compte des anomalies et vous montrer les schémas de clics communs à l'ensemble de votre audience.

En examinant une heatmap des clics, vous pouvez repérer les clics erronés et résoudre le problème en ajoutant des liens à cet endroit ou en modifiant des éléments sans importance pour les rendre moins cliquables.

Vous pouvez même trouver des bugs de site web ou des erreurs de conception qui frustrent vos utilisateurs et les poussent à quitter votre site. Il existe une heatmap spécialisée pour visualiser ce phénomène : les maps de rage click de Hotjar permettent de découvrir les éléments qui causent des frictions en montrant où les utilisateurs cliquent de manière répétée sur une courte période de temps. C'est l'outil idéal auquel vous pouvez faire appel si vous voulez éviter d'énerver les utilisateurs pendant leur expérience.

5. Optimisez pour le mobile et l'ordinateur

La conception web réactive (les pages qui s'adaptent à l'écran de l'utilisateur) est un moyen rapide et efficace de fournir du contenu à tous vos utilisateurs, mais vous devez garder à l'esprit que ce qui prend la forme de quelques lignes sur ordinateur peut nécessiter beaucoup de défilement sur mobile.

Comparez les heatmaps sur mobiles et sur ordinateur pour repérer toute différence de comportement et voir si les utilisateurs de l'application mobile manquent des CTA importants ou d'autres éléments. Il se peut que vous deviez concevoir des interfaces conviviales différentes pour mobile et ordinateur afin de garantir une bonne expérience utilisateur sur tous les appareils.

L'utilisation de heatmaps pour optimiser les pages pour plusieurs appareils a considérablement augmenté les conversions pour Materials Market, un site web qui met en relation des fournisseurs de matériaux de construction avec des clients dans tout le Royaume-Uni.

Le PDG Andrew Haehn a utilisé une heatmap de défilement Hotjar et s'est rendu compte que très peu d'utilisateurs mobile faisaient défiler la page suffisamment loin pour voir le CTA principal. Son équipe a redessiné le bouton et l'a placé plus haut sur la page. Ce simple changement a contribué à une augmentation de 1,1 % du taux de conversion, générant plus de 10 000 £ de chiffre d'affaires annuel supplémentaire.

Utilisez les heatmaps avec d'autres outils d'expérience utilisateur

Les données des heatmaps sont impressionnantes et vous donneront beaucoup d'informations en elles-mêmes, mais vous en tirerez davantage en les combinant avec d'autres outils d'analyse, de feedback et de conception sur l'expérience utilisateur. Examinons quatre exemples :

1. Heatmaps + analyse traditionnelle

Les outils d'analyse web traditionnelle (comme Google Analytics) vous donnent de nombreux points de données quantitatives comme les pages vues, les sources de trafic et les taux de rebond, mais ils ne peuvent pas expliquer le pourquoi, ni même le comment de ce qui se passe.

En combinant les analyses traditionnelles avec l'analyse des heatmaps, vous pouvez éliminer une partie de l'incertitude et découvrir pourquoi vos métriques se produisent. Vous avez une page très fréquentée qui ne convertit pas ? Configurez une heatmap et commencez à voir ce qui incite les visiteurs à partir.

Vous pouvez faire passer votre analyse de heatmap au niveau supérieur avec Hotjar Trends. Créez une heatmap pour analyser le comportement de l'utilisateur avant et après le lancement ou la refonte d'une page, puis passez directement de la heatmap aux graphiques pour voir comment l'engagement évolue dans le temps.

2. Heatmaps + enregistrements de sessions

Un enregistrement de session (ou rediffusion de session) est un rendu de la session de navigation d'un utilisateur qui vous permet d'observer les actions d'un seul utilisateur (anonymisé) sur plusieurs pages.

Si les heatmaps vous aident à visualiser les données de tous vos utilisateurs en même temps, les enregistrements sont créés pour chaque utilisateur individuel. Au lieu de faire des suppositions sur les clics et les défilements que vous voyez sur une heatmap, essayez de visionner quelques enregistrements de sessions pour voir comment de vraies personnes interagissent avec la page.

Supposons que vous découvriez une interaction utilisateur préoccupante au cours d'un enregistrement de session et que vous souhaitiez savoir s'il s'agit d'un incident isolé ou d'un problème de fonctionnalité plus répandu. La fonctionnalité de zoom arrière de Hotjar vous permet de visualiser l'enregistrement d'un utilisateur en difficulté, puis de passer directement à la heatmap de cette page pour voir si d'autres utilisateurs rencontrent le même problème.

Pour vous donner un exemple concret, voyons comment l'association de Hotjar Recordings et Heatmaps ont aidé l'agence de conception sur l'expérience utilisateur digitale Turum-burum à augmenter le taux de conversion du magasin de chaussures Intertop de 55 %.

Les enregistrements de sessions ont d'abord révélé que les clients rencontraient des problèmes avec les filtres de produits d'Intertop. Ils naviguaient à travers un grand nombre de pages pour trouver leur pointure.

Après avoir analysé une heatmap de clics, l'équipe de Turum-burum a constaté que de nombreux utilisateurs cliquaient sur "tout afficher" lorsqu'ils recherchaient un produit parce qu'ils ne disposaient pas des filtres nécessaires pour trouver ce qu'ils cherchaient.

Grâce aux informations tirées des enregistrements de sessions et des heatmaps, Turum-burum a pu optimiser sa fonctionnalité de filtrage en identifiant et en hiérarchisant des catégories de produits claires, un élément de navigation essentiel dans l'expérience d'achat e-commerce. L'amélioration apportée par Turum-burum a conduit à une meilleure expérience utilisateur et à une augmentation des ventes pour leur client.

3. Heatmaps + feedback sur la page

Les données quantitatives (numériques) sont extrêmement importantes pour prendre des décisions sur l'expérience utilisateur fondées sur des données, mais ne négligez pas la valeur des données qualitatives (non numériques).

Après avoir utilisé les heatmaps pour révéler les problèmes de conception sur des pages spécifiques du site, demandez à vos utilisateurs un feedback sur l'expérience utilisateur sur chaque page pour savoir ce qu'ils pensent qu'il manque ou ce que vous devriez changer pour les aider à atteindre leurs objectifs.

Le feedback sur le site web ne doit pas nécessairement perturber les utilisateurs : une simple enquête à une question, non intrusive, peut suffire à lancer des améliorations sur l'expérience utilisateur auxquelles vous n'aviez pas pensé.

En plus des connaissances sur les heatmaps de clics qui ont conduit l'éditeur de logiciels Techsmith à améliorer l'expérience utilisateur en repensant les CTA de ses produits, l'UX designer Conan Heiselt a également utilisé les enquêtes Hotjar pour mieux comprendre les besoins de ses clients.

Avec une simple enquête sur la page, Conan a posé une question ouverte aux utilisateurs qui ont complété certaines interactions : "Quelle est votre plus grande frustration avec cette page ?" Il a pu recueillir suffisamment de réponses pour identifier 15 thèmes généraux et commencer à passer à l'action pour répondre aux besoins spécifiques des utilisateurs.

Si vous n'avez pas assez de temps pour préparer un rapport de recherche approfondi et exploitable sur l'expérience utilisateur comme celui de Conan, essayez AI for Surveys de Hotjar et découvrez comment il génère un rapport automatisé avec des informations clés et des suggestions d'étapes suivantes basées sur le feedback réel de vos utilisateurs.

4. Heatmaps + tests A/B

Les données des heatmaps et les tests A/B vont de pair : vous pouvez utiliser les données des heatmaps pour élaborer une hypothèse de test et vous pouvez exécuter des heatmaps sur les variations des tests A/B pour recueillir des données utiles sur les raisons du succès (ou de l'échec) d'une variation de page.

Par exemple, les UX designers de l'entreprise de conception de bannières Bannersnack utilisent des heatmaps sur les principales pages de destination pour recueillir des preuves de la façon dont les visiteurs interagissent avec elles. Sur la base de ces données, l'équipe crée une autre conception et effectue des tests A/B sur l'ancienne et la nouvelle version. Lors d'un test, Bannersnack a augmenté les inscriptions de 25 % en combinant l'analyse des heatmaps et les tests A/B.

Comment commencer avec les heatmaps

Un outil de heatmaps du site web comme Hotjar est très facile à utiliser : il suffit d'ajouter des scripts de suivi. Vous pouvez configurer une heatmap en quelques minutes seulement et les données commenceront à être collectées chaque fois qu'un utilisateur visitera votre site web.

Que vous utilisiez les heatmaps pour présenter votre travail, augmenter les conversions ou trouver des idées pour de nouveaux tests, les informations inestimables que vous obtiendrez de ces graphiques aux couleurs de l'arc-en-ciel donneront probablement à votre approche de l'expérience utilisateur le coup de fouet dont elle a besoin pour faire passer votre travail à l'étape suivante.