En utilisant un site e-commerce, un blog ou une application mobile, vous vous êtes sans doute déjà retrouvé devant des listes de résultats de produits ou d’articles. Ces listes peuvent être affichées de deux façons différentes : à l’aide d’un défilement infini ou par la pagination.
Nous verrons quelles sont leurs caractéristiques et comment nous pouvons améliorer l’expérience utilisateur de ces systèmes.
Le principe du scroll infini consiste à afficher l’entièreté d’une liste de résultats sur une même page. Pour naviguer dans cette page, l’utilisateur doit faire défiler vers le bas à l’aide de sa souris ou de son doigt sur mobile.
Après être descendus à un certain niveau dans la page des résultats, de nouveaux contenus chargent et s’affichent automatiquement et l’utilisateur peut continuer à faire défiler vers le bas pour voir la suite.
La pagination consiste à séparer une liste de résultats en plusieurs pages. Pour passer d’une page à une autre, l’utilisateur doit se servir de la navigation située sous la liste. Cette barre de navigation inclut les numéros des pages et souvent des boutons « suivant » et « précédent » pour naviguer autrement qu’en sélectionnant un numéro de page.
Ce système est majoritaire dans l’environnement web, mais tend à se faire remplacer par des options plus modernes comme le scroll infini.
Améliorer la consultation d’une liste est l’intérêt principal de mettre en place un défilement infini sur une page web.
En affichant, toute une série d’éléments sans la séparer en plusieurs pages permet à l’utilisateur de consulter plus rapidement l’ensemble de la liste sans coupure.
La navigation est ainsi plus fluide et agréable pour le visiteur.
En affichant leurs contenus progressivement au fur et à mesure que l’utilisateur descend dans la page, les listes de résultats paraissent moins lourdes à charger contrairement à une pagination où nous devons attendre le chargement de la totalité de la page, et ce à chaque changement de page.
En ne coupant pas une liste de résultats sur plusieurs pages, nous conservons une seule et même liste. Le visiteur a juste à descendre vers le bas pour accéder à la totalité du catalogue.
Cette facilité de navigation l’entraine à consulter davantage de produit qu’il n’aurait pas vu si ces résultats étaient disposés dans d’autres pages alors même qu’ils pourraient l’intéresser.
Nous pouvons de cette manière améliorer la conversion de nos sites.
Le principe de la navigation par scroll infini s’adapte parfaitement sur mobile. En utilisant le défilement vertical, nous nous adaptons aux habitudes des utilisateurs de smartphone et tablette.
Le visiteur peut entreprendre sa navigation dans la liste des résultats comme sur n’importe quelle autre page.
Étant donné que les éléments sont affichés sur une seule liste, il n’est pas possible pour l’utilisateur de sauvegarder un lien vers une page de résultats bien précis.
Le visiteur devra alors se souvenir de l’endroit où il a vu l’élément qui l’intéresse et devra scroller toute la liste de résultats jusqu’à l’élément en question.
Si la liste est particulièrement longue, cela pourrait décourager l’utilisateur et risquerait de lui faire quitter notre site entrainant alors une augmentation de notre taux de rebond.
En chargeant la totalité d’un catalogue produit ou d’un blog, le temps de chargement sera plus long, ce qui est évidemment néfaste pour l’expérience utilisateur.
De plus, pour afficher les produits au fil du défilement, nous devons utiliser des scripts JavaScript qui analysent le niveau où se trouve l’utilisateur dans la page internet et affiche les résultats suivants. Ces scripts ont aussi un impact sur les performances d’affichages du site web ou de l’application et par conséquent sur le SEO puisqu’un site prenant plus de temps à charger obtiendra une plus mauvaise place dans la liste des résultats de recherche contrairement à un site qui optimise ses temps de chargement.
Le scroll infini peut également poser problème sur l’accessibilité.
Si vous affichez une liste d’éléments se chargeant progressivement lors du défilement, il peut être complexe pour les utilisateurs de lecteur d’écran ainsi que pour les visiteurs sujets à des troubles cognitifs d’accéder au reste de contenu situé sous cette liste comme le pied de page.
Contrairement à la pagination qui offre des repères grâce à des pages numérotées, l’absence de ces aides peut poser des soucis pour certains utilisateurs.
Les moteurs de recherche, comme Google, utilisent des robots d’exploration (crawlers) qui parcourent une page et suivent les liens pour indexer le contenu.
Avec un scroll infini basé sur un chargement dynamique en JavaScript, les moteurs ne détectent souvent que le premier lot de résultats et ignorent le contenu chargé en continu, ce qui réduit le nombre de pages indexées.
De plus, à l’inverse d’une pagination statique, l’url sera la même pour la liste des résultats, ce qui pose encore des soucis d’indexation du contenu.
En organisant une liste d’éléments avec la pagination, chaque page de résultat à sa propre url.
Grâce à ces url uniques, le visiteur peut plus facilement identifier la page exacte où se trouve l’élément qui l’intéresse et la mettre en favori s’il souhaite la sauvegarder. Cependant, cela peut ne plus être vrai si d’autres éléments sont ajoutés par la suite.
Comme chaque liste de résultats sont séparées en pages avec une url unique, elles pourront être indexées, ainsi que leurs contenus (produits, articles …) ce qui n’est pas le cas d’une présentation en scroll infini ou seul le début de la liste est affiché directement et le reste du contenu est chargé progressivement.
Les pages de résultats utilisant une pagination sont plus courtes que celle avec un défilement infini puisqu’elle limite le nombre d’éléments affiché.
De cette manière, elle simplifie l’accès au reste du contenu situé en dessous. Le pied de page notamment sera accessible plus facilement que si vous deviez faire défiler la liste vers le bas jusqu’à la fin des résultats.
Pour consulter les autres résultats, l’utilisateur doit changer de page, ce qui entraine un temps de chargement qui coupe l’utilisateur dans sa navigation et risque de le lasser au bout de quelques pages consultées.
Il est alors important d’améliorer les performances d’affichages des éléments pour limiter le temps d’attente de l’utilisateur.
Alors que la pagination se prête bien en desktop, cela est moins le cas sur mobile.
Il est plus lassant de devoir changer de page plutôt que de scroller vers le bas, surtout pour un utilisateur mobile.
Il faut s’assurer que les boutons de navigations s’affichent correctement et qu’ils soient facilement cliquables au doigt.
Besoin d’une refonte design pour votre site ?
Rencontrons-nous dans notre agence web à Caen pour discuter de votre projet.
Le choix du système à mettre en place dépend de vos objectifs et de vos utilisateurs.
Le défilement infini se prêtera bien pour des utilisateurs souvent plus jeunes qui souhaitent explorer une liste facilement et rapidement. Ils ont l’habitude de cette navigation notamment par l’utilisation de réseaux sociaux et ne seront donc pas troublés si vous le mettez en place.
Cette approche peut aussi être utilisée pour des éléments principalement visuels comme le fait Google avec les images ou sur des listings de produits à condition que le nombre de résultats dans les listes produits ne soit pas trop important ou que des filtres soient à disposition pour réduire le nombre de résultats.
La pagination correspondra mieux à un public de tout âge et qui sait précisément ce qu’il recherche.
En limitant le nombre de résultats, nous pouvons ajouter davantage de texte dans les cards des éléments. La pagination conviendra parfaitement pour une liste d’articles ou pour présenter une longue liste de produits.
Si vous utilisez un défilement infini, ajoutez une barre de progression pour montrer où en est l’utilisateur dans la consultation de votre catalogue de produit ou service.
Si vos produits ont des caractéristiques particulières, vous pourriez mettre une barre le long de la liste des produits pour les séparer visuellement. Vous pouvez également faire la même chose en utilisant les catégories de produit.
Pour une pagination optimale, assurez-vous d’avoir des boutons de navigation suffisamment visible. Le texte doit être lisible et contrasté et les boutons doivent être facilement cliquables notamment sur mobile.
Ajouter des filtres avancés permettra à vos utilisateurs de préciser leurs recherches et d’afficher seulement le contenu qui les intéresse.
S’il s’agit d’un site e-commerce de mode par exemple, l’utilisateur doit s’attendre à pouvoir filtrer par taille, couleurs, genre … .
Les variantes de produit doivent être filtrables sur l’ensemble des produits affiché et pas seulement depuis la vignette d’un produit.
Ajoutez également le total des éléments de la liste pour informer l’utilisateur sur le contenu qu’il s’apprête à parcourir. Cela lui donnera une idée sur la nécessité d’affiner sa recherche.
Comme nous l’avons vu précédemment, les listes en défilement infini ne sont pas pratiques quand on souhaite accéder au reste du contenu de la page comme le pied de page et le menu.
Pour pallier ce problème, mettez en place un bouton de retour vers le haut de la page. En un clic, votre utilisateur arrivera en haut de la page et pourra naviguer dans le reste du contenu sans avoir à remonter manuellement.
Par défaut, nous mettons toujours en place ce bouton sur l’ensemble des pages pour simplifier l’utilisation du site web ou de l’application, notamment en mobile.
Pour limiter la taille d’une liste, il est de plus en plus commun d’ajouter un bouton vous proposant de charger plus de résultats au bout d’un certain nombre d’éléments affiché.
En limitant le nombre de produits affichés, l’utilisateur n’est pas perdu dans la masse d’information.
Il garde la main sur sa navigation et peut accéder plus facilement aux éléments situés en dessous de la liste.
D’après une étude menée par Baymard sur plus de 11000 sites e-commerce en Europe et aux États-Unis, il est conseillé d’afficher entre 50 à 150 éléments par page en fonction de s’ils contiennent une image ou non. En mobile, ces chiffres doivent être revus à la baisse pour passer de 15 à 30 éléments pour une page web optimale.
Pour offrir davantage de visibilité sur le reste du contenu à charger, ajouter un compteur affichant le nombre de contenus restant à afficher.
Nous pouvons intégrer une liste de produit avec une navigation en scroll infini et, à partir d’un certain nombre d’éléments affiché, faire apparaitre une pagination.
Au fur et à mesure que l’on défile dans la page, l’url de la page change en mettant à jour le numéro de page. Grâce à ça, l’utilisateur peut à la fois sauvegarder un lien vers un endroit précis dans la liste et peut également naviguer dans la liste via la pagination puisqu’elle est segmentée en plusieurs pages malgré son style de liste infinie.
Enfin, mener des tests utilisateurs peut vous permettre de mieux comprendre les attentes de vos utilisateurs et refondre votre site internet pour améliorer l’expérience des utilisateurs et améliorer les conversions de votre site internet.
La présentation des listes d’éléments de type produits, services, articles ou autre est trop souvent délaissée alors qu’elles sont une des portes d’entrée du visiteur.
Prenez le temps de concevoir des interfaces web optimales, vérifier l’usage grâce à des tests utilisateurs et évaluer les performances du site et l’impact SEO pour mettre en avant votre activité et augmenter vos conversions.
