Improve multiple sort UX

[Idan Gazit]

#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.

[Stephen Burrows]

What about something like this:

1. User presses shift (or ctrl).
2. User selects headers. Clicking on a header more than once loops through asc, desc, none. Headers are appended to the current sort as the user selects them.
3. User releases shift (or ctrl)

This is analogous to selecting multiple files in a file browser like the ones you named, so I think people would be able to get it. It also has a clear point for reload. The main advantage to this approach is that we wouldn't have to add another element to the page; the main problem I can see compared to the suggested implementation is that it might not be obvious enough that people would get it without explanation.

[Luke Plant]

I agree that the 'multiple sort by default' is the biggest sticking point with the current UI - it is powerful but confusing compared to normal experience with sorting.

Your suggestion sounds much nicer on that front, but also a fair amount of work! One tricky thing is that it will have to generate the URLs client side. I don't think that is too hard, just is a bit of duplication. I'm happy to help with any server side changes for this. #11868 and the related changes ironed out a few bugs so I think it is a decent platform to build on now. Changing the default behaviour back to single sort is trivial.

[Luke Plant]

Another thought:

Do we need a new permanent section devoted to showing the current sort order? In the common case of a single sort column, we already have the information displayed in terms of the header field being highlighted and the arrow. The popup for more complex sort orders could be triggered from (something like) the cog as it currently is.

[Julien Phalip]

I don't want the discussion to go in every direction but I thought I'd throw my 2 cents in :)

In ticket:11868#comment:14, I pointed out an example making use of SHIFT-click: ​http://tablesorter.com/docs/#Examples

However, I think this is a bad idea, for 2 reasons:

1. This can only properly work if there is no page refresh, like in that tablesorter example. If the page is refreshed after every click, then it would actually be very hard to remember to press SHIFT after the page has reloaded to select other column headers.
2. One big difference between web apps and desktop apps is that it is extremely rare in web interfaces to use actions like SHIFT-click, COMMAND-CLICK, CTRL-click, double-click or right-click. About every mouse action on the web is basically a simple left-click, and users have become accustomed to that. For that reason, an interface requiring the use of SHIFT-click would be unintuitive and would also require adding some sort of help text, which would add clutter and cognitive load.

Also, moving the sorting controls to the sidebar would cause at least 2 drawbacks:

