Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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:

mockup

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?

share|improve this question

5 Answers 5

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:

mockup

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.

mockup

download bmml source

share|improve this answer
    
Solution 1 is exactly what we used somewhere. Don't ever re-order columns though. It jolt people's spatial memory on where to look for info, plus it is down right obnoxious if you also provide the ability to re-order columns as the user sees fit. –  Marjan Venema Feb 15 '13 at 18:03

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.

share|improve this answer
2  
lol, self-referencing citation, well played. But probably I will use the integer solution and a separate configure dialog. Thank you :) –  K.. Feb 15 '13 at 15:33
    
@K. Heh, heh. It's entirely coincidental that I agree with myself. –  Michael Zuschlag Feb 15 '13 at 15:45
    
Why? You tend to change your mind often then? ;-D –  Marjan Venema Feb 15 '13 at 18:05

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.

mockup

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.

mockup

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.

share|improve this answer
    
yeah, we had this before, this kinda worked. Problem was, after locking a bunch of columns, you can't see what are the sorting orders at one glance :\ –  K.. Feb 15 '13 at 14:36

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2. Place sorting options next to the table

mockup

download bmml source

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

share|improve this answer
    
Why? Because what you think is helpful, may not be helpful for me. People tend to use what we make in ways that we can't even begin to imagine. –  Marjan Venema Feb 15 '13 at 18:06
1  
I cannot begin to count how many times I've needed to sort tables of data on multiple columns. –  zzzzBov Feb 15 '13 at 18:24
    
Marjan, yes, why? How can you solve a task without knowing why it's needed? :) –  ADOConnection Feb 16 '13 at 12:54
    
@zzzzBow, could you please name several cases? –  ADOConnection Feb 16 '13 at 12:55
    
@ADOConnection, it's a v not a w. I often find myself looking through large databases where I want to find things. Sorting by date can often be helpful (find an article that was published on 1/2/03), but when there are a 100+ results, it's more helpful to be able to sort on date and type (find a "foo" article published on 1/2/03). –  zzzzBov Feb 18 '13 at 2:22

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:

mockup

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.