Ergonomie des IHM

Ergonomie des IHM Module IHM, ESSI AlainGIBOIN (INRIA) Directives (Guidelines) Dernières modifications : 6 octobre 2004 Modèle PowerPoint emprunté à SRI International

Guideline Directive, indication d'une politique à suivre. [Harrap's Shorter] Ligne directrice Principe directeur Recommandation Norme Propriété Critère ... Directive (1890) Surtout plur.Indication, ligne de conduite donnée par une autorité (politique, militaire, religieuse). V. instruction, ordre.[Petit Robert] (v. 1974) Plur. Techn. Marche à suivre comportant souvent des indications chiffrées.[Petit Robert] Directives (Guidelines)Terminologie

Rappel (cf. cours L. Nigay) : Propriétés de Coutaz Directives « moralisatrices » Guides de style des constructeurs Normes ISO, etc. Heuristiques de Nielsen Critères ergonomiques de Scapin et Bastien Principes ergonomiques de Crampes Directives de Dumas Directives de C. Marlin Brown Directives Exemples nombreux

Utilisabilité = Souplesse + Robustesse Directives Propriétés de Coutaz Multiplicité du rendu (représentation multiple d’un même concept) Réutilisabilité des données d ’entrée et de sortie Adaptabilité Adaptivité Plasticité Migrabilité de tâche CARE1 (multimodalité) CARE (collecticiel) Appliqué aux rôles des acteurs d’un collecticiel Appliqué aux moyens technologiques pour collaborer Atteignabilité Non-préemption Préemption globale Préemption locale Préemption par un utilisateur de ressources partagées entre utilisateurs Interaction multifilaire Interaction multifilaire parallèle Interaction multifilaire parallèle Interaction multifilaire entrelacée Observabilité Observabilité publiée Réciprocité Réflexivité Insistance Honnêteté / Honnêteté sociale Curabilité Prévisibilité Tolérance du rythme Viscosité Rejouabilité Révisabilité 1CARE = Complémentarité / Assignation / Redondance / Équivalence

Bad Human Factors Designs Interface Hall of Shame Interface Hall of Shame Directives Directives « moralisatrices »

Directives Macintosh/Microsoft/IBM/OSF… Directives Guides de style des constructeurs OSF = Open Science Foundation

Normes relatives à : 1. L’utilisation du produit (dans un certain contexte d’usage) Efficacité (effectiveness) Efficience (efficiency) Satisfaction 2. L’interface utilisateur et l’interaction 3. Le processus utilisé pour développer le produit 4. La capacité d’une organisation à appliquer la conception centrée utilisateur Directives Normes ISO d’utilisabilité http://www.usability.serco.com/trump/resources/standards.htm

ISO/IEC FDIS 9126-1 : Software Engineering - Product quality - Part 1: Quality model Directives Normes ISO d’utilisabilité

ISO 13407: Human-centred design processes for interactive systems Directives Normes ISO d’utilisabilité

Guidage Charge de travail Contrôle explicite Adaptabilité Gestion des erreurs Homogénéité/Cohérence Signifiance des Codes et Dénominations Compatibilité http://www.inria.fr/RRRT/RT-0156.html www.webmaestro.gouv.qc.ca/ress/ Webeduc/2000nov/criteres.pdf http://www.ergoweb.ca/criteres.html Directives Critères ergonomiques de Bastien et Scapin

1. Guidage L'ensemble des moyens mis en oeuvre pour conseiller, orienter, informer et conduire l'utilisateur lors de ses interactions avec l'ordinateur. 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) _ _ / _ _ / _ _ Exemple d'incitation ratée Exemple d'incitation réussie Directives Critères ergonomiques de Bastien et Scapin

… au lieu de « Quebec » (« Québec », ou « QC ») Directives Critères ergonomiques de Bastien et Scapin 1. Guidage : 1.1 Incitation - Exemple d’incitation ratée Il fallait taper « PQ » (« Province de Québec »)

