Filtering

The application of attributes to find matching items from a data set.

Overview

  • Have users select what they want to see rather than deselect what they don’t want to see.
  • As far as results are concerned, when no filters are selected it's the same as all filters being selected.

Filtering Logic

Filters can be “and” or “or” operators:

  • Or – the system finds each result that has ANY of the selected attributes. Within a single category, such as screen size, the filters are “or” operators.
  • And – the system finds each result that has ALL of the selected attributes. Across different categories, such as screen size and hard drive, the filters are “and” operators.

Sometimes a mix of “and” and “or” can be used. For example, product filtering is commonly a mix of both operators.

Filter Stacking

Filter controls conform to space available on any given device. Horizontal rows of several filters is possible on tablet (medium) and desktop (large) but less practical on phone (small). On phone, filters are typically stacked vertically.

Smaller Breakpoints

On smaller breakpoints, filtering is done via an off canvas. In Dell.com Support and other scenarios, if there are more than 5 dropdown filters or ten selectable filters, the experience should likewise use an off canvas.

The off canvas experience provides an always-visible button to “Apply” filters, which helps users easily transition to results.

A filter collection is more practical on larger breakpoints. On smaller breakpoints, it takes up space that's more useful for showing filtered results, and is therefore not shown.

Secondary and Stroke Styling

Filtering components based upon dropdown buttons come in two styles:

  • Secondary button styling is used when filtering is a primary focus of the page. For example, on a product category page.
  • Stroke button styling is used when filtering is a less common action.

Existing Patterns

Filtering makes use of many existing patterns that work in combination, such as dropdown buttons, mini buttons, accordions and inputs

For those filtering components that are button-based, see the usage details for buttons.

For those filtering components that are accordion-based, see the usage details for accordions.

For those filtering components that are input-based, see the usage details for inputs.

Keyword Filtering

Keyword filtering presents the possibility of returning zero results. If this occurs, provide a message at the top of the results area indicating that no results matched the filter.

  • The preferred experience is to avoid zero results by deactivating/graying out options that would return zero results. If the preferred experience is too impractical, then provide a message to indicate there are zero results, using the informational notification pattern.
  • The system logic that prevents zero results and refreshes after each selection can be rather complex, so be prepared for a significant investment in development time to achieve this important UX objective.

Sorting Component

The default sort order, and the order of the options within the dropdown, should reflect the most popular choices for users of the current site segment.

Do's and Don'ts

Types

Variants

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Filter Buttons

<fieldset> <legend> <h4>Button Filter Title</h4> </legend> <div class="dds__row dds__no-gutters" data-toggle="dds__button-filter"> <div class="dds__filter-item" tabindex="-1"> <input type="radio" id="RadioButtonFilter1" name="ExampleRadioButtonFilter" value="RadioButtonFilter1" class="dds__btn-input dds__sr-only" checked=""> <label for="RadioButtonFilter1" class="dds__btn-filter dds__active" data-filter-value="Option 1">Option 1</label> </div> <div class="dds__filter-item" tabindex="-1"> <input type="radio" id="RadioButtonFilter2" name="ExampleRadioButtonFilter" value="RadioButtonFilter2" class="dds__btn-input dds__sr-only"> <label for="RadioButtonFilter2" class="dds__btn-filter" data-filter-value="Option 2">Option 2</label> </div> <div class="dds__filter-item" tabindex="-1"> <input type="radio" id="RadioButtonFilter3" name="ExampleRadioButtonFilter" value="RadioButtonFilter3" class="dds__btn-input dds__sr-only"> <label for="RadioButtonFilter3" class="dds__btn-filter" data-filter-value="Option 3">Option 3</label> </div> </div>
</fieldset>

No items found.

No items found.

No items found.

For those filtering components that are button-based, see the style content for buttons.

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

You may also refer to this article about creating accessible forms from WebAIM.

Ensure users with screen readers can identify the overall purpose of the filters and the high-level categories of filter options. Avoid vague labels like “Select”.

Enable users to skip ahead to the next category without listening to each filter option in the category.

To ensure multi-select checkboxes aren’t appearing as links, include an ARIA-expanded (state) or code as combo checkboxes.

Single Select & Multi-Select Dropdown Filter

See the accessibility content for buttons.

Please refer to the accessibility guidelines for checkboxes.

Keyword Filter

See the accessibility content for inputs.

Accordion Filters

See the accessibility content for accordions.

Filter Buttons

See also the accessibility content for radio buttons.

Sorting Component

See the accessibility content for selects.