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 have a table that is very tight horizontally. Each column in the table is sortable by clicking the title of the header.

Column Headers

As you can see, on most columns there is just not enough room for the order indicator.

Any ideas on a better way to indicate sort order? I would like to keep the font size and column widths as is.

share|improve this question
2  
Something like what you have is fine - but I would keep the column heading labels vertically aligned and put the arrow above the column title instead. –  Roger Attrill Jan 8 at 12:48

5 Answers 5

up vote 16 down vote accepted

I made a demo solution with CSS3. The Salary column is in ascending sorted status and the Bonus column is in descending one.

horiontal-tight-table-sorter-css3

I commit the work to github at horiontal-tight-table-sorter-css3.

You can have a quick review of the html page here htmlpreview horiontal-tight-table-sorter-css3.

For the sake of the demo, I only tested it on Chrome.

Hope this help.

share|improve this answer
    
That's really nice-looking! –  LindaBrammer Jan 8 at 13:51
1  
Nice, but your example is confusing to me. The triangles seem to be contradicting the order you mention in the text. Bonus values are indeed in descending order, but the triangle with the tip at the top is often used for ascending order (from smallest value ~ smallest width to largest value ~ largest width). In addition the Salary values are neither ascending nor descending - leading me to conclude that their sort order significant when Bonus values are equal. That would be more intuitive if the Salary column comes after the Bonus column. –  Marjan Venema Jan 9 at 19:42
    
@MarjanVenema You're right. My bad. I was meant to demonstrate the concept and styling of the header only. The data was left as random since I though nobody would mind. –  tiengtinh Jan 11 at 4:51
2  
Yes, I did understand that that was what you were trying to do. The trouble is that people tend to read more from examples than what you are trying to convey. Examples either have to be limited to what you are trying to show (the header and perhaps the first data row) or have to be consistent to avoid confusion and the risk of being misinterpreted. –  Marjan Venema Jan 11 at 11:19
1  
This is still confusing. Now both the salary and the bonus column are sorted ascending, which doesn't seem to be what the icons indicate at all. With the icon above the salary column, I'd expect to see $300 at the top. –  AlexC Jan 14 at 21:31

Try something like this. Keep the horizontal positioning of the column labels the same and add sorting horizontally on top but in smaller font using some noticeable color.

If possible, make the whole div (or table cell) having that column label clickable and sort icons clickable.

enter image description here

share|improve this answer
1  
That works for strings (in languages where they use the western alphabet), but how would that look for dates, for the rating column, or for numbers? All of these appear in the original question. –  André Jan 8 at 11:40
    
I like this, but andre makes a good point. –  NSjonas Jan 8 at 19:40

If indicating sort direction without utilizing more horizontal space is a requirement, your main option is to utilize more vertical space to display sort direction.

Other things you may wish to consider, however:

  1. Analyze your columns and only show the most important/relevant sections. You may wish to remove certain items from the main table view to gain more space. If the items in your table are clickable and go to a detailed view, maybe you can show view/download count in the detailed view instead. It seems like the most important metric for sorting titles will be rating, and I'm not sure that the view count really tells the end user very much about the quality of the item.

  2. Maybe it's not important to indicate sort direction. If your title columns indicate that they are clickable by using the same styling as all your other links I don't see much of an advantage to adding the sort direction arrow. If a user clicks a column item once and sees the list rearrange, but the order is not what they desire, it makes sense they would click it again until the order is correct, since they know clicking the link rearranges the list.

  3. Maybe you can implement a single sort direction solution, based on whichever sort direction makes the most sense for each item. Clicking title or author rearranges the list alphabetically ascending, clicking rating rearranges the list numerically (or by stars) descending, etc. Is anyone ever going to want to sort by lowest rating? If not highest rating should be default. This can simplify the whole process. You click a column, the table is sorted whichever direction it makes sense to sort by (based on the column you clicked), and the column is highlighted temporarily (maybe with a color fade in/out) to indicate that an action was just taken based on the clicked item.

share|improve this answer
    
For an example of solution 3, please see area51.stackexchange.com/?tab=hot –  circuitry Jan 8 at 17:33
    
Good thoughts, unfortunately at the moment everything is as the client asked. I do have a details page but most of the columns in the table are key values that the user might want to sort on. The single sort isn't a bad idea but most my columns would need to be bi-directional. –  NSjonas Jan 8 at 19:29

You could considder if using the background of the header cell would work. Something like this perhaps?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is of course just a very rough sketch, any graphics guy should be able to make something subtle and pretty...

share|improve this answer
    
I thought about this solution, but I think its somewhat difficult to make look good with the simplistic design my table has –  NSjonas Jan 9 at 0:44

You could account for the possibility of the arrow by reserving space in each item. This would keep the column widths the same (arrow or not), and allow for the arrow and text to be horizontal.

enter image description here

Reserved space indicated in red.

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.