Invision's Wonderful Solution for Form Labels
While recently working on a sign up form, I came across a common question concerning labels: should we display them within or outside of the text field?
Through some research, I gathered an embrace of minimalism has compelled younger products to put labels within forms as placeholder text. This arguably keeps the eye focused and reduces visual clutter, but the label does disappear once the user interacts with the text field.
Most usability connoisseurs say this problematic, causing the user to easily lose context of the information they are inserting. If further interrupted by the distractions of everyday life, the user may even forget the task at hand.
Last week, I signed up for Invision, an online prototyping and collaboration tool for designers. Within minutes of using the product, I fell in love. There were many reasons for this, but perhaps a smaller detail was the most impactful: they had found an elegant solution for the form label problem.
Labels appear within the text field upon first load, allowing Invision's designers to keep the sign up form condensed and focused.
When the user clicks on the text field, the primary label disappears, creating room for the user's information. A secondary state of the label then slides in from the side to reinforce intent.
Once the user has completed the task, the secondary label persists. This serves a courtesy reminder when the user reviews the provided information.
You can see the solution in action on Invision's Sign Up page.