We're looking at a reusable interface that can allow user to view tabular data with hierarchical structure and reorganize/re-order items.
Some use cases for this:
- Updating priority of work on a schedule. Work may be grouped together in subunits. As a project manager, I want the ability to re-prioritize subunits of work so my team picks up the highest priority items off the top of the list.
- Re-ordering items to present info to the stakeholders in a logical fashion. As a account manager, when I have financial update meetings with project stakeholders, I want the ability to reorganize the work list based on its importance to a specific stakeholder so I can more easily provide them with project updates.
Here's one sample view of one list (tabular view of a project schedule)
Note: this is just one view, the hierarchical structure to the left is fairly consistent across different use cases, but the data on the right varies. I don't think it matters for our problem.
Because this is a web app, there's a certain expectation from the users that they ought to be able to reorder items using drag and drop interactions. However, drag and drop doesn't work very well for large lists because you need to deal with the page scrolling AND the drag and drop action.
Because of the way our hierarchical lists are set up (items can only be moved within their respective groups), we have the option of collapsing the group to reduce the annoyance caused by page scrolling, but should we be doing so?
To state this clearly:
Should the system automatically collapse the groups to hide subitems as soon as the user starts dragging on the group header to facilitate reordering?
download bmml source – Wireframes created with Balsamiq Mockups
I'm a bit concern with the possibility of page jumping if the user is dragging on a group in the middle of the list and several large groups at the top suddenly collapses on them.
Note: I'm not tied to drag and drop behaviour at all. This is just something the users are familiar with. So feel free to suggest alternate ways of visually re-ordering potentially large lists.