Optimize mobile forms for conversions

Contributors

@andre-luiz-nunes-vieira


Business Benefits

Increase your signup rate.


Check how your current form is performing in Google Analytics - record KPIs such as open rate, completion rate, and exit rate.

Identify the number of times the form has been completed in the mobile version versus the desktop version.

If the completion rate is lower for the mobile version, take note of the difference.

Remove any unnecessary fields and make sure general best practices have already been implemented.

  • Don’t ask for information that won’t be used. Consider whether you need things such as surname, ZIP code, and phone number.
  • Display the expected input format in your field masks.

  • Show an appropriate keyboard for each field. For example, fields that only require numerical inputs should exclusively cause the numerical keyboard to appear.
  • Validate the user input inline when focus is lost from the currently selected field.
  • Offer autocomplete suggestions whenever it makes sense.

Adjust the form’s aspect ratio to fit the screen of a mobile device in portrait mode and design your form using a single-column layout.

Create a separate form to be displayed in portrait mode on mobile devices.

If your form is long and requires scrolling, break it down in multiple steps to minimize cognitive load.

Write form labels using all caps and use 16 px as the font size on the body copy for optimal reading.

Adjust the height of any buttons to at least 7 mm in the middle of the screen, 9 mm along the edges and at least 12 mm in the corner of the screen.

Replace dropdown selectors with steppers - selectors containing + and - buttons - sliders or other elements to make selection simpler.

For example, radio buttons, or checkboxes in cases where more than one option can be selected.

Test the form after you have added all the elements, using A/B testing or user testing.

  • Use a big enough sample size to get better insights.
  • Deploy both forms (original version and improved version) and test on both Android and iOS platforms. You can use mobile device simulators to check devices that your business doesn’t have access to.

After implementing the new mobile form, check its completion rate against the desktop version and compare to your original figures.

Last edited by @hesh_fekry 2023-11-14T11:50:27Z