Savoir capturer l’attention de ses visiteurs est le nerf de la guerre de tous les sites Internet qui ont pour vocation de monétiser leur activité.
Et pourtant, légions sont les sites qui expérimentent « un peu au hasard » les changements qu’ils mettent en place. La page d’accueil a deux ans ? Quelques changements lancés au hasard après la lecture d’un article et nous sommes repartis pour deux années !
L’erreur est monumentale. En réalité, effectuer des changements au hasard est le meilleur moyen :
- De faire baisser la conversion.
- De perdre des ventes.
- De faire fuir les visiteurs.
La vérité, c’est que chaque site est différent. Ce qui a fonctionné pour Pierre, Paul ou Jacques ne fonctionnera pas forcément sur votre site, et vice-versa.
Qu’est-ce qu’une heatmap ?
Les heatmaps (Heat Maps), ou cartes de chaleur, sont des représentations visuelles de l’attention, de l’engagement et des interactions générées par vos visiteurs lorsqu’ils naviguent sur votre site.
Il s’agit d’une analyse que vous utilisez pour établir une « carte » de la concentration d’interaction ou d’attention sur votre page.
Mais regardez plutôt par ici :
Source : pixeller.co
En couleurs chaudes, on constate l’essentiel de l’attention tandis que les couleurs plus froides renvoient aux zones les plus ignorées de cette page d’accueil.
En analysant les interactions de vos visiteurs avec les pages de votre choix, vous pouvez effectuer les changements précis qui permettront d’augmenter la conversion.
À ce stade, c’est presque de la magie non ?
Laissez vos propres visiteurs vous dirent quelles sont les parties à changer pour augmenter vos ventes puis mettre en place les changements en mesurant leur efficacité, par exemple grâce à l’A/B testing.
Quand utiliser une Heatmap sur mon site web ?
Les heatmaps sont extrêmement utiles. Elles mesurent l’attention, l’engagement et même la répartition des clics sur votre site.
Pour vous permettre de mieux comprendre, voici quelques unes des raisons principales pour lesquelles les cartes de chaleur sont utilisées :
- Mesurer l’engagement. Vous écrivez des articles et vous vous demandez jusqu’où lisent vos lecteurs ? L’utilisation d’une heatmap vous permet de visualiser le « scroll » des visiteurs et de comprendre où ils interagissent. Si vous constatez qu’une infime partie seulement atteint votre call-to-action, il est peut-être temps de changer quelques éléments.
- Mesurer les actions. Où cliquent mes visiteurs ? Cliquent-ils sur le bon bouton ? Votre carte de chaleur vous permet de voir si vos visiteurs agissent de la façon attendue et de découvrir les obstacles qui les en empêchent.
- Mesurer l’attention. Quels sont les titres qui attirent l’attention ? Quelles images attirent l’attention ? Quels éléments détournent l’attention du contenu principal ? Mes visiteurs voient-ils mon formulaire ? En comprenant ces problématiques, vous pouvez mettre en place les changements qui augmenteront votre conversion.
Source : unbounce.com
Grâce à ces réponses, vous pouvez répondre vous-même aux questions qui vous entêtent :
- Où placer le contenu le plus important ?
- Comment bien utiliser mes images, mes vidéos ?
- Où part l’attention de mes visiteurs ?
- Où proposer mon produit, mon service ?
Maintenant que vous êtes plus familiers avec le concept de « heat map », vous vous demandez peut-être s’il existe plusieurs types de cartes de chaleur à analyser. Et vous avez raison.
Quelle(s) Heatmap(s) dois-je utiliser ?
La plupart des solutions de heatmap donnent la possibilité de générer des cartographies de votre site sous plusieurs angles.
L’idée est de jongler entre ces différentes cartes pour révéler les comportements de vos visiteurs.
La Heatmap ou Click Heat Map
Elle permet de quantifier l’action. C’est une représentation visuelle de tous les clics de vos visiteurs sur votre page. Cette « map » génère des données précieuses puisqu’elle vous permet de comprendre exactement où interagissent vos visiteurs.
Dès qu’une personne clique à un endroit précis sur votre site, la heatmap marque cet emplacement d’un point lumineux. Si vous constatez des zones lumineuses, c’est ici que l’essentiel des clics se produit.
Source : sumo.com
En identifiant rapidement les « points d’action » de votre site, vous constatez immédiatement si vos visiteurs cliquent aux endroits voulus. Sur cette capture de Sumo, on voit que les outils « SHARE » et « IMAGE SHARER » sont les moins populaires.
La Scroll-Map ou « Analyse du contenu »
La scrollmap vous permet de comprendre à quelle profondeur descendent vos visiteurs lorsqu’ils « scrollent » une page et surtout : quels éléments attirent l’attention de vos visiteurs et sur quoi s’attardent-ils ?
En utilisant la scrollmap, vous identifiez si vos visiteurs « voient » les bons éléments de votre site ou si au contraire, ils s’attardent sur des éléments peu importants.
L’objectif : identifier les points forts du site et restructurer votre navigation jusqu’à ce que vos visiteurs passent le plus de temps possible sur les éléments qui comptent.
source : nguyenvincent.com
Sur cet article qui traite de référencement naturel, on s’aperçoit que l’image et les deux lignes qui lui succèdent sont les plus populaires : environ 85% des visiteurs ont vus ces éléments.
La Heatmap « Pourcentage de clics »
La carte pourcentage de clics arrive en renfort de la heat map classique. Elle permet de voir, élément par élément, combien de clics ont été générés par telle image ou tel call-to-action. Le pouvoir de quantifier les clics élément par élément est extrêmement important.
Cela permet de :
- Comprendre l’importance qu’accorde le visiteur à chaque élément
- Éviter que les visiteurs ne cliquent sur des images sans lien
Source : nguyenvincent.com
Sur cette carte du pourcentage de clics, on voit que la section « me contacter » reçoit plus de clics que la page « présentation », ce qui indique que les utilisateurs s’orientent vers ce qu’attend le propriétaire du site : une prise de contact.
La Heatmap « Confetti »
Bien que similaire à la heatmap classique, l’approche « confetti » vous permet de voir tous les clics effectués sur votre page contrairement à un aperçu de la « densité ». Cela vous permet de voir si des zones non-cliquables sont cliquées par des utilisateurs : vous auriez alors tout intérêt à rendre ces zones cliquables.
Source : crazyegg.com
À ce stade, vous en savez déjà plus sur les différences façons d’utiliser les heatmaps.
Il existe cependant une autre façon d’analyser le comportement de vos utilisateurs sur votre site : le eye-tracking.
Différence entre Heat map et Eye-tracking
Si les heat maps se concentrent principalement sur l’analyse du parcours de la souris et des clics, l’eye-tracking analyse le parcours du regard des utilisateurs.
L’intérêt de l’eye-tracking est de comprendre le chemin parcouru par le regard de l’utilisateur afin d’analyser les zones d’intérêt et d’attention sur lesquelles s’attardent vos utilisateurs.
Source : nngroup.com
Sur le même principe que la heatmap, les zones de chaleur représentent les endroits où l’attention des lecteurs s’est le plus portée.
Bien que très utile, l’eye-tracking est un dispositif plus difficile à mettre en place que les heatmaps. Il demande de l’équipement spécifique dont peu d’agences disposent.
Si l’eye-tracking vous intéresse, il existe des solutions basées sur l’IA telles que Feng-Gui ou EyeQuant qui vous permettront de simuler un eye-tracking à l’aide d’algorithmes.
Fonctionnalités clés d’une solution de Heatmap
Quand vous cherchez un outil de carte de chaleur, faites attentions aux éléments suivants :
- Segmentation comportementale : l’outil de heatmap doit permettre d’afficher les cartes de chaleur propres à un type d’internautes que vous définissez à l’aide de critères de ciblage et de segmentation (ex: nouveaux visiteurs, visiteurs ayant converti, visiteurs venant de vos campagnes de liens sponsorisés…).
- Comparaison de cartes : vous devez pouvoir comparer facilement et visuellement les cartes correspondantes à différents segments d’utilisateurs.
- Regroupement par template de pages : avoir une carte de chaleur pour une page spécifique peut rendre l’analyse compliquée si votre page est une fiche produit et que vous en avez des centaines, voire des milliers. Il faut pouvoir agréger les résultats pour toutes les pages d’un même type.
- Heatmap responsive : l’outil de carte de chaleur doit fonctionner pour les pages consultées depuis un mobile ou une tablette. Les actions spécifiques à ces terminaux mobiles doivent être enregistrées, comme les touch, scroll et swipe. Lors de l’analyse vous devez pouvoir dissocier les comportements et sessions de navigation faites depuis un mobile ou un ordinateur pour analyser correctement une carte de chaleur.
- Cartes exportables. Cette fonctionnalité importante vous aide à communiquer facilement les résultats à vos collaborateurs.
- Cartes de chaleur dynamiques : vous devez pouvoir visualiser les clics sur les élements dynamiques : menu déroulant, slider, carrousel, éléments chargés en AJAX ou via un framework Javascript comme React.js ou Angular.js.
- Heatmap rétroactive : le design de votre site a changé depuis la capture de la carte de chaleur ? La solution de heat map doit pouvoir conserver les résultats précédents sur l’affichage de l’époque et ne pas simplement superposer les résultats sur votre nouveau design, sinon les résultats sont incohérents.
Obtenir plus de conversions : combinez Heatmap et A/B Testing
Admettons : vous utilisez une heatmap pour comprendre comment vos utilisateurs interagissent avec votre marque. Vous remarquez des zones faibles et des zones fortes pour lesquelles vous voulez mettre en place des modifications.
Le principe : créer des versions différentes d’une page, publicité ou landing page afin de comparer les différences de performance.
En combinant Heat Map + A/B Testing, vous obtenez une méthode en 3 étapes :
- J’identifie les problèmes grâce aux heatmaps.
- Je teste mes solutions grâce à l’A/B Testing.
- J’applique les solutions les plus performantes.
Télécharger notre guide pour tout savoir de l’A/B testing !
Sur ce site de réparation, une première heatmap montre que l’engagement et l’attention des visiteurs sont divisés sur de trop nombreux éléments de la page.
Constat : l’attention est dispersée et la conversion est faible.
Source : kissmetrics.io
À l’aide de l’A/B Testing, la société procède à plusieurs changements sur la Page d’Accueil afin de recentrer l’attention des visiteurs sur un Call-to-Action.
Une deuxième heatmap est générée après les modifications.
Constat : l’attention est recentrée sur le numéro de téléphone qui sert de Call-to-Action. La conversion augmente.
Source : kissmetrics.io
A retenir !
Utilisez les Heatmaps et l’A/B Testing pour :
- Analyser le comportement et l’engagement de vos visiteurs.
- Déceler les zones faibles et fortes des pages de votre choix.
- Trouver les mesures à mettre en place pour augmenter la conversion.
- Tester vos solutions jusqu’à parvenir à augmenter votre conversion.
