Le meilleur moyen de sélectionner des lignes dans une grille sur plusieurs pages? Nous avons une grille de données qui s'étend sur plusieurs pages, qui fait partie intégrante de notre application Web.
Cas d'utilisation 1: Les utilisateurs peuvent sélectionner/mettre en surbrillance des lignes pour effectuer une action (avec une fenêtre modale apparaissant pour une entrée utilisateur), en utilisant un menu contextuel ou un menu sous la grille.
Cas d'utilisation 2: Les utilisateurs ont également des cases à cocher pour permettre la sélection sur plusieurs pages. Lorsque les utilisateurs mettent en surbrillance un ensemble de lignes et sélectionnent une action, cela coche automatiquement les cases à cocher dans les lignes en surbrillance.
Dans les deux scénarios ci-dessus, les cases à cocher indiquent la sélection.
Cas d'utilisation 3: L'utilisateur peut également faire glisser les lignes sélectionnées vers une boîte de dépôt pour effectuer une action (sans fenêtre modale apparaissant).
Dans ce scénario, les lignes en surbrillance indiquent la sélection.
Cas d'utilisation 4: Récemment, nous avons commencé à combiner ces deux scénarios, l'utilisateur peut faire glisser et déposer les lignes sélectionnées sur une boîte de dépôt. Cette fois, nous faisons apparaître une fenêtre modale demandant une entrée utilisateur avant d'exécuter l'action (même action (s) que celle utilisée dans le cas d'utilisation 1, cas d'utilisation 2).
Cette fois, les lignes en surbrillance indiquent la sélection.
Comme vous pouvez le voir, c'est pour le moins déroutant.
Nous voulons supprimer toutes les cases à cocher pour simplifier le produit. Mais comment obtenir la sélection de lignes sur plusieurs pages.
Une suggestion a été de demander aux utilisateurs de compartiment temporaire de déposer des lignes dans et d'effectuer des actions sur le compartiment plus tard.
Que pensez-vous serait un meilleur UX? Avez-vous vu cela mieux implémenté n'importe où plutôt que de bonnes vieilles cases à cocher?
N'est-ce pas comme acheter des produits d'épicerie en ligne? (ou une liste de souhaits ou une liste de mariage ou quelque chose de similaire auquel vous pensez volontiers).
Lorsque je fais des achats en ligne, je visite plusieurs pages - je sélectionne certaines choses à ajouter à un panier et quand j'ai tout ce que je veux, puis je clique sur le bouton qui dit Caisse [ou Commander avant que Rahul ne dise quoi que ce soit :-)]
Ajoutez un mécanisme pour ajouter vos lignes au "panier" et remplacez votre action par le bouton Checkout et c'est un scénario presque identique - juste une application différente.
Le mécanisme pour ajouter des lignes au "panier" peut être le suivant.
Marquez les lignes ajoutées d'une manière ou d'une autre pour fournir des commentaires simples (c'est l'équivalent de vos cases à cocher), et indiquez également le nombre d'articles dans le "panier" pour la même raison.
Peut-être que votre application bénéficierait également de l'équivalent de "Voir le panier" avant d'appliquer l'action choisie.
Il est très difficile de traiter autrement plusieurs pages sans avoir le concept d'une liste ou d'un panier auquel vous avez ajouté des éléments de différentes pages.
Pourriez-vous utiliser Excel pour obtenir une réponse? Donc, un bouton à l'extrémité la plus à gauche d'une ligne sélectionnerait cette ligne sur cette page, tandis qu'un bouton à gauche de cela sélectionnerait cette ligne sur toutes les pages?
Je suppose que c'est pour une application Web, mais de toute façon peut être un coup d'oeil à Silverlight Toolkit peut vous donner des idées sur la façon de s'y attaquer. Au chapitre Données> DataGrid, vous voyez une sorte de grille typique utilisée dans les applications de bureau.
Pour afficher des données détaillées, il existe un modèle appelé DetailRow, que j'aime pour son élégance. Et vous pouvez corriger/geler les lignes (vous le savez peut-être aussi d'Excel). Que pensez-vous du givrage des lignes sélectionnées sur vos pages? Modification des données en cliquant deux fois dans une cellule. Et encore des trucs. Peut-être utile d'envisager?