Complex Forms and Data Consistency

Question

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

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).

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