Infinite scroll : réinventez l’expérience utilisateur sur votre site web

L'infinite scroll est souvent utilisée sur les sites one-page et sur de nombreux blogs. L'objectif ? Épargner à l'utilisateur la nécessité de changer de page pour voir d'autres contenus. La question de son utilisation divise encore le monde du référencement.

Pour de nombreux experts du SEO, cette fonctionnalité améliore l' expérience utilisateur d'un site internet. D'autres par contre mettent l'accent sur ses aspects négatifs pour une stratégie de référencement naturel efficace. Mais il existe des pratiques pour réduire considérablement les risques.

Que dire donc de cette fonctionnalité ? Nous vous invitons à découvrir l'univers de l'infinite scroll à travers cet article.

L'infinite scroll : qu'est-ce que c'est ?

Ce terme vous est peut-être inconnu, mais vous utilisez cette fonction plusieurs fois par jour. L'infinite scroll ou pagination infinie est une solution développée par l'ingénieur américain Aza Raskin il y a plus de 10 ans.

En effet, l'internaute des années antérieures cliquait obligatoirement sur des liens avant de voir de nouveaux contenus. Le scroll infini apporte une fonction ergonomique pour faciliter la vie des utilisateurs. Il est désormais possible, grâce à cette fonctionnalité, de faire apparaitre de nouveaux contenus sans changer de page. Il suffit de scroller*.

Cela est possible grâce à un code JQuery qu'on intègre dans la page concernée.

La fonction s'active lorsque l'utilisateur se rapproche du bas de la page et génère automatiquement de nouveaux contenus.

*Le terme " scroller " vient de l'anglais parchemin. L'utilisateur fait dérouler (défiler) le contenu d'une application ou d'une page de la même manière que l'on déroule un parchemin.

Les applications de l'infinite scroll

L'infinite scroll est généralement utilisé sur des sites web ou des applications disposant d'un gros volume de contenu.

C'est le cas, pour exemple, des sites e-commerce qui affichent un nombre assez conséquent de références produits. Face à une telle situation, de nombreuses marques choisissent de mettre en place un défilement infini plutôt que d'afficher des boutons " Page suivante ".

De cette manière, l'utilisateur consulte tous les produits d'une catégorie sans avoir besoin de cliquer sur des boutons.

Cette fonctionnalité est utilisée sur notre site. Vous voulez voir ?

En faisant défiler la page vers le bas, les articles apparaissent à mesure que vous scrollez la page. C'est l'infinite scroll.

Avez vous remarqué que vient s'ajouter au slug page/2/ puis page/3 ? Et ainsi de suite jusque https://www.anthedesign.fr/category/autour-du-web/page/7/ : vous êtes arrivé en bas de page !

Elle vous indique ainsi que vous êtes arrivé sur la septième page, et tout cela sans même avoir touché l'index de la souris ! Merveilleux n'est-ce pas ?

Il s'agit là d'une application du scroll infini sur un site web, mais on retrouve également cette fonctionnalité sur de nombreuses applications notamment les applications proposant un fil d'actualités.

Parmi les plus connus, nous pouvons citer : Facebook, Instagram, YouTube...

Que ce soit dans un navigateur ou sur mobile, ces applications utilisent le défilement infini pour vous afficher de nouvelles actualités.
De nouveaux éléments apparaissent donc au fur et à mesure que vous faites défiler la page vers le bas ou que vous faites scroller votre smartphone.

En un mot comme en cent : le scroll infini est le remplaçant des boutons de pagination " Précédent " et " Suivant " sur l'index d'un blog. "

Les avantages de l'infinite scroll pour l'expérience utilisateur

L'infinite scroll ou scroll infini est apparu dans le but de faciliter la navigation de l'utilisateur sur le web.

Lorsqu'elle est bien mise en place, le défilement infini apporte un réel coup de pouce pour améliorer l'expérience utilisateur (UX).

Favoriser la découverte du contenu

De nos jours, l'utilisateur est à la fois exigeant, impatient et très volatile.

Il veut retrouver facilement et rapidement l'information qui l'intéresse au lieu d'aller la chercher. Dans ce contexte, les multiples boutons de pagination ne contribuent pas à lui rendre la tâche plus simple.

Google a compris cela et prend d'ailleurs le sujet au sérieux. Il a annoncé dans sa mise à jour "  Google Page Expérience  " de mai 2021 que l'expérience utilisateur (UX) serait désormais prise en compte par ses algorithmes comme un critère SEO.

