71

I have a problem building a certain UI for a website. I'm going to demonstrate the problem with a simple website for a restaurant chain:

Context

the website has many users and many restaurants. Each restaurant has certain users assigned to it, where the user could be either a manager, a cook or a waiter.

the waiter can see the addresses of the orders that come in, the cook can see that and the content of the orders (what the food is), and the manager can see both these things and can change the roles of any user.

There can only be one manager for every restaurant, but as many cooks and waiters as desired. Here's how the UI looks like as of now:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Problem

Users can only have one role each, since every role has all the privileges of the previous roles plus a new privilege. So no one can be both a waiter and a cook, or a cook and a manager etc. That isn't very clear using the UI above, since one could check two checkboxes for the same user, or even all three roles.

Question

How do you you make this idea clear through the UI? 'the idea' being the there can only be one manager for a restaurant, and every user can have only one role.

This is my first post here by the way, so I hope I'm in the right place. Thanks for responses in advance!

EDIT: There are higher roles that can change all three mentioned roles freely.

The last case is what I'm trying to avoid (Mary).

Image.

Improve this question
6
  • 2
    Who sees the screen that you posted? Is it 'admin', 'manager','cook' or 'waiter'? I think the UI could be further simplified based on each role.
    – Ades
    Commented Sep 26, 2017 at 7:04
  • Actually both manager and cook, which doesn't make sense in this example, but in the real world case, both roles have the same privileges, so the accepted answer is already perfect (the real role that corresponds to 'waiter' can't access the screen I posted or change roles at all). Thanks for the reply though.
    – HL.
    Commented Sep 26, 2017 at 7:14
  • 1
    Right now, your permissions are entirely hierarchical... but I wouldn't assume that's always going to be the case. Some of your waiters are under 18/21 and can't serve alcohol. Waiters will need authorization to use the credit card machine, but cooks won't. Maybe later you'll add some sort of weird sushi counter where the cook does need to be able to use the card machine, but you still don't trust your other cooks with it. Permissions can be a huge rabbit hole, but in general you want as much granularity as you can get - typically a boolean yes/no for individual permissions.
    – Tin Wizard
    Commented Sep 26, 2017 at 20:33
  • 1
    Of course, for convenience reasons, you'll often also have a "role" system of some sort, to be able to give someone "all the standard waiter permissions" with one click, etc.
    – Tin Wizard
    Commented Sep 26, 2017 at 20:35
  • Since every role excludes itself just have a choicebox for each user?
    – BlueWizard
    Commented Sep 27, 2017 at 5:08

6 Answers 6

Reset to default
123

In a scenario like this I would make the UI reflect the possible states of the application. You can only have one manager so there should only be one place to select a manager, everyone else can either be a cook or a server, so provide mutually exclusive UI widgets for those states. Here's an example:

Mockup

In practice you might want to make it a little more deliberate to change people's roles, but hopefully that at least conveys the idea.

Edit: As some comments have mentioned that there are design problems with this mockup, and I don't recommend a direct implementation of it. Please be aware that the mockup was only meant to answer the OP's question and that other design principles still apply here.

Some exercises for the reader include:

  1. Eliminate ambiguity in which role is currently selected
  2. Display the manager's information (phone, email, ...)
  3. Make data changing operations more deliberate than simply changing a dropdown or toggle
Improve this answer
10
  • 97
    I have seen this widget a few times and the first thing we did after few usability tests and a small chat with technical support guys has been to... nuke them from the orbit. Even if, in theory, color should make clear which one is selected then at least half users (of our samples + customers) were NOT SURE about which state is on and which state is off. Not to mention color blind people. Definitely a no-no for me, if you really need to use color it should be a PLUS, not the only medium to communicate this information
    – Adriano Repetti
    Commented Sep 26, 2017 at 7:57
  • 12
    @AdrianoRepetti Not to mention that colour-only representations break WCAG, if that's something you care about. An alternative or addition, ironically, might be a check mark next to the selected role. But the principle of separating the manager out is still valid.
    – Dan
    Commented Sep 26, 2017 at 12:10
  • 13
    With this layout, you don't see the contact information for the manager at all. As a manager, I'd want to make sure my contact info is readily available.
    – Jason Towne
    Commented Sep 26, 2017 at 14:42
  • 9
    Replacing the Cook/Server toggle with a dropdown would clear up any confusion over which is the active state, and also easily accommodate any role additions later on (e.g. what happens when they add a Washer role?).
    – Pixel Elephant
    Commented Sep 26, 2017 at 15:26
  • 4
    When you change manager on this view, you'll have to re-render the whole table, all the rows will move, and a new row will appear, which the user needs to interact with. e.g. if I change John to be the manager, Alice needs to appear as a row in the table, and the user needs to select her role. And if I do it by mistake, can I get John's old role back? Will I know if I have done so? -1 from me.
    – IMSoP
    Commented Sep 26, 2017 at 16:17
106

Since the change of current Manager is an action invalidating the other options - I would present it in a manner which communicates clear what is about to happen.

