I'm building a part of an HTML form (titled "New Commission Rule") in a web application used by business users to enter and report on sales commissions in a retail store. See http://jsfiddle.net/q3KaH/ for the UI that I inherited that I'd like to improve.
There are two required fields in this part of the form: Commission Rate (edit box) and Product Category (dropdown box).
In addition, there's a third field called "Report Label" where I'm looking for UI advice. This field will show up when commission reports are later generated by the application. Usually Report Label will be automatically generated. For example, if Commission Rate is 10% and Product Category is "Shoes" then the auto-generated Report Label will be "Shoes: 10%".
But we also want to allow users to occasionally customize their Report Label, e.g. "Shoes (not including boots): 10%". This is an infrequently-used option so ideally it'd use as little as possible screen real estate.
My main constraint is vertical real estate. Because of constraints of the surrounding form, I have a "budget" of only three lines of HTML (80px high, 500px wide), including:
- Commission Rate label and edit box
- Product Category label and dropdown box
- Way to choose either automatic or custom Report Label
- Report Label text (if automatic) or edit box (if custom)
Got ideas for something that's more elegant and, ideally, less visually cluttered and/or more vertical-space efficient than my starting point at http://jsfiddle.net/q3KaH/?
The starting point I'm working with is this one (see http://jsfiddle.net/q3KaH/ for HTML):
Rate: [edit box] Category: [dropdown box] Report Label: [static text or edit box, depending on choice below] Report Label Type: [dropdown box with 2 options: auto or custom]
Ideally I'd be able to shove the report label and the manual/custom setting into one line, but I can't yet figure out how to do it cleanly.