To Infinite Scroll ou Not to Infinite Scroll: où nous en sommes arrivés jusqu'ici

Aujourd'hui, nous explorons les faits les plus pertinents sur la façon dont le défilement infini est devenu une technique si acclamée sur le Web et pourquoi, malgré sa popularité, il n'est pas encore si largement adopté dans la conception de sites Web.

Cette fonctionnalité est apparue à un moment de l'histoire d'Internet lorsque la quantité d'informations à présenter sur les pages Web a augmenté et que la vitesse des connexions a permis au lecteur d'accéder et de transférer des informations à des taux plus élevés. La question du défilement infini sur les pages Web est l'un des aspects impliqués dans la conception de l'expérience utilisateur, et n'est pas aussi simple que vous pourriez le penser.

Débuts et vulgarisation

Chez Google, cela s'appelle le défilement continu et peut également être appelé défilement sans fin. En bref, le défilement infini est une technique pour que le navigateur charge automatiquement le nouveau contenu lorsque l'utilisateur atteint le bas de la page afin qu'il ne soit pas nécessaire de rechercher des boutons de pagination pour passer à une partie suivante; le tout apparaîtra simplement en faisant tourner la molette de la souris.

Cette technique est notamment utilisée dans la page du fil d'actualité sur Facebook; la page de résultats de recherche d'images de Google et la chronologie Twitter. Un exemple à jour intéressant publié à des fins de référence peut être vu sur la page de démonstration du plugin Isotope jQuery.

hexaedro.eu profite du défilement horizontal infini pour illustrer l'évolution de l'humanité

L'une des premières références à ce type de défilement a été faite en 2005 par Bill Scott (directeur de l'ingénierie des interfaces utilisateur chez PayPal) dans son article Death to Paging! - Sortie de Rico LiveGrid.

Il a été développé pour présenter une très grande table de données dans une seule vue à l'utilisateur avant qu'il n'ait à passer à une section suivante, et il a d'abord été appelé la grille de défilement en direct. L'article comprenait une section pour et contre, quelques considérations de conception et formulait les éléments de la question en termes clairs: pagination vs défilement infini.

La technique a été affinée et a commencé à être très populaire sur le Web, provoquant une soudaine explosion d'enthousiasme à ce sujet. Un an après l'article de Scott, annonçant la grille de défilement en direct, il était possible de trouver des textes en ligne dénigrant le phénomène de segmentation des pages et faisant l'éloge du nouveau parchemin avec la devise «Ne forcez pas l'utilisateur à demander plus de contenu: donnez-le simplement à leur."

À la mi-2008, le terme infinite scroll avait déjà sa propre vie et un site du même nom consacré à expliquer en détail comment cela fonctionne. Le site offrait également une poignée de plugins pour permettre le défilement continu sur les thèmes WordPress, les pages via les bibliothèques jQuery et les modules complémentaires «autopagerize» pour Safari et Chrome qui pourraient ajouter automatiquement la fonction de défilement aux sites normaux.

"Ne forcez pas l'utilisateur à demander plus de contenu: donnez-le lui simplement."

Même en 2012, la technique est toujours présentée comme une innovation «pour votre plus grand plaisir» avec la mise en œuvre d'un design réactif. D'un point de vue plus analytique, c'était un pas de plus sur la séparation entre l'existence initiale du contenu imprimé et son équivalent électronique. Après tout, la notion de page Web vient précisément du monde matériel des journaux, des magazines et des livres avec de vraies pages papier.

Thomas Baekdal explique la relation entre les pages imprimées et les textes affichés sur les écrans numériques dans Dissolving that Print Mentality. Baekdal règle fondamentalement le problème avec une sorte de formule: le format d'abord ou le contenu d'abord. Dans son analyse, Baekdal déclare que les limites des médias imprimés ne devraient pas être transférées à l'écran numérique.

