Page MenuHomePhabricator

Table: Reconsider the icons used for sorted columns
Open, Needs TriagePublic

Description

The sort icon changes in the UI when the sort prop updates (eg. {column1: 'asc'} to {column1: 'desc'}) which indicates that the sort order has updated in a column. When a column is not sorted, it uses the icon cdxIconSortVertical. If the column is sorted, the icons used are either cdxIconUpTriangle or cdxIconDownTriangle depending on the sort order.

sort-icon.gif (334×650 px, 43 KB)

There's been internal feedback within Design-System-Team that this experience is jarring. We should reconsider if the icons used for the sorted state can be resized/repositioned to be less jarring, or if new icons are needed specifically for this use case.

Event Timeline

Thanks again for reporting this, Lauralyn! I'm aware that more details still need to be added to this task, so my apologies if my interpretation of the issue isn't correct. I understand the perceived jump and misalignment between sorting states. Nevertheless, the current appearance and placement of the sort icons (captured below) match the proposed designs.

sort-icon.gif (334×650 px, 43 KB)

We opted for the current solution – in which the sort-vertical icon is replaced by the corresponding triangle icons to indicate direction – because we found this approach simpler and more appropriate to ensure visibility.

Now, if members of the DST agree that the current appearance of the sorting indicators is not optimal, then I would suggest converting this into a design task. Modifying the alignment of the icons with their current size (I'm unsure of whether that is what the ticket is proposing!) would make them look misaligned in relation to the text. I'll be happy to review alternative options again (e.g., using color instead of permanence) and hand over a different solution. Pinging @CCiufo-WMF and @mwilliams for visibility.

Thanks again for reporting this, Lauralyn! I'm aware that more details still need to be added to this task, so my apologies if my interpretation of the issue isn't correct. I understand the perceived jump and misalignment between sorting states. Nevertheless, the current appearance and placement of the sort icons (captured below) match the proposed designs.

sort-icon.gif (334×650 px, 43 KB)

We opted for the current solution – in which the sort-vertical icon is replaced by the corresponding triangle icons to indicate direction – because we found this approach simpler and more appropriate to ensure visibility.

Now, if members of the DST agree that the current appearance of the sorting indicators is not optimal, then I would suggest converting this into a design task. Modifying the alignment of the icons with their current size (I'm unsure of whether that is what the ticket is proposing!) would make them look misaligned in relation to the text. I'll be happy to review alternative options again (e.g., using color instead of permanence) and hand over a different solution. Pinging @CCiufo-WMF and @mwilliams for visibility.

If the current behavior is intentional from a design perspective, I'd suggest we decline this task. Personally it doesn't look jarring to me based on the screen recording.

A rule of thumb for good user-interface is that icons only move when the movement is intended to provide the user feedback and consistent.
That's not the case here, and therefore jarring.

Thanks, Volker. Well, the icons are technically not moving, since the replacement happening in the exact same position, but got ya. On the other hand, feedback on the change of sorting direction is somewhat needed: I'm not implying that this is the nicest way to accomplish that, but we'll have to keep that requirement in mind while working on an alternative design solution. I'll bring this topic to our DST design sync today, so we can incorporate other team member's opinions and decide how to move forward.

CCiufo-WMF renamed this task from [placeholder] Table: align the sort icon SVGs to Table: Reconsider the icons used for sorted columns.May 8 2024, 4:53 PM
CCiufo-WMF updated the task description. (Show Details)
CCiufo-WMF moved this task from Triaging to Design Upcoming on the Design-System-Team board.

In the DST Design Sync today we agreed this should be a future improvement to the Table, but would not be a blocker for release.

May I suggest maybe blurring the opposite section of the sort order and getting feedback if that is not jarring anymore?

We didn't explore blurring, but we considered toning down the color of the opposite indicator and/or highlighting the icon that indicates the active sorting mode. Those alternatives would help minimize (or remove) the perception of the switch being so jarring. Some examples:

Screenshot 2024-06-06 at 19.52.52.png (476×592 px, 21 KB)
Screenshot 2024-06-06 at 19.54.16.png (674×952 px, 34 KB)
Screenshot 2024-06-06 at 20.02.09.png (936×1 px, 52 KB)
subtle + disabled content colorprogressive + disabled content colorprogressive + subtle (wouldn't recommend due to lack of contrast)

Figuring out a more elegant transition between sorting states sounds like a nice follow-up improvement. I'll create some prototypes to restart this conversation and hopefully find a new, more acceptable approach.