10

I'm working for a company redesigning the searching interaction for a business application. Currently the only way for users to search through a huge dataset is through a collection of about 15 filters. The quantity of filters is proving to be very frustrating for the users because it is hard to locate the desired filter, on top of that, once the user filters the list down it is not clear at a glance what the list is being filtered by.

There are a couple of ideas being proposed, with an advanced search being one of those ideas. I have been researching how other websites are handling advanced searching to determine if there is any pattern that should be replicated. I have found that most websites begin with one or two search input fields and an advanced option, as seen here in the screenshot of indeed.com.

If you search using these two fields you are brought to the search results page where you are provided with a list of filters.

If you search with the advanced option, you are provided with a list of criteria that is the same as the list of filters. After you fill in the fields and click search, you are brought to the search results page. Now the filters that you entered a value into in the advanced search form have been remove from the list and are displayed in a new refined search box.

Is this the standard pattern when creating an advanced searching option for a website?

Search screen using the basic search:

image 1 image 2

Search screen using the advanced search:

image 3 Image 4

Improve this question

1 Answer 1

Reset to default
7

I recently tackled a similar problem, and this is what I came up with:

Search Bar Search Dialog

The basic search box works in realtime for queries containing the search terms entered.

Clicking the Advanced Search button bring up the second dialog where users can enter more complex searches like date ranges or things that don't contain a search term. The input fields vary based on the column or filter they chose on the left.

Once a search is applied, the user gets a visual indication next to the original search box which is also a button they can click to dismiss the search.

Improve this answer
3
  • This is a really great solution and in fact was one direction I was thinking about going in. However, if a user enters 5 or more advanced search items how do you handle the size of the visual indicator next to the original search box?
    – Jason Frade
    Jul 9, 2014 at 18:07
  • Admittedly, this design doesn't handle that very well and just stretches to fit all the text. Most of my users are using very large screens and doing queries with only a few items, so its a reasonable trade-off at the moment. It may be enough for you to show that an advanced query has been applied allowing you to truncate the list. On the other hand, if you are expecting that level of complexity in the search you may consider a system like Newegg has where the user narrows down their query sequentially rather than with a single search. newegg.com/Blu-Ray-Players/SubCategory/ID-531
    – Nathan Rabe
    Jul 9, 2014 at 19:12
  • I am in the same situation where most of the users are using 22in screens, but the queries can range from very complex to extremely simple. I have thought about using a faceted search similar to Newegg, unfortunately it is just too slow for a business app. Thanks for the suggestions thought :).
    – Jason Frade
    Jul 9, 2014 at 19:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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