6

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?

2 Answers 2

7

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

4
  • 1
    Even if right alignment is not possible, my above answer still points at option 3 Jul 18, 2011 at 9:40
  • 3
    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, 2011 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. Jul 18, 2011 at 14:07
  • Good thinking, Tr1stan. Jul 18, 2011 at 18:13
4

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.

3
  • 1
    I agree with Rahul. Start by right aligning your form labels, then put the sub-labels within the text fields as static text. Jul 18, 2011 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? Jul 18, 2011 at 9:36
  • 1
    Short answer: yes.
    – Rahul
    Jul 18, 2011 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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