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:

enter image description here

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.

  • Wouldn't just a standard Combo box do for this purpose?
    – JonW
    Mar 19, 2013 at 15:59
  • @JonW - But what if the user enters a value which is the same name as another field? i.e. they would want the value to be "ID", but there is also a field called "ID" that is selectable.
    – Dot NET
    Mar 19, 2013 at 16:01
  • Perhaps I'm misunderstanding the question then. Are you wanting the text field area to be able to enter any value manually or pick one from the list, or do you need to be able to let the user swap out that whole field and replace it with a totally different field and set of options?
    – JonW
    Mar 19, 2013 at 16:03
  • @JonW - I would like users to have a choice. They can either enter a value manually, or choose a value. This is related to SQL - since in SQL a filter can be something like ID > 5 or ID > ID; a filter can this have a value or another field. I would thus like to allow users to enter a value OR choose a field to be used for the comparison
    – Dot NET
    Mar 19, 2013 at 16:05

2 Answers 2


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.

  • Thanks for the suggestion, this is the approach I'm going for :)
    – Dot NET
    Mar 19, 2013 at 22:58
  • My pleasure. Which one?
    – JOG
    Mar 20, 2013 at 8:54
  • The first part - adding all options in one combobox and separating them with separators.
    – Dot NET
    Mar 20, 2013 at 9:28

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.

enter image description here

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.

enter image description here

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.

enter image description here

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


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.


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.

enter image description here

  • Thanks for the detailed reply. User-friendliness is the priority here, so it must be as intuative as possible, taking on a "my grandma can use it" approach. So I don't think it would be the best option for me at this stage. However your last suggestion could be an option.
    – Dot NET
    Mar 19, 2013 at 16:59
  • My example is almost an anti-example. :) But it shows a logical way. It could be a good idea to start with "what" you want to achieve before "how". Good luck!
    – JOG
    Mar 19, 2013 at 17:03
  • What would you think of placing a checkbox inplace of your "More options", which would toggle between the drop down list and textbox?
    – Dot NET
    Mar 19, 2013 at 17:06
  • The checkbox does not naturally fit this purpose, imo. Perhaps the checkbox could say "Show more" and not hide anything, but still, a "More"/"Less" button does that better.
    – JOG
    Mar 19, 2013 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.