5 ms·

Float Label Pattern

162 points by ryanjodonnell 13y ago

tzury 13y ago
Quick example by the author http://codepen.io/iamjordanlittle/pen/AHdfn http://codepen.io/iamjordanlittle/pen/AHdfn
xutopia 13y ago
My beef with the placeholder pattern was that once you typed a character you wouldn't know what the field is all about. This pattern fixes this.
- petepete 13y ago
  Surely the placeholder is meant to contain a hint rather than just another copy of the label text, though?
blorenz 13y ago
I don't feel that this solves anything that a label + placeholder could accomplish in this demo. The space for the floating label is available the entire life of the form - before, during and after field focus. I just think that this solution is just putting lipstick on the pig of the issue via animations.
- psychometry 13y ago
  Sometimes a little lipstick massively increases form conversions. The more minimal and inviting the form looks, the less imposing it feels to the user.
clarkmoody 13y ago
Even though the space for the small labels is there the whole time, I think this approach is better than having the small labels visible the entire time. Consider if the labels were tiny and always visible: the form would contain very tiny text and odd spaces where the existing placeholder should be. Gray placeholder text also provides the needed contrast with the black user-entered text, so as not to confuse the two types of large text. The animation is very clean as well.
- ams6110 13y ago
  My reaction was the opposite, I thought it would be more effective to just have the small labels from the start and no animation when you start entering a value. I'm pretty anti-animation on forms though. Just seems gratuitous.
Sakes 13y ago
This might be the most beautiful form that I've ever seen. Just gorgeous. I can't think of any way to improve it, and so have nothing valuable to add as a comment.
ryanthejuggler 13y ago
Not to be that guy, but could you possibly have picked any color other than that particular shade of brown for the header? Other than that, this is a really gorgeous solution. I'm going to see if I can implement something like this for Android.
aaronbrethorst 13y ago
All that and there's no link to the iOS implementation? https://www.cocoacontrols.com/controls/rpfloatingplaceholders https://www.cocoacontrols.com/controls/rpfloatingplaceholder... n.b. I created the site I link to above, etc etc.
nfoz 13y ago
Not bad. Certainly better than inline labels. However, I think another con is the distraction of stuff moving around as soon as I start to type. Let me be clear, it's not that there's movement. It's that if a box asks me to enter something, then my answer is premised on what was asked of me. If the moment I start typing it seems like something in the environment is changing -- suddenly I'm like, whoa, what changed? Is what I'm typing still what the box wants? Did I do something that caused state to change simply by typing a character? There's this tiiiiny moment of hesitation at that first character, before my eyes scan what happened, re-read the label text, and I see what occurred and that my input is still valid. tl;dr: might take a bit of getting used to seeing stuff change on the screen the moment you type into a box.
- zepolen 13y ago
  I agree I think it would be better if the label floated up the moment the text box gained focus.
  - lstamour 13y ago
    Fixes the complaint mentioned in the blog post of losing the ability to set both placeholder and label. Once floated, a new placeholder can be set and animate from the bottom of the box, or just fade in. Alternatively, to address the password example head on: a well-placed tooltip, or better yet a button to generate passwords or an autosuggestion to fix passwords to match complexity requirements (done locally so password need not be sent multiple times) might be interesting. Actually, hide the suggestions until a user clicks for them. Never know what environment they're in. Auto generating a password they can choose to change might be interesting too.
    - harlanlewis 13y ago
      I have never seen a form auto generate a password, but intrigued by the concept. How would you communicate it to the user? At some point you'd need to send it in plain text (not to mention trust they'd remember/record it, unless you're optioning for a 'reset your password ever time' flow)
