Sélection de plusieurs États américains dans la liste
J'essaie de trouver la meilleure façon d'afficher une liste des États américains où plusieurs éléments, ou tous, peuvent être sélectionnés.
Sélectionner un élément
. cliquez sur etc)
cases à cocher et liste
. C'est un peu plus intuitif pour l'utilisateur mais prend beaucoup de place.
Je me demande si l'une de mes idées est la bonne expérience pour l'utilisateur ou s'il existe une meilleure solution.
Quelle que soit la conception que vous choisissez, pensez à placer un conteneur qui affiche les éléments actuellement sélectionnés , afin que les utilisateurs n'aient pas à se souvenir de ce qu'ils ont sélectionné auparavant par eux-mêmes, évitant la nécessité de revenir en arrière pour revérifier chaque sélection. De cette façon, les données les plus pertinentes pour l'action sont affichées séparément de tout il en résulte une interface plus propre.
Voici quelques options pour votre cas: (btw, je placerais le symbole (x) à droite des éléments sélectionnés, mais je n'ai pas pu le faire avec balsamiq)
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'approche old school:
L'approche plus fantaisiste et moins utilisable: elle ne conviendra pas à tous les sites Web, mais l'idée pourrait également être utilisée en complément de l'autre, afficher les états sélectionnés en aperçu .. (vert = sélectionné, borderInGreen ( ou autre couleur) = activeElement, uncolored = non sélectionné)
Je considère également le dernier exemple de Roger comme une très bonne approche pour de nombreuses situations.
Essentiellement, cela revient à ajouter des balises - où chaque état est une balise valide. Au fur et à mesure que l'utilisateur tape, un ensemble de balises d'achèvement valides apparaît. En sélectionner un l'ajoute à la liste avec un accès immédiat pour le supprimer à nouveau. Très similaire à la façon dont les balises fonctionnent ici sur l'échange de pile.
Si les utilisateurs ne connaissent pas les états (par exemple, sont en dehors des États-Unis), ils doivent vraiment sélectionner dans une liste, mais pour être honnête, ce ne sont que 50 options - ce n'est pas trop excessif de les avoir dans une grande liste - avec une option pour tout sélectionner ou tout désélectionner.
Exemple de google images:
Vous n'auriez pas à afficher cette liste en permanence, vous pourriez indiquer le nombre d'états actuellement sélectionnés; peut-être énumérer les premiers et avoir une option pour modifier la liste à quel point la liste s'ouvre jusqu'à ce que l'utilisateur ait terminé.