Désactiver le bouton d'envoi jusqu'à ce que l'utilisateur ait rempli le formulaire
Comment pensez-vous de désactiver le bouton d'envoi jusqu'à ce que l'utilisateur ait rempli le formulaire ou les champs obligatoires?
Je trouve des questions similaires ici sur ux.se et quelqu'un a répondu que l'utilisateur penserait que le formulaire est cassé ou ne se rend pas compte immédiatement de ce qui se passe.
Je pense que le masquage n'est pas si bon mais une désactivation (par exemple en niveaux de gris, opacité, ...) plus un court texte dans le bouton améliorerait la convivialité car l'utilisateur se rend compte qu'il doit encore remplir quelque chose.
Y a-t-il quelqu'un avec de l'expérience ou des exemples en plus des messages d'erreur/validation habituels après la soumission?
Vous devez afficher le bouton Soumettre dans un état activé, sauf si vous pouvez facilement expliquer à côté de lui ce qui pourrait l'activer, comme un Alerte disant "Vous pouvez soumettre le formulaire après avoir rempli le champ1, le champ2, etc." . Cette explication devrait être directement à côté du bouton et évidente.
Vous ne devez pas vous fier uniquement à l'état du bouton d'envoi pour indiquer à l'utilisateur s'il a terminé ou non les éléments requis. Tout d'abord, vous pouvez aider les utilisateurs en se concentrant automatiquement sur le premier champ requis, puis en fournissant des messages de réussite/d'erreur au fur et à mesure que l'utilisateur parcourt le formulaire (Voir États de contrôle de formulaire in Bootstrap = pour un exemple).
Une idée que je n'ai pas encore vue implémentée, mais qui peut fonctionner pour vous en fonction de votre application, est de laisser l'utilisateur soumettre à tout moment. Au lieu de les renvoyer au même formulaire (avec ou sans rechargement de page) pour remplir ce qu'ils ont manqué, montrez-leur seulement les champs obligatoires qu'ils n'ont pas renseigné:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'idée ici n'est pas de faire en sorte que l'utilisateur se sente mal en l'informant qu'il n'a pas rempli tout ce qui était requis. Accélérez et demandez-leur simplement ce dont vous avez besoin, comme si vous clarifiez cela avec une personne. Gardez à l'esprit que l'utilisateur ne se sent jamais stupide de ne pas faire quelque chose correctement, alors pardonnez-lui et demandez à nouveau - il n'a jamais besoin de savoir que c'est parce qu'il a fait quelque chose de mal en premier lieu!
Une approche idéale serait de procéder comme suit:
Marquez clairement les champs obligatoires avec du texte et un style.
Au fur et à mesure qu'ils sont remplis, changez le style pour indiquer qu'ils sont complets (c'est-à-dire: changez leur arrière-plan du rouge au bleu, ajoutez une coche verte, etc.)
Désactivez le bouton d'envoi (c'est une bonne UX, suivant principes Poka-Yoke ), mais ajoutez-y du texte en disant quelque chose comme "Vous avez encore besoin de remplir X champs".
Soit le désactiver jusqu'à ce que tous les champs obligatoires soient remplis (à condition d'indiquer clairement quels champs sont marqués) ou autoriser l'action et afficher un message indiquant qu'ils ne peuvent pas encore soumettre le formulaire, avec une raison
Lorsque vous désactivez le bouton Soumettre au lieu de valider les données sur le flou ou sur la soumission de formulaire (dans le cas où le bouton Soumettre n'est pas désactivé), vous devez informer clairement l'utilisateur des champs obligatoires. Sinon, vous leur causerez de la frustration.
Vous devez également savoir que certains utilisateurs n'ont pas activé JavaScript, donc le formulaire serait simplement rompu pour eux. Il est généralement recommandé de rendre les formulaires utilisables (bien que moins "agréables") lorsque JavaScript n'est pas disponible.