Query Builder UX Concepts

Hi all,

this is a mockup inspired by indented lists:

  • the relation between lines is considered “AND”
  • the first dropdown menu lists options like “Property, Reference, Parent page, OR and NOT”
  • the next dropdown menus display different options, for example if the filter is “Property” the second menu lists property keys and the third menu lists values
  • special options like “See below” or “OR” are meant to be used with indented lines
  • the special option “Range” introduces two more dropdown menus

What do you think of this “framework”? Is there any use case that you think is not covered?


Edit: here there are some additional UI niceties:

  • assuming the bullet point reminds the multiplication sign or * and normally the lines are in a AND relation
  • the bullets points of children blocks when selecting OR from the first dropdown menu could be rendered as a + sign, like in Boolean Algebra
  • the bullet point of a block with NOT selected from first dropdown menu could be rendered as the sign - (minus)

5 Likes