web-dev-qa-db-fra.com

Pagination régulière vs défilement infini

Je fais actuellement un site de rencontres, mon choix de pagination est entre le traditionnel:

[<< Prev] [1] [2] [3] [Next >>]

contre

[ Load More ]

Le deuxième est la barre ou le bouton "charger plus" qui se trouve sur quelques sites populaires comme Twitter et Facebook. Dans tous les cas, les résultats seront livrés via ajax sans rechargement de page.

En tant que développeur et non pas une personne ux, je me demandais ce que vous pensez être plus approprié et convivial pour un site comme celui-ci? Fondamentalement, il y a un formulaire de recherche avec beaucoup de filtres en haut de la page et lorsque l'utilisateur choisit ses options et ses résultats, les résultats et la pagination apparaîtront sur la même page sous le formulaire.

Si j'utilise la pagination de type chargement plus, serait-il préférable de le charger automatiquement (c'est-à-dire lorsque l'utilisateur atteint le bas de la page plus de résultats se chargent sans qu'il ait à faire quoi que ce soit) ou de charger plus uniquement en cliquant?

Personnellement, je trouve le chargement automatique ennuyeux, mais je n'ai aucune idée de ce que la majorité du public ressent à ce sujet.

64
Sammy

[ Load More ] est certainement plus "convivial" qu'un ensemble de liens de pagination, mais, surtout, rien n'indique combien de données supplémentaires peuvent être consultées. Vous devrez donc ajouter quelque chose d'autre qui donne cette information - en supposant qu'elle soit disponible.

Si vous ne connaissez pas le nombre total de correspondances (merci @Erics) alors [ Load More ] est idéal.

Si vous connaissez le nombre total de correspondances [ Load More ] plus une indication du nombre total de correspondances serait acceptable, car les gens ne sont généralement intéressés que par les résultats des premières "pages" de correspondances (les résultats de recherche Google viennent à l'esprit ici).

Vous devez répondre à la question suivante: Est-il important que l'utilisateur sache qu'il existe 3 (ou 5) pages de correspondances possibles ou sera-t-il heureux de continuer à cliquer sur [ Load More ] jusqu'à ce qu'ils a) trouvent un match ou b) s'ennuient?

Si c'est le premier alors vous avez besoin de ce total et pour utiliser la pagination, si c'est le dernier, alors optez pour [ Load More ].

En fin de compte, je pense que si vous utilisez le chargement automatique est une préférence personnelle. Personnellement, je trouve cela ennuyeux car je m'attends à faire défiler vers le bas de la page et à voir une indication de la quantité de données qu'il reste à voir, mais vos utilisateurs ne le peuvent pas.

37
ChrisF

J'ai la même opinion que vous: je n'aime pas le défilement infini. Dur, avec le temps, cela pourrait changer.

Dans son article de blog La fin de la pagination , Jeff Atwood souligne que

Par-dessus tout, vous devez vous efforcer de rendre la pagination non pertinente, car l'utilisateur n'a jamais à regarder plus de quelques éléments pour trouver ce dont il a besoin

Donc, mon conseil serait: quel que soit le choix que vous vous retrouvez, permettez à l'utilisateur de parcourir facilement une page de profil, de revenir à la page de résultats, de parcourir une nouvelle page de profil, de revenir aux résultats, etc. J'essaierais également différentes habitudes de navigation: soit faire ce scénario avec un seul onglet ouvert, ou en ouvrant un nouvel onglet lors de la vérification d'une page de profil. (cela ouvre deux questions. L'une: est-il facile d'ouvrir un lien de profil dans une nouvelle page en cliquant avec le bouton du milieu. Attention à ce genre de comportement . Deux: si vous pouviez revenir en arrière avec un lien vers la page de résultats une fois que vous avez ouvert un profil dans un nouvel onglet? Dans ce cas, vous ne pouvez pas appuyer sur le bouton de retour du navigateur.)

