[D8][UX] Update the dated icons for sorting tables

[klonos]

Those caret icons are dated, and they are being used all over the place:

It does make sense when used to expand/collapse things:

...but we should be using more universally acceptable icons for sorting.

Here's what is being implemented in the new D8 admin theme that is being developed at the moment:

[klonos]

I was about to ask for a review of both PRs here, but when I tried to refresh the sandboxes I got problems again 😓 (see #4351)

[herbdool]

Either pr looks good to me. What do other people prefer? Are there other places to change if we use the new ones?

[olafgrabienski]

I like the sort-amount-up and sort-amount-down icons more. Just the arrows, they are visually too narrow, in my opinion.

We already use (the down variant of the sort-amount icons) for the Structure item in the Admin bar, there is doesn't have the same meaning -- not sure if that's a problem. Wanted to have a look at it, but sandboxes don't work for me atm.

[klonos]

I've restarted the PR sandboxes. Let's hope that things will come back green 🤞

@olafgrabienski I hear you re the arrows being to narrow/small. I have also thought of these:

https://fontawesome.com/icons/sort-alpha-up-alt?style=solid
https://fontawesome.com/icons/sort-alpha-up?style=solid
https://fontawesome.com/icons/sort-alpha-down-alt?style=solid
https://fontawesome.com/icons/sort-alpha-down?style=solid

But these would only make sense when sorting alphanumeric things, like node titles etc. - it wouldn't work so great with numbers/dates, which means that we'd need a way to tell things apart, and then use the numeric equivalents:

https://fontawesome.com/icons/sort-numeric-up-alt?style=solid
https://fontawesome.com/icons/sort-numeric-up?style=solid
https://fontawesome.com/icons/sort-numeric-down-alt?style=solid
https://fontawesome.com/icons/sort-numeric-down?style=solid

I also hear you re the sort-amount-down icon being used in Structure. Perhaps we need to update that one 🤔 ...Drupal uses this:

...but I wasn't able to find a free alternative for it in fontawesome 😞 ...anyway, that should be a separate issue.

[klonos]

Can I please get some feedback here? ...there are 2 PRs, each one using different icons. Can people please test and chime in to say what they think? ...do you agree with the change? ...do you have an alternative set of icons to propose instead?

PS: I've rebased both PRs, and confirmed that tests are passing and sandboxes spin up w/o issues (at least the Tugboat ones).

[indigoxela]

The sorting icons containing (latin) characters or numbers don't seem optimal to me, as they're not generic and might be the wrong choice for different languages, especially character sets. But I don't know what might represent sorting in Chinese anyway. 😉

Regarding the other ones (arrows with or without bars, or carets), I don't have any preference. Whatever fits.

[ghost]

I understand my suggestion (below) is a larger issue, but if we're considering changing icons then it should be considered now, rather than needing to change things again in future...

I propose using icon fonts rather than images, since we're discussing dark themes in other issues, and one of the sticking points is that most of our icons/images are designed only for light-coloured backgrounds. An icon font will make it easier to allow different coloured icons on different coloured backgrounds.

At least keep that in mind when deciding how to implement new icons here.

As for which icons to use, I like the arrows next to the varying-length bars.

[klonos]

I propose using icon fonts rather than images

@BWPanda care to un-postpone #364 then? 😅 ...would open the door for things like #3819 too 😉

[ghost]

Hmm, it seems that SVGs were discussed there, and that would solve the same problem here (allowing icon colours to change)...

[olafgrabienski]

I like the sort-amount-up and sort-amount-down icons more. Just the arrows, they are visually too narrow, in my opinion.

Looking again into it, I guess I have changed my mind completely:

• Of the two new suggestions, I like the arrows more. Compared to the sort-amount icons, the arrows look more clear to me. They are still narrow, but it isn't a problem with enough padding.
• I've also compared the new suggestions to the existing icons (carets). Actually, the existing ones don't look dated at all, in my opinion. Maybe it makes more sense to update the icons as part of a bigger overhaul (or of a new admin theme).

Apart of that, both PRs seem to put the icons the wrong way round. Example: admin/content?order=title&sort=asc displays the icons pointing down.

[klonos]

both PRs seem to put the icons the wrong way round

Hehe, I guess it's the way people look at things: do the buttons convey the current sorting order, or the sorting you will get after you click them? 😅

Anyway, I'm happy to change the order, but let's get some more feedback first.

Actually, the existing ones don't look dated at all, in my opinion.

It's not only that the current ones look dated (which can be a totally subjective opinion):

• They are gray color over dark blue background, which makes them less accessible
• The "down" ones are the same as what we use in fieldsets, and in drop buttons. The fieldset/dropbutton icons both perform the action of expanding, whereas the ordering icons need to convey sorting/direction.

Maybe it makes more sense to update the icons as part of a bigger overhaul (or of a new admin theme).

That would take time though, and I have found it that it's harder to get bigger sets of changes in 😓 ...I don't want to wait long for changes that are "easy wins".

[olafgrabienski]

@klonos I agree that the icons, apart of the "dated" question, are not ideal. Personally, I don't have strong feelings about which icon to choose. If the goal is an 'easy win', I'd suggest the arrows without sorting symbol, so that we don't have to (wait for a) change (of) the Admin bar "Structure" icon.

Re "do the buttons convey the current sorting order?": I'm skeptical if we should change the behavior people are used to. However, if your change was intentional, it should also be mentioned in the issue description.

[klonos]

I'm skeptical if we should change the behavior people are used to. However, if your change was intentional, it should also be mentioned in the issue description.

Nope, not intentional at all. Happy to change it if others agree re it being the "wrong" direction. Just waiting for more feedback.

...so that we don't have to (wait for a) change (of) the Admin bar "Structure" icon.

I hear you 👍 ...I'd like to fix both these things though. We never seem to have found a good icon for "Structure", so we went with the current one, which is not ideal at all.

[ghost]

If we're going to change icons, the new icons should point in the same direction as the old ones. I see only confusion otherwise.

We can open a separate issue to discuss different arrow directions if needbe, but I don't think it should be part if this change.

[klonos]

Here's the PR that uses sort-amount-up and sort-amount-down: backdrop/backdrop#2765

[klonos]

...and the PR that uses fa-long-arrow-up and fa-long-arrow-down: backdrop/backdrop#2766

[klonos]

...please provide feedback and up/down-vote on the comments above^^, using 👍 / 👎 as reaction.

[philsward]

I didn't think to ask this earlier, but would you mind adding an option for the regular fontawesome arrow? I have a feeling it wont look as good, but at least we can see the comparison. No worries if that's out of the question.

[laryn]

Am I bikeshedding with this? Riffing on #3906 (comment) I did a quick mock with the bars visually unsorted:

Using:

[klonos]

I like that icon @laryn ...is it fontawesome, and if so, then which one is it? (it would have to be black or some dark gray color though, since the unsorted headers are light gray and we'd have accessibility issues)

[laryn]

@klonos It's taken from the fontawesome icons you were using and then tweaked in Photoshop. I'm sure we can adjust colors on the SVG and then export as a PNG if we know which colors to use.

[klonos]

@laryn I admire your creativity! ...you've made an icon that I find to be quite accurately denoting "unsorted" 👏🏼

Can you please provide a transparent 64px .png in #444b53, and another in #000000? I wanna "play" with it 😅

[laryn]

@klonos unsorted.zip

[laryn]

@klonos Are we moving this back to "Needs work"? What's your feeling on it.

[klonos]

@laryn I was hoping to get more feedback before adding the "unsorted" icon, but it can be a follow-up.

The currently approved variation is the one with sort-amount-down, but we still need people to chime in re using sort-amount-down-alt instead:

[bugfolder]

When I look at both and ask myself "which conveys sorting alphabetically versus inverse alphabetically?", I'm not sure from either. I'll just click it and then go "oops, I wanted the other way" and click again. (So no preference.)

[olafgrabienski]

The currently approved variation is the one with sort-amount-down, but we still need people to chime in re using sort-amount-down-alt instead

I've just had a look at both PRs. The alternative icon sort-amount-down-alt helps me better to understand the sort order.

[klonos]

Thanks everyone for chiming in. Can someone please add the 1.19.4 milestone to this issue?

[herbdool]

Same @olafgrabienski

[laryn]

Thank you @klonos for your continued attention to detail with this issue and PR. And thanks for reviewing and testing, @herbdool and @olafgrabienski, and for feedback @indigoxela, @philsward, and @bugfolder.

It seems opinions on the regular or -alt variation of the arrow and bars icon leaned towards the -alt version, so I've merged that one into 1.x and 1.19.x from backdrop/backdrop#3715 with backdrop/backdrop#3715

[klonos]

Thanks @laryn 👍🏼

Follow-up for the "unsorted" icon: #5221 😉

[robertgarrigos]

I just come across this issue when I realized that the icons we are showing 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 de 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.

[olafgrabienski]

@robertgarrigos I agree with you, if you look at the icons in an analytical way. But when I just have a quick look at the icons, the first icon set seems more appropriate to me. I guess, that's because in the first set both elements change, and it's easier to recognize the direction of the arrow.

[robertgarrigos]

@olafgrabienski I agree that for a quick look, the arrow is very graphic, but then it shouldn't be contradictory when you look at it closely. If we use those icons just because of the arrow, let's forget about anything else which is giving wrong information.

[olafgrabienski]

If we use those icons just because of the arrow, let's forget about anything else which is giving wrong information.

Well, I'm open for that, and it reminds me at the begin of the discussion in this thread and some comments below, e.g. #3906 (comment). Anyway, as this issue here is fixed and closed, maybe open a new issue to put the decision into question?