I'm working on a page which shows multiple products and it needs some sort of filtering. I've seen a lot of websites place filters for the content either above or left of the content, as shown in the screencaptures below.

Question: Is there a particular reason to place filters in a particular position on an overview type page like this?

Filters on top: enter image description here

Filters to the left: enter image description here

2 Answers 2


Yes definitely there is a reason. As per my observation and knowledge below are the reasons for that.

  • when you have filter with many attributes then it will be feasible to display in left on right side with vertical bar

  • when you have very less filter attributes then you can show it horizontally above the listing but here don't forget to make header to filter part fix(steady) because if user scroll down to see the more items and they want to filter with some criteria then they have to scroll up for the filter and it will be not user friendly.

  • When you have very fix window layout and less filtering criteria at that you can set the filter layout left or right side vertically.

This all scenarios are dependent on the requirements. So use it as per your need.

  • I'm not entirely convinced by your first point, the examples I showed are opposite of what you said. The first (with filters on top) has a lot more attributes to show in it's filter, and uses a scrollbar to compensate, while the second has only 4 attributes in it's first filter. Could you elaborate more on this?
    – MJB
    Commented May 18, 2016 at 7:34
  • @MJB Yes I am trying to explain you that first has shown the scrolling but with fix page so filter will be always shown above the listing. and yes if you have scenarios such like you can divide in 2 parts then you can show the filter at a time i.e. half horizontally and half vertically. Commented May 18, 2016 at 7:49

Eye Tracking - the place where people look first and can look at it without losing the focus on the item they are viewing at the same time.

The place where important filters are placed is the area most users will not leave un-noticed.

Recently eye tracking has been heavily used in website design and testing. When I became involved about eight years ago, the sites tested were mainly flat HTML. Researchers were able to produce beautiful heat maps that were useful for comparing and optimising simple screen layouts and online advertising placements.

Eye Tracking: Best Way to Test Rich App Usability

enter image description here

Many cognitive scientists believe that every moment of experience is a mental reconstruction of the world based on complex "calculations" that combine a vast amount of environmental data1. The majority of information input to user experience is visual, and eye tracking provides contextually relevant information that cannot be matched by any other readily available design research method. The goal of eye tracking is not to see the world from another person's point of view or identify his precise thoughts, but instead to provide a detailed account of much of the real-time data a person uses to construct their experience from moment to moment.

Eye Tracking and Web Usability: A Good Fit?

enter image description here

  • Thanks for your comment, this actually makes a lot of sense, but maybe you miss understood my question. I don't want to know why one would place filters on either top or left side of the screen, but why one would choose to place it on the top of the page rather than the left, or vice versa.
    – MJB
    Commented May 19, 2016 at 6:14
  • @MJB " but why one would choose to place it on the top of the page rather than the left, or vice versa." is because of the eye tracking and hit maps. So that the user doesn't get confused with multiple filter options (placed on left or right) related to the product, but has the important filter options always in view.
    – Dipak
    Commented May 19, 2016 at 6:44
  • I get that, but if you have heatmaps showing for instance an F shape, which is quite common, why do some websites place filters on the top rather than the left. When is it better to place it on the top rather then the left, or on the left rather than the top? Or is this simply preference?
    – MJB
    Commented May 19, 2016 at 6:46
  • @MJB If you see the density of color - it is a lot more in top area compared to left, which means more people first look at top area.
    – Dipak
    Commented May 19, 2016 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.