Heatmaps 101 : Le héros indispensable de tout UX designer
Les heatmaps et les enregistrements de sessions sont devenus l’un des sujets les plus brûlants dans le débat au sein de la communauté du design. Alors que certains professionnels s’interrogent sur l’aspect confidentialité, d’autres estiment que le fonctionnement du heatmapping respecte parfaitement la vie privée et la sécurité des données des utilisateurs.
Cependant, il y a un point sur lequel tout le monde s’accorde : la valeur que vous (le designer UX) retirez de l’utilisation d’un outil de heatmapping.
Aujourd’hui, je veux que nous explorions ensemble ce sujet et comprenions comment vous pouvez utiliser les heatmaps pour améliorer la façon dont vous concevez les expériences utilisateur.
Vous voulez plus de The CPO Club ?
Inscrivez-vous gratuitement pour terminer la lecture de cet article :
Have an account? Log In
Que sont les heatmaps ?
Les heatmaps sont des outils de suivi et de visualisation des données qui vous permettent de comprendre comment votre audience cible interagit avec votre produit ou votre site web.
Les heatmaps sont des cartes en deux dimensions qui mettent en évidence certaines parties de la zone à l’aide de couleurs spécifiques pour transmettre des informations pertinentes. Par exemple, la ville d’Helsinki a récemment lancé une carte en temps réel qui montre quelles parties de la ville sont les plus fréquentées.
Pour visualiser le nombre de personnes dans certains quartiers, ils ont créé une heatmap de la ville.
Plus il y a de personnes dans une zone spécifique de la ville, plus elle est affichée « chaude » sur la carte. Si aucune zone n’est surlignée, alors le quartier concerné n’est pas fréquenté.
En tant qu’outils de visualisation, les heatmaps sont assez polyvalents. Ainsi, au-delà de la visualisation des « points chauds » sur une carte physique (comme dans l’exemple d’Helsinki ou les cartes météo que nous voyons à la télévision), vous pouvez aussi les superposer à votre interface utilisateur.
Dans ce cas, vous pouvez mettre en avant les zones de votre interface où il y a le plus d’interactions utilisateurs. Vous pouvez alors coupler cela avec des enregistrements de sessions pour analyser de façon approfondie le parcours utilisateur et effectuer des recherches UX qui vous aideront à :
- Obtenir des informations précieuses sur la manière dont les utilisateurs interagissent avec votre site Web ou votre application mobile.
- Comprendre ce que vous pouvez faire pour mieux capter l’attention de vos utilisateurs.
- Identifier de nouvelles opportunités d’optimisation de votre UX et d’amélioration de vos indicateurs clés (augmentation du taux de conversion, du taux de clics sur vos boutons d’appel à l’action, etc.).
Ainsi, les heatmaps sont un excellent outil à la fois pour les designers UX et les chefs de produit afin d’étudier la façon dont les utilisateurs interagissent avec leurs produits et de les améliorer.
Outils de heatmap populaires
Voyons maintenant comment vous pouvez créer une heatmap pour votre produit. Le web regorge d’outils d’analytique capables de suivre les interactions utilisateurs sur votre interface et de mettre en avant les éléments qui attirent le plus l’attention.
Les plus connus sont Hotjar, Mouseflow, Fullstory, Crazy Egg, et d’autres encore.
Mais je ne souhaite pas entrer plus en détail dans ce sujet, puisque nous avons déjà une liste sélectionnée d’outils de heatmap à consulter.
4 types principaux de heatmaps pour les designers produit
Ce que nous appelons « heatmap » n’est pas un type unique d’information visuelle que vous utilisez pour analyser votre UX. Au contraire, « heatmap » est un terme générique pour plusieurs outils visuels qui fonctionnent suivant le même principe général : mettre en avant certaines zones de votre interface à l’aide de couleurs différentes.
Je ne souhaite pas passer en revue tous les types de heatmaps, car beaucoup d’entre eux s’avèrent inutiles pour les designers produit et UX. À la place, regardons les quatre types qui se sont révélés les plus utiles selon mon équipe de design.
1. Cartes de clics
Les cartes de clics sont probablement la première chose qui vous vient à l’esprit en parlant de heatmaps. C’est le type de heatmap le plus utilisé, et vous le retrouverez dans presque tous les outils de heatmap et d’analytique (sauf dans Google Analytics et certains outils basés sur les événements).
La carte de clics (ou carte de chaleur des clics) indique ce sur quoi vos utilisateurs ont cliqué dans votre interface (par exemple, la page d’accueil du site). Elle visualise l’activité de clic de votre audience en surlignant les zones pertinentes et en utilisant un code couleur pour montrer quelles parties de votre UX sont « chaudes » ou « froides ».
Voici à quoi ressemble la carte de clics de la page carrières de Hotjar.
En examinant cette carte de clics, on observe les éléments suivants :
- Une zone « chaude » rouge près du CTA principal – « Voir les offres d'emploi ».
- Un peu d’activité « tiède » (jaune) autour du bouton flèche droite qui change l’image mise en avant sur la page.
- Un peu d'activité (bleue) également sur la flèche gauche.
Le reste de l'écran ne présente aucun point saillant, ce qui nous indique qu'il est « froid » et que personne n'a cliqué dans ces zones.
Par contre, la zone « chaude » sur le CTA principal indique que de nombreux utilisateurs (probablement la majorité au vu de cette intensité) cliquent dessus. Ensuite, on remarque des zones tièdes autour des boutons flèches, indiquant qu’une petite partie des utilisateurs navigue aussi à travers les images mises en avant.
Comment utiliser les heatmaps de ce type ? Faites de l’A/B testing sur vos CTA !
Il existe, en effet, une large variété de cas d’utilisation pour les cartes de clics. Par exemple, vous pouvez les utiliser pour comprendre l’efficacité de l’emplacement et du texte de votre CTA. Mes designers produit et moi aimons cependant utiliser les heatmaps pour une autre raison : l’A/B testing sur nos CTA et autres éléments de design.
Laissez-moi illustrer ce cas d’usage par un exemple. Imaginez que vous êtes responsable de l’application web ChatGPT et que vous avez un souci : les utilisateurs ne créent pas de nouvelles discussions et continuent de parler à l’IA dans une seule instance de chat.
Après avoir examiné la heatmap, vous constatez que le bouton « Nouvelle discussion » en haut de votre barre latérale est froid (aucun surlignement).
Vous supposez rapidement que c’est dû à la couleur du CTA, identique à celle du fond de la barre latérale. Vous lancez donc une expérience A/B : dans la variante A, vous passez le fond au vert ; dans la variante B, vous laissez le fond inchangé.
Après que suffisamment d’utilisateurs aient testé les deux variantes, vous consultez la heatmap des clics de chaque version et les comparez côte à côte pour voir laquelle a un bouton « Nouvelle discussion » plus « chaud ».
Vous choisissez alors la variante dont le CTA a récolté le plus de clics, selon l’analyse de votre heatmap.
2. Cartes de scroll
Cartographier les clics des utilisateurs est très utile, mais cela ne raconte pas toujours toute l’histoire.
Par exemple, si votre carte de clics révèle qu’un bouton situé en bas de page ne performe pas bien, cela ne signifie pas forcément que la formulation, la couleur ou d’autres aspects du CTA sont problématiques. Il se peut que votre CTA soit pertinent, mais que les visiteurs ne descendent tout simplement pas jusqu’en bas de page pour le voir.
C’est ici que les cartes de scroll (aussi appelées cartes thermiques de scroll) prennent tout leur sens. À la différence du type précédent, qui met en évidence les clics sur votre interface, les cartes de scroll montrent le temps passé par les utilisateurs sur chaque section de votre interface ainsi que leur comportement de défilement.
Selon le temps passé sur chaque section, la page sera colorée en rouge (beaucoup de temps passé), orange/jaune (temps modéré), ou vert/bleu (peu de temps passé).
Je vais illustrer cela avec un autre exemple provenant d’Hotjar.
L’image ci-dessus montre l’une des anciennes versions de la page « à propos » d’Hotjar. En examinant les données de la carte de scroll de cette page, on en déduit :
- Tous vos utilisateurs ont vu le haut de votre page (zone rouge). Cela paraît évident, n’est-ce pas ?
- Puis, on observe qu’environ 75% des visiteurs ont légèrement fait défiler la page pour voir les logos des entreprises utilisant Hotjar (section des logos en jaune).
- Enfin, le bas de la page est vert, ce qui signifie que seule une partie des utilisateurs a scrollé aussi loin. La ligne juste au-dessus du logo Glassdoor nous indique que seuls 57% des utilisateurs sont allés jusqu’à ce niveau.
Il s’agit ici d’un cas classique où le haut est rouge, la partie centrale jaune et le bas vert. En réalité, il est possible d’observer des cartes de scroll où une section spécifique en bas de page fonctionne très bien (par exemple, la section des tarifs), alors que les utilisateurs ignorent le contenu au-dessus et en dessous.
Comment les designers produit utilisent les cartes de scroll : Optimisation du contenu
Comme les cartes de clics, les cartes de scroll sont des outils polyvalents que vous pouvez exploiter pour de nombreuses raisons. Leur cas d’usage le plus répandu, toutefois, consiste à optimiser la disposition de votre contenu.
Comme je l’ai déjà mentionné, par exemple, les sections de tarification peuvent très bien fonctionner sur votre site web. Cela signifie que les visiteurs font rapidement défiler votre contenu, puis remarquent la section de tarification, s’arrêtent, la lisent, puis poursuivent leur navigation.
Ce schéma de comportement nous permet de placer stratégiquement la section tarifs au milieu ou en bas de la page. Cela vise à ce que les visiteurs parcourent l’ensemble de la page (et saisissent d'autres messages importants) avant de découvrir les informations sur vos offres tarifaires.
Notre stratégie ici est similaire à celle des supermarchés lorsqu'ils placent les produits laitiers et de boulangerie. Ce sont tous deux des produits que vous achetez assez souvent. Ils les placent donc de l'autre côté du bâtiment, vous obligeant à traverser tout le supermarché pour les obtenir.
La logique est que vous remarquerez probablement d'autres produits dans les rayons et que vous les achèterez en vous rendant au rayon des produits laitiers.
3. Cartes de mouvement
Les cartes de défilement vous donnent une vue d'ensemble des sections que vos utilisateurs regardent. Les cartes de clics, en revanche, sont un peu plus précises car elles vous indiquent exactement sur quel élément l'utilisateur a cliqué.
Cependant, il y a besoin de quelque chose d’« intermédiaire » qui puisse vous dire comment les gens naviguent à travers l’information et les éléments d’interface utilisateur à l’intérieur d’une section spécifique de votre page.
C’est là que vous pouvez tirer parti des cartes de mouvement. Comme leur nom l’indique, ce type de heatmap trace les mouvements du curseur de la souris sur votre interface.
Comme pour les autres cartes, les zones de l’interface sont mises en évidence avec une gamme de couleurs (du bleu au rouge), le bleu indiquant peu de mouvement de souris sur cette zone (et le rouge beaucoup de mouvements).
Voyons à quoi cela ressemble dans un article de blog.
La carte nous montre ici qu’une petite partie des utilisateurs passent leur souris au-dessus du titre et du premier en-tête de l’article. La majorité, cependant, garde la souris près de la zone de recherche en haut à droite.
Comment les designers produits utilisent les cartes de mouvement : suivre l'attention sur certains éléments
Il est assez courant que certains aspects de notre interface utilisateur ne soient pas cliquables, mais qu’ils soient tout de même très importants, et nous voulons nous assurer que nos utilisateurs les ont vus.
Un exemple serait notre liste de fonctionnalités sur la page de tarification. Nous pourrions vouloir comprendre sur quelles fonctionnalités les utilisateurs ont porté le plus d’attention lors de la consultation de notre tableau des prix.
Pour cela, nous pouvons tirer parti de l’habitude humaine de survoler avec la souris ce que nous sommes en train de lire ou de parcourir, et créer une carte de mouvement de souris qui nous indiquera quelles fonctionnalités les utilisateurs consultent le plus sur notre page de tarification.
4. Cartes de rage-clics
Il y a les clics ordinaires, et il y a les rage-clics.
C’est le cas lorsque les défaillances dans votre expérience utilisateur ont poussé les utilisateurs à s’énerver et à cliquer de manière agressive et répétée sur un de vos éléments d’interface parce que :
- Ils pensent que c’est un élément cliquable, mais il ne l’est pas.
- Il est cliquable, mais votre produit ne fait rien après le clic de l’utilisateur.
La principale raison de la première situation est la conception d’éléments d’interface qui ne sont pas des boutons ou des liens, mais qui en ont l’apparence.
Concernant la deuxième situation, il se peut que vous ayez :
- Un bug ou un plantage qui a empêché votre produit d’exécuter l’action à laquelle le bouton était destiné.
- Tout fonctionne bien, mais il y a un manque de retour d'information UX. Ainsi, même si l'utilisateur a réussi à faire ce qu'il souhaitait grâce à votre bouton, vous ne lui avez pas signalé.
- Votre produit est en train de réaliser l’action demandée par l’utilisateur, mais c’est lent. Les utilisateurs sont alors énervés à cause de cela, ou bien vous ne leur faites pas savoir que l’action est en cours.
Alors que les cartes de clics ordinaires enregistrent aussi les rage-clics (après tout, ce ne sont que des clics), vous ne serez pas capable de différencier les rage-clics des clics ordinaires. Vous risquez de tirer de mauvaises conclusions de vos données.
Par exemple, si votre bouton ne fonctionne pas et que les gens s’acharnent en rage-cliquant dessus, votre carte de clics ordinaire vous indiquera que les gens utilisent activement cette fonctionnalité, alors qu’en réalité c’est tout le contraire.
Visuellement, les cartes de rage-clics ressemblent aux cartes de clics ordinaires. La seule différence est que beaucoup de taches rouges sur une carte de clics ordinaire sont une bonne nouvelle, mais c’est mauvais signe sur une carte de rage-clics.
Comment les designers produits utilisent les cartes de mouvement : repérer une mauvaise UX
Aucun produit n’a une expérience utilisateur parfaite. Il y a toujours des éléments ou des expériences insatisfaisants (même si vous pensez que ce n’est pas le cas).
Les cartes de rage-clics sont excellentes pour vous aider à identifier plusieurs types de mauvaises expériences, notamment un mauvais retour utilisateur, une mauvaise conception d’élément et d'autres encore.
Les heatmaps sont les meilleurs alliés des designers UX
D’après mon expérience et celle de mon équipe de design produit, les heatmaps de site web font partie des outils les plus utiles pour réaliser des tests d’utilisabilité et étudier le comportement des utilisateurs.
Avec leur aide, vous pouvez obtenir des informations quantitatives (y compris la façon dont ils l'utilisent sur les appareils de bureau et mobiles) sur l'efficacité de votre conception web.
Vous pouvez ensuite analyser ces informations et identifier les lacunes dans votre conception et vos fonctionnalités que vous devez combler afin de vous assurer que votre produit, site web, plateforme e-commerce ou page d’atterrissage soit convivial.
N'oubliez pas de vous abonner à notre newsletter pour plus de ressources et de guides sur la gestion de produit, ainsi que les derniers podcasts, interviews et autres analyses de la part de leaders et d’experts du secteur.
