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:
- Smaller smartphone screens allow less space for designing forms and adding explanatory text.
- Touch inputs are less precise and more likely to produce user errors.
- Mobiles are often used in transit, or in situations where users are hurried or distracted.
- Variable mobile internet connections can complicate form filling.
Why Mobile Form Design Strategies Matter
Stats from 2020 highlight the importance of improving mobile conversions:
- Adobe stats show that retailers receive the majority of their traffic from smartphone users, but only 35% end up buying on mobile.
- SaleCycle research (2020) indicates that 68% of shoppers browse on mobile and 56% of online sales are completed on mobile.
- Monetate 2020 shows a big difference in conversion rates: Desktop traffic converts at 1.98%, while mobile traffic converts at 1.81%. Add-to-cart rates are 8.96% on mobile and 4.35% on desktop.
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.
15 Mobile Form Design Examples To Increase Conversions
1. Use a Single Column Design
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.
2. Chunky Form Fields
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.
3. Make Forms Visually Appealing
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.
4. Break up Longer Forms
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.
5. Show Progress Indicators
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.
6. Minimise the Number of Form Fields
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.
7. Provide Clear Feedback and Validation
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.
8. Clear and Concise Error Messaging
People will make errors as they complete forms, but this needn’t be an issue if error messages are useful. Error messages should:
- Be easy to notice and understand.
- Highlight the form field where the error has occurred.
- Provide clear instructions on how to fix the error.
9. Anticipate Common User Errors
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.
10. Show Suitable Input Keyboards
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.
11. Place Form Field Labels on Top
Placing form field labels on top is easier to read and creates more room for form fields on a mobile screen.
12. Use Clear and Well Defined CTAs
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.
13. Use Microcopy Where Appropriate
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.
14. Add Autofill Where Possible
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.
15. Provide Mobile Friendly Shortcuts
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.
.jpeg)
