Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Wouldn't just a standard Combo box do for this purpose? –  JonW Mar 19 '13 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 '13 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 '13 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 '13 at 16:05
add comment

2 Answers 2

up vote 1 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

mockup

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.

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

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.

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.

enter image description here

share|improve this answer
    
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 '13 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 '13 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 '13 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 '13 at 20:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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