I am developing an app for managing user permissions and roles etc. I have one screen where you can explicitly allow or disallow user some action, but I cannot decide how to design that page.

My currently implemented idea is this 3 tables

You have available actions on the left and you can either allow something using the check button (it will appear in assigned permits) od disallow with the cross button (it will appear in assigned forbids). And then you can cancel it with the "unassign" button in those right tables.

Mobile version has all 3 tables separated in tabs and you have to switch between them.

I've got one more suggestion to make only one table and when you permit something, it will for example turn green or something and forbid will turn red.

Something like this another idea

It would have either two buttons (when it is currently assigned and you click it again, you unassign it completely) or three buttons (with the middle one for unassigning).

What do you think? Or do you have any other idea?

  • Can you add some more detail on the use case? For example, how many potential permissions are in the list on the left? How many permits and forbids to you expect typically and maximally in the lists on the right? Oct 17, 2021 at 6:50

1 Answer 1


You can extensively simplify your UI by using switches and checkboxes instead of your current interface. That way you would be able to accomplish your objective in a single window instead of having to use three different windows.

Here's how you can achieve the said objective:

The two state approach (permission granted and permission denied only) is naturally simpler and easier to understand as it borrows from analogous experiences users would be ideally familiar with, say mobile phone settings etc.

Default State

In your default state, you can either set all permissions to denied, or set certain permissions to granted and the rest to denied depending on your requirement.

UI for setting user permissions

Filter Selections

You can filter the actions based on their status using the dropdown next to the checkbox.

UI for filtering the permitted actions

Filtered Actions

Once filtered, you can trigger bulk actions via an actions pane (not shown here), as required.

Filtered Actions based on the filtering context menu


In order to accommodate permissions for both roles and users, you can extend the above solution as follows:

  1. Define a sidebar/navigation pane for the user to select whether they wish to manage user permissions or role permissions.

UI Component to allow the user to navigate to manage role permissions or user permissions

  1. If the user chooses role permissions, the user would be greeted with a searchable accordion list of roles. Expanding each of the accordion items would reveal a table with permissions related to the role that can be manipulated as detailed above.

User interface block to manage permissions at role level

  1. Similarly, if the user chooses user permissions, they would be shown a section that contains a searchable accordion list of users, which would work in a similar fashion as roles.

User interface block to manage permissions at user level

I hope this solution works for you. Let me know otherwise if this solution still has unresolved challenges.

  • Thank you! Although this looks good, I need those 3 states. In my app users have roles and optionally direct permissions. User can have role e.g. management, which has permissions like attendance:read, attendance:create, warehouse:read... and then I can forbid some actions for specific user without the need to create separate role for that. So user Tom can have role management and Joe can have also management but with forbidden warehouse:read. Can you understand what I mean, did I explain it well?
    – TheSpixxyQ
    Oct 5, 2021 at 19:51
  • So if I understand this right, the roles have pre-defined global permissions. And you wish to further refine the permissions for each user if needed. Correct?
    – ikartik90
    Oct 6, 2021 at 9:29
  • Yes, that's right. I can assign single role to X users but then somebody decides "John shouldn't do this", so instead of creating whole new role I just override that single permission for him.
    – TheSpixxyQ
    Oct 6, 2021 at 12:08
  • While I hope I am not seeming to push my solution towards you, I believe that should be easily possible by extending the above proposed solution. Lemme update the answer and hit you up here again.
    – ikartik90
    Oct 7, 2021 at 13:27
  • 1
    This looks great! I would've used tables for everything (since it's the simplest to think of), but your ideas helped me to get another ideas for the rest of my UI too, so thank you so much for this and for your time.
    – TheSpixxyQ
    Oct 7, 2021 at 14:26

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.