Interaction pour les champs de saisie frères dépendants?
J'ai deux champs dans un formulaire - Pays et Organisation. Ceux-ci détiennent la même hiérarchie et dépendent les uns des autres.
Cela signifie que l'utilisateur doit d'abord pouvoir sélectionner un pays, puis sélectionner une organisation qui relève du pays ou , sélectionner un Organisation d'abord, puis sélectionnez les pays dans lesquels l'organisation existe.
Donc quelque chose comme ceci:
(Si l'utilisateur choisit d'abord l'onglet Organisation, le survol sur Uniqlo n'affiche que les pays dans lesquels il est présent. S'il choisit d'abord l'onglet Pays, le survol des États-Unis n'affichera que les organisations présentes aux États-Unis)
La question de base que j'essaie de poser à l'utilisateur est "à quels pays et organisations avez-vous besoin d'accéder?" Dites si "Pays" est la première liste déroulante, un utilisateur souhaitant accéder à "BMW" dans "quel que soit le pays où se trouve BMW" devra d'abord répondre "Choisir le pays" et filtrer et sélectionner spécifiquement "les pays dans lesquels BMW se trouve" puis " Choisissez org "avec" BMW ". Il serait plus logique pour lui de choisir Org comme BMW en premier, puis de sélectionner l'option "Tous" dans la liste des pays. En revanche, un utilisateur qui souhaite "Toutes les organisations" dans "Inde" souhaiterait que le champ du pays soit au-dessus du champ Organisation.
Je suis convaincu que ce n'est pas un design idéal et pourrait être très déroutant pour certains, mais je ne peux pas non plus penser à une autre alternative. Demander à l'utilisateur de choisir "Que souhaitez-vous choisir en premier? L'organisation ou le pays?" semble être une voie à suivre, mais semble toujours une mauvaise conception. Existe-t-il un modèle de conception intelligent pour de tels cas? Pour jeter dans un certain contexte, c'est pour une interface utilisateur de contrôle d'accès administrateur Web uniquement.
Je pense que cela pourrait être une meilleure solution, dans cet exemple, vous pouvez sélectionner l'un des parents et masquer ou afficher les sélections disponibles dans un surlignage, vous pouvez également fournir des contrôles de réduction sur les parents pour réduire la quantité d'espace et effacer tout.
Examinons d'abord les composants de votre problème:
Nous avons deux dimensions possibles: Pays ou Organisation
Une seule métrique: Présence Oui ou Non
USA GERMANY FRANCE
Pizza Hut Yes No No
Mc Donalds Yes Yes Yes
Oreo No Yes No
C'est clair non? Maintenant, disons que nous faisons cela à la place:
USA GERMANY FRANCE
Pizza Hut Yes ? ?
Mc Donalds Yes Yes Yes
Oreo ? Yes ?
Nous ne répondons que partiellement à la question. C'est ce que je pense que votre interaction avec l'interface utilisateur fait. L'un est clair, l'autre ne l'est pas.
Vous pouvez donc faire ce qui suit:
Utilisez des chiffres ou un autre indicateur pour signaler la disponibilité. Choisissez la dimension principale pour être celle avec le moins de dispersion. Cela signifie que vous diminuez les chances d'avoir une longue liste de valeurs vides (0)
All Organizations ▽
France (1)
Germany (2)
USA (2)
Pizza Hut ▽
France (0)
Germany (0)
USA (1)
Vous avez raison en ce que la solution que vous avez suggérée serait source de confusion pour l'utilisateur car elle ne permet pas aux deux scénarios d'être mis en œuvre sans ambiguïté dans le même modèle de conception.
Les deux scénarios à considérer ici sont:
- R: Sélectionnez d'abord un pays, puis sélectionnez une organisation qui relève du pays OU
- B: Sélectionnez d'abord une organisation, puis sélectionnez les pays dans lesquels l'organisation existe
Le premier scénario nécessite la sélection d'un élément dans la catégorie Pays et d'un élément dans la catégorie Organisation tandis que le deuxième scénario nécessite la sélection d'une organisation, puis la sélection de plusieurs pays. Cela signifie que vous pouvez simplement créer deux ensembles de champs de saisie qui répondent aux deux scénarios car ils ne sont pas réciproques, vous devrez donc indiquer à l'utilisateur quel scénario il souhaite, mais cela rend l'interaction moins flexible.
Une façon de clarifier la logique consiste à représenter les deux listes de manière différente afin de suggérer une interaction différente. Par exemple, présentez tous les pays disponibles sur une carte, et lorsque vous sélectionnez sur le pays une liste d'organisations apparaît et l'utilisateur peut sélectionner une organisation pour le pays choisi. Vous pouvez ensuite présenter toutes les organisations sur une liste et lorsque vous sélectionnez une organisation, elle est mise en surbrillance sur la carte et l'utilisateur peut sélectionner les pays qu'il souhaite pour cette organisation. Étant donné que les deux listes sont présentées différemment, les interactions varient également et la logique sera moins déroutante pour l'utilisateur.
Si vous avez essayé de le faire avec les mêmes éléments d'interface, il sera nécessaire d'expliquer explicitement quel doit être le comportement car il y aura une certaine ambiguïté en raison de la similitude des deux listes déroulantes. Vous pouvez également envisager d'implémenter des listes déroulantes avec les éléments de la liste sous forme de cases à cocher ou de boutons radio selon que l'autre catégorie a déjà été sélectionnée ou non, mais je pense que c'est assez complexe et non conventionnel, vous aurez donc besoin de beaucoup d'explications pour allez-y.
La balise divulgation progressive répond à la question. Ne changez pas le fonctionnement d'une simple liste déroulante dynamique.
- Choisissez un pays ou une organisation comme première zone de liste déroulante ou liste déroulante (Idéalement, ayez la plus grande liste comme première)
- le système met à jour la deuxième liste déroulante en fonction de la sélection
- Choisissez l'autre élément dans la 2e liste déroulante réduite
Facile. Pourquoi réinventer la roue alors que les listes déroulantes dynamiques ont si bien fonctionné?
Il semble que pour votre question, l'utilisateur aura un nom de pays/organisation en tête. 1. Faites remplir la zone de liste latérale LHS avec des options pays-organisation valides. 2. Ensuite, laissez l'utilisateur entrer le pays/l'organisation qu'il souhaite entrer, puis filtrez les options dans la zone de liste LHS en fonction des critères de recherche de l'utilisateur. La zone RHS collectera les options que l'utilisateur a sélectionnées dans la zone de liste LHS. Quelque chose comme ci-dessous -
Je dirais qu'il existe deux options plus simples, en fonction de ce dont l'utilisateur a spécifiquement besoin.
Si vous voulez que l'utilisateur vous donne toutes ses options préférées.
Dans ce scénario, vous souhaitez connaître leurs préférences, quels que soient les conflits. Cependant, vous souhaitez les informer des conflits.
Dans ce scénario, affichez les deux listes en même temps et ne désactivez aucune des options d'une autre. Au lieu de cela, réservez de l'espace à côté ou au-dessus des listes et utilisez-le pour signaler tout conflit.
C'est-à-dire, si je choisis les États-Unis et l'Allemagne, tant mieux. Ensuite, je choisis Uniqlo, pas de soucis. Ensuite, je choisis Oreo, qui est en conflit avec les États-Unis. Oreo et US deviennent rouges (ou peut-être une couleur moins sévère). Au-dessus ou à côté de ces deux listes se trouve un espace pour des informations supplémentaires, indiquant: "Un ou plusieurs de vos conflits de sélections: Oreo n'est pas disponible dans le [[# #]] us [~ # ~] "
Cela simplifie les interactions générales et n'empêche pas les utilisateurs de prendre des décisions conflictuelles, les informant simplement qu'il existe des conflits. C'est idéal si vous voulez que l'utilisateur sorte de "rêver grand" et choisisse tout ce qui flotte sur son bateau. Ils peuvent décider eux-mêmes s'ils veulent que ces conflits persistent.
Si vous voulez que l'utilisateur évite complètement les conflits
Si vous voulez garder l'interaction simple et éviter que l'utilisateur évite tous les conflits, je supprimerais l'idée de listes co-dépendantes qui s'influencent mutuellement. Gardez-le à sens unique, au lieu de donner à l'utilisateur la possibilité de modifier les options à chaque extrémité de ce flux à sens unique.
Je recommanderais simplement de demander à l'utilisateur comment il veut choisir et d'ordonner les décisions en conséquence. Je serais explicite, expliquant pourquoi on leur présente ce système. C'est à dire.:
1 - "Afin de vous montrer les pays ou organisations dont vous avez besoin, nous devons d'abord savoir lequel est le plus pressant pour votre décision: Le organisation vous êtes intéressé, ou le pays il est situé dans? Vous pouvez modifier cette préférence à tout moment. "
2 - Boutons déroulants ou radio avec "Organisation" et "Pays" comme seules options
3 - Une fois la sélection effectuée, affichez la première liste de caractères à sélection multiple ci-dessous. Cette première liste serait l'option qu'ils ont choisie en premier. En dessous, se trouve la deuxième liste dépendante (peut-être dans un état inactif jusqu'à ce qu'ils fassent au moins un choix dans la première liste)
4 - Imaginons qu'ils aient choisi "Pays". Au-dessus de la liste "Pays" affichée, ayez une microcopie claire expliquant "Les Pays que vous choisirez détermineront ce que Organisations sont à votre disposition ci-dessous.
5 - Une fois qu'ils ont fait au moins un choix, la deuxième liste s'active. Il montre toutes les options possibles, mais les choix conflictuels sont désactivés.
6 - S'ils reviennent en arrière et font un changement dans la première liste qui affecte leurs choix dans la seconde, désactivez simplement ces sélections dans la seconde, avec un message clair indiquant les résultats. Dans cet exemple, il indiquerait "Votre changement de pays est en conflit avec un ou plusieurs choix de votre organisation. Les organisations concernées ont été désactivées".