Apple a également rendu hommage à la tendance au défilement. L'une des principales caractéristiques des nouveaux iBooks 3.0 était la possibilité de faire défiler les livres verticalement. Maintenant, le lecteur peut oublier l'effet de rotation de page et lire ses best-sellers en effleurant les doigts. C'était précisément une mise en œuvre de la devise «se débarrasser de l'ours dansant» de Baekdal: permettre au lecteur d'être libéré de l'ancien paradigme du livre physique. Heureusement, il y avait une option pour choisir entre le thème traditionnel du tour de page ou le défilement continu à volonté, de sorte que le lecteur à l'ancienne aurait toujours la possibilité d'imiter de vrais livres dans son appareil.

Pourquoi éviter cette amélioration UX?

L'une des rares exceptions à la règle d'embrasser le défilement infini a été le cas de Dan McKinley à Etsy où une recherche pratique utilisant la méthodologie de test A / B a montré que la technique ne fonctionnait pas comme prévu.

En fait, le défilement infini a été supprimé du site après que le nombre de clics sur les favoris a diminué et que la fonction de recherche n'a plus été utilisée. Malgré un éventuel biais sur la méthode utilisée pour évaluer les réactions des utilisateurs, il est clair que le défilement infini ne maximisait pas l'activité en soi, ou du moins que le public habituel du site n'était pas d'accord avec le changement.

Google est un autre exemple où le défilement sans fin n'a pas réussi à être pleinement mis en œuvre. Seule la recherche d'images a un défilement infini, et même là, le défilement est limité avec le bouton "afficher plus de résultats".

l'une des utilisations les plus créatives du défilement infini est illustrée sur le site distancetomars.com

Les avantages

Plus qu'un simple élément de fantaisie, le défilement infini présente divers avantages qui en valent la peine dans de nombreux cas:

• L'attention ininterrompue qu'un utilisateur maintient lorsque davantage de contenu est fourni automatiquement est au cœur de l'attractivité du défilement infini. Le lecteur n'aura pas à s'arrêter pour penser où trouver le bouton suivant ou quel nombre de pages devrait venir, suite à une attention accrue.
• En termes psychologiques, le défilement infini semble déclencher des réponses automatiques basées sur la curiosité et l'atténuation de l'attente produite en attendant de nouvelles informations, ce qui provoque une sorte d'excitation et de volonté de continuer à faire défiler pour voir ce qui se passe. Ce mécanisme psychologique mérite une compréhension suffisante car l'avantage initial peut se transformer en problème. Par exemple, les résultats de McKinley suggèrent que le défilement sans fin de la page de résultats de recherche a quelque peu choqué ou confondu les utilisateurs, les surchargeant de plus en plus d'informations au point que l'utilisation de la recherche a été évitée.
• Les conceptions de modèles peuvent bénéficier d'une plus grande propreté, plus de place pour le contenu et des éléments moins distrayants comme la liste des numéros pour la pagination.

Les inconvénients

Bien sûr, il y a aussi un certain nombre de problèmes avec le défilement infini qui doivent être pris en compte:

• Augmentation du temps de chargement des pages: il est évident que le contenu supplémentaire à ajouter en bas d'une page a besoin de plus de temps pour être téléchargé. Les utilisateurs disposant de connexions d'accès à distance ou de plans de données mobiles médiocres auront une capacité réduite à parcourir efficacement cette page.
• Utilisation de la mémoire: les navigateurs, aussi bien sur les ordinateurs de bureau que sur les appareils mobiles et les tablettes, peuvent potentiellement manquer de mémoire et se bloquer, en particulier lorsque la page charge des tonnes d'images.
• L'augmentation du temps de chargement ainsi que davantage de mémoire système requise et l'utilisation du processeur pourraient inévitablement entraîner une navigation agitée et désagréable.
• Compatibilité du navigateur: étant donné que le défilement infini appartient au domaine de la conception Web réactive, cela dépend des bibliothèques et des plugins qui peuvent ne pas être entièrement compatibles sur les anciens appareils ou versions de navigateur.
• Le fait de voir le pied de page disparaître et de ne pas pouvoir atteindre peut être une expérience «traumatisante» pour l'utilisateur. De plus, tout le contenu du pied de page et, par conséquent, la fonction du pied de page lui-même disparaîtront.
• Manque d'orientation et de référence spatiale: dans un schéma paginé, les utilisateurs peuvent définir une référence visuelle simple pour s'orienter à travers le contenu de la page et marquer les endroits où quelque chose d'intérêt est trouvé, il est donc possible d'y revenir rapidement plus tard. Il pourrait y avoir des utilisateurs qui se sentent perdus ou confus sans savoir où ils se trouvent réellement ou sans ce qu'ils cherchaient.
• Perte de la dernière position de l'utilisateur dans le flux de données, lorsque le bouton d'actualisation ou de retour est enfoncé. Étant donné que le défilement infini vise à afficher de grandes quantités d'entrées, il doit également être mis en œuvre un moyen de récupérer la position réelle dans la liste, afin d'éviter des situations frustrantes. La plupart des plaintes contre les pages sans fin se réfèrent à ces deux derniers points car les utilisateurs perdaient le contrôle de la page qu'ils visitaient.
• Les signets ont tendance à être inutiles car un point d'intérêt ne sera pas marqué sur une page discrète mais flottera quelque part dans le flux des entrées.
• Bien que ce ne soit pas nécessairement une mauvaise chose, les classements peuvent varier considérablement sur les pages de recherche car ces résultats confinés après la page numéro 2 apparaîtront ensuite sur la page numéro un juste en faisant défiler suffisamment longtemps.

