I need to create a table on a touch device where all the columns are sortable. What in your opinion works more user-friendly?

  1. Triangle pointing to the sorting direction only in the sorted column

  2. All the headers have indicators that they are sortable, but they are greyed out, and the active sorted table has a single bold triangle.

    second approach


With Option 1 there is no indication that the columns are sortable - it just states that one of the columns is sorted, but that doesn't have to mean that you can click on the other headers as well.

So definitely option 2

  • Yeah I agree and better like option 1, but in lots of software and in MAC OS and Windows file navigators there is option 1 used. In Finder and Explorer That's weird) – kquorra Feb 5 '15 at 18:13
  • In Explorer the triangles appear on mouseover, so that would be a possibility - but you still need to move the cursor there to see it. – Martin Mühl Feb 5 '15 at 18:38
  • touch screen devices have no mouseover event... kind of tricky – Heitor Feb 5 '15 at 18:59
  • Anyway, you have good arguments for option 2 and just a concern "why they didn't that in some other system" as a con. Choose option 2 and test. – Heitor Feb 5 '15 at 19:01

I agree that idea 2 is better, in that it keeps the idea of sortability of the other columns visible but idea 1 makes a better distinction between sorted or not. The difference between the double gray triangles and the single black triangle is still pretty subtle.

You could go with idea 2 but add a little more to emphasize the distinction:

  • Change the background color of the entire sort column, or outline that column with a thicker line, etc.
  • Change the visual appearance of the sorted column icon more than you are -- You could use a highlight color instead of black for the sorted column
  • Make a change to the title text of the sort column -- perhaps bold or other style change
  • The screenshot I've attached is from wrapbootstrap site. Not my design. Just a good example. But in mine there is a very dark color cheme used, and making the inactive indicator very subtle is even easier. So thanks once again – kquorra Feb 6 '15 at 6:12

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.