sélection de plusieurs éléments sur une grille, qui n'est qu'une partie de l'ensemble total
Je dois montrer un ensemble de N éléments à l'utilisateur, mais je ne peux rendre confortablement que M. (M ~ 20, N ~ 1000). L'utilisateur peut alors sélectionner un ou plusieurs de ces éléments, puis passer à l'étape suivante. Je dois pouvoir indiquer les éléments déjà sélectionnés.
Une approche qui me vient à l'esprit est ce que Facebook fait lorsque vous devez choisir parmi vos amis: ils vous montrent un groupe, et ceux déjà sélectionnés sont affichés comme désactivés. Votre collection d'amis sélectionnés est présentée dans un petit conteneur.
Des idées sur la façon de le faire avec élégance, sans pagination?
Vous pouvez utiliser un modèle de générateur de liste . La forme la plus simple est celle de @JonnyBoats décrit , mais il existe de nombreuses options et variantes (beaucoup de laideur abonde).
Pour votre cas d'utilisation, la liste des sources peut être navigable via défilement, arborescente ou filtrable.
Voici une maquette d'une liste filtrable avec une navigation dans l'arborescence:
Il inclut même une option "d'écriture" pour le texte du filtre - cette option n'est probablement pas quelque chose dont vous avez besoin. Il utilise des cases à cocher au lieu du mécanisme habituel "cliquez sur une ligne sans fioritures et cliquez sur le bouton Déplacer" car la plupart des utilisateurs savent déjà ce que fait une case à cocher et ce n'est qu'un clic (pas deux).
La clé à retenir est de concevoir le pool de candidats (la liste de gauche) en fonction des qualités et des attributs dont vous disposez et qui ont du sens pour l'utilisateur. Si les 1000+ candidats tombent naturellement dans une structure hiérarchique et que vos utilisateurs connaissent cette hiérarchie, fournissez un navigateur d'arborescence sur la gauche. Si les 1000+ candidats n'ont pas de hiérarchie naturelle mais peuvent être filtrés par mots clés, fournissez un mécanisme de filtrage en direct. Si l'ensemble de données n'a pas de mots-clés mais possède un certain nombre d'attributs à valeur fixe, fournissez un ensemble de commutateurs pour filtrer la liste des candidats.
Notez que la conception visuelle de "deux listes côte à côte" est également ouverte pour une refonte. Vous pourriez avoir un pool de candidats beaucoup plus grand flottant au-dessus d'une liste de résumé plus petite ou même des compartiments de collection, tout comme la façon dont Google plus fait ses cercles.
Voici une très grande liste de la laideur variations de conception.
- http://www.cs.helsinki.fi/u/salaakso/patterns/Double-List.html
- http://www.codeproject.com/KB/miscctrl/doublelistpicker.aspx
- http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=52365&lngWId=1
- https://stackoverflow.com/questions/2852995/whats-this-ui-pattern-called
- http://Java.dzone.com/articles/an-html-list-builder?page=0,2
- http://incrtcl.sourceforge.net/iwidgets/iwidgets/disjointlistbox.html
- http://www.quasipartikel.at/multiselect/
- http://dev.sencha.com/deploy/ext-4.0.0/examples/dd/dnd_grid_to_grid.html
- http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/two-trees.html
- http://wiki.service-now.com/index.php?title=Slushbucket
- http://www.devx.com/getHelpOn/10MinuteSolution/16372/1954
- https://msdn.Microsoft.com/en-us/library/dn742407.aspx#listBuilders
Une interface que je trouve facile à utiliser est deux listes avec des barres de défilement verticales. À gauche se trouve la liste des éléments disponibles au choix et à droite, la liste des éléments sélectionnés. On peut alors utiliser la souris (ou le clavier) pour déplacer des éléments d'un côté à l'autre.
Ainsi, par exemple, l'écran peut commencer comme suit:
Bob
Mary
Sam
Fred
Jane
Et l'utilisateur déplace Sam et Jane de gauche à droite et l'écran ressemble à:
Bob Sam
Mary Jane
Fred