3

I was wondering if there is any research or literature you know which discusses the position of an input label in regards to the input wrapper?

Take the following example:

labels outside vs inside input wrapper

Both versions take the same space.

ADDITION: I am not talking about placeholders. My question is only about the shown examples for fixed label placement, without any fancy placeholder-to-label-animation or such.

3

This one boils down to scan-ability and expectations.

Generally, the label is outside the input field because it signifies what goes inside the field. It also serves as an anchor for the eye. Essentially, the space inside the field is for the user, the space outside the field is for the explanation on what is expected to go inside that box.

Placeholder text inside an input field is already often mistaken for a default answer. Imagine the confusion if the label is inside instead. It comes down to people thinking the text inside a field is their part of the conversation. If there's something in there, whether placeholder hints or labels, there will be a chance a user will skip over the field thinking their part is done there already. Many people ignore input fields that look pre-filled, as their eye is scanning for labels and empty boxes. Not everyone does this, but enough do that warrants being careful with this.

Here's an interesting article about the use of placeholders. Similar principles applies to labels inside a field.

  • Yes, I think that labels or placeholders in fields only makes sense to save space, in header for Search field, for example. For general form-based fields it's likely to be confusing. Worst idea is placeholder that animates to a label when the field gets focus - very annoying. – Steve Jones Jan 26 '18 at 13:41
  • @SteveJones - thanks for the response. As I say in my example both versions I presented take up exactly the same space so this should not be an argument. My case was about fixed label placement with no placeholder. But I agree, it is likely to be confusing. – laEm Jan 29 '18 at 8:48
  • @Wanda - thanks! That is indeed a good argument: more information inside the input wrapper could be confusing. I am wondering about those old school paper forms where the structure is the same as my second example. I am not saying that this makes it a more UX friendly choice but maybe people are used to this pattern, though. – laEm Jan 29 '18 at 8:50

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.