Sorting tables after multiple columns

Question

I want to add a sorting functionality to a table. It should be able to be sorted after multiple columns.

A standard approach is something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

But this brings one problem, no one knows, which is the first, second an third sorting key.

As an alternative I saw something like this:

^{download bmml source}

Here the position in the list implies, which is the first, second and third sort-key and the arrow show if it's asc/desc.

I think the second approach is more intuitive, but it also takes more space and I don't want the GUI to get cluttered.

Do you have some alternative ideas which would take less space?

Answer 1

I guess it depends on what you want to do with it, and how often you imagine it would be used.

Solution 1: Badges

One way would be to add a badge-like indicator to the sorting:

^{download bmml source – Wireframes created with Balsamiq Mockups}

You will need to consider not only the display, but the actual interaction for manipulating it. How do you expect your users to set the sorting order? Normally, you'd click on a single header, and that would be the full definition of the order. However, if you can involve several columns in the sorting, do you have to keep a modifier key pressed while clicking the headers in sequence or something along those lines? How do you plan to communicate that interaction effectively?

Solution 2: Column order

Another way might be to have the sorting order be defined by the order of the columns. So, to order the data in a different way, just re-order the columns using drag & drop. The idea behind this is that it is likely that the data you're going to be sorting on is important data. That would imply that the table is effectively always sorted on every column. So, all columns would get the up and down arrows.

^{download bmml source}

Answer 2

The use of integers, as suggested by Andre may be your best bet, but I’d test it. It may only work for the geekier of users.

I, however, would like to suggest that your second option of having dedicated sorting controls is often worth the clutter. This is especially true if the sorting controls are interactive; for example, users can open a dropdown for each criterion to change ascending/descending or change it to a different field, and there are + and x controls to insert or delete a criterion (users can still click on column headings too, but that’s more an expert shortcut).

First of all consider that if you need to support multi-order sorting, then you probably have a long table with multiple columns –you’re probably displaying 20 or more rows and have five or more columns. In this context, the relative amount of clutter of dedicated sorting controls is fairly minor.

Secondly, the sorting controls only need to show criteria up to the identifier field (e.g., name) or a timestamp field or other field that has practically unique values for each row. There’s no point in cluttering the display beyond that, because it doesn’t functionally affect the order. In most applications, time or identifier is often the first or second criteria, so usually you’re showing only one or two fields, so it’s not much clutter.

Then there’re the advantages of dedicated sorting controls:

• The users only have to look in one place to see the sort order, rather than scan across all the columns and mentally assemble the order from integers. The latter can be awkward if you have so many fields that the table scrolls horizontally.

• The sorting functionality has better discoverability. The “sorting” label makes it clear the user can sort, and the “+” controls indicate that the user can have multi-order sorts.

• The same kind of sorting controls can be used for items in non-column layout, such as when each item is a "page," or you have items laid out like Stack Exchange UX questions. You can have a consistent means of sorting across your application or suite.

• Users can more easily edit the sorting order, for example, changing the second criterion to descending without making it the first criterion. Changing the sort order with the column headers usually means starting over from scratch.

• User can create multi-order sorts in an intuitive sequence from higher to lower order criteria. Using column headers requires users think backwards.

• You can include “canned” multi-sort orders that users commonly use. For example, one option on the sort control dropdown can be “Probability then Impact” to allow users to sort on the two fields at once with one input.

• You can sort on attributes that are not shown. This could be attributes whose exact values have little meaning to users, but are still useful for sorting, such as relevance scores for search results.

Oh, and BTW, those ascending/descending arrows everyone uses? They don't work.

Answer 3

The challenge here is to communicate the dependencies of the sorts. A nested sort is a hierarchy where each subsequent sort is a dependency of its parent.

Example: SORT BY criteria1 THEN BY criteria2 THEN BY criteria3

The design challenge with a traditional table with sortable column headers is that the UI is flat.

An alternative approach is to display the criteria vertically using indentation to communicate dependency:

^{download bmml source – Wireframes created with Balsamiq Mockups}

You could experiment with different ways of setting the hierarchy.

Clickable Table Column Headers

You could keep the column headers clickable with three states: not selected, ascending, and descending. The order in which you "enable" a column determines its level in the hierarchy. Disabling a column removes it from the array of sort criteria.

Draggable Table Column Headers

You could allow the user to drag the column header into the "Sort" element and manage the hierarchy that way.

Answer 4

Why someone have to sort list by multiple columns? What kind of data have to be sorted in that way? What are the real use cases of that functionality?

People are used to sort by one column, clicking on it. Period. Displaying sorting options in header is complicated, no one will understand.

Consider following sorting options:

1. Allow to choose only first column to sort and decide how to sort others by yourself.

Real life example: task tracker:

1. If I sort by task priority, most likely I want resul groups to be sorted by name
2. If I sort by task creation date, most likely next sorting column will be task name or task priority.

^{download bmml source – Wireframes created with Balsamiq Mockups}

2. Place sorting options next to the table

^{download bmml source}

You can make sorting options box to be a popup or as floating element to save space.

Answer 5

Maybe impose some sort of locking mechanism for columns instead of having an explicit sort order?

In this example the user sorted the Age column in descending order and clicked the lock icon so that the rows cannot be sorted any further based by Age.

^{download bmml source – Wireframes created with Balsamiq Mockups}

We know that the rows 1, 2, and 5 will never move from their locations since they don't share an the same Age with any adjacent rows and the age column is locked. Indicate to the user that these rows will not be moving any more -- I've greyed them out in this example.

Any rows that share a value with an adjacent row in a locked column will still be sortable as long as there are more columns where they differ in value and can still be sorted.

_{Note: If there were two rows that shared the Age 34 in the above example they would only be sortable with each other and not with the ones with Age 33.}

---

Now maybe they decided to lock the Employee column and then unlock the Age column.

^{download bmml source}

The user can continue to sorting in this manner.

I think this method would give the user a finer grain of control while being both highly affordable and easy to learn.