8 December 2023

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

By Ronald Smith

Hey there! I’m here to share some awesome tips with you on how to make filtered navigation on your online store super customer-friendly. You know, that cool feature that helps you find exactly what you’re looking for in a sea of options? Yeah, that one!

Okay, let’s dive right in! Remember those handy filters on eBay or Amazon? Categories, materials, brands? They make it so much easier to narrow down your search and find your perfect product. Well, you can have that too! And trust me, you’ll want it if you want your online store to stand out and keep your customers happy.

So, here are my top 10 tips to optimize your filtered navigation:

1. Find the Perfect Spot

First things first, you need to pick the right spot for your filters. You want them to be easily accessible, so your customers can use them without any trouble. Think about placing them on the left side of your page, just like on eBay or Amazon. It’s what people are used to, and it works like a charm!

When I shop online, I usually see the filtered navigation options on the left side of the page. You know, like on Amazon or eBay. But did you know that this might not always be the best choice?

The Baymard Institute, a group that studies usability, found that having a horizontal navigation menu at the top of the page can actually be better in some cases.

In a nutshell, their research showed that a horizontal filtering and sorting toolbar is only suitable for certain types of online stores. But for those stores, it can really outperform the traditional left-hand side filtering sidebar.

So, why is this? Well, it turns out that horizontal navigation tends to work well for online stores that don’t have a lot of different filters. This way, customers are less likely to miss any filtering options.

Have you ever wondered where the best place is to put the filtered navigation on a website? It turns out that the location can have a big impact on how many people make a purchase. Let me share an interesting example with you.

Crate&Barrel is a company that sells furniture and home decor. On their website, they decided to place the filtered navigation horizontally. This means that instead of being displayed on the side of the page, it stretches across the top.

Now, you might be thinking, “Why would they do that?” Well, they did some testing and found that this horizontal placement actually led to more people buying things. The conversion rate was higher when the filtered navigation was at the top compared to when it was on the side.

So, if you’re designing a website and you have filtered navigation, it’s definitely worth experimenting with different placements. You never know, you might just find that a simple change like moving it to the top could make a big difference in how successful your website is.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

Step 2: Find the right filters for your customers

When it comes to filters, it’s important to choose ones that are relevant to your products and your customers, not just copying what your competitors are doing. This might seem simple at first, but it can actually be quite challenging to figure out which filters will actually help your customers find what they’re looking for.

For example, take a look at how Nordstrom handles their filters for each product category. They carefully select filters that address the specific questions their customers have when searching for sunglasses. These filters include options like “lens type,” “face shape,” “color,” “price,” and “brand.” By offering these specific filters, Nordstrom makes it easier for their customers to narrow down their choices and find the perfect pair of sunglasses.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

3. Give your customers the freedom to choose multiple filters

When you visit a website, sometimes you know exactly what you’re looking for. You have specific criteria in mind, like the color, price, and material of the item you want. That’s why it’s important to allow customers to choose multiple filters at the same time.

You should be able to select different filters from different categories, but it’s also helpful to be able to choose multiple filters of the same type. For example, the Wayfair online home store lets you search for as many filters as you need. This makes it easier to find exactly what you’re looking for.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

4. Enable manual input when necessary

Checkboxes are cool for getting filter values, but it’s also nice to let you set filters yourself, like when you want to set a price range. Everyone has their own budget, so it’s not always easy to have the right price filters already set for you.

eBay lets you choose how you want to set your price filters. You can quickly pick a preset range if you’re cool with that, or you can type in your own minimum and maximum prices using the text input fields. It’s up to you!

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

Step 5: The Product Counter – Keeping You Informed and Building Trust

Imagine this: you’re searching for something special—a product that meets all your needs. You’ve applied various filters to narrow down the options. But how do you know if you’ve done enough?

That’s where the product counter comes in. It’s like a friendly companion, guiding you on your search. Not only does it let you know how many products you have left to consider, but it also builds a sense of trust.

With the product counter, you always have an idea of where you stand. It’s like having a progress bar, but for shopping. You know exactly how close you are to finding that perfect item.

And here’s the best part: no more guesswork or uncertainty. The product counter tells you if you’ve set enough filters or if you need to try again. It’s a small feature that makes a big difference in your shopping experience.

Let me tell you about a really cool feature that e-Commerce sites have. It’s called the product counter, and it’s all about showing you how many products belong to a certain filter configuration. Office Depot has taken this feature to the next level by displaying a product counter right next to each available category. This little trick gives you a natural push to keep searching for products.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

6. Create Meaningful Filter Categories

When you’re running an e-commerce site that converts well, it’s essential to provide your customers with all the filters they need to make informed purchasing decisions. This is especially crucial if you’re selling premium products. However, to ensure a clean and user-friendly filtering experience, it’s important to organize these filters in a way that makes sense.

Take The Body Shop’s online store, for example. While they may have an abundance of filters, the experience remains seamless because they’ve grouped them intelligently. As a result, users aren’t overwhelmed by never-ending and confusing lists of filters.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

7. Making filter groups easy to open and close

If there are too many options, it’s helpful to make the filter groups toggleable. This means users can quickly open and close different filter groups. It’s especially useful for mobile layouts, where filtered navigation can become extremely long and difficult to use.

Target’s filtered navigation uses a well-known pattern of up and down arrows to show that the filter groups can be toggled. Additionally, when a filter list becomes too long, like with colors, a scrolling bar is added for easier navigation. Both of these features greatly improve mobile usability.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

8. Don’t Forget About Thematic Filters!

Thematic filters are a special type of product filters that let you search for items based on specific themes. They help you find what you’re looking for, whether it’s “summer arrivals,” “on sale” items, “casual style,” or “last-minute deals.” Surprisingly, not all big online stores use thematic filters, according to research conducted by Baymard Institute and summarized on Smashing Magazine.

Believe it or not, 20% of the top e-commerce websites don’t have thematic filters, even though they sell products that clearly fit into different themes like seasons or styles. It’s a missed opportunity for these sites to make it easier for their customers to find exactly what they’re looking for.

You know what? I think it’s worth taking a moment to think about whether you can add some cool filter options to your own online store. I mean, just look at Macy’s! They’ve got this awesome feature in their “Dresses” category where they have all these special filters you can use. They’ve got stuff like “Special Offers,” “Dress Occasion,” and even “Wedding Occasion.” It’s pretty fancy, right? If you want to dig deeper into how Macy’s made their filtering system so cool, you should definitely check out this research article.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

Step 9: See Your Applied Filters

Do you ever forget what you were just searching for? I know I do! That’s why it’s so helpful when websites display the filters you’ve applied right next to your search results. It’s like having a handy reminder right there on the screen.

At Debenhams, they take this feature to the next level. Not only do they show you the filters you’ve applied at the top of the filtered navigation, but they also group them together when you’ve applied multiple filters. That way, it’s even easier to see what you’ve selected at a glance.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

10. Put the most popular filters at the top

Every online store has its own popular trends, like a new style, a current season, or a special deal. To help you find them easily, you can use a special filter for each of these trends, and put it right at the top of the list of filters.

If you want to be even more advanced, you can change your popular filters regularly, based on how people are shopping on your site.

10 Tips to Improve Filtered Navigation for an Awesome Online Shopping Experience!

The Nintendo Game Store has a clever way to entice users who might be on the fence about making a purchase. They offer three popular filters – “On Sale”, “DLC available”, and “Demo available” – prominently displayed at the top of the page. This makes it easy for you to quickly find games that meet your criteria without much effort.