Maps de défilement : 5 façons d'optimiser l'expérience utilisateur et d'augmenter les conversions

Les heatmaps de défilement recueillent des informations précieuses sur le comportement des utilisateurs, vous aidant ainsi à mesurer l'engagement des visiteurs et à déterminer où vous perdez leur attention sur votre site web. Les maps de défilement collectent rapidement des données sur la façon dont les visiteurs font défiler votre site web, ce qui vous permet de repérer les axes d'amélioration de l'expérience utilisateur (UX), d'apporter des changements et, en fin de compte, d' augmenter les conversions.

À la fin de cet article, vous saurez tout ce qu'il faut savoir sur les maps de défilement: ce qu'elles sont, comment en créer une et comment les utiliser pour trouver des informations exploitables qui dynamiseront votre expérience utilisateur.

Qu'est-ce qu'une map de défilement ?

Une map de défilement est un type de heatmap du site web qui montre visuellement jusqu'où les utilisateurs font défiler une page sur ordinateur, tablette ou mobile. Les maps de défilement utilisent un dégradé de couleurs pour représenter les parties les plus vues et les moins vues d'une page, de la partie chaude (populaire) à la partie froide (impopulaire). Le rouge indique les éléments de votre page que les utilisateurs voient le plus, tandis que le bleu représente une interaction faible ou inexistante avec les clients.

Les maps de défilement ne se limitent pas à la couleur : elles vous indiquent également le pourcentage d'utilisateurs qui se sont aventurés plus loin sur la page. Un score de ligne de flottaison moyenne s'affiche aussi, ce qui vous permet de visualiser facilement la partie de la page que la plupart des visiteurs voient avant de commencer à la faire défiler.

Maps de défilement et heatmaps

La "heatmap" (ou"heat map") est un terme générique qui renvoie à différents types de données d'analyse visuelle du web. Les maps de défilement sont un type de heatmap où les couleurs les plus chaudes indiquent les sections les plus consultées de la page, plutôt que les éléments avec le plus de clics (ou d'appuis). Ces données sont, sans surprise, relevées par une map des clics).

En d'autres termes, les maps de défilement génèrent des zones de chaleur de votre site web, de votre application ou de vos pages de produits de haut en bas, ressemblant ainsi davantage à un arc-en-ciel vertical qu'aux motifs " confettis " typiques d'autres types de heatmap comme les maps des clics ou les maps de mouvement.

Jetez un coup d'œil à ces exemples de heatmaps en action pour comparer les maps de défilement aux autres types de maps.

5 façons d'utiliser les maps de défilement

Vous pouvez être aussi créatif que vous le souhaitez lorsqu'il s'agit de repérer des modèles de données et des axes d'optimisation de l'expérience utilisateur . Pour vous aider, voici le top 5 des façons les plus courantes d'utiliser les maps de défilement.

1. Découvrez où vous perdez l'attention des visiteurs

Les maps de défilement montrent jusqu'où les utilisateurs descendent sur la page (les données en pourcentage vous aideront également à le comprendre) : les couleurs plus froides (bleues) montrent un nombre plus faible de personnes ayant vu cette section de votre page.

Si votre objectif est d'accroître et de maintenir l'attention des utilisateurs afin qu'ils fassent défiler la page plus bas (par exemple, si vous avez une longue page de destination et que vous voulez vous assurer qu'ils voient toutes les informations qu'elle contient), les données de la map de défilement vous aideront à réfléchir de manière pratique à la façon dont vous pouvez modifier la conception sur l'expérience utilisateur ou le texte pour réduire les abandons et augmenter les taux de conversion.

2. Repérez les faux fonds

Parfois, vos visiteurs ne se rendent pas compte qu'il y a encore du contenu plus bas sur la page. C'est ce qu'on appelle un "faux fond", qui peut être causé par des espaces blancs, des sauts de ligne ou des blocs qui perturbent et frustrent les utilisateurs. En utilisant les pourcentages de la map de défilement, vous pouvez "tester la profondeur" de vos pages pour vérifier les faux fonds et voir combien de visiteurs font défiler un certain élément.

3. Découvrez si les utilisateurs voient le contenu au-dessus de la ligne de flottaison moyenne

La partie d'une page web qu'on dit "au-dessus de la ligne de flottaison moyenne" renvoie à la zone que la majorité des visiteurs verront en arrivant. Cette "ligne" est simplement le point de coupure en bas de l'écran de l'utilisateur avant qu'il n'ait besoin de faire défiler la page.

