Floating Labels: Making Inform Fields Work Better

Most of the time, when I design form fields, I would put the labels inside the field. Purely because the design is a bit more compact and it feels a bit cleaner. But I’ve always felt a bit uneasy when I use this pattern. Apart from a few technical issues, it also forces the user to make use of his short-term memory to remember what he needs to enter into the field.

Jackson Fox lists a few solutions to this problem in his article, Making Infield Form Labels Suck Less”. I don’t really like any of these because they either feel out of place or they kind of go against the reason why I wanted to put the label inside the field in the first place and that is to keep it compact and clean.

But I found this really neat implementation by Marcus Pohorely of a concept done by Matt Smith. It’s called floatlabels.js and is available for free over here. What I love about this solution is the subtle animation of the labels to appear just above the input copy and by doing so still keep the form compact and clean.

Here’s Matt’s concept design:

Infield Form Animation