I am working on the admin component to a web app that will create/manage web sites for multiple clients. This admin portion will determine what pages/features will be included, as well as what controls (and their values and attributes) will be on each page.

The challenge: It will also set which pages/features are viewable and/or editable by each of the 4 end-user roles. My primary business user (who is also my boss) insists that the roles' permissions be assigned and displayed all on one page. I would like to hear thoughts on pros and cons of each of the following ideas, as well as improvements or completely different approaches.

Currently, I have it laid out in a grid where the 20+ possible pages are down the left and the 4 roles are across the top. Inside each cell is a dropdown with the 3 options: view, edit, none. This is functional, but when you look at the page the settings are not easily scanned (see shortened example below).

enter image description here

My original layout called for displaying one of three different icons (each of a distinct color) that could be changed by clicking on it and selecting a new option from a modal popup. The developers on the project shot that down based on complexity. (Indeed, they tried to kill this whole tangled mess, but as I mentioned, the primary user is our boss.)

enter image description here

My next thought is to find some way to color code each cell or each dropdown, based on what is selected.

enter image description here

-- OR --

enter image description here

2 Answers 2


I've struggled with these sorts of permissions matrices before. I've turned it on it's head in a business analytics app. I've made columns for each of the 3 levels of access. You can move an area from one column to another by using mouse-over arrow controls. There's a batch way to move all as well, but that's not represented in the mockup.


download bmml source – Wireframes created with Balsamiq Mockups

  • Nice idea. Its good to come at the problem from a different angle.
    – JonW
    Commented Jul 30, 2012 at 21:49
  • I just reviewed OPs diagrams again and noticed there's another dimension where you need to see a user role as well. In my app, you must click a role first, then it displays this matrix. This might take some more thought!!
    – drawtheweb
    Commented Jul 30, 2012 at 22:03

This is like a huge array of dropdowns, but if your boss wants it, let be it.

One way to reduce complexity is by having two options instead of three, and show them using checkboxes instead of dropdowns. None of the checkboxes selected would mean no permission, and since edit option includes view, selecting edit will have to auto-select view (and disable it).

Also, some of the pages on the left can be made inclusive of other pages. For example, you can not change password without logging in. There could be other such scenarios.

I seriously hope this is just a trick question your boss has created for you.

  • +1 Checkboxes is exactly what Windows for example uses when setting file access rights. If you check a "higher" right all the "lower" ones are automatically checked as well. Commented Jul 31, 2012 at 5:37
  • If I read this right, you are talking about 2 checkboxes in each cell (edit and view). I feel like that will be just as visually cluttered as the dropdowns. Unfortunately, I cannot combine pages as one of the requirements is for the business user to see them all in one place.
    – ph33nyx
    Commented Aug 2, 2012 at 14:27

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.