Une map de défilement calcule automatiquement la ligne de flottaison moyenne de votre page pour les utilisateurs sur ordinateur et sur mobile. En examinant les données de la map de défilement sur la ligne de flottaison moyenne, vous pouvez placer des éléments importants (comme les appels à l'action) au-dessus de la ligne de flottaison de manière efficace sur plusieurs appareils, pour promouvoir l'engagement des utilisateurs dès qu'ils arrivent sur la page.

4. Déterminez si les utilisateurs peuvent trouver ce dont ils ont besoin

On pourrait penser que l'objectif de l'optimisation d'une page à l'aide d'une map de défilement est d'amener le plus grand nombre possible de personnes à faire défiler la page jusqu'en bas. Mais ce serait faux. Dans certains cas, les utilisateurs font défiler la page parce qu'ils ne peuvent pas naviguer sur votre site pour trouver le contenu utile dont ils ont besoin.

L'agence numérique britannique Epiphany a amélioré le site de e-commerce de son client en ajoutant des filtres aux pages de catégories après que les données de la map de défilement ont montré que les utilisateurs devaient trop faire défiler la page pour trouver ce dont ils avaient besoin (voici le cas d'étude complet sur la heatmap).

Parfois, dans le design, on peut vraiment faire plus avec moins.

5. Déterminez si votre page offre une bonne expérience multi-appareils

Les utilisateurs ne se comportent pas forcément de la même manière sur ordinateur et sur mobile. Si vous optimisez un site web réactif (qui redimensionne la même page pour chaque appareil), une heatmap de défilement vous montrera où les utilisateurs arrêtent de faire défiler la page sur mobile et sur ordinateur, pour que vous puissiez concevoir une expérience multi-appareils qui fonctionne pour tous vos utilisateurs.

Les données relatives au défilement sont là pour vous aider à concevoir des expériences utilisateur parfaites au pixel près. Vous pouvez vous référer aux données de la heatmap pour savoir exactement où vous devez placer un CTA pour capter l'attention des utilisateurs sur ordinateur et sur mobile.

Comment configurer des maps de défilement avec Hotjar

Mettre en place une nouvelle map de défilement, c'est facile. Si vous n'êtes pas encore client de Hotjar, lancez-vous avec un essai gratuit et commencez à utiliser nos heatmaps.

Lorsque vous créez une nouvelle heatmap dans Hotjar, cela génère automatiquement tous les types de heatmaps (des clics, de rage clicks, de mouvement, de défilement et zones d'engagement). Vous n'avez donc rien de plus à faire pour configurer une map de défilement.

Étape 1 : ajoutez le code de suivi Hotjar à votre site web

Vous pouvez installer le code de suivi Hotjar de plusieurs façons, notamment via Google Tag Manager et le plugin WordPress.

Étape 2 : activez la "capture de session"

Les heatmaps continues sont générées à partir des sessions. Lorsque la "capture de session" est activée, les heatmaps sont disponibles automatiquement et commencent à collecter des données sur le comportement des utilisateurs. Vous devez donc d'abord vérifier que la "capture de session" est activée en cliquant sur le widget de couverture du trafic dans le coin supérieur droit de la page.

Si la capture de session n'est pas activée, vous verrez un bouton orange "Capture de session désactivée" en haut de la page, qui vous conduira à la page de configuration de la capture de session.

Étape 3 : commencez à utiliser les heatmaps continues et sélectionnez votre "groupement de données".

Cliquez sur Heatmaps dans le menu de navigation de gauche.

Cliquez ensuite sur le bouton "Nouvelle heatmap" pour commencer.

Les heatmaps peuvent afficher des données provenant d'une seule URL spécifique ou d'un groupe d'URL correspondant à vos critères de ciblage. Lorsque vous affichez des données provenant d'un groupe d'URL, vous ne verrez qu'une seule capture d'écran pour votre heatmap, mais les métriques qui apparaissent au-dessus de la capture d'écran seront agrégées à partir de toutes les URL correspondant à vos critères de ciblage.

Étape 4 : saisissez une URL de votre site et sélectionnez un type de heatmap

Saisissez l'URL de la page que vous souhaitez suivre, puis sélectionnez le type de heatmap que vous souhaitez mettre en place (n'oubliez pas que Hotjar collectera des données pour tous les types de heatmap, vous pouvez donc basculer vers un autre type après en avoir créé une).

Votre sélection vous ramènera au dashboard Hotjar où vous pourrez modifier la heatmap et filtrer les données collectées. Pour plus d'informations sur la configuration d'une heatmap dans Hotjar, cliquez ici.

Étape 5 : sélectionnez les filtres en fonction des critères de votre heatmap

Mettez à jour la plage de dates et ajoutez les filtres de heatmap pour n'afficher que les sessions correspondant à vos critères, tels que la durée de la session, le comportement et les caractéristiques de l'utilisateur. Il peut s'agir de leur fonction, de leur pays et même de leur langue.

Pour plus de détails sur tous les filtres de heatmap de Hotjar et des exemples de cas d'utilisation, lisez cet article : Cas d'utilisation pour le filtrage des heatmaps.

Voilà, votre première map de défilement est en ligne ! Voici à quoi elle ressemblera depuis le dashboard Hotjar :

Vous pouvez faire basculer votre heatmap pour afficher les sessions sur ordinateur, tablette ou mobile. Pour afficher les données de la map de défilement, cliquez simplement sur "Défilement" dans les options de type de heatmap. Vous pouvez également afficher et télécharger / exporter toutes les données brutes. À vous de jouer !