5 préconisations afin d’optimiser la saisie de vos formulaires — Partie 3

Combien d’entre vous se sont trouvés bloqués lors de la saisie d’un formulaire ? À ne pas comprendre d’où proviennent les erreurs de saisie ?

Email incorrect, champs obligatoires, mot de passe incomplet…, les erreurs lors de la saisie d’un formulaire sont inévitables. Étant une des informations capitales, ils se doivent être non seulement explicites, mais aussi visibles afin de guider l’utilisateur à corriger ses erreurs.

Dans ce troisième opus, c’est par un retour d’expérience que nous allons aborder l’affichage des messages d’erreur de vos formulaires.

Préconisation 3 : Indiquer de façon claire les messages d’erreur

“Quels sont les affichages à éviter ?”

Exemple 1 / Messages d’erreurs regroupés :

Dans cet exemple, les messages d’erreurs ne sont pas adaptés car :

• On ne sait pas quelle erreur appartient à quel champ de saisie (aucun contexte).
• On doit sans cesse regarder en haut puis en bas, ralentissant ainsi la correction des champs erronés et augmentant le temps de lecture.
• S’il y a une dizaine de champs erronés, cela risque d’être contraignant lors la lecture.
• Affichage non adapté en cas de scroll si plusieurs de champs erronés se succèdent. (Ex : sur mobile).

Point d’amélioration :

• Positionner les messages d’erreurs sous chaque champ correspondant afin de rendre la lecture et la correction rapide.

Nota : Un champ erroné doit avant tout être contextualisé. L’objectif est d‘afficher un message dont le contenu permettra à l’utilisateur d‘identifier et de le corriger facilement. Et ce, le plus rapidement possible.

Même si la formulation des messages d’erreurs n’est pas adaptée, la contextualisation va permettre d’alerter l’utilisateur sur l’erreur de saisie. Il doit, avant tout, comprendre instantanément la source de son erreur.

Exemple 2 / Aucune mise en avant du champ erroné

Dans cet exemple, les messages d’erreurs ne sont pas adaptés car :

• Le design ne permet pas d’apporter un focus précis sur le champ erroné.

Point d’amélioration :

• Apporter un focus précis sur le champ erroné par un border en rouge.

Nota : La mise en évidence d’un champ erroné permet, non seulement, d’affiner son contexte mais aussi, de le retrouver plus rapidement dans le formulaire.

Exemple 3 / La formulation des messages d’erreurs :

Dans cet exemple, les messages d’erreurs ne sont pas adaptés car :

• Les messages d’erreurs n’offrent aucune aide à la correction de l’erreur.
• Il indique uniquement si le champ et valide ou non. L’un avec un message standard et l’autre avec un message plus humain, mais qui n’aide pas pour autant l’utilisateur à comprendre son erreur.

Point d’amélioration :

• Être explicite et proposer des suggestions de correction (pédagogiques) adaptées aux situations. Donner un exemple de format valide du champ de saisie. Exemple de message d’erreur : Votre numéro de téléphone portable doit commencer par 06 ou 07.

Nota : La formulation du message d’erreur détermine l’expérience utilisateur de par une diminution du temps de correction.

Il y a 3 types de formulation d’erreurs : standard, peu explicite et pédagogique.

1 — Formulation standard :

2 — Formulation peut explicite :

3 — Formulation pédagogique :

Parmi ces trois exemples, la formulation 3 est celle que nous retenons, car l’utilisateur sait ce qu’il doit faire pour corriger son erreur.

Afin d’optimiser l’affichage des messages d’er­reur, ils doivent s’afficher uniquement si l’utilisateur a terminé de rensei­gner sa réponse et disparaître seulement si le champ est correctement complété.

“Quel est l‘affichage idéal ?”

Dans cet exemple, les messages d’erreurs sont adaptés car :

• Les messages d’erreurs sont positionnés sous chaque champ correspondant afin de rendre la correction rapide. On contextualise.
• Les messages d’erreurs offrent une aide concernant l’erreur. Ex : Votre numéro de téléphone portable doit commencer par 06 ou 07. On informe.
• Le design permet d’apporter un focus précis sur le champ erroné par un border et un texte d’assistance en rouge + une icône de modification. On rend ludique l’approche erreur.

“N’oublions pas de valoriser les champs correctement remplis”

Comme expliqué ci-dessus, lorsqu’un champ saisi est incorrect, l’utilisateur est immédiatement informé de son erreur. Côté UI, la bordure du champ en question devient rouge, une icône et un message d’erreur apparaissent.

Si nous informons l’utilisateur de son erreur, pourquoi ne ferions-nous pas la même chose pour les champs correctement remplis ?

Il est positif pour l’expérience globale d’informer l’utilisateur également lorsqu’il a correctement rempli un champ. De plus, cela permet de faire ressentir un sentiment d’accomplissement. Surtout si le formulaire est très dense et complexe.

Nota : Côté UI, il est primordial d’établir un degré d’importance lors de la lecture.

Champ erroné (important) :

• Bordure de l’input en rouge.
• Une icône placée sur la droite.
• Un message d’erreur contextualisé.

Champ validé (secondaire) :

• Une icône placée sur la droite.

J’espère que cet article vous a permis de vous engager dans une réflexion autour de l’affichage des messages d’erreur dans vos formulaires.

Rendez-vous pour le prochain article, dans lequel je parlerai de la 4ème préconisation : “Utiliser les inputs types”. N’hésitez pas à me suivre pour ne pas manquer la suite.

Envie d’échanger sur le sujet ? Partager vos expériences ?

N’hésitez pas à me contacter ou/et à laisser des commentaires sur cet article. Dans le cadre de mes activités de veille UX/UI chez InTech, je suis toujours intéressé pour échanger avec des acteurs de tous horizons afin d’étoffer mes connaissances et partager des bonnes pratiques.

Remerciements à toute la Squad UX/UI d’InTech : Aurélie, Candice, Célie, Julien, Laurine, Nicolas, pour leur participation à la réflexion de cet article.

Plan des 5 préconisations :

• Bien choisir le style des text fields.
• Afficher correctement les labels.
• Indiquer de façon claire les messages d’erreur.
• Utiliser les inputs types.
• Structurer les formulaires en mode web et mobile.