What are standard visual cues to use for multicolumn sorted table

Question

I am working on this bug patch for phpmyadmin

I am specifically working on drawing these little icons along with a column name that show how that column data is ordered

And I am kind of struck deciding on the visual indictations for a sorted column that would indicate if the column is sorted in ascending/descending order.

I was suggested by a senior member of the community to try this out:

But I was thinking that this might a bit too bulky, cause the header bar is thin. However I find this to be more visually appealing and these seem to convey more sense then just a triangle.

What are the standard visual indications that people use when displaying a ordered table ?

Edit: suggestion from @hugues It should be possible to indicate a number next to the visual cue that says that this is a first column in sort, second column in the sort clause etc.,

Answer 1

Isn't it possible to add a number into the sort icon to say if this is the first sort, or second, or third… instead of reorder the columns?

Answer 2

Short Answer

I prefer the (b) icon, but the arrow is redundant. I would take it out since the disposition of the rectangles is enough self explaining.

Long Answer

Now, I've made a comparison between your test (posted on SourceForge) and the icons you proposed (i.e. the grey icons), and I personally find the tiny triangles much more "standard". I don't know any study/article that states that there is any official standard for table-header sorting icons, but I use tables every day an the tiny triangle made me feel "at home".

Plus, there are some objective observations we can make:

• The grey icons use much more horizontal space than the tiny triangles. They are not enough quiet to be harmlessly repeated in every cell of your table header. On the opposite, the tiny triangles are visually light and still, they're present when you need them.
• The grey icons suggest that you should click one of the two sides of the icon to change the sorting order (they are similar to a switch-button, specially in our flat-design era), which makes things difficult because they are meant to be small (even if PhpMyAdmin is not meant to run on touch devices, am I right?). On the other side, the tiny triangles suggest that the click area is the whole header cell, and the meaning of the click is "toggle sorting" (asc, desc, none): much simpler.

In conclusion, even if the tiny triangles are visually less meaningful than the grey icons, they're commonly spread along tables in websites, and their meaning has become implicit, so I would use them instead of the grey icons (because of the drawbacks explained above).

Then, concerning the priority of the sorted columns, I agree with Hugues that a tiny number (next to the triangles, according to the law of proximity) could do the job, since it would be weird to change the columns order to reflect the priority of the sorting (columns would switch as you click on them, which is painful), but try to really figure out if this feature is necessary. Adding a UI element (specially to repeated items), even if it's tiny, can have a really heavy impact on the global user experience, so the choice should be made carefully.