11

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.
Improve this question
1

2 Answers 2

Reset to default
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.

Improve this answer
0

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

Improve this answer
3
  • 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, 2012 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, 2012 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, 2012 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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