Do Trust Logos Have a Place on Mobile Checkout Forms?

April 2, 2013 | 1 Comment

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 couple studies done on which seals are commonly recognized and “trusted”:

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.