Hoésy Ergonomie1

Les critères ergonomiques de Bastien et Scapin

Bertrand Evain, Ergonomebertrand.evain@hoesy.com

Hoésy Ergonomie2

Objectif de la séance

• Vous transmettre les 18 règles génériques « références » en matières d’ergonomie des IHM;

• Vous les illustrer.

Hoésy Ergonomie3

Déroulement de la séance• Introduction• Présentation des 18 critères• Conclusions

Hoésy Ergonomie4

Qui sont Bastien et Scapin ?• Deux chercheurs français qui ont procédé à partir de 1997 à la

synthèse de 900 recommandations dans le domaine de l’ergonomie informatique (pris dans son sens le plus large).

• Leur travail a abouti à une liste de 8 critères principaux (en gras dans la liste) et 18 sous critères (repérés par des astérisques).

• Les études ont montré que leur grille révélaient davantage de défauts d’interface que les autres listes (et notamment celle de la norme ISO 924110).

Hoésy Ergonomie5

Caractéristiques de la liste

• La plus aboutie pour effectuer des évaluations expertes ;• Son caractère abstrait et général la rend « puissante » (on pense à

des choses auxquelles on n’aurait pas forcément pensé) mais pas toujours facile à utiliser, notamment chez les non experts;

• Elle est utilisable dans tous les domaines des IHM : web, logiciel, produit,..

• Elle est utilisable en conception et en correction ;• Si elle est utilisée sans contact avec les utilisateurs, les restrictions

sont les mêmes que pour l’évaluation par check liste.

Hoésy Ergonomie6

Déroulement de la séance• Introduction• Présentation des 18 critères et évaluation en parallèle de

notre interface avec ces critères (si le timing le permet)• Conclusions

Hoésy Ergonomie7

La liste des critères ergonomiques (1)

1. Le guidage1. Incitation*2. Groupement distinction entre items

1. Groupement distinction par la localisation *2. Groupement distinction par le format*

3. Feedback immédiat*4. La lisibilité*

Hoésy Ergonomie8

La liste des critères ergonomiques (2)

2. Charge de travail1. Brièveté

1. Concision* 2. Action minimale*

2. Densité informationnelle*3. Contrôle explicite

1. Actions explicites*2. Contrôle utilisateur*

4. Adaptabilité1. Flexibilité*2. Prise en compte de l’expérience utilisateur*

Hoésy Ergonomie9

La liste des critères ergonomiques (3)

5. Gestion des erreurs1. Protection des erreurs*2. Qualité des messages d’erreurs*3. Correction des erreurs*

6. Homogénéité / Cohérence*7. Signifiance des codes et dénominations*8. Compatibilité*

Hoésy Ergonomie10

1. Le Guidage• Ensemble des moyens mis en oeuvre pour conseiller, orienter,

informer et conduire l'utilisateur lors de ses interactions avec l'ordinateur.

• La dimension de guidage comprend 4 sous-critères. D'un point de vue général, il s'agit d'évaluer la façon dont le syst ème prend en charge l'utilisateur .

• L'utilisateur doit comprendre clairement ce qu'il peut faire et comment il peut le faire . Le système doit donc le prendre en main pour le conduire efficacement.

Hoésy Ergonomie11

1.1 Incitation*• Inciter l'utilisateur à effectuer des actions spécifiques en lui

fournissant des indices . Par exemple, guider les entrées de données en indiquant le format adéquat et les valeurs acceptables: Date (jj/mm/aa) _ _ / _ _ / _ _.

• Le critère d'incitation permet de juger des moyens mis en œuvre pour faire conna ître à l'utilisateur le contexte dans lequel il se trouve et les actions qu'il peut effec tuer . Par exemple, dans le domaine du web, il s'agit par exemple d'indiquer à l'utilisateur où il se trouve dans le site web et quels éléments sont cliquables.

Hoésy Ergonomie12

1.1. Exemple

• Dans cet exemple l'internaute est invité à saisir un numéro d'abonné et un mot de passe, pour pouvoir consulter ses informations personnelles en égard à un programme de fidélisation d'une compagnie aérienne canadienne. Le numéro d'abonné est divisé en trois blocs de trois chiffres, ce qui est représenté par les champs de saisie: l'incitation est réussie. (De plus, une fois un premier bloc saisi, le curseur se déplace automatiquement au bloc suivant, jusqu'à la saisie du mot de passe, ce qui constitue un excellent exemple d'action minimale réussie).

Hoésy Ergonomie13

1.1. Contre-Exemple

• Dans cet exemple, il faut indiquer à l’utilisateur où il faut cliquer !!!

