L\u2019erreur est monumentale. En r\u00e9alit\u00e9, effectuer des changements au hasard est le meilleur moyen :<\/p>\n
- \n
- De faire baisser la conversion.<\/li>\n
- De perdre des ventes.<\/li>\n
- De faire fuir les visiteurs.<\/li>\n<\/ul>\n
La v\u00e9rit\u00e9, c\u2019est que chaque site est diff\u00e9rent<\/strong>. Ce qui a fonctionn\u00e9 pour Pierre, Paul ou Jacques ne fonctionnera pas forc\u00e9ment sur votre site, et vice-versa.<\/p>\n
Ce dont vous avez besoin, c\u2019est que vos visiteurs vous disent ce qu\u2019il faut changer. Pour cela, on utilise les heatmaps.<\/div>\nQu’est-ce qu’une heatmap ?<\/h2>\n
Les heatmaps (Heat Maps), ou cartes de chaleur, sont des repr\u00e9sentations visuelles de l\u2019attention, de l\u2019engagement et des interactions g\u00e9n\u00e9r\u00e9es par vos visiteurs<\/strong> lorsqu\u2019ils naviguent sur votre site.<\/p>\n
Il s\u2019agit d\u2019une analyse que vous utilisez pour \u00e9tablir une \u00ab carte \u00bb de la concentration d\u2019interaction ou d\u2019attention sur votre page.<\/p>\n
Mais regardez plut\u00f4t par ici :<\/p>\n
![\"Exemple](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/heatmap-website.jpg\")
<\/p>\nSource : pixeller.co<\/em><\/p>\n
En couleurs chaudes<\/strong>, on constate l\u2019essentiel de l\u2019attention tandis que les couleurs plus froides<\/strong> renvoient aux zones les plus ignor\u00e9es de cette page d\u2019accueil.<\/p>\n
En analysant les interactions de vos visiteurs avec les pages de votre choix, vous pouvez effectuer les changements pr\u00e9cis qui permettront d\u2019augmenter la conversion.<\/p>\n
\u00c0 ce stade, c\u2019est presque de la magie non ?<\/p>\n
Laissez vos propres visiteurs vous dirent quelles sont les parties \u00e0 changer pour augmenter vos ventes puis mettre en place les changements en mesurant leur efficacit\u00e9, par exemple gr\u00e2ce \u00e0 l’A\/B testing<\/a>.<\/p>\n
Quand utiliser une Heatmap sur mon site web ?<\/h2>\n
Les heatmaps sont extr\u00eamement utiles. Elles mesurent l\u2019attention, l\u2019engagement et m\u00eame la r\u00e9partition des clics sur votre site.<\/p>\n
Pour vous permettre de mieux comprendre, voici quelques unes des raisons principales pour lesquelles les cartes de chaleur sont utilis\u00e9es :<\/p>\n
- \n
- Mesurer l\u2019engagement<\/strong>. Vous \u00e9crivez des articles et vous vous demandez jusqu\u2019o\u00f9 lisent vos lecteurs ? L\u2019utilisation d\u2019une heatmap vous permet de visualiser le \u00ab scroll \u00bb des visiteurs et de comprendre o\u00f9 ils interagissent. Si vous constatez qu\u2019une infime partie seulement atteint votre call-to-action<\/a>, il est peut-\u00eatre temps de changer quelques \u00e9l\u00e9ments.<\/li>\n
- Mesurer les actions<\/strong>. O\u00f9 cliquent mes visiteurs ? Cliquent-ils sur le bon bouton ? Votre carte de chaleur vous permet de voir si vos visiteurs agissent de la fa\u00e7on attendue et de d\u00e9couvrir les obstacles qui les en emp\u00eachent.<\/li>\n
- Mesurer l\u2019attention<\/strong>. Quels sont les titres qui attirent l\u2019attention ? Quelles images attirent l\u2019attention ? Quels \u00e9l\u00e9ments d\u00e9tournent l\u2019attention du contenu principal ? Mes visiteurs voient-ils mon formulaire ? En comprenant ces probl\u00e9matiques, vous pouvez mettre en place les changements qui augmenteront votre conversion.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/example-heatmap.jpg\")
<\/p>\nSource : unbounce.com<\/em><\/p>\n
\nGr\u00e2ce \u00e0 ces r\u00e9ponses, vous pouvez r\u00e9pondre vous-m\u00eame aux questions qui vous ent\u00eatent :<\/strong><\/p>\n
- \n
- O\u00f9 placer le contenu le plus important ?<\/li>\n
- Comment bien utiliser mes images, mes vid\u00e9os ?<\/li>\n
- O\u00f9 part l\u2019attention de mes visiteurs ?<\/li>\n
- O\u00f9 proposer mon produit, mon service ?<\/li>\n<\/ul>\n<\/div>\n
Maintenant que vous \u00eates plus familiers avec le concept de \u00ab heat map \u00bb, vous vous demandez peut-\u00eatre s\u2019il existe plusieurs types de cartes de chaleur \u00e0 analyser. Et vous avez raison.<\/p>\n
Quelle(s) Heatmap(s) dois-je utiliser ?<\/h2>\n
La plupart des solutions de heatmap donnent la possibilit\u00e9 de g\u00e9n\u00e9rer des cartographies de votre site sous plusieurs angles<\/strong>.<\/p>\n
L\u2019id\u00e9e est de jongler entre ces diff\u00e9rentes cartes pour r\u00e9v\u00e9ler les comportements de vos visiteurs.<\/p>\n
La Heatmap ou Click Heat Map<\/h3>\n
Elle permet de quantifier l\u2019action. C\u2019est une repr\u00e9sentation visuelle de tous les clics de vos visiteurs sur votre page. Cette \u00ab map \u00bb g\u00e9n\u00e8re des donn\u00e9es pr\u00e9cieuses puisqu\u2019elle vous permet de comprendre exactement o\u00f9 interagissent vos visiteurs.<\/p>\n
D\u00e8s qu\u2019une personne clique \u00e0 un endroit pr\u00e9cis sur votre site, la heatmap marque cet emplacement d\u2019un point lumineux. Si vous constatez des zones lumineuses, c\u2019est ici que l\u2019essentiel des clics se produit.<\/p>\n
![\"Exemple](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/click-heatmap.jpg\")
<\/p>\nSource : sumo.com<\/em><\/p>\n
En identifiant rapidement les \u00ab points d\u2019action \u00bb de votre site, vous constatez imm\u00e9diatement si vos visiteurs cliquent aux endroits voulus. Sur cette capture de Sumo, on voit que les outils \u00ab SHARE \u00bb et \u00ab IMAGE SHARER \u00bb sont les moins populaires.<\/p>\n
La Scroll-Map ou \u00ab Analyse du contenu \u00bb<\/h3>\n
La scrollmap vous permet de comprendre \u00e0 quelle profondeur descendent vos visiteurs lorsqu\u2019ils \u00ab scrollent \u00bb une page et surtout : quels \u00e9l\u00e9ments attirent l\u2019attention de vos visiteurs et sur quoi s\u2019attardent-ils ?<\/p>\n
En utilisant la scrollmap, vous identifiez si vos visiteurs \u00ab voient \u00bb les bons \u00e9l\u00e9ments de votre site ou si au contraire, ils s\u2019attardent sur des \u00e9l\u00e9ments peu importants.<\/p>\n
\nL\u2019objectif : identifier les points forts du site et restructurer votre navigation jusqu\u2019\u00e0 ce que vos visiteurs passent le plus de temps possible sur les \u00e9l\u00e9ments qui comptent.<\/p>\n<\/div>\n
![\"Example](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/scrollmap.png\")
<\/p>\nsource : nguyenvincent.com<\/em><\/p>\n
Sur cet article qui traite de r\u00e9f\u00e9rencement naturel, on s\u2019aper\u00e7oit que l\u2019image et les deux lignes qui lui succ\u00e8dent sont les plus populaires : environ 85% des visiteurs ont vus ces \u00e9l\u00e9ments.<\/p>\n
La Heatmap \u00ab Pourcentage de clics \u00bb<\/h3>\n
La carte pourcentage de clics arrive en renfort de la heat map classique. Elle permet de voir, \u00e9l\u00e9ment par \u00e9l\u00e9ment, combien de clics ont \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9s par telle image ou tel call-to-action<\/strong>. Le pouvoir de quantifier les clics \u00e9l\u00e9ment par \u00e9l\u00e9ment est extr\u00eamement important.<\/p>\n
Cela permet de :<\/p>\n
- \n
- Comprendre l\u2019importance qu\u2019accorde le visiteur \u00e0 chaque \u00e9l\u00e9ment<\/li>\n
- \u00c9viter que les visiteurs ne cliquent sur des images sans lien<\/li>\n<\/ul>\n
![\"Heatmap](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/heatmap-click-percent.png\")
<\/p>\nSource : nguyenvincent.com<\/em><\/p>\n
Sur cette carte du pourcentage de clics, on voit que la section \u00ab me contacter \u00bb re\u00e7oit plus de clics que la page \u00ab pr\u00e9sentation \u00bb, ce qui indique que les utilisateurs s\u2019orientent vers ce qu\u2019attend le propri\u00e9taire du site : une prise de contact.<\/p>\n
La Heatmap \u00ab Confetti \u00bb<\/h3>\n
Bien que similaire \u00e0 la heatmap classique, l\u2019approche \u00ab confetti \u00bb vous permet de voir tous les clics effectu\u00e9s sur votre page contrairement \u00e0 un aper\u00e7u de la \u00ab densit\u00e9 \u00bb. Cela vous permet de voir si des zones non-cliquables sont cliqu\u00e9es par des utilisateurs : vous auriez alors tout int\u00e9r\u00eat \u00e0 rendre ces zones cliquables.<\/p>\n
![\"Exemple](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/confetti-heatmap.jpg\")
<\/p>\nSource : crazyegg.com<\/em><\/p>\n
\u00c0 ce stade, vous en savez d\u00e9j\u00e0 plus sur les diff\u00e9rences fa\u00e7ons d\u2019utiliser les heatmaps.<\/p>\n
Il existe cependant une autre fa\u00e7on d\u2019analyser le comportement de vos utilisateurs sur votre site : le eye-tracking.<\/strong><\/p>\n
Diff\u00e9rence entre Heat map et Eye-tracking<\/h2>\n
Si les heat maps se concentrent principalement sur l\u2019analyse du parcours de la souris et des clics, l\u2019eye-tracking analyse le parcours du regard des utilisateurs.<\/p>\n
L\u2019int\u00e9r\u00eat de l\u2019eye-tracking est de comprendre le chemin parcouru par le regard de l\u2019utilisateur afin d\u2019analyser les zones d\u2019int\u00e9r\u00eat et d\u2019attention sur lesquelles s\u2019attardent vos utilisateurs.<\/p>\n
![\"Exemple](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/eye-tracking.jpg\")
<\/p>\nSource : nngroup.com<\/em><\/p>\n
Sur le m\u00eame principe que la heatmap, les zones de chaleur repr\u00e9sentent les endroits o\u00f9 l\u2019attention des lecteurs s\u2019est le plus port\u00e9e.<\/p>\n
Bien que tr\u00e8s utile, l\u2019eye-tracking est un dispositif plus difficile \u00e0 mettre en place que les heatmaps. Il demande de l\u2019\u00e9quipement sp\u00e9cifique dont peu d\u2019agences disposent.<\/p>\n
Si l\u2019eye-tracking vous int\u00e9resse, il existe des solutions bas\u00e9es sur l\u2019IA telles que Feng-Gui<\/a> ou EyeQuant<\/a> qui vous permettront de simuler un eye-tracking \u00e0 l\u2019aide d\u2019algorithmes.<\/p>\n
Fonctionnalit\u00e9s cl\u00e9s d\u2019une solution de Heatmap<\/h2>\n
Quand vous cherchez un outil de carte de chaleur, faites attentions aux \u00e9l\u00e9ments suivants :<\/p>\n
- \n
- Segmentation comportementale<\/strong> : l\u2019outil de heatmap doit permettre d\u2019afficher les cartes de chaleur propres \u00e0 un type d\u2019internautes que vous d\u00e9finissez \u00e0 l\u2019aide de crit\u00e8res de ciblage et de segmentation (ex: nouveaux visiteurs, visiteurs ayant converti, visiteurs venant de vos campagnes de liens sponsoris\u00e9s\u2026).<\/li>\n
- Comparaison de cartes<\/strong> : vous devez pouvoir comparer facilement et visuellement les cartes correspondantes \u00e0 diff\u00e9rents segments d\u2019utilisateurs.<\/li>\n
- Regroupement par template de pages<\/strong> : avoir une carte de chaleur pour une page sp\u00e9cifique peut rendre l\u2019analyse compliqu\u00e9e si votre page est une fiche produit et que vous en avez des centaines, voire des milliers. Il faut pouvoir agr\u00e9ger les r\u00e9sultats pour toutes les pages d\u2019un m\u00eame type.<\/li>\n
- Heatmap responsive<\/strong> : l\u2019outil de carte de chaleur doit fonctionner pour les pages consult\u00e9es depuis un mobile ou une tablette. Les actions sp\u00e9cifiques \u00e0 ces terminaux mobiles doivent \u00eatre enregistr\u00e9es, comme les touch, scroll et swipe. Lors de l\u2019analyse vous devez pouvoir dissocier les comportements et sessions de navigation faites depuis un mobile ou un ordinateur pour analyser correctement une carte de chaleur.<\/li>\n
- Cartes exportables<\/strong>. Cette fonctionnalit\u00e9 importante vous aide \u00e0 communiquer facilement les r\u00e9sultats \u00e0 vos collaborateurs.<\/li>\n
- Cartes de chaleur dynamiques<\/strong> : vous devez pouvoir visualiser les clics sur les \u00e9lements dynamiques : menu d\u00e9roulant, slider, carrousel, \u00e9l\u00e9ments charg\u00e9s en AJAX ou via un framework Javascript comme React.js ou Angular.js.<\/li>\n
- Heatmap r\u00e9troactive<\/strong> : le design de votre site a chang\u00e9 depuis la capture de la carte de chaleur ? La solution de heat map doit pouvoir conserver les r\u00e9sultats pr\u00e9c\u00e9dents sur l\u2019affichage de l\u2019\u00e9poque et ne pas simplement superposer les r\u00e9sultats sur votre nouveau design, sinon les r\u00e9sultats sont incoh\u00e9rents.<\/li>\n<\/ul>\n
Obtenir plus de conversions : combinez Heatmap et A\/B Testing<\/h2>\n
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.<\/p>\n
Question : comment mesurer l\u2019efficacit\u00e9 des modifications que j\u2019effectue ? Une seule solution : A\/B testez vos modifications.<\/div>\nLe principe : cr\u00e9er des versions diff\u00e9rentes d\u2019une page, publicit\u00e9 ou landing page<\/a> afin de comparer les diff\u00e9rences de performance.<\/p>\n
En combinant Heat Map + A\/B Testing, vous obtenez une m\u00e9thode en 3 \u00e9tapes :<\/p>\n
- Comparaison de cartes<\/strong> : vous devez pouvoir comparer facilement et visuellement les cartes correspondantes \u00e0 diff\u00e9rents segments d\u2019utilisateurs.<\/li>\n
- Segmentation comportementale<\/strong> : l\u2019outil de heatmap doit permettre d\u2019afficher les cartes de chaleur propres \u00e0 un type d\u2019internautes que vous d\u00e9finissez \u00e0 l\u2019aide de crit\u00e8res de ciblage et de segmentation (ex: nouveaux visiteurs, visiteurs ayant converti, visiteurs venant de vos campagnes de liens sponsoris\u00e9s\u2026).<\/li>\n
- Mesurer les actions<\/strong>. O\u00f9 cliquent mes visiteurs ? Cliquent-ils sur le bon bouton ? Votre carte de chaleur vous permet de voir si vos visiteurs agissent de la fa\u00e7on attendue et de d\u00e9couvrir les obstacles qui les en emp\u00eachent.<\/li>\n
- Mesurer l\u2019engagement<\/strong>. Vous \u00e9crivez des articles et vous vous demandez jusqu\u2019o\u00f9 lisent vos lecteurs ? L\u2019utilisation d\u2019une heatmap vous permet de visualiser le \u00ab scroll \u00bb des visiteurs et de comprendre o\u00f9 ils interagissent. Si vous constatez qu\u2019une infime partie seulement atteint votre call-to-action<\/a>, il est peut-\u00eatre temps de changer quelques \u00e9l\u00e9ments.<\/li>\n
![\"Exemple](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/heatmap-ab-testing.jpg\")
<\/p>\n![\"Exemple](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/.\/heatmap-ab-testing-results.jpg\")
<\/p>\n