What do you do when you have too many choices in a checkbox field set?

Question

I have an interface for managing a user's roles in an interface for managing accounts in a web application.

The roles are basically roles in the Role-Based Access Control - (RBAC) context.

Specifications:

• Users can have multiple roles or none at all.
• All users regardless of whether they have any roles or none at all will always have a default "member" role. Membership in this "member" role cannot be removed and always "sticks" to every user account.

Considering this, it seems that a checkbox group would be the most suitable control:

^{download bmml source – Wireframes created with Balsamiq Mockups}

However, I have only got 6 roles + the default member role in there and the field set is already looking a bit long. Get up to 12 to 14 roles and the thing will become quite unusable.

Are there any alternatives or other controls I can use instead of having a very long field set? In the above mockup, the field set would be almost impossible to use if there are 100 roles in the system.

The requirements are that:

• I need to be able to display the role name and description.
• Users can have multiple roles.
• It should not take a lot of effort to add or remove a role for a user.
• The user should be able to see ALL the roles. While the "tags" functionalilty of StackExchange works well, in this case, it can be hard to "guess" the name of a role to start the autocomplete process.

---

Some clarification regarding groups:

Currently, the process to create a role is quite friction less: The user simply gives the role a name, an optional description and sets the permissions by ticking some checkboxes.

There is no sense of departments, or groups or anything like that. Roles created tend to not be specific to any departments or groups and tend to be quite general: 2 people working in different departments could have the same role.

Under these circumstances, are there other ways to do grouping? Or should we just present the roles as a list sorted alphabetically?

Answer 1

For me there are three things I would do to simplify this design.

1) I think you should remove the Member role from the list of roles. Users cannot change this so it should not be part of the group. Instead it can be listed together with all the other selected roles else where (possibly with an descriptive title e.g. default role, or base role or some such). You might even consider whether you have to display this role at all. Yes the system needs to know about it but does it have to be part of the users mental model?

2) Do the descriptions need to be present at all times? Once people know what a role is for they really no longer need the descriptions. Could they not just show up in a pop up on rollover/hover or click. Alternatively they could show up in an adjacent text area but this is not as connected so probably a less ideal solution. Removing the descriptions would save you considerable space and also allow you to group the checkboxes if the list gets lengthy.

3) I quite like the idea of adding icons/illustrations to the list... would certainly make the roles more memorable for users over time.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You might also allow users to delete the roles from the upper window. Like you can delete tags in many UI's these days.

UPDATE

Grouping as suggested by dnbrv's answer is also a good way to go. However my preference would be for a flat style of grouping (rather than tabs) - if the list gets too long you can use a scroll.

Color is useful to emphasize groups (can be carried through to the tag's in the upper section).

You can allow users to select their own icons via icons libraries. For instance Facebook has one like this:

Balsamiq also allows you to pick icons from a library and then select the color. It also allows you to select a size which is often useful for emphasis:

Answer 2

Basic solution.

Guidelines for Enterprise-Wide GUI Design recommends to use a selection list in such circumstances. You can show 5-6 roles and put scroll bar to enable viewing the rest. This way the user can figure out the contents of the list and then use scroll bar to see them all and choose needed. It also give you flexibility because it's easier to add/remove roles from a list than check boxes from a panel.

Making it even more better.

List have disadvantages of not being able to see already selected items easily enough. More over, selecting is a bit hard operation: the user might not be aware of the button to hold in order to select several items. The solution would be to have 2 lists. One shows roles available, another shows roles selected. User can either drag-n-drop or use buttons to operate. Here is how it looks like:

Then if user the selects role(s) and presses add, it looks like that:

Real-world example.

This solution is actually used quite often in desktop applications. Here is a screenshot from NetBeans, which is a popular IDE:

The screenshot also features disabled items to make it clear to user that some items can not be added/removed. You can use the same concept for your "Member" role. The buttons also reflect the selection state. For example, if no item in Available Tables list is selected the Add button is disabled, and so on. You can use the text area on the bottom to show the role's description, as you mentioned.

Answer 3

My solution is more of a combination of the previous answers as all of them have good points but none nail it on the head.

Checkboxes aren't the problem. The problem is in the number of choices, and it is solved easily with taxonomy. You should organize the roles into groups by department, job function, uniforms, or whatever else makes sense for the person who assigns the roles to find what is needed easily.

Once the groups are finalized, simply convert them into tabs of checkboxes. You should also display the already-assigned roles (with a "delete"/"unassign" control) above the list to make it easy to see the status. On mouse hovering over a role in the assigned list, a tooltip should appear with at least the group name, and if there's sufficient space also with the role description. On mouse hovering over a role in the list of all roles, a tooltip should appear with the description of that role.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

I would consider three approaches, if the list is liable to expand to 100+ entries.

1. Listbox with checkboxes. This would cater for quite a significant number more than standard checkboxes.

2. Grouping roles, so that selecting "DBO", for example, would automatically select the roles that make this up.

3. An expansion on this, but define a set of role types, and allow selection from these (only). Also allow definition of new role types, probably using the 2 lists of @Ganga. Extend this by allowing the user to say "the same role/s as xxx".

You need to consider how people will use this. If there are 100 roles, very few people will want to have to select through all of them. It does not make sense - most of the time, they want to set someone up as an xxx, or like yyy. So allow them to do things in this way, while still giving the functionality or allowing any combination of roles.

And at the implementation level, none of these options makes any difference. In all cases, all you do is assign roles to users. It is just about how these are selected.

Answer 5

I have always had success with combo boxes. Basically you get a drop down where items in the drop down have check boxes.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Whenever the drop down is collapsed you can see what you have selected, and whenever it is expanded you can type in it to quickly seek to any of the options you have to select. And it also doesn't take up very much room.

EDIT changed the expanded behavior description so it could better suit a very large list.

Answer 6

You could show the basic roles, such as member, etc, and then have a "more" button that shows the rest. A tabbed interface would also be helpful