Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.
share|improve this question
    
Edit1. I followed the link that @Michael sent and found a related control from DHTMLX called Tree Grid. It appears to do most of what my client requires. It's here: dhtmlx.com/docs/products/dhtmlxTreeGrid/index.shtml. –  PJSherman Jun 1 '12 at 15:50

2 Answers 2

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

enter image description here

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.

share|improve this answer

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 :-)

share|improve this answer
    
Thanks for the info Michael. I am leaning in this direction, even though I have concerns about the accessibility of drag-and-drop only interactions. I could specify a context menu as an alternate, non-drag/drop method of assignment, but I'm loathe to override the browser's native context menus...hmmm...maybe the context menu could be invoked with a primary tap/click... –  PJSherman Jun 1 '12 at 15:36
    
A non-js version could use default web forms with the tree view of the groups inside a select box. You can make it a multiple selection if a user can be assigned to more than one group. –  Michael Jun 1 '12 at 15:40
2  
@PJSherman I would also be wary of drag and drop approaches if you're planning on going to the tablet, like you mentioned, at some point. Drag and drop doesn't work really at all in a browser on a touch screen. –  GotDibbs Jun 1 '12 at 15:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.