Overview
Filtering plays a crucial role in enhancing usability and improving efficiency by providing a tailored experience. Filtering empowers users to customize content viewing, optimize data analysis, reduce information overload, and simplify complex tasks within the platform. Filtering works by applying predefined rules or criteria to input data, modifying it accordingly, and presenting filtered output to users. This direct control significantly improves data discoverability and user productivity, minimizing visual clutter and focusing attention on critical items.
Implementing the Filtering pattern ensures a more efficient and intuitive user experience. By giving users direct control over what they see, it reduces the cognitive load associated with sifting through irrelevant information. This leads to faster task completion, improved decision-making, and overall greater satisfaction with the platform.
| Type | Primary use case | Application behavior | Placement |
|---|---|---|---|
| Filter | Refining data with individual criteria | Applied individually on selection | Highly flexible; can be embedded inline, in panels, or floating containers |
| Filter group | Grouping multiple filters for large datasets | Applied all at once by a single Apply action | Flexible; can be in a popover, side panel, or modal |
| Quick filter | Rapid filtering of multiple data views | Applied individually on selection | Flexible; can be in a popover, side panel, or modal |
| Condition builder | Constructing advanced, complex queries | Users define complex logic, then apply all at once | Rigid; requires large modals or panels due to space needs |
| Search facets | Narrowing down search results on search pages | Applied individually through discrete selections | Rigid; usually fixed to a left-side panel |
| Tab filter | Filtering search results by predefined categories | Applied individually by switching tabs | Rigid; constrained to a horizontal tab bar above results |
Filter
A Filter component can be used individually or as part of a larger filtering system. It provides individual controls for refining data. Filters are versatile and can be deployed in a horizontal filter bar at the top of a section or a page, a vertical filter panel typically on the side, or within a contextual side panel that appears as needed.
These placements cater to different use cases, such as page-level filters that affect all content on a particular page, or section-level filters that only apply to a specific section within a page. This adaptability ensures that the filter is always accessible and appropriately scoped to the content it is intended to refine. Additionally, a filter can function as a subcomponent within a larger Filter group, contributing to more complex filtering scenarios.
- When to use: Use an individual Filter when users need to refine data based on a single criterion or a few simple, independent criteria.
- Benefits: Filters offer flexible placement and clear individual controls, making them highly accessible for quickly refining displayed content or data.
Horizontal
Quick filter
Quick filters are designed for rapid, client-side filtering of multiple views of the same data. It provides a lightweight and accessible way for users to switch between predefined data subsets or apply simple, common filters without navigating to a dedicated filtering interface. Often implemented within a popover for contextual access or a side panel for persistent, yet unobtrusive, filtering options, Quick Filters excel at speed and ease of use. They enable users to quickly toggle between relevant data views without interrupting their workflow, and can even be configured with preselected or default filters for even faster analysis.
- When to use: Use Quick Filters for rapidly filtering data directly on the client side without needing complex database queries, especially when analyzing data across different views (e.g., a product manager analyzing data with a narrow focus across various views for planning).
- Benefits: Quick Filters simplify data exploration by offering immediate, highly accessible filtering options, improving efficiency and enabling users to quickly gain insights from various data perspectives.
Condition builder
The Condition builder offers a powerful and advanced filtering experience, enabling users to construct complex queries on large data sets. Unlike simpler filters, it allows for sophisticated logic using operators (e.g., "is," "is not," "starts with"), logical connectors (AND/OR), and even dot-walking to access related record fields. This robust capability empowers users to create highly specific and nuanced filters. The Condition Builder also supports saving and managing these complex filters for future use, and often includes options for sorting and grouping results. Due to its advanced nature, it is typically presented in a modal for focused interaction or within a dedicated horizontal or vertical panel when more screen real estate is available.
- When to use: Use the Condition Builder when users need to define complex, multi-part logic, including nested AND/OR conditions, comparisons, and combining multiple fields/parameters. It is best suited for mid-to-advanced power users, such as CRM administrators or data analysts, who are familiar with logical structures and require precise control over data filtering.
- Benefits: The Condition Builder provides unparalleled precision in data filtering, allowing users to efficiently find specific information, manage tasks, and generate highly targeted reports from large data sets.
Search facets
Search facets are specifically designed to refine and narrow down the focus within result sets on a search results page. They typically appear as a panel, acting as categories or attributes that users can select to filter their search results. This pattern is widely used in search-heavy environments, allowing users to drill down into results based on criteria. Search facets provide an intuitive and efficient way for users to explore and refine large volumes of search returns.
- When to use: Use Search facets when users need to refine large search result sets by selecting from predefined categories, attributes, or properties.
- Benefits: Search facets improve discoverability, enhance navigation, and provide efficient filtering of search results without complex queries.
Tab filter
A Tab filter is specifically used to filter search results by presenting predefined categories as selectable tabs. Each tab represents a distinct filter criterion, and selecting a tab immediately updates the displayed search results to show only items matching that category. This type of filter is particularly useful for segmenting search outcomes into broad, easily digestible groups, allowing users to quickly navigate through different views of the search results without constructing complex queries.
- When to use: Use a Tab filter to quickly segment search results into broad, predefined categories, allowing users to easily switch between different views of the same data.
- Benefits: Tab filters provide a simple and immediate way to refine search results, enhancing navigation and simplifying data exploration by reducing the need for complex queries.
