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.

💡Conseil de pro : lorsque vous créez une heatmap dans Contentsquare, l'outil Heatmaps collecte automatiquement des données pour tous les types de heatmaps : défilement, clics, rage click set mouvement.

Vous pouvez même combiner toutes les données de la heatmap en une seule vue avec la map des Zones d'Engagement. Cette visualisation vous aide à identifier rapidement les éléments de la page avec lesquels les utilisateurs interagissent le plus, afin que vous puissiez valider l'expérience utilisateur de cette page et vous assurer de son optimisation pour l'engagement.

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.

💡Conseil de pro : combinez des maps de défilement avec des Session Replay d'utilisateurs individuels (ou rediffusions de sessions) et observez comment les visiteurs interagissent réellement avec la page.

Avec Contentsquare, vous pouvez facilement faire un zoom arrière à partir d'un seul enregistrement pour observer des tendances plus larges avec des heatmaps, ou faire un zoom avant à partir d'une heatmap pour voir les enregistrements des utilisateurs qui interagissent avec une page, afin que vous puissiez mieux comprendre à la fois l'expérience individuelle et l'expérience globale de l'utilisateur.

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.

💡Conseil de pro : La map des rage clicks de Contentsquare permet de savoir quand un utilisateur clique sur un élément de façon répétée, en s'attendant à une interaction qui ne se produit pas, ce qui entraîne une frustration et un abandon rapide de votre site. Ces heatmaps sont idéales pour identifier les bugs du site web et d'autres zones de frustration qui pourraient être à l'origine du taux de rebond élevé d'une page.

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.

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

💡Conseil de pro : pour obtenir encore plus d'informations sur le comportement des utilisateurs, mettez en place une enquête sur la page avec l'outil Surveys et posez des questions du type "Avez-vous trouvé ce que vous cherchiez aujourd'hui ?" Ces données qualitatives vous donneront d'autres éléments de contexte lorsque vous examinerez les données quantitatives des heatmaps.

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.

💡Conseil de pro : en général, les pages optimisées pour les mobiles ont tendance à être plus courtes, mais ne suivez pas aveuglément les meilleures pratiques. Recueillez vos propres données de map de défilement et découvrez comment vos utilisateurs se comportent sur les appareils mobiles pour déterminer la longueur de page et la conception les plus appropriées pour votre public.

Comment configurer les scroll maps avec Contentsquare

Vous pouvez configurer des scroll maps en 3 étapes faciles :

Étape 1 : Ajouter le code de suivi Contentsquare à votre site

Inscrivez-vous sur Contentsquare pour obtenir un code de suivi unique.

Ensuite, installez le code de suivi Contentsquare sur votre site. Nos instructions détaillées (ici) vous guideront pour installer votre code via différentes méthodes.

Étape 2 : Saisir les URLs des pages

Ensuite, ajoutez les URLs des pages pour lesquelles vous souhaitez créer des scroll maps. Ces instructions diffèrent légèrement selon votre plan

👉 Instructions pour Heatmaps sur les plans Free et Growth 👉 Instructions pour Heatmaps sur les plans Enterprise et Pros

Si vous êtes sur les plans Enterprise ou Pro, rendez-vous dans “Zoning Analysis” et cliquez sur “Select a page or page group”.

Ensuite, saisissez les URLs des pages pour lesquelles vous voulez créer des scroll maps et cliquez sur “Apply”.

Étape 3 : Vérifier vos scroll maps

Votre scroll map commencera à se remplir au fur et à mesure que Contentsquare collecte les données du site.

Pour consulter vos scroll maps, rendez-vous sur la page que vous souhaitez analyser et sélectionnez “Heatmaps” puis “Scroll map” dans les menus déroulants.

Vous pouvez également basculer votre heatmap pour afficher les sessions desktop, tablette ou mobile.

Créer une scroll map pour mieux comprendre les utilisateurs

Les scroll maps permettent d’identifier les sections de votre page que les utilisateurs ignorent, et plus important encore, le contenu qu’ils ne voient jamais.

Une fois que vous comprenez comment les visiteurs interagissent avec votre site, utilisez des outils comme Session Replay pour explorer pourquoi ils se comportent ainsi, afin de créer des expériences utilisateurs qui les ravissent réellement.