This means that online retailers who still aren’t offering a great mobile experience, could be missing out on masses of business, eliminating an audience that is likely to be the future of ecommerce. So, it is essential that online retailers consider what keeps shoppers on their page, and what it is that is driving them to abandon the checkout. Here are 5 things you can do to make sure your web forms are optimised for mobile shoppers.
1. Launch the relevant keyboard
One of the most important things to consider when optimising forms for mobile, is including the correct attributes in the HTML code to get the most appropriate keyboard for the input format. Make sure that the field is tagged properly to allow a numeric keyboard when phone number data is required, and an alphabetic keyboard for when address data is required. This reduces cognitive load and makes the process of entering information smoother.
Another tip is to stop the mobile browser from auto-correcting words. This is important in cases where, for example, a street name is not recognised as a correct word.
2. Save on typing with type-ahead
Completing online forms can be time-consuming; not an ideal situation for time-strapped customers. According to Baymard Institute, the average cart abandonment rate is 69.57%. Furthermore, over a quarter of those who abandon do so due to a long or complicated checkout process.
One great way to minimise time and effort in the checkout is by implementing a smart address validation tool that allows the shopper to search any part of an address, and predict the address they are searching for, bringing up accurate matches, even when typos are entered. This helps keep customers focussed on completing the checkout process.
3. Get the size right
We all know that cell phone screen size can be problematic at times. This is especially true when entering details on web forms, and can result in mistakes being entered, or accidentally clicking links that can take us away from the checkout.
As mobile devices become even more important in online shopping, retailers need to make sure they are addressing this issue, and ensuring that shoppers have an equally great customer experience, whether shopping via mobile or desktop. This can be achieved by automatically resizing form fields and buttons for mobile screen sizes.
Using a single-line address search field not only facilitates the mental model of searching for an address, but means you don’t have to take up lots of space on your form with fields for each line of the address. The form appears simpler and less intimidating as a result.
4. Use top aligned fields and labels
Positioning labels above form fields is often more effective than positioning them alongside the fields as they are easier to view on mobile devices. This removes the need to scroll or zoom in.
It is important to make sure fields are labeled, allowing customers to understand what information they need to enter. This can be further improved with the addition of an example, which can work particularly well when you require a specific format, e.g. MM/DD/YY.
5. Use progress bars
By allowing your customers to see which part of the checkout process they have completed and what is still to come, not only do you remove frustration, letting them know how much longer it will take, but you also allow them to prepare for the next step. This enables them the chance to get payment details or gift vouchers ready.
Find out how Loqate's real-time address lookup can help increase your mCommerce conversions.
