Comment présenter les options booléennes tout en sélectionnant exactement 1 d'entre elles comme "primaire"?
J'ai une situation dans un navigateur Web où j'ai un certain nombre (disons 3-10) d'alternatives à présenter à l'utilisateur.
- L'utilisateur final doit choisir au moins une de ces options pour être activé
- L'utilisateur final doit choisir exactement l'une des options activées pour être l'option "principale".
Cependant, je ne sais pas comment le faire. Voici une situation artificielle à propos d'un ragoût qui pourrait aider à mieux illustrer cela:
Il y a 7 ingrédients potentiels, l'utilisateur doit activer ou désactiver chacun d'eux (crie une case à cocher) mais au moins l'un d'eux doit être activé; et exactement l'un d'eux doit être l'ingrédient principal (crie un bouton radio).
Si je choisis une forme stupide sans vérification des contraintes, c'est facile à mettre en œuvre, mais ils pourraient choisir le boeuf, le porc et les carottes comme ingrédients activés, puis les pommes de terre comme ingrédient principal (ce qui est un problème car ils n'ont pas vérifié les pommes de terre boîte parmi les ingrédients activés)
Ou je pourrais mettre l'ingrédient primaire en premier, puis leur permettre de sélectionner des ingrédients secondaires, et forcer l'ingrédient primaire à être sélectionné dans la liste des ingrédients secondaires (boeuf dans l'exemple ci-dessous) et ne pas permettre qu'il soit désélectionné. Pas trop difficile à implémenter en HTML/Javascript, mais il y a ensuite un peu de ruse ... et si je commence par l'état de l'interface utilisateur ci-dessous, puis sélectionne l'ingrédient principal comme oignons, puis comme poulet et puis porc? Qu'advient-il des cases à cocher pour les oignons, le poulet et le boeuf?
Ces deux options nécessitent la duplication de la liste deux fois.
Ou je pourrais essayer d'utiliser une sorte de curseur à choix multiples pour sélectionner l'ingrédient principal ... ce qui éliminerait la nécessité de dupliquer la liste ... mais ce n'est pas une fonction HTML intégrée et je devrais rouler mon posséder ou essayer d'appliquer un élément d'interface utilisateur tiers.
Ou je pourrais placer un radiobutton et une case à cocher devant chaque ingrédient (radiobutton pour l'ingrédient principal, case à cocher pour activer les ingrédients non primaires) qui est compact et simple dans la présentation, mais très probablement déroutant dans la sémantique.
Aucune suggestion?
Comme vous le savez, vous devez collecter une combinaison de sélections de style case à cocher et une liste filtrée de sélections de style radio.
Combinez les deux en une seule liste . Les cases à cocher activent le "bouton radio" principal (une étoile dans cette maquette, mais l'adaptent à votre conception).
Habituellement, les gens ont tendance à éviter d'avoir une liste de boutons radio sans sélection par défaut, mais dans votre cas, un "principal par défaut" peut ne pas avoir de sens, c'est pourquoi j'ai choisi de ne pas utiliser des éléments de bouton radio littéraux, et j'ai plutôt choisi des étoiles .
Cliquer sur une étoile remplace la sélection principale, comme le ferait un bouton radio, n'autorisant qu'une seule étoile à la fois. Il peut être plus confortable pour vos utilisateurs de vouloir supprimer l’étoile d’un élément avant de le mettre en vedette. Ce n'est pas grave, laissez-les faire et imposez vos exigences à la fin.
Si la liste est longue, reproduisez peut-être statiquement l'option désignée "principale" en haut.
Gardez à l'esprit qu'il peut être difficile de communiquer vos exigences strictement par le biais des méthodes de saisie uniquement.J'ajouterais donc un peu d'instructions pour que votre utilisateur sache comment effectuer ses sélections et se replier sur une validation à la fin.
Cela pourrait être un problème de formulation. Si vous commencez avec l'option principale (1 sur N, donc bouton radio), vous pouvez alors présenter une liste "d'options supplémentaires" où il est légal de choisir 0 options supplémentaires (donc les cases à cocher ont du sens).
Cela a un sens supplémentaire car "primaire" est sémantiquement lié à "premier", il est donc naturel de démarrer la boîte de dialogue avec "l'option principale". Comme il n'y a pas de classement des options supplémentaires, nous n'avons pas d '"option secondaire" - ce sont toutes des "options supplémentaires". Nous utilisons les mots dans l'ordre où les gens s'attendent à les voir. Cela diminue la charge cognitive.
La réponse de @ maxathousand est vraiment agréable et propre, mais j'ai pensé ajouter une autre option.
Je pense qu'un menu déroulant à sélection multiple avec une liste dynamique de choix de radio serait agréable et clair. Voici un petit gif que j'ai simulé:
Et un lien vers la maquette si quelqu'un le veut: https://jsfiddle.net/gjudck24/
Je voudrais:
- présenter à l'utilisateur une question "Quel est l'ingrédient principal?".
L'utilisateur fait sa sélection dans un menu déroulant (qui ne permet pas la sélection multiple)
Lorsque l'utilisateur choisit l'ingrédient principal, la deuxième question et la liste des ingrédients supplémentaires apparaissent (soit une liste de cases à cocher ou un combo de sélection multiple comme dans la réponse GammaGames.
Ci-dessous est une maquette rapide (effectuée en c # car je code plus rapidement que le script Web). Rien d'esthétique, juste pour illustrer l'idée:
Pour la deuxième liste, vous pouvez la garder passive/statique (donc l'ingrédient principal est toujours présent dans la liste complète ci-dessous), et décider de:
- cochez automatiquement l'ingrédient principal dans la deuxième liste,
- ignorer complètement l'ingrédient principal de la deuxième liste (qu'il soit coché ou non)
Ou plus activement, supprimez l'ingrédient principal de la liste secondaire (bien que cela nécessitera plus de codage, surtout si l'utilisateur décide de modifier l'ingrédient principal à mi-chemin du processus.
Il semble que votre premier concept de conception soit le plus logique des deux étant donné la tâche décrite:
L'utilisateur final doit choisir au moins une de ces options pour être activé
L'utilisateur final doit choisir exactement l'une des options activées pour être l'option "principale".
Mais je pense que la confusion vient de la duplication de la deuxième liste qui ne doit contenir que les ingrédients sélectionnés par les utilisateurs. Cela montre clairement qu'ils doivent sélectionner un ou plusieurs articles, puis désigner l'un d'entre eux comme ingrédient principal (même s'il n'y en a qu'un).
Ainsi, la validation doit être de fournir une liste qui permet un comportement de groupe de cases à cocher et d'appliquer une validation pour un seul élément à sélectionner (vous pouvez choisir de remplir la deuxième liste avant ou après la validation). Ensuite, vous validez la deuxième liste avec un comportement de groupe de boutons radio.
Il existe différentes façons d'implémenter l'apparence (par exemple, des boutons à bascule plutôt que des boutons radio avec un comportement personnalisé), mais il est important de bien commencer par la logique.
Une autre option à celles ci-dessus consiste à tirer parti d'une paire de listes Ajouter/Supprimer avec des regroupements. J'ai utilisé la fenêtre MMC Snap-in comme maquette paresseuse. Vous pouvez ajouter des ingrédients à partir d'une liste à gauche qui sont regroupés à droite. Le premier ingrédient ajouté deviendrait le principal et les ingrédients supplémentaires relèveraient du groupe d'ingrédients supplémentaires. Le principal pourrait être changé en sélectionnant un autre ingrédient dans le groupe supplémentaire et en choisissant "Monter" (ou "Rendre primaire", etc.).
