The Original Float Label Pattern

This is nothing new

Lately, there’s been a lot of buzz circulating around the “Float Label Pattern”

I am actually a fan and strong supporter of this technique, but for the record, this is a pattern that has been around for quite some time now, and I myself, have used something very similar to the Float Label Pattern. Unfortunately, I didn’t name it anything cool (I think I called it placeholder tooltips). I failed to post it to github, tweet about it or blog about it… but I did implement it on a couple of sites. The 2010 version of my own site as well as a client site (September 2011) where an updated iteration utilizing tooltips is currently in use.

At the time when I came up with my version of the solution, I noticed a problem with the disappearance of a form input placeholder either on focus, or when the user starts typing into the form. Many ui experts will state the obvious and say that each form field should have a text label next to or on top of the field to indicate the desired input for the field, but in the circumstance where such text labels are non existent, the placeholder was a common method utilized to indicate the label. The scenario I encountered was that of distraction. Phones ring, people enter, conversations start, text messages come in, car alarms go off outside, nature calls… In the real world, users may often be interrupted when filling out a form and if the focus on a form field is in place, they may actually forget the context of that field and lose their place.

The solution I came up with utilized jquery ui tools and jquery clear input to remove the placeholder on focus and place it into a tooltip on top of the form field to indicate the context of the label when the field has focus. It looks something like this:

$(document).ready(function() {
//Assign default value to form fields
$(“#input”).DefaultValue(“Placeholder”);

$(“#form :input”).tooltip({
// place tooltip on the top
position: “top center”,
// a little tweaking of the position
offset: [-1, 0],
// use the built-in fadeIn/fadeOut effect
effect: “fade”,
// custom opacity setting
opacity: 0.9
});
});

Kudos to Brad Frost and Matt D. Smith for implementing, sharing and utilizing this technique as it is a usability win, and should hopefully appear on more and more websites and mobile apps in the near future. Nonetheless, these guys should not take credit for creating something that has previously existed. As I stated earlier that I came up with an early implementation of this technique, but a simple google search will reveal results for this method showing up as early as 2009. One could say that the person who first came up with the tooltip concept is the true inventor of this technique. But again, we are all great, collective minds, standing on the shoulders of giants and thinking alike… If it’s open source, then who really needs credit for originating the source, as long as we continue to promote, improve upon and perpetuate it?