Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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?

share|improve this question
    
Consider adding illustrations and tiling the options to make them more interesting. Many people will not bother when they see a big mass of text - once you add in your text descriptions it's only going to deter more users from reading everything. –  sscirrus Jul 3 '12 at 7:03
    
If your list grows longer, considder adding a filter/search box that will search on all words in both the name and the description and filters back the list accordingly. Grouping the selected items on top will make it easy to spot the already selected items. –  André Jul 3 '12 at 7:42
    
To answer your final question, if at all possible, you should sort the list by popularity (number of users with the selected role). Some questions, though: Are the role names familiar to users (i.e. will they know what they're looking for before they go to the list, or will they have to read potentially every item to know)? Is there any sort of implicit/logical ordering of the roles? How many roles are you expecting users to select per person? –  Kit Grose Jul 4 '12 at 3:44
    
@KitGrose: The role name will probably not be familiar besides the most popular ones if we have say 100 roles. There is no implicit ordering of the roles at all. I am expecting about 6 to 7 roles per person, but I am building with the assumption that a user will have any from 1 (just a member role) to an infinite number of roles. By grouping by popularity, doesn't that make it harder to scan the list if we want to look for a specific role? –  F21 Jul 4 '12 at 3:57
1  
@phpdev: but if the role names aren't familiar why go looking for a specific one? The alternative is a special "most popular roles" section (say the top 5 or 10) and then anything else is listed alphabetically. Last alternative is to vary the size based on popularity like a tag cloud, but that may look dated nowadays. –  Kit Grose Jul 4 '12 at 4:28

6 Answers 6

up vote 12 down vote accepted

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.

mockup

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).

enter image description here

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

Facebook icon library

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: Balsamiq icon library

share|improve this answer
1  
Upvote for your point "Do the descriptions need to be present at all times". Good suggestion (Also I like all the little icons too, but I can't really upvote just for that!) –  JonW Jul 3 '12 at 11:16
1  
+1 for "This is a Role to create lightening for the team" –  Joe Masilotti Jul 3 '12 at 16:59
1  
@Ganga: The question might not ask for something specifically. Good UX is always thinking outside the box, especially when you see something that the OP has missed. –  dnbrv Jul 3 '12 at 17:49
1  
@Ganga agree that you may not need groups... just depends on the context and how many we are talking about. Agree about ratio of gain to effort ... sometimes find brainstorming around the extremes of a problem brings new perspectives... the actually solution would have to pick and choose what is practical. –  Lisa Tweedie Jul 3 '12 at 18:04
1  
To make a long list of <whatever> managable, searching is the key, I think. You can also see it in the icon selection dialog of Balsamiq you posted above: the list is trimmed down using a search box. You can combine that just fine with categories (again: like Balsamiq does as well). –  André Jul 4 '12 at 8:13

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:

The dialog

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

The same dialog in a different state

Real-world example.

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

NetBeans dialog

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.

share|improve this answer
    
I'm sorry, but while you're right that not every user is aware on how to make multiple selections in a list, the same is not true for lists with checkboxes. These are very clear for users. –  André Jul 3 '12 at 7:40
3  
Yes, but if you read the question carefully, it was mentioned that check boxes become a problem if there are 10+ roles. So the author was looking for alternatives which I presented. –  SkyDan Jul 3 '12 at 7:49
    
This seems like a goood solution, but I need to display the description and role name together. I don't think i could fit that in an item in one of the lists. Have you got a possible solution for that? –  F21 Jul 3 '12 at 8:33
    
I mentioned it in the last sentence. The image of NetBeans IDE dialog which I posted actually shows an example of what I am talking about -- using text area underneath to show description of a selected item. –  SkyDan Jul 3 '12 at 10:32
2  
@Lisa Slight colorcoding and showing description of a role, when the mouse is over it, will make it quite connected. –  SkyDan Jul 3 '12 at 17:37

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.

share|improve this answer

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
I guess grouping them is an improvement... but I am not sure that I would put them on seperate tabs.... annoying to have to click through. I would prefer a single scrollable list... –  Lisa Tweedie Jul 3 '12 at 15:58
    
@LisaTweedie: The main advantage of tabs is that the person who's doing assignments can see all groups at once. –  dnbrv Jul 3 '12 at 16:38
    
See my update above... you don't need to add hierarchy to group things - keep it flat if at all possible. Although I take your point that all the headers are grouped together in this solution. –  Lisa Tweedie Jul 3 '12 at 16:48
    
+1 for the enhanced descriptions in the assigned roles and the grouping. –  Lisa Tweedie Jul 3 '12 at 17:26

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

mockup

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.

share|improve this answer
    
With the dozens of options that OP has mentioned, this approach will be even harder to use than a regular "endless" list of checkboxes. –  dnbrv Jul 3 '12 at 14:46
    
I made a modification to the expanded behavior to better suit a very long list. With this I believe it's functionality would be preferable to just having a really long section on a page. –  Matt Lavoie Jul 3 '12 at 14:59
    
Nope don't buy it ... not for a long list. –  Lisa Tweedie Jul 3 '12 at 15:59
1  
I could see it working very well for a dozen or so roles. I feel like once you get beyond that maybe there is a bigger information architecture problem that should really be what needs to be addressed. Obviously I don't know the exact context so I cant say for sure, but If these roles are being used to manage security and permissions having so many roles could potentially cause a very difficult experience for users regardless of the method of display. –  Matt Lavoie Jul 3 '12 at 16:14
    
This question covers it for me... ux.stackexchange.com/q/1718/15475 –  Lisa Tweedie Jul 3 '12 at 19:04

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

share|improve this answer
    
Can you go into more detail? How would the tabs be used? How many of the basic roles to display? And in what format? (radio buttons still?) also (more importantly) why is your suggestion useful? You need to back up your suggestions with explanations and reasoning for your answer to be really useful. –  JonW Jul 4 '12 at 18:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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