When designing real-time authentication systems, we often forget: “device” is the context of the user’s first screen experience. The verification logic of mobile and desktop devices, and even the prompt method in accessibility scenarios, have completely different “tempers”. In this part, let’s talk about it – don’t shoe the PC set into your phone, let alone make visual cues a riddle game for visually impaired users.
Mobile verification experience
The biggest problem with form verification on mobile phones is often not technical ability, but “screen space”. While it may sound like a minor issue, it’s actually one of the main culprits of the user experience crash. The screen of the mobile device is inherently small, and if your prompt information is just covered by the soft keyboard and the user cannot see it at all, then no matter how reasonable your design and the verification logic are, it will be in vain.
A very common mistake is that designers habitually place error prompts below the input box, making it look clear and closely related. However, once the user starts typing, the soft keyboard pops up, and the prompt below is completely blocked. The user only saw a “mobile phone number” field on the screen, and the information below disappeared, as if nothing had happened. The system is actually quietly prompting “the format is wrong”, but the user cannot receive it at all, so there will be a typical user psychology: “Why is it wrong again?” “What am I wrong with?” “Is the system stuck?” ”
In reality, this situation of not seeing the prompt is very easy to trigger repeated trial and error by users. They have obviously modified the content, but there is no clear feedback guidance, so they can only guess and make blind changes, and after trying several times, they still fail, and finally have to exit the page. In this scenario, the user is not stuck on the verification logic, but is stuck “invisibly”.
This also tells us that the verification design of mobile terminals is not only a “right or wrong” judgment logic, but also a matter of information display and guidance strategy. The visibility of information under space constraints should be fully considered when designing. For example, try to make the prompt appear in the visible area above the keyboard in key fields such as mobile phone number, ID card, etc., and combine it with other feedback methods (such as color changes, slight animations, vibration feedback) so that users can still receive error messages even with limited attention.
At the same time, it is also necessary to pay attention to the interactive characteristics of mobile users: the fingers are thicker than the mouse, and the operation is easy to touch by mistake, so the touch area of the input box and prompt icon should be large enough to avoid misoperation; The font size should also be moderate to avoid displaying abnormalities on different models; The interaction response should be rapid to avoid user misjudgment caused by delay.
To achieve these three challenges, product managers will only continue to appreciate
Good product managers are very scarce, and product managers who understand users, business, and data are still in demand when they go out of the Internet. On the contrary, if you only do simple communication, inefficient execution, and shallow thinking, I am afraid that you will not be able to go through the torrent of the next 3-5 years.
View details >
In the final analysis, the key to mobile verification design is not to deliberately set up obstacles for “error prevention”, but to help users successfully complete tasks, reduce confusion, and correct errors in time under limited field of view and operating conditions. After all, “I changed it for a long time and you didn’t say a word” is easier to make users give up than “I lost wrong”.
Desktop validation design
Compared with “cutting the screen gap to do design” on the mobile terminal, the form verification on the desktop side is much more generous. A larger screen and more space mean that designers can freely provide feedback in a variety of subtle and non-intrusive ways. Whether it’s tooltip bubbles, color changes, border highlighting, or gentle animation cues, the desktop gives you an almost complete stage for interaction, and the design freedom is simply high enough to make you want to applaud.
For example, if a user enters the wrong address in the email field, you can gently pop up a small prompt bubble next to the input box: “Don’t forget to add the @ symbol”. This prompt neither interrupts the user’s operation nor creates a sense of oppression, but is a feeling of “I am by my side to remind you softly”. If the error is structural, such as a corporate email must end in .com, you can take it a step further: when the user hovers over the red exclamation mark icon, expand the detailed description: “Please use the company email ending (such as name@example.com)”, or even fix the ending section in the front-end logic and let the user fill in only the username section. These methods can reduce the burden of understanding and operation for users.
What’s even better is that when users fix errors, the system can immediately give positive feedback through green border highlighting, ✓ icons, soft animations, etc., giving people an instant sense of “I did it right”. Just like the teacher smiling and nodding when doing a question, users will involuntarily continue to move forward and be full of motivation. This kind of “encouraging feedback” is much warmer than the traditional “you are wrong” and can also improve user confidence.
The most important thing is that these design methods areInstant feedback but not interruptionIn other words, they do not affect the user’s current operation flow, do not require pop-ups, and do not force interruptions in the input rhythm. This is one of the biggest advantages of desktop experience design.
Of course, although the desktop design has a lot of space and tools, it is not the more flashy the better. You can add some animation, but don’t let the prompt pop-up fly around; You can use color to accentuate it, but don’t make it a disco with colors. One principle is simple:Be professional, restrained, and make people feel “helpful”, not “intrusive”。
In short, desktop form validation is not only “easier to design” than mobile, but provides richer expressions to “convey information, guide actions, and motivate users”. If you can design these small feedback points to be natural, smooth, quiet and just right, it is a textbook-level user experience upgrade. This instant, rather than interruptive feedback is a natural advantage on the desktop. As long as you don’t over-animate and don’t be too sexy, everything can be professional and friendly.
For example, you can do this:
- When the user enters the wrong email address, a small bubble will pop up next to the field, telling him “Don’t forget to add @”;
- When the mouse hovers over the red exclamation mark, a detailed description pops up: “The company mailbox must end in .com”, or the .com is fixed on the frontend.
- After the user corrects the error, the input box highlights a circle of green and adds a ✓, which instantly makes people feel “I’m great”!
Accessibility design
When many designers do form verification, their first reaction is: “Add a red exclamation mark, and then a line of small print prompts, OK, you’re done!” “This is really a very straightforward and effective design for visually normal users. But we must not forget that there is still a large group of users in this world who do not rely on “seeing” to obtain information. For example, visually impaired users rely more on screen readers to “listen” to web content.
Think of this scenario as a user wearing headphones to “listen” to what a web page is saying, but you hide all the key cues in colors and icons, completely without any sound or semantic structure. The experience is like “the other person suddenly starts talking dumb when listening to cross talk” – the listener can’t keep up with the rhythm at all. As a result, users don’t know what is wrong when they are wrong, and they don’t know if they have changed it, and the whole form becomes a silent maze.
To avoid this, we need to introduce some in form validationKey accessibility design practices.Here are a few very practical and uncomplicated practices:
- Add the previous attribute to the input field that failed validation to tell the assistive technology: “This field is currently problematic”. When the screen reader focuses on this field, it automatically alerts the user that “this is not the right place”. Let the screen reader know: I’m going to read this error message out now. In this way, even if the user cannot see the red line, he can understand what is wrong through hearing.
- Semantic structure embedding hints:The error message can’t just be a red decorative block, it must be structurally marked as “important information”, or the prompt must be inserted into the form label structure so that the reader will “notice it” instead of skipping it as irrelevant.
