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.
Why it’s so important to design good mobile filters
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.
Search filter essentials
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.
The search should be visible
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:
Use clear labeling
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”:
Implement autocomplete and suggestions
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:
Display search history
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:
Positioning the search filter section on a mobile device
Fullscreen filters
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
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:
Quick filters access
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:
Filters inputs that help the user find what they want
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.
Slider
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.
Selectors
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.
Switch
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:
More…
Source link