Hoésy Ergonomie14

1.1. Évaluation de l’incitation

• Repérer les différentes actions possibles sur chaque page et décrire comment elles sont incitées :

• Quels sont les indices qui permettent à l’utilisateur de savoir ce qu’il doit faire ?

• Page d’accueil : comment j’indique le possible / pas possible• Formulaire : comment j’assiste le remplissage ( ex : date :

jj/mm/aa)

Hoésy Ergonomie15

1.2. Groupement distinction entre Items• Grouper les diff érents éléments visuels de fa çon coh érente et

ordonn ée. L’objectif est que les caractéristiques visuelles de l’ interface nous renseigne sur le sens.

• Il est fondamental de regrouper les éléments qui vont ensemble et de séparer ceux qui ne vont pas ensemble .

• Avant de penser à la manière de le faire, il faut réfléchir aux groupes eux-mêmes. On doit principalement se demander si les groupements effectués sont pertinents.

Hoésy Ergonomie16

1.2.1. Groupement distinction par la localisation*• Grouper les différents éléments visuels de façon cohérente et

ordonnée. L’objectif est que les caractéristiques visuelles de l’interface nous renseigne sur le sens.

• Distinguer des éléments par la localisation, c'est les éloigner ou les s éparer d'un point de vue g éographique pour signifier leur diff érence.

Hoésy Ergonomie17

1.2.1. Exemple

• Par des localisations différentes, l’utilisateur saisit bien ce qui relève des logos, des menus ou du titre du site.

Hoésy Ergonomie18

1.2.1 Autre Exemple

Hoésy Ergonomie19

1.2.1. Evaluation de la distinction par la localisation• Lister les catégories présentes sur une page et relever leur

organisation spatiale.• Les informations de même type sont-elles regroupées ?

Hoésy Ergonomie20

1.2.2. Groupement / Distinction par le Format *• Donner aux éléments des caract éristiques graphiques particuli ères

afin d'indiquer leur appartenance, ou non, à une classe donn ée d'objets . Par exemple: utiliser un symbole et la couleur rouge pour les boîtes de dialogue d'alerte ou d'erreur. Autrement dit, dans cet exemple la couleur renseigne sur le sens.

• Distinguer des éléments par le format, c'est attribuer des formats diff érents aux éléments qui sont diff érents .Par exemple, dans le menu d'une application, on peut griser les options qui sont inaccessibles pour les différencier des options accessibles.

Hoésy Ergonomie21

1.2.2. Exemple

Hoésy Ergonomie22

1.2.2. Évaluation de la distinction par le format• Faire une description des catégories présentes sur une page et

relever leur format• Distingue-t-on les données différentes ?

Hoésy Ergonomie23

1.3. Feedback immédiat *• Il s'agit d'informer l'utilisateur sur l'efficacit é de ses actions.

Dans tous les cas, l'ordinateur doit r épondre à l'utilisateur en fonction des actions et des requ êtes de ce dernier . Par exemple, dans les cas où les traitements sont longs, une information indiquant à l'utilisateur que les traitements sont en cours doit lui être fournie (extimer).

• Le syst ème doit r éagir à chacune des actions de l'utilisateur et ce quelquesoit la longueur du traitement (long ou non ).

• L'idée ici est surtout de penser à fournir un feedback à l’utilisateur. (Ensuite on doit juger de sa pertinence et de sa compréhensibilité).

Hoésy Ergonomie24

1.3. Exemple• L'action d'enregistrer un document doit avoir un correspondant

visuel permettant à l'utilisateur d'être certain que le système enregistre le document.

Hoésy Ergonomie25

1.3. Evaluation du Feed back• Pour chaque action possible pour l’utilisateur, vérifier :

• que la réponse du système est immédiate (ouverture d’une fenêtre);

• que, le cas échéant, l’utilisateur est informé que le temps de réponse sera long (timer).

Hoésy Ergonomie26

1.4. Lisibilité *

• Les caractéristiques lexicales de présentation des informations sur l'écran doivent faciliter la lecture de ces informations.

• Celle-ci dépend de la luminance des caractères, du contraste, du dimensionnement des lettres, de l’espacement entre les mots et entre les lignes, de leur format (l'italique est par exemple moins lisible qu'un format classique), de la taille des polices, l'espacement entre les lignes, entre les lettres, les contrastes fond / caractères, du style de présentation (par exemple, il est préférable de présenter un texte avec quelques lignes longues plutôt que de nombreuses lignes courtes etc ….).

Hoésy Ergonomie27

1.4. Exemple et contre exemple

Hoésy Ergonomie28

