Mastering Filter Design: Boost User Efficiency in B2B Interfaces

Introduction

Filtering is a common feature with a wide range of applications in product design. For example, when shopping, users select high‑sales, affordable, free‑shipping items; a well‑designed filter area enables quick data query and location, helping users find satisfactory products efficiently.

1. Filter Overview

Filters, also known as “filters,” are part of a search framework used for content extraction: one class of data is displayed while another is hidden, often integrating many components.

In B‑side design, filters are crucial for forms, allowing users to quickly locate data among massive form entries, segment forms, shorten search time, and meet real‑world business scenarios.

2. Types of Filter Presentation

Common filter controls include search and conditional filters, which, although both appear in filter areas, differ in purpose.

Search

In B‑side system UI design, search actively retrieves matching content based on user‑specified conditions.

Conditional Filter

Acts like a sieve separating materials by granularity, allowing users to narrow the scope by selecting various conditions; it is more passive.

Both functions let users distinguish content using specific conditions to find desired results, and they complement each other; a combined filter area is often needed.

2.1 Search Filters

Exact Search

This method offers high accuracy and immediate results but requires users to input detailed queries, remember exact terms, and have input hints. It suits users with clear goals and a dedicated search button, and can be combined with inherent filter classes.

Fuzzy Search

Fuzzy search matches synonyms to improve precision, reducing memory load. It suits ambiguous queries but may return many similar results that need manual discrimination. It works when users have vague targets, tolerates format errors, and can be paired with existing filters.

2.2 Conditional Filters

Dropdown Filter

Advantages: high space utilization and neat containment without occupying page space. Limitation: cannot view all fields at once; users must click to explore.

Fixed‑Option Filter

Suitable when dropdown options are limited and categories are clear; operation is convenient, reducing user effort. Usually requires a search/confirm button, though some products execute on selection. Context determines the best approach.

Matrix (Tile) Filter

Users see all filter items directly, can input many conditions, and reduce steps, improving efficiency. Drawbacks include large space consumption and information overload, which can increase decision time; not ideal for many options. Follow the 7±2 rule for the number of conditions.

Header Filter

Clicking a table header filters the current column directly—simple and intuitive—but only filters that column, offers few fields, and may clash with sorting. Icons can affect header recognition, and learning cost is high.

TAB Filter

Each TAB represents a dimension, displaying filter content in a tiled manner for easy identification and low learning cost. Limitations: limited number of fields per TAB, less flexibility, and poor support for custom items. Best for scenarios where dimensions are mutually exclusive, such as time or status.

2.3 Combined Filters

In B‑side table pages with many field attributes, simple retrieval often fails to locate target data accurately. Therefore, multiple non‑overlapping attributes are listed, and search, filter, and TAB switching are combined for multi‑attribute retrieval. Combination display methods include:

Tile‑Style

Advantages: Users see all options directly, facilitating recognition and improving filtering efficiency; comprehensive fields minimize omission.

Disadvantages: Many items consume large page space, overload information, increase decision time, and are unsuitable for numerous options; typically used with “select‑and‑execute” behavior.

Suitable for scenarios requiring multi‑dimensional filtering with varying granularity.

Collapsible‑Style

Improves tile‑style by collapsing low‑frequency conditions while keeping high‑frequency ones visible, saving space and guiding users effectively.

3. Filter Feedback

Two feedback modes exist: real‑time data update and manual data update.

Real‑time Update

The interface matches all set filters and updates results instantly. This provides a convenient experience for low‑risk interactions but can become confusing with many multi‑select filters or complex inputs, especially with large data volumes that may cause latency.

Manual Update

Results refresh only when the user clicks a query button. Suitable for complex, multi‑dimensional filters, as it reduces waiting time compared to real‑time updates, especially with large datasets.

4. Considerations When Using Filters

When Not to Use Filters

Filters require clearly classifiable information. Data such as user IDs, phone numbers, names, or emails without obvious rules are better served by search.

Filter Classification Requirements

1. Categories must align with common perception, e.g., date formats, geographic hierarchy (province‑city‑district).

2. Category labels should be clear and understandable to avoid user confusion.

5. Conclusion

This filter design guide concludes here; adapt the principles to your project's characteristics and needs, and feel free to point out any inaccuracies.