Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

40
Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guideline

Transcript of Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Page 1: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Ergonomie des IHM Module IHM, ESSI

Alain GIBOIN (INRIA)

Directives (Guidelines)

Page 2: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives (Guidelines)Terminologie

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]

Page 3: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Exemples nombreux

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

Page 4: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Propriétés de Coutaz

Utilisabilité = Souplesse + Robustesse

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é

1 CARE = Complémentarité / Assignation / Redondance / Équivalence

Page 5: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives « moralisatrices »

Bad Human Factors Designs

Interface Hall of Shame

Interface Hall of Shame

Page 6: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Guides de style des constructeurs

Directives Macintosh/Microsoft/IBM/OSF…

OSF = Open Science Foundation

Page 7: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Normes ISO d’utilisabilité

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

http://www.usability.serco.com/trump/resources/standards.htm

Page 8: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Normes ISO d’utilisabilité

ISO/IEC FDIS 9126-1 :

Software Engineering -

Product quality - Part 1:

Quality model

Page 9: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Normes ISO d’utilisabilité

ISO 13407:

Human-centred

design

processes for

interactive

systems

Page 10: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Critères ergonomiques de Bastien et Scapin

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

Page 11: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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

Page 12: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Critères ergonomiques de Bastien et Scapin

Il fallait taper « PQ » (« Province de Québec »)

… au lieu de « Quebec »

(« Québec », ou « QC »)

1. Guidage : 1.1 Incitation - Exemple d’incitation ratée

Page 13: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Critères ergonomiques de Bastien et Scapin

Tâche : saisir un numéro d'abonné et un mot de passe

1. Guidage : 1.1 Incitation - Exemple d’incitation réussie

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

Page 14: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Principes ergonomiques de Crampes

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

Page 15: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Dumas

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)

Page 16: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Guides de recommandations de Ratier

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)

Page 17: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Heuristiques de Nielsen

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

Jacob Nielsen www.useit.com

Page 18: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown

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)

Page 19: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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

Page 20: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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.

Page 21: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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

Page 22: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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

Page 23: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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 des contraintes 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

Page 24: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

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

Page 25: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : A. Formats d’affichage

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.

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.

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

Page 26: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : B. Langage

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.

N’utilisez pas

IMS/VS DBMS CLASS IV DATA. SEE DBSA, W75B37-59

Utilisez

Ces données exigent un code spécial d'accès. Merci d'appeler le Centre de calcul, poste 2985.

Page 27: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : C. Couleur

Code des couleurs Utilisez les codes de couleurs admis communément

Utilisez

Blanc Blanc / Noir Couleur 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 couleurs Différenciation de types de données

Page 28: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : D. Graphiques

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

(Signification claire = icône d’imprimante)

(Signification obscure = icône d’imprimante)

Page 29: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : E. Dialogue

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

N’utilisez pas

Lire / Fermer Ouvrir / Sauvegarder Précédent / Bas Oui / Off

Page 30: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : F. Entrée des données

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

N’utilisez pas

DATE DE DÉPART

Utilisez

DATE DE DÉPART (JJMMAA) : - - - - - -

Page 31: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : G. Dispositifs de contrôle et d’affichage

Touches vitesse curseur Fournir un mode vitesse curseur

Page 32: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : H. Messages d’erreurs et aide en ligne (1)

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

N’utilisez pas

Entrée invalide.

Utilisez

Le format du nombre de parties doit comporter deux lettres puis trois chiffres.

Page 33: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : H. Messages d’erreurs et aide en ligne (2)

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

Page 34: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : H. Messages d’erreurs et aide en ligne (3)

Aide en ligne (HELP) pertinenteFournir 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.

Page 35: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : I. Implémentation de l’interface (1)

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'interface dans le développement du système (*)

Connaître les utilisateurs (*)

Définir les tâches (*)

Inclure les directives

Former les concepteurs de 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

Page 36: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : I. Implémentation de l’interface (2)

Déterminer le rôle de l'interface dans le développement du

système Participation à l'équipe de conception

Le concepteur de l'interface est un membre à part entière de l'équipe de conception du système.  

Choix de conception Le concepteur doit accepter la nécessité d'envisager et de faire des choix de conception

Page 37: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : I. Implémentation de l’interface (3)

Connaître les utilisateurs Analyse des fonctions

Analyser et définir les fonctions du système  

Analyse de la tâche Analyser les tâches de l'utilisateur

Analyse des tâches existantes

Analyse des tâches nécessaires pour manipuler le système

Page 38: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Directives Directives de Brown : I. Implémentation de l’interface (4)

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

Page 39: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Quelques sites

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/

Page 40: Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Plan du cours

Introduction

Panorama des méthodes

Méthode des scénarios

Directrices (Guidelines)

Evaluation coopérative

Évaluation heuristique et Cognitive Walkthrough