How to indicate that a column in a table is sortable (UI design question)?

Question

In the application that I am working on, there is tabular data (for the record, it is a Java Swing app using JTables). In some cases the data is sortable by clicking on the column headers. What I want to know is what is a good way to indicate to the user if a given column is sortable or not?

I have come up with the following possibilities.

1) Put an icon in each sortable column indicating it is sortable. I personally do not like this option.

2) Change the mouse cursor into something else when it hovers over the header to indicate it is sortable.

3) Put a note in the tooltip text when hovering over the column saying that it is sortable.

Does anyone have any other suggestions?

Update:

I think a clarification is in order. My question is not how does one indicate that a given column is currently sorted. That is already implemented via the up/down sort triangle paradigm. I want to give the user a clue as to which columns can be sorted before they click on the header to sort it.

Update 2: I think I should explain why I'm not entirely sold on option #1. It seems to me that if one is going to put an icon to indicate which columns are sortable then this will add to visual clutter. In such cases, sometimes the UI changes on "mouse over". Case in point: Windows Vista and 7 allows one to add a filter on a column yet the indicator for this does not appear until you hover over the header with the mouse.

Answer 1

I think the standard way is essentially option 1: either display the data initially sorted with a little arrow pointing either up or down (ascending/descending), or sort+display the icon as soon as the column header is clicked.

Answer 2

In many apps, triangles indicate sortable so I think that's the best way to convey the information to the user b/c it's a standard they're most likely familiar with.

I think the jquery plugin from DataTables.Net is a good example. You could take a look and see if you like the look/functionality of that and emulate it. Both an up and a down indicate sortable. Just one or the other indicate that it is being sorted. If they column is not sortable, there is no icon at all. Their example also changes the pointer from an arrow to the hand pointer to indicate that you can click on the header.

Answer 3

I think having a little arrow or triangle icon below the column heading, which you can click to sort by that column is the best option, as it is easy to see visually and very intuitive to use.

Answer 4

Little triangular up/down sort icons are pretty much standard for sortable table views in desktop applications and web pages. You may not like them, but your users are probably used to them (even if they don't realize it).

You should of course change the mouse cursor over clickable elements.

Answer 5

You should always do 2 for anything clickable.

Number 1 is not bad, typically a triangle pointing up or down depending on the sort order.

To indicate clickability, you could also use blue, underlined text on sortable columns and plain dark gray text on nonsortables -- the http link appearance is a well-known device to virtually all users, but it would not convey sortability, per se. Rather, a user might expect clicking that to take them to some other screen or list, as a hyperlink typically does.

Answer 6

When you're dealing with the UI, you have to put your mind into what the user will expect. I would almost always recommend staying with the paradigms that your users will expect. Therefore I would recommend a version of option 1)

RememberME's post describes how this could work - You can still use arrows in column headers - one option would be to put an arrow icon in the header, but change the state of that icon if it was sorted (e.g. highlight the up or down button if the dataset is currently sorted by this column.)

Pictoral Examples:

Edit: A Windows Explorer example may not be the best example here. My original text quoted below:

In Windows Explorer and almost all form datagrids there is a small icon, usually an up or down arrow, that indicates that a column is sortable. Experiment with Windows Explorer to see the way in which this works.

Answer 7

I may be a little dense, but what kinds of columns are not sortable?

Pretty much anything can be sorted; even if there is no strict "greater than" relationship, at least there will be an "equals", and then sorting simply means "bring equal things together".

Strings? Try alphabetical ordering. Images? Sort by percentage of red, green, blue (or if you want to get fancy, compare color histograms). Locations? Use distance to Rome or any other arbitrary location.

Sorting on some columns may be much more useful than sorting on others; but I have a hard time finding a column type were it is important to avoid sorting from taking place.