Validation Form That You Need to Know
Okay at first before we start i just inform you that this article only cover UI/UX for validation form from Developer perspective. In this article we focus on form validation considering its values as a part of interaction design techniques.
Form is common usage for input data UI, this is core usage for every device, u can say for Login screen, Register screen, basic information they will need form to make user fill their data. But how this simple cause many confusion for developer or maybe UI/UX designer? Should form validate user data while typing or when they tap submit button? This main concern can divided into two part, “Before Submission as a Inline validation” or “After Submission”. let’s start to analyse.
Before submission/Inline validation
I bet you already know about this, this form will told you warning directly when you typing, Example in Login screen UI for Email or Password, it will validate your email pattern is correct or not in realtime, same as for password will validate minimum character/contain one uppercase/ Contain non character. Inline validation on Errors and success informs wrong input and correct data, if no error happen it will turn green tick near field.
Inline Validation method make submit button disabled, so user must validate all form before the submit button enable. Be careful to disable the submit button until all validation is correct, user might stuck the screen because the error is not clear enough, and user cant do anything about that.
This classic List Apart article by Luke W was influence on people attitudes towards inline validation. In the study conducted, they found that when completing a form with inline validation, participants saw
- a 22% increase in success rates,
- a 22% decrease in errors made,
- a 31% increase in satisfaction rating,
- a 42% decrease in completion times, and
- a 47% decrease in the number of eye fixations.
Pros using inline validation
- Reduce Completion time and error 22%, based on test run by Etre, London usability firm.
- Instant Feedback, users notified their mistake one by one, 90% user agree that prefer notify their mistake as they type. Instead receive a ton error message when user tap submit better focus on one by one error each input.
- Easy to track Progress, Motivate user confirm one by one each input it provide satisfaction each user type correctly.
Cons using inline validation
- Unfriendly Flow, this is the trade off for realtime feedback, happen for long forms, user will have confusing for next form filling or correcting the current error. There are for it will slow down user for filling form, increases cognitive effort, and generally reduces satisfaction.
- Waiting error response, if error response must validate by server it must took time(might overload the server because always trigger validate), user think that it already correct but the state validation is still on progress, so user go to next form. but after validation complete it will break user flow, user confuse they think it already correct but it show error, then user must correcting the previous one.
- Error Mistake always trigger. This is common situation when user input their email. the error mistake will shown until user fill the correct email pattern. After that if you tend to ignore it and go to next form it will be queue error mistake that need to be solve.
After Submission/Tap Submit
This is the classic one and also simple one, the validation only occur when user tap submit. Basically user freely to type even they are making mistake. The submit button always enable although user not fill the form, so it always give user feedback user user tap the button. This easy for product development but worse for user experience.
Pros After submission
- Fluid Flow, it give user freely input and respect user concentration instead give warning message instantly. Because of that user have freedom to fill without back into previous one, it linear from start until the end of the form without break the process.
- Reduce Mistake, after tap button would fewer mistake and prevent change blindness. user will focus on the error after submission, and it will one by one solve the error, enhancing attention into the detail one.
- Server friendly, this occur when form is validate using response from server, so instead checking validation each user input to server it only once request when user submit the button.
Const After Submission
- Bulk Error shown, all error shown in one moment, it might user frustation and overwhelming, user will confuse, they need solve from top to bottom or in vice versa. It also you must consider the warning shown, some platform like mobile app, only show one warning in one pop up, so in one space it will take long warning message if user had multiple mistake.
- Close form, Because the error only trigger once after tap submit some user might fell overwhelming then lead the drop out and close the form, be careful to handle this situation.
Every method have pros and cons, those pros and cons cannot cover in reality situation, I only mention the general situation that face many people especially for my self. So the question which one is the better method for validation? the answer is use those both based your need.
The from is no more than 7 or the first time use the form, you can use the classic one after submission form validation, so give freedom user to fill the form freely. reduce the friction. don’t forget to track error rate. it might give u insight.
For the second time, after you get the data then the error happen to much in certain area of form, move to inline validation. Specific into one form that have inline validation, if this form have high error rate. It can identify if input form is correct or not.
Last but not least, there are 3 type for better communicating errors, please consider rules below when create an error message for user.
- Precise, please create on point message error, don’t create confusion error message, don’t put all error message in one sentence it might reduce the user understanding.
- Empathetic, Explain what went wrong and give suggestion to help user get the correct easily, instead only give the error without any suggestion.
- Flexible, Get the common validation, don’t be too specific with the user input. example avoid user to input country code for phone number or delete the blank space on character, it should be easily user to fill without any obstacle, obstacle must be prevent. if you still argue to some specific format just use masks or clear explanation.