Improve multiple sort UX
|Reported by:||Idan Gazit||Owned by:||nobody|
|Has patch:||no||Needs documentation:||no|
|Needs tests:||no||Patch needs improvement:||no|
#11868 added some really slick multiple sort functionality, but I feel like the UX could bear improvement. The current implementation feels a little alien compared to the UI conventions in the rest of the admin.
A lot of this is a matter of taste, but I have a concrete proposal for improvement based on some homework.
I experimented a bit with the OSX finder and Win7 explorer; it seems that there is no multiple sort functionality there of any kind. Each click on a column header makes that column the only sorting column. I made a small screencast showing this off: http://cl.ly/3B0Y0C1T3A2s0W3s0Q0X.
An interaction model for sorting based on column header clicks feels awkward and hard to understand. Filesystem explorers only have single-sort, and spreadsheets all seem to have a fancier interface for explicitly defining multicolumn sort priority and direction.
Here's what I propose.
What stays the same
- The URL scheme for expressing a desired sorting remains the same. The only thing I'd like to change here is chrome.
- Column headers will still display a directional arrow and an integer indicating priority.
- The column header cog + popover pane go away.
- The Filter sidebar becomes the "Filter & Sort" sidebar
- Multiple sort is controlled via the sidebar.
I've produced a rough sketch of these elements here: http://cl.ly/362x0s3a2G3y1U1W2D1V
Here's how it works
Clicking in the column headers will:
- clear any existing multiple sort
- make that column the primary sort
- toggle sort order if the clicked column is the current single-sort column.
The "Sort By" section of the sidebar displays a list of columns, with each entry displaying a small "x" link and an indicator of ascending/descending. Clicking on the "x" will remove that column from the sort, clicking on the up/down arrow will toggle sort direction for that column.
Below these items are two or three links: edit, clear, and (possibly) default.
- Edit: opens a popup or dialog for defining a sort order. More on this further down.
- Clear: removes all columns from the sort (e.g. back to sort by PK).
- Default: if an ordering is defined via ModelAdmin.ordering, then this link appears, and will reset the sort to whatever is defined in the admin.
Creating / Editing a sort
Every sort operation involves a pageload, as we aren't doing anything dynamic. We considered other approaches to building a sort, including fancy jQueryized approaches with drag'n'drop reordering of columns, but this would necessitate some confusing heuristics ("after drop complete, wait 5 seconds before triggering a pageload to make sure the user is finished with reordering.")
The best solution we came up with so far is a dedicated edit dialog or popover. When the user clicks on the "edit" link, the user is shown the edit dialog, pictured near the bottom of http://cl.ly/362x0s3a2G3y1U1W2D1V. This dialog consists of several rows, each denoting a column in the active sort, with a delete button, a direction indicator, and a drag handle for reordering. The user can drag and drop to reorder sort priority, or click on the direction indicator of each row to toggle direction.
Near the bottom is a dropdown which contains all of the columns which aren't yet in the sort, a toggle/dropdown for direction, and an add button. Users can add new columns to the sort by choosing a column and a direction and clicking *add*. No operations are taken until the dialog is closed, at which time a pageload is triggered for the new desired sorting.
Obviously, feedback appreciated.