Designing Ecommerce Websites – free course

Vertical not horizontal filters

In the design challenge of finding room on your search pages it can be very tempting to put your filters horizontally across the top of the page. After all, it creates width and allows more focus on the products themselves. However this then means your filters become very space-limited and users can easily scroll past this area. If a user misses the filters and you have lots of products then they’re more likely to see mostly irrelevant items, which is a poor experience.

I’d recommend running your filters vertically down the left side of your page. This is an established pattern that has worked for a long time and most users understand it. I’ve watched many user tests where users are happy going through large numbers of filter options when listed vertically, and they have the advantage of being able to see results alongside. Do make sure the search results dynamically update with every filter selection and there isn’t a ‘search’ button they need to click, or you’re doubling the work.

On mobile of course you’re not going to have the space for this. Instead it will require a tap to bring up most of the filters (and you can expect fewer people to view/adjust them as a result) but you can have the same filters stack vertically and slide in from the side, maintaining consistency.

A couple more tips here

Results: Have distinct titles

Search fields should auto-complete

And loads more in the book

How to Design Ecommere Sites book cover