User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm currently designing a website that has 80% of mobile device users, so I'm trying to enhance the experience when opened on mobile.
In products page I'm planning to put a button filter to help users find their product with ease, we are searching for the best practices about the button position, either on the top or on the bottom of the mobile screen.
May you guys share your experience about this? Which is the best for the mobile user?
I would suggest the button be on top. I'm using some apps on day to day basis and those apps having the filter buttons on both top and bottom, of all those applications I feel the filter button on top is very comfortable.
And I feel keeping the filter button on top would be the best option. As a user, I feel the filter button on bottom reduce the real estate of the mobile screen and users always scrolls down to view more on a mobile screen and it is better to keep the filter button on top so they always see the contents they are looking for and not the same filter button again and again.
In the below, screenshots the first application (Myntra) uses the filter buttons on the bottom as you can see it occupies quite a little real estate of the mobile screen. But the best part of this application is the filter button will be visible only if the user scrolls back to the top. But still, I always scroll down and back to the top again to see the product again which I feel disturbed when the buttons come back to the top again and again.
In the other two applications(Redbus & Flipkart) the filter button is on top and in the second application the clear filter button is a little transparent and it's very well placed to clear the filter any time. The third image has the filter button on top and a lot of real estates to view the products.
On large screen devices, the filters shall be on the right side of the screen to provide better filtering options on the same contents screen.
I think filter option on top works out as it a website. If it was a mobile app then important features that is most frequently used would be placed at the bottom.
Check the filter option (Refine) on ebay website. Hope this solves the problem.
A question for context:
What is this website used for? It sounds like ecommerce of some sort.
Filters are often placed at the top of the screen, often as a drilldown to a refined search. You'll find a common ecommerce pattern on desktop of left hand filter areas, but look at what amazon does on mobile. They have a sliding right panel, then give an indication of a filter count (2 in this screenshot).
Filters provide users additional constraints on a general search term. Using a top to bottom model, take a look at this screen, as it goes from the general to the specific:
The one drawback in this design (just my opinion) is that the filters could be a little more prominent, and perhaps sticky. But that's just an opinion, and I doubt amazon has released this without extensive testing.
Having the filter button at the bottom of the screen can be confusing for several reasons:
Your sites controls are competing (on safari web) with a bottom navigation bar and other controls. Have a filter button stack on top of this would add more visual noise. The filter button seems like it would need to be sticky as well, otherwise there needs to be a scroll down to get to it.
If users do need to scroll to some fixed page bottom, you'll need to apply finite results so I don't have to endlessly scroll. Then you have another problem: How do I even know what's below? My assumption is just a list of products. It's not discoverable.
Filter is an aspect of search (and categories). Since you list the category, or the search results at top, my expectation is to augment the category or search close to where it's located.
See another example from Yelp. There's some toggles to scope your results close to the search, and there's a prominent Filter button right there.
