ften, after installing a mobile app or while purchasing goods on a smartphone, users are asked to fill out a form. As they try to get through this stage faster, they often make mistakes. You need to create a well-structured questionnaire with a convenient error notification. This work is the designer’s responsibility.
In this post, we are going to talk about how to validate forms correctly and design apps that are convenient for users.
Structure
The first thing that needs to be considered while creating validated forms is a clear structure. The designer should understand that users are not paying much attention to the visuals of the app at this stage, but instead on the convenience of filling out the forms. You need to keep yourself from choosing bright colors and adding lots of icons, as these will confuse people and increase the time to study the form.
To make the process as fast as possible, you need to remember the following rules:
- Ask only about important things – San Francisco UX design agencies always put themselves in the user’s shoes and determine which form fields are important to work with your app and which are better not to mention. Avoid unnecessary items, and if you still have it, mark the main fields with asterisks.
- Arrange the correct order – Think from the user’s point of view. If you don’t know where to start, check out the competitors’ forms. But logic is the priority in most cases. Anyone will find it strange that they are asked for a phone number and only then their name.
- Group things – If the items in the form are divided into categories, it is better to group them. It is more convenient for users when they are separately asked for personal information (name, gender, age) contacts (phone number, email), preferences, interests, and other data.
Multi-step form filling
On some apps, designers do not place the full form once but split it into several steps. This is not always effective, and whether you need to choose this method depends on the target audience.
It is better not to use the multi-step form filling for payment forms, as they, unlike registration forms, can have some difference in the apps directed by different developers. Since users do not see the number of fields, it is difficult for them to determine exactly how long it will take to fill out the form. It can also become a repulsive factor.
But if you decide that a step-by-step form is better in terms of design, immediately notify the user about the number of steps.
Fields
This point should be given special attention, as newbies think that stretching the fields is a great solution for filling the space.
Of course, sometimes users need to write a different number of characters into one line (for example, while specifying a name), but there are some points where everything is more obvious. This applies to phone numbers and zip codes, especially if the app is localized for a specific country and the number of items in these fields is the same for everyone.
Dealing with errors
Even when filling out simple forms, the users can make mistakes that are revealed during validation. For notifying the user about this, you need to select:
- The correct time for information
- The correct position of error notification
- The correct language of communication
- The correct notification color
When you inform the users
Often users will find out about the error after filling out the form. This is especially inconvenient for apps because it is more difficult to find a field with incorrect data on a small display.
To make the app as convenient as it could be, it is better to write about the error immediately after filling out the field. But it is not worth validating after each keystroke, since in this case the validation is not performed correctly.
Position
The second step on the road to good validation is the correct placement of the error alert. Do not display the message in a separate field. It is better to write about the problem under or next to the error line.
The language of communication
A designer must be able to give information not only with visual elements but also with words. Error messages can often bring misunderstandings. For example, it may be unclear what exactly needs to be corrected when the “Invalid password” notification is displayed. Better to make the notification more detailed. “Invalid password: Password must be at least 6 characters” looks much better.
You shouldn’t describe the error in detail; on the contrary, it may scare off users.
The color
It should immediately be clear to the users that they made a mistake. Choosing the right color helps with this. For example, it is better not to use green to indicate an error; in such a situation it is better to outline the message in red. But the color must stand out against the background and blend with the rest of the elements.
Summing up
Taking care of users is important while creating forms in mobile apps. The main thing here is not a beautiful visual, but the users’ overall comfort. It is better to think about the original design at the later stages of drafting.
