Meilleures pratiques de pagination
Je ne suis pas sûr de la meilleure façon de gérer la pagination que je dois effectuer sur une table qui pourrait potentiellement devenir très grande (5 000 lignes et plus).
Ma première question est de savoir si le nombre de lignes affichées par page doit être dicté uniquement par la mise en page, ou si le nombre de pages doit également être pris en compte. Par exemple, devrais-je dire <1000 afficher 20 lignes,> = 1000 afficher 30 lignes?
La question suivante est de savoir comment naviguer au mieux entre les pages, en supposant que l'utilisateur a filtré le tableau autant qu'il le peut et qu'il lui reste 50 pages d'informations, devrait-il obtenir une zone de saisie pour passer à la page 45? Ou les boutons skip (1) skip (5) devraient-ils suffire? Pour le moment, je ne sais pas comment l'utilisateur final va utiliser les tables, donc je ne sais pas quelle option les laisser essayer en premier.
Enfin, quelqu'un a-t-il de bons exemples de pagination bien fait qu'il pourrait partager? Je suis toujours à la recherche d'un bon matériel de référence!
Cela peut ou non être une pagination bien faite, mais voici comment je fais la pagination dans mon application web:
|< First, << Previous, Page [5] of 12, Next >>, Last >|
Les quatre options externes sont des liens, tandis que le Page [5] of 12 est un formulaire, avec le [5] comme champ de saisie. Pour les utilisateurs avec JavaScript activé, je masque le bouton Envoyer et soumets le formulaire sur l'événement flou ou saisissez la touche L'utilisateur a la possibilité de choisir le nombre de lignes qu'il souhaite afficher, qu'il peut sélectionner dans un menu déroulant: 10, 20, 50, 100, Tous. Je fournis également le tri et le filtrage des résultats en plus de la pagination, bien que cela puisse ne pas avoir de sens dans toutes les situations.
Modifier :
Voici un extrait d'une maquette de notre application Web pour vous donner une meilleure idée. Dans cette version, les mots ont été omis des boutons, mais apparaissent sous forme d'infobulle au survol après un léger retard. Cependant, vous constaterez peut-être que conserver les mots se traduira par un niveau d'utilisation plus élevé.
Quelques autres choses à souligner:
- Les boutons "Premier" et "Précédent" ont été désactivés car il s'agit de la première page.
- Le bleu indique les boutons actifs (je devrai exécuter ce thème particulier à travers un vérificateur de couleurs pour m'assurer que les utilisateurs daltoniens peuvent faire la différence).
- Les boutons restent toujours, même s'ils sont désactivés. Cela donne la cohérence de l'interface.
- J'ai choisi un champ de saisie plutôt qu'une boîte de sélection déroulante en raison de l'échelle. Si vous avez 3000 pages, vous ne voulez pas faire défiler vers le bas pour trouver la page
- La pagination est regroupée dans une composante visuelle singulière pour indiquer la similitude d'objectif.
Désolé pour une telle réponse, mais cela dépend . De quel type de contenu disposez-vous et que recherche l'utilisateur? Quels sont les objectifs de l'utilisateur? Est-ce un site Web ou une application?
Dans de nombreux cas, vous pouvez éviter la pagination en utilisant le défilement infini par exemple (voir les résultats de la recherche de Recherche d'images Google ).
Le problème avec la pagination est que les pages elles-mêmes n'ont aucun sens. Pourquoi devrais-je aller à la page 45? Pourquoi pas 38? Si le contenu est trié, vous pouvez essayer de donner aux pages des noms significatifs (comme les lettres d'un alphabet ou une plage de dates ou tout autre élément logique). Le nombre de lignes par page doit être aussi grand que possible car le défilement offre généralement une bien meilleure expérience que la navigation dans les pages (cependant ce n'est pas une règle générale et il y a quelques exceptions).
Et pour les exemples et les bonnes pratiques, voici un excellent article .
En général, le nombre d'éléments par page est quelque chose que vous déterminez en fonction des critères suivants:
- Quel type de données est-ce que j'affiche et combien de temps un nombre donné d'éléments ferait-il la page?
- Quelles sont les conséquences des X éléments de la page sur les performances de l'application?
- Est-ce que je veux permettre aux utilisateurs de personnaliser le nombre d'éléments affichés par page?
- Si je me soucie de la navigation entre les pages (par exemple, un utilisateur se souciera-t-il d'aller à la page spécifique n ° 512?), Comment le nombre d'éléments par page affectera-t-il la navigabilité de la pagination?
- Quels sont les contrôles de pagination dont je dispose?
Si vous répondez aux questions ci-dessus, elles mèneront bien aux réponses à votre deuxième question. La pagination est un produit des données dont vous disposez et du nombre d'éléments que vous affichez. Mon conseil est de déterminer si vos utilisateurs souhaitent spécifier la page qu'ils souhaitent afficher. Vous pouvez comprendre cela en effectuant des tests utilisateur et en réfléchissant au type d'informations répertoriées. Par exemple, les résultats de recherche sont rarement suffisamment précis pour pouvoir dire "Je veux aller à la page 47" car ils sont généralement triés par un algorithme cryptique et opaque. Mais si vous listez, disons, les noms par ordre alphabétique, aller à la page 47 peut être très intuitif.
De même, le type de données que vous affichez peut également affecter la navigation et vous pouvez envisager le modèle de conception de navigation à facettes pour simplifier les choses. Dans l'exemple que je viens de donner sur les noms alphabétiques, vous pouvez envisager la pagination en utilisant des lettres (A | B | C | D, etc.) et des pages dans chaque lettre si vous avez beaucoup de données.
Concrètement:
- Je ne recommande pas de donner aux utilisateurs trop de contrôle spécifique, sauf si vous savez pertinemment que c'est ce qu'ils veulent
- Au lieu de cela, offrez un remplissage autour de la page actuelle (1 .. 7 8 [9] 10 11 .. 28)
- Incluez la première et la dernière page si vous effectuez un tri par algorithme, sauf si vous ne le pouvez pas pour des raisons de performances.
- Si le tri est algorithmique, envisagez différentes options de tri (telles que l'inversion de l'ordre de tri) - dépend du type de données
Exemples de pagination bien faite:
- Flickr - différenciation claire entre l'état sélectionné, inactif et l'état du lien; couleurs accessibles; liens rembourrés avec de bonnes cibles de clic; bon rembourrage autour de la page actuelle; pas trop complexe. Un favori personnel.
- Funda.nl - Site Web immobilier néerlandais avec un superbe design simple et facile à lire qui se reflète également dans la pagination
- Bing - pas de BS, design typographique minimaliste signifiant que la pagination est très subtile mais facile à utiliser simultanément
- Google (évidemment) - une sorte de gadget, mais en dépit d'avoir beaucoup d'options, se sent toujours simple et apporte même un sourire sur votre visage
- Chris Messina a quelques bons plans de pagination dans son album de modèles de conception sur Flickr.
Modèles de pagination:
Quant à votre première question - je suis un fan de cohérence (et la plupart des utilisateurs le sont aussi). Ne confondez pas l'utilisateur et faites-lui réfléchir pourquoi il voit plus de lignes cette fois ... Vous pouvez même le laisser sélectionner des "éléments par page", ce qui est une pratique très courante et utile.
Les utilisateurs préfèrent le défilement puis la pagination. Il est beaucoup plus facile d'utiliser la molette de défilement que de viser de petits liens de navigation.