Craft et technique
Comment soigner les formulaires, les erreurs et les états vides autant que la page d’accueil ?
Les formulaires, les erreurs et les états vides doivent être conçus comme des moments à part entière de l’expérience. Ils apparaissent précisément lorsque le visiteur essaie de faire quelque chose. Un accueil spectaculaire suivi d’une demande incompréhensible ou d’un message générique crée une rupture de qualité au moment le plus concret du parcours.
L'essentiel.
La qualité d’un site se voit aussi quand une action attend, échoue ou ne trouve aucun résultat. Les formulaires et les états vides doivent expliquer la situation, préserver le travail du visiteur et proposer une suite cohérente avec la marque.
- Décrire les états avant, pendant et après chaque action importante.
- Associer des libellés clairs aux champs et expliquer les erreurs de manière précise.
- Conserver les informations utiles lorsqu’une tentative échoue.
- Donner une action pertinente aux états vides, sans les confondre avec des erreurs.
La finition consiste à rendre chaque situation explicite : ce qui est demandé, ce qui se passe, ce qui a réussi et ce qui doit être corrigé. Le langage visuel peut rester singulier, mais la personne doit conserver ses repères et son travail lorsque l’action ne se déroule pas comme prévu.
Concevoir le formulaire à partir de la conversation souhaitée
Un formulaire de contact doit aider la personne à exprimer son besoin. Chaque champ doit avoir une utilité compréhensible. L’ordre peut suivre une conversation : sujet du projet, contexte, informations pratiques et moyen de réponse. Les questions trop spécialisées peuvent être rendues facultatives ou accompagnées d’une explication.
Le tutoriel du W3C sur les libellés explique l’association entre le texte d’un libellé et sa commande. Un champ uniquement présenté par un texte qui disparaît dès la saisie peut rendre la relecture difficile ; la composition doit garder des repères suffisamment stables.
Le design doit couvrir les réponses longues, le clavier mobile, le focus et les champs incomplets. Une ligne parfaitement dessinée sur une maquette vide peut devenir inutilisable lorsqu’un message d’erreur apparaît ou qu’une réponse occupe plusieurs lignes.
Décrire une erreur pour aider à la corriger
Une bonne erreur situe le problème et indique une suite possible. « Vérifiez les champs » demande encore au visiteur de mener l’enquête. Une indication près du champ concerné, associée si nécessaire à un récapitulatif, permet de comprendre ce qui manque.
Le tutoriel W3C sur les notifications de formulaires présente des méthodes pour relier erreurs, indications visuelles et commandes. La couleur peut participer au repère, mais le texte doit expliquer le problème. Une bordure rouge ne dit pas si l’adresse est absente, mal formée ou refusée pour une autre raison.
| État | Information attendue | Suite utile |
|---|---|---|
| Prêt à remplir | Ce qui est demandé et pourquoi | Saisir sans deviner le format |
| Envoi en cours | L’action est prise en compte | Attendre sans répéter inutilement |
| Erreur de saisie | Le champ et la correction nécessaires | Modifier sans perdre les autres réponses |
| Échec de transmission | L’envoi n’est pas confirmé | Réessayer ou utiliser un autre contact |
| Confirmation | Ce qui a réellement été reçu | Comprendre la prochaine étape |
Exemple pédagogique : une demande de projet qui résiste à l’échec
Imaginons un atelier fictif recevant des demandes de mobilier sur mesure. Le formulaire comporte un texte de projet et une pièce jointe facultative. Dans une première version, un échec d’envoi efface toute la saisie et affiche simplement « Une erreur est survenue ».
La version travaillée conserve le texte, indique que la réception n’a pas été confirmée et permet une nouvelle tentative. Si le fichier pose problème, le message précise les conditions attendues et laisse envoyer la demande sans lui. La confirmation finale n’est affichée qu’après le résultat prévu par le système de réception.
Soigner la demande jusqu’à son issue
- PréparerLes champs expliquent le besoin et les informations attendues.
- EnvoyerUn état explicite indique que la demande est en cours de traitement.
- Corriger ou reprendreUn échec conserve les saisies utiles et donne une action précise.
- ConfirmerLe message final correspond à une réception réellement confirmée.
Le protocole essaie une réponse longue, une pièce absente, un fichier non accepté et une interruption de connexion. Il vérifie aussi le clavier mobile et la lecture des messages. Ces essais ne servent pas à ajouter des effets ; ils rendent la promesse de soin visible dans une situation de fragilité.
Donner une fonction aux états vides
Un résultat vide n’est pas toujours une erreur. Une recherche peut ne rien trouver, une sélection peut être encore vide et une archive peut ne pas contenir d’élément pour un filtre donné. Le message doit expliquer lequel de ces cas s’applique.
Pour une recherche, proposez de modifier les termes ou de retirer un filtre. Pour une sélection vide, indiquez où commencer. Pour un contenu indisponible, évitez de laisser croire qu’il suffit de continuer à attendre. Une illustration peut accompagner cette explication, mais ne doit pas la remplacer.
Le ton peut porter la marque tout en restant clair. Un jeu de mots peut fonctionner sur une page d’erreur secondaire ; il devient gênant s’il masque la raison pour laquelle une demande n’a pas été envoyée. L’intensité créative doit être ajustée à la tâche et à l’enjeu du moment.
Préparez enfin un inventaire de ces états dans la recette. Ils sont souvent absents d’une démonstration idéale, mais deviennent visibles dès que les contenus ou les connexions varient. Les vérifier explicitement évite de les laisser aux messages par défaut d’un composant.
Questions fréquentes
Faut-il afficher une erreur dès la première lettre saisie ?
Pas systématiquement. Un contrôle trop précoce peut signaler un problème alors que la personne n’a pas terminé. Il faut choisir le moment selon le champ et la correction attendue. L’objectif est d’aider à saisir, sans transformer chaque étape normale en succession d’alertes.
Peut-on donner un ton humoristique aux erreurs ?
Oui, si l’explication et la suite restent évidentes, et si le ton correspond à la situation. Une erreur qui fait perdre du travail demande surtout de la précision. L’humour ne doit ni accuser la personne ni masquer un échec que le système doit reconnaître clairement.
Une confirmation visuelle suffit-elle après l’envoi ?
Elle doit correspondre à ce que le système a réellement confirmé et être perceptible dans les modes d’utilisation prévus. Il faut préciser la suite sans inventer un délai de réponse. Une confirmation complémentaire peut être envisagée selon le fonctionnement réel du service et ses engagements.
Sources
LVX : porter le soin jusqu’au dernier état
LVX peut intégrer les formulaires, les confirmations et les erreurs dans la direction artistique et le récit de service. Les mots, les repères et les actions sont conçus avec les cas difficiles, puis vérifiés sur les parcours réels. Cette démarche donne une continuité à l’expérience : la marque reste claire et attentive lorsque le visiteur essaie de la contacter ou rencontre un obstacle. La finition se mesure alors à la qualité de l’accompagnement, autant qu’à l’impact du premier écran. Discuter du projet avec LVX.
