Should I combine multiple User and Group management panels into a single screen?

Question

Currently I am developing a user and group management plugin for out application with ExtJs 4.1

This is my first version. I packed all into 1 window, each panel has its toolbar and user/group assignment is done via drag & drop.

I would like to know your opinion in case of usability. Is it good to put all in one window / arrange it like that?

Edit: At first, there are only the lists of "Users" and "Groups" presented. When clicking one of the records, the panels for details on user/group are shown. When deselecting or closing the tab, these panels are removed.

Answer 1

There may be a case for it if your target is power users who do little but use this form all day. If not, (which I suspect is the case) I would suggest you split the screens up.

Right now, they are fairly confusing, and I can't work out exactly what I would do in each one. It also seems unlikely that someone will need to edit each of these fields every time they want to make a change. So by presenting them like this, you are making your users think about many options that are unnecessary for what they want to do.

So I would start by breaking down common tasks into use cases, and then analysing them. From there you should consider grouping related actions that will commonly be used together. One that seems obvious at the moment is that half relate to groups and half to users. It is more likely that someone will think in terms of 'edit user' or 'edit group' rather than 'edit everything'.

One other point is that the way you have it now, it seems that it will be more prone to accidental errors, but that would need some testing to be sure.

Answer 2

If a user can be part of only one group, you should opt for a tree representation.

On the left side you present the tree, with groups at the first level and users at the second level. You can have drag'n'drop to move users from one group to another. You could even have nested groups, if that's something your application needs (with inheritance of rights for instance).

On the right side you present the view screen of the corresponding selected element, with an edit button to switch the view to edit mode.