1. Guidage : 1.1 Incitation - Exemple d’incitation réussie Directives Critères ergonomiques de Bastien et Scapin Tâche : saisir un numéro d'abonné et un mot de passe a) Le numéro d'abonné est divisé en trois blocs de trois chiffres (champs de saisie) b) Le curseur se déplace automatiquement au bloc suivant

Principes mis en valeur par les ergonomes Cohérence Concision Retour d'informations Structuration des activités Flexibilité Gestion des erreurs Principes généraux de conception Employer des métaphores Favoriser l'approche objet-action Étudier les activités des utilisateurs Rendre l'interface cohérente Rendre l'interface transparente Directives Principes ergonomiques de Crampes

Incitations (prompts) Des incitations efficaces aident l’utilisateur à se rappeler comment exécuter des procédures Utilisez des incitations pour demander à l’utilisateur d’effectuer un choix simple, de saisir des données ou de taper une commande. Soyez aussi précis que possible (8-8) Directives Directives de Dumas

Guide de recommandations ergonomiques pour la conception et l’évaluation d’interfaces graphiques L’apparence des fenêtres Les principes de navigation Les principes de saisie Choix des actions de l’application par menu ou par bouton de commande Les actions du système L’aide en ligne (Corinne Ratier, CNRS) Directives Guides de recommandations de Ratier

Visibilité du statut du système Compatibilité entre système et monde réel Contrôle par l’utilisateur et liberté de l’utilisateur Cohérence et normes Prévention des erreurs Reconnaissance plutôt que rappel Flexibilité et efficacité d ’utilisation Esthétique et conception minimaliste Aider les utilisateurs a reconnaître, diagnostiquer et réparer les erreurs Aide et documentation Directives Heuristiques de Nielsen Jacob Nielsen www.useit.com

Directives Critères de Tricot et al. Dimensions de l’évaluation • Utilité • Utilisabilité • Acceptabilité Types d’évaluation • Empirique • Par inspection Tricot, Plégat-Soutjis, Camps, Amiel, Lutz et Morcillo http://archiveseiah.univ-lemans.fr/article.php?identifier=oai%3Ahal.ccsd.cnrs.fr%3Aedutice-00000154_v1

A. Formats d'affichage B. Langage C. Couleur D. Graphiques E. Dialogue F. Entrée des données G. Dispositifs de contrôle et d'affichage H. Messages d'erreurs et aide en ligne I. Implémentation de l’interface (C. Marlin “Lin” Brown (1988), “Human-Computer Interface Design Guidelines”, Xerox Corporation) Directives Directives de Brown

Plan de la présentation des directives Définition des « directives » D'où viennent les directives ? Concepts sous-jacents Conseils d'utilisation Types de directives Directives Directives de Brown

Définition Ensemble de suggestions pratiques et de lignes directrices pour les concepteurs de l'interface entre des systèmes informatiques et leurs utilisateurs Exemple Utiliser des icônes à la signification claire. Directives Directives de Brown

D’où viennent les directives ? Résultats expérimentaux Prédictions issues de théories de l'activité humaine Principes de psychologie cognitive Principes d'ergonomie Expérience en génie logiciel Jugements d'experts Sens commun Expérience pratique Directives Directives de Brown

Concepts sous-jacents Exigences du traitement mental Allocation de fonctions Modèles mentaux Cohérence Analogies physiques Attentes et stéréotypes Compatibilité stimulus-réponse Facilité d'apprentissage, facilité d'usage et fonctionnalité Novices, experts et utilisateurs occasionnels Éviter l'excès de fonctionnalités Fournir de chemins multiples Divulgation progressive et évolution élégante Directives Directives de Brown

Conseils d’utilisation Mise en garde :Les directives ne doivent pas être considérées comme définitives ni comme une panacée garantissant une interface optimale Conséquences : Se tenir au courant des nouvelles données expérimentales pouvant valider, étendre, nuancer ou invalider les directives Considérer chaque directive à la lumière des exigences particulières et descontraintes relatives aux utilisateurs, à l'équipement et à l'environnement de développement Utiliser le prototypage, les tests pilotes et les tests d'acceptation par les utilisateurs à toutes les étapes du développement du produit pour évaluer et raffiner les concepts avant leur intégration finale Directives Directives de Brown

