16 Tips for Effective and User-friendly Faceted Navigation

by Last updated:

With the vast number of products and growing competition, it is a challenge for e-commerce sites to guide customers to their desired products quickly and with ease. Faceted navigation plays a big role in simplifying the user experience. Given its ever-increasing importance, every ecommerce site owner should know these 16 essentials to make the most out of faceted navigation.

16 Tips for Effective and User-friendly Faceted Navigation

Faceted navigation helps ecommerce websites improve their customers’ product search experience. Often, customers are unsure of what they want, and would like to explore several products before deciding. Facets simplify the user experience by letting users investigate several choices quickly and efficiently.

For example, a customer who wants to buy a mobile phone faces so many options, such as brands, operating systems, price ranges, and features, that it can be hard to make a decision. But look at the facet for cell phones on Expansys.com, below. Using such filters, customers can quickly zero in on a just few models out of the thousands of mobile phones available on the website.

Expansys.comExpansys.com

Almost all major players employ faceted navigation on their sites. Effective faceted navigation systems ensure that customers don’t get lost in their search. Moreover, they can always “unselect” any of their previously selected options. Faceted navigation can significantly improve your conversion rate. In 2012, buyakilt.com an online dress retailer saw a growth of 76.1 percent in sales, 26 percent in conversions, and 19.76 percent in shopping cart visits after it added faceted navigation to its site. Facets can also improve search rankings. Of the many parameters that search engines use to rank websites, usability and user experience are among the most important. If the faceted search system is good, customers find it easier to access products of their choice, and therefore they spend more time on the site and purchase more.

This article offers 16 tips to maximize the benefits of faceted navigation.

1. Use Relevant Options

The facets, and the options within each facet, should be relevant to the product. For example, in the LED TV category, facet options should include price, brand, screen size, resolution, and so on. Within each facet, provide relevant filters to improve the search results, such as screen size ranges (15″ – 16″ or 17″ – 18,” etc.). In categories such as shoes and apparel, color and size options are essential.

Give customers many options. Price and brand are standard, but include all possible options specific to the category. To determine appropriate facet and filtering options, you can gain insight from viewing competitor sites, the websites of industry leaders, customer reviews, expert reviews, and commonly searched keywords.

Relevant and maximum optionsAbout.com

2. Position Facets Horizontally or Vertically

Place facets either horizontally or vertically on top of products. Popular examples of horizontal placement include Yelp and Benetton.

Positioning of facets -- horizontal or vertical Yelp. Com

benettonBenetton.com

Horizontal navigation gives users a better view of options. However, horizontal navigation is only appropriate when there are a small number of products with minimal values. When dealing with numerous products, this option can make the site look cluttered. It may also compromise the user’s experience, since the filter menu disappears when the user scrolls down the page. Therefore, to use it, visitors must scroll back and forth. As can be seen from this example of Lifetimesterling.com, when users scroll down, the filters disappear.

Image 1: Horizontal facet

Positioning of facets -- horizontal or verticalLifetimesterling.com

Image 2: Horizontal facet disappears upon scrolling down

Essential_items

When many products are for sale, a vertical arrangement works best, and is therefore most common.

Positioning of facets -- horizontal or vertical
OfficeSupply.com

3. Present Facets for Maximum User-Friendliness

There are several ways of displaying facets. Options include links, sliders, checkboxes, dropdowns, and input fields. Key determining factors are the type of data and the maximum user-friendliness for the data type.

Links are most common; industry leaders such as Amazon and eBay use this type. Users must click on the link to choose an option.

Presentation of facetsMotorCycle-Superstore.com

Presentation of facetsGameStop.com

Sliders or input fields can be used for numerical values such as price or distance.

Presentation of facetsNfm.com

Presentation of facets

Checkboxes let users include or exclude a particular option, or even choose multiple options, such as more than one brand. One thing to keep in mind when using checkboxes is that the entire area of a particular value or filter, including the text, should be clickable. This ensures that customers don’t have to struggle to click on a tiny box. As in the example below, customers should be able to click anywhere in the “Panasonic” or “Tripplite” box to select these options.

Presentation of facets
Pronto.com

