The Rise Of Search Filtering: Best Practices and UX Layouts
Search filtering is the feature that allows users to narrow down their search result sets through a series of filters.
With the rise of iPhone apps specializing in search experiences (flight, travel, e-commerce, etc.), there is a rush to be known as the best in business app that offers tailored searches.
More and more apps are switching to search filtering practices rather than pure search. These apps aim to provide a veiled pre-filtering and post-filtering process in which the users define their search criteria in an effortless UX flow in a bid to spare them the heavy lifting efforts for a specific search.
Best Practices in Search Filtering
Search filtering is a tricky business where the users should not feel as if they are spending unnecessary time in setting the filter criteria. Hence, it is essential to bear in mind the following unofficial paradigms of best practices in search filtering:
- Since the screen real-estate is limited on a mobile device, only necessary filters should be shown.
- Important filters should be promoted and highlighted so that the user knows that setting these values will refine their search data closer to their preferences.
- Less important or extra filters should be hidden under a common header that expands only when the user taps on it. This will ensure that the user has the ability to set more levels of filters while at the same time, the app does not burden the user by asking to set unimportant filter criteria.
- On the search results screen, applied filters should be visible and it should be easy to change/remove filters from the same screen. This helps in keeping the users informed of the filters they have set, during multiple back-to-back searches.
- The filter types should be easily decipherable through the controls that set their value. For example, instead of a list of price ranges, a slider control works better to set the price range value. Even if the filter functionality provided by the app is extensive, the number of filter options should be continuously evaluated for any possible optimization.
- The filter types should be easily decipherable through the controls that set their value. For example, instead of a list of price ranges, a slider control works better to set the price range value. Even if the filter functionality provided by the app is extensive, the number of filter options should be continuously evaluated for any possible optimization.
3 common UX layouts for Search Filtering
1. Filter overlays/panels
Overlay filters appear on the search results screen. Users can modify the search result list dynamically by setting the values in these filters, which appear in the form of a side panel, drawer, or modal overlay.
2. Fullscreen filtering
These filters appear when the users click filter icon on search result screen. Fullscreen filters are shown on a different screen, which appears as a view or a modal controller and utilizes the entire device screen to display filter options.
This layout should only be considered where the search requires extensively focused filtering as it takes the user out of the search result browsing context, and the user can get back to the search screen only after dismissing the present screen.
3. Filter Forms
These filters are very common in website search filtering operations. Mobile apps feature the filter form search only when the user has to arrive at a rigorously shortlisted set of results from a very big search result list that needs lazy loading to display its contents in entirety.
Search filtering is a relatively new feature that combines pure search and traditional filtering techniques seamlessly to provide an easy UX for the users to view their preferred search results through minimum inputs (mostly gestures and touch). It should be noted that the search filtering options available on a website, should be suitably modified for the mobile devices taking in mind the limited real-estate of their screens.