Questions and Clarification of Design for My Project Page Filtering

[entrotech]

Dependency

• When the dev team has new questions or clarifications from the design team
  • Add a question to the comment below
  • Move the issue to the questions column
  • Add ready for product and ready for design lead label

Overview

We need to review a list of potential improvements

Details

Yiran developed a re-design of the My Project Page filtering UI several months ago. We are finally getting around to implementing the design, and have several questions and suggestions about the design that need to be resolved to implement the re-design.

Action Items

• Review the problems / Suggestions and decide which we will address and make issues

Problems / Suggestions based on developer review

• Design a way to see what filters have been chosen #1829

Details

If you have all the popups closed, there is no indication of which, if any, filters are applied and no indication of any applied sorting.

Screenshots of TDM dev

I chose this filter

And then after I applied, it was not possible to see that I had used the filter

See Google Sheets filter indicator

### Overview
As a user, I want to be able to see what filters and sorting I have choosen or is default so I understand my results better.

### Details
If you have all the popups closed, there is no indication of which, if any, filters are applied and no indication of any applied sorting.

### 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 one.

### Resources
- My Project's page https://tdm-dev.azurewebsites.net/projects

<details><summary>Screenshots of TDM dev</summary>

I chose this filter

<img src="https://github.com/user-attachments/assets/e2a0cc48-1f14-443b-a5b4-92d22df85283" width=200px>


And then after I applied, it was not possible to see that I had used the filter

![image](https://github.com/user-attachments/assets/76b8636f-f4bd-49f7-a2da-6ceab4695d43)

</details> 

<details><summary>See Google Sheets filter indicator</summary>

![image](https://github.com/user-attachments/assets/ca25d7a2-e287-4f74-aaba-95b3845ece76)

</details> 

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

Details

### 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

### 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
- [ ] 

#### Resources
- My Project's page https://tdm-dev.azurewebsites.net/projects

• Re-Design sort options: change toggle buttons to radio buttons for mutually exclusive options and update style guide #1834

Details

Each popup has an option to sort by that column. The prototype design uses two toggle buttons that essentially mean "Sort Ascending" or "Sort Descending" (though the labels differ based on the column). I'd argue that toggle buttons are not an appropriate choice, since it is not possible to sort ascending and descending simultaneously. A better choice is a set of two radio buttons. This allows the user to select one or the other, but not both. Moreover, the data might not be sorted by that column at all, in which case neither radio button is checked when the popup is first opened. If the user then clicks on one of the choices, it will be applied when the Apply button is clicked. They can also choose Reset to not apply sorting by that column.

Dev has already implemented this change (see My Project's page). Example

Design will need to review and indicate what changes need to be made to comply with our design system.

• Minor changes to Filtering UI Mockup to match the style guide #1838 Design Changing the title on My Project page filters

Details

The Primary Call to Action button on each popup is labelled "Show Result", but the usual word used for something like this is "Apply".

• This is just John's opinion, so we can use another working if you want.
• Product agrees Apply is more consistent with industry standard.
• If Design has a different word we should use, please provide industry examples.
• Examples
  • Google Sheets uses "OK"

• Dev has already implemented this, see screenshot from dev site

• Update the design for filters on "Visibility" on my projects page #1835

Details

The Visibility Popup design is pretty good. I strongly suggest removing the "Search by Keyword" control, since it is unnecessary and possibly confusing. I'd prefer to see "Visible" as the first choice, since it should be the default and the most common choice.

Screenshot from Dev for sort choices

Dev is also suggesting that these should be reordered (Visible, Hidden, Both)

• Update the design for filters on "Status" on my projects page #1836

Details

For the Status Popup design, we should remove the "Search by Keyword" control, since there are only 2-3 choices, so it is unnecessary and confusing. The three choices for filtering by status are "Draft", "Snapshot" or "Draft and Snapshot", which would be better represented by a set of three radio buttons with the corresponding labels. Using two checkboxes like the prototype has a problem where unchecking both boxes would filter out all projects and isn't a useful choice, so we can prevent this problem by switching to radio buttons. IMO, we should use a second set of three radio buttons for filtering by Active vs Deleted, with the choices "Active", "Deleted" or "Active and Deleted" instead of a single checkbox, because the prototype design with a single checkbox is ambiguous to users (if the box is unchecked, will you see just the deleted projects or both the active and deleted projects?).

FYI: The filtering criteria for the other columns are either for strings or date ranges and the suggested designs are good.

Changes in the "Design System"

• Re-Design Filters: select new icons to indicate filter state #1837

Details

The filter icon has been changed in the style guide to MdFilterAlt. We might also need an icon to indicate that a filter is not applied to the column - Maybe MdFilterAltOff? See this page for the list of available icons.

Product thinks it should use filled and unfilled

• Minor changes to Filtering UI Mockup to match the style guide #1838
  • The Primary Call To Action button design from the style guide should be applied to the "Apply" button on each popup.
  • The Reset button is functionally equivalent to a Cancel button on, say the Duplicate Project Dialog, so we will apply that style unless directed otherwise. It's not clear to me if the style guide includes a button style for "Cancel". In some case Cancel is the Primary (safest option) and in others it might be Secondary, but maybe Cancel-type operations need their own button design.
• Design: Create Style Guide Presentation (Radio Buttons/Checkboxes) #1839
  • I don't think the style guide explicitly addresses the styling for radio buttons, though the Example Modal Dialog on the "Dialog Boxes and Modals" page does implicitly show an example from the app.

Resources/Instructions

• Design Issue Design Mockup: Redesign the My Projects Filtering UI #1578
• Prototype

[roslynwythe]

Hi @NilakshiS these questions were raised in #1828

1. The list often extends beyond the boundary of the drop-down window. I had this problem with the date filtering popup as well. Not sure whether we should do anything about that.
2. The prototype had checkboxes next to each item in the list - I guess they were thinking you might want to select multiple choices from the list, but I'm not sure that's really needed.
3. It's also not clear to me whether you should be forced to pick one match from the list. It might be useful to be able to just type a string, NOT select anything from the list, and apply the filter to get any projects where the column matches the substring.

Also wondering if there should be a visual cue that a filter is applied on a particular column, and also if there should be a control to clear all filters.

[NilakshiS]

Hi @roslynwythe
We've created these issues to design for resetting the filters and designing a visual cue for a filter applied:

• Design a way to see what filters have been chosen #1829
• Design an easy option to reset the filters and sort back to default #1833

As for the rest of the questions:

1. It would help if you have a visual to understand the problem.
2. The checkboxes were likely designed similar to the Google Sheets filter, to select and filter out multiple items from the list instead of only one single value at a time. Is there a reason the user might not need to select multiple values? If there are no use-cases we can redesign and remove the checkboxes.
3. I'll discuss this with the team and provide updates on what can be done.