Validación en tiempo real, buena o mala UX
Tengo un formulario de registro donde realicé una validación EN TIEMPO REAL cuando el usuario comienza a escribir como ves en la imagen.
No sé si esto perjudica la experiencia del usuario o no, y tampoco encontré un recurso sobre este tipo de validación.
Respuestas
Para citar de nngroup.com :
7. No valide los campos antes de completar la entrada
...
Puede resultar molesto ver un mensaje de error antes de que se le dé la oportunidad de terminar de escribir.
La validación no debe comenzar antes de que se complete la entrada
Cuando el usuario comienza a ingresar un valor correcto, no deben aparecer errores al escribir. La entrada se considera completa cuando
- el foco de entrada se pierde (navegando a otro campo) o
- se envía el formulario (por ejemplo, autoenvío al presionar enter) o incluso
- después de no recibir la entrada durante algún tiempo (por ejemplo, 3 segundos después del último evento de entrada).
Mostrar errores de entrada inmediatamente mientras se escribe distrae mucho ("debe tener al menos 3 caracteres" al comenzar a escribir) y rara vez resulta útil.
Los errores de validación deben eliminarse sobre la marcha
Una vez que el campo está validado y muestra algunos errores, el usuario quiere que el error desaparezca tan pronto como el valor editado sea correcto, no cuando abandone el campo o envíe el formulario (que probablemente estará deshabilitado de todos modos siempre que haya errores desplegado).
Esto se puede lograr eliminando todos los errores del campo cuando se vuelva a ensuciar (y revalidarlo más tarde cuando se envíe o se pierda el enfoque), o revalidando automáticamente el campo cada vez que se cambia.
En lugar de mostrar continuamente un mensaje de validación rojo cuando el usuario no ha cumplido con los requisitos de un campo, una buena alternativa es (1) mostrar una sugerencia que le diga al usuario lo que se espera y (2) mostrar un mensaje verde de "requisitos cumplidos" cuando el usuario ha introducido un valor válido. Puede ponerse verde tan pronto como la entrada sea correcta.
Depende del tipo de campo de entrada.
- Para el campo de correo electrónico:
No quieres estar demasiado nervioso. Deje que el usuario termine de escribir la dirección de correo electrónico. Si el campo de entrada se vuelve rojo con un texto de error en el momento en que el usuario comienza a escribir, molestará al usuario.
El enfoque correcto sería dejar que el usuario termine de escribir y cuando el usuario cambie el enfoque de ese campo, valide y muestre si se ve bien o arroje un texto de excepción si lo hay.
- Para el campo Nombre de usuario y contraseña:
Los campos de nombre de usuario y contraseña deben validarse antes del envío porque tienen los requisitos de entrada más estrictos. De modo que muestre claramente al usuario lo que se acepta y lo que no en tiempo real cuando comience a escribir.
Enlace a los artículos:
https://designmodo.com/ux-form-validation/
https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/
La validación en tiempo real funciona si maneja adecuadamente las respuestas incompletas.
El ejemplo dado es una mala interfaz de usuario porque "reara" es una forma válida de iniciar una dirección de correo electrónico. Un ejemplo en el que la validación en tiempo real puede rechazar una respuesta incompleta es "reara @@". En ese caso, la validación en tiempo real puede rechazarla sin esperar a que se complete.
En general, es necesario que se muestre un mensaje de error cuando no haya una entrada adicional que pueda hacer que la respuesta sea válida. La dificultad para detectar esto variará de un caso a otro. Si tienes un diccionario, es bastante fácil. Con expresiones regulares, menos.
Por supuesto, ayuda tener buenos mensajes de error, que son apropiados en el contexto de una entrada incompleta. "Una dirección de correo electrónico debe contener exactamente un signo @", por ejemplo.
Si no puede manejar respuestas incompletas, por ejemplo porque siempre es posible ingresar un sufijo para hacer que un campo en particular sea legal, entonces debe esperar la entrada completa como se sugiere en las otras respuestas.
Es bueno validar en vivo. Sin embargo, dicha validación debe distinguir entre dos casos:
- entrada que se puede hacer válida agregando cosas al final, y
- entrada que no se puede hacer válida agregando cosas al final.
El último caso debería mostrar el mensaje de error instantáneamente, mientras que el primero debe esperar hasta que se complete la entrada.
Pero, ¿cómo puedes distinguir uno de otro?
Eso es un poco complicado dadas las herramientas actuales, pero si está escribiendo su propio motor de expresiones regulares (o algún otro tipo de máquina de estados finitos para validación), puede lograrlo así:
- si el motor alcanzó el final de la expresión regular (el estado del objetivo), hubo una coincidencia.
- si el motor llegó al final de la cadena , podría haber una coincidencia más tarde.
- si el motor no alcanza ninguno de los dos, nunca habrá partido.
El problema es que la mayoría de los lenguajes de programación no dan ninguna indicación acerca de llegar al final de la cadena. Además, a pesar de que es un cambio menor en cualquier motor de expresiones regulares existente, desarrollar el suyo propio está fuera del alcance de todos los proyectos de diseño de interfaz de usuario.
Respuesta simple, supongo que sería que si es una página de inicio de sesión con 3-4 campos, está completamente bien agregar validación cuando el usuario hace clic en enviar
Formas largas, la verificación de validación debe activarse cuando la entrada está en cualquier otro campo excepto en el campo mencionado.
Esto es factible en Javascript
Escribí un artículo sobre el problema con la validación en vivo :
En resumen: proporciona comentarios demasiado pronto y, a menudo, antes de que el usuario haya tenido la oportunidad de escribir su respuesta O lo proporciona demasiado tarde una vez que el usuario ha terminado de escribir su respuesta y se centra en el siguiente campo para responder la siguiente pregunta.
En su lugar, céntrese en:
- etiqueta clara y concisa, texto de sugerencia y mensajes de error
- perdona errores triviales
- permita que el usuario envíe el formulario cuando esté listo
De esta forma, los usuarios muy raramente verán un mensaje de error y cuando lo hagan, será cuando esperen ver uno.