Que faire avec le "dernier" bouton de pagination?
Un grand nombre de listes et de pages de résultats de recherche utilisent First et Last liens, parfois appelés << et >>. Dans la plupart des cas, Last Le bouton est également à l'extrême droite, ce qui semble être considéré comme une bonne ergonomie.
Cela ressemble généralement à ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Personnellement, je n'aime pas cet arrangement. Pourquoi? Parce que dans 90% des cas, tout ce dont j'ai besoin c'est Next bouton. Galeries de photos, résultats de recherche, tableaux, etc. Un cas auquel je pense où j'aurais souvent besoin du Last bouton est dans les forums Internet, où je veux passer rapidement à la dernière entrée ...
L'arrangement ci-dessus rend le Next difficile à identifier et à cliquer, car il est pris en sandwich entre ces autres éléments. Il semble Next a un poids inférieur à Last.
Bien sûr, logiquement Last remplace Next, c'est pourquoi il est placé après. Mais c'est au prix (à mon avis) d'une charge cognitive accrue.
Peut-on vraiment considérer cela comme une "bonne convivialité"?
Exactement, je pense que ce type particulier de pagination m'a souvent causé des confusions. Cependant c'est déjà adapté par la population.
Je suggérerais quelque chose comme ci-dessous
Donc, ce qui se passe vraiment ici, c'est -
Cela rend clairement le précédent/suivant très important et ne cause aucune confusion.
Dans les numéros de page, trois points (...) suivis des deux derniers numéros de page montrant clairement que la pagination va jusqu'à 200. Si l'utilisateur veut aller à la dernière page, il cliquera simplement sur 200.
UX très linéaire et non déroutant
J'espère que cela t'aides.
Pagination avec liste de sélection
Lorsqu'il y a un nombre gérable de pages:
- Affiche le numéro de page actuel (
selectedattribut deoption) - Affiche le dernier numéro de page après un clic (peut également être ajouté à côté de la liste de sélection si c'est important)
- Permet d'accéder directement à n'importe quelle page (y compris la première et la dernière)
- Pas de confusion entre deux ensembles de boutons (premier/dernier et précédent/suivant)
Pagination avec champ de saisie
Fonctionne également bien quand il y a beaucoup pages:
- Affiche le numéro de page actuel (par défaut
valuedu champ de saisie) - Affiche le dernier numéro de page (peut également être rendu cliquable)
- Permet d'accéder directement à n'importe quelle page en entrant le numéro de page
- Pas de confusion entre deux ensembles de boutons (premier/dernier et précédent/suivant)
(Les deux façons peuvent être combinées avec une zone de liste déroulante.)
Je tape souvent dans la barre d'URL pour pouvoir accéder directement à la page que je souhaite. Une boîte de saisie permettant à l'utilisateur de taper la page directe serait un grand coup de pouce en UX et en convivialité.
Vous pouvez faire en sorte que le numéro de page actuel (celui qui apparaît comme actif) tourne contenteditable lorsque vous cliquez dessus (assurez-vous de mettre en surbrillance automatiquement) et laissez l'utilisateur taper un nombre et appuyer sur Enter. Vous pouvez également faire quelque chose comme réponse de Dinesh Golani et remplacer l'un des ... avec une zone de saisie, comme ma (rapide) maquette rapide ci-dessous:
En prenant en sandwich les options de cette manière, l'utilisateur a une idée mentale de sa position et de sa direction de mouvement. Inverser la position des boutons NEXT et LAST serait contre-intuitif.
Chaque scénario est différent selon les actions probables de vos utilisateurs et les informations que vous affichez. Si les résultats de la recherche survolent de nombreuses pages, un meilleur système de filtrage pourrait être utilisé pour limiter les résultats et empêcher le travail supplémentaire de l'utilisateur, un tri égal des résultats (Trier par) pourrait être mis en œuvre si plusieurs colonnes sont présentées.
Si, comme dans votre scénario, vous voulez souvent simplement aller à la page suivante, le défilement infini peut être une meilleure option (par exemple tumblr.com). Mais souvent, si la page a des icônes clairement définies qui ne sont pas petites et difficiles à utiliser, les options générales de pagination fonctionnent bien.
Essayer de sortir des sentiers battus:
Nous devons d'abord considérer ce que nous faisons avec la pagination:
Je pense que ceux-ci couvrent la plupart des cas:
- Navigation "fine": aller à la page suivante/précédente
- Navigation 'grossière': aller à la première/dernière page, aller beaucoup de pages en avant/en arrière
- Indiquez les pages actuelles et totales
alors, qu'en est-il de l'utilisation d'un curseur pour la pagination:
[ < prev ] [=================================[~~~]-------------------] [ next > ]
^
{ page 10 / 14 }
- suivant et précédent permettent une navigation fine
- faire glisser le curseur complètement vers la gauche ou la droite permet d'accéder à la première ou à la dernière page. Faire glisser le curseur ou cliquer le long de la barre permet une navigation grossière.
- Tout en maintenant enfoncé avec le bouton de la souris ou l'écran tactile, une fenêtre contextuelle apparaît avec le numéro de page exact, et la position du curseur indique approximativement sur quelle page vous vous trouvez.
Avantages:
- Visuellement attrayant.
- Pas beaucoup de chiffres à l'écran.
- Boutons faciles (relativement grands) pour la page suivante/précédente.
- Aucune confusion avec les flèches simples et doubles.
Les inconvénients:
- Pas couramment utilisé
- Peut être difficile à utiliser sur les appareils à écran tactile.
- Il peut être difficile de positionner l'info-bulle pour les appareils à écran tactile.
Modifier
J'aime éviter d'utiliser uniquement des flèches pour prev/next, selon le contexte, mais elles peuvent être trop petites pour cliquer facilement. Essayez également de placer les boutons suivant/précédent sur un emplacement cohérent, permettant un prochain clic rapide. Pensez également à utiliser des mots plus descriptifs que les suivants/précédents: (par exemple: plus récents/plus anciens; moins chers/plus chers; etc., selon la méthode de tri des pages)
J'aime la réponse de hildred, et je mettrais une zone de saisie entre les deux lignes comme séparateur et une facilité d'utilisation supplémentaire, et j'aime les pas de 10% arrondis en bas. Juste une autre idée. Pour l'afficher comme ci-dessous, il faut une bonne logique.
[Éditer]
Cool serait d'afficher la ligne du bas uniquement en survol, mais pas en bas, en haut des numéros de page comme le clavier Android.
Page 1/100
1 2 3 >
[ or enter page ]
10 20 30 >>
Page 66/100
< 65 66 67 >
[ or enter page ]
<< 70 80 90 >>
Page 99/100
< 98 99 100 >
[ or enter page ]
<< 80 90 100 >
Une idée différente:
Prev 1 2 3 Next
First 99 100 Last
Il a besoin d'un peu de travail, mais n'oubliez pas <a rel=next> ou <rel = next>
J'ai également vu la pagination affichée de cette façon:
Précédent 1 2 3 4 5 ... 10 11 12 ... 18 19 20 Suivant
~ Chaque numéro est cliquable, ainsi que le précédent et le suivant.
~ Les nombres mentionnés dans le centre aident l'utilisateur à atteindre le milieu du nombre total de pages, qui est 20 dans cet exemple.
~ L'utilisateur peut en fait naviguer très facilement vers le début, le milieu et la fin des résultats.
~ La charge cognitive est également dans les bonnes quantités.
Notez qu'ici le premier ensemble a 5 numéros, cela aide l'utilisateur à aller jusqu'à la 5ème page facilement en supposant que ces pages sont plus pertinentes.
Pensez-vous que l'approche dans la barre inférieure ci-dessous rend les chiffres difficiles à identifier? Je crois que non.
Divulgation complète: je ne travaille pas pour la société qui produit PDF-XChange Viewer.
J'aime l'approche du site http://www.kuantokusta.pt/ : ne pas avoir de premier ou dernier bouton du tout. Vous pouvez le voir si vous effectuez une recherche, ou je peux vous donner le lien d'un exemple de recherche: http://www.kuantokusta.pt/search?q=ténis&pag=11 .
Si vous faites défiler vers le bas, vous verrez chaque numéro de page comme un rectangle arrondi autour de lui, les faisant apparaître comme des entités plus cohérentes et difficile de cliquer à tort sur la page juste à côté. Car cela contribue également au fait que lorsque vous survolez l'un de ces éléments, il obtient un arrière-plan différent.
Vous pouvez voir cette "barre de navigation de page" sur l'image:
Si je veux voir les éléments à la fin de la liste telle qu'elle est actuellement triée, alors DERNIÈRE me permet d'y arriver rapidement plutôt que de cliquer sur chaque page jusqu'à ce que je sois au Z. Certaines interfaces utilisateur me permettent de trier et d'inverser le tri, mais pas toutes.
C'est sa seule "bonne convivialité", du haut de ma tête.