Tout comprendre sur les Heatmaps

Tout comprendre sur les Heatmaps

par | Mai 21, 2021 | Digital Marketing, UX | 0 commentaires

Tout comprendre sur les Heatmaps

 

Comprendre son client. C’est le but ultime du marketing de ces dernières années. Il n’est donc pas étonnant de voir que les outils digitaux de tracking ont le vent en poupe. Et pour cause : ces derniers permettent d’analyser les comportements en ligne et donc d’optimiser sa stratégie marketing à chaque étape du funnel d’acquisition. Et vous ? Quel outil de tracking utilisez-vous ? À cette question, la majorité répondront : Google Analytics. Basée sur les cookies tiers, c’est la solution la plus complète pour comprendre d’où provient le trafic de son site et comment il interagit avec celui-ci. Mais bien que Google Analytics offre de nombreuses fonctionnalités intéressantes, on a du mal à visualiser concrètement les interactions sur nos pages. Vous souhaitez savoir où les utilisateurs ont cliqué ? Connaitre les éléments de vos pages qui ont retenu leur attention ? Alors les heatmaps vont vous être indispensables💡.

RTFKT Logo x Body

Pour bien commencer : Qu’est-ce qu’une heatmap

 

Tout d’abord, une heatmap en français est traduit par carte de chaleur ou carte thermique. Certains d’entre vous se souviendront des cartes présentées en cours d’SVT (nostalgie du chapitre de géothermie🌋) qui distinguaient les zones chaudes des zones froides de la Terre. La heatmap en digital y ressemble beaucoup sauf qu’à la place d’une carte du monde, on va avoir une page web :

RTFKT Logo x Body

Pour faire simple, il s’agit de la représentation visuelle des interactions d’utilisateurs réalisées sur une page. Grâce aux variations de couleurs, on va pouvoir analyser quels éléments ont attiré leur attention et quels sont ceux avec lesquels ils ont interagi. Donc on va avoir d’un côté les zones en rouge appelées « zones chaudes » qui vont mettre en avant les parties les plus engageantes. Et d’un autre côté les zones en bleu ou « zones froides » qui sont celles avec lesquels les utilisateurs ont eu le moins d’interactions.

RTFKT Logo x Body

Pourquoi utiliser des heatmaps est essentiel ?

 

👉  En une phrase : optimiser l’UX de vos supports grâce à l’analyse du comportement des utilisateurs.

Pourquoi supports et non pages web ? C’est vrai, les outils de heatmaps ont d’abord été développés pour les sites internet. Mais désormais ce type d’analyse s’est ouvert à d’autres supports comme les applications mobiles et les e-mails. Un autre usage à fort potentiel des heatmaps : l’optimisation des landing pages pour maximiser les conversions 📈.

Dans tous les cas, une heatmap vous servira à comprendre si votre support est pertinent ou non. Les zones chaudes doivent ainsi correspondre aux éléments qui sont importants pour vos objectifs marketing. Si ce n’est pas le cas, il sera nécessaire de réaliser certaines optimisations. Par exemple : sur une landing page, si vous voyez que votre bouton CTA (appel à l’action) reste en bleu, peut-être qu’il faudra le mettre plus en avant (changer la couleur, la taille, le wording…).

Si vous n’êtes pas sûre de la pertinence de certains changements, n’hésitez pas à coupler les heatmaps à des AB tests (test de deux options pour choisir la plus performante).

Concrètement comment marchent les outils de heatmaps ?

 

Les heatmaps reposent avant tout sur le mouse tracking qui va analyser les mouvements et actions réalisés par les utilisateurs avec leur souris. Pour les heatmaps sur mobiles il s’agit de touch tracking : on va suivre et enregistrer les mouvements du doigt. Les données récoltées vont permettre de dégager les tendances d’attention et d’engagement de chaque zone.

