Multiple input boxes on a search form - And/Or Functionality

Question

I am looking at redesigning a search form, which has multiple cases of ‘And/Or’ in between 6 different input boxes.

So a user must enter at least 1 piece of search criteria, but may enter up to 7 if he/she wishes.

Ideally, I would like to house them within one search box, with a drop down menu for different category searches. (mentioned on this similar post here).

This solves the ‘or’ part of the functionality, but am wondering how can I also implement the ‘And’ function in a similar type solution.

I did not like the idea of adding extensive notes to search bar and some of the search criteria is quite unique: Name, Location, Application Number, Date Application was received, Date Decision was made etc

Has anyone got any good examples of this in use or came across similar design problems in the past?

Answer 1

I would suggest rethinking the way you look at search as a whole. As interface designers we are often concerned with the UI elements and forget about the purpose of search. This being said, people use search to get the desired results as fast as possible. However, often users aren't sure about all the details and don't want to spend time thinking about all the detailed criteria as they haven't seen the results. We need to stop thinking like machines.

My suggestion would be to have a simple text input where the user would type in a term he/she is interested in. Then when all the results are presented the interface would help the user to narrow down the results. The "and" and "or" UI elements would be presented in context of the results. So the user could un-tick stuff that doesn't concern him. It is much easier to create a mental model of the results after you get to see what is available then creating relevant filters with "and" and "or" metaphor in advance. eBay and Amazon does it very well. Check out Faceted Navigation interaction pattern for a good explanation and use examples.

Answer 2

1. You only use one input field and work with operators (AND or +).
2. You use several input fields and connect them with popups with those options: AND, OR, NOT

For further research: http://www.google.com/advanced_search, search.yahoo.com/web/advanced, bing (no link available).

Bing has an interesting approach. You can easily add the results via four options. Hard to explain. Just check out the advanced search options.

Answer 3

Similar to the approach @erikrojo advocates, I have always been partial to building up the criteria. One of the better examples I have found is called EasyQuery. Specifically, there is an example form that shows how this can work on a web site.

Each link provides a drop-down to specify the data elements (columns), the criteria, and the values to match against.

For an Advanced Search feature, this criteria building style provides plenty of expressiveness while maintaining ease-of-use.

Answer 4

Another option would be using and/or in dropdowns much like iTunes does for building Smart Playlists:

Answer 5

You say the user can specify up to 7 search criteria, with multiple cases of AND/OR between them. Does this mean that the interface should support complex queries, of the type '(A OR B) AND ((C AND D) OR E) AND F'? Or just ANY/ALL (A OR B OR C OR D) vs (B AND D AND F)? You might want to take into account that even people specifically trained in information retrieval (scientific researchers, librarians) usually stick with simpler queries.

For an example of an advanced search interface, take a look at psycnet (scientific database in the psychology domain).

Like in the other examples already given by others, this interface allows for adding search criteria one at a time. Note that there are different sections 'look for' and 'only show content where'. The former is meant for specifying search criteria, the latter for limits: technically there's little difference, but this presentation matches the user's mental model better.