With mobile traffic to websites growing rapidly, it’s important for retailers to reduce friction in order to convert more visitors and avoid shopping cart abandonment. A key area that often frustrates users to the point of abandonment is form completion. During peak times for online shopping, converting users—whether for a sale or through micro-conversions—is essential.
In this article, we’ll look specifically at mobile web form design strategies, to make it easier for sites to convert mobile shoppers. We also provide some mobile form design examples, from websites doing it right and who have a high mobile conversion rate.
Mobile form design can be more challenging than desktop for several reasons:
Stats from 2020 highlight the importance of improving mobile conversions:
These figures suggest that while customers are happy to add items to their cart on mobile, conversion rates lag slightly. Implementing a browse abandonment or cart abandonment solution could help retain users and recover lost sales.
Users may abandon forms for various reasons, from form design issues to a lack of motivation. Well-designed mobile forms ensure that the effort required to complete them doesn’t outweigh the user's motivation.
This is generally one of the best practices for mobile and desktop forms, but is even more important on a smaller screen. Single column layouts are easier to read as users can focus on one column at a time. This approach also makes forms seem cleaner and less daunting for the customer.
Form fields are a harder target on mobile than on desktop, increasing the likelihood of user error when attempting to click inside a field. The solution is to make form fields big enough and with enough space between them so that users can click into them without the risk of error.
If a form looks dull, it can deter users before they even begin to complete it. A simple and easy-to-read form with some useful visual elements looks more professional and is easier to complete.
Long forms can deter users as they can seem like a lot of hard work, but good design can address this issue. Breaking up forms into more manageable chunks can make the task of form completion easier for users. For example, comparethemarket breaks up its home insurance form into five sections.
Progress bars are great to let shoppers know how far through the checkout process or form they are. This can encourage them to keep going, knowing they’re making progress through the form.
If you can reduce the number of form fields by removing unnecessary questions, it reduces the user's workload. Broadly speaking, if a field isn’t essential for completing the quote or purchase, you should consider removing it.
Providing clear feedback at the point where users enter data helps to speed them through the form. It confirms that they have entered data correctly and offers suggestions. Inline validation is better than having users click ‘register now’ and then find they’ve made errors.
People will make errors as they complete forms, but this needn’t be an issue if error messages are useful. Error messages should:
It can also help to anticipate common errors and account for them. Analytics data and user testing can help you identify fields that are tripping users up. One common error is postcode entry. Allow users to enter postcodes in any format (with or without spaces, in lowercase) to avoid errors.
This is an area where smartphone features can help to make forms easier for mobile visitors. Simply showing the best version of the touch screen keyboard for the form field – numeric for telephone numbers, for example – makes it easier for users, reducing the risk of errors and speeding up form filling.
Placing form field labels on top is easier to read and creates more room for form fields on a mobile screen.
Calls to action (CTAs) should be easy to spot, and the wording should make it clear what the next step is – complete purchase, submit quote, etc. It should also stand out on mobile and be large enough to be unmissable, ensuring they’re far enough away from other links to avoid errors.
Text around form fields can be used to explain certain fields and the information required to help users complete forms. Used well, microcopy can help reduce basket abandonment by providing key information at the right time. It can be used to explain why key information is needed and even where to find it, as in this car insurance quote form.
This is another way to save the user time and make mobile web forms easier to complete. It reduces the amount of typing users need to do, again helping to reduce abandonment.
Any shortcuts during form completion and checkout can help make mobile forms easier and increase conversion. Payment shortcuts are an easy win for retailers, as they remove the need to enter payment card details and shorten the payment process.
For example, a cinema checkout that allows users to scan their credit card to populate the fields, and offers the option of Apple or Google Pay, so mobile users can pay quickly with face or touch ID.
