I have a page that displays a set of records. The page has filter section to search records. enter image description here

currently the logical operator AND is applied between all the filter conditions. Now the requirement for including the OR operation has arisen. The user suggested to add a dropdown with AND,OR options next to Value dropdown. But the problem is operator precedence. If I am going to make the page to look like the image below, the user is definitely going to find it confusing and I am also not sure how to resolve this search. enter image description here

Please suggest me how I could make this UI to let the user select the operator precedence easily.

  • 1
    Reminds me on usabilitycounts.com/2012/01/31/… Though sophisticated solutions like the one suggested by @CandiedOrange exist, I wonder if the possibility of simply entering a query string in a text box would not be more usable in the end. – Doc Brown May 20 '17 at 7:06
  • :) true indeed. The product has been designed this way and sadly my company does not want to invest much in rewriting this in a textbox way. – Saranya May 23 '17 at 5:34

This looks like a query builder to me. In code you'd use parentheses to override operator precedence but this is a GUI. Here's how others have solved it:

enter image description here


Here groups are used to control precedence. Grouping is shown with indenting, boxes, and tree lines. I think this is better than a column that lets you chose parentheses.


Depending whether you plan to support arbitrary Boolean expressions, I would choose one of the following:

  • If you plan to make any logical expression possible, just make a single query box with support for syntax such as: word1 AND word2 OR (word3 AND NOT word4) .... If your users are capable of building queries of this complexity, they will also be able to grasp the query syntax. In my experience, typing up a search expression like this is much more convenient than clicking and moving around text boxes in a complex layout.

  • If you only want to support basic queries with AND and OR operators, make two sets of words: and-words and or-words, then fix the actually executed expression to be: and_word_1 AND and_word_2 AND ... OR (or_word_1 OR ord_word_2 OR ...). You can also add not-words (applied after and- and or-words). This actually handles almost all cases needed in practice and is quite easy to understand for the users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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