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/?

Good answer. Your idea to only use one line for the report label (whether custom or otherwise) is the approach I used. My implementation was slightly different (using static text and an "edit" button to switch from read-only to editable) but your "keep it simple" idea was the right one.
–
Justin GrantFeb 23 '12 at 2:24

Mixing unrelated steps: your form is for setting up a tax rule not for generating reports. Leave report settings to the appropriate stage because when users finds themselves needing to edit the report, they'll have to go back here.

Agonizing over an edge case of an unrelated step: if title customization is a rarely-used feature, it shouldn't be in the middle of the standard workflow. It belongs to advanced report generation settings. Thus, your current situation is resolved.

The third problem with the form, its layout, is solved by removing the other two. Your form is currently poorly aligned making the eye run around the screen. Use this answer as guidelines to proper form alignment.

However, if you decide to keep report title customization in this form, your order of controls should be the following: