40

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.

  • 5
    You are basically trying to dumb down order of operations. Stahp that. Parenthesis are a universally understandable to represent what you need. If your users find parenthesis truly mind-numbing then I am sure life is difficult for them in other aspects. – MonkeyZeus Apr 5 '17 at 18:00
  • 16
    Wholeheartedly disagree. The concept of parentheses to encompass distinct logic is intuitive enough, but don't you think that if there is a better way to visualize the data set, UX designers have a responsibility to do that? – MegaMatt Apr 5 '17 at 18:17
  • I've used a heavily customized treeview to do this in another life. I never saw it used in production (got a job elsewhere before launch), but initial user feedback was good - and the rules I had to be able to support configuration for were mind-numbingly complex (pricing rules for doors/window promotions, e.g. Low-E glass is free if model is XYZ or ABC, and order contains more than 4 windows or God knows what else marketing could come up with) - I feel your pain, my sympathies. – Mathieu Guindon Apr 5 '17 at 18:34
  • 1
    @Nzall, the example provided in the question was for illustrative purposes only. Please disregard any flaws in logic. It was meant only as a means to solicit suggestions on visualizations. – MegaMatt Apr 7 '17 at 13:09
  • 1
    @jpmc26: "If there was a better way to visualize it than parentheses, why aren't we using it in programming languages every day?" - because the programming languages most of us use "every day" are textual, not visual. Because there's a trade-off between making logical connections in conditions more obvious and saving screen estate for other things, given that our programs consist of more than boolean expressions. Because target audiences have different requirements, and while parentheses will do and be accepted by programmers, other user groups may not be as accepting. – O. R. Mapper Apr 8 '17 at 22:36
50

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:

mockup

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.

  • 3
    +1 This is similar to what Microsoft Excel uses to set conditional logic for cell formatting. – Michael Lai Apr 6 '17 at 0:14
  • This doesn't let you OR a particular Fur color and Species though? e.g. (If Fur Color is Black and Species is Wolf OR Fur Color is White and Species is Tiger) – Ian Apr 6 '17 at 9:48
  • 4
    @Ian The OP explicitly says that the root criteria are always ANDed. – yo' Apr 6 '17 at 10:57
  • 1
    @yo' Oops - skim reading fail! – Ian Apr 6 '17 at 13:23
  • 1
    +1 for collapsing similar criteria; in the original it's not immediately that there's a NOT before BROWN, even though it changes everything. Clearly separating the IN and the NOT IN makes things much clearer. – Matthieu M. Apr 7 '17 at 19:52
38

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.

  • 7
    +1. Since this will be used for filtering, it may be worth replacing END with include in results and as a 3rd option next to A and C, have everything else which will connect to don't include next to the other end condition – alexanderbird Apr 5 '17 at 19:54
  • @Locoluis Thanks. Very creative solution, but as you said, difficult to put together quickly in a web interface. With more screen real estate, more time, and some money to purchase a good JS library for making flowcharts, I see this being a viable option. – MegaMatt Apr 6 '17 at 11:14
  • @MegaMatt I've used JointJS before and found it very useful for putting flowcharts together and it has a free version. – DavidTheWin Apr 6 '17 at 13:53
  • 4
    That technique was popularized by Ben Shneiderman as filter/flow. As a bonus, the thickness of the flows can be varied along the way to imply the size of the result set after each criterion. – O. R. Mapper Apr 6 '17 at 21:33
11

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

mockup

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.

  • 1
    +1 I like the idea of break something complex down into smaller and more manageable steps. It is always a trade-off between simplicity and efficiency (for power users), and this is something that needs to be considered in the solution. – Michael Lai Apr 6 '17 at 0:16
  • @Mike This looks the best so far to me personally, out of all the solutions. I especially like how you can follow the flow through from left to right, and how it implements both text and visual aids. – Feathercrown Apr 6 '17 at 0:31
  • Thank you, @Feathercrown. I just came up with an idea, that the arrows can be replaced with a path (like a paved path or such) and the logic gates fields with gates (like fence gates or such). But this should be drawn with taste so it doesn't look childish. – Mike Apr 6 '17 at 6:18
  • @Mike Good idea. – Feathercrown Apr 6 '17 at 11:20
6

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

Demo of querybuilder library showing some rules arranged in a nested order

Another version:

Demo of querybuilder library showing some rules arranged in a nested order

  • 2
    I find that's a fair compromise between ease of implementation and ease of use - I'd make it clearer which of AND|OR is enabled/disabled though; it's not immediately clear from the blue colors which means what. Dark blue = disabled, bright green = enabled would be much less ambiguous IMO. – Mathieu Guindon Apr 6 '17 at 13:24
  • I agree. See the newly added version. – Anmol Singh Jaggi Apr 6 '17 at 17:27
4

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:

Rule form

  • 27
    It might just be personal preference, but I find this suggested form very noisy and not very intuitive. There is no clear meaning what the line connecting the 2nd and 3rd row is doing. The readability is also poor because of the numerous colors, borders, shades, and controls. – Levi J Apr 5 '17 at 13:57
  • 1
    I dont like this at all because the lines almost tell me that the condition doesnt need to satisfy for it to continue. – JonH Apr 5 '17 at 19:16
  • @JonH this is an interesting point that you have made, and I wonder if it is something that needs to be considered or not relevant for this use case. – Michael Lai Apr 6 '17 at 0:18
  • @LeviJ I agree, minus the part about the colors. – Feathercrown Apr 6 '17 at 0:28
  • @LeviJ These are very good suggestions for improvements! Thanks! – Dimitra Miha Apr 6 '17 at 7:42
3

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

Drupal Views and/or UI

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.

1

I really like how Salesforce Marketing Cloud solves this problem:

enter image description here

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

  • I don't like that this design seems to hide how the conditions are combined together (i.e. ANDs and ORs have background that doesn't contrast and are located in the last place you will look: all the way to the right). – svick Apr 7 '17 at 11:02

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.