This article comes from the Mockplus team, a faster and simpler prototyping tool.
When we enjoy the great convenience brought to our life by mobile apps, we have virtually experienced a variety of mobile form design forms. Form design is the most interactive step with users in mobile application design, including user registration, subscription services, user feedback, questionnaire forms, buying and selling transactions and so on. A good form design can help improve user experience, improve conversion rates, and achieve better marketing results.
Each form page has a specific purpose, either to attract sign-ups or to close deals. Poorly thought out or even wrong design can lead to user churn or failed transactions. Therefore, it is important to understand the basic principles of form design and avoid stepping on land mines when designing.
1. Be logical
Forms are a language for communicating with users. Like any conversation, it should help both sides communicate in a logical way.
2. Use a single column design as much as possible
Multi-column forms are easy for users to miss filling out and lose focus on completing them. The single – column form is more efficient than the single – column form.
3. Reduce input
The longer and more complex the form, the less likely users are to complete the entire form — especially on a small screen. Minimize the number of fields you enter to make your forms load faster, especially if you’re asking users for a lot of information and keep your forms as short as possible.
4. Provide appropriate input methods
Different keyboards are required when you enter your account, password, email address, nickname, etc., to minimize input errors and help users fill in quickly.
5. Avoid using labels as placeholders
One design pattern has labels placed as placeholders in input boxes that disappear when the user clicks on input. While this design is simple, it can also cause problems when users forget what fields they need to enter.
Mobile terminal form design case appreciation
1. Dropbox by Sam Atmore
Design principle: login and registration page rotation display
Clear CTA hints
In Sam’s login/registration form design, the logics for login and registration are very clear.
One is a single column of alternative form design. Before starting to use the App, users only need to select one of the two options and proceed to the next step as prompted by the label. Even if it’s a mistouch, you can select another option with a simple scrolling effect.
Secondly, the CTA button on the login and registration page is very clear, so that users can clarify the intention and function of the behavior, which has a strong guiding role.
2. Location Switching – by Nimasha Perera
Design principle: Intelligent automatic fill options
More and more technical elements are integrated into form design. For example, with the automatic location function, information can be intelligently filled based on the current location. This operation saves users time and effort by eliminating the need for location selection and currency conversion. But in the traditional positioning form design, facing the position switch, there is often a long list of city names, often dazzling.
2. Form Validation – by Emmanuel Torres
Design principle: Visible prompt message
In the process of login or registration, the ideal state is to complete the information and submit. But mistakes are inevitable in practice. Therefore, our form design needs to take into account the visible and recognizable information prompt, timely remind users of information filling errors. Instead of telling them they’ve made an error after they’ve filled out all the information.
4. Show/Hide Password – by Claudio Scotto
Design principle: visualization of password prompt and forgotten password prompt
Another problem users often encounter is forgetting passwords, as most password entry fields are masked for security reasons.
The recommended action is to add a “Show password” check box or icon next to the password field. Once users click on it, they will unblock passwords and see where they are wrong. This design is perfect for mobile keypads.
5. Explain Everything by Anny
Design principle: Label design icon
One of the ways to design mobile forms is to turn labels into ICONS, which makes the screen more flexible and concise. Because of the prompt function of the icon, when the input box has input content, the user can clearly know what field has been entered. The bottom of the multi-platform associated registration method also provides users with a more convenient way to register. Make it easier for users to complete application registration. The Mockplus prototype combines the two and is also a smart form design choice.
As a prototyping tool for both mobile App design and web project design, Mockplus has a unique advantage when it comes to form design. The elements needed for form design can be easily found in software. For example, placeholders, ICONS, input boxes, numeric keypads and so on.
Conclusion:
Users’ hesitation is inevitable when filling out mobile forms and web forms. As a designer or developer, learn to make this process easy and easy, achieving the goals you set is the ultimate goal. Form design should be a strength, not a weakness. A highly targeted form design, intimate and meticulous details and experience, persistent improvement and adjustment, efficient and fast submission, smooth flow, these are the appearance of excellent forms.