Research shows that inline form labels can potentially lead to a decrease in user engagement/retention, why?
1) Input placeholders can potentially mix with user inputted text if not removed
2) Many users won’t click/tap an input field if they see text already in it
3) The placeholder is removed once focused, forcing the user to rely on short term memory to remember the input’s placeholder text (particular pain point on large forms)
A way to combat all of these issues is by using float labels. 'Float labels' float the input label above (typically to the top left) when the user focuses on the form field.
I’ve adopted Principle App as a core tool for speccing interactions when designing complex (and not so complex) product features. It’s a fantastic way to show a stakeholder how you envisage an interaction taking place. Here’s an interaction I put together solving the above issue.
Click 'L' to show some love =)
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Take our community survey and get an amazing giveaway and font discount.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.