Phablets aside, the average smartphone user will be viewing your site on a screen not much bigger than the standard business card. And when they enter their information, the pop-up keyboard will suddenly eat half of that space. If they turn the phone sideways, that will turn into 7 or 8 tenths.
Shopping in such a small area can certainly be a strange experience, but with some work on your end, you can minimize the inconvenience for your customers. Here are some tips for accomplishing just that:
A Few Basics
On your checkout page especially, make sure you cut out anything that isn’t the checkout. Minimize distracting visual elements and outbound links, especially ones that can erase the customers’ data. More on that in a moment.
Cut down on white space as well. Since there’s less space on a page, having too much white space can lead careless customers to think that your page ends before it does. Too much of it is also a pain to scroll past.
Clearly label important buttons. In an article on mobile usability, Smashing Magazine described a situation in which a customer kept mistaking the “view cart” button – a graphic of a shopping cart – for the “add to cart” button. This potentially cost the company lost sales as he kept thinking that the browser was bouncing him to his cart so that he could confirm the item was added to it. So, in this instance, let clarity trump slick design.
Basic Mobile Form Usability
The checkout process consists mostly of filling out forms, so you want those forms as easy to fill out as possible. Some of the most severe problems with mobile checkouts are just basic form usability issues.
Next, remember that filling out forms on a phone is inherently more cumbersome and annoying on a phone than on a computer in general, so just try to minimize the amount of it your customers have to do. Condense your forms: that means just one input for the customer’s full name instead of separate ones for first, middle, and last; one phone field; and so forth.
This also means…
This is even more important here than with even desktop sites, since it’s so much easier to accidentally hit the back button or an outbound link, and people want to be reassured that your site will forgive that mistake. As I just mentioned, forms are a pain, so many customers won’t want to have to fill them out more than once. Mobile phones are also more prone to inexplicable browser crashes and unexpected page reloads. So make sure that your checkout app will remember their data.
You can also factor their insecurities into the site’s visual design. Customers are afraid of leaving the checkout process while buying on a phone, so anytime a link is pressed, you can add a box that gives them the option of opening in a new tab. And in situations where navigating away really will erase their data, warn them. Have a clear warning, with OK/Cancel options, pop up when the link is pressed. This will also give users a failsafe for all those accidental button presses.
It may also help to include your own back buttons. Why? Because customers tend to perceive that clicking their browser’s back button is more likely to wipe their data than clicking one that’s built into the website. Whether or not you think this is rational, there’s the assumption that your website’s back button must come with some sort of save feature that differentiates it from the browser’s, or else you wouldn’t have bothered to put it there.
Customers are less trusting of sites where they’ve already lost data, so anything you can do to assuage their fears is good for your business. It’s also worth noting that customers will often sign up for an account just to ensure their data persists. So remember to fully leverage that for your marketing efforts.
Offer Guest Checkout and Make it Easy to Find
A Baymard Institute study found that 30% of customers abandoned their carts after finding they were forced to register with the site before they were allowed to buy it. And this isn’t even just mobile customers, it’s all customers across all platofrms. Despite all your (valid) concerns about unintended or false purchases, the fact remains that having to fill in forms on two separate pages (and possibly check their email) to make a minor purchase is an infuriating pain for many mobile customers, and they don’t want to deal with it. So it’s a good idea to offer guest checkout if you want to ensure the maximum number of conversions.
Make sure that it’s displayed on the same page as the regular checkout button, too. In order to help with this, you can employ collapsible menus.
This lets you give an overview of multiple options, or all the steps of a multi-step process, that fits on one screen. This helps with “scannability,” or the ease of getting an overview of a page with one glance.
It’s also crucial if you have multiple options on a page, but each one has a little details box. For example, if you sell a basic version, advanced version, or other versions of a certain product at different costs, but you’d like to display them all on the same page, make sure that they’re collapsible, and start out collapsed. That will save your viewer a lot of aggravating scrolling to get past the ones they’re not interested in, greasing the slide into the conversion funnel by that much more.
When users are filling in their information, they can only see one field at a time, so they tend to view each field as an independent task. So make sure all your field labels make sense out of context. For example, if you need your customers to enter a billing address and a shipping address, make sure that the individual boxes are labeled as that. You’ll want the bit where they enter their apartment number to be “Billing Address 2” or “Shipping Address 2,” not just “Address 2.”
Never put your field labels next to the field: this cuts deeply into the space allowed to display it, making it much harder and more awkward for the user to proofread what they just entered into it. Instead, place the labels above the field.
And don’t try to cheat by using inline labels, either. Inline labels are those (usually gray) labels placed inside the box that disappear when you start typing. This leaves the input box without any context. So, if the viewer’s phone should ring or the baby should start crying while they’re filling it out, they’ll have to guess from context what field they were working on when they get back–a hard task when no context is provided!
Optimizing an online checkout can be a complex process, but remember these basics:
- Label your buttons
- Either preserve data or warn customers when they’re about to lose it.
- Use collapsible menus for lists of options.
- Offer easy-to-find guest checkout.
- Clearly label your fields, above the entry box.
Do these things and you’ll remove a lot of the «what-if» factors from making the sale. I realize there are plenty other aspects I didn’t get to cover, so please feel free to tell me about some of them in the comments. I always love to hear your ideas!
Image: Jason Howie