web-dev-qa-db-fra.com

Avoir beaucoup de cases à cocher et une action supplémentaire pour chaque case à cocher

J'utilise une interface similaire pour la réponse géniale de Lisa Tweedie à ma question sur que faire si vous avez trop de cases à cocher .

Je vais utiliser une interface similaire à celle-ci pour sélectionner les groupes dont un utilisateur fait partie. Un utilisateur peut faire partie d'aucun ou de plusieurs groupes. Un groupe sera désigné comme son groupe principal.

Actuellement, l'interface ressemble à ceci:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

L'interface fonctionne vraiment bien, mais maintenant je dois ajouter une action à chaque choix de groupe. Un utilisateur peut faire partie de plusieurs groupes, mais il doit désigner un groupe comme groupe principal. L'utilisateur doit être en mesure de nommer le groupe principal dans la zone "Groupes sélectionnés" ainsi que dans la "Zone de choix de groupe". Il devrait toujours y avoir un groupe qui est le groupe principal.

Une façon possible de penser:

mockup

télécharger la source bmml

Problèmes:

  • Si l'utilisateur clique accidentellement sur le bouton "rendre primaire" , le groupe sera également sélectionné. Il ne le remarquera peut-être pas et supposera simplement qu'il ne s'est rien passé de fâcheux.

  • Il n'y a aucun moyen de rendre un groupe principal en utilisant l'interface sous "Groupes sélectionnés" .

  • Il peut être difficile de trouver une icône qui représente "rendre primaire".

Quels sont les moyens d'y parvenir avec l'interface? L'interface doit être conçue avec l'hypothèse qu'il peut y avoir un nombre infini de choix de groupe.

2
F21

Je ne suis pas convaincu qu'un nombre infini de choix de groupe puisse être réaliste dans la barre en haut, mais en supposant qu'il n'y a que quatre ou cinq sur un grand nombre de possibles, cela pourrait fonctionner.

Un contrôle à deux états est nécessaire pour "Primaire" - soit un groupe est primaire, soit il ne l'est pas. C'est assez similaire aux favoris du navigateur pour qu'une étoile colorée soit candidate: l'étoile colorée indique le groupe principal.

Je n'ai aucune idée de comment cette interface doit être rendue accessible. Pour le moment, je ne peux que penser qu'un ensemble de pages purement textuelles serait nécessaire (l'utilisation de la fonction de recherche est la plus problématique; tout le reste peut être rendu facile à lire).

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Pour résoudre vos problèmes:

  • Les modifications apportées à ce qui est indiqué dans la barre supérieure doivent être évidentes. Faire d'un groupe non sélectionné le principal (et donc le sélectionner) doit l'ajouter à la barre supérieure de manière évidente - peut-être en l'ajoutant à l'avant avec une couleur de surbrillance qui s'estompe en gris. De même, décocher une case doit supprimer l'entrée de la barre supérieure - la mettre en surbrillance, disparaître complètement et fermer les autres.

  • La duplication de l'étoile dans la barre supérieure permet de l'utiliser (de la même manière que l'icône "Supprimer" X duplique la case à cocher).

  • Je pense qu'une étoile est assez courante.

4
Andrew Leach