Improve Your Mobile Checkout Process

Smashing Magazine recently came out with the 10 best practices for designing a better mobile checkout process. Below are the practices that really stood out for me:

Include Only Vital Fields

It is important when designing for mobile that you only include the vital fields during the checkout process as you are working with a much smaller area. Over the past couple of weeks Wiliam has been designing a mobile payment page for one of our clients. One of the strategies we used to minimise the page space and to make the page more streamlined was to include the field label inside the text field.

If you look at the example below not only are the field labels inside the text field but they have also included icons just so that users don’t forget the field name once they click into it. 

Allow Checkout As A Guest

I’m sure we have all been in situations where we want to quickly buy something online and then get presented with the time consuming road block of having to create an account to continue. If people are purchasing on mobile they want to get it done fast. Give users the option to checkout as a guest. Smashing Magazine pointed out that one retailer saw a $300 million increase in sales by removing the register button!

Show Progression

An anxiety point during the checkout process is not knowing where you are in the process and how much longer you have to go. It’s important to give users the satisfaction of completing sections and to let them know they are near the end. 

Provide Security Reassurances

Another anxiety point for mobile e-commerce is the security when using your credit card. It’s very important to make it clear to users that they are in a safe environment through trust symbols and SSL certificates.  

And lastly, I just wanted to point out the importance of a processing payment screen. This wasn’t part of the Smashing Magazine article but is something that we recently designed for one of our clients. Letting the user know that something is actually happening while payment is being processed is very important. The last thing you want is your user to be waiting on the payment page for the confirmation page to load, and exiting their browser thinking that the payment has already gone through or that the page isn’t loading fast enough. Doing this through a modal window is the best way to go, see below: