Heatmap Hotjar

Heatmap, a quoi sert la carte de chaleur en UX design ?

Qu’est-ce qu’une Heatmap ?

La carte de chaleur ou heatmap permet de visualiser les données qui indiquent la façon dont les utilisateurs d’un site se déplacent sur une page. Pour cela, la carte utilise un code couleur simple : rouge pour les zones chaudes, c’est-à-dire les zones qui attirent l’intérêt du lecteur, et la couleur bleue pour les zones froides qui correspondent à des zones délaissées. 

À l’origine, la heatmap était employée par les ingénieurs en urbanisme parisiens telle une technique qui permettait la visualisation des données ou des informations. Ils avaient recours à différentes couleurs pour le marquage des plans de la ville afin de rendre les données statistiques plus claires et plus compréhensibles.

De nos jours, on retrouve l’usage de ces cartes thermiques dans plusieurs domaines d’application et dans plusieurs champs d’activité. L’exemple le plus couramment perceptible est la carte météorologique. Sur cette cartographie, des codes couleur indiquent la différence entre les zones de vague de chaleur, en rouge, et les régions accueillant une période de froid, représentées en bleu. 

Vous trouverez également des codes couleur appliqués dans les résultats des diagnostics énergétiques : du vert au rouge pour les classes de A ++++ à G. Une classification que vous retrouvez sur les appareils électroménagers par exemple. Les analyses de jeux sportifs font également usage des couleurs. Et dans le domaine qui nous intéresse, le marketing en ligne et les outils de diagnostic de site web.

Voyons à présent la structure d’une carte de chaleur. Une heatmap utilise donc un code de couleurs. Chaque couleur correspond à une température. De manière classique, la couleur rouge représente le « très chaud », la couleur orange pour le « modérément chaud », jaune pour « tiède », vert pour le « frais » et bleu pour le « froid ». Les transitions sont représentées par des dégradés entre les couleurs. 

Dans l’exemple de l’eye-tracking, ou l’oculométrie ou encore l’analyse de suivi oculaire, les zones représentées en rouge signifient que le regard de l’utilisateur s’attarde plus longuement sur une partie bien spécifique du site internet. Les zones en bleu sont les zones qui ont été survolées par les regards de l’internaute.

Le résultat de l’analyse montre une généralité qui se dessine en forme de « F », et est devenu une norme standardisée, communément utilisée dans le domaine du webmarketing et l’application de l’eye-tracking. Vous pouvez visiter le site https://heatmap.com/ qui vous montre quelques exemples de carte de chaleur.

L’activité de l’UX Designer est en étroite corrélation avec le marketing digital. En effet, les heatmaps sont également des outils d’analyse très intéressants pour les experts du Search Engine Optimisation, SEO.

Les contenus importants aux yeux de l’utilisateur sont mis en évidence et permettent d’améliorer le confort de navigation et donc l’expérience utilisateur. Les cartes thermiques fournissent aussi à l’équipe de développeurs et de designers des points d’amélioration dans la conception d’un projet de site web. Enfin, les référenceurs utilisent les heatmaps dans la planification de l’emplacement des éléments importants de chacune des pages du site.

Découvrez également les blogs UX à suivre.

Que peut-on voir à travers une Heatmap ? 

L’interprétation de ce que les codes couleurs peuvent révéler concerne par exemple les points des clics des utilisateurs, les mouvements de la souris et son itinéraire, mais aussi les mouvements oculaires des utilisateurs issus de la méthode de eye-tracking.

Que pouvons-nous analyser avec une Heatmap ?

Plusieurs outils vous permettent d’analyser le comportement des utilisateurs sur une interface. Les méthodes de tracking qui sont à votre disposition aboutissent toutes sensiblement à la même finalité.

Je vais vous présenter ici les méthodes les plus couramment utilisées, puis nous allons voir les points de vigilances à apporter quant à l’utilisation et à l’interprétation des résultats fournis par ces outils et enfin, je vais vous indiquer des conseils pour les mettre en pratique de la façon la plus simple et optimale possible.

Utilisation des Plugins et des Scripts

Grâce aux extensions disponibles sur le CMS de votre projet ainsi qu’aux scripts, vous avez la possibilité de contrôler entièrement les données enregistrées en ce qui concerne les points des clics et les mouvements de souris à travers votre site. Avec de l’expérience, vous allez pouvoir programmer les solutions de tracking qui répondent au mieux à vos attentes. Cependant, il existe des outils prêts à l’emploi tel que Hotjar.

