3

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.

Improve this question

2 Answers 2

Reset to default
3

I'd use your existing layout, but discarding the third row entirely, and always allowing modification of the title field.

Rate:  [edit box]                    Category: [dropdown box]

Report Label: [edit box]

Display your default, autogenerated, title by default.

If the user doesn't make any changes, note that they chose to use the autogenerated one.

If the user does make changes, store the custom title.

Improve this answer
1
  • 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 Grant
    Commented Feb 23, 2012 at 2:24
4

You are doing 2 things incorrectly here:

  1. 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.
  2. 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:

Category:  [ dropdown ]         Report title: [ radio buttons ]
Rate:      [ text entry ]       Custom title: [ text entry ]
Improve this answer

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.