Products can have a lot of filters. Let’s take refrigerators as examples. They can be filtered by:

 

A filter like power rating or size would apply to a fairly narrow spectrum. Domestic refrigerators can only get so big and consume so much power before they’re categorized as industrial freezers and stop making sense as a purchase for the average family. And they can’t get too small either as they will lose their appeal as long-term food storage devices. A filter like color or brand on the other hand, could potentially contain tens of values.

Due to the limited size of any standard computer or mobile phone screen, displaying all the values of each individual filter is just not possible. If you list all of your 100 color filters, you won’t have any space left for your size and price filters; assuming those 100 color filters even fit the height of a standard screen in the first place.

This is what necessitates innovation in how you display your filters. If all the available space on the screen is taken up by color filters, a shopper is more likely to assume that you only sell refrigerators from a single brand, at a single single size and price with color being the only available variation. 

The entire point of having a filter section is to ensure that customers get to select a product that best serves their needs. They should be able to select a preferred brand, maybe Samsung, GE, or LG. They shouldn’t feel like you’re foisting some generic brand they’ve never heard of on them.

 

What can you do about this?

You will need to limit the number of filter values you display so customers can see the whole range of filters you offer at a single glance. The best way to give an overview of all your filters is by truncation. 

There are other approaches like inline scrolling but usability studies and common sense have shown that truncating your filter values is the best approach. Instead of showing 20 color options, you can show six to ten color options so that you still have space left to display your size, price, brand, and other filters.

 

How do you truncate filter values properly?

Visually indicate the existence of additional values 

You can’t just truncate and leave it at that. If a customer, say Jonah, sees only six color options, he’s going to assume your refrigerator only comes in six colors. Maybe he wanted a beige refrigerator and failing to see that color on the list, he just assumes you don’t have it.

You can use a link like “more”, “see more”, or “see 17 more colors”. Since filter design uses the checkbox, the link needs to be in a different style and the link text should be in a different color to ensure it’s not mistaken for just another item on the list of filters.

You can also fade the last value or the last two values on the filter list to indicate the existence of additional values.

 

Display six to ten items before truncating

Don’t truncate after just two or three items. Shoppers find truncating a short list illogical. Don’t display too many items at once either because people suffer from choice paralysis when faced with an excessive number of options.

 

Visually distinguish filter groups

You don’t want your color filters running into your brand filters or your price filters running into your size filters leaving customers confused about where one begins and the other ends. While screen real estate might be in short supply, it’s still important to space out your filter groups. The gap doesn’t need to be huge, just use paragraph spacing and you’ll be alright.

 

Ensure at least two values are truncated

There are few things more annoying than opening a “more” link and only finding one item there. When shoppers click on links like that they expect to be rewarded with options. A single option doesn’t feel like much. The reaction is always one of crushing disappointment. That’s the ecommerce equivalent of winning $10 in the lottery.

Examples