2

Note, Don't suggest old post: There are number of questions I found which are the pretty decade old and the solution too. I have gone through all of them and never found any of the solutions that are actually intuitive. Hence unless you don't find the case, please don't mark it as duplicate.

Context Inside the filter, People have the options to filter (A OR B) AND C

A, B, C are filter sets for e.g A- Department, B- Merchant, and C- Category. In each of the filter sets, people can select a number of departments, merchants or categories as well.

I have come up with this solution.

Problems I faced here: 1. As we build, the interface is going to be complex. 2. People may not understand OR, AND 3. Or, may find it difficult to use things which are boolean in nature since the user base are non-technical. 4. How to better represent summery

In general, how can I simplify it? Here the combination is A and (B OR C)

enter image description here

  • how are the "pills" added? I'm referring to the "operation" and "Management" items under the Group A example. – Stan Smith Jun 10 at 14:38
  • So as soon as user selects "Department" in the dropdown, we ask the user what departments you wants to include in adjacent field ~ Each input we capture through chips – Swapna Jun 10 at 14:58
  • 2
    Does this answer your question? Intuitive interface for Composing Boolean Logic? – jazZRo Jun 12 at 10:44
1

Swapna, if you look at rule builders in consumer-oriented applications, you can often find a design approach that is slightly different from directly mapping a boolean equation to graphical symbols.

When using AND and OR, these must be embedded between the matching criteria, as shown in your screenshot. The slightly different approach also groups the criteria, but then places an "any" or "all" selector before/above the criteria, so they're easier to discover.

Here's a simple example for the "smart playlist" feature in Apple iTunes:

enter image description here

In this case, there's only one tier of criteria, and the user can decide whether the results should be matched against "any" or "all" of them.

OmniFocus uses a similar approach, but offers a lot more power by supporting "rule groups," which can be nested:

enter image description here

The indentation helps grasp the logic structure of the filter, and it does so without requiring the user to "rebuild" the filter's boolean equation in their head.

For your example, that approach would result in something like this:

ALL of the following are true:

  Department: …

  ANY of the following are true:
    Category: …
    Merchant: …

As an added benefit, there is no need to provide a separate summary of the filter query, as the rule builder itself already provides that summary in a format that is reasonably easy to digest.

| improve this answer | |
  • Thanks for the time. Have one doubt, I understand the idea behind using natural language instead of AND or OR. Herein the attached solution , how user inserts "ANY"/None to the group in tier 01 ? Also once inserted, how have we planned to come out of it to reach the main label ? – Swapna Jun 11 at 0:18
  • Also If you go through this link ux.stackexchange.com/questions/1737/… , someone mentioned this is very difficult to use – Swapna Jun 11 at 3:41
  • Hey, I got one simple solution to this. – Swapna Jun 11 at 6:23
  • Swapna, OmniFocus requires option-clicking the "+" icon. That icon shows an ellipsis "…" as soon as you hold down the Option key. Personally, I find that interaction a bit obscure, but there might be other ways to provide that functionality. As an aside, the user can also drag-n-drop to re-arrange the rows. – JochenW Jun 12 at 21:20
  • Hey yes, I went through some of their videos. But they got one serious problem, there is no way out of any block once you are in any block. That'd bad. – Swapna Jun 13 at 0:26
0

I got one simple solution to this:

We can group things with a simpler statement like "All of these conditions" instead of using "AND" , "Any of these conditions" instead of using OR ~ Nontech users can very much relate what these things are

enter image description here

enter image description here

| improve this answer | |
  • I'm obviously just a single data point ;), but that approach looks pretty solid to me. One minor caveat, though: looking at the bottom screenshot, I can't see the edit icons from the top one. Make sure that, if you use hover states, the "hot area" for the pointer that shows the icons is large enough so that the functionality is easy to discover. — Is it possible that your posting has four images? I currently see only two plus two Markdown image links… 🤔 – JochenW Jun 12 at 21:23
  • Thanks. These are just mock ups and posted it in a hurry . I will take care of it. This is true since currently it's coming on hover , one time discoverbilty issue is there. I have been thinking if I should explicitly keep them on rhs instead of hover. Basically I came up with two solutions. Seems like other wasn't added properly. – Swapna Jun 13 at 0:24

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.