it-swarm.com.de

Verwirrende Kontrollkästchen und Optionsfelder

Ich habe ein Problem beim Erstellen einer bestimmten Benutzeroberfläche für eine Website. Ich werde das Problem mit einer einfachen Website für eine Restaurantkette demonstrieren:

Kontext

die Website hat viele Benutzer und viele Restaurants. Jedem Restaurant sind bestimmte Benutzer zugeordnet, wobei der Benutzer entweder ein Manager, ein Koch oder ein Kellner sein kann.

der Kellner kann die Adressen der eingehenden Bestellungen sehen, der Koch kann den Inhalt der Bestellungen und sehen (was das Essen ist), und Der Manager kann beide Dinge sehen und kann die Rollen eines jeden Benutzers ändern.

Es kann nur einen Manager für jedes Restaurant geben, aber so viele Köche und Kellner wie gewünscht. So sieht die Benutzeroberfläche ab sofort aus:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Problem

Benutzer können jeweils nur eine Rolle haben, da jede Rolle alle Berechtigungen der vorherigen Rollen sowie eine neue Berechtigung besitzt. Daher kann niemand sowohl Kellner als auch Koch oder Koch und Manager usw. sein. Dies ist über die obige Benutzeroberfläche nicht sehr klar, da zwei Kontrollkästchen für denselben Benutzer oder sogar alle drei Rollen aktiviert werden können.

Frage

Wie machen Sie diese Idee durch die Benutzeroberfläche deutlich? 'die Idee', die es gibt, kann nur einen Manager für ein Restaurant geben, und jeder Benutzer kann nur einen haben Rolle.

Dies ist übrigens mein erster Beitrag hier, also hoffe ich, dass ich am richtigen Ort bin. Vielen Dank für die Antworten im Voraus!

BEARBEITEN: Es gibt höhere Rollen, die alle drei genannten Rollen frei ändern können.

Der letzte Fall ist das, was ich zu vermeiden versuche (Mary).

(Image .

70
H. Saleh

In einem solchen Szenario würde ich die Benutzeroberfläche so gestalten, dass sie die möglichen Zustände der Anwendung widerspiegelt. Sie können nur einen Manager haben, daher sollte es nur einen Ort geben, an dem Sie einen Manager auswählen können. Alle anderen können entweder ein Koch oder ein Server sein. Stellen Sie daher sich gegenseitig ausschließende UI-Widgets für diese Status bereit. Hier ist ein Beispiel:

(Mockup

In der Praxis möchten Sie es vielleicht etwas bewusster machen, die Rollen der Leute zu ändern, aber hoffentlich vermittelt dies zumindest die Idee.

Bearbeiten: Wie einige Kommentare erwähnt haben, gibt es Designprobleme mit diesem Modell, und ich empfehle keine direkte Implementierung davon. Bitte beachten Sie, dass das Modell nur zur Beantwortung der Frage des OP gedacht war und dass hier noch andere Gestaltungsprinzipien gelten.

Einige Übungen für den Leser umfassen:

  1. Beseitigen Sie Mehrdeutigkeiten, in denen die Rolle gerade ausgewählt ist
  2. Zeigen Sie die Informationen des Managers an (Telefon, E-Mail, ...).
  3. Machen Sie Datenänderungsvorgänge bewusster als nur das Ändern eines Dropdowns oder Umschaltens
122
Tristan Shelton

Da der Wechsel des aktuellen Managers eine Aktion ist, die die anderen Optionen ungültig macht, würde ich ihn auf eine Weise präsentieren, die klar kommuniziert, was passieren wird.

Kellner/Chef sind Radioknöpfe, daher kann immer nur einer von ihnen aktiv sein - und nur eine Person kann Manager sein und sonst nichts.

(Example For Manager with Button

106
Falco

Dies scheint eine Benutzergruppierungsaufgabe zu sein.

Beide Beispiele haben die Eigenschaft Nizza, dass Sie eine ähnliche Ansicht ausdrucken können, um sie in der Küche anzuzeigen. Sie haben auch keinen doppelten/redundanten Text von Cook/Waiter über die gesamte Benutzeroberfläche, daher denke ich, dass es einfacher ist zu lesen und zu verstehen, wer mit wem arbeitet.

Tag-Stil

Ähnlich wie Sie einer Stack Exchange-Frage Tags hinzufügen.

(enter image description here

Menüstil

Ich habe die Menübearbeitung WordPress] als Grundkonzept zur Simulation der Hierarchie verwendet.

(enter image description here

21
icc97

Verwenden Sie dies - Dies ist eine Ansicht mit höherer Rolle.

Nach Ansicht des Managers verfügt der Manager nicht über ein Kombinationsfeld für seine Rolle.
Die Ansicht der beiden anderen ist Klartext - keine Kombinationsfelder.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

13
DPS

Soweit ich sehe, sollten sie alle Optionsfelder sein (verwenden Sie einen besseren Abstand, um jeden Benutzer und die zugehörigen Optionsfelder zu unterteilen).
Die Frage in Ihrem Kopf sollte lauten:
Wer ist Alice? Ist sie eine (•) Managerin, eine () Köchin oder eine () Kellnerin?
Wer ist Bob? Ist er ein () Manager, ein (•) Koch oder ein () Kellner?
usw.

Wir lesen von links nach rechts, sodass Sie zuerst den Benutzer und erst dann die Rollen bemerken. Und da es nur eine Rolle pro Benutzer geben kann, sollten alle Optionsfelder sein

4
Armands

Ich kam auf die Lösung, indem ich das iOS-Segmentierungskonzept zusammen mit dem Deaktivierungsstatus verwendete. Ich denke, es ist visuell verständlich und erfüllt dennoch den Zweck.

(enter image description here

0
Vadivel