De nombreuses personnes ne savent pas comment sélectionner plusieurs éléments dans un HTML < sélectionner > contrôle, donc & # 8230 ;?

Question

Je connais de nombreuses personnes qui utilisent quotidiennement un ordinateur sans savoir comment sélectionner plusieurs éléments dans une zone 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 proposez-vous? Peut-être que vous avez 10 cases à cocher ... ou peut-être avez-vous juste chaque option dans un bloc coloré 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 passer à 50.

Quelle que soit la méthode choisie, il me sera difficile de la valider (avec Javascript), afin de nous assurer que la personne choisit au moins un élément 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 de manière conviviale!

Modifier: Je suppose que je pourrais utiliser des balises, comme ici sur stackoverflow, mais j'estime qu'elles sont moins appropriées si les utilisateurs ne sont pas techniques (et la moitié le seront).

Answer 1

Vous pouvez simplement utiliser une liste manuelle d’articles (tels que des liens simples), qui ont un comportement Javascript onclick qui 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 sélectionner simplement un élément en cliquant dessus et de le désélectionner en cliquant plutôt que sur l'exigence standard Ctrl + Clic.

Answer 2

Les solutions que j'ai utilisées dans le passé sont les suivantes:

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

<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 vraiment sélectionné, en particulier lorsque peu d'éléments sont 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 constituent 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é un menu déroulant avec des cases à cocher construites en interne qui présente l'avantage d'occuper un petit espace. Quelque chose comme ceci pourrait être utile.

Answer 3

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

Answer 4

Pour les utilisateurs occasionnels ayant trois menus déroulants, les meilleurs résultats sont les suivants: > ;:

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

Vous pouvez également disposer d’une gamme de boutons qui restent collés une fois que vous avez cliqué dessus. Cependant, il sera difficile de transmettre la limite de trois options.

S'il est nécessaire de marquer chaque photo individuellement et s'il y a un nombre limité de catégories, vous pouvez afficher une liste de catégories (éventuellement en plusieurs colonnes) juste au-dessus de la photo (vous devez évidemment vous assurer que le les éléments sont lisibles et indiquent qu’ils permettent de cliquer) et permettent aux utilisateurs de sélectionner et désélectionner les tags en un seul clic. Il n’est pas très convivial au clavier, mais il est pratiquement impossible d’utiliser Internet sans une sorte de périphérique de pointage. Dans ce cas, vous utiliseriez un positionnement spatial pour relier des catégories et des photographies.

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

Pouvez-vous faire au moins un " couloir " tests d'utilisabilité?

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

Answer 5

Je déteste la multi-sélection, en particulier lorsque l'élément peut être modifié ultérieurement (si vous cliquez sans maintenir la touche CTRL enfoncée, vous perdez ce que vous aviez déjà sélectionné). Les deux meilleures options de mon expérience sont les suivantes:

1. Avoir trois options de sélection distinctes (si vous en limitez trois). L’avantage ici est que vous suivez les instructions suivantes: "Sélectionnez jusqu’à trois". tenez très bien avec l'expérience utilisateur et avec un peu de JavaScript, vous pouvez supprimer la première sélection de la deuxième liste déroulante, éliminant ainsi toute confusion.
2. Utilisation des cases à cocher. L'avantage des cases à cocher est qu'elles correspondent probablement mieux à votre base de données. De plus, les informations sont plutôt intuitives pour l'utilisateur et, en réfléchissant un peu à la manière dont vous présentez les options, l'expérience utilisateur peut être relativement solide. Ex. regrouper vos cases à cocher dans des zones qui ont du sens.