You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Oct 22, 2024 - Draft issue, we have a PO sync on OCT 30 for related collab cycle, DSC meeting on NOV 7]
What
Filter pattern within search products that produce a large volume of search results. Typically, in large libraries of content or articles.
Purpose
Increase content findability by allowing users to navigate and filter content in an easy and meaningful way to avoid information overload and reduce cognitive burden. Addresses Veteran feedback of poor findability.
Usage
Potential use cases include Resources and support and VA.gov search.
Behavior
User can search with or without filters. User can filter with or without search.
When search is used, the search term stays persistent in the search input field making it unnecessary to show a filter chip [potential new component].
Show filters button opens a side drawer for filter categories that could potentially take up a considerable amount of space. The number of categories is expected to grow as more content articles are added with content migration and multiple languages support. Placing in a side drawer allows user to focus on filters if they choose to use them but minimally present in UI if a user only wants to search.
On mobile this drawer overlays full screen.
Each category in the filter side drawer is in an accordion component. The accordion contains additional components that determine the filter’s selection method such as checkbox, radio button, etc. Filters in the case of Resources and support include multiple categories with multi-select. By default, only first accordion is open to indicate they are all expandable, mobile friendly to not have them all open and forcing scroll depth.
Filter categories in filter side drawer show a numeric indicator of how many filters have been applied, keeps user aware when accordions are closed.
Clicking the “APPLY” button immediately completes the action by auto closing the side drawer and refreshing results screen.
Applied filters show as a dismissible filter chip directly under the search with an unstyled button to allow a clear all function.
Examples
Figma designs with annotated behaviors near each screen.
Accessibility
Follow the respective accessibility guidelines for the components used in this pattern.
more tbd (prelim conversations with Sitewide a11y lead)
Guidance
Follow this pattern to allow the user to filter their search results in large libraries of content.
The team plans to conduct research on this pattern beginning November 2024.
Code (optional)
Include any existing code.
Next steps
Scheduled to present to the Design System Council at the NOV 7, 2024 meeting.
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.
The text was updated successfully, but these errors were encountered:
[Oct 22, 2024 - Draft issue, we have a PO sync on OCT 30 for related collab cycle, DSC meeting on NOV 7]
What
Filter pattern within search products that produce a large volume of search results. Typically, in large libraries of content or articles.
Purpose
Increase content findability by allowing users to navigate and filter content in an easy and meaningful way to avoid information overload and reduce cognitive burden. Addresses Veteran feedback of poor findability.
Usage
Potential use cases include Resources and support and VA.gov search.
Behavior
User can search with or without filters. User can filter with or without search.
When search is used, the search term stays persistent in the search input field making it unnecessary to show a filter chip [potential new component].
Show filters
button opens a side drawer for filter categories that could potentially take up a considerable amount of space. The number of categories is expected to grow as more content articles are added with content migration and multiple languages support. Placing in a side drawer allows user to focus on filters if they choose to use them but minimally present in UI if a user only wants to search.On mobile this drawer overlays full screen.
Each category in the filter side drawer is in an accordion component. The accordion contains additional components that determine the filter’s selection method such as checkbox, radio button, etc. Filters in the case of Resources and support include multiple categories with multi-select. By default, only first accordion is open to indicate they are all expandable, mobile friendly to not have them all open and forcing scroll depth.
Filter categories in filter side drawer show a numeric indicator of how many filters have been applied, keeps user aware when accordions are closed.
Clicking the “APPLY” button immediately completes the action by auto closing the side drawer and refreshing results screen.
Applied filters show as a dismissible filter chip directly under the search with an unstyled button to allow a
clear all
function.Examples
Figma designs with annotated behaviors near each screen.
Accessibility
Follow the respective accessibility guidelines for the components used in this pattern.
more tbd (prelim conversations with Sitewide a11y lead)
Guidance
Follow this pattern to allow the user to filter their search results in large libraries of content.
Collaboration Cycle Ticket
Resources and Support, Search experience enhancements
Your team
Sitewide public websites
Research (optional)
The team plans to conduct research on this pattern beginning November 2024.
Code (optional)
Next steps
Scheduled to present to the Design System Council at the NOV 7, 2024 meeting.
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.
The text was updated successfully, but these errors were encountered: