I have a complex data input view that you can see in this mockup:

enter image description here

As you can see I have n Parameters (~20) by n Catgories (~3-5), and each parameter has a pretty complex set of inputs.

Example inputs could be such as:

  • 200$ per 12 months
  • 4 units per 2 years
  • 4 units @ 200$ Per Unit
  • 3 units @ Reasonable Amount
  • 300$ @ 200$ Per Unit This is not be possible
  • 300$ @ Reasonable Value This is not possible
  • etc.

What bothers me about this is that the second combo box does not have a uniform data type. It has a timeframe (months, years), a unit ($ per unit) and an arbitrary value (reasonable amount, which would need to disable the value box). Also, $ per unit doesn't make sense if the user selects a dollar amount on the left. I know I could code some JS magic to make this all play nice and invalidate the respective impossible entries, but it feels wrong.

Does anyone have any ideas as to how I could optimally split something like this up, without (and this is important) making the input much more complex than it already is. Complexity is a serious factor here considering the n*n rows and columns (I probably shouldn't have used n twice).

1 Answer 1


There are too many decisions to make at the same time on this. You should use JavaScript to progressively invalidate later choices, but maybe not in the way you were thinking.

In a case like this, I would try to break it into steps and auto generate a much narrower form from the first choice. You can remove any illegal combination when you display the new form.

It looks like you can take three parameters ($/units, per/@, and month/year/unit/reasonable) and combine them and then start with an exhaustive list with the illegal combinations removed (I may have missed some legal combinations). You'll be fine as long as you don't get much more than 8-10. For the user, this is simple pattern matching.

Then just spit out the very specific form based on what they chose in the drop-down. Error handling will be easy because if they chose the wrong drop-down the data they're trying to input won't fit

enter image description here

  • 1
    Instead of a dropdown, it might be a good idea to keep the different models visible and highlight the active one. I may be wrong, but I'd think that since the difference between models is a bit of a brain-twister it's likely some users will make initial wrong choices. It's much more easier for them to spot their mistake, and the correct alternative, if the other models are constantly visually accessible. (Also good idea to carry the values when switching models, where possible.) Commented Sep 26, 2013 at 5:54

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.