I've been designing a web app for the past four months. A case scenario comes out while designing the product page.

In the product page, a couple of categories have on this product page in which are pending, in-progress, and approved products that I segmented in tabs. The case scenario is: I want to keep the search bar for the user so that the user gets the desired product with minimum effort by using the search bar.

The main argue point is, do the search bar will come under the tabs bar or above it? instance if the user clicked the in-progress tab and also using the search bar to get the desired product. The search finding a product in the in-progress tab because of he/she clicked that tab.

It is a scenario please give me your suggestion with some example.



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

| improve this answer | |

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).

| improve this answer | |

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.