Validación Inline, cómo solucionar las cosas en el momento
En el entorno digital, como en la vida, es mejor solucionar los problemas en el momento y el lugar en el que suceden.
Probablemente os ha sucedido en alguna ocasión que al rellenar un formulario de esos largos y tediosos, cuando le das al botón de enviar, te informa de algún campo que te falta por rellenar al principio de todo.
Cuando esto sucede una vez, probablemente tienes la paciencia de solucionarlo, pero cuando te equivocaste en varios campos, el tener que darle al botón una y otra vez es como si el formulario te estuviera llamando tonto a la cara.
Los usuarios suelen tomarse esto bastante mal y su percepción sobre el entorno digital en el que se encuentran baja sustancialmente.
Pero no te preocupes… ¡Tengo la solución! Puedes decirle a tus usuarios en el momento que salen del campo o escriben algún error qué está pasando y podrán corregirlo automáticamente.
Esta técnica se llama “Validación Inline” y Material tiene bastantes ejemplos de todo esto.
Aunque a priori suena todo muy bonito, depende de la fase y estado del entorno digital donde lo quieras aplicar puede no ser tan fácil.
En nuestro caso en reclamador.es tenemos bastantes productos todos con formulario, área privada y varias secciones que también requerían validación Inline. Gracias Victor Merino crack!!
El proceso ha sido más difícil de desarrollar de lo que se esperaba en un primer momento y hemos tenido que fasear la story en 4 desarrollos graduales de sprint. Así que os aconsejo que si estáis pensando en hacer una web o app, lo apliqueis desde un primer momento o la transformación va a ser costosa.
Este tipo de validación no se puede aplicar de cualquier modo ya que a veces puede ser un poco agobiante los usuarios. A veces los labels desplazan el input de manera poco natural o se generan alertas durante la escritura aunque no esté mal todavía el contenido. Cuidado con esos detalles porque puede ser peor el parche que la herida y podemos generar estrés a nuestros usuarios.
Aunque os entre la tentación de personalizar vuestros formularios para ser diferentes o más “cool” intentad ir a lo que funciona, como por ejemplo bootstrap y Material, ya que aumentar demasiado la curva de aprendizaje de vuestros usuarios es ponerlos en contra y hacer que se confundan más. Imagínate tener que escalar todos esos elementos de fantasía por toda una web enorme: tu Front te querrá matar.
Personalizad vuestras alertas de una forma amable y explicativa. Aunque parezca un pequeño detalle, la diferencia es grande entre “Rellene este campo” y “Necesitas introducir un nombre para continuar”. Estas pequeñas cosas son las que van a hacer que la gente entienda todo y te valore.
Por último voy a compartir unos datos del research que hice en este aspecto que os ayudarán a defender este desarrollo si realmente estás seguro de querer aplicarlo en tu web o app:
Después de ver las métricas para formularios inline de etre.com que es una empresa que se dedica a medir las mejoras de UX en datos cuantificables, obtenemos los siguientes insights:
Un 22% de aumento en las tasas de éxito,
Una disminución del 22% en errores cometidos,
Un aumento del 31% en la calificación de satisfacción,
Una disminución del 42% en los tiempos de finalización, y
Una disminución del 47% en la cantidad de fijaciones oculares.
Si alertamos de un error en el momento, nos evitamos la frustración de hacer click en un CTA y volver a editar, nos evitamos tener que anclar alertas y el cliente entiende el problema en el contexto. Todo será más fluido, vamos.
Por otro lado, si el cliente va viendo validado su proceso de formularios tendrá más sensación de éxito y seguridad. El tiempo que dediquen a rellenar los campos será más corto, lo cual aumentará las probabilidades de éxito a la hora de terminar su proceso de rellenado/registro.
Por supuesto cualquier solución puede convertirse en un problema por lo que es importante testear cada input y cuidar bien las funcionalidades.
Documentación al respecto (mucha de ella con contenido de programación que probablemente os sirva)
https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce
https://keechma.com/news/announcing-keechma-forms/
https://alistapart.com/article/inline-validation-in-web-forms