Waiter/Chef are Radio-Buttons, so only one of them can be active at a time - and only one person can be manager and nothing else.

Example For Manager with Button

Improve this answer
6
  • 3
    Very nice suggestion! The separation of (Manager) from (Waiter and Chef) makes a lot clearer!
    – HL.
    Commented Sep 25, 2017 at 16:13
  • 1
    And you can still combine it with nicer Radio-Buttons, maybe with little icons and grouped closer together - the important part is the clear action "replace manager" - following the rule: If a user action is special enough that no usual icon describes it adequately, write it out for them!
    – Falco
    Commented Sep 25, 2017 at 16:17
  • 2
    Actually I found moving the Manager role out to be cleaner. I feel that adding it on every row would clutter the UI a little more than a simple dropdown at the top. Still both are smart and practical.
    – HL.
    Commented Sep 26, 2017 at 7:06
  • 1
    All I see is Mikey, Johnny, Sarah and Lisa in line to "Replace Manager". Can't be comfortable for Bobby Bob.
    – Elise van Looij
    Commented Sep 28, 2017 at 17:44
  • 1
    If there could be multiple managers one day with the same hierarchy level, Falco's model here will be easily extensible (making the manager button a toggle button; defaulting to an unassigned state when unticking it & needing to assign all users to complete form, probably). But if not, move the option out like OP suggests.
    – kettlecrab
    Commented Oct 2, 2017 at 5:33
21

This seems like a user grouping task.

Both of these examples have the nice property that you can print out a similar view to display in the kitchen. You also don't have any duplicated / redundant text of Cook / Waiter over the whole UI, so I think it's easier to read and understand who is working with who.

Tag style

Similar to how you add tags to a Stack Exchange question.

enter image description here

Menu style

I took the WordPress menu editing as a base concept to simulate hierarchy.

enter image description here

Improve this answer
0
13

Use this - This is a higher role view.

In manager's view, the manager won't have a combo-box for his/her role.
The view of other two will be plain text - no combo-boxes.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
5
  • 5
    Very nice suggestion, I would up vote it if I had the reputation. Although one problem remains: that it's not visually clear that there can only be one manager, which it was in the original view. Still the best suggestion though, thanks.
    – HL.
    Commented Sep 25, 2017 at 11:22
  • @H.Saleh You can do that by removing the Manager option from the list when a manager role is selected for one employee.
    – Dipak
    Commented Sep 25, 2017 at 12:48
  • 2
    I like this solution, but it's not as clear at a glance how many waiters and cooks you have as in the original question.
    – Ken Mohnkern
    Commented Sep 25, 2017 at 12:50
  • 2
    But how can you switch the manager role between employees then?
    – HL.
    Commented Sep 26, 2017 at 7:07
  • 3
    I think it's difficult to quickly change the manager role in this view.
    – NVZ
    Commented Sep 26, 2017 at 12:39
4

From what I see they all should be radio buttons (use better spacing to divide the each user and associated radio buttons).
The question, in your head, should be:
Who is Alice? Is she a (•)Manager, a ()Cook or a ()Waiter?
Who is Bob? Is he a ()Manager, a (•)Cook or a ()Waiter?
etc.

We read from left to right, so you first notice the user and only then the roles. And as there can be only one role per user, then they all should be radio buttons

Improve this answer
6
  • 1
    But how do you convey that there should only be one manager? Or how do you disallow picking two users as managers?
    – HL.
    Commented Sep 25, 2017 at 9:40
  • Is explanatory text an option? For example "Please note: Each user can be assigned to only one role. There can be only one manager." The second question is, why would people pick more than one manager? There must be a reason. Many restaurants I've visited have more than one manager. It's necessary for giving people days off, but to also always have a manager in the restaurant
    – Armands
    Commented Sep 25, 2017 at 9:55
  • The text is definitely an option, but i was hoping for a better visual way :) Now about the whole restaurant thing, it was just an example to clear the idea :) The actual case i'm working with includes company property that needs to be maintained. So there are people who watch over these assets (the 'waiters' in my example) and they report to their officials about errors/malfunctions. There are many officials, but there's also a "Main official" whose name is associated with the asset, so that's where the 'Cooks' and 'Manager' come from.
    – HL.
    Commented Sep 25, 2017 at 10:06
  • I would imagine that the administrator knows that there can be only one manager, so you might not need to programmatically constrain that. (Might there be situations where you'll have two managers, each doing a half shift? Making your constraints too strict can make the system unusable in the real world.)
    – Ken Mohnkern
    Commented Sep 25, 2017 at 12:54
  • Unfortunately that's what the client asked for :) I also forgot to mention a minor detail, that the 'Cooks' can also assign users and managers. Of course it doesn't make any sense in this context, but in the asset context, both 'cooks' and 'managers' correspond to Administrators. The 'manager' is simply the main name associated with the asset, in case of an Excel export for example. So no, the solution still doesn't apply, but again, thanks for the suggestion :)
    – HL.
    Commented Sep 25, 2017 at 16:11
0

I came up with the solution by using iOS segmentation concept along with disable status. I think it is visually understandable yet serves the purpose.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.