web-dev-qa-db-fra.com

Comment gérer les sélections avec beaucoup d'options?

Dans une application Web, disons que j'ai une liste d'options à sélectionner par l'utilisateur. J'utiliserais habituellement une liste déroulante dans ce cas, s'il y a un nombre raisonnablement petit d'options, mais comment devrais-je aborder cela différemment s'il y a 50 options? ou 100? ou 1000?

10
GSto

Peut-être combiner une approche à deux volets avec une recherche?

Django admin multiselect

L'interface utilisateur filtre dynamiquement du côté client lorsque vous tapez dans la zone de recherche. Je l'aime mieux que la recherche uniquement, car vous pouvez découvrir quelles sont toutes les options.

Pour les points bonus, vous pouvez construire cela à la volée à partir d'un contrôle régulier de sélection/multiple.

11
Chase Seibert

Quelques idées:

  1. Combobox (ou une sorte de recherche avec saisie semi-automatique)
  2. Divisez les options en groupes et laissez l'utilisateur sélectionner le groupe en premier, puis l'option de la liste qui serait plus petite dans ce cas
5
Kostya

Eh bien, si vous avez une application où un utilisateur peut choisir parmi des milliers d'options, ma première réponse serait que vous avez mal conçu quelque chose. Essayez de faire un zoom arrière et de considérer l'architecture de l'information menant à tant d'options et voyez ce que vous pouvez faire à ce sujet. L'utilisateur a-t-il vraiment besoin de tous ces choix? Pouvez-vous vous en débarrasser ou choisir des valeurs par défaut raisonnables? Comment gérez-vous le problème du paradoxe du choix?

Mais en termes plus pratiques, essayez de diviser les informations en catégories et de les présenter de cette façon. Je pourrais être plus utile si je savais pour quelles informations vous étiez en train de concevoir, car cela influence souvent le type de visualisation ou de contrôles que vous pouvez utiliser.

Tenez compte des fuseaux horaires. Vous pouvez être très précis et proposer chaque fuseau horaire individuel, ce qui conduit à une énorme liste sur laquelle vous devez faire un travail hardcore pour le rendre digestible pour l'utilisateur. Ou, vous pouvez choisir uniquement les fuseaux horaires les plus proches de la plupart des endroits, ce qui peut exclure quelques utilisateurs exceptionnels, mais en couvrir 99%.

Même chose avec le choix d'un moment pour un événement. Être spécifique signifie qu'un utilisateur peut choisir à la minute près. Menus déroulants de 60 éléments? Ou vous pouvez segmenter le temps de 5 minutes. Tout à coup, l'utilisateur n'a qu'à choisir parmi 12 options, et c'est suffisamment spécifique pour le cas d'utilisation.

3
Rahul

pour autant d'options, tout type de sélection multiple serait ennuyeux. Pensez un mauvais clic et une demi-heure passée.

Vous devez utiliser 2 cases avec des flèches comme celle-cialt text

ce n'est pas trop difficile à faire avec quelques lignes de JS

1
Sruly
  1. Utilisez une liste déroulante avec tous les éléments triés logiquement.
    Par exemple - une liste de fuseaux horaires est ordonnée en fonction du décalage, une liste de pays est classée par ordre alphabétique.
    De plus, assurez-vous que l'utilisateur peut saisir la valeur et il suggérera/sautera automatiquement à la bonne.

  2. Groupez-les logiquement. S'il ne s'agit que de noms, vous pouvez d'abord sélectionner la première lettre, puis avoir le sous-ensemble d'éléments qui correspondent. Il serait préférable que les éléments puissent être classés de manière logique, par exemple les personnes d'une organisation, qui s'intègrent bien dans les départements, les régions, etc.
    Vous pourriez même avoir plusieurs niveaux de profondeur.

0
Dan Barak