Indicate which column the board is sorted by

[marlenamellody]

Overview

Design a way to indicate when a column has an active sort order. So that users can see which column the board is sorted by.

Details

Filter states are currently indicated by icons. Based on stakeholder feedback, the reset button on the My projects page will reset both filters and the sort order. Therefore, we need a clear indicator to show which column currently has an active sort order.

Action Items

• [x] Design a indicator of some sort (could be an icon, label or other)
• [ ] Review with product and design. Update if needed based on feedback
• [ ] Once finalized, add before and after images to the staging deck on this slide
  • [ ] if no slide has been made, make one in the staging deck
• [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

My projects page Figma: My projects

Other issues about the sort function (with images)

• [x] https://github.com/hackforla/tdm-calculator/issues/1907
• [x] #1833

[thetanmancan]

@NilakshiS Progress update 2024-11-13

1. Progress: I'm in early days on this issue. I'm organizing it by a series of eight questions I want to answer with designs, and I've only prototyped one of those designs, and I don't think that prototype is going to get approved because it would take too much development time to undo the sorting functionality in the filter overlays we have.

If you want to check out what I'm trying to do, go to this Figma prototype and click the up/down icon in the Visibility column header. See the screenshot below for where to click specifically.

Click the sort icon to make it sort


2. Blockers: No blockers. I just haven't had the time I would have liked to work on this issue.

3. Availability: I'm hoping to have 15 hours worth of time this week.

4. ETA: I'm hoping to have this issue ready for review by next Wednesday.

[thetanmancan]

@NilakshiS Progress update 2024-11-19

I just need feedback on my design questions, which you will find on this Figma page.

More specifically, you will find the designs and their respective prototypes in the Design section shown below.

Design section with prototype flows


Question 1: Can the sort icon toggle sorting?

To make the prototype work, click on the double chevron icon in the Visibility column header.

Click the sort icon to make it sort


I believe from previous meetings, it was established that we don't have the development resources to separate the sort menu from the filter menu and create a new sort toggle. Therefore, I believe the answer to this question is a simple "no", but I still wanted to create a prototype in case for some reason we wanted a point of reference for how it could work if we decide the other designs I've come up with won't work.

Question 2: Should the sort icon be built into the column header's width?

To make either of the prototypes work, click on anywhere other than the checkboxes in the first column or any of the column headers.

Click anywhere but the checkboxes or column headers


You'll notice that for the prototype on the left, the column width doesn't change when the sort icon moves from the Visibility column header to the Alternative Number column header. However, for the prototype on the right, the column width does change. It only changes slightly because I chose a sort icon that only takes up 9 pixels in width, but the amount of change in column width would be more dramatic if we chose a different sort icon.

Question 3: Which icon should we use for sorting?

To make the prototype work here, click any of the filter icons. They can be click multiple times to change the appearance and direction of their sort icon.

Click the filter icons


When looking through the Material Design library, these were the only icons I could find that I thought would make any sense as sort icons. I personally prefer the arrow all the way on the left because

1. It has the least effect on the column header width, and
2. Because of its small width, it's easier to understand that it's meant to be additive with the filter icon and be seen as one interactive button rather than be seen as a separate button and therefore have different functionality. That being said, I wanted to give other options in case other people had differing opinions.

Question 4: Can we add a hover state for active filters?

As with the above prototype, this prototype works by clicking the filter icons multiple times.

Click the filter icons


I noticed that the filter icon that we're currently using has a hover state for when the filter is inactive, but not when it's active. That seemed oddly inconsistent and asymmetrical, so the purpose of this question is just to ask whether we're OK with adding a hover state when the filter is already active.

[NilakshiS]

From team meeting on 11/20/2024:

1. Same as before, using sort icon to toggle sorting is not planned for now. Using the filter menus to change sorting is preferred.
2. Sort icon built into the header width is preferred.
3. Icon to use for sorting to be decided by stakeholders, options are presented in the stakeholder meeting slide for next week.
4. Adding a hover state is fine.