Why you cannot ignore mobile form design

Mobile form design is hard. It’s been around for about 10 years and we are still learning how to do it right. It’s a gem hidden under piles of garbage of half-baked attempts at form optimization, conversion rate optimization and responsive web design. 

What’s worse? Mobile users are less likely to fill out forms. The main reason? Screens are smaller and keyboards are more difficult to use. In this article, I’m going to walk you through the 11 best practices for designing mobile forms that engage users and increase conversions.

Designing for web forms vs mobile forms 

The first thing you should do when designing your mobile form is recognize that it’s not just a smaller version of your web form, but instead a completely separate entity which must be optimized for the mobile context.

Mobile form design is more limiting because of the small screen size, so you can’t be as creative with your layout. The information architecture of your form needs to be simple and clear, and the fields need to be easy for people to fill out. Although there are commonalities, such as input fields, between the two types of forms, there are some crucial differences that can affect their usability and effectiveness.

There aren’t many examples of a situation where people will choose to fill out a long form on their mobile devices. Therefore, when designing your mobile form, always keep it short and simple unless absolutely necessary.

Best Practices For Designing Mobile Forms

1. Keep it short and sweet

Keep mobile forms as short and sweet as possible. Specifically, limit the number of input fields to three or fewer. The more you ask for, the higher the probability that users will drop off before completing your form.

To make sure you’re asking for only what you need, take a close look at your form’s purpose and identify its core objective. Maybe that’s collecting email addresses in exchange for an e-book download. Maybe it’s capturing sales leads through an appointment request. Whatever your primary objective is, keep it in mind when deciding which fields to include in your mobile form.

When in doubt, leave fields out. If you can eliminate a field and still accomplish your objective, do it.

2. Use auto-complete for fields where applicable

Again, when it comes to form design on mobile, less is more. But while we try to limit the number of fields, there are certain fields that can’t be avoided. For example, the Name field or Credit Card Number are required in many cases.

In this case, how do you make sure they’re as efficient as possible? One way is by using auto-complete. Auto-complete can help forms feel faster and friendlier by providing users with instant feedback as they type.

3. Optimize for thumb reachability

The thumb is the most powerful digit on the hand, and the part of your fingers that works best on touchscreens. In fact, studies indicate that the thumb has a greater range of motion than any other digit. This is why optimizing for thumb reachability when designing mobile forms is crucial to improving your user experience.

To do this, you must pay attention to where users can comfortably hold their device with one hand, identify the common areas for thumb reachability and make sure your form fields are not located in regions that are difficult to reach.

4. Use progress-bars to show completion clearly

Clear progress bars can help you increase the completion rate of your forms. People like to see their progress, and clear progress bars help them understand where they are in the process. This is especially important for mobile users with small screens and bigger fingers who might get frustrated if they have to go back and forth between pages.

5. Put the action button at the top of the form

According to a study, the average mobile conversion rate is only 0.1%. To increase the conversion rate, you need to focus on the usability of your forms.

One of the most important factors in form design is establishing a logical flow through the form. If it’s not designed well, users will get confused and won’t fill it out. The best place for the action button on mobile forms is at the top.

Why? Users have short attention spans, especially on mobile devices. If they have to scroll down past many fields and see a long form, they will most likely abandon it.

6. Offer one-click login with Google or Facebook IDs

One-click signups are the holy grail of mobile form design. They’re the easiest way to turn a visitor into a customer, but they’re often overlooked by designers. 

One-click signups let users log in with their Google, Facebook or other account credentials instead of having to fill out a form or create a new username and password.

While you might be worried about losing control over your users’ data, one-click signups can actually help you gain more visitors, boost conversions, and solve one of the most frustrating issues that users face.

7. Choose a good calendar design

Calendar design is a crucial part of designing mobile forms. When you’re working on an app that involves some form of scheduling, choosing the right date picker and calendar can make or break your app (and it might even affect your business).

8. Keep your form labels visible

There are a lot of reasons why you might want to hide form labels in your web forms. You might be going for a minimalistic aesthetic, or trying to save space so that more content fits “above the fold.” In most cases, though, it’s not something that should be done in the name of design.

Here’s why: Visibility is important when it comes to designing accessible web forms. If your labels are hidden, that means they’re also hidden from screen readers — the software used by many people with vision impairments. They may not be able to tell what kind of information they need to enter into each field, and they may not even know how many fields there are on the page.

9. Don’t ask users to prove they are human

If you ask users to prove they are human, they will leave. If you ask them twice, they will leave in higher numbers. And if you do it on mobile devices they will leave at even higher rates.

This means we should avoid the traditional Captcha form field (Completely Automated Public Turing test to tell Computers and Humans Apart) that asks users to enter a word or solve a math equation to verify they are human.

10. Get rid of all distractions

Finally, make sure the focus of the user is just on the form. 

Always present one question at a time. When someone is filling out your form, you should only ask them for one piece of information at a time. This makes the form feel more manageable and easier to complete.

When designing your form, make sure there are no other elements around it that could distract people from completing it. If needed, take the user to a different page with just the form. In some Apple Store websites, when you click “Reserve in Store,” you’re taken to a page with just the form so people can focus on filling it out.

Add voice input where applicable. Voice input is an option on both iOS and Android devices that allows people to speak their answers rather than type them out. While this might not work for every form field, it’s certainly something worth experimenting with if you want to offer something different or unique in your mobile forms

Mobile forms shouldn’t be an afterthought. They deserve just as much love as desktop forms since they account for a significant portion of your conversions.

Read more:

A guide to CTA button colours: How to choose the right one

Static website benefits you cannot ignore

From security best practices for 2023