Dropdowns limit the choice to a single option, which can be a limitation. Cars.com uses dropdowns.

Presentation of facets
DocOrtho.com

There’s no one ideal method of displaying facets. Combine different options to arrive at the most effective method for your website. For example, Nordstrom has combined various options such as links, dropdowns, and checkboxes.

women
Nordstrom

4. Use Facet Images

Images play a major role in facet usability. They are ideal for selecting  colors, styles, and other options. Check out how Sunglass Hut makes effective use of facet images. Similarly, in the case of Airbnb, location is an important factor for the user, so it displays data in form of a map.

Use of images in facetsSunglass Hut

Use of images in facets
Airbnb

5. Include Customer Reviews as a Facet

Large sites are using customer reviews as a facet more and more frequently. For example, Amazon.com and Kayak.com display customer feedback in form of one to five stars. As a best practice, only use this option if there are many ratings.

Customer reviews as a facet

6. Display Store- or Industry-specific Facets

It may also be a good idea to create unique facet options based on customer needs, product characteristics, or industry requirements. For example, Amazon’s book section has options such as “100 books to read in a lifetime” or “Best books of 2013,” in addition to the standard choices such as subject, language, etc. This helps customers make a decision.  Also, you can name the facets according to the target customer profile. Take care to target all customer segments, especially those seeking specific solutions. See the Spanx.com example below.

Store- or industry-specific facets
Amazon.com

Store- or industry-specific facets
Spanx.com

7. Use Collapsible or Expandable Menus

Facets should allow users to collapse or expand the menus. This ensures customers can see the maximum filters. It also lets them choose the filters they want without having to click others. One important consideration is whether to display or hide the options by default. Hiding the filters by default might lower usage. However, if all values are displayed, other facets cannot be seen. One solution is to expose some values while hiding others. You can see examples of this from the UK Shopping and Target websites, shown below. This kind of default option gives visitors an idea of the content structure and also promotes the use of filters.

Collapsible or expandable menus
UK. Shopping.com

Collapsible or expandable menus
Target.com

8. Clarity of choices

The purpose of faceted navigation is to simplify things for your customers. Therefore, make sure that the options you provide are not confusing. Based on the customer profile, a single category can have different options. For example, see below how two leading retailers in the US— American Apparel and H&M—have different ways of displaying options for shoes. There is no one “right way.”

Clarity of choicesExample 1: American Apparel

Clarity of choices
Example 2: H&M

9. Organize Values Within the Facet

It is very difficult to display all the values available within a facet. There are several different ways to do it.

  • Inline Expand: In this method, the facet displays the first few values by default, and users can view additional values by clicking on “Show More.” An example is Home Depot.com. Another example is KL Wines, where customers can see the major options in each category. For other options, users must click on “View More.”

Organizing of values or filters within the facet

 

Organizing of values or filters within the facet
KLWines.com

  • Scrolling: Scrolling is a widely used method. Zappos and Asos.com are good examples. NexTag.com combines show more and scrolling, where the scrolling is activated upon clicking the ‘more’ option. The scrolling method is even more effective if you providie a search option inside, as Yebhi.com has done.

Organizing of values or filters within the facet
Zappos.com

Organizing of values or filters within the facet
Asos.com

Organizing of values or filters within the facet
Yebhi.com

  • Pop-up: In the pop-up method, the values display as a pop-up when the mouse hovers over the facet. eBay uses this method for displaying brands. Look.com also uses this method. This method saves space and minimizes clutter in the navigation. For example, DIY.com effectively combines a pop-up with “View All” to categorize its huge range of products into five broad categories and display detailed values in a pop-up format.

Organizing of values or filters within the facet
Look.com

Organizing of values or filters within the facet
Diy.com

  • ‘See all’ + pop-up + scrolling: In this method, upon clicking the “See All” button, a pop-up displays values the user can scroll through. This method is put to good use by Overstock.com.

Organizing of values or filters within the facet
Overstock.com

You can also choose any option that lets customers access maximum values with ease.

10. Sort Values Within Facets Logically

