Validation de formulaire et boutons désactivés
Permettre à un utilisateur de soumettre et de rechercher des erreurs est probablement optimal par rapport à la charge cognitive de la recherche dans un formulaire pour voir pourquoi le bouton est désactivé. Cependant, cela pourrait être évité en fournissant des commentaires de validation en temps réel.
Alors, quel scénario est plus convivial et sujet à moins d'agitation et d'erreurs?
- Désactivez le bouton Soumettre jusqu'à ce que tous les champs soient remplis et valides. Validation en ligne de la chaussure en temps réel.
- Ne désactivez jamais le bouton d'envoi et n'affichez les erreurs de validation qu'après que l'utilisateur a envoyé l'envoi.
Les formulaires sont courts - généralement pas plus de 6-8 champs.
TL; DR: Ne désactivez pas le bouton d'envoi et attendez de présenter les erreurs tant que l'utilisateur n'a pas appuyé sur le bouton d'envoi.
Des études ont été menées montrant que les utilisateurs ont tendance à remplir complètement les formulaires avant de corriger les erreurs, quelle que soit la présentation des erreurs.
Une de ces études a examiné la réaction des utilisateurs aux différentes présentations d'erreurs: Présentation des messages d'erreur utilisables sur le World Wide Web: ne pas afficher les erreurs tout de suite , Interagir avec les ordinateurs, volume 19, pages 330 à 341 (2007 )
Six types de présentation d'erreur ont été examinés:
- Immédiat, en ligne avec les champs, montrant les erreurs une par une.
- Immédiat, dans une boîte de dialogue, affichant les erreurs une par une.
- Après la soumission, insérez-vous dans les champs, en affichant les erreurs une par une.
- Après la soumission, insérez-vous dans les champs, montrant les erreurs à la fois.
- Après avoir soumis, dans une boîte de dialogue, montrant les erreurs une par une.
- Après avoir soumis, dans une boîte de dialogue, montrant les erreurs à la fois.
Ce qu'ils ont trouvé est énoncé dans cet article de recherche: Travailler vers des formulaires utilisables sur le World Wide Web: Optimiser les champs de saisie de date
Bargas-Avila et al. [24] ont comparé six façons différentes de présenter un message d'erreur, y compris la validation en ligne, les fenêtres contextuelles et les messages d'erreur intégrés. Les gens ont fait moins d'erreurs consécutives lorsque des messages d'erreur sont apparus intégrés dans le formulaire à côté des champs de saisie correspondants ou un par un dans une fenêtre contextuelle. Ce n'était le cas que si les messages d'erreur apparaissaient à la fin après avoir cliqué sur le bouton d'envoi. Si les messages d'erreur sont apparus au moment où le champ erroné a été laissé (validation en ligne), les participants ont fait beaucoup plus d'erreurs en remplissant le formulaire. Ils ont simplement ignoré ou, dans le cas des fenêtres contextuelles, ont même cliqué sur les messages d'erreur qui apparaissaient sans les lire.
Pour le décomposer un peu plus:
- Les utilisateurs ont deux modes: mode d'achèvement et de révision
- Les utilisateurs auront tendance à ignorer les erreurs immédiates lorsqu'ils remplissent le formulaire
- Les présentations d'erreur les plus efficaces étaient:
- Après la soumission, insérez-vous dans les champs, montrant les erreurs à la fois.
- Après la soumission, insérez-vous dans les champs, en affichant les erreurs une par une.
- Après avoir soumis, dans une boîte de dialogue, montrant les erreurs une par une.
Pour appliquer cela à votre situation:
Ne désactivez jamais le bouton d'envoi et n'affichez les erreurs de validation qu'après que l'utilisateur a envoyé l'envoi.
... est la bonne marche à suivre.
Présenter une erreur immédiatement en ligne peut, selon ce qui précède, distraire l'utilisateur et le soustraire à la tâche de remplir le formulaire. Permettre à l'utilisateur de terminer son mode "Achèvement", puis de présenter les erreurs après avoir cliqué sur Soumettre.
J'utiliserais un mélange de vos options:
Affichez une validation en ligne et ne désactivez pas le bouton d'envoi.
Si le formulaire n'est toujours pas valide lorsque vous cliquez sur Soumettre, vous pouvez faire défiler automatiquement pour les afficher (s'ils sont "hors de l'écran") et afficher les erreurs sous les champs jusqu'à ce que chaque champ soit modifié . Cette approche est actuellement utilisée par Google, Facebook et Twitter.
Dans le cas où vous souhaitez désactiver le bouton de soumission, vous DEVEZ afficher au moins un message à côté de lui indiquant la raison pour laquelle il est désactivé parce que si vous ne le faites pas cela pourrait être source de confusion pour les utilisateurs. Quoi qu'il en soit, je ne le recommande pas, rappelez-vous que dans ce cas vous supposez que l'utilisateur pense (et pense correctement) "une longueur d'avance", ce qui est une très mauvaise pratique de conception UX.
Si vous allez juste avec la validation post-soumission, soyez sûr de la clarté des étiquettes qui décrivent l'entrée et envisagez d'ajouter une info-bulle ou une indication pour augmenter les chances de réussite de l'envoi
Une bonne fonctionnalité de validation après soumission serait également (en prenant page de compte Twitter comme exemple) de mettre l'accent sur le premier champ qui contient des erreurs pour éviter à l'utilisateur d'avoir à naviguer dans ce champ.