Illustrations d’états d’erreur : comment rendre les moments où le produit dysfonctionne plus utiles

Les états d’erreur ne sont pas là pour décorer. Ce sont des moments de rétablissement.

Lorsqu’un problème survient, l’utilisateur mobilise déjà davantage son attention. Une bonne illustration peut réduire son anxiété, tandis qu’une mauvaise peut donner l’impression que le produit ne prend pas la situation au sérieux ou cherche à l’esquiver.

L’objectif d’une illustration d’état d’erreur est simple : rendre le moment compréhensible, calme et facile à résoudre.

Le rôle d’une illustration d’erreur

Une illustration d’erreur doit remplir l’un des 3 rôles suivants :

1. Indiquer le type de problème — fichier manquant, échec de connexion, problème d’autorisation, mode hors ligne.
2. Réduire la tension émotionnelle — rendre l’écran moins hostile.
3. Orienter vers une solution — réessayer, se reconnecter, contacter l’assistance, revenir en arrière, restaurer, recharger.

Si l’image ne remplit aucun de ces rôles, supprimez-la.

Exemple : sympathique, mais clairement en panne

Source : Illustration Erreur 404 par David Revoy, CC BY 4.0.

Cette illustration fonctionne parce qu’elle est expressive sans prétendre que l’échec est amusant. La scène fait immédiatement comprendre que « quelque chose ne va pas », tout en créant une atmosphère accueillante plutôt qu’alarmante.

C’est cet équilibre que les équipes produit doivent viser.

Adaptez l’illustration à la gravité de l’erreur

Toutes les erreurs ne méritent pas le même traitement visuel.

Faible gravité

Exemples : aucun résultat de recherche, téléversement vide, intégration facultative non connectée.

Utilisez une illustration légère et sympathique. Une mascotte peut sembler curieuse, regarder autour d’elle ou indiquer doucement l’action suivante.

Gravité moyenne

Exemples : échec de l’enregistrement, tentative de paiement échouée, importation interrompue, requête ayant expiré.

Optez pour une inquiétude mesurée. L’illustration doit reconnaître le problème, sans en plaisanter. Ajoutez une option claire pour réessayer ou résoudre le problème.

Gravité élevée

Exemples : risque de perte de données, problème de sécurité, verrouillage du compte, suspension de la facturation.

Utilisez une illustration minimale, voire aucune. Privilégiez un texte direct, des moyens de contacter l’assistance et l’instauration d’un climat de confiance. Une mascotte peut sembler irrespectueuse dans ce contexte.

Anatomie d’un état d’erreur utile

Un état d’erreur efficace comporte 4 éléments :

1. Un titre en langage clair

À éviter : Something went wrong

À privilégier : We could not save your changes

Le titre doit indiquer ce qui a échoué.

2. Une explication précise

Indiquez à l’utilisateur si le problème est temporaire, local, lié aux autorisations ou de nature inconnue.

3. Une action de récupération

Il est préférable de proposer une seule action principale :

• Réessayer l’envoi
• Reconnecter l’intégration
• Restaurer le brouillon
• Contacter l’assistance
• Retourner au tableau de bord

4. Une illustration d’accompagnement

L’image doit renforcer le message. Si le texte indique que l’envoi a échoué, l’illustration peut représenter un fichier tombé, une boîte à outils ou une mascotte en train de réparer un petit écran.

Les poses de mascotte adaptées aux erreurs

Bonnes poses de mascotte pour un état d’erreur :

• tenant des outils
• examinant un objet cassé
• indiquant une action pour réessayer
• semblant préoccupée, mais calme
• portant un panneau d’avertissement
• cherchant avec une loupe

Postures à risque :

• en train de rire
• en train de pleurer de façon théâtrale
• en train de célébrer
• en train de dormir
• en train de hausser les épaules
• ayant l’air coupable

L’utilisateur n’a pas besoin que votre mascotte soit théâtrale. Il a besoin d’aide.

Le texte et l’illustration d’un état d’erreur doivent être cohérents

Si l’illustration est ludique et le texte sérieux, l’état semble incohérent. Si le texte est vague et l’illustration précise, l’utilisateur ne sait toujours pas quoi faire.

Associez-les intentionnellement :

• État hors ligne : mascotte avec un câble débranché + You're offline. We'll retry when your connection returns.
• Échec de l’envoi : mascotte tenant un fichier endommagé + The upload stopped before it finished.
• Accès impossible : mascotte devant une porte verrouillée + Ask an admin for access to this workspace.
• Page 404 : mascotte avec une carte + We couldn't find this page.

Règles de conception des illustrations d’erreur

Vos illustrations d’erreur doivent rester :

• plus petite que le titre et l’action
• visuellement apaisée
• cohérente avec le système de mascottes du produit
• accessible dans les modes clair et sombre
• sans petits détails qui disparaissent sur mobile
• émotionnellement adaptée à la gravité de la situation

N’utilisez pas l’illustration pour masquer un manque d’explication.

Quand ne pas utiliser d’illustration

N’ajoutez pas d’illustration lorsque :

• le problème concerne la sécurité
• l’utilisateur a pu perdre de l’argent ou des données
• la page nécessite une action urgente
• l’erreur survient au sein d’un parcours dense
• l’illustration repousse le CTA sous la ligne de flottaison

Une bonne conception produit implique parfois de faire preuve de retenue.

La meilleure illustration d’état d’erreur est une promesse

Une bonne illustration d’état d’erreur dit : quelque chose ne fonctionne pas, mais vous n’êtes pas bloqué.

C’est son rôle émotionnel. La mascotte ou le système visuel doit donner au produit une image responsable et utile, plutôt que d’être mignon sans autre raison.

En cas de doute, concevez d’abord la récupération. Ajoutez ensuite l’illustration qui la soutient.

Découvrir les poses de mascotte pour les états du produit →