There are multiple ways to sort values within a facet. You can sort by unit count for facets such as brands, or by alphabetical order. Usually, facets such as size or price are arranged in ascending order. Take Amazon’s books page as an example. Within its “books” facet, values are sorted alphabetically, from Art & Photography, to Bibliography, and so forth. Similarly, the “language” facet also displays values alphabetically. Its “book format” facet displays values by unit count. For example, “Paperback” has most units sold, so it appears on top. The facet for “Average customer review” shows values in a descending order, with 4 stars and above on top. The “new releases” facet is sorted in ascending order, with the most recent releases on top.

11. Let Users Choose Multiple Filters

Customers should have the option to choose more than one filter in a single facet. For example, a consumer who wants to buy a television may have shortlisted two or three leading brands and might want to know the sizes and price ranges available. These different combinations make your visitors’ decision-making easier.

Choice of multiple filtersTarget.com

12. Display Selected Values within facets

To get the most out of faceted navigation, the features users have selected should be distinct from the rest. The display allows customers to check their location within the site and helps them change options easily. You can do this in three different ways:

  • Inline: Under this approach, the selected value is displayed within the facet. For example, Amazon.com shows the selected option in bold with a checkbox next to it.

Display of selected values within facets
Amazon.com

  • Breadbox: In this method, all selected features are displayed in a dedicated location, or “breadbox.” See an example below from OrientalTrading.com. A best practice is to display the facet along with the value, for example the value “Christmas” is part of the “holidays” facet.

Display of selected values within facets
OrientalTrading.com

  • Breadcrumb trail: This list is shown about the search items. As the user continues choosing, the selection gets added to this trail. Usually there’s an ‘x’ icon accompanying the selection. Customers can remove the selection by clicking on the icon.

Display of selected values within facets
LandsEnd.com

  • Integrated faceted breadcrumb: The display is similar to the breadcrumb. However, in this method, customers can change the option within the breadcrumb. Walmart uses this method.

Display of selected values within facets

13. Refresh Pages Quickly

When customers are changing options, the page refresh speed affects conversion a great deal. As customers continue choosing options, newer options should load immediately. According to a study, most users expect a site to load within two seconds. Importantly, if the site takes more than three seconds to reload, 40 percent of users abandon their search. According to another study, conversion rates peaked at two-second refresh rates, but every additional second of delay resulted in a 6.7 percent drop in conversions. The study recommended that customers prefer to see a “loading” notification or hourglass symbol to show that loading is in progress.

The use of AJAX technology can increase search results display rates. With AJAX, the entire page does not refresh every time the customer refines their option. It only sends selected data, which significantly reduces processing time. However, AJAX is not search engine-friendly, so you should restrict its use to enhancing the user experience.

 

Speed of refreshing products

Speed of refreshing products

Speed of refreshing products

14. Avoid no results

Avoid filter options with no results, as they tend to frustrate the customer. Only display available choices. It can be a disappointing experience for a customer to select an option (say a color or size) only to return no results. See below the example of JensonUSA.com, which displays the sizes available in black, while the rest are all nearly invisible.

Avoid no results
JensonUsa.com

15. Improve Constantly

You should constantly collect data on how customers use facets and filters. For instance, which are the most widely used options? Which options do customers not use at all? This information can help you constantly improve the structure of faceted navigation.

16. Example of a good facet

Myntra.com is an excellent example. It uses a combination of horizontal and vertical filters. All the chosen options are easily visible, and users can cancel options with ease. It makes good use of scrolling, “many more,” submenus, sliders, checkboxes, images in the color palette, etc. Another highlight is that the horizontal facet bar remains fixed, even with infinite scrolling. It also uses an integrated faceted breadcrumb placed vertically, which lets users change options right on the search page.

myntraMyntra.com

Comments

5 thoughts on “16 Tips for Effective and User-friendly Faceted Navigation

  1. Norah Jensen

    Wow, this post really covers everything there is to know about facets! When is your next one coming?

    Reply
  2. Barbara Linnell

    Wow!
    Not only good tips you shared, but also very much detailed and simplified! Thanks a lot!

    Reply
  3. Laura

    Really interesting read I’m looking to see if there is a best practice guideline around scrolling values in a facet – say you have 30 values or more, if adding a scrolling what is the default nunber of values you should show?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *