The Old Joel on Software Forum: Part 4 (of 5)

Boolean expression UI

Do you know of any applications that have a good UI for building complicated boolean expressions? By complicated, I mean with arbitrary levels of sub expressions, and "and, "or," and "not" operators.

I'm a user interface design consultant and on my current contract, I've been asked to design a UI for a custom boolean expression builder. Several times in my career I've been asked for this kind of thing.

This request always makes me cringe. Why? Because no one understands boolean expressions. OK, *some* of us do, but the general population just doesn't get it. And those of us that do "get it" have trouble understanding that others don't.

My argument is that for those that "get it," give 'em a text editor, 'cause that's all they need. Any UI will slow them down and annoy them. For those that don't get it, don't even try, because no user interface will make it make sense them. This argument is not holding for this assignment, though! Without getting too much into the detail, there are other requirements and business rules on the expression that make a basic text editor not desirable.

Luckily, the users of this particular application are (supposed to be) the type that "get it."

One idea I had was to design a text editor that works something like popular IDE editor windows - in which you "Ctrl-Click" and a pop up window appears with syntactically correct selections for the current context. It would also let you know when paren's are out of balance, subexpressions are incomplete, etc.

Anyway, if you know of any where I could get some inspiration or some UI guidelines, please email or post. I'd certainly appreciate it. Or if you have thoughts on the topic. My web research on the topic has not been all that fruitful.

Thanks!

Lauren B.
Tuesday, February 24, 2004

I definately agree on the textbox thing. Whatever you do, your UI should have a regular text entry box where they can enter the boolean expression in text.

If possible, your UI should fill in this boolean expression box as people make selections. A more advanced version should work in the opposite direction: changing the boolean expression text should change your UI.

In some sense, the UI would teach them how to compose boolean expressions and so eventually they won't need it. Hopefully someone here will have a good idea on what that UI should be.

Almost Anonymous
Tuesday, February 24, 2004

I can think of two.

1) MS Excel has a built-in function builder, for simple boolean equations this is really simple to use.

2)The second one, I can see it in my mind but I can't find it (how helpful is that!), I think it is in an MS Office product(?), weird little box pops up, yellow categories on the left, expressions on the right, the forumlae gets inserted above...At any rate I always found it a pretty bad UI, on the grounds I always had trouble using it, but it might give you some ideas. (Actually figuring out what the heck I am talking about might be a start...)

Aussie Chick
Tuesday, February 24, 2004

I don't know quite what you mean, but if certain portions of the expression are immutable, you might want to do it like Sun's NetBeans IDE. When you draw up your GUI it makes certain portions uneditable. You could make portions of your equation uneditable so that the users merely have to fill in the blanks. If in certain situations you want to prevent certain functionality, you could present the user with an autocomplete type of list as they type indicating valid choices. Then if they choose to not enter a valid choice, you would throw a type of compile error and point them to the invalid choice.

I dunno. It's been a long day. Best of luck.

Elephant
Tuesday, February 24, 2004

I swore long ago to never write code where people
would worry about its color, but I'll comment here :)

One thing that is insanely useful for users who code
complex boolean expressions is a little simulator, if
possible, particularly if actually using the expression in
your app is several steps removed from where the
expression is composed. This could be as simple as
letting the user set the values in it to T or F and printing
the result.

Bonus: show what's making the expression false or
true graphically. If the expressions being entered
are particularly gnarly, users can "debug" their
expressions without having a clickfest.

x
Tuesday, February 24, 2004

Since this is somewhat similar to query builders look at the following screenshots :

http://www.atlasti.de/images/qtool.gif
http://dsd.sztaki.hu/popup_image.php?name=references/services/aqua_ui.png
http://www.korzh.com/delphi/sq/images/ssmain1.gif
http://www.superiorsql.com/images/esss2.jpg

Code Monkey
Tuesday, February 24, 2004

The Macintosh Finder program uses a *very* simple query builder interface that almost anybody can learn. However, it assumes that you won't need to do nesting of expressions.

K
Tuesday, February 24, 2004

Alan Cooper's book The Essentials of Interaction Design has a chapter on Improving Data Entry and contains an example of Attribute-based Retrieval which you may find interesting.

Aussie Chick, are you thinking of the Business Desk in Commerce Server? If I remember, that has a Target Expression builder that sounds similar to what you're describing.

Interaction Architect
Tuesday, February 24, 2004

"I'm a user interface design consultant and on my current contract"

So, if I ask you I have to pay. But you just ask for free.

just kidding
Tuesday, February 24, 2004

