6

I'm having trouble with labeling of short input fields. Some labels have standard 280px width approximately, but others are quite small in order to offer clues on the expected input (characters).

I'm working with top-of-field labels, aligned vertically.

Users are very familiar with the different input fields, though, the form is prone to human errors, since the users fill them while talking on the phone, in a hurry, etc., so I want to show precise labels, and tooltips only to clear some additional info, but not to complete the text in the labels.

Problems I'm facing:

  1. There are lots of similar labels, so I cannot cut the text in the labels (amount spent in USD is different from amount received in EUR...)
  2. I'm not sure to change placement of the fields to the right of the labels, precisely because there are going to be very long labels. And I believe top-of-field labeling could be the best approach.
  3. Two lines of text for a label could be suitable for some fields, but not for a shorter field (say, three-character input field)
  4. Tooltips are necessary in several cases, and even if the label is short, the tooltip will increase the label's length.

Here is the example of the form

and the possible solutions, with the respective problems I see

Thanks for your advice!

EDITS on POSSIBLE SOLUTIONS: I've considered some suggestions, but still not convinced on the best solution to offer readable alignment, clear labels, realistic field length for visual clues. First round of attempts

7

Keep the labels above. Users have an easier time scanning forms when labels and their fields are at a constant start position. Positioning to the right means you'll either have fields jumping all over or you'll waste a lot of column space on the majority of labels.

If your examples are representative of the actual length, consider whether you might be saying too much in the label. Two options that work well when you find yourself explaining things in the label are description text or in-line help pop-ups. Use a short label for scanning and additional text to clarify.

Inputs with and without descriptive text

  • I really like the 2nd last example with a short label, and a sub-label in a lighter color... Which will still be readable as the user types... Yet it isn't quite as glaring as it would be if the darker label color. – scunliffe Nov 24 '15 at 11:15
  • Thanks @plainclothes for your suggestions. I've edited my images to show more accurate and realistic labels, and the corresponding problems. I've tried the descriptive secondary labeling, but still have my doubts on readability. What do you think? – redux Nov 24 '15 at 15:54
  • Another question regarding labeling and help text inside input fields: ux.stackexchange.com/q/9220/57201 – redux Nov 24 '15 at 16:16
1

From the options provided, I would probably go with option B. But then again, the width of the input field should reflect the anticipated length of the user's input (difference between address and postcode for example).

I think in your case, you should shorten the label to it's minimum, in this case: "Net amount", because you have the placeholder with the $, it should be clear that you expect a value in USD.

TL;DR: Adjust the width of the input fields if you can't shorten the label.

  • Thanks! Still, there would be a lot of 3-8 character input fields, and with the great amount of fields, the form will look dense. ---There may also be long labels that I would not be able to cut, since there are one-word labels like "Rentabilidad" that cannot be shortened (the product is in spanish, and words in spanish are usually longer than words in English). ---There are also multi-word labels that are too specific or repeated with few variations (Amount in EUR, Amount in USD), so specification is needed (not exactly descriptions). ---Posting new solution options. What do you think now? – redux Nov 25 '15 at 21:15
0

These are the solutions I worked on, based on your suggestions.

I still don't know what option will derive on the best experience, a solution that helps:

  1. Users to intuit the expected input (format, average characters).
  2. Users to understand the labels (self-explanatory) (tooltips provided for difficult questions)
  3. The form to be as readable as possible (help eye tracking)
  4. The form to be beautiful, consistent.

Please refer to the most suitable option, according to the needs above. Thanks!

Options to show and place form labels, that work for short input fields

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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