When clicking on the input field placeholder becomes a part of the input element's border.
The following image is from the new Gmail login page.
What is this effect called?
-
I'm going to go with "Adobe ScriptUI Panel with a title... style". – Joonas Dec 13 '18 at 18:54
-
4I'd profer "annoying" – mayersdesign Dec 13 '18 at 21:17
Add a comment
|
This is known as Float (or Floating) Label or Adaptive Placeholder and it is a well known and extended UX pattern that solves the usability problems of not having a label (a very common design error) while maintaining a cleaner and more compact appearance.
Although it may not be the best option from UX's point of view, usability metrics have shown consistent reports that this pattern is easily recognizable by users
Also, from Placeholders in Form Fields Are Harmful
Floating Labels
Rooted in minimalist web design, the floating-label pattern is a modified approach to placeholders that mitigates some of the disadvantages of traditional placeholders. This pattern has been around for years, but it has finally made way onto mainstream websites, and it has even been officially embraced by Google's Material Design.
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 floating label (also known as an adaptive placeholder) is always visible, either in the center of the form field, or above the text that the user entered
