I first had the idea for a new input pattern back in August. The idea was simple enough - animate placeholder text to show an icon beside the input so you don't lose your context. I've 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 is for a post-only Craigslist app I'm currently working on.) 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 half a 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
MailChimp Form
- Email sign up form with inline error handling (http://clubdesign.github.io/floatlabels.js/) http://mattdsmith.com/float-label-demo/
Additional Posts
- Brad Frost's blog post: http://bradfrostweb.com/blog/post/float-label-pattern/
- Jim Nielsen's @wdtut tutorial: http://webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/
iOS
- Jared Verdi's first iOS implementation: https://github.com/jverdi/JVFloatLabeledTextField
- Rob Phillips' single and multi-line iOS version: https://github.com/iwasrobbed/RPFloatingPlaceholders
- Arthur A. Sabintsev's iOS implentation https://github.com/ArtSabintsev/UIFloatLabelTextField
CSS/JavaScript
- Chris Coyier's CSS only version http://css-tricks.com/float-labels-css/
- Jonathan Snook's CSS only version http://snook.ca/archives/htmlandcss/floated-label-pattern-css
- Aaron Barker's CodePen: http://codepen.io/aaronbarker/pen/tIprm
- Achmad Mahardi's JS version: http://blog.mahardi.me/2013/10/14/jvfloatjs---the-experiment-with-form-accessbility-and-ux-in-html5/
- Dave Ackerman's Bootstrappy Angularness: http://dmackerman.github.io/angular-better-placeholders/#/
- Mariusz Ciesla's CodePen: http://codepen.io/mariusz/pen/CEADo
- Mike Mitchell's JS version: https://github.com/m10l/SmartPlaceholders.js
- awesomephants's CodePen: http://codepen.io/awesomephant/details/sdpzo
- Peter Sorowka's CSS version with graceful degradation: http://codepen.io/psorowka/full/JrKbE
- John Wilson's CodePen http://codepen.io/jhnwlsn/pen/vulgn
- Marcus Pohorely's jQuery plugin (used in my form below) http://clubdesign.github.io/floatlabels.js/
- David Bushell's CSS only version http://dbushell.com/2013/11/08/form-label-design/
- Kasper Lewau's Angular.js version https://github.com/kasperlewau/angular-float-label
- Fabiano's jQuery plugin http://fabianofa.github.io/jquery.floatinglabel/
Android
- Henrik's Android port https://github.com/wrapp/floatlabelededittext
- Kevin Johnson's Android port https://github.com/KevinJ90825/FloatLabelPattern
- Kaushik Gopal's Android port https://github.com/weddingparty/AndroidFloatLabel
Axure
- Vedran Arnautovic's Axure library http://www.thatbalduxguy.com/ux-patterns/float-label-pattern-axure-library/
If I failed to include your version here, please let me know and I'll add it.
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.