Types de directives A. Formats d'affichage B. Langage C. Couleur D. Graphiques E. Dialogue F. Entrée des données G. Dispositifs de contrôle et d'affichage H. Messages d'erreurs et aide en ligne I. Implémentation de l’interface Directives Directives de Brown

Utilisez Les longs passages sont très difficiles à lire s'ils sont composés uniquement en lettres majuscules plutôt qu'en majuscules et en minuscules. N’utilisez pas LES LONGS PASSAGES SONT TRÈS DIFFICILES À LIRE S'ILS SONT COMPOSÉS UNIQUEMENT EN LETTRES MAJUSCULES PLUTÔT QU'EN MAJUSCULES ET EN MINUSCULES. Directives Directives de Brown : A. Formats d’affichage • Texte en prose Utilisez à la fois les majuscules et les minuscules pour composer un texte Chaque fois que le dispositif d'affichage autorise les majuscules et les minuscules, présentez vos textes dans les deux casses.Engel & Granda, 1975; Galitz, 1981, 1985; Hinsley & Hanes, 1977; Marcus, 1980, 1984; Seibel, 1972 Exceptions.- On peut utiliser les majuscules : 1/ Quand la visibilité des caractères est limitée par leur taille réduite ou par une dégradation de la vue. 2/ Dans un tableau, pour distinguer les titres des données

Terminologie familière Utilisez des termes familiers Évitez les mots difficiles, les abréviations et les acronymes qui ne sont pas utilisés communément par les utilisateurs. Utilisez Ces données exigent un code spécial d'accès. Merci d'appeler le Centre de calcul, poste 2985. N’utilisez pas IMS/VS DBMS CLASS IV DATA. SEE DBSA, W75B37-59 Directives Directives de Brown : B. Langage

Code des couleurs Utilisez les codes de couleurs admis communément Utilisez Blanc /NoirCouleur fondamentale Rouge Alarmes ou erreurs; Stop Jaune Avertissements ou données exigeant de l'attention Vert Normal ou OK; Allez; Couleur de base si blanc trop clair Bleu saturé Mise en retrait. Ne pas utiliser pour les données critiques Bleu dé-saturé Température froide ou eau Rose (Magenta) Couleur d'alarme secondaire, différenciation de données Turquoise (Cyan) Différenciation de types de données Autres couleursDifférenciation de types de données Directives Directives de Brown : C. Couleur

Icônes Utilisez des icônes à la signification claire Des icônes bien conçues s'expliquent d'elles-mêmes, tout au moins dans le contexte dans lequel elles sont utilisées. Il existe plusieurs astuces pour concevoir des icônes claires Utilisez N’utilisez pas Directives Directives de Brown : D. Graphiques (Signification claire = icône d’imprimante) (Signification obscure = icône d’imprimante)

Commandes cohérentes Utilisez des couples de commandes cohérents Pour les opérations ayant leur inverse ou leur contrepartie, comme ouvrir et fermer un fichier, utilisez des couples cohérents de commandes. Les couples cohérents sont habituellement formés d'opposés ou d'inverses. Utilisez Lire / Écrire Ouvrir / Fermer Haut / Bas Oui / Non Directives Directives de Brown : E. Dialogue N’utilisez pas Lire / Fermer Ouvrir / Sauvegarder Précédent / Bas Oui / Off

Spécification de formats Indiquez le format correct d’entrée Afficher le format requis pour entrer les données. Ce format apparaîtra comme élément de l'intitulé d'entrée ou comme incitation (« prompt »).Galitz, 1981 Utilisez DATE DE DÉPART (JJMMAA) : - - - - - - N’utilisez pas DATE DE DÉPART Directives Directives de Brown : F. Entrée des données

Touches vitesse curseur Fournir un mode vitesse curseur Directives Directives de Brown : G. Dispositifs de contrôleet d’affichage

