web-dev-qa-db-fra.com

Quel est le meilleur traitement du bloc de pagination en vue mobile?

Je travaille sur un projet de Responsive Web Design. Il y a ce tableau qui peut potentiellement atteindre des centaines d'enregistrements, nous utilisons donc un bloc de pagination en dessous. Lors du premier chargement, l'utilisateur a le choix d'afficher 10, 25 ou 50 enregistrements dans une liste déroulante. Notre point d'arrêt est de 600 pixels. Prenons 25 enregistrements comme exemple:

Dans la vue Bureau, les 25 premiers enregistrements apparaissent. L'utilisateur clique sur la page 2 de la pagination et les 25 prochaines apparitions. Le nombre d'enregistrements dans le tableau est toujours de 25.

En vue mobile, la table se réduit en accordéon. La liste déroulante d'enregistrement par page est masquée. Le bloc de pagination est masqué. Au lieu de cela, un bouton "Show Next 25" est affiché sous l'accordéon. Au clic, les 25 enregistrements suivants seront affichés. Ce qui en fait 50 au total.

Le problème survient lorsque la largeur de certains appareils est supérieure à notre point d'arrêt. (par exemple, HTC One avec une largeur de 640 pixels). Dans ces appareils, si l'utilisateur charge d'abord l'accordéon en mode portrait, puis clique sur le bouton "Afficher les 25 suivants" et fait pivoter le téléphone en mode paysage (avec une pagination et une liste déroulante d'enregistrement par page et plus de bouton), alors quoi doit voir l'utilisateur?

Nous avons quelques options:

  1. En vue mobile, lorsque vous cliquez sur le bouton "Afficher les 25 prochains", au lieu d'en ajouter 25, affichez simplement les 25 suivants. Ainsi, lorsque l'utilisateur revient en mode paysage (bureau), il se trouve à la page 2 de la pagination. Inconvénient: l'utilisateur ne peut pas revenir aux 25 premiers enregistrements dans la vue mobile.

  2. N'affichez toujours que le bouton "Afficher les 25 suivants" et supprimez la pagination. Ainsi, l'utilisateur verra "Afficher les 25 prochains" même lorsqu'il affiche dans un navigateur de bureau Inconvénient: Le bouton "Afficher les 25 suivants" semble étrange sur grand écran.

  3. Dans la vue mobile, au lieu d'afficher uniquement le bouton "Afficher les 25 suivants", ajoutez un bouton "Afficher les 25 précédents". Ce qui en fait une mini-pagination en vue mobile. En cliquant sur le bouton, les 25 suivants/précédents seront chargés. Le nombre d'enregistrements sur la page reste à 25. Inconvénient: C'est toujours une pagination mais de longueur plus courte.

Je ne sais pas trop quelle approche adopter, ni s'il y a l'option 4. J'apprécie vos commentaires.

Merci.

tablesresponsive-designpagination
5
Yunzhou

Premièrement, ne pas fournir de navigation arrière limite le contrôle de l'utilisateur. Il est donc préférable de l'utiliser.

Deuxièmement, vos étiquettes sont trop détaillées. Show Next 25 pourrait être raccourci juste pour Next > ou même >. Il en va de même pour le bouton Retour. Personne ne compte vraiment 25 ou 50, et Montrer l'action est comprise à partir du modèle de pagination.

Google le fait de la manière suivante:
enter image description here

4
Alexey Kolchenko

Du haut de ma tête, j'irais avec # 3. # 1 semble être la pire solution, car il peut masquer de manière inattendue des informations à l'utilisateur sans moyen clair de les récupérer - très problématique.

La solution n ° 2 semble correcte, mais je ne sais pas vraiment ce que vous entendez par le bouton "paraître étrange" - semble résoluble, sinon, c'est au moins un problème esthétique plutôt qu'un problème d'utilisation.

Bien que l'utilisation de la pagination en conjonction avec l'accordéon puisse être un peu beaucoup dans # 3, les deux sont des éléments d'interface utilisateur assez normaux, donc je doute qu'ils causeraient trop de confusion. Si je vous comprends bien, la solution n ° 3 est également la seule qui limite le nombre d'enregistrements sur la page à 25. Vous ne savez pas combien de temps chaque enregistrement est, mais vous ne voulez pas provoquer trop de défilement donc c'est probablement un avantage.

0
angelapotter

Ce que je ferais, c'est de marquer les lignes avec le bon numéro de page <tr data-page='1'>, lorsque vous êtes en vue bureau, vous masquez les autres lignes qui ne sont pas sur la page actuelle en utilisant CSS.

Plus de détails

Lorsque vous êtes en mode Bureau, décorez toujours chaque ligne de la demande actuelle avec le numéro de page actuel <tr data-page='1'>. Disons que nous avons 2 enregistrements par page et que nous sommes à la page 3;

...
<tr data-page='1' style="display: none;"></tr>
<tr data-page='1' style="display: none;"></tr>
<tr data-page='2' style="display: none;"></tr>
<tr data-page='2' style="display: none;"></tr>
<tr data-page='3' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
...

Lorsque vous passez en vue mobile;

...
<tr data-page='1' style="display: block;"></tr>
<tr data-page='1' style="display: block;"></tr>
<tr data-page='2' style="display: block;"></tr>
<tr data-page='2' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
<tr data-page='3' style="display: block;"></tr>
...

Ce modèle vous permettra également de ne pas charger les données deux fois.

0
Tebo