According to Statista, in 2016, 177.4 million people used mobile devices to shop, research and browse products. This figure is predicted to reach almost 200 million by 2018. And a new report conducted by Addressy cited that cart abandonment has reached a median rate of 66% in the US.
Online retailers who don’t offer a great mobile experience are likely to be missing out on business. It’s essential they keep shoppers their engaged through the entire checkout process. Below are 5 things retailers can do to optimize web forms for mobile shoppers.
- 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.
- Fewer Errors with Type-Ahead Technology – Completing online forms can be time-consuming and according to Baymard Institute, the average cart abandonment rate is 69.23% due to overly complicated checkout processes. On top of this, Mobile Commerce Daily recently stated that 47% abandon mCommerce purchases because the checkout process is too long.One great way to minimize time and effort in the checkout is by implementing a smart address validation tools that give shoppers confidence their packages will arrive on time and error-free. It also helps avoid cart abandonment by keeping customers focused on completing the checkout process.
- 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.
- 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.
- Launch the Relevant Keyboard – Include 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 reduce cognitive load and make 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 recognized as a correct word.