Search Bar with multiple filters

Question

I'm designing a solution for search that allows upfront filtering. We have a website that displays a large amount of content of different types. We need the filtering systems.

My question is: Could you suggest a better solution? I thought I could consolidate both dropdowns, but am not sure if that would be too busy or if it makes a huge mess of the logic.

Any ideas? Thanks!

Answer 1

I really like Google's approach to filters. I know that it is sometimes unfair to just point to Google's approach to something and say do this, so I'll try and give some reasons why:

1. Filters don't get in the way of the initial search. First and foremost, Google wants you to perform the search. A lot of users don't even understand or need the filters, and Google doesn't let added options, like filters, confuse the simple experience for that majority.
2. Providing filters after the initial search helps explain the feature. In your wireframes a user would have to select a filter, before they enter their query. In Google's approach, the filters have the results to provide context on-the-fly. If I'm presented with a filter before performing my initial search, I run the risk of excluding the result I want, possibly because I didn't understand the criteria for the filter. For example, if I had the option of selecting a filter first, I may select 'Shopping' not knowing, that it is only going to show me products in the results.
3. The query takes a backseat to the filters. With the drop down approach in your wireframes, it looks like I would have to select a filter and perform another search each time I wanted to filter. This could take the user longer to get to the correct result. With Google's approach, it feels like I'm indeed filtering the first pool of results from my initial query instead of performing a new search each time I select a filter.

*Edit: This answer assumes you are not required to filter upfront.

Answer 2

The way you're treating the category filters is a common and straightforward treatment (i.e. Amazon). However, I'd also advise that when search results are displayed that there is a way to filter the results by those same selections. I don't have any evidence, but I'd anticipate that users will not use or have blindness to those filters - atleast on first attempt.

I'd think twice about the Saved Searches being in that search bar if that's an important feature. It isn't expected to access a list of saved searches through the UI of a search bar. It is expected for saved searches to appear on typing, or having a saved searches displayed somewhere else.

Answer 3

You can do something like this :

^{download bmml source – Wireframes created with Balsamiq Mockups}

Since the database already knows in which all "filters" users's query is present, you can use that info in the above manner . Here user is hovering over the second option and that changes the text/option in the Filter dropdown/combobox .

The saved searches can be shown once the user clicks on the input field that is when the input field is in focus but once user starts typing , the RELEVANT saved searches can be pushed to the bottom most.