7 Tips To Design Better Filters

Conversion rates might be directly influenced by the UI/UX solutions you decide to apply to filters. This is one of the things that proved to be very true when we were realizing a project for an accommodation booking platform — Noclegi.pl.

Before we started working in HeroDOT on the solutions to improve the UX of the market-leading accommodation site in Hungary, we did both face-to-face and remote user interviews with their customers. While surveying and questioning visitors of their website and application, we discovered that filters were one of the major issues affecting users’ experience. Our designers decided to work out suitable solutions and best practices that address these problems as a part of design training.

COMMON PROBLEMS WITH FILTERS:

On the one hand, having too many filters, very often imprecise, and placed in the wrong order is one of the most significant issues your company may grapple with. The incomprehensible division of filters doesn’t help as well. On the other hand, a lack of diversity of checkboxes may make your users feel tired and bored after dealing with the search on your website.

MISSING USEFUL FILTERS

Your customers might have very diversified needs. The more they vary, the more critical it is to make sure they are not left with the feeling that your design misses useful filters.

LACK OF SYSTEM STATUS

System status is inter alia the information providing how many searches your choice of filters will give. What would happen if your customer decided to choose all the relevant filters and found out no results were fulfilling the criteria? The disappointment, dissatisfaction, impatience, loss of energy to do the research again. Lack of system status may bring these feelings.

OUR RECOMMENDED SOLUTIONS:

1. PUT THE MOST IMPORTANT FILTERS ON THE TOP

2. CATEGORIZE FILTERS, KEEP THE HIERARCHY OF INFORMATION, CLEARLY DIVIDE SECTIONS

3. A) DON’T SHOW TOO MUCH AT FIRST SIGHT

B) BUT SHOW THE SCALE OF HOW MUCH YOU HIDE

“<5”, “10+”, “100+”, “500+” ⇒ such indicators should be enough for your customer to understand what challenges they face after clicking on “show more” or “show all”.

4. ARRANGE THE ELEMENTS SO THAT THEY ARE EASY TO SCAN

5. DIFFERENTIATE THE WAYS OF CHOOSING FILTERS

6. GIVE USERS CONSTANT KNOWLEDGE OF SYSTEM STATUS

7. LET USERS CONTROL THE CHOSEN FILTERS. MAKE IT POSSIBLE TO CLEAR SECTIONS AND “CLEAR ALL”

CONCLUSION:

The article was originally published at https://herodot.com/blog/

https://herodot.com/ We know how to strike the right balance between design, technology and data.