4

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:

http://i.stack.imgur.com/EQUFt.png

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.,

  • adityasastry.in/multicolumn.jpg -> This is how the existing system looks like, with tiny triangles. – Aditya Mar 16 '14 at 10:39
  • Regardless of the icon used to indicate the sort direction of a single column, a more interesting question to answer is how you are going to indicate in which order the columns appeared in the sort clause, especially if that order is different from the order in the select clause. (As the bug patch you are working is a preparation for the multi-column sort feature request). – Marjan Venema Mar 16 '14 at 12:47
  • Well phpmyadmin lists the columns in the order they where created so I am not bothered about the permutations of the column names in select clause. – Aditya Mar 16 '14 at 13:34
  • 1
    Sorry don't understand your comment. It would be strange if phpmyadmin ignored the order of a select clause, but even if it lists columns in creation order (for example when double clicking a table), that order can still differ from the order in which columns appear in the "order by" clause. Just adding arrows indicating the sort direction is not going to be much help then. For example columns are listed as a, b, c, d, e, f and order by is "e asc, c desc, a asc", just adding arrows would imply the sort order is "a asc, c desc, e asc" which is completely different. – Marjan Venema Mar 16 '14 at 17:27
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?

0

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.

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.