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

[NilakshiS]

Overview

The toggle buttons currently used in the prototype might confuse users, as they look like you can select multiple options. However, you can only sort in one way at a time. We should either change the design or use radio buttons instead, as the Dev team suggested.

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).

Image of Toggle buttons on "Created On" column by default


Image of Toggle buttons on "Created On" column on Hover


Dev team suggests 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.

A prototype using radio buttons instead of toggle buttons


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).

Action Items

• [x] Create a prototype for an alternative design.
• [x] Review with Product, Dev and Research and iterate if needed based on feedback.
• [x] Update the style guide to add the new design.
• [x] Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.
• Will be added to style guide and approved by stakeholders using #1843

Resources

• My Project's page https://tdm-dev.azurewebsites.net/projects
• Design Issue for filters #1578
• Link to Figma file (Refer to designs dated 01/31/2024 and 02/15/2024)
• Link to the Figma Prototype for filtering UI

[namigoeku]

Although I understand Dev's concern regarding the toggles, I believe toggles would provide a more modern UI as they are either on or off and when paired with other features like the checkboxes, offer less cognitive load. I have drafted some ideas.

[namigoeku]

Changed the design to include just the radio sort by ascending/descending. Updated this portion in the Figma prototype (#1578 #1386 )

[NilakshiS]

Added the radio buttons and sort options to the new prototype made as part of #1885

Screenshots of the updated designs from Figma