CS for Apps - Tip 9: Good Forms Increase Conversions

G'day Tip-of-the-day! Tip no. 9: Good form design increases conversions. A well-designed form during the checkout process can increase conversions by up to 27%.

Complicated checkouts equal cart abandonment

According to research from Barmard, 27% of checkout abandonments (web & app) occur due to a too long and complicated checkout process. As much of the checkout process concerns data collection this means Forms. Or to be precise, poorly designed Forms are responsible for this loss of revenue.


As we’ve discussed in previous tips we can use techniques such as Chunking to design convenient and easy to use interfaces. However, in their enthusiasm to collect more consumer data, app designers can sometimes use the form as an opportunity to harvest additional information, which may not be relevant to the task at hand.

In addition, it’s commonplace for brands to take the web checkout flow and reuse it in a webview served in the mobile app. This approach is really convenient because the e-commerce team only needs to develop and maintain a single checkout process for web and apps. The downside is that apps are not the web, and what works on the web may not work as well in the mobile context.

So here’s a few tips app designers and brands can use to streamline their checkout process forms and improve conversions.


Make extensive use of OPTIONAL fields

If you must collect complementary data make it optional, and put thought into how optional fields are presented in the interface.


Don’t expect users to enter their email address twice

Obviously brands want to avoid hard email bounces, and they really need to ensure they have the correct email address to send order confirmation and delivery notifications. But asking the user to enter the email address twice is twice the work.  Nobody wants to do twice the work!

Users mostly just copy/paste their email from one field to another so email validation is rendered useless anyway.


Use field masking

This is a great example of Chunking. Auto format the field based on an appropriate template. In other words, auto-populate the field with dashes, parentheses and other formatting elements for fields such as telephone number, credit card number, postal/zip codes etc.

Field masking makes it easier for the user to confirm the phone number entered is correct and makes it easier to edit the field contents on small device screens.

There are many techniques used to make form completion easier in mobile apps and many are focused on two key concepts.

Perception of Complexity: ensure that when the form is displayed it looks easy and fast to complete. Do not give the user the perception that the form is complex.

Interaction Cost: the total sum of effort required to complete the form (cognitive and physical) – the more effort required to complete the form. Reduce Interaction Cost and increase conversion rates!


How CS for Apps can help

Use SCREEN ZONING and recurrence tap metrics to examine how the users are engaging with the form. If there is a high tap rate on a particular field examine how it can be optimized to reduce completion time, for example by changing the field to use masking, or remove it from the interface.

Of course, SCREEN ZONING can also be used to see which users drop off from the form, and segments to make comparisons between different user profiles such as first time and recurring.

CS for Apps can be an important contributor to the app designer’s or conversion manager’s optimization strategy and to better understand how users engage with their checkout process and deliver the ultimate UX for their users.

Complete the form to download your guide to CS for Apps.