Make Your Mobile Checkout Forms Dead Simple to Complete

April 23, 2013 | Comments Off on Make Your Mobile Checkout Forms Dead Simple to Complete

On your e-commerce sites, it’s bad enough if potential customers abandon their carts simply because filling out forms becomes too tedious or confusing.

Maybe you’ve streamlined each form in your checkout process to make it as painless as possible.

But how simple and fast is it to complete your checkout forms on a mobile device?

For starters, labels above fields helps readability.

Trust logos likely increase conversion rate.

But are each of your form fields bringing up the right mobile keyboard type?

If you’re not familiar with the different keyboards for iOS and Android, think about it the next time you fill out your email address on a form using your phone. Are the ‘@’ and ‘.’ characters prominently displayed next to the space bar at the bottom? If not, then you have to navigate to the symbols keyboard to complete the field. It’s a few extra taps which can be eliminated.

To avoid this we need to match mobile keyboard types to form fields, which is pretty simple to add to your forms. The 4 main keyboard types are standard (default), email, number and phone.

iOS also supports URL, date and time keyboard types. But Android does not currently.

HTML5 input types are used to trigger the keyboard type. And if the device being used doesn’t support them it will simply revert to a standard keyboard.

Here’s a comparison of what the keyboard types look like on iOS (left) and Android (right) along with the HTML input types required to trigger them.

Default text field (type=”text”)

iOS form field text default Android form field text default

[code language=”html” light=”true”]
<input type="text" name="first_name">

Email input type

Notice the ‘@’ and ‘.’ characters added next to the space bar for easy email address entry.

iOS form field email Android form field email

[code language=”html” light=”true”]
<input type="email" name="customer_email">

Number input type

Numbers dominate the top row on iOS with supporting characters on the next 2 rows. Android simply brings up a 10-key.

iOs form field number Android form field number

[code language=”html” light=”true”]
<input type="number" name="cc_number">

Phone input type (type=”tel”)

Both iOS and Android use a 10-key here, with the addition of letters and ‘#’ / ‘*’ characters to imitate regular phone keypads.

iOS form field telephone Android form field telephone

[code language=”html” light=”true”]
<input type="tel" name="phone_number">

Drop-downs such as credit card expiration dates should just use the native HTML input type ‘select’.

Don’t forget to add the autofocus attribute to the first field in the checkout form to eliminate another extra tap. This works on both mobile and desktop HTML5 browsers.

[code language=”html” light=”true”]
<input type="number" name="cc_number" autofocus>

That’s it. Not much extra coding to make filling out your mobile checkout forms easier and faster for your visitors. Hopefully you’ll see a few more conversions after putting these changes in place.

Do Trust Logos Have a Place on Mobile Checkout Forms?

April 2, 2013 |

You see them all the time without even noticing. Trust logos are usually seen on checkout pages, but some stores put them at the footer of all their shop pages. Some examples:

newegg trust logo footer

vitacost trust logo footer

monoprice trust logo footer

Note: Trust logos are also referred to as trust marks, trust icons, security badges, SSL badges, trust seals, etc.

Many studies have been done and at this point there’s little doubt that adding trust logos to your standard e-commerce checkout forms help convert shoppers simply by putting them at ease. To further explore this topic, see these references:

Trust logos along with credit card images, lock icons, and statements about encryption all contribute to a shopper’s perceived security of your checkout process. Of course it still need to be technically secure and encrypted via SSL.

But should these security icons and badges be added to mobile e-commerce checkout forms with their limited screen size and bandwidth?

I didn’t yet find anywhere that’s already run studies on mobile trust logos in particular, but personally I would first try adding one or two trust logos horizontally. Not more than three, and not too big. You don’t want to clutter up the small screen.

Since you’re only going to use one or two security badges, stick with proven logos such as McAffee, Norton and Verisign (maybe PayPal if you use it). Here’s a study you may want to review:

As far as where to place the seals, I would first try placing them above the credit card field, since you want to reinforce security on the credit card field.

The downside to adding trust logos is more vertical scrolling. But like adding labels above fields on mobile checkout forms, studies show this doesn’t prevent the user from completing forms.

Ultimately how do you know adding trust logos to your mobile checkout pages will improve conversions for your sites?

Well you don’t. Not until you test them. So go ahead and create some A/B tests and see what happens. I’d love to hear what ends up working and what doesn’t.

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.