I first had the idea for a new input pattern back in August, 2013. The idea was simple enough - animate placeholder text to show an icon beside the input so you don't lose your context.
I had been doing 99% mobile work for the past 2 years and little things like this can really add up. I wanted a solution that saved space, looked clean and clear, but didn't forego usability.
Even a simple username and password scenario can be frustating with no labels. I can never quite remember if it says "username" or "username or email" in the first field. And that's a big deal when logging in. It's frustrating to not know if something is right or not because there's no label. I still thought the orginal concept had merit, but quickly realized that an icon alone is not enough to be fully accessible.
After scrapping the icon idea I thought:
"There needs to be a way to make this simple enough to use out of the box without needing to come up with, and design an icon set for every use of this form."
That's when I designed a new version using text only, plus a slight animation for the float label. I spent a long time thinking about the micro-interactions of when the active color would change and how soon would the text animate after someone typed. These were tiny decisions made down to the very last keyframe in my 30 FPS file.
In my mind it was a small idea towards making my app that much easier to use.
(Aside: This was designed for a post-only Craigslist app I was tinkering with.)
I had no idea it would be so well received. To my surprise it made it to the #1 spot on Dribbble's popular page for the day. That definitely helped get some early traction.
A few days later a long time Twitter friend, Jared Verdi, busted out the first real implemenation in Obj-C. Super cool. Somehow Jared's github post blew up a bit and everyone seemed to be tweeting about it. Thankfully he named it something cool when he first implemented it because I never did - JVFloatLabeledTextField. The "float label pattern" was born.
Jared deserves oodles of credit for breathing life into the idea, which otherwise may have fizzled out in the corner of the internet like a sad and lonely mediocre cat gif.
Remember that crazy, dancing guy video called First Follower posted by Derek Sivers?
As expected, there are a few naysayers to put some healthy tension on the subject, but ultimately this is worth exploring. Especially on small mobile forms.
Thanks to all who've contributed to the idea so far. 🙏
Float Label Resources
Below is a screen recording of the learnaiux.com email sign up form using float labels implemented with floatl.js—one of the best implementations, in my opinion.
Visit learnaiux.com to see how the form fields work.
- Chris Coyier's css-tricks version
- Brad Frost's blog post
- Jim Nielsen's wdtut tutorial
- Jonathan Snook's version
- Emil Björklund's version
- Building Better Interfaces write up
- Jared Verdi's first iOS implementation
- Rob Phillips' single and multi-line iOS version
- Arthur A. Sabintsev's iOS implentation
- Richard Venneman's Floatl—Library Agnostic Version
- Chris Coyier's CSS only version
- Jonathan Snook's CSS only version
- Aaron Barker's CodePen
- Achmad Mahardi's JS version
- Dave Ackerman's Bootstrappy Angularness
- Mariusz Ciesla's CodePen
- Mike Mitchell's JS version
- awesomephants's CodePen
- Peter Sorowka's CSS version with graceful degradation
- John Wilson's CodePen
- Marcus Pohorely's jQuery plugin
- David Bushell's CSS only version
- Fabiano's jQuery plugin
- Google's Angular Material Design Version
- Kasper Lewau's Angular.js version
- Sándor Turánszky Angular.js version
- Vedran Arnautovic's Axure library
Did you experiment with the
float label? If so, let me know in the comments below and I'll do my best to get it into this post.
You can visit http://floatlabel.com to go straight to my orginal Dribbble shot or follow @floatlabel to see tweets from examples in the wild.