Improving Filters’ usability

UX Design   |   Usability   |   business

Project overview

Research can give so much intel about usability issues in filters!

Only a few recorded screens of users interacting with an e-commerce site and you will start seeing usability issues in filtering.

With the data for research, I could fix every single issue in filtering. Even without it, I can show you an example of what could be improved based on UX design principles and how I could help achieve that.

Filters are meant to fasten the search. So we, designers, have to ensure that our design minimizes the time needed to get the most valuable (accurate) results for users, at the same time making it easy to buy from the business.

Filters

Have you ever felt frustrated by the filtering experience on a page? Is there anyone who hasn’t?

Filters are crucial. And the more items an e-commerce site has, the more important filters are. If filters are not working properly, users can’t find the items they need. And you can’t buy what you can’t find.

Very common issues in filters are too small touch targets, an overwhelming amount of poorly organized options, a lack of important filters, confusing types of filters, and poor representation of applied filters. And that’s just to name a few. Poor filters can make your customer rage quit and run to your competitors really fast.

How about an example of how to REALLY frustrate your users with filters?

1st example

Current design overview & issues

This is the overall view of the filters of the biggest e-commerce site in the Baltics. Not so bad, right? Touch targets are big enough, filters are clearly organized, have search fields in them. Everything seems pretty good. BUT. There’s always a “but”.

Designers have to know users and their needs. And what is one of the most important aspects for users buying sofas? Or basically any furniture, for that matter?

The dimensions. Most users have a specific place planned for furniture. Often times the space is very limited, so the requirements are quite strict. Now let’s take a closer look into the dimensions’ filters in Pigu.lt and what happens when you click “Show more” in them.

Example scenario

So let’s just imagine a very common scenario. You are a user who wants to buy a sofa for your new home. You have a space for it but it’s limited with walls and other planned furniture. You may not care as much about the height at the moment, maybe you have enough room for any depth as well since you don’t have the table yet and can take a smaller one if the depth of the sofa ends up being a bit too big for the space you have. Let’s not even look at the width right now. Let’s just look at space limitations due to which your sofa has to be between 200-240 cm in length. Just length.

It took me, as a user, almost 5 minutes to specify ONLY the length of the sofa I’m looking for. 100 length options.

And those almost 5 minutes it took are considering that I only had one task at the time, I wasn’t distracted by anyone, and I used a desktop computer (so - bigger screen and no screen movement, no sunshine on my monitor to make seeing more difficult). How many users use their phones in some public places? Multitask in their free moments with a bunch of distractions, and a small screen? How tiring does this process become?

100 length options for the sofa (I counted. Had to go get some coffee and start over just to count the whole damn thing), 30 of which I had to click so I can browse only through sofas that are in the needed interval. And that’s just length.

What if I have space limitations for other dimensions too? How long it would take for me to specify all 4 dimensions? Maybe it’s faster to just go through 3000+ items without filtering this? What if I’m looking for more furniture than just a sofa? You can go INSANE choosing the dimensions this way.

Also, filter values like the ones shown below do not help your users and do not help your business either. These are all from the sofa search, 2 of them from the width, 1 of them from the length. What is the benefit of such filters for the user? Will anyone look at 230 “Unspecified” sofas when trying to “specify” them?

Examples of bad filtering options: “- cm (156)”, “Unspecified cm (230)”, and “Not specified (19)”

Solution

This is so easily solvable. Pigu.lt already has a sliding filter with type-in fields for values for the price. They should make the same style of filters for the dimensions as well. You don’t need a search field for a single number, you need an interval which can be a single number just as easily if needed. I’d also add the number of items that the applied filter would show (not each length filter separately) for a user to know what to expect without doing the math.

And what takes almost 5 minutes now will take only a few seconds. And the page won’t have to reload after every click, users don’t have to scroll for the whole eternity either. It’s SO simple. I can only imagine how many customers gave up and didn’t buy from Pigu.lt just because of this. Your customers lose patience, you lose money.

Filter slider design with input fields

I could come up with a whole bunch of improvement options here, improve not just UX but UI as well (I mean all the designers could improve forever, right?). But ultimately, it all comes down to research and costs for the business. I don’t believe in change for the sake of change - you always have to know not just what to change, but why the change is needed and how it can be done efficiently. Every improvement has to be based on data and actual issues, not on an opinion.

Here, using the same design as for the price filter is a good option without almost any additional design work. And that would solve the issue. The time and human resources that would take to come up with a different design can be used for research and fixing other problems.

other related improvements

There are multiple other things that could be improved in the Pigu.lt filters as well (like the sequence of some of the filters, it’s questionable). But without that research data that I’m such a big fan of, you can only speculate. However, the applied filters for our example don’t look very good either. For basically the same reason as with the filter itself. It’s not comfortable at all.

Screenshot of the Pigu.lt website, showing the active filters. Length filter options are shown one by one and in this example take up 4 rows

Don’t get me wrong. I love Pigu.lt store, I’ve been a customer for years. But there are more than 3 million items in the store right now (at the moment - 3 143 652 items!!!), and the filters need to be nearly PERFECT for Pigu.lt to not lose profit over them.

2nd example

The current design has 73 options

The redesign example has 10 options

The redesign example with 10 filtering options representing all the available sizes in 2 different formats (in the same line, not as separate filtering options), together with the number of items for each size

The design Issue

It’s not a good design if the designed filter has 73 options that could be easily reduced to 10. It’s obviously an issue with the data input as well, but an issue that hurts users and the business and therefore should be solved.

No user will want to go through all the different size format options just to filter out the needed size. Especially in a list like this that is also full of size formats that are not familiar to the market that the user is browsing in or the sizes that are not standardized at all.

So naturally, the user either leaves the site to google forever until finds out which sizes should be selected as well (and spend the shopping time googling), or simply doesn’t select them and doesn’t even see a lot of items that the user otherwise may be interested in buying. Both scenarios are bad for the business.

So, the issue is quite similar here - too many poorly organized filter options, most likely due to poor size data input. And the filter is again - one of the most important ones. But since the function of the filter is different, the solution is a bit different as well.

One of the main differences is different user expectations regarding this filter. The user does not expect to choose an interval for the sizes, most likely one or two sizes. Therefore, the slider filter would not make sense here.

The solution

The company already detects the location where the website is used for other purposes - for the currency, and for the delivery. If you have the location, why not automatically show only the sizes format that is familiar in that market? Of course, that also requires unified sizes data input. You can’t put size 36 in a bunch of differently written options for user to decode, some of which are only differentiated by the space after the value which is not even visible to the user.

There are quite a few ways how this could look for the user, above is just one of them. Likely the search field for the sizes filter would no longer be necessary since the amount of options is drastically smaller. Don’t get me wrong though - in general, a search field in a filter is a great idea. But there’s a right time and place for everything, and it’s likely not when we are talking about filters like size, where there should be only a few options.

Only research, testing, and business information about the current root cause of the issue could provide more specific information about which filter redesign decisions would work best. But one thing is clear - when the amount of options in a filter is more than 7 times bigger than needed, it frustrates the users and hurts the business.