Beaucoup de gens ne savent pas comment sélectionner plusieurs éléments dans un contrôle HTML <select>, alors ...?

Question

Je connais beaucoup de gens qui utilisent des ordinateurs tous les jours, qui ne savent pas comment sélectionner plusieurs éléments dans une liste/boîte de sélection HTML. Je ne veux plus utiliser ce contrôle dans mes pages:

Please pick 3 options: 
<select name="categories" size="10" multiple="yes"> 

Alors, quelles alternatives conviviales suggérez-vous? Peut-être avoir 10 cases à cocher ... ou peut-être juste avoir chaque option dans un bloc de couleur qui change de couleur quand ils cliquent pour le choisir? Cela devient plus compliqué quand je considère que ma liste actuelle de 20 options pourrait éventuellement atteindre 50. Quoi que je choisisse, ça va être difficile de le valider (en utilisant Javascript), pour être sûr que la personne choisira au moins 1 objet et pas plus de 3. Il ne s'agit pas de détecter le nombre d'options choisies, le problème est plus sur la façon de transmettre cela à l'utilisateur d'une manière amicale!

Edit: Je suppose que je pourrais utiliser des balises, comme ici sur stackoverflow, mais je pense que ceux-ci sont moins appropriés si les utilisateurs sont non techniques (et la moitié d'entre eux seront).

Answer 1

Vous pouvez simplement utiliser une liste manuelle d'éléments (Dites comme des liens simples), qui ont un comportement onclick Javascript qui les désélectionne/sélectionne manuellement. Fondamentalement, en changeant la classe css entre deux valeurs, et en vérifiant ces css (ou un autre attribut) lors de la soumission pour déterminer les sélections. Cela permettrait à l'utilisateur de simplement sélectionner un élément en cliquant sur le bouton et de le désélectionner en cliquant sur, plutôt que sur l'exigence standard Ctrl + Clic.

Answer 2

Alternatives j'ai utilisé dans le passé sont:

1) petit nombre d'éléments utilisent une liste de cases à cocher. Les cases à cocher sont beaucoup plus intuitives et simples à utiliser, mais pour un grand nombre d'éléments, cela peut devenir un problème. Cependant, lorsque le nombre d'articles augmente, vous pouvez ajouter un:

<div style="overflow: scroll" /> 

avec une hauteur fixe.

2) Pour un très grand nombre d'éléments, il devient difficile de voir ce qui est réellement sélectionné, surtout lorsqu'il y a peu d'éléments réellement sélectionnés. Dans ce cas, deux listes côte à côte avec la possibilité de déplacer des éléments de l'un à l'autre est une bien meilleure approche.

3) Lorsque le nombre d'éléments n'est pas très important mais supérieur à quelques-uns, j'ai utilisé une liste déroulante avec des cases à cocher construites en interne qui ont l'avantage d'occuper seulement un petit espace. Quelque chose comme this pourrait être utile.

Answer 3

Pour les utilisateurs ayant trois peu fréquents de chute pourrait bas travailler le meilleur>:

<select><option>Capa Verde</option></select> 
<select><option>Holiday</option></select> 
<select><option>Competition</option></select> 

Sinon, vous pourriez avoir une gamme de boutons qui collent une fois cliqué. Cependant, il sera difficile de transmettre la limite de trois options.

S'il est nécessaire de marquer chaque photo individuellement et qu'il y a un nombre limité de catégories, vous pouvez afficher une liste de catégories (peut-être dans plusieurs colonnes) directement au-dessus de la photo (évidemment vous devez vous assurer les éléments sont lisibles et indiquent qu'ils permettent de cliquer) et permettent aux utilisateurs de sélectionner et de désélectionner les tags en un seul clic. Il n'est pas très convivial pour le clavier, mais il est surtout impossible d'utiliser le Web sans une sorte de dispositif de pointage.Dans ce cas, vous utiliserez le positionnement spatial pour relier les catégories et les photographies.

Il existe différentes options avec deux piles (disponibles et sélectionnés), etc.

Pouvez-vous faire au moins un test d'utilisabilité « couloir »?

Quelle est la tâche réelle en termes d'utilisateur et qui sont les utilisateurs?

Answer 4

Je suggère d'utiliser deux zones de liste, une avec les disponibles, et une avec les zones sélectionnées. Un clic ou un double-clic sur un élément dans l'une des listes devrait déplacer l'élément dans l'autre liste. Pour plus de commodité, j'inclurais également deux boutons "Move" pour faire la même chose. Cette approche fonctionne étonnamment bien avec les utilisateurs moyens, aussi bien dans les applications Web que dans les applications de bureau.

Answer 5

Je déteste le multi-select, surtout quand l'élément peut être édité plus tard (si vous cliquez sans tenir CTRL, vous perdez ce que vous avez déjà sélectionné). Les deux meilleures options dans mon expérience sont les suivantes:

1. Avoir trois sélectionner des options distinctes (si vous limiter à trois). L'avantage ici est que vous êtes des instructions de "sélectionner jusqu'à trois" tenir très bien avec l'expérience de l'utilisateur et avec un peu de JavaScript, vous pouvez supprimer la première sélection de la deuxième liste déroulante, supprimant ainsi la confusion.
2. Utilisation de cases à cocher. L'avantage des cases à cocher est qu'il correspond probablement mieux à votre base de données, et que l'information est assez intuitive pour l'utilisateur et avec un peu de réflexion sur la façon dont vous présentez les options, l'expérience utilisateur peut être assez solide. Ex. regrouper vos cases à cocher dans des domaines qui ont du sens.