Good way to visualize complex AND/OR query/criteria?

Question

I'm maintaining a webapp with a feature dubbed the "rule form". It's essentially a complex HTML form that users use to build a "rule" with criteria that can be grouped into AND/OR blocks. When all the criteria are true, things happen that the user wants to happen. Think of it as a static query. Something like:

Animal
    Fur Color:
        IS Black
        - OR -
        IS NOT Brown
        - OR -
        IS White
    - AND -
    Weight:
        >= 25 lbs
    - AND -
    Lives:
        INSIDE Houses
        - OR -
        OUTSIDE Caves
    - AND -
    Species:
        IS NOT Cat
        - AND -
        IS NOT Dog
        - AND -
        IS NOT Llama
End Animal

Important note: Root criteria (Fur Color, Weight, etc.) are always AND's in this tool. The sub-criteria within one root criterion are all either ORs or ANDs, not mixed.

After a user creates a rule, I'd like to be able to show the user a summary of that rule, which means figuring out an elegant way to visualize the complex criteria above. Any suggestions or links to it done well are welcomed. Thanks!

UPDATE

The webapp I'm maintaining is on a separate network, so I cannot provide a screenshot of the current HTML form, but it's quite similar to the answer provided by @kerr. Please note that I'm interested in a viewing capability only. While I'd love to be able to just load up the form when viewing a rule, there are times when that particular module is not available, which is why I'm having to develop a new "viewer". Thanks.

Answer 1

I really like the iTunes way of laying out a rule builder. It's quite easy to follow.

With that in mind, here is an example using that paradigm:

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can see there's an added accelerator in the Fur color & Species options - selecting multiple values of the same type could be displayed as tags which reduces the UI needed. You'll have to see whether this works for you though.

I've found that if you make the language as natural as possible and make it read from left to right, it's much easier to grasp. So instead of using mathematical symbols, add text as well (or in place of). If it reads naturally enough in the query itself, there's no need to have an additional "summary" of the rule.

Answer 2

How about building a flowchart?

An OR could be expressed by a fork in the flow. An AND could be expressed by joining two criteria in the same flow path.

For example, ( A ∧ B ) ∨ ( C ∧ D ) could be expressed as:

( START )
    │
 ┌──┴──┐
 │     │
[A]   [C]
 │     │
[B]   [D]
 │     │
 └──┬──┘
    │
 ( END )

Of course, building a web interface that allows you to create such a flowchart would take some time, but it would be graphically clear as a visualization, IMHO.

Answer 3

With all the information I'd present something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The idea is that OR criteria are placed parallel (one above the other, so the matching animals can pass through any of the criterium) while the AND criteria are placed in series (one next to the other, so the matching animals must pass all of them).

You can play with the graphics here, drawing some sort of paths (with animal tracks) to make the diagram even more visual.

Answer 4

How about nested boxes where rules at the same level are arranged in groups, such as shown here ?

Another version:

Answer 5

In the past, I had encountered a similar issue with a "Rule form". Looking for different solutions, this seemed to be a valid solution to the problem.

As you see is an If-Then statement, with AND or OR step in between. All the If-Then statements are connected with AND criteria:

Answer 6

Let me provide a glimpse of what such a UI looks like in the Views module of the Drupal CMS.

You see filters that are applied to a "view", ie. a dynamically generated list of content items. (The combination of filters doesn't make any sense in this example, I just randomly chose some.) There is another part in the UI for choosing and configuring filters.

On the top level there are "Filter groups", which contain one or more filters. There is a selector for and/or both within the group and between the groups. You can add additional groups if you like.

One thing I like about this UI, is that you can easily drag-and-drop filters between groups.

Answer 7

I really like how Salesforce Marketing Cloud solves this problem:

You can clearly see what blocks interact with each other and how deep the logic behind filters really is.