How to present filters graphically?

Question

I'm creating a UI which allows users to specify filters, such as Age > 18. Until now, this has been quite straightforward as all it required was a simple layout as shown below:

However, besides allowing users to input a textual value, I would also like to allow them to choose fields from a drop down list. For example, Age > ID. Thus, users would be able to select ID from a drop down list. My main issue is how to present this from a GUI perspective, i.e. modifying the screenshot's appearance to allow users to choose between entering a value or choosing from a drop down list.

I was thinking of adding a checkbox somewhere to indicate whether the user would like to choose a value, or specify one himself - hence hiding/showing the textbox and drop down list as nexessary.

Any ideas? It must be as simple and intuative as possible.

Answer 1

If a few choices could be said to be the most common, you could replace the input box to always be a combobox. And in there also let the user to specify, or go more advanced.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Another idea could be to stepwise lead the user through her choices.

^{download bmml source}

Both these ideas, and other variations (radiobuttons, tabs) will require a lot of design per Field (Age) and comparison type.

But if you want to make the design of this action to really meet the user, instead of the other way around, I think we would have to take one step back, and look at what the task and the scenario of the user is.

Answer 2

You could add a Type field.

For your reference, here is an example from our own system, for similarly adding a criteria, when editing a filter function. For example, when adding a date value condition, the Created date ("Skapad"), dropping down the Value field, there is a date control.

In your case, there is an input box at that place. Now, if you want to add something that is not a value, there is a Type field that specifies how the Value control will behave.

When you change the Type from value to something else, the Value field with the date picker is replaced with a something else, for example a Formula dropdown menu. Here, we instead provide a set of predefined formulas.

So you could add a Type called "Field" and change your value input control to the appropriate corresponding control.

Thoughts:

You ask for a simple and intuitive interface. This might not be. Our customers often struggles with this feature. Most rather leave this kind condition making to a more skilled colleague or even a system admin or consultant of ours. There have been plenty of ideas to make this interface "sleeker" and more visually appealing.

At the same time, I do believe it is a powerful and maintainable approach. Would we one day have a new type or pre-written formula, adding it to this is cake. And would a customer have a need of constructing non-simple conditions, there is always a way.

Suggestion:

For starters, "provide for the possible" by trying to make your elements logically straight forward, like the above example, so that it gets easy to maintain and possible to use in all cases. But at the same time "Design for the probable" by not necessarily showing all this advanced stuff at once. (Quote: Alan Cooper)

Depending on what is probable in your case (which I did not get), you could work with expandable areas, using the most common and intuitive layout as your starting point.