We often want to find something when we play with our mobile phones. It can be a shoe we want to buy, a car we would like to rent, finding a hotel for our next vacation, and more. Since users do many of these search tasks on the go, while taking the bus or the metro from one side of the city to the other, on the sofa, or even drinking coffee with friends, we search on our mobile devices.
Creating an effective search feature always takes time for designers. We need to organize the information on the page and ensure users can filter information quickly and easily to find what they need.
In contrast to desktop screens with a lot of space, mobiles have a small screen space. Aside from the common ways to filter information, this can make searching more difficult and complex than on a desktop.
In this article, I will walk you through some of the best practices for filtering in mobile phones. This will help you design filters for mobile apps more easily by following simple guiding principles.
The main reason mobile filters are so important to design and think about is that more than 50% of global website traffic comes from mobile devices. That means people use their phones to navigate the internet more than desktop computers.
In addition, the mobile screen is different not only in size but also in the way users interact with the interface. In desktop apps, the user interacts with the screen through the mouse, but in mobile apps, the user interacts with their fingers. That is something we need to consider, as some inputs need to be adapted to this situation as well.
In most apps, whether B2C or B2B, the search field is often the first step in filtering information within the product. The search function can explore all the information within the app, providing results based on the user’s input.
Over time, this component evolved and gained more functionalities, allowing users to find what they were looking for after the first search. Here are some options you can add to the input to do it.
Place the search input in a visible, preferably prominent place; in most cases, it is at the top of the screen or the bottom of the app as a separate section. If your screen has no space, you can add an icon that shows the search input when the user clicks on the icon:
You should clearly label the search field so it’s easy to work with; it is better to clarify that it is a search field. You can do this by adding an icon and, apart from that, adding a placeholder that explains it.
A simple approach is to use “Search” as a placeholder, but you can make it more engaging. For example, if you make a mobile app to search for a house for rent, you can add a label like “Search for your home”:
When typing in the search box, autocomplete and suggestions are more than necessary. This way, as the user begins typing, you can offer suggestions, reducing the need to type the entire text. In addition, the suggestions can give them hints on what to search for.
For example, if they search for a vacation, the system can suggest places to focus the search and help them find what they are looking for:
It’s a good idea in some apps to show users their search history when they click on the search input since people sometimes search for the same stuff.
For instance, YouTube displays users’ recent searches when they click on the search input. That makes sense because we often want to return to the same video or topic:
The fullscreen filtering page can be used when filtering is vital to the user experience.
With the large space, you can display and organize information in various filter options in a clear and accessible way. It facilitates navigation and enhances usability.
The filter page allows users to add and play with filters using the entire screen. Users can select multiple options, experiment with various combinations, and then apply their choices. This is an excellent UX design choice in applications where users make detailed and specific selections, like real estate or ecommerce.
A real estate app, for example, lets users filter properties by location, price range, and other factors. This allows users to apply many filters and see the results quickly:
Side drawer filters in mobile offer a more dynamic and interactive approach to filtering. After clicking a button, the filters slide out from the side of the screen (left or right) and overlay part of the main content. This gives the users a visual connection to the main screen and allows them to see immediate results in the content as filters are applied.
In scenarios where users are exploring or comparing options, this aspect makes the experience more engaging and responsive. Users can quickly switch between applying filters and viewing results with the side drawer filters. This interaction is ideal for simple filtering tasks more than complex ones:
In some applications, the app can offer users filters at the top of the screen.
This fast access to the filters can help users when they need to adjust the filters quickly. For example, on a website that sells apparel, we can find filters that the user can click to change the product’s color or price.
Then, instead of opening the fullscreen or side filters, the app opens only the filter, and the user can adjust it easily. When users use some important filters frequently, this option is helpful, so designers provide it to make it easier for them to use the filters:
After the user types what they are searching for and executes, they may need to specify more deeply with filters to find what they are looking for.
Because of that, every app should have a list of filters that help the users understand their options; here are some common components a UX designer can implement to help the user find what they are searching for.
The slider is a filter option that helps users filter results based on numerical numbers. It has different options, and that depends on its uses.
For example, let’s take a slider that helps the user filter a range of prices. Users can adjust the minimum and maximum prices to adapt to how much they want to pay. If we talk about T-shirt shops, for example, the user can say that they want to pay a minimum of $10 and a maximum of $40; this will filter the prices well.
Be aware that it is critical to consider the steps the user can move on the slider. If it is a real estate app for buying a house, the slider movement should be in large increments, for example, every $10,000, not dollar by dollar. For this case, you can add steppers (plus and minus) to help users move more easily; each click increases by $10,000 on the slider.
In addition to pricing, you can use the slider for other numerical functions. For example, it shows the maximum distance you are searching from a certain point when searching for a house.
Sometimes, the user wants to select multiple options during the filtering. For example, users can select brands they like when searching for sports pants. This will enable them to find many pants from different brands and choose from there.
Another option is to choose some characteristics of a house. For example, you can select how many rooms you want, an exterior or interior flat and with or without an elevator. That way, you can search for many options and get more specific results.
Using the switch component can be helpful when there are on or off options. For example, on Amazon, the user can turn on the Prime switch, which shows only Amazon Prime results. Another example for different apps is filtering only free shipping:
Always show the user how many items they will get after filtering. This will help them understand how many items they can see after applying a filter. In some apps, the number appears on the Apply button, so before the user clicks on it, they can know how many items they will get after applying the search:
The sorting option does not filter the information but organizes the results. It usually appears on the results page, and the user can sort the results using some parameters.
The most common sorting method is by price (high to low or low to high), or the option is to sort based on alphabetical order (A–Z or Z–A). Another alternative is to sort based on distance. For example, in a second-hand app, you can sort by the location of the person who is selling the item.
Depending on your user’s needs, you can add different types of sorting:
Whenever the user applies a filter, you should allow them to eliminate the filters as quickly as possible. This will allow users to backtrack and get more results faster.
Users may mistakenly apply the wrong filters or experiment with different combinations to see varied results. Removing the filter quickly will help them increase efficiency during searches.
After the users add the filter and return to the result screen, you should show them how many filters have been added to their search; this will help them remember how many filters are used.
In desktop apps with a lot of space, users can see the exact filters they added. Because mobile apps have much less space, it is better to show filters as a number so users can see what filters have been applied when clicking on the number. You can show the number of the filters used at the top of the screen so they can always see it:
Users interact with mobile devices with their fingers. Use large, tappable areas on the screen so they can easily use filters. If you use small inputs or buttons, they may have difficulty.
A “clear all” option would be helpful when applying multiple filters. With this option, users can remove all filters simultaneously and streamline the search process. It provides a quick and easy way to clear all the filters; if not, the user must remove each filter individually.
Sometimes, the user adds so many filters that the system cannot find any item. First, try to show the predicted number of results to the user before applying filters so they know it before executing.
If your filters apply on the fly, show the user a clear message and tell them that there is no match for their search, giving them the option to choose alternative suggestions. This could involve modifying one or more filters or suggesting related categories.
Mobile devices don’t have a lot of space, so if you work on an app with many filters, you can use sections that open and close. This will reduce the screen space for the user. By adding this option, users will find the information they need more easily because it helps organize the filters better.
When designing mobile app filters, one of the key decisions is whether to use a batch filter screen or implement filtering on the fly.
With batch filters, users can select many filters and click the Apply button. Filtering on the fly means that once the user clicks on a filter, the page will refresh and add the filter without the need to hit Apply.
A batch filter is a better option if you have an app where the user needs to choose multiple filters before executing them since it allows users to consider and apply multiple filters simultaneously, reducing back-and-forth. On the other hand, filtering on the fly is a better option for apps that require quick, iterative searches so the user can choose one filter and see the results.
The most important thing is to consider your user’s needs when selecting between the two and determine which option is the best for them.
Since AI’s entered our lives, we’ve seen many possibilities for its use in design. If you can improve your search algorithm and not only design the flows and the visuals, consider adding AI power to the search algorithm.
This will help users find what they are searching for faster since AI can provide more relevant results and make the search process more efficient.
In this article, we reviewed how to design filters for a mobile application. Mobile filtering requires even greater precision than its desktop counterpart, so we need to be aware of the tools we have to communicate advanced filtering options for our users. With this knowledge, you should hopefully have greater consideration for mobile filtering.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
Learn more →