Pour mettre en place le tracking des heatmaps :

  • Sur page web 📄 : la majorité des outils génèrent un tag en JavaScript qu’il va falloir intégrer dans le code source des pages cibles (même principe que pour Google Analytics).
  • Sur e-mail 📩 : la mise en place se fait plus rapidement, en connectant simplement l’outil à la plateforme de mailing utilisée (MailChimp, SendinBlue…)
  • Sur application 📲 : tout se fait via un SDK associé à télécharger pour lier l’application à l’interface de l’outils de heatmaps.

 

Quels sont les différents types de heatmaps ?

 

Car oui il n’y en a pas qu’un ! Il existe 4 grands types de heatmaps qui vous seront utiles :

  • Les Move Maps (ou cartes de mouvement) : cette version de heatmap prend en compte les mouvements de la souris pour définir les différentes zones chaudes et froides. Le but : mettre en avant les parties de la page qui attirent le plus l’attention de l’utilisateur.

 

RTFKT Logo x Body
  • Les Click Maps (ou cartes de clic) : C’est LE type de heatmap le plus utilisé. Il permet d’enregistrer les éléments d’une page qui ont été les plus cliqués et donc de comprendre si le contenu est engageant ou non. Si vous vous apercevez qu’une zone est très souvent cliquée mais qu’elle n’est reliée à aucun lien, il est important de la rendre cliquable pour capter du trafic. À l’inverse, si l’un de vos éléments clé n’est pas cliqué, il n’est probablement pas assez mis en avant. Il existe 2 types de click maps :

👉 Les clicks maps visualisant les nombres de clics : pour chaque clic enregistré, il va y avoir un point coloré sur la page.

👉 Les clicks maps visualisant les pourcentages de clics : variation de couleurs en fonction des éléments où le pourcentage de clics enregistré est le plus élevé.

RTFKT Logo x Body
  • Les Scroll Maps : Un format de heatmap très utilisé par les médias qui ont un important nombre d’articles sur leurs supports (journaux, blogs…). Il permet de visualiser où les utilisateurs s’attardent sur la page et quelles sections sont scrollées plus rapidement. Vous pourrez donc comprendre quelles sont les parties d’un contenu qui génèrent le plus d’intérêt. Il est également possible de voir la part des visiteurs qui ont scrollé jusqu’en bas de page.
RTFKT Logo x Body
  • Les Touch Maps : Un mélange entre la move map, la click map et la scroll map mais adapté au mobile. Très utile pour voir si la version mobile d’un site internet responsive est performante ou non.
RTFKT Logo x Body

Lancez-vous ! : 6 outils de heatmaps à utiliser

 

Aujourd’hui il existe de nombreux outils proposant des heatmaps. La liste ci-dessous comprend les plus connus / ceux qui ont un catalogue de fonctionnalités important. À noter : pour les heatmaps de sites internet, la majorité des solutions incluent des versions pour mobiles et tablettes (si le site est responsive).

RTFKT Logo x Body

Hotjar (Freemium) : 

C’est la solution de heatmaps la plus connue. Elle a de nombreuses fonctionnalités qui permettent une analyse poussée de la performance des pages. Il est par exemple possible de comparer les heatmaps de plusieurs versions d’une même page (A/B tests) et d’avoir accès aux statistiques associées pour prendre les bonnes décisions. Hotjar est également très utilisé pour booster les performances des landing pages. Des optimisations sont proposées par l’outil pour améliorer leur taux de conversion. 

Un tag JavaScript est généré par la plateforme pour activer le tracking des heatmaps sur vos pages. Pour finir, Hotjar permet d’obtenir des move maps, des scroll maps et des clicks maps. Et pour les sites responsive elles sont disponibles en version PC, tablette et mobile !

Coût 💰 :

  • Une version gratuite limitée
  • Une version payante à partir de 29€ par mois
RTFKT Logo x Body

CrazyEgg (Payant) :

