What to Consider in Search Filtering
When it comes to building good and reliable search filters for websites and apps, there are several aspects to consider. Here are some of the aspects that complement each other and combine to enhance the search filtering performance:
Parameter priority level
The filter position
Data category
Targeted data property
The filter scale
Search results to visualize
Sorting mechanism
1. Parameter Priority
Search filtering consists of the structure of properties. You need to decide which property parameter comes first and deserves quicker access also more attention within the structure. From the users' perspective, the parameter data will not have the same usability value.
The order of the parameter priority can be just alphabetical instead of putting the most popular brand names for instance. Especially if it is a larger range of values. Therefore, list searching will be much easier as you can assume that users remember brand names well and quickly scan the list to select the item they want.
2. Filter Position
The position of the search filter most of the time depends on the filter scale and the scope of settings. Normally it is placed either vertically as a left sidebar, embedded directly in the content units, or horizontally in the page layout as inline search filtering.
The sidebar position can accommodate many search parameters and categories. Yet, the scope of settings affects the whole page as it’s not usual or even convenient to have two columns of vertical filtering on one page.
If your content is divided into modules or units, you can use inline search filtering in each of those units. Nevertheless, the filter scale would be smaller but well integrated into the scope settings with a higher level of filtering relevance.
Flexibility in the scope of search filter settings can be found in horizontal placement, as you can add multiple horizontal filter bars in sections if you need to. Although the scalability of this placement is medium, still it’s worth considering using it when you want to present different categories in one layout for instance.
3. Data Category
A good categorization of data is essential to design the search filtering system. Begin by narrowing the general category down to very specific categories. Picking familiar category names or labels would make it easier for the users to filter their search.
4. Targeted Data Property
Identify the targeted data property so you can develop a better data structure. It’s important to understand the nature of your data, whether they are numerical values, text strings, timeframe, date, range of values, a specific parameter, and quantitative or quality-related values.
These extensive varieties of data involve multiple kinds of selecting inputs which also determine the search filtering component and method that can be used.
5. Filter Scale
As explained before, the depth and position of the search filter will affect the filter scale. It also depends on the targeted data property to accommodate, as each will need a different type of filter UI, such as text and numeric input, checkbox, radio button, dropdown menu, slider, and date picker.
6. Search Results to Visualize
Another component to consider in building a filter system is how you would want to visualize the search result. The live filter is best for displaying a small number of search results. Another alternative to filter is by dividing the filter process to lessen the distraction caused by the results' automatic updating.
The last option is to use a bulk filter to simply retrieve the results once. Provide a global ‘Apply’ button to click after a user inputs all of their preferred filters. For large datasets or low-end apps, this approach would perform well.
7. Sorting Mechanism
Sorting, in contrast to filtering, does not restrict what is displayed to the user but instead modifies how the results are shown. However, the UI/ UX approach for sorting complements the filtering process when they are combined. That’s why it gives a direct impact on the filtering position and scale.
Search Filtering: Study Cases
Contra is a commission-free website directory built by independents for independent workers from various fields of expertise. The search filter to discover the independent skilled worker is located at the left sidebar.
The sidebar position for filtering is the best choice to accommodate a large number of parameter data on the Contra website. It includes a toggle button, a category dropdown, multiple tag input fields for roles, tools, and languages, also checkboxes for hourly rate and project duration filters.
What makes the Contra search filter special is the logo icon added before the Tool’s name at the tag input field. This icon helps a user to find much faster from many provided tools in the list. The additional feature for speedy searching is that all of the input fields in the filter area apply an auto-suggest list. The option at the top right of the filter area to clear all filters is easy to find and access.
