Meilleure façon d'intégrer les erreurs de validation et les conseils dans le formulaire Web
Je crée un formulaire Web et j'ai jusqu'à présent suivi les meilleures pratiques énoncées ici et sur d'autres sites UX.
La seule décision que je dois encore prendre concerne l'affichage des messages d'erreur et des conseils d'entrée. Cela devra fonctionner sur les mobiles (largeur 320px) ainsi que sur les ordinateurs de bureau/portables/tablettes, etc.
Les messages d'erreur sont affichés à côté/sous le champ de saisie, tout comme les conseils. Encore une fois, j'ai déjà décidé que si une erreur est affichée, elle remplacera tout indice car les indices sont purement liés à la nature du contenu qui est entré.
Cependant, j'ai la possibilité de réserver de l'espace pour l'erreur/l'indice (sous l'entrée), ce qui conduira à un formulaire légèrement plus long, ou déplacer le formulaire vers le bas au fur et à mesure qu'une erreur se produit. Comme la validation se fait à la fois lors de la soumission et lors du changement de saisie à l'aide de javascript, la fermeture d'un champ de saisie entraînera l'ajustement du formulaire.
Bien sûr, si je décide de réserver de l'espace au lieu de créer de l'espace dynamiquement, les erreurs devront être supprimées pour s'adapter à l'espace donné, mais cela est faisable dans ce cas.
C'est ce mouvement qui me préoccupe - la longueur de forme fixe ou dynamique, ou suis-je juste inquiet pour quelque chose qui n'a pas besoin de s'inquiéter?
Merci d'avance.
Les formulaires sont toujours délicats. Vous ne voulez pas qu'ils soient trop longs, car les utilisateurs détestent les formulaires longs. Dans une procédure de paiement en ligne, un long formulaire d'inscription peut effrayer 40% de vos utilisateurs (exemple personnel). Vous souhaitez également que le formulaire soit suffisamment clair pour éviter toute frustration avec vos utilisateurs. Et surtout, vous voulez que les utilisateurs parcourent votre formulaire en aussi peu de temps que possible.
Voici quelques conseils que j'ai appris à être une bonne pratique:
Étiquettes claires et visibles
Assurez-vous qu'il est toujours clair pour l'utilisateur ce qu'il doit remplir. Il y a une tendance où les champs de saisie n'ont que l'espace réservé pour indiquer à l'utilisateur ce qu'ils doivent remplir. le champ de saisie devient actif. Lorsque les utilisateurs sont distraits, ils peuvent oublier ce qu'ils doivent remplir (je sais que je l'obtiens parfois). Assurez-vous donc d'utiliser des étiquettes. Les gens sont devenus créatifs avec des étiquettes qui ressemblent à des espaces réservés et changent de place lorsque l'entrée est active .
Espaces réservés
Les espaces réservés peuvent cependant être très efficaces lorsqu'ils sont utilisés en combinaison avec des étiquettes. Dans votre cas, ils sont parfaits pour montrer des indices. Donnez un exemple de l'entrée comme [email protected] pour les adresses e-mail ou 03-13-2014 pour les dates (en utilisant mm-dd-yyyy est une mauvaise expérience utilisateur car beaucoup de gens non avertis ne comprendront pas cela).
Erreurs
Donnez des erreurs claires au bon endroit. Il semble que vous le fassiez déjà correctement: vous affichez les messages d'erreur sous les champs de saisie où l'erreur s'est produite.
Rendez les erreurs visibles. Vous pouvez changer la bordure du champ de saisie en rouge. Faites-le secouer brièvement ou attirer l'attention d'une autre manière avec une couleur rouge.
Rendez les messages d'erreur compréhensibles. Utiliser "Une erreur s'est produite" est un péché mort (pas littéralement bien sûr). "Votre mot de passe est trop court, il doit contenir au moins 8 caractères" est un exemple de bon message d'erreur.
L'emplacement de ce message d'erreur dépend de la salle dont vous disposez. Il peut s'adapter entre deux entrées sans déplacer les autres entrées vers le bas. Il peut être à droite ou même à gauche.
Validation
Valider la saisie lorsque la modification change, avant que les utilisateurs ne cliquent sur soumettre, comme vous le faites déjà, c'est super. Les utilisateurs détestent quand ils cliquent sur soumettre et doivent découvrir qu'ils se sont trompés et doivent faire défiler à nouveau. La validation peu de temps après la saisie ou pendant la saisie aidera l'utilisateur à remplir le formulaire correctement et plus rapidement.