Susciter l'engagement des utilisateurs

Les marques ont tout intérêt à améliorer leur UX pour garder l'utilisateur le plus longtemps possible sur leur site. Pour cela, elles doivent utiliser une stratégie de communication de type "  Push  ". C'est une chose qui devient bien plus simple avec le scroll infini.

Grâce à cette fonctionnalité, les produits, actualités, articles similaires... que proposez à vos utilisateurs apparaissent juste par un simple scroll vers le bas. C'est donc une technique efficace pour engager vos visiteurs et les garder sur votre site.

Mais pour que cela soit réellement efficace, vous devez vous assurer de proposer du contenu de qualité qui répond à l'intention de recherche de l'utilisateur.

Adapter aux utilisateurs mobiles

L'expérience utilisateur que cette fonctionnalité apporte est particulièrement adaptée à la navigation sur mobile. Et comme en 2022, la grande partie des navigations sur internet se font à partir de téléphones mobiles, l'infinite scroll est sans doute une piste à explorer.

Les dangers de l'infinite scroll pour le SEO

Bien que le scroll infini soit connu pour booster l'UX, certains de ses aspects peuvent être pénalisants pour votre site. Lorsqu'elle n'est pas bien maitrisée, l'infinite scroll peut chahuter votre stratégie SEO.

Un temps de chargement plus important

La pagination de type scroll infini fait appel à une fonction en JavaScript. Cette dernière déclenche le chargement des contenus masqués lorsqu'elle remarque que l'utilisateur s'approche de la fin de la page.

L'utilisation de cette technologie entraine une augmentation du temps de chargement de vos pages. Ce n'est certainement pas une bonne nouvelle pour les marques lorsque l'on sait que le TDC participe activement à l'expérience utilisateur et fait partie des critères les plus importants pour les robots de Google.

Le duplicate content en infinite scroll

L'utilisation de la pagination avec scroll infini soulève le problème de duplication de contenu. En effet, les moteurs de recherche ont accès à la page indexée, mais pas aux autres pages. Les contenus de ces pages seront donc considérés comme des contenus dupliqués. Et ça, c'est quelque chose que Google a en horreur.

Des contenus masqués et invisibles dans Google

Par principe, le scroll infini consiste à faire charger de nouveaux éléments sur une page de liste au fur et à mesure du scroll. Contrairement à une longue et unique page, une page en infinite scroll garde cachés certains éléments lors du chargement initial.

En d'autres termes, l'utilisateur ne peut accéder aux contenus additionnels qu'en scrollant.

Or GoogleBot ne scroll pas comme le fait un utilisateur. Et comme le HTML de l'infinite scroll ne contient jamais de liens pointant vers les pages suivantes, le robot conclura qu'il n'existe pas d'autres pages. Par conséquent, les articles, produits... contenus sur les pages 2 et plus ne seront tout simplement pas indexés.

Un Page Rank dilué

Le PageRank est un indicateur que Google prend en compte pour classer les sites dans les résultats de recherche. Mais la mauvaise maitrise du scroll infini peut entrainer la multiplication des contenus à faible valeur ajoutée. Cela va diluer le SEO Juice (Jus SEO) et dégrader le score de votre site.

Le Budget Crawl menacé

Le Budget Crawl désigne en SEO le nombre maximal de pages que les robots des moteurs de recherche peuvent crawler sur un site internet. Ce nombre dépend de plusieurs critères :

• La taille du site
• La fréquence de mise à jour
• Le nombre de clics sur les URLs
• La vitesse de crawl
• La qualité des contenus présents sur le site

S'il y a un trop grand nombre de pages à explorer, l'infinite scroll risque d'entrainer l'épuisement du budget crawl. Il y a donc des chances que vos pages stratégiques ne s'affichent pas, ce qui serait nuisible pour votre visibilité dans les résultats de recherche.

Comment utiliser l'infinite scroll sur votre site sans générer une infinité de problèmes SEO ?

John Mueller, Webmaster Trends Analyst chez Google nous donne les consignes pour une association infinite scroll et SEO. Nous pouvons décomposer ses recommandations en 5 étapes :

Les bases

L'enjeu ici est, dans un premier temps, de faire en sorte que l'intégralité du contenu des pages à afficher soit accessible sans utiliser de JavaScript. C'est le principe de base. Il ajoute à cela un second principe concernant le poids des pages à afficher. L'idée est de supprimer la période d'attente pour le chargement du reste de la page qui pourrait ennuyer l'utilisateur.

