Bonjour ! Hotjar est maintenant disponible en français 🇫🇷 Commencez gratuitement.

Apprendre / Guides / Le guide des heatmaps

Retour aux guides

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

Les maps de défilement (heatmaps qui suivent le comportement de défilement sur un site web ou une application) sont un outil d'analyse visuelle puissant qui vous aide à comprendre comment les utilisateurs interagissent avec vos pages web et les éléments de la page afin que vous puissiez vous assurer que votre site optimise les conversions et offre une expérience utilisateur d'exception.

Dernière mise à jour

19 janv. 2024

Temps de lecture

8 min

Partager

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.

Configurez une map de défilement dès aujourd'hui 🔥

Commencez à collecter gratuitement des données sur les maps de défilement avec Hotjar et découvrez comment les utilisateurs perçoivent vos pages web les plus importantes afin d'améliorer l'expérience utilisateur et d'augmenter les conversions.

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.

#A Hotjar scroll map example
A Hotjar scroll map example

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

#Examples of Hotjar scroll (left) and click (right) heatmaps
Examples of Hotjar scroll (left) and click (right) 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 Hotjar, l'outil Heatmaps collecte automatiquement des données pour tous les types de heatmaps : défilement, clics, rage clickset 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.

#The Engagement Zones heatmap combines data from multiple heatmaps into one to highlight areas of high 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.

#Scroll map color gradients indicate high (red) and low (blue) viewership
Scroll map color gradients indicate high (red) and low (blue) viewership

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 enregistrements de sessions d'utilisateurs individuels (ou rediffusions de sessions) et observez comment les visiteurs interagissent réellement avec la page.

Avec Hotjar, 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.

Hotjar vous permet de faire un zoom arrière à partir d'enregistrements de sessions vers des heatmaps pour repérer les tendances d'expérience utilisateur les plus importantes.

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 Hotjar 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.

Les maps des rage clicks Hotjar révèlent les points de frustration des utilisateurs

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.

#Scroll maps show the average fold area that most users see before scrolling
Scroll maps show the average fold area that most users see before scrolling

Configurez une map de défilement dès aujourd'hui 🔥

Commencez à collecter gratuitement des données sur les maps de défilement avec Hotjar et découvrez comment les utilisateurs perçoivent vos pages web les plus importantes afin d'améliorer l'expérience utilisateur et d'augmenter les conversions.

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.

💡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 Hotjar 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.

#Scroll data for a mobile phone heatmap
Scroll data for a mobile phone heatmap

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 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.

Heatmap filters

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 :

#A Hotjar scroll heatmap
A Hotjar scroll heatmap

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 !

Configurez une map de défilement dès aujourd'hui 🔥

Commencez à collecter gratuitement des données sur les maps de défilement avec Hotjar et découvrez comment les utilisateurs perçoivent vos pages web les plus importantes afin d'améliorer l'expérience utilisateur et d'augmenter les conversions.