Comment utiliser une heatmap pour optimiser un site ?

Comment utiliser une heatmap pour optimiser un site ?

Plusieurs outils, comme les heatmaps et les tracks de clics, permettent de mener un audit ergonomique, étape utile voire indispensable à un travail d’optimisation de l’expérience utilisateur, et d’accompagner toute refonte d’un site. Parfois décriés mais populaires auprès des marketeurs, ils sont pourtant d’une aide précieuse… Dans cet article, on vous montre comment utiliser une heatmap pour optimiser un site.

Les tests A/B sont bien souvent utilisés pour valider des hypothèses relevant de l’ergonomie du site et de l’expérience utilisateur. Malheureusement, il n’existe pas de remède miracle pour augmenter votre taux de conversion grâce à l’implémentation de boutons « magiques », des accroches publicitaires ultra performantes, ou de modèle de mise en page gagnante et universelle… même si certaines règles font loi en matière d’ergonomie et ne suggèrent aucune remise en cause. En revanche, chaque site est différent d’un autre : en fonction de la nature de son audience, de son contenu, une stratégie gagnante ne fonctionne pas forcément pour tous les sites. C’est pourquoi il est recommandé, avant d’élaborer une stratégie globale d’optimisation de la conversion, de mener un audit ergonomique.

Qu’est-ce qu’un audit ergonomique ?

Cela consiste à étudier chaque page d’un site web pour vérifier qu’elle est compréhensible, que les éléments qui la constituent sont lisibles et que la navigation s’y mène sans embûches. De nombreux outils d’analyse comportementale existent pour identifier ces problèmes : les cartes de clics, les cartes de chaleur, les cartes de scroll, le mouse testing et l’analyse de formulaire. L’audit ergonomique vous aidera à creuser les résultats analytiques pour identifier les bonnes tendances et prendre les bonnes décisions.

Parcourez notre série de 3 articles pour en apprendre plus sur l’audit ergonomique :

  1. Les 5 principes d’un audit efficace
  2. Audit analytique et ergonomique : les clés pour bien démarrer
  3. 3 conseils pour optimiser votre rapport d’audit analytique et ergonomique

Quels outils, pour quels usages ?

La couleur des CTA, du type style/wording de bouton d’action, des nouvelles accroches, le repositionnement des blocs sont évidemment des éléments que l’on A/B teste simplement, c’est pourquoi il est judicieux de démarrer par là. Mais l’ergonomie d’un site ne dépend pas exclusivement de ces modifications dites cosmétiques, loin s’en faut. Ces « quickwins » qui fonctionnent très bien mais qui sont trop éloignés de toute considération stratégique permettent en tous les cas de fermer des angles morts et de vous concentrer sur ce qui va fonctionner.

D’une manière générale, la mise en place de heatmaps, tracks de clics et autres doit avoir pour but d’optimiser l’expérience utilisateur dans son intégralité, et de débarrasser le parcours et le tunnel de conversions de toute scorie qui puisse provoquer un abandon de panier et / ou un retour insatisfaisant. Quand il s’agit d’ergonomie et d’expérience utilisateur, l’optimisation de la conversion ne tient pas à un élément de la page en particulier, une intuition ou un copier-coller d’un site performant. C’est au contraire un vrai processus de réflexion et une série d’étapes à suivre et une habitude à prendre dans votre chemin décisionnel.

  • La heatmap met en évidence, comme son nom l’indique, les zones « chaudes » d’une page et permet en creux de détecter les zones à optimiser. C’est un outil qui permet de restituer et d’analyser le parcours des visiteurs par l’intermédiaire de leurs clics. L’avantage : elle affiche en superposition les zones de clics, les clics précis, le pourcentage des clics sur chaque élément et la profondeur de scroll (c’est-à-dire lorsque l’internaute descend en dessous de la ligne de flottaison).

