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?


5 Answers 5


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.

  • Steve Krug's 'Don't Make Me Think!' advises this, the 'correct' approach. Commented May 18, 2011 at 13:52
  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.

enter image description here

  • By "popups" you mean "drop-down lists" I suppose? I also don't see which Bing feature you refer to, couldn't find it :(
    – Phil
    Commented May 15, 2011 at 20:32
  • Yes, drop-down list. At Bing after the search results for any query there is a "extended features" link. I'm not sure about the wording because I use the German version. Basically you can extend your search query without having to know the syntax. First it's a textinput field, then a drop-down (All, Or, etc) and an "add to search" button.
    – erikrojo
    Commented May 15, 2011 at 21:37
  • @Phil: I added a screenshot of the bing feature.
    – erikrojo
    Commented May 15, 2011 at 21:44

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.

enter image description here

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.


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


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). enter image description here

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.

Your Answer

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

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