How to show the user the possibility to sort a column with space problems

Question

I am working with a big table with 20 columns and a lot of information.

I know that the most common way to indicate that a column is sortable is by adding a little arrow at the right or left of the column header.

My problem is that I don't have enough space to add an arrow per column (I really don't) and that's why I am wondering how I can show this feature to the users.

Answer 1

You could try a contextual arrow when mouseover.

It would be less self explanatory than if you had space, but it might be helpful in this context.

edit : Google drive's spreadsheet uses that

Answer 2

Most users with basic web app experience will most likely still try to sort your table by clicking the individual headers. But for the more novice users I would suggest adding an adjacent control similar to that of sites showing sortable content which isn't ordered in a table, eg. similar to that of amazon.com.

Answer 3

If you cannot use arrows or a separate drop-down menu for sorting, the simplest thing you can do is, make the labels clickable. Make the labels look like hyperlinks. And when the user clicks the label, they can 'discover' that it does sorting. It is bad usability in terms of understanding the functionality, but, you can atleast give them the visual cue to click the label.

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

Edit: You can make it a bit clearer by either changing the text of the label on-hover, to something understandable like 'Sort' OR you can use Gildas's idea and overlay the sorting icon there.

In conclusion, draw in the user by the hyperlink visual cue and signal the action when in context.

Answer 4

Is your problem mainly about saving horizontal space due to the large number of columns? If so, putting the arrows above/below the header may help:

Additional Node: A further way to reduce space is to only include arrows above the header of each sortable column. When you click the header of an unsorted column, it sorts it in the default direction. When you click the header of a sorted column, it toggles the direction of the sort.

Answer 5

Underline the column header, that will allow users to see that the header is a link(they can interact with it) and add title="Sort by price" so when the user hovers over the link it will give them the explanation what will happen if they click on it.

Answer 6

You could also just tell the User. If you have a Text leading to this table or just above the table, just tell the User he can sort the table by clicking the headers.

Answer 7

I was dealing with this today, and this nine-year old question came up as the first search result. After trying a few things, I came up with something different: adding a border line on the top or bottom of the header cell to indicate which column is sorting, and in which direction. I also added a background color and pointer cursor on hover, but seeing the line on the default sort column should be a good indication that sorting by different columns is possible without having to discover that functionality by hovering.

Here's how it looks when sorted by Song ascending:

And by Uploaded descending:

(Users can click the selected column to reverse the sort direction.)

To place the border inside the header cell, I used this CSS:

th {
    background-color: #F0F0F0; 
    padding: 6px;
    text-transform: none;
    cursor: pointer;
}
th:hover {
    background-color: #E0E0E0; 
}
th.active_asc {
    box-shadow: inset 0px -2px 0px #D6D6D6;
}
th.active_desc {
    box-shadow: inset 0px 3px 0px #D6D6D6;
}

The bottom line is 1px smaller than the top line because the header row already has a 1px border.