Message d’erreur : Donnez la solution à vos utilisateurs !

La qualité des messages que vous proposez est un élément majeur pour optimiser l’expérience utilisateur. Les types de message foisonnent, parmi lesquels se distinguent les messages d’erreur.

Avant toute chose, prenez bien conscience que vos utilisateurs sont en constante situation de résolution de problème. Ils ont :

  • un objectif dans la tête
  • des outils et indices pour l’atteindre
  • un cadre dans lequel ils doivent évoluer

Votre objectif est de leur permettre d’anticiper leurs erreurs mais surtout de les corriger lorsqu’elles surviennent. Intéressons-nous au second point.

La question que vous vous posez

Comment proposer des messages d’erreur efficaces ?

Notre proposition

Un bon message d’erreur offre la possibilité :

  • de comprendre qu’on est en situation d’erreur
  • de corriger ses erreurs

L’exemple ci-dessous illustre un moyen parmi d’autres d’atteindre ces objectifs.

Exemple message d'erreur

Faîtes comprendre à l’utilisateur qu’il est en situation d’erreur

Quand l’utilisateur réalise une erreur :

  • proposez un récapitulatif global des erreurs en haut de la page et dirigez l’utilisateur directement vers cette zone
  • détaillez l’erreur au niveau de la zone concernée
  • mettez le label du champ en question en rouge et en gras
  • entourez le champ concerné en gras et en rouge
  • mettez le message d’erreur (toujours en rouge et en gras) en dessous du champ concerné (n’utilisez pas la partie droite du champ qu’il est préférable de conserver pour d’éventuelles aides contextuelles)

Pour améliorer l’identification des erreurs par les utilisateurs, placez dans votre page un lien renvoyant directement à la première ligne du message d’erreur (de nombreux messages d’erreur passent encore inaperçus).

Pourquoi mettre en évidence les erreurs en rouge ET en gras ? Les personnes présentant certaines déficiences visuelles risquent de ne pas détecter la couleur : un double codage de l’information permet de s’assurer que l’erreur sera vue par le plus grand nombre.

Permettez à l’utilisateur de corriger ses erreurs

Trois points majeurs :

  • conservez toutes les données initialement saisies par l’utilisateur (informations correctes et erronées) afin qu’il comprenne la nature de son erreur
  • permettez à l’utilisateur de modifier toutes les informations qu’il souhaite
  • découpez le message d’erreur au niveau du champ en indiquant la nature de l’erreur sur la première ligne et les moyens de correction (donnez la solution) sur la seconde ligne

Evidemment, n’oubliez pas d’impliquer les utilisateurs pour valider vos choix de conception.