Messages d’erreurs utiles Rendez instructifs les messages d’erreurs Les messages d'erreurs doivent toujours énoncer (ou impliquer clairement) au moins : quelle erreur a été détectée; quel champ d'entrée contient l'erreur; quelle action correctrice doit être effectuée. Engel & Granda, 1975; Pew & Rollins, 1975; Shneiderman, 1979 Directives Directives de Brown : H. Messages d’erreurs et aide en ligne (1) Utilisez Le format du nombre de parties doit comporter deux lettres puis trois chiffres. N’utilisez pas Entrée invalide.

Contenu de l’aide en ligne L'aide en ligne explique les écrans, les champs, les codes et les messages. Catégories d'assistance pouvant être utiles : explication brève de la fonction de l'écran ou de la transaction; descriptions des champs d'entrée (définitions, unités, formats, entrées valides; descriptions des champs de données de sorties (définitions, unités, formats, mode de calcul des valeurs); définition des codes, des commandes et des abréviations utilisés; explication des messages d'erreurs et conseils pour corriger les erreurs; allocation des touches fonction; exemples de procédures, de commandes et de syntaxe correctes, Brown, 1982; Limanowski, 1983 Directives Directives de Brown : H. Messages d’erreurs et aide en ligne (2)

Aide en ligne(HELP) pertinente Fournir une aide en ligne spécifique à la situation [ou contextuelle] Quand les utilisateurs font appel à l'aide en ligne, leur problème est souvent lié à la transaction en cours lorsque la fonction HELP a été appelée; aussi est-il souvent désirable d'afficher automatiquement l'écran ou la fenêtre d'aide associée à la transaction courante; cette aide [contextuelle] permet d'éviter à l'utilisateur des recherches longues ou infructueuses dans les pages d'aide; des systèmes plus sophistiqués permettent de « pointer » un objet ou un item de l'interface et d'obtenir une aide spécifique sur cet objet ou cet item. Directives Directives de Brown : H. Messages d’erreurs et aide en ligne (3)

Stratégies et suggestions pour intégrer les directives dans le processus de conception du système entier Déterminer le rôle de l'interfacedans le développement du système (*) Connaître les utilisateurs (*) Définir les tâches (*) Inclure les directives Former les concepteursde logiciels à la conception d'interfaces Développer les outils logiciels d'interfaçage Prototyper, et « tester » l'utilisateur (*) Concevoir par raffinements itératifs (*) Points développés par la suite Directives Directives de Brown : I. Implémentation de l’interface (1)

Déterminer le rôle de l'interface dans le développement du système Participation à l'équipe de conceptionLe concepteur de l'interface est un membre à part entière de l'équipe de conception du système. Choix de conceptionLe concepteur doit accepter la nécessité d'envisager et de faire des choix de conception Directives Directives de Brown : I. Implémentation de l’interface (2)

Connaître les utilisateurs Analyse des fonctionsAnalyser et définir les fonctions du système Analyse de la tâcheAnalyser les tâches de l'utilisateur Analyse des tâches existantes Analyse des tâches nécessaires pour manipuler le système Directives Directives de Brown : I. Implémentation de l’interface (3)

Prototyper et « tester » l’utilisateur Test utilisateur Faire des tests sur des utilisateurs réels Mesure du comportement Mesurer le comportement de l'utilisateur et non seulement ses opinions Tests papier Les premiers tests peuvent être des tests sur papier Tests de simulation Les tests pré-opérationnels peuvent simuler les systèmes planifiés Tests par prototype Utiliser des prototypes du système pour effectuer les tests Directives Directives de Brown : I. Implémentation de l’interface (4)

UsernoMics : http://www.usernomics.com/ Usable Web : http://www.usableweb.com/ HCI Bibliography : http://www.hcibib.org/ L’ergonome : http://www.lergonome.org/pages/accueil.php Ergoweb : http://www.ergoweb.ca/ Quelques sites

Introduction Panorama des méthodes Méthode des scénarios Directrices (Guidelines) Evaluation coopérative Évaluation heuristique et Cognitive Walkthrough Plan du cours

Ergonomie des IHM