1.4. Evaluation• Appréciation subjective : Les informations sont elles correctement

lisibles ?• Questionnaire d’appréciation :

• Y-a-t-il moins de 3 polices de caractères ?• Les textes sont-ils écrits en minuscules ? La première lettre en

majuscules ? (sauf si information importante)• Le principe fond clair / lettre sombre est-il respecté ?• La police utilisé est-elle droite ? (Ex Arial ?)• Le texte est-il présenté avec des lignes longues ?• Le texte est-il aéré ?• L’affichage va-t-il varier avec les ordinateurs ?

• Décrire les caractéristiques lexicales du texte (contraste, taille, repérage du curseur, nombre de caractères par ligne….)

Hoésy Ergonomie29

2. Charge de travail

• Elle correspond à l'ensemble des éléments de l'interface qui ont un rôle dans la réduction de la charge perceptive ou mnésique des utilisateurs , de même que dans l'augmentation de l'efficacité du dialogue .

• Il faut fournir à l’utilisateur les moyens d'atteindre ses objectifs, le plus rapidement et le plus facilement possible.Dans l'idéal, l’ interface doit supporter la tâche de l'utilisateur de bout en bout. La charge de travail doit être reportée sur le système. La perception et la m émorisation des informations doivent être facilit ées.

Hoésy Ergonomie30

2.1. Brièveté• Limiter le travail de lecture, d'entr ée et les étapes par lesquelles

doivent passer les usagers• Il s'agit de limiter pour chaque paquet d'information l'effort à fournir

par l'utilisateur . • Les aspects perceptifs sont très importants pour alléger le travail de

l'utilisateur. L'information doit être présentée de façon claire et adaptée à ce que connaît l'utilisateur dans le monde réel.

• De plus, on doit faciliter le traitement cognitif des informations . La taille des groupes comme la taille des éléments individuels (mots, boutons, liens…) doivent donc être adaptés.

Hoésy Ergonomie31

2.1.1. Concision *

• Réduire la charge de travail au niveau perceptif et mné sique(perception et mémorisation) pour ce qui est des éléments individuels d'entrée ou de sortie .

• Par exemple, lorsqu'une unité de mesure est associée à un champ de données, celle-ci doit faire partie du label du champ plutôt qu'être saisie par l'utilisateur.

Hoésy Ergonomie32

2.1.1. Exemple

Hoésy Ergonomie33

2.1.2. Actions minimales *

• Limiter les étapes par lesquelles doivent passer les utilisateurs .

• Par exemple, ne pas demander aux utilisateurs d'entrer des données qui peuvent être déduites par le système.

• NB : si la concision s’intéresse aux éléments individuels, « actions minimales » traite d’un groupe d’actions.

Hoésy Ergonomie34

2.1.2. Contre exemple

GUICHET AUTOMATIQUE EN SERVICEInsérer votre carteEntrer votre code d'identification : 1234Sélectionner une opération : retraitDonner le montant du retrait : 7500 FLe montant doit être un multiple de 1000 F(La machine éjecte la carte)GUICHET AUTOMATIQUE EN SERVICE...(L'utilisateur doit tout recommencer)

Hoésy Ergonomie35

2.1.2. Évaluation• Pour chaque phase action, décrire ce que l’utilisateur :

• Doit percevoir ;• Doit mémoriser (mémoire de travail) • Doit faire.

• A partir de cette description, répondre aux questions :• La perception de l’information est-elle claire ? • La mémorisation est-elle minimisée ? • Les actions ont-elles été minimisées ?• L’utilisateur doit-il effectuer des traitements cognitifs (traduction

d’unités, mémorisation,..) ? Existe-t-il des raccourcis ?

Hoésy Ergonomie36

2.2. Densité informationnelle *• Réduire la charge de travail du point de vue perceptif et

mnésique, pour des ensembles d'éléments et non pour des items (ce qui doit être perçu et mémorisé globalement par l’utilisateur).

• Par exemple, limiter la densité informationnelle de l'écran, en affichant seulement les informations nécessaires.

Hoésy Ergonomie37

2.2. Contre Exemple

Hoésy Ergonomie38

2.2. Évaluation• Appréciation subjective : l’écran vous paraît-il dense ?

• Lister les informations à l’écran. Sont-elles toutes nécessaires à la tâche de l’utilisateur ?

Hoésy Ergonomie39

3. Contrôle explicite

• C’est la prise en compte par le système des actions explicites des utilisateurs et le contrôle qu'ont les utilisateurs sur le traitement de leurs actions (autrement dit, c’est l’utilisateur qui doit décider !).

Hoésy Ergonomie40

3.1. Actions explicites

