User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Let's say I have a form with fields that accept data in very specific formats, such as currency (£) or percentage (%). How should I convey that to a user? If I use 'sub-labels' (symbols that represent these formats), how should I align them with my form fields?

There seem to be three obvious options, which I've mocked up below:

  1. Place the 'sub-labels' to the side of the fields, which are aligned to the form's gridlines
  2. Place the 'sub-labels' to the side of the fields, but align the sub-labels to the form's gridlines
  3. Don't use any 'sub-labels'. Explain what you want in the field's main label.

Here's some images:

enter image description here

My instinct is to go with 1 or 3, but what would you advise - and why?

Edit: This is related to a real world project, which has certain restrictions. One of those is that it's unfeasible for us to switch to right-alignment - we have hundreds of forms, and very few developer resources. Given this restriction, what choice works for the current iteration?

share|improve this question
up vote 7 down vote accepted

Option 3 (of the options shown) - it immediately gives the user the next piece of information that the user needs after reading the field label.

Immediately after reading the label, even before looking at the entry field itself the user will be thinking about the value to enter and wondering what units or how to work it out.

I know all three options show the units, but the closer the units are to the label, the less likely the user has to think about it because they'll have already read it as part of the label.

To combine the label and the units is to consolidate two chunks of information into one which then gets processed more efficiently and also serves to reduce clutter on the screen, improving the clean lines at left and right of the entry fields and improving the appearance of the whole screen - making it look easier to fill in.

Additionally, I agree with others: right align your field in any case - and this doubly serves to move the units closer to the entry point anyway and in fact positions each unit equally close to each field, making it appear more consistent.

enter image description here

share|improve this answer
Even if right alignment is not possible, my above answer still points at option 3 – Roger Attrill Jul 18 '11 at 9:40
You also solve another issue with Option 3/3A that you might not have come across yet and that is that not all currencies have a prefixed currency symbol. Therefore if you were looking to implement option 1, and you need to support other currencies, you have to be able to cope with the symbol appearing after the monetary value too. – Tr1stan Jul 18 '11 at 13:52
@Tr1stan That's a very good point - and I have indeed come across that very issue before with touch screen devices for point of sale that have to work internationally. – Roger Attrill Jul 18 '11 at 14:07
Good thinking, Tr1stan. – Jimmy Breck-McKye Jul 18 '11 at 18:13

Considering the answer to Why might right-aligned field labels be better?, first of all I would right-align the labels. That removes option one. The second option makes the fields harder to scan, and as should be clear by now (or by reading Luke Wroblewski's book about web form design), scannability in forms is extremely important.

That leaves the third option and perhaps a fourth option - placing the "sub-labels" inside the field itself. I would try both and see which tests better. Generally my personal preference is to lean towards the one that would work best in print, and that's option three.

share|improve this answer
I agree with Rahul. Start by right aligning your form labels, then put the sub-labels within the text fields as static text. – Nadine Schaeffer Jul 18 '11 at 3:31
This is a good answer, but right-alignment isn't feasible for the real-world project this relates to. We have hundreds of forms, all left-aligned, and not enough developer resources to change that in this iteration. Given those restrictions, would you still opt for 3? – Jimmy Breck-McKye Jul 18 '11 at 9:36
Short answer: yes. – Rahul Jul 18 '11 at 12:02

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.