I'm kind of certain that Aussie Chick is talking about the Access Forumla/Expression Builder. If so, I hate using it too, but I think you can get some ideas from it.

Bad ideas.

Jason
Tuesday, February 24, 2004

Thanks Jason, I thought it may have been in Access, and that sounds like it, and yes definetly bad ideas.

Aussie Chick
Tuesday, February 24, 2004

Microsoft Project has a UI that allows user to create a boolean expression. The UI contains a text box, where the user can enter a boolean expression, as well as command buttons for inserting 'AND', 'OR', 'NOT' and even '+', '-' etc.

The UI can be seen by the following steps:
0. Open MS Project
1. Select an entire column
2. Right click on the column header
3. Select 'Customize Fields...'
4. In the dialog box that comes up, under the 'Custom attributes' heading, click on the 'Formula...' button

The Formula builder dialog box pops up.

PS: If you don't have MS Project and would like to see the UI, drop me an email and I'll mail the UI to you.

T-90
Wednesday, February 25, 2004

In Microsoft VisioModeler (and possibly in the ORM component in Vidio Enterprise), there's a dialog about applying ring constraints.

Ring constraints apply to facts where the object and the subject is the same thing, for example A Stock code consists of an assembly of stock codes.

Now naturally enough recursive or transitive rings aren't allowed and there's an intransitive ring constraint which defines that. But there are other forms of constraint, irreflexive, frequency and so on.

The UI for this dialog puts up a representation in a Venn diagram of the intersection or exclusion of sets and at the same time spells out in text the implications of any choice.

This might be suitable for representing individual A cup B, A cap C logical conditions that divide the domain, whether it would be suitable for nested or chained conditions would need to be worked upon. But I was impressed with the simplicity of it.

Simon Lucy
Wednesday, February 25, 2004

what about a flowchart control?

i like i
Wednesday, February 25, 2004

RichTextbox with good parenthesis matching and colorcoding.
Optionally add autoindent/autolayout with configurable indentation/linebreak rules.
Allow both prefix and infix notation, with automatically translating between the two on request.

Just me (Sir to you)
Wednesday, February 25, 2004

One of the best improvements I've seen in "expression builders" is the use of "any" and "all" rather than "or" and "and". People just "get it".

You can easily achieve nesting by allowing new components of the expression to include another any or all clause -- try having any and all appear in a group above the list of fields.

I would recommend using a text based interface similar to Outlook's mail rules; but don't make it a typing interface unless you also want to implement a sophisticated parser. Use pop-up fields where values are constrained; and use type-ahead to select the value from the pop-up.

DON'T USE WINDOWS' COMBOBOX BEHAVIOUR. I absolutely hate having to type N eight times before it selects NY. Instead allow the user to type NY and immediately select the entry based on the prefix. Reset the prefix after a short pause.

If I can get my scanner working, I'll be happy to send you copies of the design notes and sketches for a similar expression editor I'll be building later this year.

This is a really tough thing to get right. I don't know whether I've actually seen a product that really "gets it"; but some are coming close.

Jeff Watkins
Wednesday, February 25, 2004

Regarding parentheses, jEdit has a nice feature that visually shows you what parenthesis each one you type matches. It's a subtle visual feedback that you don't need to do anything to invoke.

Also, you can take a cue from Word and underline unrecognized tokens in squiggly red, and other types of errors in squiggly green. Then let right-clicking on the underlined text bring up a context menu with options to correct the problem, or to bring up an assistance tool.

Phillip J. Eby
Wednesday, February 25, 2004

There is a stock analysis program called The Big Easy Investor that contains a great expression builder similar to what you're looking for.

There are two modes to it; the BASIC mode is just a library of commonly used expressions already built for you. Providing some commonly used expressions with the install could be very helpful for the beginners.

The advanced mode allows the user to define specific values and boolean expresions. This is what you're looking for.

http://www.bigeasyinvestor.com/about/screening.html
http://www.bigeasyinvestor.com/about/screening2.html

www.bigeasyinvestor.com/images/screening_example.gif
www.bigeasyinvestor.com/images/bs_modify.gif

The sad thing is that you can only download the program if you have an Ameritrade (or partner) account, so you won't be able to play with it.

But at least from the summary screens, you can get a good idea as to how you would build a screen/expression.

Thinking Hard.
Wednesday, February 25, 2004

Probably most folks aren't checking back here, but for those that do, thanks a lot! Exactly the kind of pointers and input I was hoping to get! I particularly liked the third one listed by Code Monkey.

I hope I can help you out in the future.

Lauren B.
Thursday, February 26, 2004