web-dev-qa-db-fra.com

Comment afficher plusieurs options pour une grande quantité d'options

Idea that I have for multi option Je crée une application Web qui demande à un utilisateur de choisir parmi plus de 400 options. C'est absolument obligatoire comme c'est le cas pour les logiciels B2B.

Je veux le diviser en catégories. Cependant, il peut y avoir près de 30 catégories avec 25 à 50 options dans chaque catégorie. Cela crée une longue liste déroulante mais réduit le nombre d'options disponibles pour l'utilisateur.

Je recherche des conseils, des critiques ou des exemples possibles de la façon dont d'autres ont traité ce type de problème.

2
Tyler Harris

Gérer potentiellement des centaines d'entrées n'est jamais simple: vous devez essayer de laisser les utilisateurs faire leur choix de manière simple et sûre, en fonction des problèmes spécifiques au domaine.

Une solution très courante pour afficher des ensembles groupés de cases à cocher est un arbre réductible : vous pouvez afficher l'intégralité des catégories d'options et laisser les utilisateurs développer et réduire des groupes d'options.

Vos cases à cocher doivent pouvoir gérer 3 états:

  • case à cocher non sélectionnée
  • case cochée
  • case à cocher "partiellement sélectionnée" (qui doit être associée à des catégories contenant une ou plusieurs options sélectionnées)

UI Tree demo 1enter image description here

(source: https://www.jqwidgets.com/jquery-tree-with-checkboxes/ , https://zedt.eu/tech/windows/installing-an-ipp -imprimante-dans-windows-10 / )

1
Stefano

Que diriez-vous d'une interface utilisateur similaire à un navigateur de fichiers?

Voici un exemple: http://elliottregan.com/experiments/arise-testing/tmp/education-center.html =

Permet aux utilisateurs qui savent exactement ce qu'ils recherchent de rechercher, mais également d'afficher les catégories dans une mise en page à deux colonnes. L'utilisation d'une disposition à deux colonnes sur une liste déroulante sélectionnée permet aux utilisateurs d'analyser toutes les catégories et de cliquer rapidement dessus pour voir si chaque catégorie contient les informations qu'ils recherchent.

Moins de clics qu'une liste déroulante.

0
elliottregan

Les options peuvent en outre être classées en plusieurs catégories. Consultez la capture d'écran ci-jointe décrivant les catégories (mode, épicerie, électronique ..) dans une liste déroulante. La catégorie de la mode est en outre classée en hommes, femmes, enfants, etc., et encore en formels, casuals, fête, robe de nuit, etc.

La fonction de recherche spécifique à la catégorie peut être ajoutée pour la rendre plus utilisable par l'utilisateur.

Les options sélectionnées peuvent être représentées de la même manière que vous l'avez fait.

Pour info, règle générale de la liste déroulante: il ne doit pas y avoir plus de 10 catégories, s'il y en a plus, ajoutez la recherche.

enter image description here

0
Hemchandra

Peut-être repenser si vous devez avoir tout visible dès le départ. Une autre UX est un champ de recherche avec des balises, comme vous l'avez dans Stack Exchange. En SE, vous pouvez choisir parmi plus de 400 options. Vous pouvez utiliser un espace réservé dans le champ de recherche avec quelques exemples de balises/options.

enter image description here

0
ecc