Exemple 1 - Comment utiliser une heatmap pour optimiser un site ?

  • Le track de clics comptabilisent le nombre de clics qu’un lien cliquable (sur lequel on a intégré un tag) a généré. Avantage : leur visualisation est très parlante et permet d’évangéliser plus simplement auprès de son équipe des bienfaits de l’optimisation de la conversion et met en évidence les futurs axes de travail. Par exemple, si l’on observe que les visiteurs cliquent sur une photo qui n’est pourtant pas un lien, cela signifie peut-être que les gens attendent un lien de ce type de visuel, ou que ce visuel induit une confusion de lecture. A vous de décider de l’action à mener par la suite.

Exemple 2 - Comment utiliser une heatmap pour optimiser un site ?

D’autres outils existent, tels que les cartes de scroll, le mouse testing et l’analyse de formulaire.

Le piège à éviter : les utiliser comme unique fondement de votre stratégie

L’utilisation de ces outils d’analyse comportementale est problématique lorsqu’elle est interprétée comme source indiscutable d’élaboration stratégique, alors que son rôle est plutôt celui d’un soutien d’un A/B test (sauf lors d’un audit ergonomique).

En effet, dans quelle mesure le fait de cliquer / scroller est-il un bon indicateur de l’intérêt des visiteurs ? Faut-il qu’une bannière soit cliquée pour qu’elle soit considérée comme étant utile, ou c’est le taux de conversion global qui doit être regardé avant tout ?

L’utilisation de ces outils constitue une aide à la décision, et produit une source de questionnements quant à l’orientation stratégique future de son site.

Quand utiliser une heatmap ?

1. Concevoir un site user-friendly

Penser l’ergonomie dès la conception du site est plus à même de produire un résultat que les utilisateurs trouveront pertinents, et surtout, cela peut éviter une refonte complète, longue et coûteuse, quelques mois après son lancement. C’est un conseil que ne démentirait pas Frank Lloyd Wright selon qui : « Vous pouvez choisir d’utiliser une gomme sur le bureau d’architecte ou un marteau une fois le chantier terminé. » Ce principe, qui s’applique à la construction d’un bâtiment s’applique aussi à la conception d’un site (même s’il est plus facile de modifier un site !).

En exemple, la start-up Reezocar a su intégrer l’A/B testing à une réflexion globale sur l’ergonomie et le parcours utilisateur en accompagnement de ses premiers questionnements sur le tunnel de conversion. En effet, pour déterminer avec précision les éléments du site à améliorer dans un site récent, la difficulté vient avant tout du manque de recul. Une carte de chaleur permet de détecter les zones populaires d’une page ou d’un site et d’expérimenter rapidement ( l’échantillon d’étude est moins large que pour un test A/B – autour de 10 000 visiteurs).

Comment procéder ? Avant tout, définissez stratégie, objectifs et KPIs.

Pour savoir quelles pages examiner, quelles catégories de produit étudier, etc, posez-vous les bonnes questions avant de vous lancer tête baissée, :

  • Quelle est la stratégie de mon site ?
  • Quels sont mes objectifs sur le court terme et moyen terme ?
  • Comment mesurer la réalisation de mes objectifs ? Quels sont mes indicateurs clés de performance (KPIs) ?

De la même manière, on utilise ces outils lors d’une refonte plus globale du site, ou lorsque l’on pense qu’une page ou un des éléments qui la constitue ne reçoit pas l’attention attendue. Dans ce cas de figure, la heatmap permet de détecter des zones d’ombres du site, celles qui sont invisibles aux yeux des visiteurs, ou peut-être simplement inintéressantes, et dans ce cas il faut envisager d’épurer le parcours utilisateur.

2. Découvrir les points de sortie du tunnel de conversion

Les outils d’analyses comportementales peuvent être d’une aide précieuse pour éviter les abandons de panier, plus précisément pour déterminer une étape problématique en particulier.

