Mobile Form Design: 15 Best Practices and Examples

Forms are an important component of any product – the main tool allowing a person to achieve set goals. They are essential to sign up, buy something, leave a service request, subscribe to an email newsletter, etc.

The following characteristics of mobile devices make it difficult to design forms for them:

• Small screen size;
• Touch input;
• Device use (work in motion);
• Occasional unstable internet connection.

These factors, along with the high cost of audience attraction, mean that specialists must take a careful approach to mobile form design. In this article, we outline best practices, tips, and good examples – all from our experience. Following these principles, you will be able to create simple and understandable mobile forms with which people will happily interact.

1. Single Column Design

When using a single column design, the user’s eyes move naturally from the top to the bottom. This is particularly important when we talk about viewing content on a mobile device.

If the fields are arranged in two columns, the user can easily skip one of them. However, with one column, the order of the fields to fill out is intuitive.

2. Break Long Forms into Several Steps

If you cannot reduce the number of input fields, you can divide the process of filling the form out into several steps and present it as a multi-step dialogue.

You can also show a progress bar so users can clearly see their progress. The benefits of such a bar are mainly psychological, but can be useful.

3. Ask Only the Most Essential Information

The longer and more complex the form looks, the less likely it is that people will want to fill it out. Make it short and simple: adhere to the principle that “less is more.”

Avoid fields and questions which you can postpone or abandon. The best way to avoid mistakes and increase the number of conversions is to simplify the form design as much as possible and have a minimal number of fields.

4. Place Field Names on Top

Captions aligned to the top of the field, and centered, are ideal for displaying on mobile devices. If you place captions on the left hand side, the form may not fit on the screen.

5. Never Use Completely Upper-case Words

Even though such captions attract attention immediately, words written in all capital letters are more difficult to process.

6. Use Masks and Limiters

Masks are useful for fields meant for specific types of data such as phone numbers, credit card data, zip codes, etc.

To prevent a high number of errors, or incorrect data being entered, use the following limitations on the data. Respondents can enter these into the field:

• The number of possible characters;
• Character format (numeric, alphabetic, or a combination);
• Dependencies among fields, etc.

7. Arrange Checkboxes and Radio Buttons into a Column

Checkboxes or radio buttons arranged vertically are easier to perceive. Instead of arranging them in a horizontal line, arrange them as a list, one below the other.

8. Highlight and Explain Errors

One of the worst things that an app developer can do is get users to fill out a form, and then, due to an accidental mistake, make them start it all over again.

If the user makes a mistake, highlight the field where the mistake was made and explain the problem.

9. Offer Options

Users can fill out the form faster if you offer several options from the beginning, so they do not have to think everything over.

There are many ways to implement this feature.

10. Take Input Peculiarities into Account

When making forms for mobile phones, make sure that the fonts, input fields, and CTA elements are large enough. Otherwise, users will find it difficult to manipulate them on the screen.

11. Define the CTA Action Precisely

For example, instead of the text “Yes/No” or “Next” on the button, provide the user with a clearer idea of the further action. Depending on the context, the actions could be: “Sign up”, “Upload file”, “Buy”, etc.

If they understand what will happen as a result of their further action, the user will make a more reasonable decision.

12. Add a Tip Icon

You can hide a short tip (related to the specific field content) under the question mark icon. The tip will be displayed when the user clicks on it.

This feature requires minimal effort from developers, but it can greatly simplify the process of filling out forms for users.

13. Use Toggle Buttons Instead of Dropdown Lists

Toggle buttons can be used when the user has to decide between two values ​​when filling out a form (activating or deactivating a specific feature in an app.)

14. Sliders Are a Good Choice as Well</h3

Sliders can also be used where users are faced with a wider range of options. For example, selecting the price simply by moving the slider from a smaller to a larger value.

15. Use an Autofill Feature

You can reduce the time required to fill out a form by using an autofill feature. For example, on an online store order form, the “e-mail” field can be automatically filled in if, for example, the user has signed in to their personal account or visited the website following the link from an email newsletter.

Another example of the autofill function is getting data on the user’s country or city by using their geolocation data when they book a hotel room.

Conclusion

We hope that this list will help you create really nice and user-friendly mobile forms. In the world of high competition, each component featured in a mobile app is meaningful because conversion and the quality of user experience depend on it.

Simplify the process of interaction with your product, adhering to the principles of simplicity and transparency and avoiding ambiguity. The mobile form design has to be your advantage but not a weak point.