Découvrez ce que font vos visiteurs sur votre site Web avec des cartes thermiques

L'être humain est curieux de nature. La curiosité, à bien des égards, est l'une des caractéristiques qui nous a le plus fait évoluer. L'information, c'est le pouvoir, et avoir des informations sur les autres est très utile dans de nombreux domaines différents, y compris le développement de pages Web.

Sans entrer dans le côté obscur du monde de la vie privée, il existe de nombreuses façons de gérer une page Web et d'utiliser la curiosité de manière éthique pour améliorer ses performances et amener vos visiteurs à profiter de vos pages plus qu'avant.

Les cartes thermiques sont une technique visant à découvrir ce que font les visiteurs sur une page Web et à voir comment ils interagissent avec elle. Autrement dit, les cartes thermiques nous permettent d'analyser le comportement des visiteurs de manière agrégée et anonyme. En analysant le mouvement du curseur sur la page Web, les cartes thermiques sont une représentation visuelle qui montre les points chauds de votre page peints avec des couleurs plus chaudes.

De plus, les cartes thermiques nous permettent d'obtenir des idées d'amélioration à appliquer sur notre site Web. Nous devons simplement étudier les données que nous voyons dans la carte thermique pour tirer des conclusions sur ce qui se passe, ce que font les visiteurs, ce qui ne va pas sur le Web et comment nous pouvons le résoudre.

Comment créer une carte thermique dans WordPress

De nos jours, créer une carte thermique est extrêmement simple. Dans WordPress, nous n'avons qu'à utiliser un plugin qui nous permet de créer des cartes thermiques. En fait, les cartes thermiques sont l'une des fonctionnalités les plus demandées par nos utilisateurs de Nelio A/B Testing.

Nous créons des cartes thermiques depuis longtemps pour continuer à rechercher des améliorations possibles sur notre site Web. À titre d'exemple, je vais vous montrer ici la dernière carte thermique que nous avons créée sur la page principale de Nelio.

La première chose à faire est de créer une nouvelle carte thermique. Pour ce faire, nous sélectionnons le nouveau test dans Nelio A/B Testing et choisissons la page qui nous intéresse, comme vous pouvez le voir sur la capture d'écran suivante :

Ensuite, il ne nous reste plus qu'à lancer le test pour que le plugin trace vos visiteurs et agrège automatiquement les informations. À partir de ce moment, une nouvelle carte thermique sera générée progressivement et nous pourrons voir les résultats graphiquement.

Résultats de la carte thermique

Une fois que nous avons suivi un nombre représentatif de visiteurs, nous pouvons observer en détail le résultat de la carte thermique. Gardez à l'esprit qu'il existe différentes vues de ces données extraites de nos visiteurs.

Le type de visualisation le plus courant est la carte thermique elle-même, qui montre une série de points de couleur chaude affichés en haut de la page analysée. Ces points chauds sont placés sur les éléments qui ont reçu le plus d'interaction.

D'autre part, nous avons le scrollmap, qui montre avec des couleurs plus chaudes jusqu'où les visiteurs sont venus en faisant défiler la page avant de partir.

Enfin, la dernière représentation que l'on peut généralement trouver consiste à voir les clics qui ont été effectués sur la page comme un nuage de points, ou des confettis.

Dans la galerie précédente, vous avez la carte thermique complète, la carte de défilement et les cofetti que notre plugin a créés lors de l'analyse de la page principale de notre site Web. Examinons ensuite de plus près certains détails des informations que nous pouvons extraire de ces trois représentations.

Détails de la carte thermique

La carte thermique montre qu'une grande partie de l'activité de ceux qui visitent notre page d'accueil se produit dans la première partie de la page. Nous trouvons beaucoup d'interaction sur les boutons qui nous amènent aux pages spécifiques de chacun de nos plugins, ce que nous souhaitons :

