“How can I help you?” These five words go a long way to making a customer in a brick-and-mortar clothing store feel more at ease when faced with the sensory overload of multiple racks of apparel and thousands of items to choose from. This assistance in guiding the customer to finding exactly what they want is the real-world equivalent of filtering on e-commerce websites.
In the digital world, especially mobile, too many choices make it difficult for people to reach decisions. Often, mobile online shoppers just abandon the store if they can’t quickly and easily find products that grab their interest. Effective filtering narrows overwhelming choices. It’s critical for customers who need help coping with information overload and increases the chance of them finding the product they want.
We found that filter use is associated with a 35% increase in click-through rate on products. Moreover, filters were found as helpful for diverse types of visitors: those who are goal oriented and know exactly what they, as well those who are just browsing.
While filters were shown to be effective in helping customers cope with information overload, they are rarely used on mobile sites: as little as 2% and up to 10% of mobile online shoppers use filter menus, compared to 38% of desktop and tablet users.
The low usage rate is not for lack of motivation – we found that every second customer that interacted with a filtering menu abandoned the process without filtering. By observing the behavior of filtering ‘abandoners’ we uncovered several common usability issues that block customers from effectively using filters.
Most of the usability issues stem from a lacking adaptation of the filtering menu to mobile responsive versions. As a result, customers are faced with filtering menus that were designed for a spacious desktop screen that are now crammed on the small mobile screen. In the mobile first age, responsive sites warrant filters that are designed specifically for the mobile context. Otherwise, customers are likely to abandon a process that could speed up and ease their shopping experience. Here are five main problems with mobile filtering today:
1. Long and cumbersome filtering menus: On desktop, filtering menus usually appear on the left side of the product listing page in a vertical bar. Therefore, customers can see most or all of the filtering options, even if the menu is long. On most responsive mobile commerce sites, the filtering menu is not exposed by default, rather, it appears as an expandable drop down menu. Since all filtering options can’t be shown on the screen at once, customers need to scroll up and down to explore the full range of options. In most cases, the font size is small and limits legibility, particularly if there is glare. This experience puts a strain on the short-term memory, because customers need to remember which filters are out of sight and mentally compare them the filters they are looking at. In cases of filtering menus with tens of options, the cognitive load becomes too high and customers abandon the process.
When opened, filter menus are much longer than mobile screens. Customers must scroll repeatedly to see all options.
2. Difficulty in applying multiple filters: Our research shows that visitors who apply two or more filters are more likely to continue to a product details page. However, only 2% of customers that used filters applied two or more filters. Many mobile sites lack clear visual cues that multiple filters may be applied. Even when such cues exist, desktop-designed menus on mobile are often too small and accidental taps on wrong elements are frequent. As a result, customers may find themselves on a page they were not interested in. We also see frequent zooming and tilting behavior, that often results in misaligned page borders and misplaced elements.
Another common issue that limits multiple filter application is pages reload after each filter is applied. This hinders the user experience when the page reload is slow, and does not meet the customers’ expectation of a fast-reacting mobile site. Therefore, even if the customer applied one filter, they are not likely to repeat the process.
3. Important filters not easily found: Filters differ in their effectiveness. For instance, we found that customers who filtered by ‘Color’ were 50% more likely to find a product. However, customers often do not reach such useful filters because they are hidden at the bottom of a long menu. We observed that the filters at the top of the menu are the most used ones, but frequently they are not the most relevant and effective. Therefore, a customer that was on the right path to finding a product is hindered by low discoverability of important filters.
Put conversion-increasing filters like size at the top of the list, where visitors are more likely to use them.
4. Lack of feedback: Many mobile filter result pages don’t indicate which filters have been applied. Some customers may return to the filtering menu to check the filters they applied; but most do not realize that they are looking at filtered results, and if they can’t find the wanted product they may conclude that it’s not available, and leave the site.
Visitors can easily lose track of which filters they've applied, and erroneously conclude that your site does not have the products they want. Clearly indicate which filters are active and make it simple to change or remove them.
5. Difficult to adjust filters: Often, customers only notice that additional filters will yield more relevant options after they scroll through a filtered product list page. For example, on a department store site, a customer may choose “leather” within the “purse” category – and only after scrolling three or four times, realize that also filtering on style will better focus the list of the bags that she likes. Or maybe she wants to apply a different filter altogether. On most mobile sites, customers who are seeking to add or adjust a filter must scroll all the way to the top of the page. On top of being a time consuming and irritating task, customers might get distract along the way and abandon mid-scrolling.
Make filter menu sticky, so it is easily available whenever visitors chooses to filter.
Solving mobile filtering problems
The main takeaway is that filtering menus designed for desktop lead to a sub-par experience on mobile. As a result, a tool that is very effective in helping customers find what they want is massively under-used.
To remedy this, the mobile version of responsive e-commerce websites should be well adapted to small screens.
One efficient way of solving many of the currently observed usability issues is to implement an overlay functionality instead of a drop-down menu. In an overlay there is more space that allows important elements to be larger (e.g., font, check-boxes). To wisely use the prime mobile real estate, evaluate which are the most effective filters, list them first and remove under-performing options. Within an overlay it is also easy to see which filters were applied, review them and the hit ‘done’ to apply all at once. This functionality also solves the issues of slow re-loads after each filter application. After filtering, the applied filters should appear at the top of the page. Lastly, making the filtering menu sticky would help customers to access it at any point in their journey.
To conclude, to maximize the potential of mobile e-commerce sites, equip your customers with a filtering solution that is effective, efficient and satisfying. After all, filters are the online proxy of a helpful sales associate.
Find out more about how to implement advanced digital customer experience solutions for a superior filtering and overall user experience. Download our “Up your mobile filtering game” e-book now.