Two dependent inputs in a form

Question

I have a form where the user would need to input a text field, and then enter pricing based on the first input. I've come up with an idea on how to do this, but not sure if its the best approach:

Is there a better way?

Answer 1

It looks workable, and like a logical approach. Of course, the best way to tell would be to test it, even with just one or two restaurant owners.

Could potentially be improved by hiding the price field until a size is chosen. This will help communicate the dependency between the two fields.

Depending on how the rest of the application is designed, it might also make the owner's job easier if you let them select sizes for a whole number of items at once, e.g. use the interface to select a group of pizzas and say the sizes for all these pizzas are small, medium and large. Similarly, it might be good to allow them to set a default price per size (e.g. default price for small is $10) but allow this to be overwritten on a pizza-by-size basis.

Answer 2

This looks like a good implementation, but I would suggest support for keyboard tab to switch between fields. Think of it in this workflow:

1. User selects the first text box (size) with the mouse or access key.
2. User enters a size and tabs to the next field.
3. Tabbing from prize field user gets a new row, without clicking the "Add another size" link.

Just remember to set the tab order correct, and you have a nice implementation of the workflow.

I'm a bit confused of the size though. Are we talking volume, area, distance or something else? Explain that to th user, and you'd be fine.