What is Gmail’s new login page effect called?

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.

new gmail login page

What is this effect called?


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

Source : Link , Question Author : distalx , Answer Author : Devin

Leave a Comment