Learn- How Filters & Faceted Search Enhance the eCommerce User Experience?
UI UX Design / 26-December-2019 / minute read

Learn- How Filters & Faceted Search Enhance the eCommerce User Experience?

Choices come with a feel-good factor. But the trouble starts when you get lost. Whenever you visit an e-commerce site, a travel site or any website where there are multiple products on display, you want to zero-in-on them desperately.

Author

Choices come with a feel-good factor. But the trouble starts when you get lost. Whenever you visit an e-commerce site, a travel site or any website where there are multiple products on display, you want to zero-in-on them desperately.

That’s where the filtering and sorting function can come on rescue to narrow down the search results. Let’s be honest, if the user can’t spot what they like or need on your site, get ready to lose them as they may not give you another chance.

Be it the search results page or the listings page, filters are always a good idea. A series of filters can be used to shortlist a huge set of results and lower the burden and confusion of the user.

For filtering experience to be awesome, we must have superb filtering options, amazing filtering designs and filtering logic that integrates with users’ expectations. Attribute-based filtering induces more powerful as well as engaging user experience.

In this post, some benefits of using filters will be revealed and also some practices that can be applied in designing filters for faceted search results-

think360

THE NEED

Hick’s law says that the time taken by someone to reach a decision increases in proportion to the number of choices he has to select from. When applied, filters and sorting will not only lower the burden of thousands of products into a manageable number, but users will also purchase products in a manner that fulfills their interests and needs.

This will ultimately increase the fondness of the user as they received what they were searching for. Thus, if an e-commerce site desires that the users should buy from them, it is obvious on their part to enable users to lessen the number of options they come across and increase the chances of buying.

Hire Our Best UI UX  Designer for Ecommerce Product

BEST PRACTICES-


SUITED FILTERS

Due to limited space on the phone screen, it is advisable to display only the filters that are useful to the content. If there are irrelevant filters present, don’t show them at all.

USER ACCESS PATTERNS

A little bit of research proves fruitful in knowing the way users move and search through your site.  Studying search logs, analyzing competitor sites and user research and testing are useful sources to enlist the access points users are looking for. Interviewing near about 10 users will give you a clear idea as to how the filters should look like.

Don’t create a short cut by missing out on research, you’ll realize its value when you’ll go back to this data for reference while configuring your taxonomy and search.

DEFAULT FILTERS

The next point is to think whether the filters will be kept open or closed by default. Values, when displayed openly to the user, can help him narrow down the search results. Mostly interfaces with fewer filters adopt the default route.

The closed state of default can be chosen in case of a large number of filters. Here, showing filters by default is not a good approach as the filters area can become lengthier than the search results in itself.

For instance, Linkedin goes the hybrid way. Some filters are open by default whereas some are closed. This method will enable you to show the most significant; the filters you believe will be useful for the visitors in squeezing the search. Moreover, the users can expand the closed filters as and when needed.

TYPES OF FIELDS

The most preferred kinds of fields are hyperlinks and check-boxes. However, you can get experimental and show varied types of fields to make the user experience more sorted.

CHECK BOXES

Checkboxes are the frequently used field kinds in filtering. You can spot them everywhere in filters. These are mostly applicable for multi-selection options i.e. the user can choose one or more values in the same filter.

For example, in Amazon, visitors can see results for the age group 2-4 years and 5-7 years simultaneously. This implies that an ‘OR' situation is at function when the user enters multiple values within the same filter thus showing output for both the age groups at the same time.

 Age range image

HYPERLINKS

Hyperlinks are the ultimate choice for single selection criteria i.e. the user can choose only one value in a filter at a particular time. Like, Amazon uses hyperlinks to delve deeper into the department.

Here, the user can only click on one value. Now, what should be done with the other hyperlinks once a user has chosen one of the hyperlinks? The answer is if the values are hierarchical in type then it is logical to display the links which are relevant to the selected links and hide the unnecessary ones.

However, if the values are not hierarchical in type then it is sensible to display the rest of the links.

Tips to Soar up

 Check Out-  Tips To Soar Up Your E-Commerce Business

RADIO BUTTONS

These can be considered as a substitute to hyperlinks. Like, Flipkart utilizes these to allow the users to choose one of the running offers.

Honestly, there isn’t any value addition in using them as they will stick to the same single selection pattern just like hyperlinks.

 offer filter image

UNDO OPTIONS

There should be a convenient and transparent way to undo a filter value and adopt ‘All’ or ‘Any’ for a typical filter. For instance, Amazon provides a clear channel to the ‘Any’ zone.

There are various websites which are using the deselect-to-undo model smoothly such as Yelp.com. These websites make sure that the consistency in the filter value options is not hampered due to other filter selections. 

Like, rather than removing options, the Yelp user interface converts some filter values as ‘unavailable' to convey a lack of stock to the users. Also, the unavailable items are shown dimmed.

In cases where consistency is a difficult target, it is best to use ‘Any’ or ‘All’ to undo filter selections, typically when a filter’s value options are broad. 

EASY AVAILABILITY

Okay, this doesn’t mean that all the filters should be shown at the same time. It is fine to consolidate filters to just a label, giving a single link such as View All Filters, or present previously selected filtering options differently.

But if at different stages in the search workflow, filters start vanishing out of nowhere from the search user interface and that too without any option to bring them back; there will be major fallout.

 filter by color image

SEPARATE CATEGORIES

Generally, users are keen on filtering a product list through category-devoted attributes and not through a broad range of categories like brand, price, user ratings etc. For instance, a category like ‘Coats' can be filtered through ‘Material' and for ‘TVs', ‘Refresh Rate' can suffice.