• Expliciter la relation entre le fonctionnement de l'application et les actions des utilisateurs.

• Les décisions de l’utilisateur doivent s’appuyer sur d es actions explicites (et non sur des inférences).

• Par exemple, l'entrée de commandes doit se terminer par une indication de fin (« Enter » , « OK ») à laquelle des possibilités d'édition doivent être préalables.

Hoésy Ergonomie41

3.1. Évaluation• A partir des séquences d’actions, vérifier que l’utilisateur explicite

bien ce qu’il souhaite réaliser.

Hoésy Ergonomie42

3.2. Contrôle utilisateur *• L'utilisateur doit pouvoir contrôler le déroulement des

traitements informatiques en cours . • Autrement dit, il faut repérer si des actions sont faites

automatiquement par la machine (si c’est le cas, le critère sera négatif)

• Par exemple, il faut autoriser l'utilisateur à interrompre tout traitement en cours.

Hoésy Ergonomie43

3.2. Contre exemple

Hoésy Ergonomie44

3.2. Évaluation

• L’utilisateur peut-il quitter, abandonner facilement, interrompre un traitement en cours ? (prêter attention aux traitements longs)

• Est-il possible de revenir en arrière ? • Des actions sont-elles prises en charge de façon autonome par la

machine ?

Hoésy Ergonomie45

4. Adaptabilité

• Capacité d’un système à réagir selon le contexte et sel on les besoins et les préférences des utilisateurs .

• Autrement dit, c’est sa capacité à s’adapter.

Hoésy Ergonomie46

4.1. Flexibilité *• C’est la mise à disposition des utilisateurs de moyens pour

personnaliser l'interface afin de rendre compte de leurs stratégies ou habitudes de travail, et des exigences de la tâche. Autrement dit, c’est la capacité de l’interface à s’adapter à des modes opératoires variés des utilisateurs.

• Par exemple, les utilisateurs doivent pouvoir désactiver des affichages inutiles.

Hoésy Ergonomie47

4.1. Exemple

L’utilisateur choisit le contenu de sa fenêtre de travail d’accueil

Hoésy Ergonomie48

4.2. Prise en compte de l’expérience utilisateur• Le système doit respecter le niveau d'expérience de

l'utilisateur . • Par exemple, prévoir des choix d'entrées pas-à-pas ou multiples

selon l'expérience des utilisateurs.

Hoésy Ergonomie49

4.2. Exemple

Cette interface permet à un utilisateur de rechercher un mot clé selon 3 modalités.

Hoésy Ergonomie50

Évaluation• Quels sont les différents moyens mis à disposition de l’utilisateur

pour atteindre un but donné ?• Différents moyens sont-ils proposés à l’utilisateur pour déclencher

les mêmes commandes ?• Les commandes sont-elles accessibles au clavier ?• Peut-il personnaliser/paramétrer son interface selon ses

préférences ?• Lister ces différents moyens.

Hoésy Ergonomie51

5. Gestion des erreurs• Moyens permettant d'une part d'éviter ou de réduire le s

erreurs, d'autre part de les corriger lorsqu'elles survien nent.

Hoésy Ergonomie52

5.1. Protection des erreurs *

• Mettre en place des moyens pour détecter et prévenir les erreurs (avant validation) .

• Par exemple, toutes les actions possibles sur une interface doivent être envisagées et plus particulièrement les appuis accidentels des touches du clavier afin que les entrées non-attendues soient détectées .

Hoésy Ergonomie53

5.1. Exemple

Hoésy Ergonomie54

5.1. Évaluation• Quels sont les moyens mis en œuvre pour éviter les erreurs

(bouton grisés, liste de valeurs possibles,…)• Prévoir les différentes erreurs q’un utilisateur peut faire : saisie,

appui accidentel sur une touche• Comment l’utilisateur est-il prévenu de son erreur ?• NB : porter une attention particulière à tout ce qui est important

(sauvegarde, quitter,….).

Hoésy Ergonomie55

5.2. Qualité des messages d’erreur *

• S'assurer que l'information donnée aux utilisateurs sur la nature des erreurs commises (syntaxe, format, etc.) et sur les actions à entreprendre pour les corriger, soit pertinente, facile à lire et exacte .

• Il faut utiliser un vocabulaire neutre, non-personnalisé, non réprobateur dans les messages d'erreurs et éviter l'humour.

Hoésy Ergonomie56

5.2. Exemples

Hoésy Ergonomie57

5.2. Exemple et contre exemple

Hoésy Ergonomie58

5.2. Évaluation

• Lister les messages d’erreur Prévoir les différentes erreurs q’un utilisateur peut faire : saisie, appui accidentel sur une touche

