Design d’interface et critère ergonomique 7: Gestion des Erreurs

Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien&Scapin,Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.

Gestion des erreurs : en quoi ça consiste ?

C’est protéger l’utilisateur des erreurs potentielles et les gérer quand elles se produisent (corriger ou aider à corriger). Prévention et correction vont donc de paire.

Indiquer où se trouve l'erreur ... vous voyez ?
Indiquer où se trouve l’erreur … vous voyez ?

Ce critère concerne la capacité du système à proposer à l’utilisateur tous les éléments nécessaires et suffisants pour lui permettre de ne pas commettre d’erreurs (guidage, assistance, simplicité de l’interface …). Il concerne aussi ses capacités de contrôle (côté client et/ou côté serveur) et de réponse à une erreur détectée :

  • Indiquer clairement qu’une erreur s’est produite
  • Montrer quels champs sont en erreur
  • Conserver les éléments saisis par l’utilisateur
  • Afficher un message d’erreur qui permet à l’utilisateur de corriger son erreur ou de revenir sur les bons rails
Trés Bon exemple - Recap & Inline
Trés Bon exemple – Recap & Inline

Quelques exemples de recommandations.

Prévention :

  • Distinguer les champs obligatoires des champs facultatifs
  • Afficher une demande de confirmation pour les actions potentiellement dangereuses irréversibles (bref fortement impact antes)
  • Limiter les options et possibilités de saisie au strict nécessaire
  • Indiquer le format de saisie attendu

Gestion des erreurs

  • Proposer à la fois un récap. des erreurs en haut de page, et indiquer précisément et visuellement la localisation de l’erreur (indicateur et Tip associé) sur chaque champ concerné au sein du formulaire (RECAP + INLINE)
  • Présenter les messages d’erreur INLINE directement sans qu’ils ne nécessitent d’efforts supplémentaires de la part des utilisateurs pour les afficher
  • Après avoir vérifié la donnée corrigée (si c’est envisageable), afficher un indicateur positif (Coche verte, Bordure Verte…)

Messages d’erreurs

  • Afficher les messages d’erreur les plus concis possible (tout en restant précis)
  • Proposer autant que possible des messages d’erreur comportant les actions correctrices que peut engager l’utilisateur
  • Rédiger les messages d’erreur dans le langage (et la langue !) de l’utilisateur,
  • Indiquer le plus précisément possible la cause de l’erreur (ex : « Votre adresse email est incomplète » ; « Votre adresse email comporte un caractère non autorisé » ; « Votre adresse email doit inclure le signe @ »)
  • Proposer des messages d’erreur simples et compréhensibles, directifs mais non agressifs ni autoritaires
  • Eviter les fautes d’orthographe dans vos propres messages d’erreur

Mauvaises pratiques

Exemple 1 :

A priori on en trouve de moins en moins !
A priori on en trouve de moins en moins… et HEUREUSEMENT !

Exemple 2 :

b-errorbad
Un long Recap peu lisible et PAS d’INDICATION INLINE

Exemple 3:

Toutes les qualités d'un MAUVAIS message d'erreur :)
Toutes les qualités d’un MAUVAIS message d’erreur 🙂

Exemple 4:

Compliqué
Compliqué

Quelques bons exemples … so GOOD !

Bonne pratique (Wishlistr) :

a-verygood
Sobre et efficace: la cause de l’erreur et des possibilités de correction. Le critère « Distinction entre items » est bien exploité.

Bonne pratique (TypePad) :

a-goodtypepad
Temps 1
a-goodtypepad2
Temps2
a-goodtypepad3
Temps 3
Temps 4
Temps 4 – Les 4 temps de la gestion des erreurs. Un accompagnement au TOP !

Bonne pratique (Ticket Trunck) :

a-goodtickettrunck
Prévention : ? tip accessible par l’utilisateur

Bonne pratique (Pages jaunes):

En terme de prévention et d'accompagnement c'est pas mal !
En terme de prévention et d’accompagnement c’est pas mal !

Bonne pratique :

Une page 404 informative et efficace
Une page 404 informative et efficace

Bonne pratique (Microsoft Office) :

Toujours la possibilité d'annuler...pour corriger l'erreur !
Toujours la possibilité d’annuler… pour corriger l’erreur !

Bonne pratique (Apple Store) :

Apple c'est pas mal !
Apple c’est élégant !

Bonne pratique (Ebay) :

Inline remarquable
Inline : Signes et textes visibles

Bonne pratique (Remember the Milk) :

Picnik et ses contrôles en Ajax: Efficace !
Picnik et ses contrôles en Ajax: Efficace !

Et le meilleur pour la fin … Bonne pratique (live from Berlin):

Et pour terminer ! Prévention et Incitation. Ils sont trop forts ces Berlinois :)
Et pour terminer ! Prévention et Incitation. Trop forts ces Berlinois, ils savent vous motiver 🙂 – Neue Museum
A propos de jc-Qualitystreet (Jean Claude Grosjean) 447 Articles
Jean Claude GROSJEAN - COACH d’Organisation. Coach d'Equipes - Coach Agile. J’accompagne la transformation des organisations et coach les PERSONNES, les EQUIPES dans leur nouveau parcours. La facilitation & la formation font aussi partie de mes activités. Me contacter: 06.20.98.58.40

1 Comment

9 Trackbacks / Pingbacks

  1. Jean Claude Grosjean
  2. Valtech Technology
  3. Nicolas Ruffel
  4. Valtech Training
  5. Les Ergonautes
  6. Robin Azéma
  7. Akostic
  8. Romain Couturier
  9. Guilhem Berthalon

Les commentaires sont fermés.