If you have not read the first part of this article, than I would recommend having a read about the basic understanding on building a mobile checkout. This article will show you all the steps in building a mobile optimized checkout.
I first want to show you a list of steps that you need in the checkout, unfortunately due to reasons out of my control I have had to build in this example an extra step, but the majority will be able to combine them which I will explain further down this article.
With each step you can rearrange them to fit your needs, but I would recommend to keep stage one so that we can reduce the leading stages (explained in stage one).
- Choose a delivery method
- Enter delivery details (not required for click and collect)
- Review your products
- Enter billing details
- Enter billing payment details (this step could be combined with the previous one)
Stage One : Choose your delivery method
In the first step we want to ask the visitor to choose from the following options
- UK Delivery
- Click and Collect from store
- International Delivery
We ask this question on the first stage so that we can reduce the stages based on each result. For example if the customer selects collection, than we only need to know there billing details, and where they are collecting from. Meaning that the stages are reduced to 4 instead of 5, or even better if you can combine the final two stages, you will have 3 stages (Billing Details and Credit Card Details combined).
If the visitor selects UK delivery than an extra step will be added to ask for the delivery details.
With international delivery we will add a drop down menu for countries and remove the postcode lookup feature (explained in step two).
On page requirements for stage one
- a short information section showing how much the visitor has spent with the currency
- a from price for shipping delivery
- easy navigation
General requirements for on page footer and header.
- Telephone numbers
- Returns policy
- SSL security image, showing them its a safe browsing environment.
In our example we have used a radio button inside each block, but I would recommend an image such as an arrow pointing to the right.
Stage Two : Delivery Information
This stage shows when the customer has clicked on UK Delivery or International Delivery. When clicked on International Delivery an extra drop down menu is added with all the countries.
Our focus on input fields is to place the text as a placeholder inside the text fields. This to reduce the space required to explain each field. The only downside when using placeholders is that once you start entering characters inside the field, the explanation will disappear. This in my opinion is worth reducing the height of the page for mobile devices.
The recommended minimum height for input fields on mobile devices is 35px in hight.
Special field types
There are three types of fields you should use in your form. When using mobile devices and if you have changed the type of field from text to tel than the keyboard for your mobile device will show numbers. This will increase the ease of entering in numbers. Same applies for an email address. When changed to email, the keyboard will have an @ sign and or .com or local domain LTDs.
- <input type=”tel” name=”phonenumber” />
- <input type=”email” name=”email” />
Entering the address
Nobody likes to fill out there details in each field, some people have no time, or even worse have no patience. Integrating an address look up feature will improve the usage of this stage in the checkout.
It’s a common issue that customers will enter incorrect information, or forget / skip a required field. When handling errors on mobile devices you need to highlight it correctly.
The best way to highlight errors is to make the input field border red, and let the browser position scroll to the first error. If you only handle errors and not scroll to the first error the customer will not be able to easily understand where the errors are. Not because its logic to us developers means it’s the same with customers.
It is important to include a continue and a back button, so that customers can always edit their details or even navigate to the start of the checkout process and select collection or international delivery. A tip when navigating is to always scroll to top when the content is loaded. (if your loading content via ajax)
On page requirements
- Automatic update for delivery charge based on postal code or country look up.
- Highlighted error borders around input field, scroll to first error.
- Special input fields (tel, email, text)
- Minimum input height 35px
- Add navigational buttons (back, continue)
Stage 4 : Review your order
Always allow your customer to change the quantity in the checkout, make the buttons large enough so that they are easily clicked on with a thumb. In this example I would have recommended the client to enlarge the buttons. But as with every development the client has the final word.
In this instance a customer can reduce the quantity to zero, when that happens you should show a page that the shopping basket is empty and add a link to the homepage so that they can continue shopping.
On page requirements
- Large enough buttons
- When basket is empty, give them the option to continue shopping
Stage Four : Card holder’s details
The details and functionality are exactly the same as stage two, only in this stage I have added the request for registering to a newsletter, adding an email field and auto complete button to copy the information from the delivery address details.
At this stage you could add the credit card details too, but for some UK business they are not PCI compliant or don’t want to be, which means they need to follow certain procedures to ensure that all details entered by the customers are secured and encrypted. In this instance the client didn’t want to be compliant.
This stage is also pretty long with all the fields that need to be filled out, it would be a good idea to separate them regardless to reduce the page length. Having to many fields on one page for a mobile device could have a negative effect and not a positive one.
Stage Five : Credit card details
Here again make sure you make the input type field tel so that the keyboard on mobile devices changes into a numeric only keyboard.
- PCI complient
- input type > tel for numeric only fields
- Never navigate away from the checkout, the chances are high when the exit the checkout that they will never continue.
- Make buttons large enough
- Provide easy to understand errors
- Scroll to the first error
- When using navigational buttons and ajax always scroll to top of the page after clicking the button
- Use the correct input type for each field
- Show the customer that the checkout is secure with images
- Try to reduce the page length
- Auto update delivery charge based on postal code / country
Other articles related to building a mobile checkout.
- Part 1 : The basics on how to build a mobile checkout
- Part 3 : Validating email addresses using jQuery for mobile checkout
- Part 4 : Building a mobile checkout, validating telephone number
- Part 5 : Validating credit cards with jQuery using Luhn Algorithm
- Mobile orientation and mobile detection using jQuery
- Test a mobile site using free tools using your desktop Chrome Browser