These are all filter types relevant to those typical categories. It is seen around 42% of eCommerce sites are without category-specific filtering options for a majority of their main product verticals.

With such a fundamental product filtering option absent on so many sites, it is not wrong to say that almost 84% of sites still have a long journey to undertake to master their filtering experience.

During usability testing, it is concluded that any product specification that stands significant to be included in a product list item should be mentioned as a filter. Just mere show of some product attributes can create subjects’ interest to filter through those attributes.

By underlining the product attribute in front of the user, you guide them that the spec can’t be ignored and this very mention of the spec thus influences users to filter by it.

THEMATIC FILTERS

20% of eCommerce sites don’t follow thematic browsing. Looking at products matching a certain ‘theme’ like TVs, cameras, jackets, etc. is useless unless the site keeps thematic filters.

Lack of thematic filters makes it time-consuming for the users to view the desired products. Further, it can lead to an abrupt exit from the site as the users presume that the store either doesn't contain the required products or fail to locate where the products are hidden in elaborate product lists.

As thematic filters are a lot dependent on context, they have to be customized according to a site’s product catalog.

 Thematic filter image

 thematic image filter2

HIGHLIGHT IMPORTANT FILTERS

It is seen that the product list of a particular category or a bunch of search results will consist of some filters which are of great advantage for a major proportion of users as it will separate the items in an otherwise crowded product list.

For instance, if a visitor selects a ‘Digital Cameras’ category, then ‘Camera Type’ would be a crucial filter as users’ requirements are based on if it is a ‘Point & Shoot’, ‘DSLR’ or ‘Mirrorless’ camera. Filtering sidebar is not a good idea as users tend to miss out on the options or fail to understand the significance of selection.

Users are of a belief that categories, as per site’s recommendation, are pertinent for selection whereas filtering sidebar is purely optional. So, it is suggested to keep important filters or filter combinations on top of the product list to enhance selections.

Critical filters can be kept in the spotlight by making them shine above in the product list. Sites with promoted filters witness high filter utilization rates as compared to the sites which don’t promote at all.

Sadly, despite being a dynamic feature, about 16% of eCommerce sites use promoted filters. Take note that promoted filters should not be used in excess, only when a vast pool of visitors gain from using promoted filters, then it should be applied.

Else, users are attracted to extremely narrow product lists which have been a serious browsing issue and can result in high bounce rates. Hence, it is not right to promote not-so-important filters.

 highlighted important filter image

OPEN MULTIPLE FILTERS

Keeping in mind product filtering logic, the filtering values should not be limited to the same filter type. Such exclusive filtering values result in users exiting from the site as they fail to get an overview of the products that fulfill their individual product needs.

When filtering values within the same filter type are considered as different, it complicates the things unnecessarily. Surprisingly, 50 top-grossing U.S. eCommerce sites fail in filtering implementation as they label their product filtering values as mutually exclusive.

This can hinder their users' filtering process and even the product finding potential.

 open multiple filter

DISPLAY APPLIED FILTERS

When users go for filters and search the product list, it is important that they can easily see all the applied filters and that they keep them in mind, else the users might be mistaken in understanding the site and its product catalog.

For any applied filter design to be labeled as user-centric, the users should easily spot these applied filters. Do mention the criteria on which the present product list is filtered. Further, permitting the user to deselect applied filters without any hassle and give the user additional context when applying new filtering values. All this will definitely result in user-friendly filter design.

Proper UI Controls

Separate filters need separate controls respectively. There are types that are in on or off state, types which consist of a range, types that can be described in quantity and types which are a part of a checklist.

Take care that the UI controls that you employ for your filters correspond to the seeming affordances on the table. In other words, try to establish a match between the system and the real world.

Also Read- 20 Common UX Mistakes In Ecommerce Websites

   

SHORTEN FILTER LISTS

Product filtering values, when greater than 10, tend to pose problems. In this case, all the filtering values are shown in one long list and thus, this feature throws all other filter options out of view.

To add to the trouble, filtering values are presented in an inline scrollable area. This gesture of scrolling and scrolling is complex for the users to understand and more complex for them to directly engage with.

Unfortunately, inline scrollable is selected for long lists of filters by near around 24% of eCommerce websites. Here, truncation comes as a savior but only when certain design guidelines are followed.

 Shorten filter list image

RECORD CHANGES SEPARATELY

Users have a great dependency on the browser back button. This results in chaos, frustration, agitation and even quitting when a site's technical performance doesn't match with the user's expectation of the back button function.

Usually, visitors expect the back button to redirect them back to what they think to be their previous page. And this is where the aligning fails. When users select a button or a link, wait for content to appear and then face completely new content, they expect it to be a different view that they can select ‘back’ to, even if it is technically the same page or not.

As using filters involves a click, content loading, and a different visual display, it shouldn’t be surprising to know that a lot of users think of this as a new page. And thus, these users, as expected, try to click ‘back' to previous filter states. However, one-third of top eCommerce sites don't meet this expectation.

SAY NO TO NO RESULTS

Keep away from filter options having no results as they end up annoying the customer. Show only the available options. It can be a poor experience for a customer to choose an option only to find no results.

CONCLUSION

Filtering is a core part of the product browsing experience and if done correctly becomes a popular and powerful solution. Filters bring ease along with them as they narrow down thousands to just a handful of products. Consider the user perspective and then navigate based on what's important to them. I hope the above points gave you an insight into the art of filtering and will help you make ‘Search' one of the valuable aspects of your site.

Post views: 4171
User image