eCommerce Tip #141: Use the float-labels in your forms to improve conversion rate!

Consider using the float-labels UX pattern in your forms. Labels are displayed as placeholders. When the field get the focus, its label is reduced in size and moved above or to the field’s top left corner.

Your conversion rate will thank you!

eCommerce: Use the float-labels in your forms to improve your conversion rate!
Tip #141 – © Franco Folini

Shorter forms have a few advantages:

  • the user are less likely to abandon a shot form than a long form (even when the shorter length is only perceived, as with floating-labels)
  • short and simple forms work better on mobile devices
  • the float-labels UX pattern is becoming very popular. Your visitors will recognize it and are already familiar with it.

Float-label can be easily implemented with just a few changes in your HTML and CSS. Chris Coyier wrote a few functioning examples of float-labels on CSS-Tricks.

eCommerce: regular form's labels pattern vs. float-labels pattern.
The regular form’s labels pattern (left) vs. the float-labels pattern (right).
A mobile example of interaction with a form using float-labels.
A mobile example of interaction with a form using float-labels.

Franco Folini lives and works in the eCommerce territory, a wild area between the Kingdom of Technology and the Kingdom of Marketing. He speaks fluently the language of both realms. For many years, Franco has been helping people bridge the divide and successfully collaborate.

If you want to find out more about Franco, visit his LinkedIn profile or send him an email folini[at]gmail.com

2 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s