Jeff Atwood souligne également certains des inconvénients de la pagination sans fin, ou du défilement infini:

  • La barre de défilement, la boussole morale de l'utilisateur de "combien plus?" ne fonctionne pas en pagination sans fin car il est effectivement infini. Vous aurez besoin d'une autre méthode pour fournir ces commentaires cruciaux, peut-être sous la forme d'un simple texte chargé en pourcentage ancré au bas de la page.
  • La pagination sans fin ne doit pas rompre les liens profonds. Même sans le concept de "page", les utilisateurs devraient pouvoir établir un lien clair et évident avec n'importe quel élément spécifique de la liste.
  • Cliquer sur le bouton avant ou arrière du navigateur devrait préserver la position de l'utilisateur dans le flux de défilement sans fin, en utilisant peut-être pushState .
  • La pagination peut être une mauvaise expérience utilisateur, mais elle est essentielle pour les araignées Web. Ne négligez pas non plus les moteurs de recherche Web avec un système de pagination traditionnel, ou peut-être un Sitemap .
  • Fournissez des commentaires visibles lorsque vous chargez dynamiquement de nouveaux éléments dans la liste, afin que l'utilisateur puisse savoir que de nouveaux éléments arrivent et que leur navigateur n'est pas bloqué - et qu'ils n'ont pas encore atteint le bas.
  • N'oubliez pas que l'utilisateur ne pourra plus accéder au pied de page (ou à l'en-tête), car les éléments continuent d'apparaître au fur et à mesure qu'ils défilent dans la rivière du contenu sans fin. Donc, passez aux en-têtes et pieds de page statiques, ou utilisez peut-être le bouton explicite "charger plus" au lieu de charger automatiquement le nouveau contenu.
22
Benjamin Crouzier

J'y pense de cette façon:

  • Si vous souhaitez que les utilisateurs voient de plus en plus de pages non-stop, vous devez utiliser la pagination automatique (pas seulement l'ajout à la fin du contenu après un clic manuel). Vous pouvez définir le seuil des pages affichées, limiter les résultats non consultés ou donner à l'utilisateur le paramètre correspondant pour ce mode afin d'éviter une surcharge d'informations de leur côté. N'utilisez pas le bouton manuel [Charger plus] avant d'atteindre ce seuil n-ième fois, car cela donne à cette méthode les lacunes de la pagination classique sans donner d'avantages supplémentaires. Vous pouvez faire périodiquement history.pushState pour que l'utilisateur puisse continuer à partir des derniers résultats affichés si la page ralentit ou se bloque.
  • Si vous voulez que les gens concentrent leur attention uniquement sur plusieurs premières pages (une sorte de système de promotion en place) ou si c'est le résultat naturel de l'algorithme de recherche (les résultats ultérieurs sont de moins en moins pertinents), déchargez le serveur ou avez la possibilité simple de revenir à un certain sous-groupe de résultats (comme autour de certaines dates), il est temps pour la pagination classique.

Dans tous les cas, personne ne vous empêche d'ajouter une option personnalisée pour que les utilisateurs choisissent ce qu'ils préfèrent et même utilisent des tests A/B (temporaires) avec son paramètre par défaut pour voir ce que les gens aiment vraiment dans votre cas.

5
DitherSky

Dans tous les cas, les résultats seront livrés via ajax sans rechargement de page.

Une chose à considérer est qu'un utilisateur peut être enclin à utiliser son bouton de retour si vous suivez la voie de pagination. Quelque chose comme "Hey, je devrais aller regarder cette personne à la page 2 à nouveau ..." Si les résultats sont ajoutés via ajax, le bouton de retour du navigateur ne les ramènera pas automatiquement aux résultats précédents.

**

http://danwin.com/2013/01/infinite-scroll-fail-etsy/

J'ai trouvé cela quelques jours seulement après avoir posté ma réponse. Lecture intéressante sur les raisons de l'échec du défilement infini chez etsy. Je n'ai pas encore vérifié la présentation/les diapositives mais je prévois de le faire.

4
Jeremy A

Vous devriez considérer le problème que l'utilisateur pourrait essayer de résoudre lorsqu'il consulte votre liste. Navigue-t-il comme nous le faisons dans les flux Twitter ou Facebook, puis utilise "charger plus". Est-ce qu'il essaie de trouver certaines informations qu'il voudra peut-être réexaminer plus tard, vous devriez opter pour la pagination - pour des raisons déjà soulignées par toutes ces personnes intelligentes ici. :-)

3
Steffen Kastner

Une chose à laquelle je ne pense pas que beaucoup de gens pensent avec le défilement infini est qu'il rend essentiellement inaccessibles tous les éléments d'interface utilisateur que vous avez dans la zone de pied de page.

Si vous avez un gros pied de page avec des liens utiles sur plusieurs/toutes les pages de votre site, un défilement infini créera une expérience discordante. L'utilisateur défile vers le bas, voit le pied de page pendant une seconde ou deux, puis voit le nouveau jeu de résultats Poussez le pied de page vers le bas hors de la vue.

Cela se transforme en un jeu de cache-cache et pour certains utilisateurs, cela peut devenir très frustrant.

2
Charles Wesley

Aujourd'hui, la pagination continue d'être plus courante sur Internet en raison de l'ancien concept de pagination ajouté au gain de performances. Mais les études d'interface indiquent que le défilement infini, ou [Charger plus] en plus d'être plus attrayant, peut fournir une expérience utilisateur supérieure en fonction de l'application, des performances des machines et de la programmation a amélioré ce qui a contribué à le faire fonctionner.

Avantages:

  • Vous gardez l'utilisateur plus longtemps sur votre site
  • Faire défiler vaut mieux que cliquer

Désavantages:

  • Si l'utilisateur clique pour revenir, il perd la progression et revient en haut de la page
  • l'utilisateur ne sait pas combien d'éléments ont le résultat

Vous devez maintenir les performances élevées, si vous utilisez le défilement infini mais ne pouvez pas rendre la recherche de résultats plus instantanée, passez à la pagination. Mais si vous pouvez maintenir des performances correctes, vous pouvez utiliser un défilement infini, des filtres ajoutés avec votre liste de résultats pour le rendre plus facile pour l'utilisateur.

L'important est de déterminer la fonction des résultats dans votre application pour savoir s'il est nécessaire d'utiliser la pagination ou le chargement paresseux.

Ces liens peuvent vous aider: 124

1
Maisa Barros

Si vous créez un site de rencontres, la pagination ne doit pas être 1,2,3 (car elle peut être ennuyeuse) mais charger plus.

Voir, si vous demandez PLUS . Oui, montrez-moi plus. Vous générez de l'enthousiasme pour l'utilisateur sans révéler le nombre de résultats. Pour les utilisateurs, c'est toujours excitant d'en voir plus, en particulier sur les sites de rencontres

0
pzv

Je pense que cela dépend du temps passé à naviguer ou à interagir avec les éléments de la page. S'il n'y a qu'une implication superficielle attendue de l'utilisateur, alors le défilement infini serait un meilleur choix. Mais si c'est un chantier, par exemple, l'utilisateur devrait passer un peu de temps à lire les extraits, etc., et donc la pagination devrait être préférée.

Exemples spécifiques des deux cas d'utilisation:

  • Pinterest: légère implication avec les éléments de la page, le défilement infini fonctionne bien.
  • Google Images: implication cursive, navigation rapide attendue de l'utilisateur (vous pouvez juger très rapidement si une image vous intéresse ou non). Le défilement infini fonctionne donc bien.
  • Rechercher un chantier: une implication plus profonde avec chaque élément (description de poste), donc la pagination fonctionne bien.

Mais pourquoi préférer la pagination chaque fois que nous le pouvons? Eh bien, la pagination offre de multiples avantages comme mentionné dans d'autres réponses ici, à savoir une estimation du nombre de résultats, une navigation rapide vers une page particulière, un meilleur référencement, etc.

Si l'utilisateur passe un temps égal à visualiser les éléments sur la page et à attendre que la page suivante se charge, je pense qu'il vaut mieux opter pour un défilement infini.

J'espère que le défilement infini rattrapera également sa mise en œuvre pour inclure tous les avantages d'une configuration de pagination traditionnelle.

0
Adnan Khan