1. Diviser le contenu de votre page à défilement infini
2. Choisir la quantité de contenu que doit comporter chaque page

Sur ce point, il est important de faciliter l'accès à l'utilisateur à un contenu précis qu'il souhaiterait par exemple retrouver en accédant à une page. Vous pouvez par exemple réduire la taille de chaque page pour limiter le nombre de défilements par page.
Faites également attention au poids des pages pour garantir un temps de chargement acceptable.

Assurez-vous que chaque page contienne un contenu unique (chaque article ou produit doit appartenir à une seule page)

L'optimisation des URLs

La deuxième étape consiste à structurer les URLs de chaque page pour faciliter leur indexation en mode infinite scroll.

Opter pour des URL complètes pour chaque page composante afin de minimiser le risque d'erreur. Le système avec le " # " est à éviter au profit des URL uniques.

Gardez à l'idée que ces pages sont des composantes d'un même système de pagination et qu'elles afficheront donc la même balise " Title ".

1. S'assurer que l'URL de chacune des pages composantes fonctionne pour conduire directement l'utilisateur au contenu recherché. Cette URL doit pouvoir diriger l'utilisateur vers la page contenant ce qu'il recherche sans conserver le même historique de navigation ou le même cookie.
2. S'assurer que chaque URL continue d'afficher le même contenu dans le temps. Les paramètres d'URL ne doivent donc pas être définis en fonction du temps.

L'Optimisation pour le navigateur

1. Ajouter des balises rel=prev et rel=next dans le <head> de chaque page composante pour spécifier l'URL de chaque page.
2. Utiliser les fonctionnalités JS pushState et replaceState pour modifier l'URL de la page en infinite scroll sans rafraichir cette dernière. De cette façon, le navigateur comprendra que le scroll fait changer de page. Il pourra ainsi suivre la navigation de page en page pour générer l'historique.

La phase de test

Dès lors que tout est mis en place, vous devez effectuer des tests pour vérifier que tout fonctionne correctement. Commencez par vérifier que les contenus s'ajoutent automatiquement lorsque vous scrollez.

Vérifiez également que l'URL de la page change selon que le défilement s'effectue vers le bas ou vers le haut. Vous pouvez observer cela sur l'URL fournie précédemment.

Le test des résultats enrichis de Google est très utile pour avoir une idée de ce que le GoogleBot voit et crawl sur une URL donnée. Il convient donc de l'utiliser pour vérifier le rendu HTML de votre URL afin d'éviter les mauvaises surprises.

Les inconvénients de l'infinite scroll pour l'UX

Malgré les bénéfices du scroll infini pour l'expérience utilisateur, son utilisation peut également poser quelques problèmes comme :

1. Des difficultés de recherche de l'information

Le gros inconvénient du défilement sans fin, c'est qu'il retire les avantages de la pagination. En réalité, la pagination offre la possibilité aux visiteurs d'estimer le nombre de résultats disponible. Ceux-ci sont donc en mesure d'estimer le temps nécessaire pour trouver ce qu'ils recherchent. Ils arrivent ainsi à prendre des décisions pour organiser leur recherche.

Contrairement à cela, le scroll infini retire tout contrôle de la navigation sur une page. À la longue, cela finit par ennuyer le visiteur, surtout quand l'information n'a pas une grande valeur ajoutée.

2. Des difficultés de localisation de l'information

La pagination a l'avantage de présenter un repère mental à l'utilisateur. Qu'on le veuille ou non, un grand nombre de personnes continue d'utiliser la barre de défilement. Elles parviennent à mémoriser l'emplacement approximatif de ce qu'ils recherchent.

Sur ce point, l'infini scroll à la particularité de jouer un vilain tour aux utilisateurs. Il casse la barre de défilement ce qui enlève toute possibilité d'établir un repère. Lorsqu'on parle d'expérience utilisateur, voir la barre de défilement se rallonger alors que l'on pensait être presque à la fin n'est pas une chose agréable.

3. Ou encore des difficultés d'accès aux informations dans le footer

Il est pratiquement impossible d'accéder au footer d'une page en infinite scroll. Cela pose un réel problème lorsque cette partie du site contient des informations et des liens importants. Un tel état de choses peut nuire à votre SEO et décourager les visiteurs qui souhaitent accéder à votre footer.

Les bonnes pratiques pour un infinite scroll réussi

