Où est le meilleur endroit pour afficher les messages de validation / d'erreur dans un formulaire?
Où est le meilleur endroit pour afficher les messages de validation/d'erreur dans un formulaire?
- À côté d'un champ?
- sous un champ?
- Réserver une zone en haut/en bas de la page et y afficher un message d'erreur/réussi?
Il n'y a pas de bonne réponse à cela, cela dépend beaucoup du contexte.
Pour les formulaires plus volumineux, il est logique d'avoir un résumé des erreurs ainsi que près du champ spécifique qui doit être corrigé, c'est idéal lorsque lorsqu'un utilisateur soumet un formulaire et que la page se recharge, il le voit en haut et peut prendre des mesures.
En voici un bon exemple: 
En prime, ceux-ci pourraient être liés à la zone qui doit résoudre le problème de validation pour aider un utilisateur à parcourir plus facilement des formulaires plus longs.
Mais si vous deviez avoir des formulaires plus petits, la validation en ligne (autour du champ de saisie) serait parfaitement correcte. Cela garde la page moins occupée et distrayante, ce qui permet de se concentrer sur la zone qui a besoin d'attention.
Mettez en surbrillance le champ par erreur, donnez également des instructions pour les champs avant qu'ils ne soient remplis, deux raisons de le faire. Tout d'abord, l'utilisateur peut éviter d'obtenir l'erreur s'il sait comment la remplir correctement et ensuite, vous n'avez pas besoin de créer de l'espace pour que le message d'erreur soit visible - juste le surlignage d'erreur sur le champ.
Les gros messages d'erreur peuvent effrayer ou simplement ennuyer les utilisateurs. C'est une meilleure expérience pour expliquer à vos utilisateurs comment utiliser le formulaire en premier plutôt que de les faire se sentir mal après qu'ils soient allés au travail de soumission du formulaire.
Le pire endroit pour afficher une erreur de formulaire est en haut ou en bas de la page. Pourquoi? Il dissocie le message/la solution du problème. Le but de tout message d'erreur est de communiquer comment un utilisateur peut remédier à son erreur le plus rapidement possible tout en préservant le plus possible son travail. Séparer visuellement le message problématique de la zone problématique déroute et frustre les utilisateurs. Cela augmente également la charge de travail mental dans laquelle un utilisateur doit s'engager, parfois simplement pour entrer des informations simples (comme une date, un âge ou une adresse).
Le meilleur endroit pour afficher le succès de la validation et/ou les messages d'erreur est près du problème. Que le message apparaisse au-dessus ou à côté d'un champ est en grande partie une question de préférence. L'important est que le message soit indique précisément et explicitement ce qui a mal tourné dans un langage poli et lisible par l'homme et communique des instructions constructives comment remédier à ce problème. ( Adapté de Jakon Neilsen "Error Message Guidelines")
Résumé: La sagesse établie veut que les bons messages d'erreur soient polis, précis et constructifs. Le Web apporte quelques nouvelles directives: rendre les messages d'erreur clairement visibles, réduire le travail requis pour résoudre le problème et éduquer les utilisateurs en cours de route.
J'aime répertorier toutes les erreurs en haut pour que l'utilisateur puisse les voir facilement, puis les rendre cliquables. Le lien hypertexte passe ensuite à une ancre HTML correspondante. Voici un exemple HTML simple:
Les erreurs:
<h2>There was an error with your submission</h2>
<ul>
<li><a href="#jobtitle">Enter Job Title</a></li>
<li><a href="#emailaddress">E-mail address must be valid</a></li>
<li><a href="#state">Select your state</a></li>
</ul>
Les champs
<a name="jobtitle"></a>
<label for="jobtitle">Job Title</label>
<input type="text" name="jobtitle" id="jobtitle" />
<a name="emailaddress"></a>
<label for="emailaddress">Email Address</label>
<input type="text" name="emailaddress" id="emailaddress" />
<a name="state"></a>
<label for="state">State</label>
<select name="state" id="state">
<option value="AZ">Arizona</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
...
</select>
De cette façon, lorsque vous cliquez sur l'erreur elle-même, elle défile automatiquement au bon endroit dans la page.
J'espère que cela t'aides!
Il n'y a pas de réponse unique, car la meilleure approche peut changer en fonction de la mise en page et de la complexité de votre formulaire.
Une bonne conception de l'interface utilisateur nécessite des éléments clairs, évidents et intuitifs. L'utilisateur doit savoir, en un coup d'œil, savoir ce qu'il a fait de mal, où est le problème et comment le résoudre.
Mon exemple personnel le plus frustrant de mauvaise validation a été le moment où j'ai essayé de réinitialiser mon mot de passe chez Sallie Mae avec un nouveau mot de passe complexe à 18 caractères. J'ai essayé pendant environ une demi-heure de définir mon mot de passe mais j'ai continué à voir ce message d'erreur.
Mot de passe incorrect. Les mots de passe doivent comporter entre 8 et 32 caractères, contenir au moins un chiffre et au moins une lettre, et ne doivent pas contenir le mot de passe Word ni votre nom d'utilisateur.
Mon problème était que le logiciel n'acceptait pas les caractères spéciaux, mais je ne pouvais pas le dire à partir du message fourni.
Changer la couleur du champ de formulaire invalide ou mettre un astérisque rouge à côté, sans aucune explication sur la raison pour laquelle il n'est pas valide n'est pas clair ou évident. Je trouve qu'essayer d'adapter l'explication de la raison pour laquelle le champ n'est pas valide peut ne pas correspondre à côté du champ.
Dans plusieurs de mes formulaires (asp.net avec JQuery), je mets les erreurs de validation en haut du formulaire, le flashe, envoie un message qui explique exactement pourquoi le champ est invalide et fournit un lien à côté qui les ramène sur le terrain.