Mais nous avons également constaté que de nombreuses personnes cliquent sur la flèche dans le premier pli qui leur indique de faire défiler vers le bas. Malheureusement, cette flèche n'est qu'un indicateur et n'est pas un élément cliquable. Donc, cela confond sûrement notre public, qui clique toujours dessus.

Comme solution, nous pourrions choisir de transformer la flèche en un bouton qui fait défiler la page automatiquement. Ce faisant, nous alignons les attentes des utilisateurs avec la réalité.

D'un autre côté, il est curieux de voir à quel point le pied de page reçoit également beaucoup d'attention. Ceci est important, car cela suggère que certains utilisateurs ne trouvent pas ce qu'ils recherchent avant la toute fin de la page. En particulier, le domaine le plus chaud est le lien de contact. Par conséquent, une bonne idée de test serait de déplacer ce lien vers une zone plus visible de la page, juste pour s'assurer que personne ne part sans trouver ce dont il a besoin.

Détails de la carte de défilement

La carte de défilement montre que la plupart de nos visiteurs ne voient rien au-delà d'une demi-page. Avec ces informations, la principale conclusion que nous pouvons tirer est que le contenu de ce point sera manqué et, par conséquent, il ne devrait pas être pertinent.

Pour rendre nos contenus plus attractifs auprès de notre audience et ainsi les empêcher de partir, une possibilité est de montrer des rubriques plus visuelles et dynamiques. Le contenu statique ne se démarque pas suffisamment et nous perdons l'attention de nos visiteurs. Pour cette raison, proposer des changements dans ces sections peut être une bonne possibilité de tester dans un futur test A/B.

Détails confettis

Quant aux confettis, ils nous montrent un nuage de points avec tous les clics que nous avons reçus lors de l'exécution du test. Par rapport à une carte thermique classique, les confettis incluent plus d'informations sur chaque clic individuel.

On voit comment la majorité des visiteurs qui cliquent mettent entre 5 et 10 secondes pour le faire. Connaître ces données est très intéressant, car nous avons une mesure assez approximative du temps dont nous disposons pour attirer leur attention.

Plus la page est complexe et plus elle semble difficile à comprendre, plus nous perdrons de visiteurs. Ces informations peuvent nous aider à proposer une version beaucoup plus simple et radicale de la page. Par exemple, nous pourrions afficher moins d'informations et aller droit au but. C'est un autre test A/B possible que nous pourrions essayer ensuite.

De plus, on peut voir qu'il y a des visiteurs qui cliquent sur des éléments qui ne sont pas cliquables. Une rubrique particulièrement pertinente ici est la liste des logos des entreprises qui utilisent nos produits, ou encore les témoignages de nos clients :

Dans ces sections, nous n'avons pas d'éléments cliquables, mais ils obtiennent néanmoins des clics. Encore une fois, cela peut prêter à confusion, et il est donc important de s'assurer que le comportement de notre site correspond aux attentes de nos visiteurs. Pour éviter cela, nous pourrions décider de modifier le design de ces sections pour qu'il soit plus clair que vous n'ayez pas à cliquer ici. Ou même supprimer les sections, en tenant compte des informations contenues dans le scrollmap, où nous avons déjà vu que nous perdions des personnes dans cette partie du Web.

L'important avec les cartes thermiques est d'obtenir des idées d'amélioration en analysant la façon dont nos visiteurs interagissent avec notre site. De cette façon, nous pouvons corriger les comportements défaillants et proposer d'éventuelles améliorations de notre page que nous pourrons ensuite tester avec des tests A/B.

Je vous rappelle que la version gratuite de Nelio A/B Testing vous permet de créer des heatmaps sur vos pages WordPress aussi simplement que je vous l'ai expliqué ici. Allez-y et essayez-le. Et puis faites-nous part de votre expérience et des informations que vous pouvez extraire grâce à cette représentation visuelle du comportement de vos visiteurs.

Image sélectionnée par Almos Bechtold sur Unsplash.