Forms, though small, play a crucial role in digital products, directly impacting conversion rates, retention, and data quality. This article delves into the evolution path of form verification systems, from the early days of “submitting before saying wrong” to today’s real-time feedback and intelligent verification, showing how technological advancements can enhance user experience.
1. The role of forms in digital products
We click on various apps and websites every day, whether it is registering an account, logging in to a platform, or filling in an address when shopping online, submitting a resume to find a job, we can hardly bypass one thing – forms. It’s like a “checkpoint” between you and the system, and you hand over the information, and it will allow you to enter the next level.
For example, have you ever had the experience of “I just want to buy something, but filling in an address is like taking a civil service exam”? If you get stuck in a field and can’t survive, and finally close the page and give up the purchase – this means that if the form experience is not good, the business goal is likely to be cold. Don’t underestimate this page of the table, its experience directly affects the following three major events:
a. Affect the conversion rate
For example, a registration form with many fields and logic wraps, and the user gives up halfway through, then a potential customer you could have obtained will fly away. On the contrary, if the registration is silky – mobile phone number, verification code, one-click submission, clean and neat, the conversion rate will rise steadily.
b. Affect the retention rate
You might not think that forms can also affect whether users want to stay. After a user is successfully registered, they may need to improve their information, bind payment methods, set preferences, etc. If the form is thoughtful, users will feel that “this product understands me”; On the contrary, even if the previous conversion is successful, the follow-up may be lost due to cumbersome processes.
B-end product manager’s ability model and learning improvement
The first challenge faced by B-end product managers is how to correctly analyze and diagnose business problems. This is also the most difficult part, product design knowledge is basically not helpful for this part of the work, if you want to do a good job in business analysis and diagnosis, you must have a solid …
View details >
c. Affect data quality
This is something that many people overlook. Poorly designed forms, such as without formatting validation and vague field descriptions, can easily collect a mess of data. You said to ask users to fill in “contact information”, some people write “123”, some people fill in WeChat accounts, and some people leave a sentence “you guess”. You can’t use this data at all, and you have to clean it manually.
In general, forms are small but have a big effect. It is more like a bridge, if the bridge is well repaired, the user can go smoothly, and the data is received accurately, the business can be rolled out. UltimatelyA seemingly inconspicuous form actually hides a series of “dominoes” such as conversion rate, retention rate, user satisfaction, and data quality.
2. Verify the evolution path of the system
The evolution of form verification is, to put it bluntly, also the process of user experience from “don’t make mistakes” to “I’ll help you not make mistakes”. From “I think you are wrong” to “I guess you are wrong, I will help you correct it first” is now verified. Good validation is not only about reducing errors, but also about improving efficiency, building trust, and improving conversions. Let’s break down this process step by step.
2.1 Saying the wrong thing after submission can be called “hindsight verification”
The early verification method was extremely crude: you filled in a bunch of information, clicked “Submit”, the page refreshed – and then the system told you: “The email format is wrong” or “The phone number is wrong”. Not only is the mentality exploding, but the content filled in is gone, and the experience is extremely bad. It is likened to form validationStone Age。 Back then, the conversation between users and systems looked like this:
User: I painstakingly filled out 15 fields and finally clicked “Submit”!
System: Unfortunately,The email address is in the wrong format。 Also, your mobile phone number is not right.
User:Okay, I’ll change …… Huh?! Why is all the content I filled out!!
That’s right, in the early days when the web page was still <form> a shuttle, the verification was “unified inspection after submission”, and if it failed, it would be recalled. There is no prompt, no highlight, no memory, and a mistake is “in vain”.
Real Case: Government Website Form “Extreme Memory Test”
In the early years, some government websites, such as industrial and commercial registration, settlement application, etc., once you have a certain information format wrong or missing, the entire page will be reloaded after clicking “Submit”, and all input content will be cleared, and you have to “rewrite it from memory”. Users are like taking the college entrance examination, not only to be familiar with the format, but also to memorize the information, and some people even open two windows to prevent data loss. This kind of experience is like the teacher tells you “the name is not written” after you submit the paper, and does not let you rewrite it, and directly gives zero points.
2.2 Instant feedback and experience entering a “civilized society”
After entering the Web 2.0 era, AJAX (Asynchronous Loading) technology was born. This means that there is no need to refresh the page, and the form fields can “move” on their own. Verification is no longer a “final trial”, but a “timely accompaniment”. After you enter a field, the system will immediately give feedback, such as the email format, the length of the mobile phone number, and whether the username is available…… Summary in one sentence: As soon as you think wrong, the system will gently remind you.
Real case: The “little cleverness” of the Weibo registration process
On the early registration page of Weibo, you enter your username, and the system immediately tells you that “the username has been registered”. The best thing is that it also automatically gives several alternative suggestions, such as: “Handsome Zhang San 001” and “Handsome Zhang San 002”, even if your head is short-circuited for a while, you can click one and go. High efficiency, good experience, and a bit of human touch. This kind of verification method has changed from “error correction” to “collaboration”. It doesn’t interrupt you, but it never leads you astray.
2.3 HTML5 and form libraries make verification smooth and smart
In the past, when filling out forms on web pages, if you wanted to check whether you filled in the form correctly (such as email format, password strength), you had to rely on programmers to write a lot of JavaScript code, which was very troublesome.
Now, the browser natively supports basic validation mechanisms such as required, pattern, type=”email” – it can automatically verify format, null, and number range without you writing JS:
- required: It can automatically check whether the required fields are empty.
- type=”email”: It can automatically check whether the email format is correct (whether there is @).
- pattern: You can check according to the rules you set (for example, the phone number must be 11 digits).
- Digital range check: For example, the age must be between 18 and 99.
- Benefits: No need to write code, the browser can do these basic checks on its own! It saves a lot of trouble.
But basic inspections alone are not cool enough. Popular frameworks like React and Vue, along with dedicated “form butler” libraries (e.g., Formik, React Hook Form, Vee-Validate), make form validation super smart and easy to use:
- Check while typing (real-time verification): You just typed a wrong word, and a prompt pops up next to it (such as “password is too short”), so you don’t have to wait for submission.
- Fields have become smarter (field linkage): For example, you must fill in the credit card number first, and enter the “expiration date” box before you can click (to prevent random filling).
- Can “call” to ask the background (asynchronous authentication): After filling in the mailbox, it immediately secretly asks the server, “Does anyone use this mailbox?” “, and tell you the result right away.
- Prompts are friendlier (error prompt mechanism): not just pop up red letters. Possible: the box entered incorrectly will automatically turn red; The error statement is clearer; You can also switch between different language prompts.
In fact, we can’t avoid one keyword in the end: real-time verification.
It can be said that it is a “benefit” of technological progress, so that we don’t have to wait until the point of submission to find out that it is a mess. As soon as I finished losing a field, the system immediately jumped out: “This doesn’t seem right~” – saving time and worry, quite intimate. But everything is advantageous and has pitfalls. If the reminder is early, the user will feel annoyed; If the reminder is late, the effect will be discounted. If you don’t pay attention, users will feel that they are being “stared at by the system” to fill out the form, and their hearts will be hairy.
Therefore, real-time verification is not only a convenience brought by technology, but also a “difficult problem” in design. If you want to use it well, you can’t just rely on the code to run fast, but also rely on the experience to control it accurately.
