Designing More Efficient Forms: Assistance and Validation
by Nick Babich
In an ideal world, users will fill the form with necessary information and finish their job successfully. In the real world, users often make mistakes. The momment when users make mistakes, the form assistance and validation come into play. The goal of these actions is to explain how to fill out the form and to ensure that the user will successfully provid necessary and properly formatted information .
In this article we will overview the assistance and validation and explore different validation and feedback techniques, methods and approaches.
Assistance and Help
You should never have to explain to users how to fill out a form. It might sound pretty weird, but the main point here is a very obvious— your form should be intuitive. If the form is too complicated to fill out, then redesigning it is your only option. Thus, input fields which require help should be kept to a minimum or avoided completely, especially on mobile.
1. Text to Accompany Form
Accompanying text should be used only where it really needed. As a rule of thumb, do not exceed 100 words of explanation.
Concise help text next to input fields is most useful when.
Unfamiliar Concepts
When users face unfamiliar concepts and might wonder “What does it mean?”
Specific Data
People might question why you are asking for specific data (User might wonder “Why the app needs to know this information?”)
Concerns About Security or Privacy
People may be concern about the security or privacy of their data and you need to reassure them that the data won’t be shared with 3rd party sources.
Helpful Information In Context
Sometimes you need to have relevant, in-context information ready to assist users to move through the form easily. For example, when scheduling dates, users appreciate context like a monthly calendar to identify days of the week. Visible calendar will prevent users from the need to leave the app to check the smartphone’s calendar. It also reduces the risk of the user becoming distracted by another task.
2. Dynamic Help
Many forms use unique formats or have input restrictions for their fields. Showing the information about input restrictions prominently isn’t a good idea— the amount of help text can quickly overwhelm a form, making it appear quite complex. For forms like this, it make sense to consider using dynamic contextual help.
Show help text only where users really need assistance.
A proper way of integrating help is to show it next to the field when the user focuses on it so that it is always in context.
Automatic Inline Help
Automatic inline help reveal itself when a user clicks or tabs to an input field. Usually it has a strong visual connection between input fields and associated help. A potential downside of this type of dynamic help is that people won’t know that this help is available until they begin to fill out the form.
User-Activated Inline Exposure
User-activated inline help becomes visible at the moment when users will need help. This method usually use question mark icons to let the people know the help is available. A person can either click or point to these triggers to reveal relevant help text.
This approach has following benefits:
- Reassure users that the help is available but let users activate it only when they need it.
- Help control is located in the close proximity to the field. User’s eye won’t travel to another part of the screen to get help.
Visual Noise
Dynamic help approach has one major downside — adding help text to a form in this manner can cause content below be covered by the overlaid help text. As you see in example below, 3rd section is completely invisible for the user.
Validation and Feedback
Form validation is all about having a conversation with users —good validation guide users through the difficult times of uncertainty. The output of this process is emotional. People will make mistakes, but the way your design will handle them will have either positive or negative emotional impact on your user. When done right, it can turn an ambiguous interaction into a clear one.
The primary principle of good form validation is this: “Talk to the user and tell when them what is wrong” Generally speaking there are four important elements that good form validation consists of:
- Right time of informing about errors
- Right place for showing the message
- Right color for the message
- Clear language for your message
And all these moments have one major goal — avoid confusion.
Right Time (Inline Validation)
Users dislike when they go through the process of filling out a form only to find out at submission, that they’ve made an error.
The right time to inform about the success/failure of provided data is right after the user has provided the information.
And the solution for this is real-time inline validation becaue it immediately informs users about the correctness of provided data. This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors.
This validation shouldn’t only tell users what they did wrong, but it should also tell them what they’re doing right. This gives users more confidence to move through the form.
However avoid validating on each keystroke because in most cases you simply cannot validate until someone has finished typing their answer.
Last but not least, this type of validation works especially well for less obvious answers, such as picking a unique username or a strong password. Twitter is an obvious example here. On the screen below you can see that the form informs me that this email is already in use and offer me some options (either to login or recover my password).
Right Place (Rule of Thumb)
Proximity is another important tool. When you’re wondering what place to choose for your validation messages, follow this rule of thumb — always place the message in the context of action. If you want to inform the user about an error occurring in a particular field — show it next to the field. Facebook’s form is a great example of well placed validation message.
Right Color (Intuitive Design)
Color is one of the best tools to use when designing validation because it works on an instinctual level.
Use red to error messages, yellow to warning messages, and green to success messages.
But make sure that colors in your digital interface are accessible for your users, it’s a really important aspect of a well executed visual design.
Clear Message (What Happened)
Speak the same language as your users. Your validation message should clearly state:
- What went wrong and possibly why.
- What’s the next step the user should take to fix the error.
Avoid using technical jargon. Unknown terms or phrases will increase cognitive load for the user.
A typical error might state that “the email is invalid” without telling the customer why it’s invalid. They user might wonder “Is that because I made a typo? Or email address is occupied by someone else?). Straightforward instructions, or guidelines, make all the difference.
Do not keep your users guessing, save their time by telling the root cause of the problem.
In example below you can see good example of inline validation which provides a solution for fixing a potential problem.
Even Before Validation
Password rules. Tell users what your password rules are up front, rather than making them guess and wait for validation errors.
Don’t use fixed input format. The most common reason for forcing a fixed format is validation script limitation (back-end can’t determine the format it needs). This is a purely technical problem and it shouldn’t be a problem for your users. Rather than forcing the format of something like a phone number during user input, you should make it possible to transform whatever the user entered into the format you want to display or store.
Conclusion
Form assistance & validation design is tricky—many tiny tweaks can help the user finish the form as fast and as easy as possible. No matter how boring it is for us, designers and developers, we still need to invest time and effort in making validation the strong part of our products rather our weakness.
Thank you!
Follow UX Planet: Twitter | Facebook
Learn how to design better products
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
