Filtering
The application of attributes to find matching items from a data set.
Coded Components
Helper classes: Looking for a complete list of helper classes for these components?View helper classes
Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.
Horizontal Filtering
Vertical Filtering
Keyword Filter
Filter Buttons
No items found.
Heading
No items found.
Usage
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 five dropdown filters or 10 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
Do.
Don't.
Do.
Don't.
Do.
Don't.
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
Accessibility
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.