Experimental Design filter and sort a long list

[benbrasso-agile6]

What

Give a brief description of the component or pattern you want to propose.

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

What problem does this component or pattern solve for the user?

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

Context or task: Explain the scenario or user tasks where this component is, or could be, used.

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

Describe the key interactions for this component, calling out any specific considerations for mobile.

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

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

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

Include any accessibility considerations.

Guidance

What would you want to tell other teams about this component or pattern?

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

Provide a link to your collaboration cycle ticket.

Collaboration Cycle for Unified Appointment Experience, Appointments, Community Care Direct Scheduling

Your team

Tell us what team you are on.

Unified Appointment Experience / Appointments FE

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

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:

• 9 of 15 participants noticed the sort and filter link without help from the moderator. 4 of 15 found the sort and filter link after the moderator helped guide them to it, while 2 participants never noticed it or were asked about it by the moderator.
• 10 of 13 participants understood the concept of using the filter and sort to narrow the provider list to their own preferences.
• 12 of 13 participants reported that the type of filters on the filter and sort page met their expectations.
• 11 of 11 participants were able to identify and understand that the filters they selected were applied when reviewing the resulting long list of objects page.

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)

Include any existing code.

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.

[benbrasso-agile6]

VFS teams are reviewing and providing feedback. Will ping Carol when ready.

[caw310]

@benbrasso-agile6 the next DSC meeting will be Thursday, Aug 29. Let me know if you would like to have this on the agenda.

[benbrasso-agile6]

Yes please. That allows VFS team members time to make edits. TY

[benbrasso-agile6]

When you're able to, feel free to add me to the invite, TY @caw310

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

[benbrasso-agile6]

No. OCTO-DE Leads would like VFS Teams to work together before presenting to DSC. Alignment is happening in Figma.