eagleal 13y ago
I've made something similar on a data editing UI back in 2011. But I found that showing the label only on field focus wasn't really suitable for UIs that contained multiple fields of similar data. Like in the example below[1] there are two fields where you can enter coordinates data, but without a hint you wouldn't be able to distinguish where should one or the other go. [1] http://www.pmura.com/media/af-ui-input-2011.png http://www.pmura.com/media/af-ui-input-2011.png
- nfoz 13y ago
  In that screenshot, it would help if the toolkit showed the extent of the textboxes. Having the bare floating text in a sea of white provides minimal context.
  - eagleal 13y ago
    Actually it does when you focus on an input. Having borders/backgrounds on every piece of text proved to be a bit messy in my case. It would've been cooler if I could've capture the interaction, but I don't have access neither to the live webapp, neither do I have a deployed development version at hand :(.
d0m 13y ago
A clear cons is the fuckload of problems you get with IE trying to do that.. and people entering their emails where it asks emails and vice-versa. I know there are fixes.. but still, always a pain to deal with.
yeah_ok 13y ago
Can someone explain to me the difference between an inline label and placeholder text?
- vectorjohn 13y ago
  The inline label doesn't disappear when you type something.
sarreph 13y ago
This is beautiful. I'm going to keep a tab on this idea for the next time I need to implement a labeled interface in iOS.
liahsheep 13y ago
I hated when I have to choose between label and placeholder, and this has the best of both worlds!
spectre 13y ago
Implementation using CSS3: http://jsfiddle.net/spectre/52Bf2/3/embedded/result/ http://jsfiddle.net/spectre/52Bf2/3/embedded/result/
- bringking 13y ago
  I spiced it up a bit with a little animation. kind of hacky since I position the element over the input placeholder using absolute positioning. http://jsbin.com/OTaYIFE/1/ http://jsbin.com/OTaYIFE/1/
thetron 13y ago
I love this idea. I did a quick pure-CSS implementation, not bullet-proof by any means - biggest downside is it's reliance on the `required` attribute: http://jsfiddle.net/thetron/qpsnH/ http://jsfiddle.net/thetron/qpsnH/
joelanman 13y ago
Its always nice to see new approaches, but I think the smaller label text is just too small for lots of users.

162 points by ryanjodonnell 13y ago

tzury 13y ago

Quick example by the author http://codepen.io/iamjordanlittle/pen/AHdfn http://codepen.io/iamjordanlittle/pen/AHdfn

My beef with the placeholder pattern was that once you typed a character you wouldn't know what the field is all about. This pattern fixes this.

petepete 13y ago
Surely the placeholder is meant to contain a hint rather than just another copy of the label text, though?

blorenz 13y ago

I don't feel that this solves anything that a label + placeholder could accomplish in this demo. The space for the floating label is available the entire life of the form - before, during and after field focus. I just think that this solution is just putting lipstick on the pig of the issue via animations.

psychometry 13y ago
Sometimes a little lipstick massively increases form conversions. The more minimal and inviting the form looks, the less imposing it feels to the user.

clarkmoody 13y ago

Even though the space for the small labels is there the whole time, I think this approach is better than having the small labels visible the entire time. Consider if the labels were tiny and always visible: the form would contain very tiny text and odd spaces where the existing placeholder should be. Gray placeholder text also provides the needed contrast with the black user-entered text, so as not to confuse the two types of large text. The animation is very clean as well.

ams6110 13y ago
My reaction was the opposite, I thought it would be more effective to just have the small labels from the start and no animation when you start entering a value. I'm pretty anti-animation on forms though. Just seems gratuitous.

Sakes 13y ago

This might be the most beautiful form that I've ever seen. Just gorgeous. I can't think of any way to improve it, and so have nothing valuable to add as a comment.

ryanthejuggler 13y ago

Not to be that guy, but could you possibly have picked any color other than that particular shade of brown for the header? Other than that, this is a really gorgeous solution. I'm going to see if I can implement something like this for Android.

aaronbrethorst 13y ago

