DataTable: Sort icons confusing

[9mm]

Describe the bug

It's not really a bug per se, but I think these sort icons are really confusing:

I understand that for something in "ascending order" you would expect the arrow to go up. If it were an arrow by itself, I could see that. But you show it next to a triangle of data where the largest is on the bottom where if the arrow is pointing up it basically visually equates to "biggest to smallest" when something thats ascending should have a down arrow "smallest to biggest".

You might say "well, in ascending order, its also showing how the data is smallest at the top and gets bigger"... this might be true, but if you change order the triangle does NOT change, only the arrow. So in that case, its wrong again

Reproducer

https://primevue.org/datatable/

PrimeVue version

latest

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

latest chrome

Steps to reproduce the behavior

Doesnt need reproduced, just see above image.

Expected behavior

I expect "ascending" to show a down arrow IF the icon is going to have a visual depiction of data along with it (the triangle of data). And "descending" would show an up arrow

[tugcekucukoglu]

We don't think it is complicated. Also, many other libraries use the same method.

Thanks for your support.

[9mm]

I didnt say it was complicated, its just not at all intuitive.

Can you let me know what other libraries use this method?

[Jufralice]

Hello,

Why is this ticket closed?

@9mm is totally right. And I guess that @tugcekucukoglu didn't take the time to actually read this ticket or thing about it.

This is actually a bug in the sense that you definitely switched your ASC and DESC icons.
Like @9mm pointed out, these sorting icons are built of two parts: an arrow, and a "smaller-to-bigger" icon. The arrow indicates the direction in which we should read that 'smaller-to-bigger" part.
You uses these two icons: (I take the icons names from the icons section of your documentation: https://primevue.org/icons/)

• pi-sort-amount-down-alt (the arrow pointing down and the second part being the "smaller-to-bigger" (smaller on top, bigger on the bottom)
  and
• pi-sort-amount-up-alt (the arrow pointing up and the second part being also the "smaller-to-bigger" (smaller on top, bigger on the bottom)

The first one is without any confusion possible being a ASC icon
The second one is a DESC icon

And you switched the two (your table is sorted DESC when you display the first icon).
So this is definitely wrong and need to be fixed.

But let me go a bit further.
Even if you switch them, that will still be confusing. The DESC icon "pi-sort-amount-up-alt" (with the arrow pointing up) is confusing. It indicates that we go from the biggest to the smallest by telling us that when we read the icon from its bottom (bigger) to it's top (smaller), our table will be sorted from the biggest (on its top) to the smallest (on it's bottom).

It's counter intuitive for you mind because you have to think that the bottom of the icon will be what you will have on the top of your table. And you may even understand it in the other way: You might interpret is like: "The table is from the biggest at the bottom to the smallest at the top.

The way to go is to use these icons:
For ASC:
pi-sort-amount-down-alt (the arrow pointing down and the second part being the "smaller-to-bigger" (smaller on top, bigger on the bottom)
For DESC:
pi-sort-amount-down (the arrow pointing down and the second part being the "bigger-to-smaller" (bigger on top, smaller on the bottom).

That way you respect the way your read the table => From top to bottom ! (You read a book or anything from top to bottom)
So you always read your icon from top to bottom as you also read your table from top to bottom.
And that way, you'll not have any confusion anymore.

You can also look at these icons that you use to sort numerical columns (the arrow next to a 1-9 icon):
pi-sort-numeric-down: (arrow pointing down next to a "1 to 9" icon)
pi-sort-numeric-down-alt: (arrow pointing down next to a "9 to 1" icon)

If you imagine that your table is simply displaying rows with numbers from 1 to 9, your sorting icons will perfectly represent the way you see your table => If you see in your icon the 1 on top and the 9 on the bottom, you'll see in your table the 1 on top and the 9 on the bottom. And if you see in your icon the 9 on top and the 1 on the bottom, you'll see in your table the 9 on top and the 1 on the bottom

(you also have the similar thing for A-Z, Z-A)

TLDR: Your sorting icons should follow the reading direction convention which is from top to bottom.

I'd then propose to re-open this ticket and as a fix I propose to use these sorting icons =>
ASC: pi-sort-amount-down-alt
DESC: pi-sort-amount-down

Thank you and sorry for this long explanation.

[9mm]

Awesome. It was highly irritating that it's closed with no examples of "other libraries doing this" when its clearly wrong

[FlipWarthog]

I don't think there's necessarily a perfectly right answer that can cover all cases. A more clear icon may be up/down arrows next to A and Z to indicate which alphabetical sorting it is, but this only applies to languages that use the Latin alphabet, so it doesn't work everywhere. Using images only can only go so far, especially when they're small sort icons, and I think it's partially influenced by opinion. See this UX SO post for a whole load of discussion around this very topic.

At the end of the day, these are just the default icons that PrimeTek has chosen to use across their libraries, but they give developers the ability to override these as they choose. Here is a rough example overriding the first column's sort icons to match what I think is being suggested here, and there are other ways of accomplishing the same thing (especially if you're not using PrimeIcons at all): https://stackblitz.com/edit/p3hd4h?file=src%2FApp.vue

[Jufralice]

Thank you @FlipWarthog ,
Your example in stackblitz with the firstColumn is indeed the solution that I suggested. Thanks a lot for having implemented it in stackblitz. 👍

There was also another closed ticket pointing the same issue here: #3732
where @wed-swpl propose another solution where the arrow will still rotate which might maybe still be a bit confusing but that indeed make sense in a design context since that mirrors the unsorted state's icon. His solution is I believe already way better than what we have know.