Avez-vous déjà étudié la façon dont les gens consomment le contenu Web ? Ils consultent des centaines de pages par jour. Lisez en déplacement, en vous concentrant sur les images et le texte surlignés en gras. De plus, ils scannent la page plus qu’ils ne la lisent.
C'est pourquoi le défilement infini est devenu si populaire ; cela permet de gagner du temps lors de la lecture des pages du site Web. Poussés par la peur constante de rater quelque chose, les gens préfèrent recevoir tout le contenu à la volée sur une seule page.
Dans cet article, nous allons plonger dans une méthode spécifique de consommation de contenu, le défilement infini, et examiner quelques exemples intéressants.
Qu’est-ce que le défilement infini ?Le défilement infini est une technique qui permet de charger du nouveau contenu sur une page lorsque vous la parcourez. Selon le scénario, le contenu peut être téléchargé immédiatement ou divisé en sous-sections qui apparaissent à la demande en cliquant sur un bouton.
Apparemment, le défilement infini a été développé comme une alternative plus rapide et plus conviviale à la pagination. Mais est-ce vrai ?
En fait, tout dépend de la situation. Il n'y a aucune raison de charger une centaine de pages de contenu à la fois pour une navigation fluide ; Il y a de fortes chances que beaucoup de gens abandonnent à mi-chemin. Par conséquent, il semble intéressant de séparer les cas d’utilisation entre ceux qui conviennent au défilement infini et ceux qui nécessitent une alternative.
La principale raison d’utiliser le défilement infini sur une page est le contenu long qui doit attirer l’attention des visiteurs. Tout semble simple, mais le contenu doit être volumineux et avoir une hiérarchie plate. DANS sinon des alternatives doivent être envisagées.
Pour réseaux sociauxSur les réseaux sociaux et les blogs, tous les posts sont relativement égaux. Eh bien, certains d'entre eux peuvent être plus ou moins intéressants, mais il est trop subjectif de les diviser en sous-catégories. Des plateformes comme Facebook ou Twitter se mettent à jour en temps réel et laissent derrière elles l’historique des messages précédents. Cela les rend vraiment sans fond.
Pour un contenu tout aussi importantDisons qu'il existe un site Web (une galerie d'art interactive) dont le but est d'inspirer le spectateur par les images qui y sont présentées. Dans une telle situation, en règle générale, les gens ne recherchent pas quelque chose de spécifique. Au lieu de cela, ils feront défiler encore et encore jusqu'à ce qu'ils trouvent quelque chose qui attire leur attention. Ici, tout ce que vous pouvez faire est de les laisser trier les résultats en fonction de la récence ou de la popularité.
Pour interfaces mobilesLes smartphones et les tablettes ont fait du défilement infini une action intuitive pour utilisateurs mobiles. Il permet à l’utilisateur de ne pas avoir à télécharger tout le contenu d’un coup, allégeant ainsi l’application ou le site mobile.
Pour raconter des histoiresAinsi, le défilement infini est essentiel pour garder l’utilisateur intéressé et engagé. Cependant, il doit être utilisé à bon escient, uniquement là où cela est vraiment nécessaire.
Salut tout le monde. Aujourd'hui, je veux vous parler de la façon d'organiser le chargement paresseux du contenu sur les pages de destination.
Souvent, on l’appelle aussi « défilement infini ». Vous avez probablement constaté un effet similaire lorsque le contenu n'est initialement pas présent sur le site, mais que lorsque vous faites défiler la page, il se charge en douceur.
Il y a longtemps, nous avons écrit à la section « Vos suggestions » pour vous demander d'écrire un article sur la façon de mettre en œuvre un tel effet :
J'ai donc décidé de commencer à le mettre en œuvre. Merci de m'avoir donné des idées. Commençons...
Comme dans la plupart des cas, nous commençons par inclure la bibliothèque jQuery :
Et maintenant, vous devez faire une petite parenthèse et je vais vous expliquer l'essence de la méthode. Tout cela est démarré afin de ne pas charger tous les éléments du site (votre portfolio ou vos avis), mais de les charger selon les besoins. Par exemple, lorsque l’utilisateur clique sur le bouton « Afficher plus ». De cette façon, la page se chargera beaucoup plus rapidement. Et maintenant, le fait est qu'en utilisant la technologie ajax, nous allons charger l'élément souhaité (div) et fichier tiersà notre page de destination. Tout est si simple, tant en théorie qu'en pratique, et vous le verrez bientôt.
Créons maintenant un bloc principal, par exemple, avec des photos de nos œuvres. Supposons que nous dessinions des icônes et les chargions lorsqu'un bouton est cliqué. J'ai créé cette structure :
Portefeuille 
Montre plus...
Comme vous pouvez le constater, tout est simple. Mais à quoi faut-il faire attention ? Et vous devez faire attention aux div avec id="smartPortfolio", id="moreButton" et id="loadingDiv", car ils sont utilisés dans le script, ce qui nous aide à charger le contenu d'autres pages. SmartPortfolio est un « conteneur » pour notre portefeuille. MoreButton - ce sera notre bouton, lorsque vous cliquerez dessus, une autre partie du portfolio sera chargée. LoadingDiv - la zone où le texte sera affiché lorsque le portfolio est complètement ouvert ou qu'une erreur se produit.
Par exemple, certains lecteurs essaieront toujours de tester ce script non pas sur le serveur, mais ouvriront simplement le fichier d'index dans le navigateur. Si tel est le cas, ils verront un message d’erreur. De plus, si la connexion est très lente, le téléchargement des fichiers peut prendre du temps, et pour que l'utilisateur comprenne que le processus est en cours, vous pouvez y saisir un message indiquant que chargement données ou lieu (image, indicateur de progression ou autre).
Je n'ai pas écrit le script lui-même, mais je l'ai trouvé sur l'un des sites, l'auteur est répertorié dans le code source, si vous êtes intéressé, jetez un œil. Puisqu'il ne l'est pas trop grande taille, alors je vais tout donner, mais si vous envisagez d'utiliser les mêmes noms d'ID et chemins de fichiers que moi, vous n'avez même pas besoin de le regarder, mais incluez-le simplement avant la balise body de fermeture (dans le bas de page).
Pour ceux qui envisagent d'apporter des modifications, voici le script lui-même :
Var lazyload = lazyload || (); (function($, lazyload) ( "use strict"; var page = 2, boutonId = "#moreButton", chargementId = "#loadingDiv", conteneur = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url : url, succès : fonction (réponse) ( si ( !response || réponse.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portfolio entièrement chargé"); return; ) appendContests(response); ), erreur : function(response) ( $(loadingId).text("Désolé, une erreur s'est produite avec la demande. Veuillez actualiser la page."); ) )); var appendContests = function(response) ( var id = $(buttonId ); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; ); ))(jQuery, lazyload) ;
Cela vaut donc maintenant la peine de parler des fichiers à partir desquels nous allons charger des informations. Le script suppose qu'il s'agira de fichiers portant les noms 2.html...5.html, etc. Qui contient nos informations. Par exemple, le premier fichier que je charge est 2.html et il a le contenu suivant :
Dans la structure de mon site, les pages à partir desquelles les informations seront extraites pour un chargement ultérieur lorsque vous cliquerez dessus se trouvent dans le dossier des pages. Il y a trois fichiers, dont deux sont pleins et le dernier est vide. C'est ce que suppose la logique du script.
Le chemin dans le script est spécifié comme suit :
Var url = "./pages/" + page + ".html";
Si vous prévoyez d'utiliser un chemin différent, assurez-vous de le remplacer dans le script. De plus, si vous avez utilisé d’autres identifiants, il faudra alors les redéfinir dans le script. Ici:
ButtonId = "#moreButton", chargementId = "#loadingDiv", conteneur = "#smartPortfolio";
Et, comme je l'ai déjà dit, avant la balise de fermeture body, nous incluons le script lui-même :
Comme ça sur page de destination Vous pouvez implémenter un chargement paresseux. Envoyez-nous d'autres sujets sur lesquels vous aimeriez lire un article sur le blog. Dans la mesure du possible, j'essaierai de publier non pas le matériel prévu, mais celui sur lequel vous me posez des questions dans la rubrique « Vos suggestions ». Et c'est tout pour aujourd'hui. Au revoir!
En écrivant cet article, j'ai réalisé qu'il existe deux types de personnes qui sont toujours en débat : ceux qui préfèrent la pagination et ceux qui soutiennent l'utilisation du défilement infini - ces deux « clans » fournissent des preuves convaincantes en faveur de leur point de vue. .
À mon avis, la pagination et le défilement infini ont tous deux leurs avantages. Laquelle de ces méthodes choisir dépend des critères de chaque développeur individuel.
Par exemple, Google utilise la pagination au lieu du défilement infini, ce qui est très pratique. Et les réseaux sociaux comme Twitter et Facebook préféreront toujours l’utilisation du défilement infini, puisque personne n’aime cliquer à chaque fois juste pour faire défiler son fil d’actualité.
Quelle est la méthode de défilement infini ?Dans le développement Web, le défilement infini est une technique qui permet de charger automatiquement le contenu lorsque l'utilisateur atteint la fin du contenu affiché et fait défiler la page.
Les meilleures utilisations de cette technique peuvent être trouvées sur Twitter, Facebook et bien d’autres endroits.
Vous trouverez ci-dessous une liste des 10 meilleurs plugins de défilement infini jQuery.
10 meilleurs plugins jQuery Infinite Scroll :
Si vous décidez d'utiliser le plugin jQuery Infinite Scroll, nous vous faciliterons la tâche. Les 10 plugins de défilement infini jQuery présentés ci-dessous prennent en charge toutes les fonctionnalités dont vous pourriez avoir besoin : choisissez simplement celle qui convient le mieux à votre site pour rendre votre expérience utilisateur plus efficace et plus pratique.
maçonnerie jQuery
La maçonnerie place les éléments dans l'espace vertical disponible. Un plugin très populaire avec près de 13 000 étoiles sur github.
Version démo Télécharger
iScroll
Vous souhaitez créer un défilement infini et fluide ? iScroll vous aidera certainement à créer un défilement jquery fluide. Grâce à système intelligent mise en cache, vous pouvez créer un défilement infini pour implémenter une interface utilisateur. En plus de jQuery, il prend également en charge javascript.
Version démo Télécharger
Points de cheminement
Les WayPoints facilitent la mise en œuvre de la fonctionnalité de défilement des pages. Avec l'aide de ceci plugin simple Vous pouvez transformer votre navigation Précédent/Suivant en une interface AJAX à défilement infini. Une documentation détaillée est disponible pour les WayPoints. utilisation pratique ne sera pas une tâche difficile.
Version démo Télécharger
Infinite-Scroll.js
Un plugin de défilement infini jQuery très compact. Infinite Scroll ajoute automatiquement page suivante, vous permettant d'éviter de charger toutes les pages en même temps.
Version démo Télécharger
jScroll
jScroll est un plugin de défilement infini jQuery facile à utiliser qui permet une personnalisation flexible.
Version démo Télécharger
jQuery-Endless-Scroll
Ce plugin ne laissera jamais vos utilisateurs rester bloqués en attendant le chargement nouvelle page. jQuery-Endless-Scroll est très flexible et inclut des fonctionnalités vraiment uniques telles que l'ajout d'URL conviviales, la troncature des données, la possibilité de faire défiler et l'ajout de contenu en haut de la page.
Version démo Télécharger
Défilement AJAX infini
Infinite AJAX Scroll est un plugin de défilement infini jQuery intelligent. Il peut se transformer système existant pagination dans un système de défilement infini. Ce plugin lit les liens suivant/précédent des pages existantes sur le serveur et, lorsque l'utilisateur atteint la fin de la page, charge ces pages en utilisant AJAX.
Cette approche est également optimisée pour le référencement et très simple à mettre en œuvre.
Version démo Télécharger
JQuery-ESN-Autobrowse
Un plugin de défilement infini jQuery largement utilisé que vous pouvez utiliser facilement. Il ajoute automatiquement le contenu de la page à l'aide d'AJAX lorsque l'utilisateur consulte la page à partir du cache intégré du navigateur. Le plugin est facile à apprendre et à utiliser pratiquement.
Version démo Télécharger
jQuery défilement infini
Un autre plugin simple de défilement infini jQuery qui vous permet de faire défiler du texte ou des images.
Version démo Télécharger
Sans fin.JS
Endless.js est un plugin jQuery qui vous aide à créer des défilements infinis pour les éléments HTML. Il se connecte partie inférieure de la section supérieure ou gauche à partir de la droite, créant ainsi l'illusion d'un défilement sans fin.
En 2011, il était très à la mode (à mon avis, cette mode venait de Facebook) de créer un « scrolling sans fin » sur vos sites web : c'est à ce moment-là que l'utilisateur tourne et tourne la molette de la souris, et que tous les nouveaux résultats de recherche sont chargés par Ajax à le bas de la page, transformant le défilement ordinaire en un défilement sans fin et provoquant une « dissonance cognitive » chez l’utilisateur qui le rencontre pour la première fois.
J'ai aussi vu récemment un article sur ce site dans lequel l'auteur exprimait son mécontentement face au « défilement sans fin » et appelait à l'utilisation de la bonne vieille « pagination ».
Je suis d'accord avec l'auteur. Je suis moi-même toxicomane, et parfois je m'assois devant le moniteur, enchanté, les yeux vitreux, je tourne, je tourne, je fais tourner la roue magique, incapable d'aller au travail/au travail/au magasin/manger/boire/aux toilettes , et je le fais tourner avec une seule pensée : "Eh bien, quand allez-vous tous finir ?!" (Que peux-tu faire - j'ai l'habitude de finir les choses).
Un matin, je me suis levé et j’ai fermement décidé : « Arrête de supporter ça ! »
Je vous présente mon petit script, que j'ai récemment écrit pour mon « réseau social » (avec blackjack et putes).
Pour voir la démo, téléchargez l'archive et exécutez le fichier « test/test.html ».
Quelles innovations ce script propose-t-il :
Puisqu'ils ont transformé la "barre de défilement" principale en quelque chose de flou, nous devons restaurer la "barre de défilement" normale, ce que nous avons fait en dessinant une bande grise sur le côté droit de la page, immédiatement à gauche de la "barre de défilement" normale.
La distance parcourue par cette barre en haut correspond au nombre d'échantillons de résultats que nous avons déjà parcourus. En général, cette bande est plutôt noire. Là où il est gris, c'est l'endroit dans l'ensemble de l'échantillon où nous nous trouvons actuellement.
Veuillez également noter que l'adresse de la page change au fur et à mesure que vous faites défiler. Vous pouvez donc faire défiler la moitié de cette soirée, ajouter la page à vos favoris, éteindre l'ordinateur, vous coucher, vous réveiller le matin, allumer l'ordinateur, accéder à la page que vous avez mise en signet hier avant de vous coucher et continuer à faire défiler depuis le au même endroit où tu étais, arrêté. Et, de plus, vous pouvez faire défiler cet endroit non seulement vers l'avant, mais aussi vers l'arrière.
Et concernant la navigation vers n'importe quel page souhaitée: Vous pouvez accéder à n'importe quelle page ici - remplacez simplement le numéro de la page de sélection dont vous avez besoin dans l'adresse de la page Web. Étant donné que les URL lisibles par l’homme sont désormais standard, cela devrait constituer une solution viable.
Ce scénario n’est évidemment pas quelque chose de gravé dans le granit, et j’en ai moi-même réécrit la moitié en me levant ce matin. Cependant, les performances semblent stables et ont été testées dans dernières versions Chrome et FireFox. Je dirai tout de suite : je ne recherche pas la « compatibilité entre navigateurs » - elle peut toujours être complétée si quelqu'un souhaite utiliser ce script sur son site « multi-navigateur ».
Cela ressemble à tout, la démo parle d'elle-même. Le message suscite des commentaires.
Que peut-on faire d'autre (en fonction des commentaires) :
Lorsque vous cliquez n'importe où sur la bande, vous accédez à la page de sélection correspondante.
Supprimez les pages de données du haut de la page Web lorsqu'il y a trop de données sur la page Web (afin de ne pas ralentir).
Exemples de "défilement infini" amélioré.
Nick Babich, développeur, passionné de technologie et spécialiste simplement amoureux de l'UX/UI, a écrit une note sur le blog UX Planet sur le défilement infini, nous avons fait une traduction adaptative du matériel spécialement pour les lecteurs Habrahabr.
« Que dois-je choisir pour mon contenu : défilement infini ou pagination ? Certains designers se retrouvent encore dans une lutte acharnée entre les deux méthodes avant de décider laquelle utiliser dans leur conception. Chaque méthode a ses propres forces et faiblesses. Dans cet article, nous vous proposons un aperçu des deux techniques pour vous permettre de décider plus facilement laquelle utiliser dans vos projets.
Défilement infini Le défilement infini est une technique technologique qui permet aux utilisateurs de faire défiler un contenu volumineux sans que la fin soit visible. Cette méthode actualise simplement la page lors du défilement vers le bas. Même si cela semble très tentant, cette méthode n'est pas solution idéale pour tout site Web ou application.
Pro n°1 : engagement des utilisateurs et découverte de contenu.
L'utilisation du défilement comme méthode principale d'exploration des données peut amener un utilisateur à rester plus longtemps sur votre page Web et augmenter son engagement avec le contenu. Avec la popularité croissante des réseaux sociaux, la quantité de données consommées augmente ; le défilement infini fournit méthode efficace parcourez cet océan d’informations sans avoir à télécharger toutes les pages.
Le défilement infini est un élément presque obligatoire des interfaces d’actualités. Lorsqu'un utilisateur ne recherche pas quelque chose de spécifique, il doit parcourir une variété de sujets pour trouver celui qui lui plaît.
Océan de notes Pinterest
Vous pouvez apprécier les avantages du défilement infini à l'aide d'un exemple fil d'actualité Facebook. Les utilisateurs comprennent la loi non écrite de Facebook, selon laquelle ils ne pourront pas voir absolument toutes les publications, car le contenu est mis à jour trop souvent. Cependant, avec un défilement infini, Facebook fait de son mieux pour en exposer le plus possible. Plus d'information pour que les utilisateurs puissent le voir. Dans ce cas, le défilement permet aux utilisateurs de numériser les informations et de naviguer dans le flux.
Le fil d'actualité Facebook vous permet de visualiser une énorme quantité de contenu mis à jour
Avantage n°2 : faire défiler vaut mieux que cliquer.
Les utilisateurs trouvent que le défilement est plus pratique que d’appuyer/cliquer. Les souris à roulettes et à écran tactile ont rendu le défilement beaucoup plus facile que le clic. Pour un contenu long et continu, comme un manuel par exemple, le défilement est bien plus confortable que le clic lorsque le texte est découpé en plusieurs écrans et pages distincts.
Pour cliquer/appuyer : chaque mise à jour de contenu nécessite des clics supplémentaires et du temps pour attendre que la page se charge. Pour le défilement : une action unique et simple met à jour le contenu.
Avantage n°3 : le défilement est bon pour les appareils mobiles.
Comment écran plus petit, plus la barre de défilement est longue. Vulgarisation versions mobiles Les navigateurs sont un autre argument important en faveur du défilement. Le défilement est simple et intuitif à utiliser lorsqu’il est contrôlé depuis l’écran tactile. En conséquence, les utilisateurs bénéficient d’une application ou d’un site véritablement réactif, quel que soit le type d’appareil qu’ils utilisent.
Inconvénients n°1 : performances de la page et ressources de l'appareil.
La vitesse de chargement des pages est la chose la plus importante pour les utilisateurs. De nombreuses études ont montré que faible vitesse les téléchargements incitent les gens à quitter votre site ou à désinstaller des applications. Et c’est une mauvaise nouvelle pour ceux qui utilisent le défilement infini. Comment plus d'utilisateurs Faites défiler la page vers le bas, plus le contenu sera chargé sur une page. En conséquence, le taux de mise à jour du contenu diminuera de plus en plus.
Un autre problème réside dans les ressources limitées de l'appareil. Sur de nombreux appareils aux ressources limitées, tels que l'iPad, le défilement sans fin des sites, en particulier ceux contenant de nombreuses images, peut commencer à ralentir en raison de l'énorme flux d'informations chargé.
Moins n°2 : Recherche et localisation d'objets.
Un autre problème avec le défilement infini est qu'une fois que les utilisateurs arrivent à un certain point du flux, ils ne peuvent pas ajouter leur emplacement à leurs favoris et revenir à ce point plus tard. S'ils quittent le site, ils perdent là où ils s'étaient arrêtés et doivent recommencer à faire défiler la page pour revenir au même endroit. L'incapacité de fixer la position de défilement entraîne non seulement des désagréments pour l'utilisateur, mais gâche également l'expérience utilisateur globale.
En 2012, Etsy a passé beaucoup de temps à implémenter une nouvelle interface à défilement infini et a constaté qu'elle nouvelle interface nettement inférieur à l'ancien en termes de fonctionnalité. Même si le nombre d'achats n'a pas diminué, les taux d'utilisation du site ont chuté de manière significative : les gens n'utilisaient plus la recherche aussi souvent.
L'interface de recherche d'Etsy comporte une barre de défilement. Version actuelle contient une pagination
Comme le note Dmitry Fadeev : « Les gens veulent revenir à la liste des résultats de recherche pour revoir les éléments qu'ils viennent de voir et les comparer avec ceux qui se trouvent quelque part à l'autre bout de la liste. Le défilement infini les empêche non seulement de le faire, mais rend également difficile le déplacement de haut en bas dans la liste. Lorsque les utilisateurs ferment une page puis la rouvrent, ils sont obligés de faire défiler à nouveau la liste et d'attendre que tous les résultats de la recherche se chargent. Ainsi, une interface à défilement infini est en réalité plus lente qu’une interface paginée.
Inconvénients n°3 : incompatibilité de la barre de défilement.
Une autre chose ennuyeuse est que la barre de défilement ne reflète pas la quantité réelle de données. Vous faites défiler vers le bas, convaincu que la fin est proche. Cela en soi vous motive à le terminer, car il en reste si peu. Mais ensuite, vous êtes allé encore plus bas - et tout à coup, la barre s'est chargée et a doublé de taille, ajoutant la même quantité d'informations à visualiser. Du point de vue de l'accessibilité des utilisateurs, le chargement des barres de défilement est une très mauvaise option.
La barre de défilement doit refléter la taille réelle de la page
Inconvénients n°4 : Pas de pied de page.
Les pieds de page existent pour une raison : ils contiennent du contenu dont l’utilisateur a parfois besoin. Par exemple, si les utilisateurs ne trouvent pas quelque chose ou s'ils ont besoin Informations Complémentaires, ils font généralement référence au pied de page. Mais comme la barre de défilement est infinie, les nouvelles données qu'elle contient sont chargées et chargées au fur et à mesure que vous descendez, le pied de page reste tout le temps hors de vue.
Lorsque LinkedIn a introduit le défilement infini dans son interface en 2012, les utilisateurs pouvaient voir le bas de l'écran avant le chargement d'un nouveau contenu.
Les sites qui implémentent le défilement infini doivent soit ancrer le pied de page au bas de la barre de défilement afin qu'il soit toujours accessible, soit déplacer les informations qu'il contient dans l'en-tête de la page ou dans les barres latérales.
Facebook a déplacé tous les liens du pied de page vers la barre latérale droite
Une autre solution consiste à télécharger du contenu à la demande à l’aide du bouton de téléchargement. Le nouveau contenu ne se charge pas automatiquement tant que l'utilisateur n'a pas cliqué sur le bouton. De cette façon, les utilisateurs peuvent facilement accéder au pied de page plutôt que d’avoir à le poursuivre.
Instagram dispose d'un bouton "charger plus" qui permet aux utilisateurs d'accéder au pied de page
Avantage n°1 : Bonne conversion.
La pagination fonctionne très bien lorsque l'utilisateur recherche quelque chose de spécifique dans une liste de résultats, plutôt que de simplement analyser et résumer des flux d'informations.
Vous pouvez apprécier les avantages de la pagination en regardant l'exemple de recherche dans Recherche Google. En fonction de votre requête, la sélection du meilleur résultat de recherche peut prendre quelques secondes ou heures. Mais lorsque vous déciderez d’arrêter la recherche dans le format actuel de Google, vous connaîtrez le nombre exact de résultats de recherche. Vous pourrez décider où vous arrêter ou combien de résultats vous devez afficher.
Résultats de recherche Google
Avantage n°2 : se sentir en contrôle.
Le défilement infini est comme un jeu sans fin : peu importe combien vous faites défiler, vous aurez toujours l'impression de ne jamais arriver au bout. Lorsque les utilisateurs connaissent le nombre exact de résultats disponibles, ils peuvent prendre des décisions plus éclairées quant au moment d'arrêt plutôt que de parcourir une liste qui défile sans fin. Selon les recherches de David Kieras : « Atteindre un point final donne un sentiment de contrôle. » L'étude précise également que lorsqu'un utilisateur dispose de résultats limités mais néanmoins significatifs, il peut facilement déterminer si ces résultats incluent ou non ce qu'il recherche.
De plus, lorsque les utilisateurs voient le nombre total de résultats (en supposant bien sûr que la quantité totale de données n’est pas infinie), ils peuvent estimer combien de temps il leur faudra pour trouver ce dont ils ont besoin.
Le plus n°3 : Disposition des éléments.
Une interface paginée permet à l'utilisateur de se souvenir visuellement de l'emplacement d'un élément. L'utilisateur ne se souviendra peut-être pas du numéro de page exact, mais il saura approximativement où il a vu l'objet souhaité, et des liens numérotés lui permettront d'arriver là où il doit aller.
Avec la pagination, les utilisateurs contrôlent la navigation car ils savent sur quelle page cliquer pour revenir là où ils étaient auparavant.
La pagination fonctionne bien sur les sites Web et les applications de vente en ligne. Lorsqu’ils achètent quelque chose dans une boutique en ligne, les utilisateurs souhaitent pouvoir revenir là où ils s’étaient arrêtés et poursuivre leurs achats.
Le site Web de MR Porter utilise la pagination
Inconvénients : étapes supplémentaires.
Pour passer au contenu suivant lors de la pagination, l'utilisateur doit trouver le lien cible (par exemple, « suivant »), survoler celui-ci, cliquer et attendre que la nouvelle page se charge.
Cliquez pour télécharger le contenu
Le principal problème ici est que la plupart des sites affichent aux utilisateurs un contenu très limité sur une seule page. Si vous allongez vos pages sans sacrifier la vitesse de chargement, les utilisateurs auront accès à plus contenu sur une seule page, et ils n'auront pas à cliquer trop souvent sur les boutons de navigation.
Quand utiliser le défilement/pagination infinie ? Il n'existe que quelques situations dans lesquelles le défilement infini sera efficace. Il est idéal pour les sites et applications qui présentent du contenu généré par les utilisateurs (Twitter, Facebook) ou du contenu visuel (Pinterest, Instagram). En revanche, la pagination est option sûre Et bonne décision pour les sites et applications conçus pour des activités d’utilisateurs ciblées.Google est bon exempleà titre d'illustration. Google Images utilise le défilement infini car les utilisateurs visualisent les images beaucoup plus rapidement que le texte. La lecture des résultats de recherche prend beaucoup plus de temps. C'est pourquoi les résultats de recherche dans la recherche Google sont toujours présentés de manière plus traditionnelle, sous forme de pages individuelles.
Conclusion Les concepteurs doivent peser le pour et le contre du défilement et de la pagination infinis avant de choisir une méthode. Le choix dépend du contenu du projet et de la manière dont ce contenu est présenté. En général, le défilement infini fonctionne bien sur des sites ou des applications comme Twitter, où les utilisateurs consomment un flux infini de données sans se concentrer sur quoi que ce soit en particulier. Une interface paginée est idéale pour afficher les résultats de recherche lorsque les internautes recherchent un produit spécifique et qu'ils se soucient de la localisation de chaque article qu'ils consultent.Dans les articles suivants, nous examinerons meilleurs exemples utilisez le défilement et la pagination infinis. Alors restez à l'écoute!