Design an easy option to reset the filters and sort back to default

[NilakshiS]

Overview

As a user I want to be able to clear all the filters and sort sections at once, so I can get back to the default view. Design a way to reset the sort and filters to default.

Details

Currently the only way to clear filters, is to open each column header. Additionally you cannot reset the sort back to default unless you know which of the sort options is the default.

Action Items

• Compare the current designs (in figma), to see if there was something that did not get developed and needs to be sent again to dev.
• If there is no design already, create a prototype.
• Review with Product, Dev and Research and iterate if needed based on feedback.
• Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources

• On Page load the following filters and sort order is selected by default:
  • Filter by "Visible" projects
  • Sort by oldest "Created On" date first
• My Project's page https://tdm-dev.azurewebsites.net/projects
• Design Issue for filters Design Mockup: Redesign the My Projects Filtering UI #1578
  • Link to Issue 1578 Figma file
  • Link to Issue 1578 protype
• Link to current Figma file, Issue 1816

[NilakshiS]

Need feedback from product: Currently "Reset" button clears both filters and sort and there's no way to reset just the sort. Is that the desired function? Or should we create a separate button to clear sort?

Some examples of a filter overlay with different buttons to clear sort and filters

[ExperimentsInHonesty]

What kind of sort do the stakeholders want

Default sort is: Sort by oldest "Created On" date first

1. Stable sort (the way that google sheets works)
   You can sort by one column, and then by another column, and it remembers the first sort, so if the second column has values that are the same, the results within that value will be sorted by the prior sort. See image where its sorted by time first, and then sorted by day, so it shows all the Friday meetings in order of time.

2. Column sort (the way it's working now)
   When you sort the column, no other columns remain sorted, the results of sort items that have the same name/title will be random. see image

[NilakshiS]

Feedback from stakholder meeting on 10/15/24:

• For "Clear All filters" function, text buttons next to search bar are selected.
• A button next to search bar is usually the search button so we should keep a search button even if it's not needed so that the users do not accidentally clear all filters.
• The button should stay on page even if no filters are selected and should be "Clear All Filters (0)".

Screenshots of button designs approved by stakeholders

[thetanmancan]

Status update for @NilakshiS:

Progress: Prototypes of the possible "Clear All Filters" button were presented to stakeholders. I created three more possible variations based on what was selected during yesterday's meeting.

Three prototypes in the "My Project > Filtering (#1816-Open)" Figma page, at the bottom-right portion of the "1833" section

Blockers: We need stakeholder, developer, and product feedback about whether sort is expected to have only primary or both primary and secondary sorting functionality. See Bonnie's comment from yesterday above. This decision will impact whether or not a "Clear Sort" functionality needs to be implemented into filter overlays, as shown in the mockup below.

"clear sort order" mockup

Availability: I have 15 hours this week that I can spend on TDM Calculator, whether it be for this issue or another one.

ETA: Completion time depends on feedback. If we only have primary sorting, it would only take half the week to design and implement "clear sort order" links. If we have primary and secondary sort order, we will have to come up with designs for that functionality, which will likely take the entire week and possibly also next week as we think through the implications of that decision.

[NilakshiS]

Final Design:

• search bar moved to left
• clear all filters button on the right, with number of selected filters in parentheses.

Design with no filter selected

Design with some filters selected

• "Sort to default" designs not planned for now, deferred till decision is made on My Projects table sort type decision #1907