Quelle est la meilleure interface utilisateur pour la sélection multiple dans une liste?
Nous avons un formulaire Web et l'un des champs est une liste à sélection multiple. Nos options sont:
- Liste des cases à cocher
- Affichage de liste (zone de sélection mais autorisant la sélection multiple)
Les deux semblent être un peu laids et peu maniables lorsque la liste contient plus de 100 éléments.
Existe-t-il une autre solution d'interface utilisateur qui soit meilleure dans un tel cas?
Une alternative que j'ai vue à plusieurs endroits est d'avoir deux listes adjacentes, une avec les éléments disponibles et une avec les éléments sélectionnés.
Voici un exemple de OpenFaces.org que j'ai trouvé avec une recherche rapide sur Google:
Une autre solution est la "barre de sélection multiple" de type Facebook. (Je ne connais pas le nom exact)
Vous pouvez trouver un exemple ici . Fondamentalement, c'est comme un champ de saisie de texte, mais les éléments sélectionnés se transforment en "balises". Essayez-le sur la page à laquelle j'ai lié.
Cela dépend de l'interface utilisateur et de la disposition de l'espace dont vous disposez. Cela dépend également du nombre d'éléments dans votre liste et du nombre moyen d'éléments que l'utilisateur doit sélectionner. Une solution intéressante est une liste déroulante + des cases à cocher 
http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html
Plus il y a d'éléments, moins une liste déroulante conviendra (avoir l'utilisateur de faire défiler une liste déroulante n'est pas si bon.) Et ici, vous devez comprendre comment organiser/structurer votre liste.
Selon le nombre d'options, vous pouvez utiliser une option de liste déroulante graphique comme celle-ci. Appuyer/cliquer pour basculer si cet élément est sélectionné.
Cependant, cela ne fonctionne pas très bien avec de très longues listes.
Je suis un peu en retard à cette fête, mais j'ai pensé ajouter une solution que j'utilise beaucoup récemment: une seule entrée de texte avec une fonction de prédiction de texte dynamique (pensez au formulaire de recherche principal de Google).
Comme l'utilisateur choisit "résultats" dans la liste déroulante, une liste peut se remplir sous l'entrée, de préférence avec une option claire sur la façon de supprimer chaque sélection. Pour des exemples de cette fonctionnalité, pensez aux sites qui demandent du contenu balisé comme WordPress ou Delicious.
Cette solution nécessite que vous et l'utilisateur soyez quelque peu simpatico sur le contenu de la liste plus grande, mais je trouve que cela économise beaucoup d'angoisse et de pages.
On dirait que je suis en retard sur celui-ci, mais j'ai eu un problème similaire dans mon entreprise.
Inévitablement, vous deviez diviser cela en deux exigences distinctes (rechercher, sélectionner), puis le regrouper dans une interface utilisateur.
Si la recherche est simple, alors quelque chose de plus simple avec une saisie semi-automatique devrait faire l'affaire (par exemple http://quasipartikel.at/multiselect/ obtient l'idée).
La case à cocher est l'idiome le plus facile à comprendre.
Vous aurez besoin des boutons "Tout cocher" et "Ne rien cocher" et, si l'utilisateur doit vérifier beaucoup d'éléments adjacents, un bouton "Vérifier les éléments sélectionnés" (uniquement activé lorsque plus d'un élément est sélectionné)
J'ai également vu cela comme une option. Il s'agit d'une liste de cases à cocher où les éléments cochés sont déplacés/déplacés. Une solution hybride entre les deux.
[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n
Après en avoir sélectionné un:
[ ] item 1 X item 2
[ ] item 3
[ ] item 4
[ ] item n
Les éléments sélectionnés pourraient être déplacés vers la droite (peut-être en utilisant un div fixe pour qu'il reste visible lorsque l'on fait défiler la liste d'options) ou il pourrait migrer vers le haut de la liste.
Que vous choisissiez l'option 1 ou 2 de votre liste a vraiment à voir avec le fait que vous souhaitiez que la sélection soit persistante pour quelque raison que ce soit, ainsi que pour d'autres facteurs. Ci-dessous, je vais énumérer quelques éléments que vous voudrez peut-être prendre en considération lors du choix de la méthodologie à suivre.
glisser-déposer
Si vous souhaitez autoriser la réorganisation par glisser-déposer des éléments, l'utilisation de cases à cocher peut simplifier pour un utilisateur de ne pas perdre l'état de sélection dans les processus. Si vous n'autorisez pas la réorganisation par glisser-déposer ou ne vous souciez pas si l'état de sélection est perdu pendant les processus s'il est autorisé, l'utilisation de la multi-sélection via la touche Ctrl peut être une option.
Persistance à long terme
Si la sélection en cours doit être enregistrée pour plus tard et rappelée à nouveau lors d'une session ou d'une exécution ultérieure de l'application, envisagez d'utiliser une case à cocher ou le paradigme de la double liste car l'affichage des éléments en surbrillance est généralement réservé à l'état de sélection transitoire.
Multi-sélection en tant que fonction avancée
Si la multi-sélection est censée être une nécessité rare pour vos utilisateurs, peut-être qu'encombrer les utilisateurs de cases à cocher n'est pas la meilleure option car ils ne sont pas susceptibles de les utiliser la majorité du temps. Dans ces cas, il peut être préférable d'afficher les cases à cocher en entrant dans un mode spécial de sélection multiple ou de simplement s'en tenir à la méthode de la touche Ctrl de sélection multiple avancée. Dans le cas d'Edge où un utilisateur a besoin d'un contrôle très fin du grain sur la sélection et la commande et l'écran immobilier n'est pas très préoccupant, alors utiliser la méthode que Bevan a proposée dans sa réponse avec deux listes distinctes est également une option décente.
Notez que l'Explorateur Windows suit généralement la méthode de la touche Ctrl pour la multi-sélection avancée des fichiers/dossiers, mais il peut être configuré pour utiliser des cases à cocher pour représenter la sélection. Je l'ai essayé une fois et je suis revenu en arrière et j'ai constaté que la plupart des gens n'étaient même pas au courant de cette fonctionnalité.
Je suis très en retard à la fête. Mais je voudrais proposer ma propre solution.
C'est-à-dire: utiliser une fenêtre contextuelle (aka superposition, modale) pour afficher les cases à cocher et laisser l'utilisateur sélectionner plusieurs valeurs.
La fenêtre contextuelle est ouverte lorsqu'un utilisateur clique sur un lien d'édition sur le formulaire principal.
Quand il a fini de sélectionner les valeurs, il peut cliquer sur un bouton TERMINÉ, qui a un événement click, une méthode javascript qui rassemble les valeurs vérifiées et met à jour certains champs cachés sur le formulaire principal et/ou certains champs d'affichage (par exemple zone de texte en lecture seule, ou un élément span ou div) sur le formulaire principal. Et lorsque l'utilisateur clique sur le bouton d'envoi principal, le champ masqué ou le champ d'affichage est envoyé au serveur pour persistance.
S'il y a un grand nombre de cases à cocher, leur affichage peut occuper un très grand écran, de sorte qu'une fenêtre contextuelle peut être stylée sans encombrement pour aider à concentrer l'attention de l'utilisateur. Quand il a fini, il peut fermer la fenêtre.
Bien sûr, plusieurs étapes pourraient également avoir un sens. Mais ma solution est pour un seul formulaire de soumission.
Que pensez-vous de cette méthode? Est-ce un modèle déjà utilisé?
Je vous remercie