Any concerns about the usability of the text input design below? This is inspired by Material Design, but with a border around the whole input. The designer is trying to minimize clutter by displaying the label inside the input while avoiding the usability problems of placeholder text.
1Till it is for the web, I'd suggest against using labels as placeholders.– ikartik90Jan 17, 2017 at 8:04
This is called an "Adaptive Placeholders" and it's a good alternative
In this pattern, labels are placed within the form field as placeholders until the field becomes active and the user moves the input focus into the field. At that point, the placeholder label moves to the top of the field. As a result, the adaptive placeholder (also known as the float label) is always visible, either in the center of the form field, or above the text that the user entered.
It's a clever way of dealing with placeholders as it:
- Saves space (very usefull for mobile device)
- Serves as a memory aid for users while typing
However, unless you want to keep the design very minimalistic or you have space constraint it is better to keep the label outside the input - and with a hint.
Yes, but so does the article also specify that the label should move to the top of the field (not stay inside the field). Also, the same article specifies that placing label text inside the field hampers usability as fields with text in them are less usable. Jan 17, 2017 at 8:01
I have seen some instances that move the label outside the input container. That of course does not do as well at keeping the design "clean". My main concern is probably the fact that the label gets so small, and if it is too hard to read, then it is no better than normal placeholder and its harmful demands on the user's memory. Thanks for your replies. Jan 17, 2017 at 13:57
This other question asks about the benefits of having border-bottom only inputs. The Material design interaction makes sense, within its own rationale, with the bottom border only input.
In your case it is not quite the same as the Label ends up as a kind of placeholder. In my opinion it is strange because:
The label doesn't act as label in the beginning. It acts as a placeholder, which is not exactly the same.
The label doesn't act as label in the end. It acts as a placeholder that for some reason didn't disappear when text was entered.
Leaving aside the rationale this might bring some confusion like:
- The user doesn't want First name to be part of his input to be send
- The user is not able to know if the page is not working correctly or he has some plugin causing an incompatibility
My point is that instead of looking like a different approach it might look like there is something broken. My suggestion is to be careful and test how do users receive such interaction.