What is the main key to increasing your conversion rate? The answer is to provide a great shopping experience for your customers. Of course, there is a complicated topic for a series of books, which consist of many parts. But, according to the study by Synchrony Financial, more than half customers would pay more for the unique and personalized experience. To provide the high-level service in online store is much harder than in offline because the users see only a screen and evaluate your company relying on the site. So, it is a strong indicator for retailers to make their shopping as easiest as they can. And starting it from UX and the way people search the necessary goods on the Internet.
Why do you need product filtering
On the standard site, customers have to scroll a lot of pages and links to find a product. It is exhausted and time-consuming process, and there is where the product filtering comes. This feature allows users to find their own route to a product, tuning different characteristics.
You can trust or not, but:
- 700 usability problems related to product lists, filtering, and sorting
- 16% of e-commerce site provides users with good filtering
- 32% of websites have insufficient truncation design
How to make the filtering works in the best way
In this section we will tell you about the key set of “filtering characteristics”:
- Where to place a filter bar
- How to present the most relative filters and not overload customers
- How to display filters
Filter placing
Looking back in 2010, Nielsen Norman Group founds, that almost 70% of customers focusing their attention on the left part of the page. There is the main cause, why the leading retailers put their faceted search on the left.
By the way, the top of the page is the second most viewed place, so, use it for category placing.
Take an example H&M website.
Relevant filters
The goal of the faceted search is to allow consumers to shop in their own style based on their personal needs and preferences. It looks good when a user sees a lot of different options to filter all assortment. But, sometimes putting too many choices can overwhelm the customer and he says ‘bye’ to your site.
To prevent this put only really necessary filters: make a small research, see, how it implements in your competitors, if you have a sufficient budget, organize a focus group.
For the reference, look at the Nike. After selecting a page “Woman shoes” consumers can filter by:
- Shoe type
- Shoe height
- Weather
- Brand
- Innovations
- Width
- Color
- Size.
This is a good example of minimalistic, but useful filtering.
Filters Displaying
There are 3 the most popular ways to display filters among the major retailers:
- All filters at once – do not recommend
- Adding a scrolling within each filter type – do not recommend
- Present only filter titles without selecting options or truncating filtering values (display a few options and a link “see more”) – the best choice.
The last one variant gives users the opportunity to make an overview of the all existing filtering types. And only, if they found the most preferred, they could see all the available options. It looks like a combining the benefits of the previous two.
Here is an example of the truncating.
How no to do a filtering
In this example, the filtering options do not stand in the right place. It will be better to put them on the left part and do not divided into two blocks.
Another not good example is to enable scrolling in the each of the filters. The best decision here was to do a link “See more”.
The last one example of how not to build a filtering bar is to put all filtering titles and their options in one time.
Features of WooBeWoo Filtering plugin
Wobewoo Product Filtering plugin provides your customers with an all-in-one solution to find the needed products instantly. It has:
- Multi-option filter: sort all goods by price, categories, tags, attributes, and price range
- Automated integration: easily connect with the WooCommerce options
- Responsiveness: looks and works great on all devices
- AJAX support: customers can see filtered results in real time without reloading the whole page
- Perfect view with different WordPress themes
- Customize options
To look on the tutorial how to install the plugin, please, see this documentation.