• Valider leur qualité au niveau de l’origine des erreurs, des actions à entreprendre, de la neutralité de la syntaxe et de la visibilité des messages d’erreur.

Hoésy Ergonomie59

5.3. Correction des erreurs• Mettre à la disposition des utilisateurs des moyens p our

corriger leurs erreurs . • Par exemple, fournir la possibilité de modifier les commandes lors

de leur saisie.

Hoésy Ergonomie60

5.3. Exemples

Hoésy Ergonomie61

5.3. Évaluation• Décrire les moyens donnés à l’utilisateur pour corriger une erreur.• Les erreurs peuvent-elles être facilement corrigées ?• Existe-t-il un moyen de récupérer les données détruites ?

Hoésy Ergonomie62

6. Homogénéité / cohérence *

• Les choix de conception d'interface doivent être conservés pour des contextes identiques, et doivent être différents pour des contextes différents.

• Par exemple, toujours afficher au même endroit l'incitation pour la saisie des données ou des commandes.

Hoésy Ergonomie63

6. Les niveaux de cohérence• Cohérence inter-application• Cohérence intra-application

– coh. pragmatique– coh. sémantique– coh. syntaxique– coh. lexicale

• coh. spatiale• coh. grammaticale, linguistique

– coh. alphabétique

Hoésy Ergonomie64

6. Exemple

Hoésy Ergonomie65

6. Exemple

Hoésy Ergonomie66

6. Contre exemple du point de vue des manipulations

Hoésy Ergonomie67

6. Contre exemple syntaxique

Hoésy Ergonomie68

6. Évaluation• Balayer chaque type d’outils/item/ caractéristiques et regarder si la

logique de conception de l’interface est maintenue sur chaque page :

• L’agencement des fenêtres est-il semblable (tracé régulateur) ?• Les couleurs, les icônes et les polices de caractères sont-elles

utilisées de façon cohérente ?• Les formats de présentation des données sont-ils constants ?• Un vocabulaire uniforme est-il utilisé dans l’ensemble des

fenêtres ?

Hoésy Ergonomie69

7. Signifiance des codes et dénomination

• Il doit y avoir adéquation entre l'objet ou l'information affichée ou entrée, et son référent.

• Autrement dit, il ne doit pas y avoir d’ambiguïté dans le sens donnés aux mots ou aux icônes (et plus globalement àl’ensemble du langage)

• Par exemple, rendre les règles d'abréviation explicites.

Hoésy Ergonomie70

7. Contre exemple

Hoésy Ergonomie71

7. Exemple et contre exemple

Hoésy Ergonomie72

7. Évaluation• Passer en revue tous les libellés et les icônes pour valider leur

signification.

Hoésy Ergonomie73

8. Compatibilité

• Il faut qu'il y ait accord entre les caractéristiques des utilisateurs et des tâches, d'une part, et l'organis ation des sorties, des entrées et du dialogue d'une applicatio n donnée, d'autre part .

• Par exemple, les termes employés doivent être familiers aux utilisateurs, et relatifs à la tâche à réaliser.

• Autre exemple, une application de salle de contrôle doit s’y insérer.

Hoésy Ergonomie74

8. Niveaux de Compatibilité

• Compatibilité comportementale• Compatibilité sémantique• Compatibilité syntaxique• Compatibilité lexicale

– de support– grammaticale– linguistique– de standard

Hoésy Ergonomie75

8. Contre exemple

Ce monde utilise une métaphore incompatible avec l’objet travaillé.

Hoésy Ergonomie76

8. Évaluation• Le logiciel correspond-il au contexte d’utilisation ?• Le langage de l’interface est-il celui des utilisateurs ?• Les informations sont-elles présentées de manière cohérente par

rapport aux autres support de travail ?• L’accès aux commandes est-il adapté au contexte de réalisation

de la tâche ?

Hoésy Ergonomie77

Déroulement de la séance• Introduction• Présentation des 18 critères et évaluation en parallèle de

notre interface avec ces critères (si le timing le permet)• Conclusions

Hoésy Ergonomie78

Nécessaire, utile mais pas forcément suffisant

• Il faut considérer ces critères comme une « bible », un aide mémoireindispensable ;

• Il faut s’en servir autant en conception qu’en correction;

• Ses limites :• Risque d’oublier le point de vue utilisateur au détriment d’un

point de vue extérieur;• Donne des objectifs mais le chemin pour y parvenir ;• Très loin de la complexité du réel et de la logique utilisateur

(raisonnement). (cf l’évaluation terrain de notre logiciel de gestion de contenu)