Utilisation des "cartes de chaleurs", pour analyser le comportement des visiteurs de votre site web

Posted by Hypee | Sat 7, May 2011

Les "cartes de chaleurs" (heatmaps) existent déjà depuis quelques années (TechCrunch a écrit un article en 2006), mais il semble que peu de webmasters proposent ce type de solution à leurs clients lors de la création d'un site web. Nous sommes tellement focalisés sur l'optimisation des sites pour le référencement, dans l'optique de les rendre facilement accessibles par les moteurs de recherche, que nous oublions parfois de travailler l'aspect ergonomique pour les visiteurs "humains".

Les "heatmaps" ne sont probablement pas appropriées pour tout type de projet, mais elles peuvent apporter des informations cruciales pour certains secteurs d'activités, comme les sites de eCommerce.

Quel est le principe des cartes de chaleur ?

En ajoutant quelques ligne de code de Javascript dans les pages web que vous voulez analyser, vous êtes à même de détecter où les utilisateurs cliquent.

Le boulot des outils de "carte de chaleur" est de synthétiser l'ensemble des "clicks" au sein d'une représentation graphique simple, permettant de visualiser quelles zones d'une page rencontrent le plus de succès et lesquelles ne sont jamais utilisées. Les zones rouges représentent les points "chauds" et les zones bleues les liens moins fréquentées.

Plusieurs solutions commerciales et open sources sont disponibles pour ajouter cette fonctionnalité sur votre site web.

Devez-vous utiliser les cartes de chaleur ?

Si vous visitez les sites des solutions commerciales de cartes de chaleur, des tonnes de raisons d'acheter leur produit vous seront données :
- Opérer des réglages sur l'organisation de votre site pour augmenter le taux de conversion,
- Repérer les zones les plus propices pour positionner des bandeaux publicitaires afin de leur donner la meilleure visibilité,
- Trouver des zones qui sont sous-exploitées et faire les adaptions nécessaires pour s'assurer que les liens essentiels sont utilisés,
- Découvrir des comportements inattendus de la part des visiteurs (clicks sur une image qui n'a pas de lien par exemple),
...

Notre avis: Il y a peu de raisons pour ne pas tester ce type d'outil, faites un essai et décidez si cela vous aide à améliorer votre site.

Si vous avez un minimum d'expérience en développement, commencez par installer une solution open sources, sinon utilisez la période d'essai des outils commerciaux.

La solution de Clickdensity

Exemple de carte de chaleur, où l'on peut voir que leurs visiteurs vont massivement voir "comment ça marche" mais que le taux de transformation vers l'offre d'essai est moindre.

Clickdensity heatmap

Exemple d'une carte des "clicks".

Clickdensity click map

Grille des prix

Clickdensity price chart

Solution de Crazyegg

Fonctionnalités intéressantes : 5 types de visualisation, les plus notables étant la carte de chaleur et la "scrollmap" (les visiteurs font-ils défiler vos pages pour voir le contenu qui n'apparaît pas immédiatement sur l'écran) et la possibilité de zoomer pour avoir une vision d'ensemble sur les pages qui contiennent beaucoup de contenu.

CrazzyEgg 5 visualizations

Exemple de carte de chaleur

Crazyegg heatmap example

Exemple de "scrollmap"

Vos visiteurs vont-il voir les contenus qui nécessitent de "scroller" ? Non ! (En tout cas, c'est ce que suggère CrazyEggs)

Crazyegg scrollmap example

Grille de prix

Crazyegg heatmap solution price chart

Picnet's Mouse Eye tracking

Exemple de carte de chaleur

Picnet, Mouse Eye Tracking heat map

Configuration de la carte de chaleur

Picnet, Mouse Eye Tracking configuration

Grille de prix

Picnet, Mouse Eye Tracking price chart

Labs media "clickheat", solution open source

La seule solution open source packagée que nous ayons trouvé. Les fonctionnalités et les options de configuration sont restreintes mais l'outil fait ce qu'on attend de lui, des cartes de chaleur !

Des plugins pour les outils de statistiques "phpMyVisites" et "Piwik" existent.

MediaLabs clickheat example

Impact sur les performances du serveur ?

Si vous sélectionnez cette solution open source, elle sera installée sur votre serveur et vous pouvez vous demander (vous devriez) si cela aura un impact sur la charge du serveur et sur ses performances.

Concrètement, quand vous enregistrez le click d'un utilisateur, vous ne générez qu'un seul appel supplémentaire vers votre serveur. Ce sera complètement transparent du côté utilisateur. Cependant, si vous avez un site web à gros trafic, cela va doubler la charge de votre serveur, ce qui peut être un problème si vous n'êtes pas sûr des ressources disponibles.

Dans ce cas, l'astuce consiste à envoyer les requêtes vers une page statique (au lieu de charger le moteur PHP/Java/ASP/Ruby/Python) et de différer l'analyse par Clickheat, comme expliqué sur le site de Labsmedia :

ClickHeat server load optimization

Vous êtes un développeur et vous voulez créer votre propre solution ?

Le principe des cartes de chaleur vous plaît, mais vous n'êtes pas convaincu par les solutions existantes et vous voulez développer votre propre moteur d'analyse ?
Jetez un oeil aux liens suivants, ils vous donneront des pistes à suivre :

Exemple Javascript/PHP sur css-trick.

Javascript/PHP : http://nevyan.blogspot.com/2006/12/free-website-click-heatmap-diy.html

Javascript/Ruby sur blog.corunet.com.

Conclusion

Si vous avez suffisamment de trafic sur votre site et que vous cherchez des pistes pour l'améliorer, nous pensons que ce type de solution vaut le coup d'être testé !

Si vous décidez de vous jeter à l'eau ou que vous avez déjà mis en place des "heatmaps",  faites-nous un coucou !



Répondre à ce billet

0 Commentaires

Votre réponse