Ajout de barres d'outils de pagination, de tri et de filtrage à une table
J'ai un tas de vues de rapport, qui sont essentiellement des tableaux. Ils doivent permettre à l'utilisateur de disposer de capacités de tri, de pagination et de filtrage.
Mon idée est d'ajouter ces fonctionnalités via les barres de menus.
La pagination irait au fond:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le tri et le filtrage devraient aller en haut.
Mais ils s'affichent différemment car si la pagination est nécessaire, elle est déterminée au moment de l'ouverture, mais le filtrage et le tri sont facultatifs.
Dans le cas où tout est nécessaire, cela ressemblerait à ceci:
Il est trié par plusieurs colonnes et dispose d'un tas de filtres experts.
La question est, comment dois-je gérer la visibilité? Je ne veux pas montrer les éléments GUI qui ne sont pas nécessaires à chaque fois, mais je ne veux pas non plus laisser l'utilisateur les manquer.
Peut-être que mon idée de barre de menus n'est pas si bonne que ça et que je devrais utiliser des boîtes de dialogue externes ou quelque chose du genre.
La meilleure implémentation de cela que j'ai vue est d'OkCupid. Lors de la recherche de correspondances, un certain nombre de filtres peuvent être ajoutés (via l'onglet avancé), que vous ne voyez qu'une fois que vous les avez choisis.
Les deux derniers sont des exemples de filtres avancés et peuvent être supprimés en sélectionnant le "x".
Cela a été testé et testé sur des millions d'utilisateurs et s'est avéré flexible et facile à utiliser. Je suggérerais de modéliser votre filtrage sur le leur. J'envisagerais cependant de changer l'onglet "avancé" en quelque chose comme "ajouter un filtre".
Votre solution est bonne.
Je suppose que la pagination est toujours visible (sauf si le contenu est <1 page)
Étant donné que vous souhaitez masquer les autres éléments: Tri , Filtre sauf si Au besoin, je fournirais simplement deux boutons/liens cliquables en haut du tableau qui se développeraient en ligne pour révéler l'interface graphique que vous avez montrée ci-dessus. Voilà, très simple et vous avez terminé. par exemple.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'important est d'avoir des éléments pour montrer que la fonctionnalité existe , si vous voulez masquer l'élément d'interface utilisateur correspondant.
Bien que pour le tri, je m'en tiendrai aux conventions, c'est-à-dire aux titres de la colonne, plutôt que de fournir une interface distincte, car cela prête à confusion. Dans votre maquette, vous avez les flèches d'indication de tri et la barre de tri. Cependant, en supposant que vous ne pouvez pas faire de tri d'en-tête, l'idée de la barre de menu est correcte.