If you've got a large inventory with various product collections, you can't expect your customers to go through the entire store to find something they want. The findability is crucial to sales funnel: the faster a shopper finds what he's looking for, the more likely he is to purchase. That's the reason why eCommerce giants like Amazon and eBay implement product filtering to improve their customers' search experience creating ease and convenience of shopping online.
What is Filtered Navigation?
Also called faceted search, the filtered navigation is a way of analyzing a given set of metadata fields to exclude items that don't meet specific criteria and values so that it can provide users with appropriate options for refining queries. Filtered navigation is probably the most significant search innovation to date.
Why should you use Product filtering for Shopify stores?
With a huge inventory, it is a competition for eCommerce sites to win customer's hearts by simplifying the user search process. There's only a small proportion of online shoppers knowing exactly, and the majority are just browsing, researching what's out there to evaluate the best options.
It's time for filtered navigation to come into play. If designed well, it can help customers go through thousands of products and match their needs and the most relevant ones. Filtering can provide better user experience, increase their focus on displayed items on the store, and ultimately, help merchants to sell more. Product filters can significantly improve your conversion rate – by 20% in specific industries.
Yet despite the obvious benefits to both merchants and consumers, it's not an easy task to design intuitive filtered navigation. A study by the Baymard Institute on 50 top eCommerce websites in the US found that just 16 percent of sites offer a good filtering experience. About half of these websites ranked as 'passable' while the remainder were deemed 'very bad.'
For example, a customer who wants to buy a cell phone faces so many options, such as brands, storage, price, and features, that it can be hard to make a decision. But look at the filtered navigation for cell phones on Overstock.com, below. Using such filters, customers can quickly narrow down the list to just a few out of the thousands of mobile phones available on the website.
Credit: https://www.overstock.com/
With that in mind, remember these seven product filtering best practices worth implementing on your site to create a truly usable and functional filter interface.
How to design intuitive filtered navigation?
- Choose the optimal position
- Provide relevant filter options
- Allow users to select multiple filter values
- Set filters options collapsed or expanded
- Display product count for each filter value
- Display applied filters
- Optimized for mobile
1. Choose the optimal position
One of the most fundamental issues in designing filtered navigation is deciding the location of Horizontal or Vertical menu.
Vertical Filtered Navigation
As we can see on most eCommerce sites like Amazon or eBay, product filtering interface consists of a left-hand vertical sidebar. Vertical layout is the most common configuration. This pattern scales well to variations in the number of filters displayed.
However, it does have its problems as the sorting options at the top make the users ignore it or mistake between filtering and sorting. In some cases, a horizontal navigation menu can outperform the sidebar.
Horizontal Filtered Navigation
One advantage of the horizontal toolbar is that the filters occupy a more dominant position on the page, and therefore increase the visibility and encouragement for user interaction. In contrary to the vertical filter panel taking up around a third of the page, the horizontal menu allows the full width of the page to be utilized. You can display more products and additional information, convincing customers to make buying decisions more quickly.
Although the horizontal toolbar gives users a better view of options, it only works well for some types of eCommerce websites that have fewer products. When dealing with numerous filter options, this layout can make the site look jumbled and hard to navigate through a lot of drop-downs.
For example, Adidas uses horizontal filtered navigation on their collection page and search results page as the product attributes are often limited to size, color, price, allowing them to reasonably be fitted onto a single line.
Credit: https://www.adidas.com/
2. Provide relevant filter options
Category filtering enables users to narrow down the products list on Shopify collection pages. A good rule of thumb is to display filter options that only make sense for the products contained in a particular collection.
A good illustration of the proper use of category filters is Nordstrom. A user who wants to choose a dress will put a focus on Length, Sleeve Length, Dress Occasion while jeans buyers will consider the Denim trends and Product fit.
Credit: https://www.nordstrom.com/
If the product list of a specific collection or a search results page has many filter values, make sure that you emphasize the most crucial product concerns to the users. For some categories, making an initial filter selection has an impact on the user's ability to further narrow down the product list. It's a good idea to promote most important filters on top of the sidebar to encourage their selection.
For instance, the most concerns of an online shopper looking for a moisturizer on Sephora.com is finding the products suitable for their Skin type and Age range. Notice that the price range is presented as the last of the filter sidebar intentionally. If the customer finds a product perfectly matching her needs, does price matter?
Credit: https://www.sephora.com/
3. Allow users to select multiple filter values
When it comes to effective product filtering, filter values should not be mutually exclusive, meaning customers must be able to apply as many filtering values as possible within the same filter type and yield refined and more relevant results. A study from the Baymard Institute on top 50 US eCommerce sites revealed that 32% of eCommerce sites failed to allow users to apply multiple filter values of the same type.
Mutually exclusive filter values have a terrible impact on user experience as it limits the user's interest and increases user interaction cost. Customers will be forced to select only one filter value at a time and have to go back and forth to apply different filtering values individual. When this tedious process ensues, customers are prevented from establishing an overview of the products that meet their needs, leading to site abandonment and customer dissatisfaction.
For example, Thetoyshop.com has wrongly implemented its product filtering values for brands as mutually exclusive. As soon as the user selects the 'Disney,' the entire "Brand" filter type disappears, making it impossible to apply other filtering values, such as 'Marvel,' 'DC Comics.' It causes great frustration for users as it's time-wasting trying to implement a single filter many times to find suitable products.
Credit: https://www.thetoyshop.com/
Allowing multiple filters selection at the same time means that your website can offer more relevant products matching the user's interests within the filter type. It's more likely that he could find something suitable in your store and make a purchase.
4. Set filters options collapsed or expanded
If you have so many filter values, they sidebar could become too lengthy. Instead of scrolling through all the information listed in the product filtering, users should be able to get the whole picture before focusing on details. By collapsing filter menus, you can ensure customers can all the types of filters available to them so that they can decide on the most relevant filter type to dive in.
A critical consideration for UX designers is whether to display or hide the options by default. Collapsing the filters by default might increase user disorientation while displaying all values will make the site crowded. Luckily, these problems can be solved by exposing some options while collapsing others. This kind of pattern gives visitors an idea of the filter structure and also improves usability.
5. Display product count for each filter value
You can enhance the user experience for classification product filters by including the number of matching items in each value. By displaying product count by attribute, you can inform your customers how many products each filter contains so that they can adjust their filtering for more results. The count should be updated each time a new filter is applied, Office Depot takes this feature to the next level and displays a product counter next to each available category, that gives a natural push to customers to move on with their product search.
It's tempting to show filters that have no results. Dropping users on a page with no results can be frustrating, especially at the time of them wanting to shop. The product filtering becomes redundant. Removing empty filters means that you can always show up something enticing to users so that they can add to their cart.
See the example of Diesel.com, which displays many size values in the search result page for the query of "dress." Unfortunately, the user interface isn't capable of supplying any product of the size 12M, because, when the page reloads, it displays empty.
Diesel shows color selections that return no results.
6. Display applied filters
Displaying the applied filters is crucial to help improve the efficiency of using product filtering, as users would easily understand the results, and modify the filters they selected earlier. The display allows customers to check their location within site and helps them change options easily. You can do this in three different ways:
Inline: In this subpattern, the selected value is displayed within the filter option. For example, Cotsco.com shows the selected options with a checkbox next to it.
Credit: https://www.costco.com/
Breadcrumb trail: In this method, all selected product attributes are displayed in a dedicated location. As the user keeps choosing, the selection continues to being added to this trail. The selections usually have an 'x' icon so that users can deselect any of their previously applied options during a product search. See an example below from Jomashop.com. With the default collapsed filter on the horizontal toolbar, it's easier for customers to keep track of their selection and make sense of the results presented.
Credit: https://www.jomashop.com/
Combined attributed breadcrumb: When combining the two above design, it can turn the design to be more user-friendly by still keeping applied filters in their original position and showing them in summary. According to the Baymard Institute study, this pattern had a much lower rate of user errors than the sites that utilized only one of the designs.
7. Optimized for mobile
Filtered navigation was initially designed for large screens like desktop and laptop. It becomes more challenging for designers to translate this experience to mobile because the screen real estate is too small to show a full set of filter options and results simultaneously.
Recently a new approach to implementing filtered navigation for mobile users has appeared: showing overlay filters on top of the collection or search results instead of a drop-down menu. This dynamic interaction pattern works excellent because it wisely utilizes more space to display larger filter options and values. Moreover, users can always see what filters they are applying and access easily to further refinement options, all without leaving the context of the collection or search result screen.
Showing all the selected filter values on mobile is somewhat tricky. You don't want it to occupy the space that you can use to present more products to the users. Instead of using the breadcrumb trails, you can highlight the filters the customer has selected at the filter page and display the selection within the filter type.
Credit: https://www.asos.com/
Conclusion
When appropriately implemented, filtered navigation becomes an excellent tool for helping users to find their desired products by refining the search results. The success of the product filtering lies in the design and the functional capabilities that it offers. Even a minor UX enhancement can go a long way to improving your users' search experience, especially across mobile, where distractions are often beyond our control.
It is crucial to plan carefully and implement the necessary steps to avoid any issues down the line when it comes to filtered navigation. Remember, each product category requires different filter options. Studying the products and identifying which is critical to the user's ability to find the products is a good start in product set-up. Then follow the advice in this article when designing your product filtering so that you'll provide shoppers with a better experience. Happy customers are the key to eCommerce success.
