How to design a perfect category filter


Category filters work best when knowledgeable customers search for technical products.

If your eCommerce business has both these qualities, a well-designed category filter could be just the thing you’re looking for.Unfortunately, it seems that good filter design bucks the trend in eCommerce. According to a recent study, only 16% of major eCommerce sites surveyed had adequate filtering options.

Saucony, our example for this design note, is well-positioned to take advantage of category filtering. They sell to a technical market that’s well-educated about the important attributes of their products: runners.

Runners are understandably particular about the shoes they run in. Not only can the wrong shoe make you slower—it can also cause serious injuries that take a long time to recover from. No fun. When your customer’s wellbeing is on the line, helping them find the right product takes on a new significance. Assuring your customer that they’ve made the right selection is even more important online, where they’re unable to try shoes on or ask in-store employees questions.

This is where the humble category filter comes in. Category filters are excellent for addressing two problems:

  • Connecting with your target market using their language
  • Assuring the customer they’ve found the right product

Speaking their language

If you sell to a technical audience, you know it’s important to speak using language they’ll recognize. The “pronation” filter in the image above is a great example of using meaningful in-segment language to speak to a specific audience. A runner will see that option and understand it immediately. Since it means something when a runner says, “I overpronate” vs. “I supinate”, it makes a good category filter.

Knowing the store you’re browsing speaks in the same terms as you is reassuring. You can be more confident that their products will genuinely solve your problems. A category filter is a perfect place to put that understanding front-and-center.

Reducing customer angst

While using the right vocabulary in static contexts is important, it’s even better if you can leverage that vocabulary to provide a meaningful way to interact with your products. That’s exactly what category filters do.

Category filters empower potential customers to tell you which features are most important to them. This is the opposite of most shopping experiences online—categories, featured products, related products—they’re all preordained. That’s great and all, but adding options to provide for a little flexibility is better.

If you provide the right options to filter by, you can make a seemingly overwhelming variety of products quickly appear much more manageable. Category filters put control of the purchase experience squarely in the hands of the customer, making them feel much more confident in their decision to purchase.

Where category filters are at their best

Category filters work best for technical products. You need attributes that are meaningful to your target market for the filter to be of any use.

For example, there aren’t too many meaningful attributes for sofa purchasers other than color, price, and material. Contrast that with a running shoe, or a camping tent where I can think of meaningful attribute categories into the double digits. That’s not to say a category filter is useless in situations where there are only a few attribute categories, only that it’s not as mission critical as it is in more complex product categories.

Ideas for your category filter designs

  • Only use attributes that meaningfully differentiate your product line—if you only have one meaningful option unique to the category, own it!
  • Use natural language that speaks to your target market.
  • Make the page update quickly after a filter has been selected—optimize load times and reduce the length of any long-running filter animations, if you have any.
  • Experiment with “editorial” or opinion filters—these include crowd-sourced opinions like “highest rated”, and ones you come up with internally, like “best use: trail running”. It’s great for a UI to have opinions!
  • Ensure your filters are category-specific. If I’m looking for shoes I don’t want to see filterable options that are only relevant to running shorts.
  • Bump the most important filters to the top of the filter list. On Saucony shoe size and width are at the top of the page, as they’re important to anyone buying a shoe. Only some people will find the rest of the options interesting.
  • If you have broad categories with more specific sub-categories, try using a filter view with pre-selected options to display sub-categories. That’ll allow customers to jump around to different categories much more fluidly.

Related articles

The Recurring Check-ins That Keep Us on Track
A good check-in policy makes working together predictable and fun.
Read this article
Generate More Inbound Leads with Search Data
Use search data to improve your sales and marketing efforts.
Read this article
Why Client-Agency Communications Need Defined Roles
Clear responsibilities lead to good communication and high quality work.
Read this article

It's time to branch out.

We help marketing teams build eCommerce sites that sell. Schedule a free consultation today.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.