Vous venez de créer une page d’atterrissage cruciale pour la vente de votre produit. Vous avez pensé à tout : bénéfices, témoignages de vos clients, boutons d’appel à l’action.

Vous avez mis en place un dispositif stratégique de communication autour de cette page et pourtant les inscriptions, devis ou ventes ne sont pas au rendez-vous. 

Si les causes peuvent être multiples, l’expérience utilisateur de votre site est l’une des premières pistes à considérer.

Une heatmap, ou carte de chaleur, sera l’un des moyens les plus efficaces pour détecter les points de blocage sur votre page.

Qu’est-ce qu’une heatmap ? À quoi sert-elle et comment peut-elle m’aider à booster mes conversions ? C’est ce que nous allons voir dans ce guide.

Qu’est-ce qu’une heatmap ?

Une heatmap ou zoning (ou carte de chaleur) est un outil d'analyse comportementale permettant de visualiser comment les internautes interagissent avec une page web

Elle fonctionne sur le principe d'un nuancier de couleurs allant du rouge pour les zones chaudes (ou populaires) au bleu pour les zones froides.

heatmap d’un site web

Heatmap classique. Crédits photos : Flickr

Elle ne doit pas être confondue avec l’eye tracking qui consiste en l’étude du comportement oculaire d’un internaute consultant une page web : point de fixation, temps d’arrêt etc.

La heatmap n’est pas un concept nouveau. En effet, elle était déjà utilisée au XIXe siècle par les urbanistes parisiens pour mettre en valeur leurs données statistiques sur le plan de la capitale.

Aujourd’hui, les “cartes thermiques” sont utilisées :

  • Pour la météo, 
  • Pour représenter des données relatives à l’énergie,
  • Pour analyser le comportement des internautes sur le web.

À quoi sert une carte de chaleur ?

Si elle est simple à mettre en place et à interpréter visuellement, la heatmap remplit bien plus qu’une seule fonction. 

Un rapide coup d’oeil permet en effet de réaliser une :  

  • Analyse du comportement : la carte de chaleur donne la possibilité de distinguer grâce à un jeu de couleurs les zones cliquées par les internautes et donc de savoir ce qui attire l’œil ou non. Elle peut révéler : l’hésitation, l’engagement par le clic, l’exposition à un contenu...
  • Segmentation des utilisateurs : elle permet aussi de repérer des comportements spécifiques. Par exemple, des clics répétés sur une image qui n’est pas conçue pour être interactive peut révéler un besoin de l’utilisateur qui attend de cette image qu’elle le redirige vers un contenu par exemple,
  • Évaluation des revenus dégagés par zone : ce système de zoning permet de connaître les revenus générés depuis une bannière, un menu, un bouton d’appel à l’action...
  • Comparaison de l’engagement avec les contenus : la heatmap permet également de savoir si les internautes parcourent vos articles jusqu’au bout,
  • Identification du parcours utilisateur : les visiteurs ont-ils atterri sur votre page depuis la page d’accueil de votre site ? Depuis une annonce Adwords, une newsletter ou les réseaux sociaux ? Depuis un ordinateur équipé de Windows ?
  • Étude des difficultés d’usage liées au terminal : les internautes mobiles doivent-ils cliquer de façon répétée sur un bouton ou un lien pour accéder à une autre page ?

zoning de page web

Revenus dégagés par différentes zones d’une page web (Contentsquare)

Quels sont les différents types de heatmaps ?

Suivant vos objectifs, différents types de cartes de chaleur peuvent être utilisés. On distingue communément trois formats principaux.

La Click Heat Map 

Cette carte se concentre avant tout sur les clics réalisés sur une page web en mettant leur emplacement en valeur grâce à un ensemble de points. 

L’agrégation de ces points couplée au nuancier de couleurs permet de dégager les zones chaudes et froides de la page.

Note : certaines visualisations représentent parfois les clics sous forme de “confettis”.

La Scroll Map

Dédiée comme son nom l’indique au scrolling ou défilement, elle permet de savoir si les utilisateurs ont parcouru tout ou partie de la page. 

Elle révèle également ce qui a retenu leur attention et si les visiteurs se sont bien arrêtés sur les éléments clés.

La Move Heat Map

Cette carte de mouvement n’est utilisée que pour les ordinateurs de bureau. Elle relève les mouvements de la souris ainsi que le temps passé par le curseur à un endroit précis. 

Plus la durée d’arrêt du curseur est longue, plus la zone sera indiquée comme chaude.

Découvrez le Hors-Série du Magazine de l’Expérience Digitale

> Comprendre les nouvelles attentes des consommateurs
> Pérenniser ces évolutions

Télécharger

Quel est l’intérêt du zoning pour mon site web ?

Lorsqu’elles sont bien exploitées, les données issues d’un zoning permettent d’optimiser son site web et sa communication pour booster ses conversions.

Mieux connaître les attentes de vos visiteurs

L’expérience proposée sur votre site est-elle à la hauteur de ce que recherchent les internautes ?

Le niveau de finesse d’une heatmap permet de répondre précisément à cette question en mettant en lumière les éléments de vos pages qui attirent l’attention de vos visiteurs et conduisent à une conversion. 

Le tout en temps réel.

À l’inverse, elle permet aussi de révéler les points de blocage qui dissuadent les internautes d’aller plus loin dans leur recherche ou leur achat.

Une mine d’or en perspective ! 

zoning de formulaire

Optimiser ses formulaires grâce au zoning

Définir des parcours de navigation 

Les possibilités de tracking offertes par le zoning permettent d’offrir une vue bien plus micro du parcours utilisateur qu’une analyse classique.

En définissant autant de variables qu’il y a d’éléments texte ou média dans la page, il va plus loin que la simple observation de navigation page à page.

