Comment limiter le nombre d'options qu'un utilisateur peut choisir dans une liste?
Les boutons radio sont pour une seule option et les cases à cocher sont pour une sélection multiple, mais quel serait le moyen le plus idéal pour implémenter deux sélections au maximum? est ce que je:
- désactiver toutes les cases à cocher après le deuxième choix?
- attendre après la soumission pour alerter?
- alerte en place et double vérification lors de la soumission?
quel est le moyen non invasif le plus idéal de le faire?
J'ai expérimenté différentes solutions pour un site Web à fort trafic, et la meilleure approche était d'utiliser des cases à cocher et de désactiver les autres options lorsque le maximum est atteint.
Initialement, les utilisateurs voient des cases à cocher régulières. Un message indique aux utilisateurs qu'ils peuvent sélectionner jusqu'à 2 options, mais la plupart des visiteurs ne le lisent pas.
Lorsque l'utilisateur sélectionne deux options, nous désactivons le reste.
Si l'utilisateur décoche l'une des options sélectionnées, toutes les cases à cocher sont activées. L'approche s'est avérée intuitive même pour les utilisateurs inexpérimentés.
Étant donné que cette approche repose sur JavaScript, il doit y avoir une validation supplémentaire lors de la soumission.
Vous avez quelques options, mais tout dépend du nombre de choix que vous offrez à l'utilisateur et du nombre de rappels dont il dispose (ont-ils déjà vu ces options? Sont-elles des options familières? Sont-elles nouvelles pour l'utilisateur?). Voici quelques options que vous voudrez peut-être envisager:
Si vous n’avez pas trop d’options à sélectionner, vous pouvez envisager d’utiliser 2 options de sélection. Cependant, tout choix effectué dans une option devra être désactivé dans l'autre. L'inconvénient de cela, il n'y a pas de visibilité immédiate des options disponibles.
Vous pouvez utiliser une sélection parmi de nombreuses listes. Cela peut être limité par la hauteur, où le défilement vertical apparaîtra si les options sont supérieures à la hauteur du conteneur. Des choix peuvent ensuite être ajoutés à la sélection sur le côté droit. Utilisez-le uniquement si vous avez jusqu'à environ 15 choix (le défilement des choix sera ennuyeux). L'inconvénient de cela, vous pouvez toujours sélectionner plus de 2 options. J'autoriserais cela et ajouterais une correction d'erreur à votre modèle:
Cela permet à l'utilisateur d'expérimenter, de faire des choix et d'affiner la sélection en fonction de vos contraintes.
Enfin, la solution à laquelle vous avez échappé. Une fois que 2 cases ont été cochées, désactivez toutes les autres options. J'utiliserais cette option si vous avez beaucoup de choix et que l'utilisateur doit parcourir toutes les options et faire un choix. Si vous avez beaucoup d'options comme celle-ci, demandez-vous si les options peuvent être catégorisées. S'ils le peuvent, divisez-les sous des titres de catégorie pour améliorer la capacité de numérisation. L'inconvénient est que les utilisateurs doivent désélectionner une option avant de pouvoir affiner leur choix lorsque 2 options ont déjà été sélectionnées.
Pour répondre à votre question sur "attendre la soumission pour alerter" ou "alerte en place et revérifier lors de la soumission" - je pense qu'il serait plus agréable d'avoir une validation en ligne, donc une fois que plus de 2 choix sont faits, l'utilisateur est alerté et conscient que seulement 2 choix peuvent être faits. Si nous prenons mon dernier exemple et permettons aux utilisateurs d'en sélectionner autant qu'ils le souhaitent, cela supprime l'inconvénient que j'ai mentionné, ce qui est sans doute moins frustrant. J'ajouterais certainement la validation en ligne si vous optez pour cette option.
En supposant que le nombre d'options est suffisant pour envisager quelque chose comme des cases à cocher ou des boutons d'option, essayez des colonnes de boutons radio séparées, une pour chaque choix:
En sélectionnant dans une colonne, vous désactivez le ou les boutons correspondants pour l'autre (en supposant que choisir la même option deux fois est un problème). Cela empêche une erreur utilisateur de se produire en premier lieu. Dans votre cas, deux clics, et l'utilisateur a terminé. Un simple changement ne prend qu'un seul clic. Cela ne prend pas beaucoup plus d'espace que d'utiliser des cases à cocher.
Une alternative plus ambitieuse consiste à construire une métaphore physique pour communiquer les limites. Cela peut être nécessaire si les utilisateurs sont confondus par le "1er" et le "2e" (par exemple, en pensant que cela implique un classement qui n'est pas là). La métaphore exacte peut dépendre du domaine de l'utilisateur - vous voulez qu'il soit compatible et idéalement communiquer pourquoi deux doivent être sélectionnés. Par exemple, s'il s'agit de choisir deux objets pour "s'équilibrer" ou "s'opposer" l'un à l'autre, peut-être montrer des échelles ou un bascule pour placer des options.
Comme exemple générique et compact qui implique des ressources limitées, vous pouvez utiliser des crochets et un nombre fixe de balises:
Les balises peuvent être glissées et déposées, mais la simple sélection d'un crochet déplace la balise avec le focus sur l'option. Le focus commence sur une balise "stockée", ce qui fait trois clics pour effectuer deux sélections… pas aussi efficace que les colonnes de boutons radio, mais il évolue vers des limites plus élevées et prend moins de place.
Dans le passé, lorsque nous devons implémenter `` choisir x des éléments ci-dessous '', j'utilise généralement jQuery pour créer une info-bulle `` fondu au jaune ''. Donc, en cliquant sur la cinquième case à cocher, vous verrez ceci:
[x] option 1
[ ] option 2
[ ] option 3
[ ] option 4
[x] option 5 [3 of 5 options remaining...]
Après avoir sélectionné toutes les options autorisées, un clic ultérieur sur une case décochée produirait la même info-bulle visuelle mais avec un message d'erreur ala [You may only select 5.]
Cependant, c'est probablement exagéré pour un maximum de 2 sélections. Dans ce cas, je suggère de suivre la suggestion de Michael.
Si vous recherchez une solution Web, vous pouvez jeter un œil à site JQuery Multiselect , où sont affichés différents styles. J'aime selectList plus - vous avez une zone de liste standard et tous les éléments choisis seront présentés sous forme de balises ci-dessous.
Visuellement, vous pouvez placer deux balises vides grises, qui servent d'espace réservé ou de sorte d'ombre. Ainsi, les utilisateurs reconnaîtraient rapidement que seules deux sélections sont possibles. 
L'image est adaptée de vitrine selectList
Je pense que le processus de sélection des grandes listes (et limiter ces choix) n'a jamais été très bien géré. Les cases à cocher et l'accumulateur sont corrects, mais ni l'un ni l'autre ne trouve cette bonne solution à long terme. Et la solution déroulante est très limitée par le numéro du numéro dans la liste et si les utilisateurs comprennent la liste.
Qu'en est-il d'une liste de balises prédéfinie, afin que les utilisateurs aient un tas de choix et qu'ils puissent les sélectionner en les déplaçant, comme l'accumulateur, mais plus visuel. Cela signifie que les données peuvent être présentées dans un style plus plat pour empêcher les gens de sélectionner simplement les éléments les plus importants de la liste. Vous pouvez ensuite monter les boîtes avec des informations sur leur progression.