id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
16212	Improve multiple sort UX	Idan Gazit	nobody	"#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 ==

1. The URL scheme for expressing a desired sorting remains the same. The only thing I'd like to change here is chrome.
2. Column headers will still display a directional arrow and an integer indicating priority.

== What changes ==

1. The column header cog + popover pane go away.
2. The Filter sidebar becomes the ""Filter & Sort"" sidebar
3. 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:
1. clear any existing multiple sort
2. make that column the primary sort
3. 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."	New feature	closed	contrib.admin	dev	Normal	fixed			Accepted	0	0	0	0	0	1