“Life requires filtering, and so does App pages.”
Filter Component Overview
The function of screening component is to help people to improve decision-making efficiency through more efficient screening when facing a large amount of information. Generalized filtering components also include the search bar and Tab bar, which will not be analyzed in this paper.
Components include filter buttons and filters that contain categories and filters under categories. Frequency of use and number of filter criteria are factors that determine the style of the filter component.
Through case analysis, this paper analyzes the design of the screening component in the mobile terminal scene from the aspects of the style of the screening component and the use of the scene.
01
–
The filter component in the Tab column
Component style
Screen button position: generally located in the Tab bar on the right side of the visual weak area.
Filter form: Click the button and the filter expands the filter as a drawer down from the bottom of the Tab bar, or as a floating layer slides the filter from the far right of the screen to the left.
Style analysis
When the Tab bar is used on the interface, the first layer of content filtering is performed. In most cases, the content filtering requirements are met.
When filtering categories are large and complex, you need to add filtering components in the Tab bar to provide more detailed filtering capabilities. The filter component here has a lower priority than the other Tab criteria, and the right side of the screen is a visually weak area, which explains why most Tab filters are located on the far right.
Case a
The case is from meituan App. This page is a selection of American food categories, where the filter component is the most common style in the Tab. For users, the region, food category, price and comprehensive evaluation should be given priority when choosing a store, while the number of diners and restaurant service are only auxiliary selection conditions.
The filter uses the drawer form. To choose this style, it is recommended to use it in scenarios with few filters and no more than one screen.
Case 2
The case comes from taobao App. This page appears when the user searches globally from the home page. The filter button is located in the secondary Tab column.
When the user clicks the filter button, it is difficult to display all the information in one page because there are many screening conditions. The user often needs to slide the screen up and down to view all the information. Therefore, the form of right floating layer expansion is more suitable.
Case 3
The case comes from bilibili App. After the global search, the Tab bar expands the comprehensive Tab content by default. Users have high requirements for sorting, duration, and partition. Therefore, the filtering category is directly placed in the secondary Tab bar, which is simpler and straightforward than clicking the filter button to expand the category.
After clicking on the filter category, use drawer type. This filter component style is typically used for scenarios where the filter category is small (no more than four items) and the filter items are not large.
02
–
Bottom button type filter component
Component style
Screen button position: it is fixed at the bottom of the interface in the form of button or floating layer for user operation.
Filter form: Click the button and the filter expands from the bottom of the button up in the form of a drawer, or from the bottom up in the form of an interface float.
Style analysis
Using the screen button at the bottom of the interface, the content area category is relatively single, through the screening components can meet the screening needs, and the demand for screening is large. The bottom button, as a common button form, is more convenient for users to click, so it is appropriate to host filtering components.
With this style, when the filter button is clicked, the filter appears in preference to drawer-like floating layers that appear from the bottom up.
Case a
The case is from travel App Expedia. After entering the destination, the user enters the list page with a clear purpose to see the results. The filter button at the bottom is to help users filter the results faster and easier for users to touch. And there are many screening conditions, can not be displayed in one page, using the form of interface floating layer.
Here are two more details:
1. Due to the large number of screening categories, it is too cumbersome to manually clear single screening conditions, so a clear button is added at the bottom of the filter to make the operation more convenient. However, the bottom button is generally for “OK” operation, and “Clear” is placed on the bottom style without any indication of misoperation, which may increase the probability of misoperation.
2. After screening, the number of selected screening categories will be displayed on the screen button, bringing good feedback to users.
Case 2
Examples from Dribbble designer’s draft, current page for site search. You need to filter before the results appear in the content area. The filter button is located at the bottom of the floating layer, and the filter type is displayed in a tile instead of the filter button. The filter is unfolded from the bottom of the floating layer in a drawer style.
This style is generally suitable for scenarios where there are few filter categories and not many filters per category. The advantage is that the operation steps are reduced and the operation efficiency is improved. You can also learn some of the details of the experience: after you select an option in a filter, change it to that option synchronously in its filter category; The selected status of the filter item is consistent with that of the filter category to increase the correlation degree.
03
–
Floating layer pushbutton filter component
Component style
Location of filter button: it is located at the bottom right of the interface in the form of float button, which occupies less space.
Filter form: Click the button, the filter is mainly in the form of floating layer, or expand the filter condition below the filter button.
Style analysis
The floating filter button has the advantage of increasing the vertical space of the content area, which is less hierarchical than the bottom button filter component. But it’s also in a position to click when the user needs to do something.
The color of the button in the design should be different from the content area, and the content form should be simplified and intuitive as far as possible. If the sector filter in case 3 is used, the filtering category should be 1-2, and the number of filtering items should be small and the copy should be simplified.
Case a
The case source is dribbble concept draft. The filter button is located at the bottom right of the interface, close to the right edge of the screen, floating on the upper layer of the filtered content, and disappears when sliding the screen. After clicking the filter button, the filter layer will be expanded from the right side of the screen, and the original filter button will be changed into the confirm button.
This button form maximizes the space left for the content area, and the lower right corner is the weak area for users’ attention, so that users can operate according to their needs. As mentioned in the previous case, the filter uses the right floating layer, which is suitable for scenarios with many filtering conditions. Moreover, the floating layer in the form of sidebar has a high correlation with the filter button, which is relatively consistent with the user’s cognition. Learnable points in experience details and changes in button functions make experience more convenient.
Case 2
Examples are drawn from dribbble designers. The filter button is located at the bottom right of the interface but has no edge. The filter is expanded from the bottom up in the form of a bottom layer. There are few filters, so the bottom layer form is used.
Case 3
Examples are drawn from dribbble designers. The form of the screen button is similar to the previous case, but the difference is that the screen conditions are directly displayed at the screen button. It can be known that the dimension of this content area is currently screened as “30M”. This style applies to scenarios where the filter criteria are the same dimension.
After clicking the button, expand the fan filter from below the button and slide to select the filter criteria. This filter style is used in limited scenarios, mostly for the length or number of selections, and mostly for single selections. So the filter does not need an “OK button”, just a “close button”. The filter here can also select other forms depending on the scenario.
04
–
The lines
Let’s take an example to practice.
The content area in the interface below is an overview and charts of monitoring data. A screening component needs to be designed to screen the content area in different periods.
Several requirements need to be determined before design: frequency of use of filter components, number of filter categories, number of filter items, single check relationships, and priority between filter criteria
Further define requirements
There is only one time period for the filter category, and the number of filters is not fixed. When you enter this page, you can determine that 1 hour basically meets your data viewing requirements based on your usage requirements. By default, 1 hour is displayed. Therefore, in this scenario, 1 hour is used to basically meet users’ data viewing requirements. It can be determined that users do not use filtering components frequently.
Program parsing
Scheme 1, Tab column format
A Tab is a filter for the entire page, mostly in different dimensions, and here there’s only one dimension, period.
The location of Tab is near the visual hot spot area, but the user’s demand for filtering components is not high, so it occupies the space of the overview area.
Scheme two, bottom button form
The bottom button is located in the user’s custom area, which is slightly more hierarchical and reduces the overall height of the content area.
Scheme three, floating layer button form
The button on the floating layer in the lower right corner belongs to the visually weak area of the page, so that users can browse without being affected by the button; But the button has a strong contrast color, in the screening needs to meet the use of demand.
The filter is in the form of a time selector, which can meet the scenario with a large number of filter items.
05
–
summary
These are my thoughts on common filtering components, each of which has its pros and cons. But the ultimate goal of our filter component design is to help users filter information and make efficient decisions. This requires designers to design the operation experience in line with user usage scenarios according to screening requirements and user habits.
Check out more original content