web-dev-qa-db-fra.com

Comment gérer les choix déroulants inter-liés?

J'ai un formulaire contenant (entre autres) 3 listes déroulantes, chacune avec environ 5 à 10 choix. Les choix dans ces listes déroulantes sont étroitement liés et certaines des permutations seront invalides. Cela signifie également que si l'utilisateur modifie la sélection dans l'une des listes déroulantes, les valeurs actuelles dans les deux autres peuvent être invalides.

Mon document de conception indique actuellement que "si une combinaison non valide est choisie, une erreur doit être affichée" et "pour aider l'utilisateur à choisir des combinaisons valides, tous les choix dans les listes déroulantes qui produiront une combinaison non valide doivent être mis en surbrillance dans la liste déroulante. ".

Je ne suis pas convaincu que c'est la meilleure façon de traiter cela, mais je ne peux pas penser à de meilleures alternatives. J'ai pensé à les combiner en une seule liste déroulante contenant toutes les combinaisons valides, mais cela pourrait aussi être difficile à manier.

Quelqu'un a-t-il d'autres solutions?

8
IanR

Si vous pouvez déterminer une commande entre les listes déroulantes, la solution est relativement simple:

Chaque sélection de liste déroulante réinitialise les sélections dans les listes déroulantes suivantes (en aval). Il met également à jour les champs disponibles pour s'adapter à la sélection actuelle dans cette liste déroulante (sans afficher les options interdites du tout).

Prenons par exemple les sites de cartes plus anciens: vous pouvez choisir un état, puis une ville et seulement une rue. Il serait tout à fait acceptable que si vous changez d'état, vous perdiez la ville que vous avez choisie précédemment.

S'il y a pas d'ordre distinct vous pouvez:

  • Interdisez la sélection des nouvelles valeurs incompatibles avec la ou les sélections existantes.
    Je suppose que vous pouvez "faible luminosité" (comme vous le dites) ces options dans le menu déroulant avant même la sélection.

  • "Low-Light" (comme vous le dites) de telles nouvelles valeurs problématiques, mais permettent à l'utilisateur de les sélectionner.
    Vous pouvez ensuite afficher une boîte de dialogue expliquant que la nouvelle valeur est problématique.
    L'utilisateur peut choisir:

    • Ignorez l'avertissement et le remplacement - c'est-à-dire que la nouvelle option est sélectionnée et réinitialise les valeurs de conflit précédemment sélectionnées dans les autres listes déroulantes.
    • Tenez compte de l'avertissement (fermeture de la boîte de dialogue) et sélectionnez une autre valeur.
      .

    Quoi qu'il en soit, la boîte de dialogue doit avoir une case à cocher "se souvenir du choix", donc la prochaine fois, elle ne dérangera pas l'utilisateur.

7
Dan Barak

Bien que je comprenne qu'il pourrait y avoir un problème de manque d'espace vertical, j'essaierais certainement de ne pas utiliser les listes déroulantes, j'essaierais d'utiliser des éléments de type liste à la place (sélectionner plusieurs groupes d'entrée radio ou ) - cela permet à l'utilisateur de voir les changements qui se produisent tout en sélectionnant quelque chose dans un groupe qui affecte les options dans d'autres groupes.

Aussi - j'essaierais au moins soit a) de fournir un raccourci vers les jeux de sélection les plus courants b) d'essayer de réorganiser le tout. Cette interface ne peut pas être qualifiée de "simple", aussi fluide que vous puissiez le faire :)

2
Jüri

Vu à plusieurs reprises, et bien qu'il soit évident de "interdire" les combinaisons invalides, cela présente certains inconvénients:

  1. Il peut être difficile de passer à une combinaison valide car les étapes intermédiaires sont toutes "interdites". par exemple. si vous avez les choix A/B et C/D, et A autorisé uniquement avec C et B avec D, l'utilisateur ne peut pas passer de A + C à B + D car aucune liste déroulante ne basculera vers l'autre choix. Cela peut être un problème particulier avec un système plus compliqué et si l'utilisateur n'est pas très familier avec les combinaisons qui pourraient être interdites; trouver des étapes intermédiaires légales peut se résumer à des essais et des erreurs.
  2. La raison du refus peut être obscure et vous souhaitez informer l'utilisateur de la raison pour laquelle son choix n'est pas valide.

Ce que je proposerais, c'est de ne pas interdire les choix invalides. Votre spécification ne dit pas qu'ils devraient être refusés; le lowlighting n'est pas le même. Distinguer les choix illégaux des choix légaux, mais permettre de les choisir. Ajoutez à cela une zone de message qui s'affiche lorsqu'une combinaison illégale est choisie, en donnant la raison et en suggérant une alternative (et en ne permettant pas à l'utilisateur de passer à l'étape suivante).

Tout cela est nul et non avenu si les choix peuvent être décomposés en une séquence: il est alors beaucoup plus logique de présenter les choix en séquence et d'interdire tout choix illégal lorsque chaque choix est présenté.

2
DJClayworth

Si certains choix ne sont pas valides, vous ne devez tout simplement pas les afficher. Cela réduira la possibilité qu'une erreur soit affichée pour l'utilisateur.

S'il s'agit d'une application Web, utilisez JavaScript pour éliminer les choix non valides en fonction de la sélection. Révélez progressivement le deuxième menu déroulant avec les options appropriées après avoir utilisé le premier menu déroulant. Idem pour le troisième. Validez côté serveur et uniquement s'il ne valide pas après votre validation côté serveur si vous affichez une erreur. Seuls ceux dont JavaScript est désactivé ou ceux qui tentent intentionnellement de contourner votre formulaire verront jamais l'erreur.

S'il s'agit d'une application de bureau, utilisez le même type de principe.

1
Virtuosi Media