Tips for Mobile-Friendly Checkout FormsJuly 26, 2017
In today’s digital age, reducing usability hurdles and simplifying your ecommerce site’s “path to purchase” for mobile shoppers is crucial. Responsive web designs and simplified navigation are key to creating a positive mobile shopping experience. Unfortunately, form fields tend to be overlooked in this regard.
A simple but essential part of any ecommerce site, forms allow e-tailers to collect customer information to complete orders and set up user accounts. However, forms can produce frustrating hurdles for mobile shoppers who must manually input information via small touch screens. To keep mobile customers from bouncing off of your site or abandoning their carts, make sure that your website forms abide by these design guidelines:
Minimal form fields
For mobile users, each blank form field is a step in the registration and/or checkout processes. In ecommerce, each step is an opportunity for users to bounce. By reducing the length and complexity of your forms, you reduce cart abandonment rates too. One common mistake is requiring customers to enter the same information for multiple form fields, such as for email and password confirmation. The purpose of repeating form fields is to reduce user-submitted errors – but there are other ways to achieve this. For example, you could make password creation forms visible by default to allow customers to easily see if they have made an error. You can also show new customers the bare minimum of forms for their first purchase, then follow up with additional forms via email.
By streamlining the process of inputting information, you reduce your customer’s exposure to checkout friction. Incorporating autofill features into your forms accomplishes this while also reducing the amount of user errors that come from unassisted manual input.
Streamline form navigation
To make it easier for mobile shoppers to input information and navigate between fields, make sure your forms are vertically aligned. With this layout, users see multiple fields at once and only need to scroll up or down to see more (as opposed to up, down, left, or right with side-by-side form fields). You can further streamline forms by combining single input fields that request related parts of related information. For example, instead of having fields for First and Last name, area code and phone number, or month/day/year (3 types of information, split among 7 fields) – combine them to create a Full Name field, Phone Number field, and Birthdate field, respectively.