Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

5 Best Practices of Mobile Form Design Examples and Principles

Mockplus Team 86612 Views

Right mobile form design can make a good result. The 5 most used mobile form design principles and examples will help you on user experience and wining market.

When people enjoy the great convenience brought by mobile apps, it has virtually gone through various of mobile form design examples. The mobile form design is the interaction step with the user in mobile application design, including registration, subscription, user feedback, questionnaire forms, purchase, and sales transactions, and so on. A good form design can help improve user experience, increase conversion rate, and achieve better marketing results.

Each form design page has a specific purpose, either to attract registration or to close a deal. Poorly designed forms or even mistaken designs may lead to the loss of users or transaction failures. Therefore, we need to understand the basic principles of form design, to avoid the mistakes in design.

1. Logical clarity

Forms are the language of communication with the user. Like any dialogue, it should help the parties complete the exchange in a logical way.

Mobile Form Design 1 - Logical Clarity

2. Try to use a single column design

Multi-column forms can easily be missed by users and cannot be filled out. The single-form form has a single, direct, and relatively efficient path.

Mobile Form Design 2 - Try to Use a Single Column Design

3. Reduce input

The longer the form, the more complex the user's willingness to complete the overall form - especially on a small screen. Minimize the number of input fields to make your forms load faster, especially when you ask the user for a lot of information. Keep the form as short as possible.

Mobile Form Design 3 - Reduce Input

4. Provide suitable input methods

It’s recommended to provide different keyboards, such as when input account, password, fill in the mailbox, enter the nickname, etc.. That will minimize input errors, help users quickly complete the fill.

Mobile Form Design 4 - Provide Suitable Input Methods

5. Avoid using labels as placeholders

There is a design pattern, it uses a label as a placeholder in the input box and disappears automatically when the user clicks on the input. This kind of design is simple, but it's easy for users to forget what fields they need to enter when they type, and it also creates problems.

Mobile Form Design 5 - Avoid Using Labels as Placeholders

5 Best Mobile Form Design Examples for Better UX in 2018

1. Dropbox - by Sam Atmore

Dropbox - Mobile Form Design Examples 1

Form design principles:

  • Carousel display of landing and registration page
  • Clear CTA tips

In Sam's login/registration form design example, it has a clear logic of login and registration.

At first, a single-choice form design. Before the user starts to use the app, he/she just needs to select one of the two options and proceed with the label prompt. Even if misoperation, another option can be selected with a simple swiping chart

Secondly, the CTA button on the login and registration page is very clear, which allowing the user to clearly define the intent and function of the behavior with a strong guidance.

2. Location Switching - by Nimasha Perera

Location Switching - Mobile Form Design Examples 2

Form design principle:

  • Intelligent auto fill options

Form design is increasingly integrated into technology elements. For example, with the automatic positioning function, intelligent filling of information can be performed based on the current position. This operation saves the user the choice of geographical location and currency conversion process, saving a lot of time and effort. While in the traditional positioning form design, facing the position switch, it is often a long list of city names, often dazzling.

3. Form Validation - by Emmanuel Torres

Form Validation - Mobile Form Design Examples 3

Form design principle:

  • Obviously visible prompts

In the process of login or registration, the user ideally completes the information and submits it. However, in practice, errors are unavoidable. Therefore, the form design needs to take into account visible and recognizable information prompts to remind users of incorrect information. Instead of telling them they have made mistakes after they have completed the information.

4. Show/Hide Password - by Claudio Scotto

ShowHide Password - Mobile Form Design Examples 4

Form design principle:

  • Visualized password tips and forgotten password tips

Another problem that users often encounter is forgetting passwords because most password entry fields are blocked for security reasons. The recommended action is to add a "show password" checkbox or icon next to the password field. Once the user clicks on it, they will unblock the password and view their wrong location. This type of design is simply perfect for mobile keypads.

5. Explain Everything- by Anny

Explain Everything - Mobile Form Design Examples

Form design principle:

  • Iconization of label design

In the mobile form design style, there is a design scheme that is to design labels as icons, so that the picture becomes flexible and more concise. Because of the icon's prompting function, the user can also clearly know what fields have been entered when the input box has been entered.

The bottom of the multi-platform association registration also provides users with a more convenient way to register. That allows users to complete application registration more conveniently. This application prototype designed by Mockplus combines the two factors and is a very wise choice for mobile form design.

As a prototype tool for both mobile and web project design, Mockplus has unique advantages in form design. The elements needed for form design can be easily found in the software. For example, placeholders, icons, input boxes, numeric keypads, and so on.

Mobile Form Design Elements

(Mobile form design elements designed by Mockplus)

Conclusion:

Whether it is to fill in a mobile form or a web form, the user's hesitation is inevitable. As a designer or developer, learning to make this process easier, achieving the set goals is the ultimate goal. Mobile form design should be an advantage, not a weakness. An excellent form design should be highly targeted, have thoughtful details and experience, perseverance in improvement and adjustment, efficient and quick submission, and smooth processes.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com