Need feedback on the usability of this text input design

Question

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.

Link to video showing the animation

Answer 1

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.

Source: https://www.nngroup.com/articles/form-design-placeholders/

Answer 2

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.