User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm looking for a good and a clearly represented solution for a boolean filter with sub conditions (max. 5 Levels). Best, a variant with tables. Many apps use the typical mac osx filter (see screenshot). But it's difficult to get a overview for a large number of conditions.
The filters are often changed. Therefore its possible to save filter setting to a preset. The users have a sufficent computer experience.
Boolean logic is inherently difficult, especially when it gets complex (up to five levels nested!). It may not be possible to come up with a single representation that is both easy to understand and compact enough to provide an overview. You may need to have two representations.
Space-consuming but Easier-to-understand
The OSX solution isn’t a bad one. It’s probably a good idea to substitute “All” and “Any” for “And” and “Or” since the latter are ambiguous in vernacular usage. It’s also probably easier to see and track nested conditions/criteria with the indented hierarchy rather than with pairs of parentheses.
The OSX is a pretty text-intensive representation, even with the hierarchy. Perhaps your users would do a better with a graphic representation employing a plumbing or electrical metaphor. Such representations may do a better job of highlighting any redundancies and contradictions in the user’s thoughts to help them refine the criteria to be something useful. See my response to Intuitive interface for Composing Boolean Logic? for research and prototypes of this approach.
Query-by-example (QBE) has had a fair amount of success. For this, users use the same forms they use normally but fill them out with field values that represent the kinds of results they want to include. It handles ORs and ANDs especially well, but handling ranges (e.g., Greater Than) can be kludgey. Plus, using QBE to specify nested criteria can be very time consuming.
In any case, the UI for saving and retrieving such representations/filters can be much like what you'd used for saving and retrieving a file.
Compact Overview
The above options all consume a lot of real estate, so it doesn’t solve your problem of providing an overview (e.g., in a list of saved filters). For that purpose, it’s hard to beat a string with nested parentheses for its compactness. That may not be such a bad thing for your users since they’re experienced with Excel –if they write their own formulas, they may be used to it. You may even be able to use Excel-like symbols (e.g., =, >, <) rather than words for a more compact representation. Furthermore, you can exploit the users’ familiarity Excel’s color-coding of matching parentheses in order to better visualize the nesting. I’d explore redundant coding, such as use of underscores. Maybe something like:
Cooper and Reimann’s About Face includes an example for making such a string easily editable for adjusting the criteria (at least the second edition does; haven’t looked at the current edition). However, for complex logic, it would be better to use the string to provide the overview and when the user clicks on an appropriate control, the string expands into a full representation like listed above.
You could try to automatically simplify the string and the full representation by “optimizing” it with logical operations and removing redundancy by following a set of conversions. For example, the criteria in your OSX example could appear as:
The disadvantage of this is that the user may no longer recognize representation as equivalent to their own concept of the criteria. Not everyone is up on their symbolic logic. Did I mention this is an inherently difficult task? You’d want to be sure to test it.
The two proposed solution both have drawbacks, I think. The main one is that there is a need to understand boolean logic, and how to build up boolean conditions. I fully accept that this is well within the abilities of the end users, but it still does not make for a good UX solution - it is making the user think like the computer, which is always a bad thing.
@colmcq is right - it needs a very good solution to solve it. But what would make sense from a UX perspective is some form of predictive text entry field, where I can write "the name is prozac or the name is fluoxitine, and the keyword contains pregnancy", with selected options coming up as you type "the name is/contains/startswith" all the way along. So taking pseudo English text and turning it into boolean logic. Also the punctuation is important, with the comma indicating that both the previous entries should be true and the keyword.
That is not perfect, by a long way - there would need to be a lot of verification and clarification. But I think this is the "right" way to do these complex boolean logic - using English format, and translating it. That is not necessarily what you should do for this project thought, as it is hugely complex.
I've no idea about best practices, but to me a grid would be a far better solution than the above sceenshot.
Five levels can be five rows.
Each column can be a field name (choose by dropdown).
Left of each 'cell' can be an indicator for 'contains', 'matches' etc.
Between rows you can add 'and', 'or' conditions.
I think I have an answer:
User can state simple condition and if required add boolean condition as often as required (add condition brings up duplicate field set - as shown); Search submit after last qualified condition.
This approach really simplifies the interface and should provide enough control.
edit: the only two attributes I have not included are the all and any which I think are redundant
A and B or C can be executed as (A and B) or C, and, A and (B or C).