Best Tips and Principles For Mobile Form Design
- Avoid to use a label as a placeholder
There’s a common practice to use labels as placeholders in the input box that disappear when a user clicks on it. This solution often creates problems for users as it is easy to forget what fields you need to enter. It is annoying so don’t do it. Instead, we would recommend you to design labels as icons. Such iconization of labels helps users to clearly know what fields have been entered, and what still need to be done.
- Always provide effective input methods
In order to help users quickly complete the fill and minimize input errors, we recommend you to provide different input methods, such as when entering the nickname, fill in the mailbox, input account, etc.
- Minimize input
Try to keep your forms as brief as possible. Reduce the number of fields to make your forms load quicker, especially when you ask the users for lots of information (questionnaire forms). Remember: the longer the forms, the less is the user’s willingness to fill them in.
- Use single-column design
The single-form design provides for an efficient, direct, and intuitive order of the fields to fill in. This way makes it easier for the eyes to move from the top to the bottom. In contrast, multi-column forms can easily be skipped/missed by visitors, especially when it comes to viewing them on a mobile device.
- Use intelligent autofill options
Just like any language of communication, forms should help all parties seal the deal in a logical way. Consider using intelligent autofill options to save the users time, say, the currency conversion process, and choice of geographical location. This will significantly decrease the time needed to fill in the form.
- Provide visible prompts
Ideally, the users complete, check, and then submit the error-free data to your form during the process of registration or login. But in reality, errors are unavoidable. Instead of telling them of the mistakes they made, it is better to inform users of incorrect inputs right away by utilizing recognizable and visible information prompts. If a user makes a mistake, highlight the field and explain what’s wrong.
- Use limiters
These features are useful for fields meant for certain types of information, such as zip code, credit card data, phone number, etc. The following limitations can minimize most incorrect data being submitted:
- Dependencies among fields
- Format of characters (alphabetic, numeric)
- The limit of possible characters
- Use sliders
Sliders are a good choice if users are tasked with a wide range of options. For example, in order to select the price, they will simply need to move the slider instead of going all the way of typing it manually.
- Consider input peculiarities
When making form designs for mobile, ensure that the CTA elements, input fields, and fonts are large enough. In the other case, it may be difficult for users to manipulate them on the screen.
- Always offer options
Limit the need for users to think everything over. They will fill in the form faster if you provide several options from the start.
Read also: MINIMALIST WEB DESIGN: HOW TO GET MORE WITH LESS?