Saturday, April 8, 2017

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


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?



Answer




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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...