UI design with MINIMUM number of clicks

Question

Project : ASP.NET with C#

Client side : JavaScript and jQuery

Consider the scenario,

I have a number of user to use the software. I will classify them into different groups. Then, I would like to set permission for the following.

ADD new record, EDIT existing one, DELETE

So I am in dilemma, What will be the best UI so that a user can assign the permission to different users with MINIMUM number of clicks. I designed some screens

Design 1

Design 2

In Design 1, if i want to assign permission for 10 users with full permission, I should do 5 clicks per user. So total number of clicks are 50. :(. The end user will say NO to the design.

In Design 2, I will only need 10 + 3 + 1 = 14 click. Comparatively good :). What you think, folks. Will you please suggest any other designs ?

Answer 1

Option 1

The difficult-to-name tri-state checkbox tree:

The Group-level controls auto-change all contained users at once, potentially saving clicks and mental energy during bulk edits. The third state for the checkbox allows for the parent to be partially selected when some but not all kids are selected.

Some drawbacks to this approach:

• Tri-state checkboxes don't exist in native HTML
• Tri-state checkboxes are a little weird and non-conventional. Mac OS and Windows present them differently (Mac puts a kind of "-" over it, Windows a square).

Option 2

You could follow a similar but more flexible pattern - a fitered list with bulk edit:

Note that the filter could be any or a combo of:

• A simple text search
• A drop-down of Groups
• Date ranges of when User was created?
• {Whatever aspect of a User that is useful to you.}

This solution allows you to potentially slice and dice larger lists of users in a variety of ways to get to the list that is important to you in a given situation. The bulk edit means that if you've targeted your filter sufficiently, you can easily change all the targeted Users.

Answer 2

I say design number three.

Try something similar to the Google Plus Circles function. Have your three permission categories, Add, Edit and Delete as some kind of boxes if you want.

The users can be draggable elements. Select all elements that you want to assign to a certain permission category and drag them into the category box.

This requires the user to check all elements first and then drag them into the box.

Whereas this approach requires him to drop them one by one. So he he directly drags the desired element into the box.

As Kris pointed out I missed to provide a way to show in which category a user already is. This should be rather simple.

Have each element carry a flag which shows in which groups he already is. Such a flag can simply be the first character of the category. A, E and D in this case.

Answer 3

You should look at other permission setting UIs (choose your favorite OS as an example, then look at others for more ideas). Neither of the examples you've show match what I've seen anywhere else.

Also, if you're grouping the users, why not assign permissions to the group, instead of each user?

Answer 4

You can use multiselect listbox instead of dropdown in your first example to apply multiple users at a time.

Answer 5

You can get 11 or 4.

11) You could list users with checkboxes and use radio buttons for groups:

Add

Edit

Delete

Editor: Add, edit, delete

Autor: Add, edit

Submiter: Add, delete

Moderator: Edit, delete

(i made up these names, use yours)

4) Search capabilites could make user selection easier. If you have good search filters or textarea user list input you can get 4 clicks.

1. Input text or select item in list filter
2. Make search that select all users found
3. Group selection
4. Assign permission button.

Answer 6

This is a wild thought: Assign a number/key from the keyboard to each option, the user already knows how to use a keyboard, fast, it will be natural. Each state can be managed by just cycling the state with each key press. If you need more clarification please ask.