Open benbrasso-agile6 opened 2 months ago
VFS teams are reviewing and providing feedback. Will ping Carol when ready.
@benbrasso-agile6 the next DSC meeting will be Thursday, Aug 29. Let me know if you would like to have this on the agenda.
Yes please. That allows VFS team members time to make edits. TY
When you're able to, feel free to add me to the invite, TY @caw310
@benbrasso-agile6 Sorry, was this ready for today? I thought it needed more time. The next meeting that we could get this on the agenda for is Sept 12. I'm out next week but can add you to the invite when I return.
No. OCTO-DE Leads would like VFS Teams to work together before presenting to DSC. Alignment is happening in Figma.
What
There are two parts to the filter and sort a long list pattern, which includes the informational feedback to users on what filters and sorting are applied when reviewing a long list of objects and the filter and sort sub task page.
Purpose
Follow this pattern to filter and sort a long list of objects and provide informational feedback to users on what filters and sorting have been applied when reviewing a long list.
Usage
The filter and sort a long list pattern should, or could be, used when users are presented with a long list of objects that can be filtered or sorted by 3 or more attributes (e.g., 1 sort, 2 filters or 3 filters). The filter and sort a long list pattern should, or could be, used when a web page, web application, or tool has greater than 10% of mobile visitors.
Behavior
To navigate to the filter and sort sub task page from the long list, there is a single interaction using a link with filter icon component. E.g., "Filter and sort." Using the "keep it simple" design principle, combining these two interactions into one limits the decision-making burden on the user. This interaction is also an example of the "one thing per page" design principle, to chunk out content to reduce cognitive load on the user to complete a task.
The second key interaction is selecting field input values on the filter and sort sub task page. When appropriate, default field values can be used to reduce the number of required interactions on the page, including "All" or "Any [field name]." For example, "Any gender." The filter and sort sub task page should include an "Apply" primary button to submit the selected filter and sort values, "Cancel" link to navigate back to the previous page, and a "Reset All" secondary button to reset the filter and sort field values back to their default values.
The last interaction, rather informational feedback, is on the resulting long list with the selected filters and sorting values applied. To avoid overwhelming the user with too much information, the applied filters and sorting should, or could be, truncated to the following format: "[00] results, sorted by [sort value] with [00] filter[s] applied." It is not interactive, i.e., to keep the one thing per page design principle intact, but does provide assurance to the user that their filter and sort selections have been recorded. And, in order to make changes to the filters and sorting again, users would navigate to the filter and sort sub page from the long list through the previous interaction of selecting the "Filter and sort" link with filter icon.
If the combination of filters and sorting values results in 0 results in the long list, then content on the long list page should communicate what happened and provide instructions on how to fix the issue.
Examples
Figma workspace
Long list page with "Filter and sort" link and informational feedback on the default filters and sorting values applied
Accessibility considerations
Coding this as a ul unordered list, with each available object as a li list item. When coded as a list, screen reader users have a couple of extra tools for moving through that list efficiently.
Filter and sort sub task page
Guidance
Cancel link navigates user to previous page using the previously submitted filter and sorting values.
Long list page with "Filter and sort" link and informational feedback based on a user's filter and sort value selections
Zero results page
Accessibility
Guidance
Mentioned above:
The filter and sort a long list pattern should, or could be, used when users are presented with a long list of objects that can be filtered or sorted by 3 or more attributes (e.g., 1 sort, 2 filters or 3 filters). The filter and sort a long list pattern should, or could be, used when a web page, web application, or tool has greater than 10% of mobile visitors.
Using the "keep it simple" design principle, combining these two interactions (i.e., filter and sort) into one limits the decision-making burden on the user. This interaction is also an example of the "one thing per page" design principle, to chunk out content to reduce cognitive load on the user to complete a task.
When to consider something else
The filter and sort sub task page becomes less valuable to the user when there are 2 or fewer filter and sort input fields. E.g., if there's 1 or 2 filter or sort fields, consider placing those components on the same page as the long list. More value to the user is paid off for using a separate page when there are many filter and sorting options to 1) reduce cognitive load, and 2) not overwhelm users with too much information on the long list page.
Collaboration Cycle Ticket
Collaboration Cycle for Unified Appointment Experience, Appointments, Community Care Direct Scheduling
Your team
Unified Appointment Experience / Appointments FE
Research (optional)
Key findings
In the 2024-06 Community Care Self-Scheduling - Usability and Concept Testing research, 15 participants, 4 of which were screen reader AT users, produced the following key findings:
And, to prevent one size fits all thinking, this research made sure to stress test the VFS product with underserved Veteran populations, including those with cognitive disabilities and AT users, as well as use mobile prototypes to help uncover the most important information and choices to the user, since they’re confined to a smaller form factor.
Code (optional)
Next steps
You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.
Submit requests to join an upcoming Design System Council meeting in #platform-design-system.
During the meeting, the Design System Council Working Group will evaluate the request and make a decision.
If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.