backdrop-issues
backdrop-issues copied to clipboard
backdrop
[UX] Confusing sorting table icons
As suggested here, I'm posting this again as a new issue.
I just come across this issue when I realized that the icons we are showing to sort a table now are inducing me to confusion.
Right now we are showing these icons:
which in fact mean the same: ascendant sorting, from the smaller line to the larger line. The only difference is that there are shown upside-down.
While these icons:
are really showing different sorting: descendant on the left, from the larger line to the smaller line, and ascendant on the right, from the smaller line to the larger line.
Thus, I would suggest using the second set of icons, instead of the first one.
Wow! I've always found these confusing but never noticed that this is why. Yes please to fixing this.
As mentioned in https://github.com/backdrop/backdrop-issues/issues/3906#issuecomment-1320011866, the 2nd set is better when I look at the icons in an analytical way, but when I have a quick look at the icons, the first icon set seems more appropriate to me (easier to recognize the direction of the arrow). Looking at the original issue thread, some people preferred the second set, many others the first.
It looks like both icon sets are not ideal, as each of them seems to confuse its own audience. Maybe we should abstain from using the bars and just use arrows? That should be more clear for both groups.
To me, both the set of icons are confusing; it's the combination of arrow and bars that make the icons hard to understand.
Looking at the bars, the first icon of the first set suggests me an ascending order, while the second icon suggests me a descending order; the arrows would tell me "from the smaller to the bigger" in both the cases, and that is confusing for me, who looks at vertically placed objects from the top to the bottom.
Looking at the bars, both the icons of the second set suggest me the same order. The arrows are still confusing me, who still looks at vertically placed objects from the top to the bottom.
To me, both the set of icons are confusing
I feel the same way. Should we consider going back to a simple caret (🔽 ), or small arrow (⬇️ )?
Should we consider going back to a simple caret (🔽 ), or small arrow (⬇️ )?
Yes please! Visually, I'd prefer the caret, but let's reconsider @klonos' objection that we use it also in fieldsets and drop buttons, even if there it stands for different actions. I don't see the different meanings as a problem. We could however bypass the controversy by using the arrow.
@olafgrabienski we discussed in the design meeting; the small arrow is less clear at small sizes than the caret. Might be possible to mitigate if we can find a clearer icon.
While I like the icon itself, as a user, the two on the left make more sense to me. For both the rows I have to read them carefully (as opposed to scan-read them) in order to confirm what they are telling me. I think this is because the icon is in two parts. The arrow says the column sorted. The scale bars show the direction of the sort. If a column isn't sorted no icon is needed, or perhaps an unsorted icon with no arrow and scale bars in random order.
Considering the combination of arrow and bar: an up-arrow tells me "the normal order of of this thing goes from bottom to top," and "the normal order" is clearly lexicographic for something called "Title". So an arrow alone is clear. The stack of bars with smallest bar on top tells me "the biggest thing is on the bottom, smallest thing is on the top," and that's a lot less clear for lexicographical ordering, because I don't think of "Z" as being "larger" or "heavier" than "A". It just comes later in normal ordering. So I agree that we should just go back to a caret or arrow, both of which indicate unambiguously that "the normal order of this thing goes this direction."
As for which we use, I definitely find the caret more readable at a distance or at smaller size.
All of this has been said in other words by other commenters above; just adding my agreement.
I'm fine with using just up/down arrows, but lets please not go back to using the caret, as that's being used for expand/collapse functionality in multiple places. Looking at https://fontawesome.com/search?q=arrow&o=r&m=free what do people prefer?
I personally like either the arrow-up/arrow-down or the arrow-up-long/arrow-down-long variants. Which set do you find easier to distinguish?:
(I've moved the options into separate comments bellow, so that people can up/down-vote them using 👍🏼 / 👎🏼 )
Is there any chance that people from different parts of the world could understand the arrow up differently?
I'm fine with using just up/down arrows, but lets please not go back to using the caret, as that's being used for expand/collapse functionality in multiple places.
@klonos It's not necessarily problematic to use the same symbol for different things. In this case, I don't think it's problematic, and the caret is better readable, as many people expressed. So, I'd suggest to add the caret to the up/down-vote comparison.
I agree with @olafgrabienski that it's OK to use the same or similar symbols in different places when they're unlikely to be confused, but the "arrow-up"/"arrow-down" examples above (first pair) are bold enough that they don't suffer from the same readability/distinguishability issue that small arrow (⬇️ ) did.
I think the first pair arrow-up/arrow-down are preferable to the other arrows. I'm also happy with (and prefer) caret and do think it is more readable than the arrow. Note also that font awesome has caret as:
sort-up / sort-down
So it is probably a well accepted pattern, and I also don't think it is a problem that it's also used for other things in different contexts.
Is there any chance that people from different parts of the world could understand the arrow up differently?
Good question @kiamlaluno 🤔 ...I wasn't able to find anything related to language-specific representations of arrows, so unless anyone else finds any, I'm inclined to say that they are a universal thing.
@klonos I was thinking more of people who read text from the bottom to the top, who could understand the arrow differently. (I do not know if that even happens; that is why I asked.)