Aider les utilisateurs à comprendre que deux et seulement deux options doivent être sélectionnées
J'ai une case à cocher déroulante où il y a 8 éléments à vérifier. Deux sont sélectionnés par défaut.
J'essaie de penser à un moyen intuitif de faire savoir à l'utilisateur qu'il doit désélectionner ceux qui existent avant d'en vérifier un autre, et qu'il doit en avoir exactement deux vérifiés (ni plus, ni moins).
Je pense que je suis heureux d'utiliser JavaScript pour aider, peut-être une sorte d'infobulle ou de notification. Des idées? Je suis également ouvert à d'autres options que la case à cocher déroulante.
Je suggère de mettre un bouton sur lequel ils doivent appuyer pour terminer la sélection, et d'utiliser le texte de l'étiquette de ce bouton et l'état actif/désactivé pour transmettre les informations que vous souhaitez transmettre à l'utilisateur.
Quelque chose comme ça:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'idée est que la combinaison des options sélectionnées et du texte dans le bouton indique clairement à l'utilisateur ce qu'il doit faire pour continuer.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vous pouvez accéder à une interface combinée à deux. Le premier avec tous les choix, et le second avec tous les choix et un champ vide.
Utilisez simplement une sorte de message d'alerte. C'est bon. Je ne vois pas la nécessité d'utiliser une solution d'interface différente car vous n'avez que 8 options et devez en sélectionner seulement 2. En outre, les cases à cocher représentent suffisamment bien ce que les utilisateurs doivent faire, c'est-à-dire sélectionner plusieurs options.
Jetez un oeil à l'image ci-dessous, si un utilisateur essaie de choisir plus de deux options (comme "Sleep"), affichez un message. Laissez l'utilisateur explorer votre interface et découvrez ses limites, ils le peuvent, et vous avez déjà fait du bon travail en utilisant des composants standard et bien connus qu'ils savent utiliser.
Je pense que la meilleure solution est une liste déroulante multisélection comme cet exemple - choisi . Vous pouvez limiter le nombre de sélections possibles et avertir l'utilisateur s'il essaie de faire une sélection supplémentaire ou de désactiver tous les éléments de la liste. Mais il pourra facilement supprimer la sélection effectuée précédemment pour en faire une nouvelle.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Présentez à la personne une liste d'options et une liste d'espaces réservés visibles pour ses choix. Quand ils cliquent sur une option de chaque côté, elle devrait disparaître de ce côté et réapparaître de l'autre.
Une fois deux choix effectués, laissez l'utilisateur progresser.
Une autre alternative pourrait être de faire quelque chose que l'on voit parfois dans les applications logicielles, où les éléments d'une colonne peuvent être sélectionnés pour se déplacer dans l'autre colonne, et inversement. Il pourrait y avoir un contrôle de validation pour le nombre d'éléments qui sont déjà dans la deuxième colonne, le cas échéant.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Ce n'est pas évident dans l'image, mais il peut être possible de sélectionner plusieurs éléments dans l'une ou l'autre liste pour les déplacer, plutôt que d'avoir à les faire un par un. Bien que pour les critères - deux exactement - ce ne soit pas vraiment un problème. Une autre remarque est qu'il est possible de double-cliquer sur un élément pour le déplacer d'une liste à l'autre, ce qui réduit également les déplacements et les clics.