Défilement infini, pagination ou bouton « charger plus » ? Quel est le meilleur modèle UX pour afficher les produits sur un site e-commerce ?
La pagination est toujours la façon la plus courante de charger des nouveaux produits sur un site. Toutefois, les sessions test d’ergonomie ont indiqué que les boutons « charger plus » combinés au chargement différé amènent à une expérience utilisateur plus fluide. Il a également été décelé que le défilement infini peut être directement nuisible à l’ergonomie, en particulier pour les résultats de recherche et sur mobile.
Les résultats de test
L’institut Baymard a mené des années d’études liées à l’ergonomie.
Il en ressort qu’un certain nombre de personnes ne sont pas satisfaits de la pagination. Les personnes testées ont perçu la pagination comme étant lente, et la présence importante de liens de pagination découragerait souvent les utilisateurs de parcourir la liste de produits. Mais surtout, les personnes testées ont parcouru beaucoup moins de listes de produits que sur les sites avec un bouton « charger plus » ou un défilement infini. Il y a toutefois un aspect positif ; ils passent relativement plus de temps sur la première page de résultats.
Quelle méthode de chargement utiliser ? Il y a trois variations que nous verrons plus en détails dans cet article :
– Pour les catégories, utilisez une combinaison de « charger plus » et du chargement différé
– Pour la recherche, utilisez le bouton « charger plus », idéalement avec un nombre de résultats dynamiques selon les critères de pertinence
– Sur les mobiles, utilisez le bouton « charger plus », mais chargez un plus petit nombre de produits par défaut
« Charger plus » pour les catégories
La solution optimale pour charger les nouveaux produits dans les catégories se trouve à l’intersection entre le bouton « charger plus » et le défilement infini sous la forme d’un chargement différé : montrez 10 à 30 produits dans le chargement de la page initiale, puis chargez en différé 10 à 30 autres produits, jusqu’à atteindre 50 à 100 produits, puis affichez un bouton « charger plus » ; une fois que ce bouton est cliqué, chargez 10 à 30 autres produits, et reprenez le chargement différé jusqu’à ce que les 50 à 100 articles se soient chargés, puis montrer le bouton « charger plus » une fois de plus. Le seuil du bouton « charger plus » de 50 à 100 articles permet de déterminer quand interrompre l’utilisateur, quand le seuil de chargement différé est simplement une optimisation de performance pour réduire le temps de chargement et temps du serveur.
« Charger plus » pour les résultats de recherche
Avec la recherche, les résultats sont classés par pertinence. Le cinquième résultat est généralement plus pertinent pour l’utilisateur que le centième. Ce qui signifie que les utilisateurs n’ont pas besoin de parcourir les résultats de cent produits quand ils font leur cherche. Les résultats de recherche devraient donc charger seulement 25 à 75 produits par défaut, et le défilement infini ne devrait jamais être utilisé dans les résultats de recherche.
La pagination ou le bouton « charger plus » serait plus adapté aux résultats de recherche parce qu’ils n’encouragent pas les utilisateurs à parcourir un nombre important de produits, mais les orientent plutôt à se concentrer sur le premier ensemble de résultats.
Les boutons « Charger plus » pour mobile
Les liens de pagination peuvent être difficilement cliquables et finiront typiquement par charger une nouvelle page. Le défilement infini s’avère être très efficace pour explorer beaucoup de produits. Toutefois, cela peut rendre le footer inaccessible. En effet, des liens vitaux du footer mobile tels que « Version Desktop », « FAQ » ou « Livraison » sont rendus inaccessibles alors que tous les utilisateurs souhaitent y avoir accès.
La meilleure solution est donc d’avoir un unique gros bouton « charger plus » à la fin de la liste de produits. Néanmoins, les mobiles ont quelques contraintes :
– Ecran plus petit : avec un écran mobile beaucoup plus petit, la liste des produits prendra une part plus importante de l’écran, avec typiquement seulement deux ou trois articles affichés dans la vue liste.
– Contraintes de défilement : sur un appareil tactile, l’utilisateur peut seulement défiler en glissant et en tapant avec leur doigt.
– Défilement lent : les utilisateurs ont moins de contrôle avec un défilement d’une liste de produits continue
– Les événements JavaScript : la façon dont les événements Javascript sont renvoyés sur la plupart des appareils mobiles signifie que la technique de chargement différé dynamique ne peut être mise en place. Les événements Javascript sont renvoyés seulement quand l’utilisateur a fini le défilement
Pour ces raisons, il est recommandé de charger seulement 15 à 30 produits sur les mobiles avant de montrer le bouton « charger plus », et puis simplement tous les charger en une seule fois (pas en chargement différé).
Détail clé : le bouton retour grâce au history.pushState
La mise en place technique de chargement d’une nouvelle page et les attentes des utilisateurs lié au chargement d’une nouvelle page ne s’harmonisent pas toujours. Le contenu de chargement dynamique tels que les overlays, les accordéons, les filtres et les produits chargés en AJAX bouleversent souvent les attentes des utilisateurs concernant le fonctionnement du bouton de retour.
La méthode « charger plus » requiert une attention particulière du comportement du bouton retour. Il est essentiel qu’après qu’un utilisateur ait visité une page produit de la liste de produits, il soit renvoyé au même endroit de cette liste en cliquant sur le bouton retour du navigateur.
Il faut noter que si vous n’avez pas les ressources techniques pour appliquer correctement le comportement du bouton retour, il est recommandé de ne pas expérimenter le « charger plus » mais plutôt rester avec le modèle de pagination inférieur.
« Charger plus » ne devrait pas être votre priorité numéro 1
Les e-marchands ne devraient pas dépenser en priorité leurs ressources dans la méthode de chargement des produits.
Sur la plupart des sites e-commerce, il y a des problèmes critiques liés à l’expérience utilisateur. Beaucoup de ces problèmes, qui sont percutants, nécessitent beaucoup moins de ressources techniques et de design que de développer la mise en place d’un « charger plus ».
« Charger plus » VS défilement infini VS pagination
Pour résumer, le bouton « charger plus » résout les problèmes d’ergonomie observés avec la pagination, et il résout également les problèmes critiques observés avec le défilement infini.
Toutefois, les boutons « charger plus » sont plus efficaces seulement quand le problème du bouton de retour est traité. Par exemple, au travers d’history. pushState() et, idéalement, quand la mise en place est ajustée selon le contexte de l’utilisateur. En particulier, les trois ajustements contextuels ci-dessous sont la clé de la performance :
– Pour la navigation par catégorie, utilisez une combinaison du bouton « charger plus » et du chargement différé. Fixez le seuil du bouton « charger plus » de 50 à 100 articles.
– Pour les résultats de recherche, utilisez le bouton « charger plus », mais définissez le seuil de 25 à 75 résultats seulement. Idéalement, vous ajusterez dynamiquement le seuil pour chaque liste de résultats unique.
– Sur mobile, utilisez le bouton « charger plus » mais fixez le seuil de 15 à 30 produits à cause des problèmes de taille d’écran et de défilement.
Source : Smashing Magazine – Christian Holst