Les inconvénients liés à l'utilisation de l'infinite scroll pour l'UX ne sont pas négligeables, mais elles peuvent être atténuées. Voici quelques bonnes pratiques pour y arriver :

Ajouter un bouton " haut de page "

L'une des plus grandes difficultés pour que rencontrent les utilisateurs avec l'infinite scroll est de naviguer vers le haut de la page. Pour pallier cette difficulté, vous pouvez ajouter un bouton " Haut de page " pour renvoyer vos visiteurs vers la partie supérieure de la page en un clic.

Utiliser un bouton " Voir plus "

Il est impossible de savoir à l'avance pourquoi un visiteur précis se rend sur votre site. C'est pourquoi il est recommandé d'utiliser un bouton " Voir plus " ou " Tout voir ". La bonne méthode consiste à placer le bouton après quelques pages pour donner le choix à l'utilisateur de continuer avec le défilement infini. Ainsi, vous limitez les risques de dégrader l'expérience utilisateur de ceux qui préfèrent la pagination pendant que vous améliorez celle des autres.

Faire savoir quand c'est fini

L'infinite scroll n'est pas en réalité infini, car il peut bien s'arrêter lorsqu'il n'y a plus rien à afficher. À ce moment-là, il serait intéressant de créer une note pour confirmer à vos visiteurs qu'il n'y a plus rien à afficher.

Qui peut utiliser l'infinite scroll sur son site ?

A priori, tout le monde peut utiliser l'infinite scroll sur son site web. Mais quand il s'agit de répondre à la question : " Qui a intérêt à utiliser le défilement infini ? ", la réponse est un peu différente.

Dans quel cas utiliser le scroll infini ?

En effet, le défilement infini présente un certain avantage pour les activités qui tuent le temps. Elle offre plus de bénéfice pour le contenu qui a une structure relativement simple, où chaque unité de contenu a la même valeur hiérarchique. C'est-à-dire que toutes les unités de contenu sont susceptibles d'intéresser l'utilisateur de la même façon.

Sur un site e-commerce par exemple, tous les produits d'une même catégorie ont la même chance d'intéresser les visiteurs. C'est pareil sur le fil d'actualité de Facebook ou encore pour les pages " catégorie " d'un blog. Dans chacun de ces contextes, les utilisateurs sont dans un état d'esprit favorable à l'exploration et à la découverte.

Dans quel cas ne pas utiliser le scroll infini ?

Pour des activités axées sur la tâche, le défilement sans fin présente certains inconvénients. La principale difficulté vient du fait que ça ne finit jamais. Cela pourrait donner l'impression de se noyer dans un océan d'information.

Les personnes qui recherchent des types d'informations spécifiques ont une préférence pour les contenus stratifiés selon la pertinence. Ils ne craignent pas la pagination du moment que chaque clic les rapproche de leur objectif. Google l'a compris et a maintenu son système de pagination.

Alors, infinite scroll ou pas ?

L'infinite scroll présente des avantages, mais également des inconvénients qu'il ne faut pas négliger.

Lorsque vous souhaitez créer un site web ou en faire la refonte , vous devez peser le pour et le contre de l'infinite scroll pour votre activité.

Est-ce que vous aurez beaucoup de contenu sur vos pages ? Est-ce que cela nécessite le scroll infini ?

Ce qu'il faut retenir

Le défilement sans fin ou défilement continu offre un flux de navigation non-stop. Cela présente des points positifs et des points négatifs.

Les avantages du scroll infini

• Retient beaucoup plus longtemps les utilisateurs sur le site et augmente l'engagement de l'utilisateur.
• Réduit le taux de rebond en augmentant le temps passé sur la page.
• Offre une meilleure expérience de navigation sur internet pour les utilisateurs de téléphones mobiles

Les inconvénients

• Rend difficile la navigation vers le haut.
• N'admet pas de point final, ce qui peut ennuyer.

Pour adopter l'infinite scroll sur votre site web

Lorsqu'il est bien maitrisé, utiliser l'infinite scroll peut vous être très bénéfique selon votre type de site web. En effet, tous les sites internet n'ont pas forcément besoin d'adopter le mode de défilement infini.

Il vous revient d'analyser votre activité pour déterminer la nécessité ou non d'utiliser cette fonctionnalité. Nous serons plus que ravis de vous apporter plus de détail sur le sujet. N'hésitez donc pas à nous contacter pour en savoir plus.