All that and there's no link to the iOS implementation? https://www.cocoacontrols.com/controls/rpfloatingplaceholders https://www.cocoacontrols.com/controls/rpfloatingplaceholder... n.b. I created the site I link to above, etc etc.

nfoz 13y ago

Not bad. Certainly better than inline labels. However, I think another con is the distraction of stuff moving around as soon as I start to type. Let me be clear, it's not that there's movement. It's that if a box asks me to enter something, then my answer is premised on what was asked of me. If the moment I start typing it seems like something in the environment is changing -- suddenly I'm like, whoa, what changed? Is what I'm typing still what the box wants? Did I do something that caused state to change simply by typing a character? There's this tiiiiny moment of hesitation at that first character, before my eyes scan what happened, re-read the label text, and I see what occurred and that my input is still valid. tl;dr: might take a bit of getting used to seeing stuff change on the screen the moment you type into a box.

zepolen 13y ago
I agree I think it would be better if the label floated up the moment the text box gained focus.
- lstamour 13y ago
  Fixes the complaint mentioned in the blog post of losing the ability to set both placeholder and label. Once floated, a new placeholder can be set and animate from the bottom of the box, or just fade in. Alternatively, to address the password example head on: a well-placed tooltip, or better yet a button to generate passwords or an autosuggestion to fix passwords to match complexity requirements (done locally so password need not be sent multiple times) might be interesting. Actually, hide the suggestions until a user clicks for them. Never know what environment they're in. Auto generating a password they can choose to change might be interesting too.
  - harlanlewis 13y ago
    I have never seen a form auto generate a password, but intrigued by the concept. How would you communicate it to the user? At some point you'd need to send it in plain text (not to mention trust they'd remember/record it, unless you're optioning for a 'reset your password ever time' flow)

eagleal 13y ago

I've made something similar on a data editing UI back in 2011. But I found that showing the label only on field focus wasn't really suitable for UIs that contained multiple fields of similar data. Like in the example below[1] there are two fields where you can enter coordinates data, but without a hint you wouldn't be able to distinguish where should one or the other go. [1] http://www.pmura.com/media/af-ui-input-2011.png http://www.pmura.com/media/af-ui-input-2011.png

nfoz 13y ago
In that screenshot, it would help if the toolkit showed the extent of the textboxes. Having the bare floating text in a sea of white provides minimal context.
- eagleal 13y ago
  Actually it does when you focus on an input. Having borders/backgrounds on every piece of text proved to be a bit messy in my case. It would've been cooler if I could've capture the interaction, but I don't have access neither to the live webapp, neither do I have a deployed development version at hand :(.

d0m 13y ago

A clear cons is the fuckload of problems you get with IE trying to do that.. and people entering their emails where it asks emails and vice-versa. I know there are fixes.. but still, always a pain to deal with.

yeah_ok 13y ago

Can someone explain to me the difference between an inline label and placeholder text?

vectorjohn 13y ago
The inline label doesn't disappear when you type something.

sarreph 13y ago

This is beautiful. I'm going to keep a tab on this idea for the next time I need to implement a labeled interface in iOS.

liahsheep 13y ago

I hated when I have to choose between label and placeholder, and this has the best of both worlds!

spectre 13y ago

Implementation using CSS3: http://jsfiddle.net/spectre/52Bf2/3/embedded/result/ http://jsfiddle.net/spectre/52Bf2/3/embedded/result/

bringking 13y ago
I spiced it up a bit with a little animation. kind of hacky since I position the element over the input placeholder using absolute positioning. http://jsbin.com/OTaYIFE/1/ http://jsbin.com/OTaYIFE/1/

thetron 13y ago

I love this idea. I did a quick pure-CSS implementation, not bullet-proof by any means - biggest downside is it's reliance on the `required` attribute: http://jsfiddle.net/thetron/qpsnH/ http://jsfiddle.net/thetron/qpsnH/

joelanman 13y ago

Its always nice to see new approaches, but I think the smaller label text is just too small for lots of users.