17

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.

|improve this question
  • 3
    As an aside, have you considered whether you can simplify the table or tweak its presentation to reclaim some space? This question about How To Display Too Much Data might be useful. – Matt Obee Jun 11 '13 at 14:15
  • Yes. I have done it already some months ago. I can not simplify it anymore (I'm talking about problems trying to make it work on 800px resolutions) – Steve Jun 11 '13 at 14:46
  • 2
    Don't add an arrow per column, only show an arrow on the currently sorted column. And then make it obvious the headers are clickable/sortable. – Jesse Webb Jun 11 '13 at 20:10
20

You could try a contextual arrow when mouseover.

arrow

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

|improve this answer
20

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.

enter image description here

enter image description here

|improve this answer
13

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.

mockup

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.

|improve this answer
  • +1 But I would argue that it is not bad usability for understanding the functionality; most people understand that clickable headers on a table = sort – Jesse Webb Jun 11 '13 at 20:05
  • 1
    We use this exact solution on a large table. The headers are links and the users (who are not techy) understand that they are used to sort. We always show a single sort arrow indicating which column is currently being used to sort the data. – Jesse Webb Jun 11 '13 at 20:08
  • The standard solution is kind of a variant of this, but the column headers usually look like buttons rather than hyperlinks. – Chris Burt-Brown Jun 12 '13 at 12:30
  • @ChrisBurt-Brown Buttons will also get you the same visual cue reaction 'This can be clicked'. The action after, can be the same too. – rk. Jun 12 '13 at 12:42
10

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:

enter image description here

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.

|improve this answer
  • To me this looks like I’d be able to switch (cycle through) column headings. Or to vote up/down, similar to the voting here on Stack Exchange. – unor Jun 12 '13 at 11:21
  • @unor: Thanks for the response. Adding hover text over each arrow (like SE does), keeping the current sort arrow highlighted, and the fact that the column under the highlighted sort arrow is sorted correspondingly should help clue users in to what this does. If that fails, as long as users are not afraid to experiment they will soon understand the functionality. – Briguy37 Jun 12 '13 at 16:26
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.

|improve this answer
0

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.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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