1. The controls would be detached from the source of the action. You would have to look back and forth between the sidebar and the column headers to make sense of the interface and to make adjustments.
2. We would lose some screen real estate. The sidebar would always be displayed, even if there are no filters (currently the sidebar isn't displayed if there are no filters, giving more space for the changelist result table). The controls would also add clutter on the interface and would potentially attract more attention that they really deserve.

I actually think that the current interface is already pretty good. My main issue with it is the lack of visual feedback for the available actions and the inability to remove sorting columns other than via the popup.

So, I have attached a patch with a few small changes which, in my opinion, improve the interface while avoiding all the drawbacks mentioned above. It basically keeps everything the same, except:

• added hover states and tooltips for headers, cog, position numbers and up/down arrows.
• clicking an arrow toggles the corresponding field's sorting without changing the sorting priorities.
• hovering a position number replaces the number with a red cross which, when clicked, removes that field from the sorting.

The only thing that still can only be done from the popup is "Reset sorting", so maybe the popup could be entirely be removed and the cog icon could be replaced by some other icon to directly reset the sorting.

Hopefully this is useful to the discussion. If not, that's cool, I'm not too precious about it :p

[Julien Phalip]

By the way, the patch contains binary diffs for the modified icons. You can apply it with git-apply:

git apply < 16212.better-admin-multiple-sort.diff

[Julien Phalip]

Patch updated to latest trunk

[Idan Gazit]

Just sat down to discuss this with Julien. In general, I'm unhappy with the multiple sort UI, and would prefer the fully-baked solution I've proposed. However, I don't see it happening in time for 1.4, and I'd like to make multiple sorting suck less for that release.

Most of my feedback here is negative, just want to be clear that I like the general idea, just unsatisfied with the implementation we have now and the pain it could cause users. If it weren't painful, I'd remove multiple sort now and wait until we had a decent implementation before adding it.

Regarding Julien's patch:

• The additional cues and tooltips are good. The copy could be made friendlier, right now it's a mouthful.
• Purely stylistically, the hover state of column headers isn't bad, but could be a little more subtle (gradient / darker grey -> flat highlight yellow is a big change).
• I like the hover-on-sort-number-to-remove functionality.

With this change, the only functionality still needed from the cog popover is the global "reset sorting" link. We can ditch the entire cog popover if we put that link elsewhere. My suggestion was to stick an additional div between the .actions and .results, containing the reset link. If multisort isn't active, the entire div can be hidden.

Overall this is lipstick on a pig, but it's better than what we have, and we can get it into 1.4.

[Julien Phalip]

Based on Idan's feedback and some further experimentation I've tried to simplify the interface. A few notes:

• The cog icon and popup have been removed.
• A "Clear from sorting" (x) icon appears when hovering a sorted header. Clicking that icon clears the corresponding column from sorting.
• I've made more subtle hover states for the header's background and the header buttons ("Clear from sorting" and "Toggle sorting").

I think the interface is now generally quite clean and reasonably intuitive. The only functionality that has been removed is "Reset sorting". I first tried to put the link above the results table but it didn't feel right so I removed it altogether. In fact, I think we could well live without it and keep the interface as clean and simple as possible. If one wants to clear the sorting then they can clear each field individually, even if it requires as many page loads.

[Julien Phalip]

Same but with an eraser icon

[Julien Phalip]

Sprite file with eraser icon

[Julien Phalip]

The "Clear from sorting" icon in the patch is a cross, which may potentially be mistaken by some for "Delete this column", so I'm proposing an alternative with an eraser icon. To test, just replace the "sorting-icons.gif" sprite file with the new one attached.

[Julien Phalip]

Sprite file with clear sorting icon

[Julien Phalip]

I've discussed this on IRC with Idan. We've especially tried to find a better icon. Our latest suggestion is a more explicit icon combining the sort triangles and a cross (see latest attached screenshot).

[Idan Gazit]

This is pretty winful, and has that fully-baked feel. +1 from me.

[Jannis Leidel]

<3

[Julien Phalip]

Glad you like it! I've just posted the last patch. I'll do a bit more testing in different browsers and will commit it when I get round to it within a couple of days. Feel free to run it through some testing too if you'd like.

[Julien Phalip]

In [16899]:

Simplified the admin changelist multi-sort interface specifically by removing the popup window, adding explicit tooltip help texts, improving the hover visual states and allowing all operations (i.e. removing a column from sorting and toggling the sorting with and without changing the sorting priority) to be actionable with just one click. Many thanks to Idan Gazit for the feedback and direction. Refs #16212.

[Julien Phalip]

OK, I'm leaving this ticket open for future iterations on this work. Hopefully the interface is now clean- and intuitive-enough for the upcoming 1.4 release.

[Ionel Cristian Maries]

You can't change the order of the fields after the refactor in [1] (16899) - the order of the fields is always picked ascending. Eg: you can't pick ordering equivalent to "?o=3.2.1" from the UI.

[jimallman <jim@…>]

Replying to IonelMaries:

You can't change the order of the fields after the refactor in [1] (16899) - the order of the fields is always picked ascending. Eg: you can't pick ordering equivalent to "?o=3.2.1" from the UI.

This works fine for me. Some details:

I'm running the latest Django 1.4 pre-alpha, and I can freely change the order in Safari (Mac), Firefox (Mac), IE8 (WinXP), IE8 (7-compatible, WinXP). All changes are accurately reflected in the new URL and in the displayed data. I'm testing using the user management page (/admin/auth/user/), and I can easily walk this series of URLs:

​http://localhost:8000/admin/auth/user/?o=-5.1.2

... then toggle 'Staff status' column...

​http://localhost:8000/admin/auth/user/?o=5.1.2

... then click to add 'First name' as new first sort...

​http://localhost:8000/admin/auth/user/?o=3.5.1.2

... then click 'Username' column to remove from sorting headers...

​http://localhost:8000/admin/auth/user/?o=3.5.2

[Baptiste Mispelon]

As noted in comment:14, the original goal of this ticket has been fixed.

The ticket was left open in order to track "future iterations on this work" (comment:15).
However, I think it would be better to have tickets that are more specific and actionable (in its current state, this ticket seems "un-closeable").

Combined with the fact that there haven't been updates for 8 years, I'm going to mark this ticket as fixed.