web-dev-qa-db-fra.com

Pagination de Fibonacci

Aujourd'hui, je suis tombé sur ce concept de pagination et je l'ai trouvé fascinant: le concept de pagination basé sur Fibonacci.

C'est en fait un vieux tir mais cela m'a fait penser car je devrai paginer du contenu dans un avenir proche.

Les pages deviendront bientôt des centaines et finalement des milliers, donc j'aurai besoin d'une pagination "intelligente" [en groupes] (10-30 | 31-32-33 ... 37-38-39 | 40-70) au lieu de simplement lister pages de 1 à 200.

Comme mentionné précédemment, je trouve cette approche fascinante mais je pense aussi que l'utilisateur doit pouvoir accéder à la page qu'il souhaite avec le moins d'étapes possible.

Je ne suis pas un expert UX donc vous serez le juge: considérez-vous que c'est une bonne ou une mauvaise approche? Et dans quel cas d'utilisation s'agit-il d'une bonne ou d'une mauvaise approche?

MON CAS D'UTILISATION

Je ne connais pas le cas d'utilisation du créateur. J'affiche un contenu qui est ordonné par le temps mais la variable de temps n'est pas pertinente pour l'utilisateur. Les pages ne sont là que pour fragmenter le contenu.

L'utilisateur en lui-même n'a pas besoin d'aller sur une page spécifique car les éléments ont un permalien.

Disons que j'ai des messages qui contiennent des aphorismes: ils ont été publiés à des moments différents afin que je puisse les répertorier et les commander et éventuellement les diviser en pages, mais la date/heure elle-même n'a pas d'importance.

72
XCore

Quel problème résolvez-vous avec cela?

Cela semble être la solution d'un développeur à un problème qu'ils pensent exister. Voyons comment les utilisateurs utilisent les pages.

