Chapitre 217 minDébutant
Les critères ergonomiques de Bastien et Scapin
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- citer les 8 critères et leurs critères élémentaires ;
- rattacher un défaut d'interface au bon critère ;
- proposer une correction argumentée par un critère ;
- utiliser la grille pour concevoir, pas seulement pour critiquer.
3 exercices corrigés1 schéma
Les critères ergonomiques de Bastien et Scapin sont une grille de 8 critères, détaillés en 18 critères élémentaires, qui décrivent les qualités qu'une interface doit avoir pour être utilisable : guider l'utilisateur, limiter sa charge de travail, lui laisser le contrôle, s'adapter à lui, gérer ses erreurs, rester cohérente, parler son langage et respecter ses habitudes. Ce chapitre présente chaque critère avec sa définition, un exemple et un contre-exemple tirés de Prêt'Matos, puis montre comment t'en servir pour concevoir comme pour critiquer un écran.
D'où viennent ces critères
Christian Bastien et Dominique Scapin, chercheurs en ergonomie à l'INRIA, ont publié leurs critères en 1993 dans un rapport de recherche, puis dans une revue internationale en 1997. Ils ont synthétisé des centaines de recommandations issues des travaux sur les interfaces et les ont rangées en une typologie courte, testée auprès d'évaluateurs. C'est la grille de référence de l'ergonomie des logiciels en France : tu la retrouves dans les cours d'IHM, les audits professionnels et les sujets d'examen. Les critères 6, 7 et 8 n'ont pas de sous-critère : chacun compte lui-même comme critère élémentaire, d'où le total de 18.
Sa force est d'être générale : elle ne parle ni de couleurs précises ni de technologies, et s'applique aussi bien à une application WinForms qu'à un site web ou à une borne tactile. Sa faiblesse est le revers de sa force : chaque critère demande d'être traduit en décision concrète pour ton écran, et c'est ce que ce chapitre t'entraîne à faire.
1. Le guidage
Le guidage regroupe tous les moyens qui conseillent, orientent, informent et conduisent l'utilisateur : savoir où il est, ce qu'il peut faire, ce qu'on attend de lui et ce qui vient de se passer. Il a quatre composantes.
L'incitation amène l'utilisateur à faire les bonnes actions : un libellé clair sur chaque champ, le format attendu (« JJ/MM/AAAA »), les champs obligatoires signalés, un titre de page qui dit où l'on est, un bouton qui dit ce qu'il fait.
Le groupement et la distinction entre items organisent visuellement l'écran pour montrer ce qui va ensemble. Par la localisation : les dates de début et de fin côte à côte, les actions de la réservation regroupées en bas de sa carte. Par le format : le bouton principal plein, les boutons secondaires en contour, les matériels indisponibles grisés avec la mention « Indisponible ».
Le feedback immédiat est la réponse du système à chaque action : le bouton qui change d'aspect au clic, l'indicateur « Enregistrement… », le message « Réservation enregistrée » avec son résumé. Sans retour, l'utilisateur clique une deuxième fois et crée une deuxième réservation.
La lisibilité concerne la facilité à lire le texte : taille des caractères, contraste avec le fond, longueur des lignes, espacements. Elle ne s'applique ni aux messages d'erreur ni aux retours, qui ont leurs propres critères.
| Critère élémentaire | Exemple sur Prêt'Matos | Contre-exemple |
|---|---|---|
| Incitation | Champ « Date de retour » avec l'aide « 15 jours au maximum » | Un champ vide sans libellé, avec seulement « jj/mm/aaaa » en gris dedans |
| Groupement par la localisation | Les deux dates de la période côte à côte, sous le choix du matériel | La date de fin en bas de page, séparée de la date de début par les conditions de prêt |
| Groupement par le format | Matériel indisponible grisé et marqué « Indisponible jusqu'au 14/03 » | Tous les matériels affichés pareil ; l'indisponibilité n'apparaît qu'après le clic |
| Feedback immédiat | « Réservation de PC-07 enregistrée du 12 au 18 mars » juste après l'envoi | Le formulaire se vide sans rien dire |
| Lisibilité | Texte de 16 pixels, gris très foncé sur blanc | Texte de 11 pixels gris clair sur fond gris |
2. La charge de travail
La charge de travail regroupe tout ce qui réduit l'effort de perception et de mémoire de l'utilisateur, et le nombre d'actions qu'il doit faire. Moins il en fait, moins il se trompe.
La brièveté limite le travail de lecture et de saisie. Elle a deux faces. La concision porte sur chaque élément : des libellés courts, des codes faciles à taper, une valeur par défaut quand elle est probable (la date du jour comme date de début), la saisie automatique (le nom du salarié connecté, jamais redemandé). Les actions minimales portent sur le nombre d'étapes : réserver depuis la carte du matériel, sans repasser par un menu ; enregistrer un retour en scannant l'étiquette au lieu de chercher le matériel dans une liste.
La densité informationnelle porte sur l'écran dans son ensemble : n'afficher que ce qui sert à la tâche en cours. Le planning de la logistique n'a pas besoin du numéro de série de chaque matériel ; la fiche d'un matériel, si.
| Critère élémentaire | Exemple | Contre-exemple |
|---|---|---|
| Concision | Le demandeur est rempli automatiquement avec le compte connecté | Le salarié doit retaper son nom, son service et son adresse à chaque réservation |
| Actions minimales | « Réserver » sur la carte du matériel ouvre le formulaire, ce matériel déjà choisi | Revenir au menu, ouvrir « Nouvelle réservation » et rechercher à nouveau le matériel qu'on regardait |
| Densité informationnelle | Le catalogue montre nom, photo, disponibilité ; le reste est sur la fiche | Douze colonnes dans le tableau du catalogue, dont la date d'achat et le fournisseur |
3. Le contrôle explicite
Le contrôle explicite dit que le système ne fait que ce que l'utilisateur lui demande, quand il le demande, et que l'utilisateur garde la main sur ce qui est en cours.
Les actions explicites : un traitement important se déclenche par une action volontaire et identifiable, un bouton « Réserver », pas un simple choix dans une liste. Changer le matériel sélectionné ne doit pas enregistrer la réservation.
Le contrôle utilisateur : pouvoir interrompre, annuler, revenir en arrière, reprendre. Un bouton « Annuler » dans le formulaire, l'annulation d'une réservation jusqu'à la veille, la possibilité d'arrêter un export trop long.
| Critère élémentaire | Exemple | Contre-exemple |
|---|---|---|
| Actions explicites | La réservation n'est enregistrée qu'au clic sur « Réserver » | La réservation part dès que la date de fin est choisie |
| Contrôle utilisateur | « Annuler la réservation » sur chaque ligne de « Mes réservations » | Une réservation faite ne peut être annulée que par courriel à la logistique |
4. L'adaptabilité
L'adaptabilité est la capacité de l'interface à réagir selon le contexte, les besoins et les préférences des utilisateurs.
La flexibilité offre plusieurs façons d'atteindre un même but : réserver depuis le catalogue ou depuis le calendrier ; trier le planning par date ou par matériel ; régler l'affichage (thème sombre, densité).
La prise en compte de l'expérience de l'utilisateur sert à la fois le novice et l'habitué : un guidage pas à pas la première fois, des raccourcis ensuite (« Réserver à nouveau » sur une ancienne réservation, raccourcis clavier pour la logistique qui enregistre des dizaines de retours par semaine).
| Critère élémentaire | Exemple | Contre-exemple |
|---|---|---|
| Flexibilité | Le retour s'enregistre en scannant l'étiquette ou en cherchant par nom | Une seule façon de faire, la recherche dans une liste de 60 matériels |
| Prise en compte de l'expérience | « Réserver à nouveau » propose la même configuration que la dernière fois | Le tutoriel d'accueil s'affiche à chaque connexion, sans moyen de le fermer définitivement |
5. La gestion des erreurs
La gestion des erreurs regroupe les moyens d'éviter les erreurs, de les signaler et de les corriger quand elles arrivent. C'est le critère le plus visible pendant une recette, parce que la commission essaie toujours de saisir n'importe quoi.
La protection contre les erreurs détecte et empêche les erreurs avant qu'elles aient des conséquences : un calendrier qui interdit de choisir une date passée, des dates déjà réservées non sélectionnables, une confirmation avant une suppression définitive.
La qualité des messages d'erreur porte sur leur pertinence, leur lisibilité et leur exactitude : dire ce qui ne va pas, où, et comment corriger, dans le langage de l'utilisateur. Le chapitre 6 y revient en détail.
La correction des erreurs donne les moyens de réparer : les données saisies sont conservées quand l'envoi échoue, le champ fautif reçoit le focus, une action se défait (« Annuler » pendant quelques secondes après une suppression).
| Critère élémentaire | Exemple | Contre-exemple |
|---|---|---|
| Protection contre les erreurs | Les jours où PC-07 est déjà réservé ne sont pas sélectionnables | On peut choisir n'importe quelle date ; le refus arrive après l'envoi |
| Qualité des messages | « PC-07 est déjà réservé du 10 au 14 mars. Choisissez d'autres dates ou un autre portable. » | « Erreur 409 » |
| Correction des erreurs | Après un refus, le formulaire garde le matériel et les dates, le curseur est sur la date de début | Le formulaire se vide : tout est à ressaisir |
6. L'homogénéité et la cohérence
L'homogénéité (ou cohérence) dit que les choix de conception sont conservés dans des contextes identiques et différents dans des contextes différents : mêmes libellés, mêmes emplacements, mêmes couleurs, mêmes formats pour les mêmes choses. Un utilisateur qui a appris un écran sait se servir des autres.
Sur Prêt'Matos : le bouton principal toujours à droite en bas des formulaires, les dates toujours au format 12/03/2027, le mot « réservation » partout (et pas « emprunt » sur un écran, « demande » sur l'autre, « booking » dans l'URL affichée). Contre-exemple classique : « Supprimer » en rouge sur un écran et en bleu sur l'autre, ou « Valider » qui enregistre ici et passe à l'étape suivante là.
7. La signifiance des codes et des dénominations
La signifiance des codes et dénominations demande une relation forte entre un terme, une icône ou un code et ce qu'il désigne. Le libellé doit dire ce qu'il fait, dans le vocabulaire des utilisateurs.
Sur Prêt'Matos : « Rendre le matériel » plutôt que « Clôturer le prêt » pour un salarié ; un statut « En retard » plutôt que « ST3 » ; une icône de corbeille pour supprimer, accompagnée d'un texte. Contre-exemples : un bouton « OK » sous la question « Voulez-vous annuler la réservation ? » (OK pour annuler, ou OK pour garder ?), un code « EC » que seuls les développeurs comprennent.
8. La compatibilité
La compatibilité porte sur l'accord entre l'interface et les caractéristiques des utilisateurs (leurs habitudes, leurs compétences, leur langue, leurs perceptions) et de leurs tâches réelles. Elle concerne aussi la cohérence avec les autres applications qu'ils utilisent.
Sur Prêt'Matos : les dates au format français, la semaine qui commence le lundi dans le calendrier, l'ordre des champs qui suit la façon dont un salarié pense sa demande (quoi, quand, pour quoi faire), la logistique qui retrouve le numéro d'inventaire de l'étiquette collée sur le matériel. Contre-exemple : un calendrier à l'américaine (mois/jour, semaine commençant le dimanche), ou un écran de retour qui demande le numéro interne de la base au lieu du numéro inscrit sur l'étiquette.
Utiliser la grille : concevoir, puis évaluer
La grille sert deux fois.
Pendant la conception, elle sert de liste de questions à te poser devant chaque écran : l'utilisateur sait-il où il est et quoi faire (guidage) ? Lui fais-je saisir quelque chose que je connais déjà (charge de travail) ? Peut-il annuler (contrôle) ? Que se passe-t-il s'il se trompe (erreurs) ? Ce bouton ressemble-t-il aux autres boutons qui font la même chose (homogénéité) ? Ce mot est-il le sien ou le mien (signifiance) ? Cela correspond-il à sa façon de travailler (compatibilité) ?
Pendant l'évaluation, elle sert à classer les défauts trouvés et à argumenter les corrections. Chaque problème d'un audit est rattaché à un critère, ce qui évite le « j'aime » et le « j'aime pas ». Le chapitre 8 détaille cette évaluation heuristique.
Pour argumenter, une phrase en trois temps suffit : le problème observé, le critère qu'il enfreint, la correction et son effet attendu. « Le formulaire se vide après un refus (critère de correction des erreurs) : je conserve les valeurs saisies et je place le curseur sur le champ à corriger, pour que l'utilisateur n'ait qu'une date à changer. »
Exercices
Exercice 1 sur 3 Quel critère est enfreint ? Réussi À revoir
Pour chaque défaut relevé dans une application de gestion, donne le critère de Bastien et Scapin (et, si tu peux, le critère élémentaire) qu'il enfreint.
- Après avoir cliqué sur « Exporter », rien ne se passe pendant vingt secondes, puis le fichier arrive.
- Le bouton de suppression d'un client est rouge sur la fiche client et gris sur la liste des clients.
- Pour modifier l'adresse d'un client, il faut ouvrir trois écrans successifs.
- Le message affiché est : « Violation de contrainte FK_cmd_client ».
- La recherche n'accepte que le format « NOM, Prénom » : « dupont » ne trouve rien.
- Un champ « Code TVA » attend une valeur comme « FR-NI » sans aucune explication.
- Une case cochée par erreur lance aussitôt l'envoi d'un courriel au client.
- Le texte du tableau est en 11 pixels gris clair.
Voir la réponseMasquer la réponse de l'exercice 1
- Guidage, feedback immédiat : l'action doit être confirmée tout de suite (« Export en cours… »), sinon l'utilisateur recommence.
- Homogénéité et cohérence : la même action doit avoir la même apparence partout.
- Charge de travail, actions minimales : trop d'étapes pour une tâche fréquente.
- Gestion des erreurs, qualité des messages (et signifiance des codes : c'est le vocabulaire de la base de données, pas celui de l'utilisateur). Mieux : « Ce client a des commandes : il ne peut pas être supprimé. Vous pouvez l'archiver. »
- Compatibilité (la recherche doit accepter la façon naturelle de taper un nom) ; on peut aussi citer l'adaptabilité, flexibilité.
- Guidage, incitation : le format attendu doit être indiqué ; si les valeurs sont peu nombreuses, une liste vaut mieux qu'une saisie libre (protection contre les erreurs).
- Contrôle explicite, actions explicites : un envoi au client doit être déclenché par une action volontaire, un bouton « Envoyer ».
- Guidage, lisibilité : taille et contraste insuffisants (le chapitre 7 donne les seuils).
Tu avais trouvé ?
Exercice 2 sur 3 Un écran de Prêt'Matos à critiquer Réussi À revoir
Voici la description du premier jet de l'écran « Enregistrer un retour », utilisé par la logistique au comptoir du stock, sur une tablette :
- en haut, le titre « Gestion des mouvements » ;
- une liste déroulante qui contient les 60 matériels du parc, par ordre d'identifiant interne (17, 18, 19…) ;
- un champ « Date de retour » vide, à remplir au format AAAA-MM-JJ ;
- un champ « État » en saisie libre ;
- un bouton « OK » de 24 pixels de haut ;
- après le clic, l'écran revient vide, sans message.
Relève cinq problèmes, rattache chacun à un critère et propose une correction.
Voir la réponseMasquer la réponse de l'exercice 2
Une réponse possible :
| Problème | Critère | Correction |
|---|---|---|
| Titre « Gestion des mouvements » | Guidage (incitation) ; signifiance des dénominations | Titre « Enregistrer un retour », le nom de la tâche |
| Liste de 60 matériels par identifiant interne | Charge de travail (actions minimales) ; compatibilité (la logistique connaît le numéro d'inventaire de l'étiquette, pas l'identifiant interne) | Scanner l'étiquette ou rechercher par numéro d'inventaire ou par nom ; ne proposer que les matériels actuellement sortis |
| Date de retour vide au format AAAA-MM-JJ | Concision (la date est presque toujours aujourd'hui) ; compatibilité (format français) | Pré-remplir avec la date du jour, modifiable, affichée en JJ/MM/AAAA |
| État en saisie libre | Protection contre les erreurs ; homogénéité des données | Trois choix : « Bon état », « Abîmé », « À réparer », avec un commentaire facultatif |
| Bouton « OK » de 24 pixels | Signifiance (« OK » ne dit pas ce qu'il fait) ; compatibilité avec l'usage sur tablette, au doigt | « Enregistrer le retour », bouton large d'au moins 44 pixels de haut |
| Écran vide après le clic, sans message | Guidage (feedback immédiat) | « Retour de PC-07 enregistré (bon état) », et la liste des matériels encore sortis mise à jour |
Cinq problèmes suffisaient : l'important est que chaque correction découle du critère cité.
Tu avais trouvé ?
Exercice 3 sur 3 Homogénéité ou compatibilité ? Réussi À revoir
Pour chaque situation, dis si elle relève de l'homogénéité ou de la compatibilité.
- Dans Prêt'Matos, la date s'affiche « 12/03/2027 » dans le catalogue et « 2027-03-12 » dans « Mes réservations ».
- Le calendrier de Prêt'Matos commence la semaine le dimanche.
- La touche Échap ferme certaines fenêtres de l'application, pas les autres.
- Le raccourci Ctrl+S, qui enregistre dans tous les logiciels de bureau, ne fait rien dans l'application de gestion WinForms.
Voir la réponseMasquer la réponse de l'exercice 3
- Homogénéité : deux formats différents dans la même application.
- Compatibilité : en France, la semaine commence le lundi ; le calendrier ne suit pas les habitudes des utilisateurs.
- Homogénéité : le même geste n'a pas le même effet partout dans l'application.
- Compatibilité : l'application ignore une convention des autres logiciels que les utilisateurs connaissent.
Tu avais trouvé ?