Autre outil très populaire, CrazyEgg est aussi vraiment complet. Comme Hotjar, on peut avoir accès à des clicks maps, des scroll maps et des move maps pour les versions des sites sur tous les devices. Là où CrazyEgg se démarque c’est avec sa fonctionnalité permettant de savoir d’où vient le trafic. On peut donc comprendre et comparer les comportements des différents types d’audiences provenant de chaque canal digital.

Coût 💰 :

  • Formule de base à 9€ par mois sans les fonctionnalités avancées
  • Formule avancée à partir de 49€ par mois
RTFKT Logo x Body

Heatmap.com (Freemium) : 

Très souvent utilisé pour sa formule gratuite qui reste assez complète, Heatmap.com permet entre autres de générer des heatmaps en temps réel. Fonctionnalité intéressante pour voir les variations d’interactions aux différents moments de la journée. Installation très facile également comme pour les deux outils précédents : un simple code JavaScript à ajouter à vos pages.

Coût 💰  :

  • Version gratuite : intéressante pour les petites entreprises, les start-ups ou les particuliers
  • Version Premium : davantage pour les plus grosses structures, le prix s’élève de 100€ à 200€ par mois
RTFKT Logo x Body

Heatmap.com for WordPress (Freemium) :

Bon à savoir : il existe un plugin du site heatmap.com directement téléchargeable depuis l’interface WordPress.

Coût 💰  : comme sur le site, il existe une version gratuite et une version payante

RTFKT Logo x Body

Email Heatmaps (Payant) : 

Il s’agit d’un nouvel outil qui se développe sur l’ensemble des plateformes de gestion d’emails (Mailchimp, GetResponse…). Vous souhaitez savoir comment les utilisateurs ont interagi avec votre dernière campagne mailing ? Les heatmaps d’emails sont là pour ça. Elles vous permettront de comprendre si votre message est bien passé et s’il a généré de l’engagement. L’outil propose principalement des click maps.

Coût 💰 :

  • Version d‘essai gratuite pour une campagne d’e-mails
  • Version payante à partir de 4,97€ par mois
RTFKT Logo x Body

Azetone (Payant) :

Une solution très complète spécialisée dans les heatmaps pour applications mobile (SDK). Azetone propose des touch maps aux fonctionnalités avancées permettant d’analyser de nombreuses actions sur mobile : zooms, taps, swipes, press… En plus, vous aurez accès à un module d’analyse UX permettant la création de rapports détaillés pour chaque session enregistrée.

Coût 💰 :

  • Version d’essai gratuite (14 jours)
  • Version payante : prix fixé en fonction des besoins de l’entreprise

 

RTFKT Logo x Body

Vous l’aurez compris, les heatmaps apportent des informations précieuses quant aux comportements des utilisateurs. Grâce à elles vous allez pouvoir être en mesure de comprendre les optimisations UX possibles, les tester et prendre les meilleures décisions pour améliorer l’expérience globale de l’utilisateur. Que ce soit sur une page web, une application ou un email, les heatmaps montrent avant tout si vos efforts marketing retiennent l’attention de vos prospects 👀.

Pour aller plus loin

L’autre option de tracking qui se rapproche des heatmaps est l’eye tracking. Cette méthode issue du neuromarketing se base sur une technologie qui suit le mouvement des yeux pour comprendre ce qui capte l’attention. Très utilisée en marketing offline, elle reste cependant compliquée à mettre en place pour des actions online. Certaines solutions existent malgré tout. Pour des tests d’eye tracking classiques (en demandant l’accord des personnes participant au test), vous pouvez vous tourner vers Hawkeye disponible sur l’App Store (marche uniquement sur les derniers smartphones et tablettes Apple). Sinon vous pouvez vous tourner vers de nouveaux outils qui simulent des résultats d’eye tracking grâce à l’intelligence artificielle prédictive ! Pour en savoir plus, je vous propose de découvrir Eyequant.