Présenter les informations et les erreurs de validation sous la même forme?
Puis-je afficher les "informations" et les "messages d'erreur de validation" sur la même page. Pourriez-vous me faire part de vos commentaires?
Capture d'écran ci-jointe.
D'une manière générale, vous pouvez, mais les textes des messages doivent être très clairs et non confus.
Le plus gros problème, confus à lire, que je vois ici est que le message dans le rectangle orange ne communique pas clairement quel champ l'utilisateur doit changer: 1, 2 ou 3? Ni le message dans le rouge n'est clair à 100%. Certains utilisateurs se demanderont si "l'ancien mot de passe" se rapporte au "mot de passe actuel". Cela peut ressembler à une distinction très subtile mais croyez-moi, j'ai vu des utilisateurs s'interroger sur des détails beaucoup plus "évidents".
Donc, si vous ne pouvez pas changer le code frontal du CMS (je suppose que vous devez en utiliser un), rendez tous les messages très clairs.
Les messages d'erreur et les informations utiles sont très différents, ils doivent donc être visuellement distincts
Dans votre mise en page, le message d'erreur et le message d'information sont ombrés différemment, mais ont la même police, la même forme et le même emplacement.
Cela indique visuellement que les messages sont similaires mais pas identiques. Ce n'est pas vrai: les informations utiles sont en face d'un message d'erreur.
Généralement, cela est résolu en (1) faisant en sorte que les informations apparaissent clairement différentes des erreurs; et (2) fournir des informations/conseils utiles avant et non après l'envoi du formulaire.
Par exemple:
En général, les états d'erreur doivent clairement communiquer où une erreur s'est produite. Dans votre exemple, vous n'avez pas clairement montré quel est le problème.
De plus, vous avez ici deux messages concurrents. Il semble que ces deux alertes pourraient facilement être consolidées en une seule alerte.
Enfin, regardez la langue que vous utilisez. Vous dites "l'ancien mot de passe semble être incorrect" mais vous n'avez pas de champ "ancien mot de passe", seulement un champ "mot de passe actuel". Assurez-vous que la langue correspond.
Si vous avez accès à l'édition du frontal, je suggérerais probablement d'utiliser des indicateurs sur le champ/groupe de champs (tels que "has-success" si vous utilisez le bootstrap).
Ensuite, je dirais que peut-être l'erreur "info" n'est pas nécessaire une fois qu'ils ont fait une tentative. Ou au lieu d'utiliser une alerte, faites-en l'en-tête de la section.
La perspective cognitive
D'un point de vue cognitif, voici la séquence d'événements probable:
- L'utilisateur voit la page
- Un message d'information demande à l'utilisateur de changer son mot de passe
- L'utilisateur remplit les 3 champs
- Une erreur de validation s'est produite
- Au moment où l'utilisateur connaît déjà le but de l'écran, il n'y a donc aucun intérêt à ce que le message d'information y reste - il peut être supprimé
Messages et alertes
Les messages et alertes, comme ceux de vos maquettes, devraient normalement apparaître après une action de l'utilisateur.
Je soupçonne que dans votre cas, la barre d'informations s'affiche lorsque les utilisateurs atterrissent sur l'écran, mais je ne vois pas comment cela se justifie.
La meilleure solution
L'accessibilité veut qu'une page ait un en-tête - ceci est utile pour tous les utilisateurs, mais en particulier ceux qui utilisent des lecteurs d'écran.
Quoi qu'il en soit, tout ce problème peut être résolu si au lieu d'afficher un message d'information, vous utilisez simplement un en-tête (comme dans les moqueries de tohester).