Experimental Design [Search filter pattern]

[aklausmeier]

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

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.