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.
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.
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 – by 20% in certain industries! 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.
This article offers 16 tips to maximize the benefits of faceted navigation.
- Use Relevant Options
- Position Facets Horizontally or Vertically
- Present Facets for Maximum User-Friendliness
- Use Facet Images
- Include Customer Reviews as a Facet
- Display Store- or Industry-specific Facets
- Use Collapsible or Expandable Menus
- Clarity of choices
- Organize Values Within the Facet
- Sort Values Within Facets Logically
- Let Users Choose Multiple Filters
- Display Selected Values within facets
- Refresh Pages Quickly
- Avoid no results
- Improve Constantly
- Example of a good facet
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.
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.
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
Image 2: Horizontal facet disappears upon scrolling down
When many products are for sale, a vertical arrangement works best, and is therefore most common.
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.
Sliders or input fields can be used for numerical values such as price or distance.
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.
Dropdowns limit the choice to a single option, which can be a limitation. Cars.com uses dropdowns.
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.
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.
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.
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.
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.”
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.”
- 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.
- 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.
- ‘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.
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.
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.
- 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.
- 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.
- 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.
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.
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.
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.
(Note: Have you heard of OptiMonk? It’s a powerful onsite messaging solution that helps you convert up to 15% of abandoning visitors to sales and leads. Give it a try – click here to start your 14-day free trial now.)