Where to Put Field Labels for a Better Mobile Checkout Experience

March 28, 2013 | Comments Off on Where to Put Field Labels for a Better Mobile Checkout Experience

Where should the field labels go on your mobile e-commerce checkout forms to improve conversions and decrease cart abandonment?

According to the Baymard Institute, most of the time labels should go above the fields. Baymard’s done a ton of studies and most recently been focusing on mobile commerce usability.

To summarize their article, when labels are above they fields, they flow nicely on a standard size smart phone screen in portrait mode (generally around a 320-pixel width).

If labels are left-aligned, the input fields may not be wide enough to display the entire field the user is currently in. Credit card fields take 16 characters. Email addresses can be more. When this happens to a user, they can’t see if they’re entering incorrect data. When they go to correct, many just delete and start over.

Think about how much harder it is to accurately enter your email address or credit card number without mistakes on a phone. There’s usually more typos happening, so seeing your input as you go is that much more important on mobile.

Christian Holst, the author of the above referenced post, goes on to point out that labels above the fields allow for longer descriptions since they’re not limited to a narrow width as a left-aligned label is.

There is a downside though. The user may have to do more vertical scrolling. But Baymard’s studies show that vertical scrolling is usually doesn’t prevent users from completing the form.

When technically feasible, it can be beneficial to add “responsive design” code to move the label to the left of the field when the user switches to landscape orientation on their mobile device. This is because the keyboard now takes up about two-thirds of the screen.

jQuery Mobile form elements have an automatic form label responsive switch built-in if you happen to use their library.

jQuery mobile forms portrait

jQuery mobile forms landscape

The other option for labels is to only display them as placeholders inside the fields themselves. A good example is how Stripe (my favorite payment gateway) lays out their standard minimal checkout form.

Stripe checkout form on mobile

As the Baymard Institute points out in their post on “false simplicity” (and Christian Holst in his Adaptive vs. Responsive post on Smashing Magazine), the problem with placeholder labels is that the user can lose context of where they’re at. The moment you start entering data into a field, placeholder labels disappear, and the user may forget where they were at.

But placeholder labels are definitely better than left-aligned labels. If there’s just a few fields, such as with a mailing list sign-up form, inline labels may make sense. Assuming Stripe has good data on their millions of transactions, maybe they’re on to something with inline labels on their standard mobile and desktop checkout form.