D’une manière plus globale, cherchez avant tout à comprendre l’intégralité de votre tunnel de conversion. Dans un premier temps, dessinez votre tunnel de conversion en comptabilisant chaque action qu’un prospect doit effectuer pour devenir votre client. Cela vous aidera peut-être à déceler des étapes non nécessaires ou des éléments manquants tels que programme de parrainage, cycle CRM, offres après-vente, avis clients, etc.

Vous pourrez ensuite étudier de plus près les étapes qui posent problème. Ainsi le track de clics mettra en avant les étapes où la conversion est arrêtée, et la heatmap peut mettre en évidence un phénomène de cannibalisation entre certains éléments du site, indicateur très utile en complément d’une campagne de tests A/B : en occupant le rôle d’un KPI supplémentaire, on peut vérifier la visibilité ou non des modifications ergonomiques effectuées.

3. S’assurer que le contenu proposé intéresse ses visiteurs

Les problématiques des sites ne sont pas seulement liées au tunnel de conversion. Pour un site qui diffuse des contenus, la disposition des éléments du site est déterminante pour s’assurer qu’elle encourage la lecture d’une part, et que les bannières publicitaires, si elles sont présentes, sont bien perçues. A ce titre, l’exemple bien connu de Nielsen concernant la lecture en F est éclairant.

Exemple 3 - Comment utiliser une heatmap pour optimiser un site ?

Dans ce cas de figure, une heatmap permet de détecter des zones « chaudes » en dessous de la ligne de flottaison ; les tracking de clics quant à eux mettent en évidence les CTAs qui fonctionnent, y compris en bas de page, indicateur certain de la lecture d’un article dans son intégralité.

Pour aller plus loin : lorsque l’on publie des articles, la question de la longueur du contenu est importante. Combien de temps retient-on l’attention d’un lecteur ? Pour déterminer cette durée, plusieurs possibilités. On peut utiliser une « scroll map » pour prioriser le contenu mis en avant, et/ou encourager la lecture quand l’attention diminue par des visuels percutants.

Pour vous aider, voici quelques enseignements tirés des expériences de nos clients à garder en tête quand on cherche à optimiser une page :

  1. Le contenu le plus important doit être en haut de page : même si les visiteurs scrollent, de nombreux tests montrent qu’une simple mise en avant augmente considérablement le nombre de clics. Pour en apprendre plus, découvrez la stratégie d’optimisation d’Allopneus.
  2. Luttez contre la « banner blindness » : lorsque des éléments du site ressemblent à des publicités, les visiteurs ne sont pas du tout intéressés.
  3. Les photos éveillent l’attention des utilisateurs et permettent de les guider vers certains endroits stratégiques de la page.
  4. Découvrez à ce sujet comment Welcome Office a optimisé la conversion de la homepage B2B.
    Pour les pages d’accueil de blogs, les résumés sont plus percutants que les articles entiers en diminuant le temps de recherche des visiteurs.

Comment utiliser une heatmap pour optimiser un site : résumé

Le meilleur design pour votre site n’est pas celui qui lui donnera une image edgy ou sophistiquée. C’est avant tout un design clair, efficace, compréhensible par vos visiteurs et qui facilite la navigation. Les heatmaps, tracks de clics et autres outils d’analyse comportementale sont non seulement très parlants visuellement, mais offrent de nombreux avantages, lorsqu’ils sont utilisés correctement.

En d’autres termes, ce sont des bons amis mais de mauvais maîtres. Il est judicieux de s’appuyer sur leurs résultats pour confirmer ou infirmer des bilans de campagnes de tests A/B, mais dangereux de concevoir toute une stratégie à partir de leurs résultats uniquement.

livre blanc ab testing kameleoon

Göze est Chief Evangelist à Kameleoon. ​Elle traque et révèle les bonnes pratiques et dernières tendances de l’optimisation de la conversion.

Des articles qui pourraient vous intéresser