How to sort on a single column; OR multiple columns at once

Question

On this not-yet-working page blindingly full of numbers, I would like to accommodate two kinds of sorts:

1. immediate sort on one single column; and

2. deferred or delayed stable sort on multiple columns.

It's usual and natural for the user to single-click a <th> to get the whole table sorted on that one column. I don't want to discard that idea unless I really have to.

But I need some way for the user also to select multiple columns and then, when he's finished, ask for a stable sort on those selected columns.

How can I offer these two kinds of column sorts in an obvious, strongly-affordable (is that the word?) way?

I've thought of two ways, but I'm unhappy with both:

1. give the guy a menu button to enter/leave single/multi column-sort mode, with a "do the sort now!" action button for multi-col mode.

2a. let the user single-click a col header for immediate single-col sort; ask the guy to double-click a col header to select the col for later.

2b. somehow let the user tell me, in the multi-col case, what are the primary, secondary, ..., nth-ary cols to sort on.

I think the solution has the chance to be outstandingly beautiful, inuitive, and simple; or horribly mundane, mediocre, and complex.

Answer 1

First an observation rather than a solution...

A multicolumn sort on 'Bid', 'Ask', 'Last' can be achieved by immediate single column sorts, first on 'Last', then on 'Ask', then on 'Bid'. So a stable single column sort is actually enough to achieve any desired sort. To help users discover this, it could be enough to have a show/hide button for instructions on multi-column sorting that explains this method!

A More Intuitive Approach

What's tricky about that method is that the columns must be clicked in reverse order to the eventual order of sorting. An interface without that problem would have the same show/hide button for instructions, and the show-text:

Click on the column headers - in desired sorting order - then click OK.

As the user clicks on the headers, numbers in small circles appear on the headers, '1','2','3'.

When they click OK the sort is done and the numbers disappear. The show/hide region's job is done and the text hides again.

Details

Clicking the headers toggles, so clicking a header that already has a number removes it.

There is no separate Cancel button, and no need for one. They can cancel by hiding the show/hide region or they can click OK and go ahead with it anyway, or they can click on each of the headers with a number on it until all the numbers are gone and then click OK.

Elaborations

As described the method only caters to A..Z or 1..N sorting, not reverse sorting. A change in style of the headers could accommodate this, or a change in style of the numbers, so that there is a number with a ^ or a V beside it and clicking on that changes the direction

Caveats

The method which shows numbers on the column headers is a suggestion, untested. I've made an assumption that multicolumn sorting is significantly rarer than single column sorting, so that it's OK to make single column sorting the default.

I've used single column sorting only, to achieve complex multicolumn sorts, in a program for pattern finding in DNA. It's actually fine for about 3 contiguous regions. Beyond that it becomes difficult to keep track of what has been sorted and what hasn't because of the order being reversed.

Edit

It's an interesting problem. I thought I'd try a mock up with Balsamiq and Gimp. First try I put the multi-column-sorting as a link just above the table, with the idea that clicking on it would expand below, pushing the table down the page. However, even when collapsed the link grabs too much space and attention for what it does. So, second try, a menu drops down when you click the (new) tools button on the menu bar. Click on the correct item in that tools menu and the whole multi-column sorting bar appears - and of course all goes away, including its title, when you click OK.

About the screenshot: Mixing wireframe mock up with the high-fidelity version wasn't such a good idea. It was supposed to highlight what was new without worrying about the precise details of graphic design. It's a mock up just to show a possible UI layout. If I were doing this mock up again I'd use a more sober font and button(s) in keeping with the rest of the UI. I'd use less space and be higher fidelity, less sketchy - and indicate what's new some other way.

Answer 2

Id probably go with 2b. In a modal dialog, like Report Settings. The reason is because this is a power user feature. 80% (or more) of your users will use this feature less than 20% (or less) of the time. Don't put every option right in front of the user. Make simple things simple and complex things possible.

Answer 3

I really like @James Crook 's suggestion - it is basically the type of solution I would go if I were working on functionality like this.

Another alternative (though not necessarily a good one) would be to use some type of cascading column selection system. Maybe something like this:

You could format this somewhat like a breadcrumb trail with links - that would make it simple for the user to change the sort order in the middle if it was more than two levels deep.