Interaction pattern for creating/editing organization hierarchy; assigning people to groups in hierarchy

Question

I'm looking for an Interaction pattern for creating/editing organization hierarchy and assigning people to groups in the hierarchy. For example, the app's users will need to define a hierarchical organization by, say, geographic area and then groups within the top-level geo areas.

These groups can in turn have sub-groups. Users can be assigned to the lowest-level groups, designated as "managers" of lowest-level groups, or designated as higher-level supervisors of one or many managers (and all their reports).

I've evaluated several different interaction patterns, but haven't yet identified one that I'm satisfied with.

Some additional details:

• It's a web app; delivered via desktop browser (possible tablet browser use scenarios in the future).
• The technology team is using Google Web Toolkit (GWT) for the presentation layer, but are fine with any open-source presentation layer technology. That is, 3rd-party for-pay controls for the ASPX platform are a non-starter, but jQueryUI is OK.

Answer 1

Org charts are almost always displayed top-to-bottom, as opposed to left-to-right:

This is obviously more complicated from a technical standpoint, but probably offers the best user experience.

I would try sketching some ideas where you start with a blank top level, and leaving a "blank" branch at each level with an "Add" button.

If you're planning to go to tablet, definitely avoid drag and drop, as mentioned by others. Try to stay to single clicks/touches.

Answer 2

Assigning users to groups is done pretty nice by Google+ with their circles and drag and drop interaction. So you could display you groups hierarchically and make them drop targets for your users. Maybe checkboxes at the user representation object can be used to enable/disable the manager and supervisor feature.

The "group tree" may also be organized with drag and drop pattern, so you can easily reorganize the tree structure.

This example is not using users and groups, but files and folders, but it may help to visualize the idea :-)

Answer 3

If I understand your problem correct, you need to assign users or groups as managers at a particular hierarchical level. I would suggest a hierarchy that have the term displayed on top and users at the bottom.

The term itself can be edited through a link on the term, and the users via an edit link where you can use a people picker to select users. Down the hierarchy I would provide a default view to show the users or groups who has been assign at that level in the hierarchy. If the user wants to see who has access on this level she would have to use the more link to expand the user list. There I would show all inherited users in gray, since they shouldn't be added/removed there.

The reason for this constraint is to minimize access errors, and making it sustainable and manageable in the long run. Otherwise there is always a risk of broken inheritance which can be very hard to track and edit. This is however optional - since you know the amount of elements and users who will be part of your final product.

^{download bmml source – Wireframes created with Balsamiq Mockups}