UX : 4 Leviers pour corriger les erreurs de parcours

À priori, un message d’erreur n’est jamais bon signe. Si l’époque est loin depuis le terrible écran bleu de Windows qui est passé à la postérité dans la culture populaire, les messages d’erreur n’ont pourtant pas disparu de nos ordinateurs. Pire, ils sont aussi présents sur nos tablettes et nos téléphones.

Pourtant, ils ont pris une importance grandissante pour les webdesigners, ergonomes et les agences de conseil en ux qui ont trouvé ici le moyen de les transformer. Ils ne sont plus aussi indigestes qu’auparavant et peuvent même rendre de grands services aux utilisateurs. Passer du temps - et donc de l’argent - sur des messages d’erreur pertinents peut sembler contre-productif au premier abord.

Et si c’était justement le contraire ? Si vos messages d’erreur étaient utiles pour une bonne expérience utilisateur ? On vous explique.

L’erreur 404 est le code qui s’affiche sur les navigateurs pour signifier que la page recherchée est introuvable. Cela peut-être un problème de contenu déplacé, une redirection 3XX non fonctionnelle ou un lien brisé.

Si certains choisissent de rediriger toute page 404 vers la home page du site, d’autres ont décidé d’en tirer profit avec des messages et des design ludiques, originaux, informatifs ou drôles.

Elle contribue à l’identité graphique de la marque et peut même apporter une valeur pratique à l’internaute égaré. Une organisation qui passe du temps sur sa page 404 a conscience de l’importance que représentent ses visiteurs.

À titre d’exemples, Mailchimp cultive son impertinence, AirBnB fait preuve d’humour et propose des liens rapides, le Ministère de la transition écologique affiche une belle image en phase avec sa mission ainsi qu’un champ de recherche pour aider ses visiteurs et cette agence de communication américaine valorise sa créativité.

Autant d’options rafraîchissantes et bien pensées qui n’entravent pas le parcours des visiteurs et qui transforment une erreur en élément positif.

Rien de pire qu’un message d’erreur générique.

Un message d’erreur devrait clairement indiquer quel est le problème, comme si vous initiez une discussion avec votre utilisateur. Quand vous allez chez le médecin, il ne dit pas “vous avez un problème”. Il vous dit que votre toux est causée par une infection bénigne, mais douloureuse qui se soigne heureusement facilement avec des antibiotiques.

Dans un formulaire, c’est la même chose. Il faut identifier les zones susceptibles de produire un message d’erreur et de les adapter systématiquement.

Vos messages doivent donc être précis, détaillés, pédagogiques et respectueux. C’est comme une conversation dans la vraie vie.

Par nature, l’écran d’un mobile n’est pas toujours adapté à un contenu long ou complexe. Chaque message d’erreur doit donc être proche de la source du problème et surtout des yeux du mobinaute.

Rien de plus frustrant que d’appuyer dix fois sur le bouton “valider” ou “acheter” sans qu’il ne se passe rien, car un message d’erreur est localisé tout en haut du formulaire, bien au-delà de ce qui s’affiche à l’écran.

Intégrez les lignes de flottaison dans votre réflexion sur l’interface et faites des tests sur un maximum d’appareils différents. Un message d’erreur peut s’afficher différemment sur un petit iPhone SE ou sur un iPad pro.

Adaptez chaque situation, car l’UX et l’UI doivent travailler de concert. Une interface mobile mal designée impactera l’expérience utilisateur.

Quand c’est vert, tout va bien, quand c’est rouge c’est qu’il y a un problème.

Au-delà de ces codes universels, il faut les adapter dans votre interface pour vos messages d’erreur. Si vous décidez de mettre un fond rouge, faites en sorte que votre police soit assez contrastée pour lire le message d’erreur.

Si tout va bien, une légère et discrète coche verte est suffisante pour rassurer l’utilisateur dans sa saisie. Ne soyez pas trop anxiogène en abusant d’un rouge agressif qui s’afficherait là où ce n’est pas nécessaire. Si l’erreur vient de l’utilisateur, l’objectif est de lui en faire prendre conscience discrètement et efficacement.

D’autre part, songez que tout le monde ne perçoit pas les couleurs de la même manière. Pour l’accessibilité des personnes daltoniennes, il est conseillé de prévoir une solution alternative aux couleurs qui peuvent prêter à confusion. Ce qui peut sembler être une contrainte dans le design sera, au contraire, propice à libérer votre créativité et à respecter tous vos utilisateurs.

Derrière un simple message d’erreur se cache en réalité toute une logique propre à l’expérience utilisateur. Vos visiteurs peuvent être très zappeurs et n’hésiteront pas à vous abandonner si un message d’erreur est trop bloquant, incompréhensible ou intrusif.