C'est pourquoi, malgré leur grande popularité, les pages infinies ne sont pas toujours la meilleure option pour chaque site ou même pour le même site consulté sur différents appareils.

Quelques solutions de contournement

Les développeurs trouvent constamment des solutions à ces inconvénients, ce qui rend le défilement infini plus efficace. Le cas bien documenté de la nouvelle application LinkedIn pour iPad fournit une bonne étude de cas sur les problèmes et les solutions lors de la mise en œuvre du défilement infini.

L'application devait avoir un défilement infini dans une liste centrale pour afficher les nouvelles et les grandes images; cela a créé le besoin d'un moyen pratique de gérer tous les éléments sans affecter les performances du défilement. Des astuces HTML5 et CSS ont été combinées pour obtenir le résultat final d'une application qui affiche le contenu en douceur sans se bloquer.

Sans aucun doute, cette amélioration de l'expérience utilisateur a encore un bon moyen d'évoluer, mais les utilisateurs bénéficient déjà d'une meilleure expérience de navigation - en particulier lorsqu'il s'agit de naviguer sur des pages contenant de nombreuses informations, graphiques et textes.

Zone de référentiel

Le défilement infini est là pour rester, il est donc conseillé de connaître différentes méthodes pour le faire fonctionner:

Enhantsy: La poignée de personnes qui ont réellement aimé l'implémentation du défilement infini sur Etsy.com peuvent le réactiver sur leur page en installant ce plugin depuis la page Enhantsy. Le plugin offre plusieurs autres fonctions en plus de restaurer le défilement continu dans toutes les pages d'Etsy.

Solutions WordPress: les blogs sont peut-être les candidats préférés pour le défilement infini. Peut-être qu'une petite proportion d'utilisateurs ne peut toujours pas gérer le pied de page flottant semi-transparent que WordPress place lorsque le défilement infini est activé, mais pour la grande majorité qui aime la technique, Infinite-Scroll est un plugin qui activera le mode de défilement sans fin dans la plupart des thèmes WP et nécessite peu d'expertise ou de compétences en codage. Le plugin Jetpack offre également un défilement infini comme un de plus entre des dizaines de fonctionnalités. Tuts + a publié un tutoriel sur la façon de réaliser un défilement infini en utilisant jQuery; ce tutoriel s'adresse aux bricoleurs courageux désireux d'implémenter le défilement infini en entrant le code eux-mêmes.

Discussion et recommandations: StackOverflow propose de nombreux didacticiels sur tous les aspects imaginables liés au défilement infini.

Alternatives mobiles: le défilement infini fonctionne bien avec les appareils mobiles en raison de la nature de leurs écrans tactiles. Il est possible d'obtenir l'effet sur Android en utilisant Android-Binding. Les méthodes de défilement d'images utilisées dans les applications sont également disponibles, par exemple, pour fonctionner sur les iPhones.