Sinon, vous pouvez également utiliser la base de documentation de JavaScript dans laquelle vous trouverez toutes les informations et les étapes de configuration de votre CMS pour le paramétrage du suivi de mouvements de touchpad ou de clics. Avec les données récoltées, une heatmap pourra être élaborée.

Faire des simulations de cartes thermiques

La seconde solution est de créer des situations de simulation de heatmap. Cela vous permet de gagner du temps, mais aussi de faire des économies. Ce choix est donc en fonction de l’investissement dont vous disposez dans le projet. Dans tous les cas, pour faire une simulation complète de cartes thermiques, de nombreux outils en ligne simulent les comportements potentiels de vos visiteurs en se basant sur des données et des algorithmes.

Parmi ces outils, EyeQuant et Feng-GUI sont les plus populaires. Une fois que les logiciels ont effectué leur analyse comportementale, ils vous fournissent une heatmap qui illustre les données récoltées.

Utiliser des outils d’analyse payant

Pour une analyse approfondie et complète du comportement des utilisateurs sur votre site ou application, des outils payants sont facilement accessibles et présentent l’avantage de ne nécessiter aucune connaissance informatique.

En règle générale, leur principe de fonctionnement est simple. Les outils incluant JavaScript permettent l’enregistrement et l’exploitation des données indispensable à la réalisation des heatmaps. Sous forme d’abonnement, vous n’avez qu’à intégrer les lignes de codes puis indiquer les éléments qui doivent être analysés.

En fonction du fournisseur que vous avez choisi, il est possible de suivre en temps réel les points de clic de l’utilisateur, ainsi que les déplacements de la souris, mais aussi les défilements qu’il effectue sur les différentes pages qu’il visite. Parmi ces outils d’analyse très complets, vous trouverez par exemple Crazy Egg, MouseFlow, ou encore ClickTale

Voyons à présent les points de vigilance sur lesquels vous devez passer plus de temps pour une analyse de comportement utilisateur optimale. Lorsque vous réalisez une carte de chaleur qui vous permet d’étudier le comportement adopté par l’utilisateur sur votre site, cela vous permet de constater si la présentation et la configuration de votre site proposent l’usabilité que vous avez prévue, et surtout que celle-ci soit intuitive pour l’internaute. 

Cependant, il semble important de bien conserver l’analyse des résultats dans un contexte spécifique. En d’autres termes, il est peu judicieux de généraliser une observation au risque de fausser toute votre stratégie de développement. Je vais vous donner un exemple très répandu et simple à résoudre.

Si votre heatmap indique que les utilisateurs cliquent à plusieurs reprises sur un lien précis, est-ce que cela signifie qu’ils ont atteint leur objectif qu’est celui de trouver la réponse à leur question ? Si vous en tirez une conclusion trop hâtive, c’est votre projet tout entier qui change de direction. L’idéal est de plutôt réfléchir à la raison pour laquelle les visiteurs cliquent aussi souvent sur ce lien.

Est-ce dû à l’emplacement du lien en question ? La taille de la police, l’ancre appliquée, ou la couleur du bouton ? La réponse à ce type de questions vous permettra d’avoir une analyse plus pertinente des résultats fournis par les outils.

Comment analyser correctement les résultats des outils d’analyse des comportements des utilisateurs ?

En mettant les résultats des heatmaps en corrélation avec d’autres informations complémentaires. Pour cela, deux paramètres requièrent une attention particulière de votre part : le temps passé sur chaque page et le taux de rebond.

En résumé, la meilleure façon de vous assurer de la bonne utilisation d’un élément de votre projet est de mettre en place la méthode de l’interview de l’utilisateur. Comme nous l’avons vu dans les chapitres précédents, votre meilleur indicateur en ce qui concerne l’expérience utilisateur provient de l’utilisateur lui-même !

Aussi, dans l’interprétation des résultats fournis par les outils d’analyse, il est indispensable de procéder aux analyses sur les sites qui brassent un trafic conséquent. Ce paramètre très important sera la signature de la fiabilité des explorations et des données récoltées ; ce qui, de façon collatérale participera à une meilleure interprétation des datas.

Le dernier point de vigilance à mettre en exergue à propos de la heatmap, concerne le dynamisme de votre site. En effet, si vous avez un site dynamique, c’est-à-dire qui est amené à être souvent modifié, dans ce cas la carte thermique devient très rapidement obsolète.

Vous avez probablement la possibilité de vous concentrer sur les éléments de navigations fixes tels que le menu. En revanche l’analyse de l’impact sur les contenus trop changeants et fluctuants risque d’être un peu plus complexe.

Partagez votre amour