Skip to Main Content

The Pros & Cons of Floating Labels

Posted on 7.01.2017

Did you ever encounter a form and think to yourself - "Wow, that is freakin' slick..."

No? Perhaps it's just me.

Even though I've seen what I can only assume at this point is 1 billion forms (that's a ridiculous exaggeration, but it does feel that way at times) I am regularly in awe of the lack of effort that most digital designers and user experience (UX)  professionals tend to invest in these crucial elements of the conversion journey.

There are forms on well-known and popular sites that seemingly break all the design rules and UX best practices, failing to fit within the traditional understanding of what ever might motivate a user to enter information and click submit, but which still work well and don't seem to negatively impact their brand's bottom line.

The problem is, most people won't bend over backward to fill out a form they are repulsed by unless it is something they really, truly want or need. Most things in life don't fit that bill, of course, and so designers crafting a form experience for such products or services need to reduce friction in whatever way that they can.

An immense amount of debate rages around the topic of form design in the cubicles and corner offices of designers and UX professionals. As new trends, tactics and techniques emerge about the optimal way to achieve conversion nirvana and zero abandonment (which, obviously, is not totally reliant on the quality of the form), the debate accelerates and heads into interesting and often academic discussions.

Floating labels, a concept Website Magazine touched on in its July issue, is one such trend and it is experiencing its fair share of debate among the design community. Some believe float labels are a bad idea while others, including the guy who made the original design that most of the float label craze is based on, are not sure that float labels are problematic at all.

Floating Label Example

One thing should be very clear after experiencing a form with float labels - they are slick and easily differentiated from the millions (perhaps billions) of other forms on the Web. The only way to know if such an approach works is to implement and test.

While it's not smart to implement every single new design trend, there are benefits to floating labels that warrant the attention of designers, developers and UX professionals. And, of course, there are some drawbacks too.

The drawbacks, if you've ever encountered a floating label, should be pretty obvious.

Another Floating Label Example

Most users aren't familiar with them (yet) and that lack of familiarity tends to cause unease - the result of which is simply hitting the back button on their browser or closing out the window entirely. For those that are not overwhelmed, floating labels still force some additional cognitive load because of the animations and the different states of the inputs (which could be exhausting depending on the number of fields). Additionally, the placeholder text that is often included within floating labels is often low contrast (and so difficult to read) which makes it tough to view for those with low contrast sensitivity - in essence, placeholder text in floating labels is less noticeable; in some instances users often mistake placeholder data in floating labels for data that was autofilled by the browser (yielding unwelcome error/validation messages).  

That is quite a few drawbacks, of course, and it may make you wonder if using floating labels is worth it. So, is it? Are there any benefits? 

There are a few primary benefits which cannot be ignored. Since floating labels are a relatively new design trend, they are seen as unique and if users aren't turned off, they'll want to participate in the experience of completing the form in order to receive the full effect. And since it is so "edgy" in appearance and functionality, consumers/users have more respect for the differentiated experience and as a result are more willing to complete the form. 

These are just a few thoughts on the pros and cons of using floating labels. My time here is done and now it's your turn! What is your opinion on the use of floating labels? Does the differentiation in experience outweigh the increased cognitive load? Share your opinion with a comment now. 

unsplash-53117
Today's Top Picks for Our Readers:
Recommended by Recommended by NetLine

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •