Cases à cocher et boutons radio déroutants
J'ai un problème pour créer une certaine interface utilisateur pour un site Web. Je vais démontrer le problème avec un simple site Web pour une chaîne de restaurants:
Le contexte
le site Web compte de nombreux utilisateurs et de nombreux restaurants. Chaque restaurant a certains utilisateurs qui lui sont assignés, où l'utilisateur peut être soit un directeur, un cuisinier ou un serveur.
le serveur peut voir les adresses des commandes qui arrivent, le cuisinier peut voir que et le contenu des commandes (ce qu'est la nourriture), et le gestionnaire peut voir ces deux choses et peut changer les rôles de n'importe quel utilisateur.
Il ne peut y avoir qu'un directeur pour chaque restaurant, mais autant de cuisiniers et de serveurs que souhaité. Voici à quoi ressemble l'interface utilisateur à partir de maintenant:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Problème
Les utilisateurs ne peuvent avoir qu'un rôle chacun, car chaque rôle possède tous les privilèges des rôles précédents plus un nouveau privilège. Donc, personne ne peut être à la fois un serveur et un cuisinier, ou un cuisinier et un gestionnaire, etc. Ce n'est pas très clair en utilisant l'interface utilisateur ci-dessus, car on pourrait cocher deux cases pour le même utilisateur, ou même les trois rôles.
Question
Comment expliquez-vous cette idée à travers l'interface utilisateur? 'l'idée' étant qu'il ne peut y avoir qu'un gestionnaire de restaurant, et chaque utilisateur ne peut en avoir qu'un rôle.
C'est mon premier post ici, donc j'espère que je suis au bon endroit. Merci pour les réponses à l'avance!
EDIT: Il existe des rôles plus élevés qui peuvent changer librement les trois rôles mentionnés.
Le dernier cas est ce que j'essaie d'éviter (Mary).
.
Dans un scénario comme celui-ci, je ferais en sorte que l'interface utilisateur reflète les états possibles de l'application. Vous ne pouvez avoir qu'un seul gestionnaire, il ne devrait donc y avoir qu'un seul endroit pour sélectionner un gestionnaire, tout le monde peut être un cuisinier ou un serveur, alors fournissez des widgets d'interface mutuellement exclusifs pour ces états. Voici un exemple:
Dans la pratique, vous voudrez peut-être un peu plus délibéré pour changer les rôles des gens, mais j'espère que cela transmet au moins l'idée.
Edit: Comme certains commentaires ont mentionné qu'il y a des problèmes de conception avec cette maquette, et je ne recommande pas une implémentation directe de celle-ci. Veuillez noter que la maquette était uniquement destinée à répondre à la question du PO et que d'autres principes de conception s'appliquent toujours ici.
Certains exercices pour le lecteur comprennent:
- Élimine l'ambiguïté dans laquelle le rôle est actuellement sélectionné
- Afficher les informations du manager (téléphone, email, ...)
- Rendre les opérations de modification des données plus délibérées que la simple modification d'une liste déroulante ou d'une bascule
Étant donné que le changement de gestionnaire actuel est une action invalidant les autres options - je le présenterais d'une manière qui communique clairement ce qui va se passer.
Le serveur/chef sont des boutons radio, donc un seul d'entre eux peut être actif à la fois - et une seule personne peut être gestionnaire et rien d'autre.
Cela ressemble à une tâche de regroupement d'utilisateurs.
Ces deux exemples ont la propriété Nice que vous pouvez imprimer une vue similaire à afficher dans la cuisine. Vous n'avez également aucun texte dupliqué/redondant de Cook/Waiter sur toute l'interface utilisateur, donc je pense qu'il est plus facile de lire et de comprendre qui travaille avec qui.
Style d'étiquette
Similaire à la façon dont vous ajoutez des balises à une question Stack Exchange.
Style de menu
J'ai pris l'édition de menu WordPress comme concept de base pour simuler la hiérarchie.
Utilisez ceci - Ceci est une vue de rôle plus élevée.
De l'avis du gestionnaire, le gestionnaire n'aura pas de zone de liste déroulante pour son rôle.
La vue des deux autres sera en texte brut - pas de combos.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
D'après ce que je vois, ils devraient tous être des boutons radio (utilisez un meilleur espacement pour diviser chaque utilisateur et les boutons radio associés).
La question, dans votre tête, devrait être:
Qui est Alice? Est-elle un (•) gestionnaire, un () cuisinier ou un () serveur?
Qui est Bob? Est-il un () directeur, un (•) cuisinier ou un () serveur?
etc.
Nous lisons de gauche à droite, vous remarquerez donc d'abord l'utilisateur, puis seulement les rôles. Et comme il ne peut y avoir qu'un seul rôle par utilisateur, ils doivent tous être des boutons radio
J'ai trouvé la solution en utilisant le concept de segmentation iOS avec le statut de désactivation. Je pense que c'est visuellement compréhensible mais sert le but.
