I'm working on the sort-interface of a table. So far I've come up with two versions with space saving in mind. Also I try to bear in mind the difficulties that come with toggle-buttons. (see in this question) I'm not sure if the second method has been tried and testet yet by someone before. Of course its usability highly depends on hover and thus it doesn't quite fit for touchscreens.

What do you guys think?

first sort-function with common toggle-switch - - - second-sort-function with hover-effect to clarify what is what

(Its hard to read, but the icons say 1-9 and 9-1 to illustrate sort-order.)

  • Do you need the third state - unordered? – Serg Jan 15 '15 at 15:53
  • No. The table is always sorted by one column at a time. – Niko Jan 15 '15 at 15:58

I think both work, and the right hand solution looks good with the rotation. I just don't see the point in showing the user the number of lines, which causes the problem of the numbers being too small.

A good solution might be having just the arrows, indicating ascending and descending order, so the rotation would just be 180 degrees. It's a pretty standard usage so the user will understand whether it had the hover effect or not:

enter image description here

| improve this answer | |
  • I've never encountered individuals that didn't understand the simple descending/ascending arrow is not a toggle indicating the current sort order or that clicking it wouldn't reverse it. To me, it's one of those inexpensive, non-destructive, instantly intuitive elements of an interface you can allude to during training or let users discover. – Brian Muenzenmeyer Apr 16 '15 at 13:27
  • You are right, having just arrows is more readable and applies to any kind of data, not just numbers. The chosen icon was just somewhat overspecific, making the user wonder, but actually was also just meant to illustrate the sort order. No relation with the number of lines intended. In the end my question was not about the icon, but mainly about the animation, trying to make the action more predictable without confusing the button with maybe a fold-function or something else while still only having need for one button. – Niko Feb 22 '17 at 8:51

Talking about rotational approach.

No intention to comment on creativity. I liked it. It looks different. However I do feel it is somewhat over engineering. This approach works for number columns. For non number column, you would need a separate set of icons. More maintenance would be involved in this approach.

In addition, as already pointed out by a comment, the affordance needs to be re-learned. You mean well, but for a small time, user would need to make out the tiny details of your icon.

The toggle button approach has similar issues about assets, but in addition it is also consuming more space for the user. If the column width is reduced then it will be cluttered. So the solution needs some breathing space and a generous minimum width. Plus I guess there will not be a way to show an unorganized state of the column.

The problem of unorganized state icon remains. In both the approaches, you'd have to give additional affordance to show which column is being sorted. That is a visual load.

Just my two cents.

| improve this answer | |
  • In part, to answer your question see my other comment above. To show which colymn is being sorted, I changed the column-head's background-color, since making this clear through the order-direction-button would mean to communicate two states of the column in one icon. Even though those two states (by which column is being ordered and order-direction) correlate, I feel it would be too much for one icon. – Niko Feb 22 '17 at 9:03

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.