1

I'm designing search engine in which user could type in multiple queries. For example for real estate website, user could type all kinds of queries in one search box: name, quantity, date at the same time. Search engine would find apartments described by: date, type and price, etc.

I'm looking for the best solution, there are three solutions I'm thinking about:

1 solution:

First solution

User types two parameters into search box:

  1. drop downs aren't modified*
  2. query from search box isn't shown in the bar "applied filters",
  3. if user applies filter from drop down, bar "applied filters" is displayed (but we show there only filters from drop downs not from search box).

2 solution:

second solution

User types two queries into search box:

  1. drop downs aren't modified,
  2. new bar "applied filters" is displayed,
  3. if user applies filter from drop down, system adds filters to the bar "applied filters".

3 solution

third solution

When user types two queries into search box:

  1. drop downs are modified (if user types e.g. price "up to 200$", the price drop down is modified and shows "up to 200$"),
  2. new bar "applied filters"is displayed, we show there filters from search box and from drop downs

I'm thinking that the third solution is the best, user could cancel all filters in one place -"applied filters" bar, it's clear connection between queries in search box and filters in drop downs, and it's rather obvious to the user that changing query or drop down would override previous applied filters.

In the first and second solution it's not clear what results we'll get if user typed date in search box and provided second date via drop down. Do I get combined results "search query and drop down value" or maybe drop down value will override search query? In the third solution there are not such doubts.

What do you think, maybe you know some good examples of these kind search engines?

1
  • Showing the selected value in the filter dropdown (3rd option) works, until you start allowing multiple values being selected.. Mar 30, 2014 at 22:00

2 Answers 2

2

I would say something like this:

enter image description here

This is good because it allows for the user to understand that this one thing does the following:

  • Search
  • Filter
  • Tags

You would never want your users to be manually entering dates or prices for many reasons (lots of user variance in entry, date formats).

This solution separates the responsibility of filters and search in a way that makes sense to the user as it reads from left to right, and allows for tags to be entered at comma separated values! Yay!

If you want to add more filters, you would probably want to take these dropdowns out of the search bar and put them above the search or something.

Cheers!

1

Search box and filters have different goals:

  • search box is good for non or less structured queries
  • filters allow to narrow search results by applying some rules. And the filters are good for structured data, like dates, prices, etc.

Working together as complementary elements, search box and filters provides good searching experience.

In your design search box and filters don't look tike complimentary elements, instead they are duplicating elements with different presentation.

And this is a potential point of confusion. For example,

  • if a user deletes 13 March from the filter, what is behavior of the search engine, which has 13 March in the search box?
  • if a user sets 20 April in the filter, how the search should behave?

So, the problem is in duplicating functionality, which leads to user confusion.

You could remove the filters to solve the problem. However, filters give flexibility and serve as framework, which help users to formulate query and disclose the specificity of the fild for them.

So the better solution is to eliminate duplication and divide the roles between controls, like pictured:
enter image description here

UPDATE

For me it's not the best solution, still it is aligned to your requirements:
enter image description here
The advantages are:

  • Simplicity – one row (Applied filters: ...) is thrown out
  • Informativeness – as there are labels above the filters, which lead the search & filtering process

Plus in search box user could type another filters, which are not represented in drop downs, how to show to him that these filters are applied?

enter image description here

6
  • Thanks for answer. It's hard to design perfect solution when filters are overlapping search queries - date and price. Answering your questions. Deleting 13th March from the filter cause deleting 13th March query from the search box. Setting 20th April cause adding 20th April filter to "applied filters" bar and deleting previous date from search box. Mar 30, 2014 at 20:22
  • check this mock up please: dl.dropboxusercontent.com/u/72296770/… I agree with you, but still ;) looking for the solution of this problem. Multiple query search box is a business need can't change this requirement. But I'm also afraid of deleting drop downs which provide clues what users could search and are also a last stand solution for bad format typers (search box won't be able to perform search on all price range formats users will type in). Mar 30, 2014 at 21:03
  • @steppenwolf – please watch my suggestion in the Update section Mar 31, 2014 at 8:04
  • great, thanks ;) It's a nice step to reduce elements on this interface, but point of confusion you were pointing out is still a problem. Deleting or changing query in search box would update drop down, but changing the date via drop down won't update search box (unless user deletes date completely it will cause deleting the date from the search box). Plus in search box user could type another filters, which are not represented in drop downs, how to show to him that these filters are applied? Mar 31, 2014 at 8:31
  • @steppenwolf – I've added the sketch of filter with no dropbox. For me these kind of filters are hidden ones, as user could apply it only occasionally, if he lucky enough. Hidden features don't allow to build correct mental model, so I'd recommend to avoid it. Probably, they want the system to look smart with auto-recognition and filtering features, but this brings bad UX in this case. Mar 31, 2014 at 8:50

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.