Exemples de messages d'erreur : mauvais, bons et excellents, réécrits
Huit messages d'erreur, d'un code brut à un texte sur lequel on peut agir. Chaque échelon expliqué, la formule en trois lignes derrière les meilleurs, et une checklist pour votre prochaine revue.
Un excellent message d'erreur dit trois choses aux gens : ce qui s'est passé, pourquoi c'est arrivé, et quoi faire ensuite, avec un bouton qui le fait. La plupart des produits s'arrêtent à la première, et beaucoup n'iront jamais plus loin qu'un code. Voici huit messages d'erreur qui grimpent de mauvais à excellent, la raison derrière chaque échelon, et une formule à réutiliser pour le prochain que vous écrirez.
Ce qui change de mauvais à excellent
Mauvais
Excellent
Le mauvais message est écrit pour le serveur. Un 403 est un vrai code de statut et il est exact, mais la personne qui le lit n'apprend rien d'utilisable. L'excellent message est écrit pour la personne : il nomme le fichier, explique qu'il est privé, indique qui peut l'ouvrir, et transforme la prochaine étape en un seul tap.
Chaque échelon ajoute une chose :
| Échelon | Ce que ça donne aux gens | Ce qui manque encore |
|---|---|---|
| Mauvais | Un code ou un mot vague comme « échec » | Ce qui s'est passé, pourquoi, quoi faire |
| Bon | Ce qui s'est passé, en mots simples | Pourquoi, et quoi faire ensuite |
| Excellent | Ce qui s'est passé, pourquoi, et l'étape suivante sur un bouton | Rien dont ils aient besoin pour décider |
1. Pas d'accès
Mauvais
Erreur 403.
Un code de statut. Correct pour un développeur, vide pour tous les autres.Bon
Vous n'avez pas accès à ce fichier.
Dit ce qui s'est passé, avec les mots du lecteur. Le laisse bloqué.Excellent
Ce fichier est privé. Demandez l'accès à Sam et nous vous prévenons dès que c'est bon.
Dit pourquoi (il est privé), qui peut régler ça (Sam) et ce qui se passe ensuite. Le bouton est Demander l'accès, donc demander ne prend qu'un tap.
Un 403 signifie que la personne est connectée mais n'a pas la permission. Cette distinction compte pour le texte : elle n'a pas besoin de se reconnecter, elle a besoin que quelqu'un partage le fichier.
2. Une carte refusée
Mauvais
Échec de la transaction.
« Échec » sans sujet. Était-ce la carte, la boutique, la connexion ?Bon
Votre carte a été refusée.
Nomme la cause sur laquelle on peut agir.Excellent
Votre carte a été refusée. Votre banque a dit non. Essayez une autre carte, ou demandez à votre banque de l'autoriser.
Place le problème du côté de la banque, pas de la personne, et offre deux issues. Le bouton est Utiliser une autre carte, la plus rapide.
Les erreurs de paiement concentrent le plus d'argent et le plus de gêne. Ne blâmez personne, et gardez la sortie sur le même écran.
3. Un fichier trop volumineux
Mauvais
Erreur d'envoi.
Ça pourrait être n'importe quoi, alors les gens réessaient le même fichier et se heurtent au même mur.Bon
Ce fichier est trop volumineux.
La cause, mais pas de combien.Excellent
Cette vidéo fait 2,4 Go. La limite est de 2 Go. Raccourcissez-la un peu et réessayez.
Les deux chiffres, pour que les gens voient que l'écart est faible. Le bouton est Raccourcir la vidéo, qui règle ça sans quitter l'app.
Quand une limite est en jeu, dites la limite. On ne peut pas corriger un chiffre qu'on ne nous dit jamais.
4. Passer hors ligne
Mauvais
Erreur réseau.
Ça sonne comme si quelque chose était cassé, et peut-être du travail perdu.Bon
Vous êtes hors ligne.
Simple, mais la première inquiétude de chacun est « ai-je perdu mes modifications ? »Excellent
Vous êtes hors ligne. Vos modifications sont enregistrées sur ce téléphone et seront synchronisées à votre retour.
Répond à l'inquiétude avant qu'elle soit posée. Le bouton est Réessayer.
5. Être déconnecté
Mauvais
Erreur 401 : Non autorisé.
« Non autorisé » sonne comme une accusation, et c'est encore un code.Bon
Votre session a expiré.
Exact, mais « session » est un mot de développeur.Excellent
Vous avez été déconnecté. Cela fait 30 jours. Reconnectez-vous et nous vous ramènerons ici.
Explique la raison et promet que personne ne perdra sa place. Le bouton est Se connecter.
Un 401 est le cas inverse d'un 403 : la personne n'est pas connectée, ou sa connexion a expiré. L'envoyer vers l'écran de connexion est la solution, et dire qu'elle reviendra là où elle était supprime la raison d'hésiter.
Trois autres, écrits de zéro
Les mêmes règles valent pour les situations que les cinq précédentes ne couvrent pas. Ces trois exemples sont les nôtres.
Mauvais
Erreur 500. Une erreur s'est produite.
Le code n'apporte rien, et « une erreur » avoue qu'on ne sait pas.Bon
Nous n'avons pas pu enregistrer vos modifications.
Assume le problème et nomme ce qui a échoué.Excellent
Nous n'avons pas pu enregistrer vos modifications. C'est de notre côté, pas du vôtre. Votre texte est toujours là, réessayez dans une minute.
Dit à qui la faute et que rien n'est perdu. Le bouton est Enregistrer à nouveau.
Mauvais
Trop de requêtes.
Du langage machine pour quelqu'un qui est sans doute déjà agacé.Bon
Trop de tentatives. Réessayez plus tard.
Clair, mais « plus tard » peut vouloir dire une minute ou un jour.Excellent
Trop de tentatives. Pour votre sécurité, la connexion est suspendue pendant 15 minutes. Vous pouvez plutôt réinitialiser votre mot de passe maintenant.
Donne le temps d'attente, la raison et un chemin plus rapide. Le bouton est Réinitialiser le mot de passe.
Mauvais
Lien invalide.
Laisse penser que la personne a mal saisi quelque chose.Bon
Cette invitation a expiré.
La vraie cause, sans reproche.Excellent
Cette invitation a expiré. Les invitations durent 7 jours. Demandez à Maya d'en envoyer une nouvelle.
Dit pourquoi les liens expirent et qui peut régler ça. Le bouton est Demander une nouvelle invitation.
La formule : ce qui s'est passé, pourquoi, quoi faire ensuite
Chaque excellent message ci-dessus tient en trois lignes :
[What happened, in the reader's words.]
[Why, in one short sentence.]
[What to do next.] [Button: the next step as a verb]
| Message | Ce qui s'est passé | Pourquoi | Quoi faire ensuite |
|---|---|---|---|
| Pas d'accès | Ce fichier est privé | Seules les personnes invitées peuvent l'ouvrir | Demander l'accès |
| Carte refusée | Votre carte a été refusée | Votre banque a dit non | Utiliser une autre carte |
| Trop volumineux | Cette vidéo fait 2,4 Go | La limite est de 2 Go | Raccourcir la vidéo |
| Hors ligne | Vous êtes hors ligne | Les modifications sont enregistrées sur ce téléphone | Réessayer |
| Déconnecté | Vous avez été déconnecté | Cela fait 30 jours | Se connecter |
La ligne « pourquoi » est celle que les équipes suppriment en premier, et celle qui évite le prochain ticket au support.
Une checklist pour votre prochaine revue
- Pas de codes bruts. Gardez 403, 401 et 500 dans les logs, hors du message.
- Pas de reproche. « Votre banque a dit non », pas « Vous avez saisi une carte invalide ».
- Donnez les chiffres. Une limite de taille, un temps d'attente, un nombre de jours.
- Un bouton, nommé par un verbe. « Raccourcir la vidéo », pas « OK ».
- Dites ce qui a été conservé. Si rien n'a été perdu, dites-le.
- Ne confirmez pas l'existence d'un compte à la connexion. « Mot de passe incorrect » indique à un inconnu que le compte existe. Dites plutôt « Cet e-mail et ce mot de passe ne correspondent pas ».
- Vérifiez ensuite la couleur. Les mots portent l'erreur ; la couleur et une icône les soutiennent. Notre article sur la couleur des messages d'erreur donne les rouges à utiliser en clair et en sombre.
Article
Couleur des messages d'erreur : les 8 rouges à utiliser à la place de #FF0000
Le jumeau de cet article : les mots sont ici, les couleurs, icônes et code sont là-bas.
FAQ
Comment écrire un bon message d'erreur ?
Dites ce qui s'est passé avec des mots simples, pourquoi en une phrase courte, et quoi faire ensuite. Mettez la prochaine étape sur un bouton nommé par un verbe, comme Réessayer ou Utiliser une autre carte.
Quels sont des exemples de mauvais messages d'erreur ?
Des codes bruts et des mots vagues : « Erreur 403 », « Erreur 401 : Non autorisé », « Échec de la transaction », « Erreur d'envoi » et « Erreur réseau ». Chacun est exact et aucun ne dit aux gens quoi faire.
Les messages d'erreur doivent-ils afficher des codes d'erreur ?
Pas comme message. Un code aide le support et les développeurs, alors gardez-le dans les logs ou en petit sous le vrai message si votre équipe support le demande.
Quelle est la différence entre un message d'erreur 401 et 403 ?
Un 401 signifie que la personne n'est pas connectée ou que sa connexion a expiré, donc le message doit l'envoyer se connecter. Un 403 signifie qu'elle est connectée mais n'a pas la permission, donc le message doit lui dire qui peut lui donner l'accès.
Pourquoi une erreur de connexion ne devrait-elle pas dire « mot de passe incorrect » ?
Parce que cela confirme que le compte existe, ce qui aide quelqu'un qui devine des comptes. Les recommandations de sécurité préconisent un seul message générique pour un e-mail ou un mot de passe incorrect.
Sources
- Codes de statut HTTP : 403 Forbidden et 401 Unauthorized sur MDN.
- Error-message guidelines, Nielsen Norman Group.
- Writing, Apple Human Interface Guidelines.
- Authentication and error messages, OWASP Cheat Sheet Series.
- D'abord publié sous forme de carrousel sur UX Brainy.
Want every error, empty and loading state written and designed as one system? Our team designs product UI with the words in it from the first draft.
Get Started
