web-dev-qa-db-fra.com

Sélection de nombreux éléments dans une longue liste

J'ai un scénario où ma boîte de dialogue "créer un utilisateur" a une très longue liste d'options, dont l'utilisateur doit en sélectionner plusieurs. Le chef de projet a suggéré une approche de "double liste": une longue liste (déroulante) de cases à cocher pour l'utilisateur, suivie d'une liste de toutes les options actuellement sélectionnées. La deuxième liste se mettrait à jour automatiquement au fur et à mesure que l'utilisateur cliquait dessus dans la première liste.

Comme suggéré par le PM, cela ressemblerait à ceci:

enter image description here

("Démo" quelque peu fonctionnelle de la maquette ci-dessus ici . Les maquettes réelles de l'application elle-même sont à peu près tout aussi simples et laides.)

Le problème est que, bien que la capture d'écran de cet exemple ne comporte qu'une quinzaine d'options, dont seules quelques-unes sont sélectionnées, l'application réelle peut avoir des centaines d'options et l'utilisateur peut devoir en sélectionner cinquante ou plus. L'utilisateur devra toujours cliquer cinquante fois, par exemple, mais quelle serait la meilleure façon de le faire du point de vue de l'expérience utilisateur?

Le chef de projet a également suggéré une option 'sélectionner tout', et garder les listes par ordre alphabétique et 'synchronisées' (la case à cocher sélectionner/désélectionner met automatiquement à jour la liste sélectionnée.) La principale préoccupation pour le PM du point de vue de l'utilisateur, c'est qu'une fois qu'ils ont sélectionné toutes les options, ils ont besoin d'un moyen de "vérifier" pour s'assurer qu'ils les ont tous. Le PM est d'avis que le défilement à travers une liste de centaines de cases à cocher sera fastidieuse pour un utilisateur, et qu'il sera facile de manquer des options de cette façon.

Points clés:

  • Une liste (éventuellement) de centaines d'options
  • L'utilisateur sélectionnera probablement de nombreuses options, mais pas toutes
  • L'utilisateur devra vérifier ses sélections sur cet écran avant de valider ses modifications

Ce sera une tâche fatigante, quelle que soit la façon dont elle est mise en œuvre. Je cherche juste un moyen de ne pas frustrer l'utilisateur avec une interface maladroite ou laide, et/ou de rationaliser le processus autant que possible.

Ceci est très étroitement lié à cette question: Alternatives à une double liste pour sélectionner un groupe d'éléments dans une longue liste? et Meilleure façon de sélectionner un sous-ensemble d'éléments dans une longue liste? . Ces questions se concentrent sur le cas général, alors que je considère le cas du "clic complet".

11

Vous pouvez également utiliser un générateur de liste . (Jetez un œil à " Designing Interfaces " by Jenifer Tidwell ad the X Guidelines from Microsoft ).

Quelqu'un a créé une démo en direct aussi ...
Vous pouvez ajouter des filtres, des recherches et des groupes à la liste de gauche, et ainsi faciliter la "sélection de tous" les éléments d'un certain groupe ou résultat de recherche ...

enter image description here

9
Jørn E. Angeltveit

KeyRemap4Macbook le fait très bien.

Ils ont littéralement des centaines d'options à sélectionner, donc ce qu'ils ont fait est d'avoir une case à cocher qui vous permet de "afficher uniquement activé". C'est très simple, économe en espace, et efficace.

enter image description here

6
JohnGB

Je ne sais pas si cela correspond vraiment à votre cas d'utilisation, mais la bibliothèque choisie implémente un widget déroulant multi-sélection sympa.

enter image description here

6
Sam Pierce Lolla

Le regroupement des options selon un principe avec la possibilité de sélectionner/désélectionner des groupes entiers rendra cette tâche beaucoup plus facile:

grouping of checkboxes

Vous pouvez également différencier les options sélectionnées des options non sélectionnées à l'aide de couleurs.

3
alexeypegov

Vos articles sont-ils classifiables? Ensuite, vous pouvez créer une liste de parents et une liste d'enfants. La liste des parents peut également avoir une case à cocher pour sélectionner tous les éléments enfants.

0
SAMPro