Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to design UI for building conditional expressions?

I need to develop a user interface for inputting something like "if x or (y and z) then do a, b, and c". The data to be entered itself is already quite complicated, how do you wrap it up in an intuitive UI?

like image 528
Leonth Avatar asked Mar 30 '10 13:03

Leonth


2 Answers

Here's my answer from a similar question: Intuitive interface for Composing Boolean Logic?

I would break your interface into two parts: the condition and the result.

Here's an example of the conditional interface:

enter image description here

A Few Thoughts

  • The interface starts out simple
  • If it gets complicated, it's because the user built it step by step
  • No editing or drag/drop - just creating and deleting branches
  • Conditions are a simple dropdown in this example, but could be more complicated or possibly negated. Basically this interface lets you compose expressions.
  • I think it's a good idea to avoid this type of interface if possible
like image 113
bendytree Avatar answered Sep 27 '22 22:09

bendytree


Here is an example of how I solved the problem for a bug database. This was done a decade ago on a linux box, so the L&F is rather motif-ish, but it shows the general concept:

alt text
(source: clearlight.com)

It works pretty much as you expect. You can change "ANY of the following" to be "ALL of the following" and the labels on the subsequent lines will change from "or" to "and". The "IS" button can be changed to "IS NOT" as well as "Matches pattern" and a few other choices.

You click on the +/- buttons to add additional criteria. You can create logical groups which allow you to do expressions like "a or (b and c)", yet it still almost reads like a collection of English sentences.

In your case, instead of an "Order by" section you might have a "do these things" section.

This would be cumbersome to use if you have to create very complex queries, but if you're needing a complex query you're probably smart enough not to need a GUI like this. This was designed more for the casual user for simple ad hoc queries.

I would definitely change the way this looks if I had it to do over again, but the basic mechanics work pretty well.

like image 28
Bryan Oakley Avatar answered Sep 27 '22 23:09

Bryan Oakley