Plutôt que cinq ou six parcours de navigation différents, ce sont alors des dizaines de combinaisons possibles qui deviennent interprétables d’un simple coup d'œil !

Optimiser le tunnel de conversion

Qui dit amélioration de l’expérience dit optimisation des conversions. C’est l’objectif principal de toute heatmap.

Grâce à une segmentation plus fine de vos visiteurs, vous êtes en mesure de définir des typologies de comportements et d’identifier ce qui favorise ou bloque les conversions.

Par exemple : 

  • Les éléments conduisant à des conversions et, au contraire, les éléments menant à un cul-de-sac,
  • Les éléments de la page qui sont ignorés,
  • Les parties invisibles. Et oui, certaines zones de vos pages ne sont absolument jamais parcourues par les internautes 🙁
  • Les différences d’usage entre ordinateurs de bureau, smartphones et tablettes,
  • Les éléments rédhibitoires qui conduisent à un abandon de l’internaute. 

Améliorer sa communication

La segmentation des sources de trafic est une véritable opportunité d’améliorer ses canaux de communication web.

Vous remarquez que les internautes en provenance de votre dernière newsletter ont procédé plus que d’ordinaire à un achat ou au remplissage d’un formulaire ? 

Ce canal de communication mériterait très probablement d’être développé ! 

heatmap et parcours utilisateur

Visualisation d’un parcours utilisateur sur Contentsquare

D’une manière générale, une carte de chaleur peut être mise en place à tout moment. 

Cependant, une refonte de site est une bonne opportunité pour étudier ce qui fonctionne ou non et affiner l’expérience qu’offrira la prochaine mouture de votre site.

De même, si vous constatez un taux élevé d’abandon de panier ou si vous souhaitez savoir précisément si les internautes lisent vos contenus, la mise en place d’une heatmap doit devenir un réflexe.

Notez qu’il n’est pas nécessaire d’effectuer un zoning de toutes les pages de votre site web !

Un échantillon de pages représentatives est suffisant : 

  • Homepage,
  • Landing pages stratégiques,
  • Top pages produits,
  • Pages les moins performantes,
  • Nouvelles pages.

Heatmap : se réinventer pour gagner en efficacité

Si les heatmaps ont montré leur efficacité depuis plus d’une décennie, l’approche “classique” de la carte de chaleur comporte un inconvénient technologique majeur.

Traditionnellement, le fonctionnement d’une heatmap est directement lié à la position des éléments dans la page (et donc aux pixels). 

Cette rigidité a un prix ! Chaque modification d’un élément dans la page entraîne une nécessaire modification de la carte de chaleur, sous peine de récolter des données sans queue ni tête. 

Par ailleurs, si la modification concerne le template du site dans son ensemble, il ne s’agira plus de modifier un élément mais de reconfigurer l’ensemble de la heatmap. 

Sachant que certains sites web analysent des dizaines de milliers d’éléments distincts… vous avez compris.

Partisans de la simplicité et de l’accessibilité, toute l’équipe de Contentsquare a pris ce problème à bras le corps pour proposer une approche technologique ambitieuse du zoning. N'hésitez pas à en apprendre plus sur Hotjar, heatmaps qui nous accompagne pour l’amélioration de l’expérience digitale à travers le monde,

Basée sur le DOM de la page, notre solution vous permet de modifier vos pages à votre convenance sans que cela n’ait de répercussion sur son tracking.

Plus encore, notre technologie Autozone assure une configuration minimale de façon totalement automatisée et continue. L’ère de la configuration manuelle touche à sa fin !

Interpréter les données d’une carte de chaleur : le cas Thalys

Maintenant que vous savez précisément qui sont vos visiteurs, ce qui conduit à des conversions et ce qui les dissuade de poursuivre leur démarche, il est temps d’ajuster votre stratégie.

Vous pouvez ainsi dès à présent :

  • Prioriser les chantiers de votre roadmap,
  • Identifier des correctifs quick wins simples à mettre en place et générateurs de valeur,
  • Optimiser vos tests AB pour en réduire le volume (tester moins, mais tester mieux),
  • Quantifier les impacts financiers directement liés à ces changements.

Use case : optimiser le placement des bannières pour doper le taux de conversion de Thalys

cas pratique ux et conversion

Analyse des offres promotionnelles d’une homepage grâce au module de Données de Zones de Contentsquare.

Contexte : Thalys souhaite connaître l’attractivité des éléments qui constituent sa homepage afin d’en améliorer la rentabilité.

Méthodologie : l’analyse des offres promotionnelles présentes sous la forme de bannières par le module de Données de Zones de Contentsquare est sans appel. Le taux d’exposition et le taux de clic sur ces bannières sont très bas : respectivement 10,6 % et 1,10 %.

Recommandations : nos experts UX préconisent un placement de ces bannières plus haut sur la page dans le cadre d’une phase d’A/B testing.

Résultats : le taux d’exposition décolle pour passer à 38,7 % et le taux de conversion s’envole pour atteindre les 17,4 % !

Boostez vos conversions en ligne  

Rendez-vous avec un expert pour découvrir toutes les solutions que vous proposent Contentsquare pour augmenter vos conversions !

Demander votre demo

La mise en place d’une heatmap n’a donc rien d’une coquetterie. Elle contribue à valider ou questionner les axes d’amélioration envisagés pour un site web.

Plus encore, ses constats peuvent s’avérer cruciaux face à une régression de l’activité e-commerce ou dans un contexte nécessitant de prendre des décisions rapidement. 

Plus qu’une solution de secours en temps de crise, elle doit être envisagée comme une opportunité réelle de proposer une expérience différenciante à des visiteurs dont les habitudes de consommation ont été chamboulées ces derniers mois.