What are the best ways to display values In product filters?

HarveyNguyen
Tourist
5 0 5

More than a nice-to-have feature, product filters are a crucial element to enhance the shopping experience and boost sales for eCommerce stores. How should you display the values in these filters so customers can quickly find their desirable characteristics.

Range sliders for filters with numeric values

Sliders allow users to view and select a value (or range) from the range along a bar. They’re ideal for adjusting settings such as price, width, length, height, etc.

HarveyNguyen_13-1637217932897.pngBoost Product Filter & Search's Custom range sliders feature allows users to create up to 12 slider filters from product options, tags, and metafields. Cookwoods has used it to set up many sliders for its typical product attributes to enhance shopping experience.

 

 

Filter by price is among the most necessary filter options unless your products are not for sale. It is also the most common filter with numeric values that you can find in all eCommerce stores.

As a rule of thumb, the price filter is displayed as a range slider. This enables users to filter results so they only view items that cost more or less than a given amount, or those that fall inside a specified price range.

 

However, the freedom that the range slider without value indicators offers also has problems. It takes more time for shoppers to set and select a value along with a subjective range. Moreover, if the range slider is not super responsive, it will ruin the whole shopping experience. That's why besides the continuous range slider, you can add a value text box.

Another option to resolve the usability issues of continuous sliders is to use discrete sliders. These feature pre-determined tick marks on the slider track which shoppers adjust to a specific value by referencing its value indicator. This way, customers can have a better idea of what is the low, the middle, and the high value in the price range. Also, you can set a “slider step" or enable a value text box using an app like Boost Product Filter & Search so shoppers can still choose the exact range they want.

HarveyNguyen_3-1637217886778.png

 

 

Dynamic display options with image swatches

Human process visuals 60,000 times  faster than text so filters with image swatches are much more user-friendly than other display options.

The color palette is probably the most popular use of a swatch filter. It helps shoppers visualize the true color of the products within seconds. Without the swatch filter, you may need a long phrase to describe the exact shade of the items and most of the time customers still find it complicated to distinguish between green and emerald without a color swatch. You think this small difference won't affect the shopping experience? Just imagine how your girlfriend would react if you mistakenly buy the cherry red lipstick instead of her favorite scarlet red.

HarveyNguyen_5-1637217890147.png

 

The color swatch filter on Red Dress helps shoppers visualize the difference between Blush Pink and Light Pink.

If your products contain more than one color or if none of the color codes can depict the exact shade of your product, you can use Swatch settings of Boost to customize the swatch.

 

The ability to upload images in the swatch opens a lot of opportunities to enrich the shopping experience, especially for fashion commerce. You can customize the image swatch to help customers visualize the shape, pattern, print, etc of the products.

HarveyNguyen_7-1637217890297.png

 

HarveyNguyen_8-1637217891516.png

 

HarveyNguyen_9-1637217892793.png

 

Show all values vs Truncation design vs Inline scroll for filter option values

There are 3 main ways that most online stores implement to display filters:

  1. Display all values at once
  2. Show a subset of values combined with a scrollbar
  3. Display a truncated list and a View More or View All button to present the remaining values
HarveyNguyen_10-1637217893791.png

 

HarveyNguyen_11-1637217894136.png

 

HarveyNguyen_12-1637217894640.png

 

As you can see, the first option works best when you have a small number of values in a filter option. Usually, filters with from 5 to 10 values can be displayed at once. If there is more than that number, you should use a truncation design or an inline scroll to make sure customers won't overlook all available filtering criteria that go after a long list of filtering values in their full length.

The scrollbar is trusted by 26% of the top-grossing e-commerce sites for listing filtering options according to a Baymard study. Still, when using this option, you need to avoid these issues:

  • Scroll hijacking: Inline scroll areas can hijack page scrolling when the user is using the mouse wheel or is on a touch device.
  • Overly sensitive scrollbars: This is usually a fallback of “Scroll Hijacking”. It usually happens on the desktop when users drag the actual scrollbar instead of using the scroll wheel.
  • Invisible content & scrollbars: The default scrollbar design for some operating systems is to hide non-active scrollbars so customers won’t actually be able to tell where the inline scrollable areas are.

The downside of showing filter values with a scrollbar can be resolved with a truncated list. The styling of a “View all" button or hyperlink is more noticeable than the inline scroll, so customers will notice that it’s a clickable option.

Whether using the truncation design or the scrollbar, there is still an unavoidable problem. Getting an overview of all values is often difficult for the shoppers due to its constricted space. Indeed, they need to perform further actions (scrolling down or clicking “View more") to see all the available values.

To minimize the effect of this issue, you can display a search box on top of the filter options so shoppers can quickly find their desirable values. It's also an excellent idea to prioritize the values that your customers usually click through. By using the Collection analytics of Boost Product Filter & Search, you will know which characteristics are most popular and can manually rearrange the order of filter option values.

It's all about understanding shoppers' intent

Customer behavior is the foundation of all UI/UX design. To create a filter group and values that serve your shoppers, there are several questions you need to keep in mind:

  • Which criteria are most influential to users in making their choice?
  • What words do users use to describe these criteria?
  • Do visitors understand your wording, or does it look like jargon to them?
  • Which filter values are the most popular or most commonly used?

-----------------------------------------------------------------------------------------------

Boost Commerce - Boosting sales for over 10,000 active merchants

Want to see how our app works? Take a look at our blogvideo resources

Website | Facebook | Twitter | LinkedIn | Youtube

Replies 0 (0)