#16212: Improve multiple sort UX
-------------------------+-------------------------------
Reporter: idangazit | Owner: nobody
Type: New feature | Status: new
Milestone: | Component: contrib.admin
Version: SVN | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------+-------------------------------
#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.
--
Ticket URL: <https://code.djangoproject.com/ticket/16212>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/django-updates?hl=en.
