Ecommerce Faceted Search and Filters Best Practices

Faceted search or navigation is a way of refining a broad category of products into what a user demands. Faceted Navigation, unlike traditional navigation, gives users a choice to discover items based on more than one dimension.

For instance, if a user who has landed on your site is looking for a Nike Red color small sized Tshirt within a price range of $25-$50 then faceted navigation can help him find his desired group of products within a few clicks.

Faceted navigation is often called as faceted search or in few cases called filters. Faceted Search gives users a list of aspects/facets to refine or narrow their search to their most desired product.

Advantages of using Faceted Search

  1. Increases product discoverability – Imagine scrolling through hundreds of products and hitting page after page only to feel exhausted and frustrated. This is what happens with users when they don’t find the products they are looking for. Faceted navigation solves this problem in multiple ways.
  2. Least number of clicks to the desired products page – Faceted search helps your site users skip the tiresome task of scrolling through a huge list of products and mindless browsing through tons of pages. Faceted navigation puts the products a user is looking for from within few clicks. A user can find a product fast and also go back and forth through different products with utmost ease and less amount of pain.
  3. Higher Conversion Rate – Helping users reach their products of interest soon helps them reach a buying decision and purchases.

11 E-commerce Faceted Search Best Practices

When to use top faceted navigation and when to use side filters?

Most of the faceted search boxes are placed either in the left column or on top of the products lists. The placement of the same depends on different design and usability factors.

If the number of products on your search page is less and the attributes are minimal then it is best to use a faceted navigation right on top of the product listing. For a great example look no further than nikonusa.com. The top faceted search works like a charm with its small set of products.

Using top faceted search for category page with a long list of products will make users scroll back and forth repeatedly to change their preferences. The problem gets worse if the page employs an infinite scroll.

The other problem with using filters at the top when you have many attributes and products is spacing. Accommodating multiple attributes horizontally will make it clumsy. Saksfifthavenue is one the best example of how not to horizontal faceted search. Also opening any drop down from the filter blocks products visibility.

Condense long list of facets

In a situation where there is number of attributes and multiple options for a user to choose from a user will have to go through a long list to tick his options. The time spent earlier looking for a product is now used to search for the option. This defeats the sole purpose of having a search filter.

There are 3 ways to condense the long list of choices to a user-friendly box.

  • Condense list using show more options. This will condense the list to the most important choices and shows the remaining options only on user demand.
  • The scroll is the most used feature to limit the long list of choices. The scroll is a function which people are used to and is often a safe bet to use. 
  • Condense complete list of choices to the attribute level. Look implements this cleanly. It condenses all attributes and shows the choices only when user requests.

Make entire field area tick/clickable

Making entire field area tickable makes is easy for a user to pick choices. If a user has to select a “small” size for his Tshirt it will be a lot more comfortable for him to tick the entire area where “small” is written instead of squinting his eye to click in the tiny box. This is particularly helpful on mobile devices where spacing is too small.

Number the items per facet

Listing the number of products per item helps the user know what to expect from the results. If a user finds there are many options in a particular choice then he/she will switch to the same. Asos not just shows the facets but it also shows the number of products per choice so the user is informed on what to expect.

Prioritize facets based on importance

If you feel your customers make their buying choices based on price then place pricing facet upfront. If you feel size or brand is key to your users then place the brand filter on the top left. Better to place important things first instead of hiding them into oblivion. Jessops.com prioritizes its facets based on priority for its DSLR cameras section. It starts with price, megapixel, and lens followed by lesser important facets like screen size and model.

Cross mark unnecessary facets

It is not enough to make users select criteria. A good faceted search interface should also allow users to revert their choices and also change their preferences immediately. Wag.com allows users to deselect and revert their choices easily.

Let people know that the page is reloading after selection of a facet

Letting people know that a fresh set of results is being loaded is important. Flipkart has a clean “Loading” sign over the products the moment a facet is selected.

Floating Filters or Show on demand filters

Keeping faceted filters accessible to the user while browsing through the products will make it easy to change their choices, edit or revert their product navigation style quickly. Yebhi and Myntra do this well. Yebhi has a show filter on demand while Myntra has fixed floating filter to support its infinite scroll.

Prevent Zero Results Pages

Zero results pages can sabotage a user’s shopping experience. When you all users to pic multiple facets chances are that the user might pick his way to a zero results page. The best way of approaching this is by showing facets which have at least one result to show. If your online store uses price meter you should consider doing it right as it has a tendency to lead a user to a zero results page. Asos gives free control to the user to change the price. This led me into a page which has no results to deliver.

Pros of using a price meter: User gets control over the price range.

Cons: Can lead a user to a zero results page

On the other hand, this e-commerce filter by bestbuy.com eliminates such possibilities by using price range.

Pros: Although this gives user lesser control than the price meter it removes possibilities of zero results.

Cons: Doesn’t let the user use a custom price range.

Both the above examples don’t give the user complete control. There are 2 ways of solving this –

  1. The user should not be allowed to narrow the price meter to the extent where no product is displayed. Make sure the customer is not allowed to choose a price range in which there is no product listed.
  2. Give the user two options. One to use a custom range of price or pick among the list of price range options you provide.

Use these important facets

  • Availability – Most users don’t want to browse through products which are out of stock. Neither do out of stock products make you money. Users should have an option to weed out “out of stock” products.
  • Price – Price is key. A lot of buying decisions are made based on the budget available.
  • Ratings – Rating filter gives users quick access to high quality items from the list. This option helps users who are not able to make judgments about the products they are supposed to buy.

Allow Multiple Facets to be chosen

To what extent the user is allowed to narrow his search is how fast the user finds the product she needs. By allowing multiple facets to be chosen the user can narrow his options down to a select few very fast.
Use imagery when possible

Color is one of the most popular facets across multiple verticals. Instead of using the word for each color type you can use a small colored square as a clickable facet for the user to quickly click/tap their way to refined results. Toms.com uses this clean color facet to help sort sunglasses based on color.

Ray-Ban uses frame shape as a facet with images of each frame type. This makes it easy for users who don’t know what each frame name means.

Next Steps

  1. List all the important filters you are missing out currently on your search and category pages. Make facets pertaining to each product type you have.
  2. Help users navigate through multiple options via sort options.
  3. Make sure your faceted navigation is SEO friendly.

 

After working 7+ years as a digital marketer for startups and large enterprises I quit my job to start EcommerceYogi. Here I share the exact same tactics which I have used to drive millions of users per month to e-commerce stores. Follow me on Linkedin and Twitter to stay connected.