Aujourd'hui, nous explorons les faits les plus pertinents sur la façon dont le défilement infini est devenu une technique acclamée sur le Web et pourquoi, en dépit de sa popularité, il n'est pas encore si largement adopté en 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 à des informations et de les transférer à des débits plus importants. La question du défilement infini sur les pages Web est l’un des aspects de la conception de l’expérience utilisateur, et elle n’est pas aussi sobre que l’on pourrait le penser.
Débuts et vulgarisation
Chez Google, ça s'appelle défilement continu et peut également être appelé défilement sans fin. En bref, le défilement infini est une technique permettant au navigateur de charger automatiquement un nouveau contenu lorsque l'utilisateur atteint le bas de la page, de sorte qu'il n'est pas nécessaire de rechercher des boutons de pagination pour accéder à 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 de flux d'actualités sur Facebook; la page de résultats de recherche d'images de Google et la timeline de Twitter. Un exemple intéressant et mis à jour, publié à des fins de référence, est disponible sur la page de démonstration du plug-in Isotope jQuery.
hexaedro.eu profite du défilement infini horizontal 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 de l'interface utilisateur chez PayPal) dans son article Death to Paging! - Rico LiveGrid est sorti.
Il a été développé pour présenter à l'utilisateur un très grand tableau de données dans une seule vue avant qu'il ne soit obligé de passer à une section suivante. On l'a appelé pour la première fois grille de défilement dynamique. L'article comprenait une section avantages et inconvénients, 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 à son sujet. Un an après l'article de Scott annonçant le défilement de la grille en direct, il était possible de trouver des textes en ligne vilicant le phénomène de la coupe de pages et vantant le nouveau parchemin avec la devise? Ne forcez pas l'utilisateur à demander plus de contenu: donnez-le simplement à leur.?
À la mi-2008, le terme rouleau infini avait déjà sa propre vie et un site du même nom était consacré à l'explication détaillée de son fonctionnement. Le site proposait également une poignée de plugins pour permettre le défilement continu sur des thèmes WordPress, des pages via des bibliothèques jQuery et? Autopagerize? add-ons 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 le plus grand plaisir de tous. avec la mise en œuvre de la conception sensible. D'un point de vue plus analytique, c'était un pas de plus sur la séparation entre l'existence initialement imprimée du contenu 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 de papier.
Thomas Baekdal explique la relation entre les pages imprimées et les textes affichés sur des écrans numériques dans Dissoudre cette impression. Baekdal règle fondamentalement le problème avec une sorte de formule: format d’abord ou contenu d’abord. Dans son analyse, Baekdal déclare que les limitations des supports imprimés ne doivent pas être transférées sur l'écran numérique.
Apple a également rendu hommage à la tendance au défilement. L'une des principales caractéristiques du nouvel iBooks 3.0 était la possibilité de faire défiler les livres verticalement. Le lecteur peut maintenant oublier l'effet de retournement de page et lire ses best-sellers en effleurant du doigt. C'était précisément une mise en œuvre de la? Se débarrasser de l'ours dansant? devise de Baekdal: permettre au lecteur de se libérer du vieux paradigme du livre physique. Heureusement, il y avait une option pour choisir entre le thème de tour de page traditionnel et celui de défilement continu à volonté, de sorte que le lecteur démodé 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 du 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 lorsque le nombre de clics sur les favoris a diminué et que la fonction de recherche n’est plus utilisée. Malgré un possible 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 complètement implémenté. Seule la recherche d'images comporte un défilement infini, et même dans ce cas, le défilement est limité à l'affichage des résultats. bouton.
L'une des utilisations les plus créatives du défilement infini est décrite dans le site distancetomars.com
Les avantages
Le défilement infini présente plus qu’un avantage supplémentaire, mais présente de nombreux avantages qui en valent la peine dans de nombreux cas:
- L'attention ininterrompue qu'un utilisateur retient lorsque plus 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 trouver où trouver le bouton suivant ou le nombre de pages à 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 des attentes suscitées par l’attente de nouvelles informations, ce qui provoque une sorte d’enthousiasme et une 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 conclusions de McKinley suggèrent que le défilement continu de la page des résultats de la recherche choquait ou déroutait les utilisateurs, les surchargeant d'informations de plus en plus nombreuses au point que l'utilisation de la recherche était évitée.
- Les conceptions de gabarits peuvent être plus propres, avec plus de place pour le contenu et moins d'éléments gênants, comme la liste de numéros pour la pagination.
Les inconvénients
Bien sûr, un certain nombre de problèmes liés au défilement infini doivent être pris en compte:
- Augmentation du temps de chargement des pages: il est évident que le contenu supplémentaire à ajouter au bas d'une page nécessite plus de temps pour être téléchargé. Les utilisateurs disposant de connexions à distance ou de forfaits 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, notamment lorsque la page charge des tonnes d'images.
- L'augmentation du temps de chargement, ainsi que la quantité de mémoire système requise et l'utilisation du processeur, pourraient inévitablement conduire à une navigation désagréable et instable.
- Compatibilité du navigateur: puisque le défilement infini appartient au domaine de la conception Web réactive, il dépend des bibliothèques et des plug-ins qui peuvent ne pas être entièrement compatibles sur les anciens appareils ou les versions de navigateur.
- Le fait de voir le pied de page disparaître et de ne pas pouvoir l'atteindre peut être «traumatisant». expérience pour l'utilisateur. En outre, 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 dans le contenu de la page et marquer les endroits où se trouve quelque chose d'intérêt. Il est donc possible d'y revenir rapidement plus tard. Il peut arriver que des utilisateurs se sentent perdus ou confus, ne sachant pas où ils se trouvent réellement ou manquant ce qu'ils recherchent.
- 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 un grand nombre d'entrées, il doit également être mis en œuvre afin de récupérer la position réelle dans la liste, afin d'éviter les situations frustrantes. La plupart des plaintes contre des pages sans fin font référence à ces deux derniers points, les utilisateurs perdant le contrôle de la page qu'ils visitent.
- 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 les résultats limités après le numéro de page 2 apparaîtront ensuite sur la première page simplement en faisant défiler le texte suffisamment longtemps.
C'est pourquoi, malgré leur grande popularité, les pages infinies ne sont pas toujours la meilleure option pour tous les sites, ni même pour le même site affiché sur différents appareils.
Quelques solutions de contournement
Les développeurs trouvent constamment des solutions de contournement à ces inconvénients, rendant 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 comporter un défilement infini dans une liste centrale pour afficher les actualités 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 parchemin. Les astuces HTML5 et CSS ont été combinées pour obtenir le résultat final d'une application qui affiche le contenu en douceur, sans planter.
Il ne fait aucun doute que cette amélioration de l'expérience utilisateur reste un moyen juste d'évoluer, mais les utilisateurs bénéficient déjà d'une meilleure expérience de navigation, notamment lorsqu'il s'agit de parcourir des pages contenant de nombreuses informations, graphiques et textes.
Zone de dépôt
Le défilement infini est là pour rester, il est donc conseillé de connaître différentes méthodes pour le faire fonctionner:
Enhanty: Les quelques personnes qui ont réellement apprécié la mise en œuvre du défilement infini sur Etsy.com peuvent le réactiver sur leur page en installant ce plugin à partir de 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 du défilement infini. Une petite proportion d'utilisateurs ne peut toujours pas utiliser 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 active le mode de défilement infini des thèmes WP et nécessite peu d’expertise ou de compétences de programmation. Le plugin Jetpack offre également le défilement infini comme une parmi plusieurs dizaines de fonctionnalités. Tuts + a posté un tutoriel sur la manière de réaliser un défilement infini avec jQuery; Ce didacticiel s’adresse aux bricoleurs courageux souhaitant mettre en œuvre un défilement infini en entrant le code eux-mêmes.
Discussion et recommandations: StackOverflow propose de nombreux tutoriels 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.