Should filter options go above the search or under? Why?
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
This answer sums it up nicely that
Filtering takes an existing full list, and removes items based on criteria that match/don't match.
Search takes a blank slate and adds to it based on criteria that match/don't match.
In chronological order, that means that filtering usually is done after searching because it requires an already existing result list.
Consequently, it makes more sense for the filter options to go under the search box (Sample 2) (or on the side. However, it has been known that filtering will be used more often if it's put on top than on the side). Filtering is done after searching.
Note that, some options can go above like in the case of Scoped Search (providing users with reasonable scoping searching options based on the data set). Have a look at this Smashing Magazine article for an overview of search, sort and filtering UI patterns for mobile design.
Under. If the filters are interacted with less than 25% of the time the search feature is used, they should be an addendum to the search text box + submit button, as in Sample 2. Visually Sample 2 has the textbox and submit button be sufficient for a search, whereas Sample 1 feels like the Filters need to be selected in order to be able to search.
A case could be made for over, but I would say under is better when there's no special reason why it should be over for the particular case.
Also, if you have more than 1 or 2 filters besides search text, you need to have an Advanced Search option to show these filters, with the filters hidden by default.