Ils veulent aller à:

  • une page spécifique
  • la première page
  • la dernière page
  • un élément spécifique contenu dans l'une des pages
  • aller à la page suivante ou précédente (oups, j'ai oublié ça, merci 3nafish)

Avancer de 10 pages au hasard? Pourquoi? Si votre utilisateur doit le faire, vous ne résolvez pas le problème correctement.

116
Chris Aplin

Si vous voulez vraiment donner la possibilité de choisir n'importe quelle page de même 3000, il y a une vieille soulution de karaboz. L'idée est de faire choisir une page comme une barre de défilement. Par exemple, à quoi il ressemble pour 50 pages: enter image description here

Vous pouvez déplacer le pointeur de défilement (gris) très rapidement pour atteindre un groupe de pages dont vous avez vraiment besoin sur cette momet. Le marqueur orange - page qui est choisie maintenant. Un clic pour changer de page.

Pour 100 pages: enter image description here

Vous pouvez trouver des exemples et des sources sur le Web par leur nom - "Paginator 3000"

46
Mike Frolov

Sauf pour quelques cas Edge, je pense que la pagination est une mauvaise idée , surtout quand il s'agit de forums.

Modifier: En y repensant après 4 ans! Maintenant défilement infini (je l'ai appelé chargement dynamique) semble être la solution idéale pour les applications modernes. Affaire au point: Reddit.

Question: Comment un utilisateur peut-il savoir qu'il y a une photo de chat intéressante dans le post 3 de la page 1534?

Ils ne le font pas. Les utilisateurs qui souhaitent accéder à une page spécifique est une exigence inexistante dans les formats de forum courants. Ce que les utilisateurs veulent, c'est sauter ces messages bruyants ("Great post", "WOW", "LOL", "Thanks"), et (espérons-le) accéder à cette image de chat quelqu'un - mai ont posté .

Dans les formats de forum (ou similaires), le contenu après (disons) la page 10 est généralement inutilisable pour le grand public d'Internet. Je pense que nous devrions concevoir des sites Web de telle sorte que le système décourage les utilisateurs d'allonger un fil de discussion pour des milliers de pages.

Alors comment faire évoluer notre forum sans pagination?

Discours a une façon fascinante d'afficher de longs fils de discussion: il récupère le contenu dynamiquement lorsque les utilisateurs défilent vers le bas de la page.

Une autre chose que vous pouvez faire est d'essayer de supprimer les choses bruyantes/impopulaires, donc la plupart des choses pertinentes et intéressantes tiennent dans la première page. Reddit fait cela.

Que se passe-t-il si l'utilisateur vraiment souhaite accéder à une page/publication spécifique?

Une idée intéressante des commentaires était que,

l'utilisateur saurait qu'il y a une image de chat intéressante à la page 1534, parce que quelqu'un l'a dit .

Mais voyez comment cela peut rompre avec la pagination: au moment où l'utilisateur passe à la page 1534, l'image est passée à la page 1531 , car les modérateurs ont supprimé certains messages de spam dans le fil.

Nous pouvons plutôt utiliser le concept de permalink. Comment le permalien fonctionnerait-il avec le chargement dynamique? Eh bien, vous pouvez montrer à l'utilisateur le message correspondant au permalien, associé à quelques messages avant et après pour donner un peu de contexte. Twitter fait cela. L'utilisateur peut toujours faire défiler vers le haut ou vers le bas pour charger des messages supplémentaires.

Twitter showing a Tweet with context

Navigation approximative de haut en bas sur le fil

Une autre exigence des commentaires:

Je veux savoir quelque chose qui s'est passé il y a six ans, je veux sauter environ 60% du chemin et commencer à regarder à partir de là.

Il existe un site Web de médias sociaux très populaire qui le fait avec un chargement dynamique. Regarde ça:

Facebook displays its timeline with dynamic loading. Users can jump to specific time periods using a scale in the side of the thread

Mais, le chargement dynamique des pages est inefficace. Comment pouvez-vous résoudre cela?

Comme l'ont souligné les commentaires, le chargement dynamique des pages peut être très gourmand en processeur, ce qui peut parfois faire planter les navigateurs. Un remède serait de supprimer l'ancien contenu que l'utilisateur a déjà lu sur la page. Dans les conversations typiques, il est peu probable que les utilisateurs reviennent dans le fil.

25
sampathsris

Je pense que ça s'arrête après le facteur cool. C'est une de ces situations "juste parce que vous le pouvez, ne signifie pas que vous devriez".

Il vaut mieux suivre ce qui est conventionnel. Sauter dix pas en avant ou en arrière est le plus courant (après en avoir fait un, bien sûr). Je pense que le prochain grand nombre à parcourir plusieurs pages serait un nombre commun auquel nous sautons dans d'autres situations, telles que 25, 50 ou 100. Votre meilleur pari est de tester les utilisateurs, bien sûr.

Éditer: J'ai vu des commentaires affirmant que la pagination est généralement mauvaise, donc je me sens obligé de souligner que la pagination est souvent une bonne expérience. Voici un extrait de Nielsen Norman Group:

La pagination est utile pour les listes, telles que les pages de catégorie de commerce électronique, les pages de résultats des moteurs de recherche (SERP), les archives d'articles et les galeries de photos. Ici, l'objectif d'un utilisateur n'est pas de parcourir la liste complète, mais plutôt de trouver un élément spécifique et de cliquer sur cette page de destination.

En supposant que vous pouvez hiérarchiser les éléments de la liste, les utilisateurs sont susceptibles de trouver ce qu'ils veulent près du sommet. Pour attirer l'attention des utilisateurs et améliorer le temps de réponse, vous pouvez commencer par afficher une liste assez courte, puis proposer des options de pagination pour progresser plus loin dans la liste si nécessaire.

- Préférences de pagination des utilisateurs et "Afficher tout"

Le défilement infini peut être particulièrement mauvais sur les sites de commerce électronique lorsqu'un utilisateur plonge fréquemment dans des pages de détails et recule. Voici un article qui souligne plusieurs problèmes avec la technique: http://www.nngroup.com/articles/infinite-scrolling/

J'ai moi-même souvent souffert de la douleur du défilement infini lors de mes achats sur mon téléphone; car lorsque je quitte la page de détail d'un produit, la page des produits répertoriés est actualisée et ne conserve pas l'emplacement de la page où j'étais auparavant. Je quitte généralement le site.

6
Michelle

Il s'agit d'un problème de mise à l'échelle, qui est un problème courant dans la visualisation des données :) Votre axe Y contient des données (numéros de page), et idéalement, vous voudriez les afficher toutes en même temps - mais cela ne convient pas, donc vous mettez à l'échelle il.

Nous évoluons par log (10) généralement, car c'est l'une des transformations les plus faciles à conceptualiser pour les gens - mais vous pouvez suivre n'importe quelle séquence de mise à l'échelle! Une façon de tester une séquence donnée serait de calculer:

- The most clicks required to reach a page in list
- The mean clicks to reach any page in list
- The modal clicks to reach any page in list

Utilisation des variables:

 - Total number of pages
 - Number of options/jumps available to choose from
 - Scaling approach

Différentes approches de mise à l'échelle auront des résultats différents compte tenu des différentes longueurs de liste et du nombre de sauts. Le calcul de ces scores est également un problème pour les vendeurs itinérants, il peut donc devenir difficile de calculer pour de grandes listes (où ces données seraient les plus utiles). Toujours aussi amusant.

5
J.J

C'est une idée intéressante, mais l'utilisation de la séquence de Fibonacci semble assez arbitraire. En supposant que l'utilisateur souhaite trouver un élément spécifique positionné uniformément sur les pages et qu'il connaît l'ordre de classement de l'élément, l'algorithme le plus efficace serait un algorithme de recherche binaire. Il serait donc plus approprié d'utiliser la pagination suivante:

LEFT MID RIGHT

Par exemple, si vous aviez 64 pages et que vous vouliez un élément à la page 42. Le numéro entre crochets montre la page actuelle de l'utilisateur:

16 (32) 48 --> 40 (48) 56 --> 36 (40) 44 --> 42 (44) 46 --> 41 (42) 43.

L'utilisateur n'a donc qu'à visualiser 5 pages pour trouver son article. Chaque fois que l'utilisateur clique sur une page plus loin, vous prenez cette instruction à la lettre et ajustez la plage de pagination. La question de savoir si cela est utile ou non pour les applications grand public est discutable, mais il peut être utile pour des tâches spécifiques de trouver des éléments. Vous pouvez également étendre cela tout simplement de l'affichage de 3 pages à n pages en les sélectionnant uniformément.

2
Brendon

En prenant une page de notre lecteur vidéo habituel, un bouton "avance rapide" et "retour rapide" peut être ajouté pour une navigation plus rapide à travers les pages. Mais Fibonacci? Ça n'a aucun sens pour moi.

enter image description here

2
Adnan Khan

Cela peut être une bonne idée si vous supposez qu'un utilisateur souhaite passer aux pages, éventuellement en sautant. Mais encore, il ne doit pas nécessairement s'agir d'une séquence de Fibonacci. Vous pouvez avoir une échelle logarithmique de n'importe quelle base.

Mais en fait, en premier lieu, je ne pense pas que des boutons du genre autres que "précédent" et "suivant" (ou équivalents) auraient un sens. Si les utilisateurs ont en tête une page particulière à laquelle ils souhaitent accéder, ils doivent la saisir dans une zone de saisie plutôt que d'accéder à cette page en cliquant plusieurs fois sur les boutons de navigation. Sinon (si un utilisateur n'a pas une page particulière en tête), l'utilisateur devrait être intéressé à regarder toutes les pages une par une, et cela n'a pas de sens de sauter certaines pages, donc "précédent" et "suivant" serait être assez.

2
sawa

Je pense également que l'utilisateur doit pouvoir accéder à la page qu'il souhaite avec le moins d'étapes possible.

les nombres de fibonacci sont cool mais le moins d'étapes possible est d'obtenir le numéro de la page que l'utilisateur veut et d'y sauter.

Si je sais que quelque chose se trouve à la page 1512, je préfère faire cela que de jouer à la recherche binaire avec des nombres de fibonacci (en fait, j'essaierais de contourner la navigation en modifiant l'URL)

2
thanosqr

Vous pourriez envisager d'utiliser un menu déroulant (AKA un menu contextuel).

Cela donne une indication rapide de la taille de l'ensemble de résultats, tout en permettant à l'utilisateur de passer à la première, la dernière et n'importe quelle page intermédiaire, avec une facilité raisonnable.

edinburghbicycle.com pagination

Cela vient de http://www.edinburghbicycle.com/browse/clothing/mens-clothing

Lors des tests utilisateurs, j'ai trouvé que la chose la plus importante était d'avoir d'énormes boutons suivant/précédent.

Le chargement différé est une meilleure solution - mais c'est facile à dire ...

2
dave

Une idée intéressante à coup sûr, mais si vous prévoyez d'avoir des centaines ou des milliers de pages, parcourir toutes ces pages sera probablement une expérience désagréable.

Le cynique en moi croit que le cas d'utilisation du créateur montrait la capacité de résoudre un défi de programmation commun en écrivant un algorithme qui imprime la séquence de Fibonacci.

1
drosenblatt

S'il s'agit d'une pagination pour un résultat de recherche, gardez à l'esprit que les résultats les plus pertinents se trouvent dans les deux premières pages (je n'ai jamais vraiment paginé les résultats de recherche Google au-delà de 2-3). Ainsi, la meilleure expérience est de montrer les résultats les plus pertinents en haut et de garder l'accent sur la pagination faible.

Si vous affichez une archive, la catégorisation est préférable à la simple pagination. Exemple: alphabétique, par auteur, dernière modification, balises, etc.

0
Balaji Natarajan