I've been working on a web app for the past four months. On the product page, a couple of the categories have tabs for pending, in-progress, and approved products.

There is a search bar, and my question is: is it better to place search under the tabs bar, or above it? For instance, if the user clicked the in-progress tab and then uses the search bar to find their desired product, the search would be scoped to products in the in-progress tab because of he/she clicked that tab.

Is that better than providing the search bar for all statuses?


This is a very common UX problem. The goal is to get the user to the right item vs. display the right tab. A good general practice:

  1. Add the search bar outside all tabs. Users will often not know which tab an item is located under. Here is Pinterest's starting search bar. It has a lot of suggestions because its users come to browse ideas. Your users might not need suggestions in this step, but might need direction like "Search for first name, last name, or ID number."

Pinterest search bar with no terms entered

  1. When the user enters a term, immediately show suggested results.

Pinterest's search bar with some suggested results after user types 'Oregon'

  1. After the user submits the search, allow them to facet the search with a dropdown menu or other filter. (It's okay to provide this filter on Step 1, too, if you don't mind the UI extra control.) Don't forget to let the user clear search terms and start over.

enter image description here


Why not allow them to search by context? Pinterest's solution works for them but it's very complex because their taxonomy database is pretty much endless and that's why they have an endless horizontal list of categories to refine your search.

A more common approach to context search is adding a dropdown at the beginning of your search bar that would allow the user to choose "Search on all tabs", "Search on pending", "Search on in-progress", etc.

A good example of this is Amazon's Search: enter image description here

Something a bit more complex if you intend to grow the settings of the queries in the future would be to add a filtering menu like on JIRA, where they show you the list of users when you click on "Quick filters" which toggles a curated view:enter image description here

All that said, I agree with Stacy that the best is to have the Search outside even if it's going to reflect changes on what tab the user is seeing (that is, adding a filter to the search automatically).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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