19

For a part of configuration, we need to allow the user to get a quick overview AND the ability to quickly set user-groups and their permissions, from both directions.

Meaning:

  • The user should be able to click on a user group and set/view which permissions this group has.
  • The user should be able to click on a permission and set/view which groups have this permission

For our proof-of-concept, we quickly made the following screens for this:

Groups to Rights

Simply explained, we have a list of groups on the left and a list of permissions that the user can turn on or off for the selected group.

In the screen above, we can see that GROUP 2 has Permissions 2, 4 & 5.

There's a big "SWITCH" button in the middle of the two columns where the view can be switched around.

Rights to Groups

Now the user can click on a permission and see which groups have this permission enabled.

In the screen above we can see that PERMISSION 5 has been assigned to Group 1 & 2


This was good enough for our PoC, but now we need to come up with a more visual pleasing and user-friendly way of configuring this, and I was looking for decent patterns, but i couldn't really find anything that would fulfill the feature-requirement.

4
  • 3
    Has this need for setting permissions from "both directions" risen from user research? To me it seems highly error prone when compared to efficiency gains it might yield. Oct 24, 2022 at 12:40
  • 1
    Permissions are in this example used to simplify the problem, as in the real case, both groups and the "permissions" can range into 100-200+ entries. From user research we mainly concluded that some would like to configure from the perspective from the groups (which permissions they have) and others from the permissions (on which groups they apply). So we came up with this
    – DennisW
    Oct 24, 2022 at 15:44
  • 1
    There's no reason to Switch sides. The right or left has no inherent meaning. Switch buttons are for moving things from one group to another, not moving controls around on a surface -- there is no metaphor that makes sense for what you are proposing.
    – user8356
    Oct 25, 2022 at 18:48
  • 1
    Why not change both title and exposition to use better wording? Oct 25, 2022 at 20:00

3 Answers 3

24

If the number of groups or permissions are relatively few (say 12 or less), you can arrange this information as a matrix.

Permissions by group matrix

Now the user can see groups for each permission and permissions for each group without any clicking at all.

If there are a lot of both groups and permissions, then your design is pretty good. As you say, there really is no well-known pattern for this, which means your users are also unlikely to be familiar with it. Thus, the main challenge is making it clear what happens. The “switch” label may be confusing since if might be interpreted as “switching” a single permission of a given group (especially when you’re using “switch” controls). I’d spell out exactly what the control does.

You could present it as alternative views:

Radio buttons at top to select view by permissions or groups

That is especially suitable if you’re showing a lot of other information (e.g., columns or fields) about each group or permission (omitted from the example above).

If it’s just a page of group names and permissions, you can have a “switching” control for each row so users can simultaneously switch views and select the permission/group they want to see groups/permissions of:

Show Permissions button for each group row

That's particularly handy if users tend to switch frequently among the views in a single session, getting different perspectives of a given group or permission.

2
  • Thank you for the answer. I used "permissions" to simplify my example. In reality it's a bit more complex since they are user-defined. Meaning that we can indeed have a use-case where a user has 100-200+ entries for both groups and the "permissions" they can have. This is also why some people would prefer to apply permissions to the groups, and others the other way around.
    – DennisW
    Oct 24, 2022 at 15:48
  • You could add sorting and filtering of columns or rows, but even if you choose a different presentation due to the size of the matrix, it's important to keep in mind that the underlying model is a binary matrix (or at least equivalent to one). Jenkins has a matrix-based security interface exactly like this: thegeekstuff.com/2016/06/jenkins-security Oct 25, 2022 at 17:26
17

I would use tabbed container in your situation.

One tab to see settings per group and another one to see them by permission; of course with clear titles of the tabs.

Switching between tabs is a natural behaviour in other tools too, will not be strange for users like reorganization of screen due to button press.

enter image description here

9

I don't think the switch button is necessary, it's confusing at the user level that the items change position from left to right. The most immediate solution is to activate each column by clicking on the header.

A more elaborate option is to allow column activation by clicking on any item and then allow individual selection with a second click.

enter image description here

8
  • 8
    Love the clear animated example. Thanks for that. My only issue with this approach is that the interaction is hidden behind a second click and I wonder if someone would understand this without any explanation (which we of course can add)
    – DennisW
    Oct 24, 2022 at 15:51
  • 2
    @DennisW I love this idea, but if the second click is concerning, just make the left 75% or so the selector the filter activate the opposing actions, while the slider itself toggles the option. Add a small divider between the label and slider to make it clear they do different things.
    – phyrfox
    Oct 24, 2022 at 23:21
  • Hey @Danielillo, I love your example. Can you share what tool you used to create the animation? really apreciate it
    – Jorge
    Oct 25, 2022 at 11:28
  • 4
    I don't quite understand how are you supposed to change anything when clicking in the area switches the view. This looks confusing to me and I'd be strugling to figure out what is going on. Oct 26, 2022 at 11:33
  • 2
    @TomášZato: You're supposed to click on the switch itself. But some users have the ingrained habit of clicking the label rather than the switch, so that might be a problem.
    – Kevin
    Oct 26, 2022 at 22:45

Your Answer

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

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