See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/373579596

IHM (cours, TD et TP)

Book · September 2023

CITATIONS READS

0 16

1 author:

Khadidja Belattar
University of Algiers, Faculty of Sciences
14 PUBLICATIONS 49 CITATIONS

SEE PROFILE

All content following this page was uploaded by Khadidja Belattar on 01 September 2023.

The user has requested enhancement of the downloaded file.

 République Algérienne Démocratique et Populaire
Ministère de l'Enseignement Supérieur et de la Recherche Scientifique
Université Benyoucef Benkhedda - Alger1
Faculté des Sciences

Département : Informatique
Domaine : Mathématiques et Informatique
Filière : Informaique

Polycopié pédagogique
Interface Homme-Machine
(cours, TD et TP)
Destiné aux étudiants de la :
3 ième année Licence
Spécialité : Systèmes Informatiques (SI)

Réalisé par : Dr. BELATTAR Khadidja

2021/2022
Avant-propos

Le présent polycopié de cours est le fruit de quatre années d'expérience dans l'ensei-

gnement du module  Interface  Homme Machine . Il est destiné aux étudiants de la

ime
3 année Licence informatique, spécialité Systèmes Informatiques (SI) de l'université

d'Alger1. Le cours IHM se déroule sous forme de cours magistral, de Travaux Dirigés

(TD) et de Travaux Pratiques (TP) hebdomadaires d'une durée de 1h30, conformément

au canevas déni par arrêté ministériel du ministère de l'enseignement supérieur et de la

recherche scientique.

Comme pré-requis du module, les étudiants concernés doivent avoir des acquis relatifs

aux génie logiciel, le langage de modélisation UML et la programmation orientée objet

notamment le langage " Java ".

L'objectif du cours est l'acquisition par tout étudiant, des connaissances (théoriques,

pratiques) et des compétences fondamentales pour la spécication, la conception et le

développement des systèmes interactifs ergonomiques, ainsi que la maîtrise des outils

nécessaires pour ce type de développement.

Les modalités d'évaluation des acquis des étudiants consistent en trois modes d'évaluation

portés sur le programme pédagogique durant le semestre. Il s'agit de :

• Contrôle continu du TD : une note sur 20 établie à partir du travail personnel de

l'étudiant durant le semestre et une interrogation écrite.

• Contrôle continu du TP : une note sur 20 de mini projet et d'un contrôle individuel

de TP. La moyenne de deux notes obtenues (celles de TD et de TP) sera la note du

contrôle continu.
• Mode d'évaluation du cours : examen écrit d'une durée de 1h30 en n de semestre.

Par conséquent, la note nale du module se calcule par la pondération de la note du

contrôle continu (40%) avec la note de l'examen (60%).

L'unité acquise apporte l'Unité Fondamentale 2 (UF2).

Le contenu du polycopié est scindé en cinq chapitres, à savoir :

X Chapitre 1 : Fondamentaux des Interfaces Homme-Machine

X Chapitre 2 : Sciences cognitives

X Chapitre 3 : Ergonomie des Interfaces Homme-Machine

X Chapitre 4 : Conception des Interfaces Homme-Machine

X Chapitre 5 : Évaluation des Interfaces Homme-Machine

Chaque chapitre est traité à travers des séquences pédagogiques permettant l'assimilation

des concepts prévus, cette assimilation est consolidée par des activités d'apprentissage

(séries d'exercices corrigés, devoirs et mini-projet) où ces notions sont mises en ÷uvre.

Aussi, et pour un accès rapide et permanent au plan détaillé du cours, ce dernier est

disponible en ligne via la plateforme d'enseignement à distance Moodle de l'université

d'Alger 1 : https://cours-sci.univ-alger.dz/course/view.php?id=2480.
Résumé

L'Interface Homme Machine (IHM) représente le principal composant d'un système in-

teractif permettant à ses utilisateurs d'interagir ou de contrôler des machines, des proces-

sus ou des services. Les IHM ont considérablement évoluées ces dernières années. Certes,

le besoin d'ecacité, d'ecience, de sécurité, de cohérence, de mobilité et de services à dis-

tance a suscité la forte demande de bien concevoir et développer des interfaces utilisables

avec une expérience améliorée de l'utilisateur.

Ce polycopié est consacré à présenter les aspects théoriques et pratiques de base pour

concevoir et développer des interfaces homme-machine.

Certes, la réalisation d'une IHM utilisable n'est pas seulement lié à l'informatique mais

en une intégration de diérentes sciences à savoir le génie logiciel, les sciences cogni-

tives et l'ergonomie. Par conséquent, une collaboration entre les diérents intervenants

du processus de développement des systèmes informatiques interactifs est particulièrement

nécessaire.
Table des matières

Table des matières i

Table des gures iv

Liste des tableaux vii

Acronymes viii

Introduction 1

1 Fondamentaux des Interfaces Homme-Machine 3

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 Dénitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.3 Évolution des IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.3.1 Interface monodirectionnelle asynchrone . . . . . . . . . . . . . . . 15

1.3.2 Interface textuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.3.3 Interface graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.3.4 Interface naturelle (multimodale) . . . . . . . . . . . . . . . . . . . 16

1.4 Besoins de l'IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

1.5 Intérêt de l'IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

1.6 Adapter une IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

1.6.1 Caractéristiques de l'utilisateur . . . . . . . . . . . . . . . . . . . . 24

1.6.2 Caractéristiques de la tâche . . . . . . . . . . . . . . . . . . . . . . 25

1.6.3 Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

1.6.4 Technologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

i
 1.7 Disciplines connexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

1.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

2 Sciences cognitives 37
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2.2 Sciences cognitives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

2.3 Modèle cognitif du processeur humain . . . . . . . . . . . . . . . . . . . . . 39

2.3.1 Sous système sensoriel . . . . . . . . . . . . . . . . . . . . . . . . . 41

2.3.2 Sous système cognitif . . . . . . . . . . . . . . . . . . . . . . . . . . 45

2.3.3 Sous système moteur . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.4 Théorie de l'action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

2.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3 Ergonomie des Interfaces Homme-Machine 59

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

3.2 Ergonomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

3.3 Ergonomie des IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

3.4 Méthodes d'ergonomie des IHM . . . . . . . . . . . . . . . . . . . . . . . . 61

3.5 Critères de Bastien et Scapin . . . . . . . . . . . . . . . . . . . . . . . . . 63

3.6 Performance du couple Homme-Machine . . . . . . . . . . . . . . . . . . . 72

3.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

4 Conception des Interfaces Homme-Machine 84

4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

4.2 Cycle de développement d'un logiciel . . . . . . . . . . . . . . . . . . . . . 84

4.3 Conception spécique aux systèmes interactifs . . . . . . . . . . . . . . . . 92

4.3.1 Démarche ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . 94

4.3.2 Modèles de tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

4.3.3 Modèles d'architecure . . . . . . . . . . . . . . . . . . . . . . . . . 104

4.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

5 Évaluation des Interfaces Homme-Machine 120

5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

5.2 Principe de l'évaluation des IHM . . . . . . . . . . . . . . . . . . . . . . . 120

ii
 5.3 Objectifs et intervenants d'évaluation des IHM . . . . . . . . . . . . . . . . 122

5.4 Utilisabilité et utilité d'une IHM . . . . . . . . . . . . . . . . . . . . . . . 123

5.5 Méthodes d'évaluation d'IHM . . . . . . . . . . . . . . . . . . . . . . . . . 124

5.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Bibliographie 148

iii
Table des gures

1.1 Exemples des IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.2 Interface multimodale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.3 Interface Wikipédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.4 Exemples des IHM orientées à l'interaction gestuelle . . . . . . . . . . . . . 10

1.5 Exemples des IHM relatives à l'interaction tangible . . . . . . . . . . . . . 10

1.6 Évolution des modes d'interaction . . . . . . . . . . . . . . . . . . . . . . . 10

1.7 Système informatique interactif . . . . . . . . . . . . . . . . . . . . . . . . 11

1.8 Exemples des systèmes interactifs : (a) Application Web client serveur (b)

Assistant médical "SARA" (Sanbot, 2019), (c) Application mobile du E-

learning, (d) Système lié à la réalité augmentée, (e) Système lié à la réalité

diminuée, (f ) Système de contrôle de qualité des moteurs basé sur la réa-

lité mixte (fabriqué par "Renault Trucks", 2017), (g) Jeu vidéo en réalité

virtuelle, (h) Système lié à la réalité tangible, (i) Collecticiel (éditeur de

code CLOUD9), (j) Sac à dos intelligente "SEIL bag" (Lee Myung Su, Park

Geun Wan et Park Okhee, 2010), (k) Outil de la reconnaissance de tracé,

(l) Outil de la reconnaissance d'écriture manuscrite . . . . . . . . . . . . . 14

1.9 Expérience de l'utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.10 Chronologie des IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

1.11 Historique des IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

1.12 Tableaux de bord d'un Airbus A330 et d'un Boeing 747 . . . . . . . . . . 22

1.13 Bulletin de vote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

1.14 Composants de base de l'Interaction Homme-Machine . . . . . . . . . . . . 24

iv
2.1 Modèle de l'interaction pour la tâche  partager la connexion . . . . . . . 39

2.2 Système de traitement de l'information . . . . . . . . . . . . . . . . . . . . 40

2.3 Modèle du processeur humain . . . . . . . . . . . . . . . . . . . . . . . . . 40

2.4 Loi de bonne forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.5 Loi de bonne continuité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.6 Loi de proximité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.7 Loi de similarité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

2.8 Loi de clôture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

2.9 Loi de proximité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

2.10 Types de pointage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

2.11 Menu Window d'options . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

2.12 Formulaires d'information . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

2.13 Principe de la théorie de l'action . . . . . . . . . . . . . . . . . . . . . . . . 50

3.1 Guidage-incitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

3.2 Guidage  groupement et distinction . . . . . . . . . . . . . . . . . . . . . 65

3.3 Guidage  Feedback immédiat . . . . . . . . . . . . . . . . . . . . . . . . . 66

3.4 Guidage  Lisibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

3.5 Charge de travail  Brièveté . . . . . . . . . . . . . . . . . . . . . . . . . . 67

3.6 Charge de travail  Densité informationnelle . . . . . . . . . . . . . . . . . 67

3.7 Contrôles explicites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

3.8 Adaptabilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

3.9 Gestion des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

3.10 Homogénéité et cohérence . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

3.11 Signication des codes et dénomination . . . . . . . . . . . . . . . . . . . 71

3.12 Compatibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

4.1 Diagramme de transition de "cliquer-glisser" . . . . . . . . . . . . . . . . 86

4.2 Gestionnaire d'événements de message d'aide de l'utilisateur . . . . . . . . 88

4.3 Modèle cascade de développement logiciel . . . . . . . . . . . . . . . . . . 90

4.4 Modèle en V de développement logiciel . . . . . . . . . . . . . . . . . . . . 91

4.5 Modèle spirale de développement logiciel . . . . . . . . . . . . . . . . . . . 92

4.6 Conception centrée sur l'utilisateur . . . . . . . . . . . . . . . . . . . . . . 93

v
4.7 Démarche ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

4.8 Modèle conceptuel générique . . . . . . . . . . . . . . . . . . . . . . . . . 96

4.9 Exemple de persona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

4.10 Croquis, maquette et prototype d'une page web . . . . . . . . . . . . . . . 98

4.11 Méthodes utilisées pour le développement d'un système interactif . . . . . 101

4.12 Modèle de tâches hiérarchique . . . . . . . . . . . . . . . . . . . . . . . . . 102

4.13 Modèle cognitif de tâches pour l'activité "envoyer un sms" . . . . . . . . . 103

4.14 Un système interactif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

4.15 Modèle de SEEHEIM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

4.16 Modèle ARCH . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

4.17 Modèle ARCH d'une application . . . . . . . . . . . . . . . . . . . . . . . . 108

4.18 Modèle PAC d'une application . . . . . . . . . . . . . . . . . . . . . . . . . 108

4.19 Exemple illustrant le modèle PAC d'une application . . . . . . . . . . . . . 109

4.20 Modèle MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

4.21 Fonctionnement du Modèle MVC . . . . . . . . . . . . . . . . . . . . . . . 110

4.22 Exemple du Modèle MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

5.1 Principe de l'évaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

5.2 Méthodes de l'évaluation d'une IHM . . . . . . . . . . . . . . . . . . . . . 125

5.3 Démarche d'évaluation lors de conception la . . . . . . . . . . . . . . . . . 127

5.4 Grille d'évaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

5.5 Dix heuristiques de Nielson . . . . . . . . . . . . . . . . . . . . . . . . . . 130

5.6 Interface (a) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

5.7 Interface (b) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

5.8 Accessibilité et visibilité des zones . . . . . . . . . . . . . . . . . . . . . . . 138

5.9 Organisation d'un écran gabarit . . . . . . . . . . . . . . . . . . . . . . . . 138

5.10 Fenêtre (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

5.11 Fenêtre (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

5.12 Fenêtre (3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

vi
Liste des tableaux

1.1 Un exemple de prol utilisateur . . . . . . . . . . . . . . . . . . . . . . . . 25

1.2 Mapping entre le prol utilisateur et ses exigences . . . . . . . . . . . . . . 25

1.3 Caractéristiques de la tâche "recherche d'information" . . . . . . . . . . . . 26

1.4 Contexte d'usage d'un système interactif . . . . . . . . . . . . . . . . . . . 27

vii
Acronymes

IHM Interaction Homme-Machine

UML Unied Modeling Language

GPS Global Positioning System

WIMP Window, Icon, Menu, Pointer

WYSIWYG What You See Is What You Get

UX User eXperience

UID User Interface Design

UXD User eXperience Design

GOMS Goal, Operators, Method, Selection

PAC Présentation, Abstraction, Contrôle

MVC Modèle, Vue, Contrôleur

CLG Command, Language, Grammar

ALG Action, Language, Grammar

TLG Task, Language, Grammar

ISL Interface State Language

BNF Backus Naur Form

DCG Denite Clause Grammar

TOOD Task Object Oriented Description

ICOs Interactive Cooperative Objects

viii
Introduction

Avec l'avènement des nouvelles technologies, l'interaction homme machine revêt une im-

portance de plus en plus croissante. Elle est déployée dans tous les secteurs d'activité où

le fonctionnement des systèmes automatiques implique l'intervention d'opérateur humain.

Le dé est de concevoir et développer une interface homme-machine qui soit non seulement

simple et facile à utiliser correspondant ainsi à l'exigence d'utilisabilité mais qui permette

également à l'utilisateur de vivre des expériences positives lors de son interaction.

La valeur ajoutée des IHM utilisables se retrouve dans la facilité d'utilisation, dans un

rendement plus élevé et une meilleure productivité, dans des tâches accomplies plus rapi-

dement, dans une plus grande satisfaction des utilisateurs, une conance accrue dans les

systèmes, et aussi moins d'erreurs d'utilisation.

A cet égard, ce polycopié présente l'état de l'art (en termes de méthodes et outils) concer-

nant la conception et l'évaluation des interfaces homme-machine dans les systèmes inter-

actifs.

Dans le premier chapitre, nous nous sommes mis dans le contexte des systèmes interactifs

dans lesquels nous avons présenté les diérents concepts clés notamment les interfaces

homme-machine et avons détaillé par la suite les quatre niveaux d'adaptation (utilisateur,

tâche, contexte et technologie) à prendre en compte lors de la réalisation d'une interface

homme-machine.

Dans le deuxième chapitre, nous passons en revue les notions fondamentales liées aux

sciences cognitives, ensuite nous décrivons le modèle cognitif du processeur humain et la

théorie de l'action.

1
Dans le troisième chapitre, nous présentons l'ergonomie des interfaces homme-machine.

De surcroît, nous abordons de diérents critères ergonomiques notamment les critères de

Bastien et Scapin.

Dans le quatrième chapitre, nous avons dressé les principaux modèles, méthodes et outils

de la conception des systèmes interactifs.

Dans le cinquième chapitre, nous avons donné un aperçu des méthodes d'évaluation de

l'utilisabilité des interfaces homme-machine.

L'achèvement de ce travail nous a permis de percevoir les diérents aspects des méthodes

abordées pour la conception et la réalisation d'une interface homme-machine utilisable.

En eet, ces méthodes peuvent et doivent se baser sur une démarche pluridisciplinaire

utilisant conjointement les spécicités de l'informatique et des sciences cognitives.

2
Chapitre 1
Fondamentaux des Interfaces
Homme-Machine

1.1 Introduction

Aujourd'hui, l'informatique est omniprésente dans la pratique courante de notre vie. En

fait, nous déployons quotidiennement des systèmes interactifs informatisés ; dans les ma-

gasins, au bureau, à l'université, à l'hôpital mais aussi dans nos foyers. Cependant, la

question de l'interaction des utilisateurs avec ces systèmes informatiques se pose. Face à

cet exigence, les Interfaces Homme- Machine (IHM) ont été alors émergées.

Après les micro-ordinateurs, puis les objets numériques, ensuite les objets connectés et

intelligents, c'est maintenant au tour de l'Interface Homme-Machine d'être disponible par-

tout, accessible à tous ! C'est pourquoi il a fallu l'adapter aux besoins de l'utilisateur,
pour permettre à tous de s'y retrouver au niveau pratique ( facile à utiliser) mais aussi
économique ( moins de coûts) !
Il importe donc de comprendre comment spécier, concevoir et développer une interface

dite ergonomique.
L'objet de ce chapitre est de connaitre les bases théoriques de l'IHM.

Dans ce qui suit, nous allons aborder les concepts fondamentaux accordés à l'IHM.

3
 1.2 Dénitions

Interface : une zone, réelle ou virtuelle qui sépare deux éléments (opérateur, équipement)

où chaque élément a besoin de connaître l'autre pour pouvoir fonctionner correctement

(http://iihm.imag.fr/blanch/ens/2018-2019/RICM4/IHM/).

Interaction : une action (et réaction) ou inuence réciproque qui peut s'établir entre deux

objets ou plus. Elle implique une modication de l'état des objets en interaction.

Pour [Saer, 2010], une interaction est une transaction entre deux entités (utilisateurs,

machines, systèmes, etc.), typiquement un échange d'information, de biens ou de services.

Interface Homme-Machine : un ensemble des dispositifs matériels (entrées et sorties :

réseau et ses constituants, clavier, souris, tactile, écran, etc.) et logiciels (site web, service,

code, etc.) mis au point et mis à la disposition de l'utilisateur pour lui permettre d'interagir

(commander, contrôler, superviser) avec un système interactif en vue de l'accomplissement

de certaines tâches.

Prenons l'exemple de la télévision (http://fr.tab-tv.com/2019/05/28/la-telecomman\

de-lg-magic-remote-ne-fonctionne-pas-comment-la-reparer) : la télécommande re-

présente l'interface. L'utilisateur peut interagir avec la télévision (l'utiliser) grâce à la

télécommande ; regarder la télévision ou changer de chaines.

Autre exemple, la voiture (https://www.euro-assurance.com/actualites-assuran\

ce/concept-i-voiture-intelligente-toyota.html) : le tableau de bord + le volant

+ les pédales + le levier de vitesse forment ensemble l'interface de la voiture.

Télécommande magique de LG Voiture intelligente de Toyota

Figure 1.1  Exemples des IHM

Une dénition plus formelle a été proposée par [Gaussier and Pitti, 2015], l'Interface

Homme-Machine pourrait se dénir comme un ensemble des aspects d'interaction avec un

4
 système informatique : pousser un bouton, bouger la souris, déplacer les doigts, etc.

Interface Homme-Machine plastique : une interface qui s'adapte au contexte d'in-

teraction (dit aussi contexte d'usage) tout en conservant son utilisabilité [Thevenin
and Coutaz, 1999].

Dans cette dénition, le contexte d'usage est classiquement entendu comme le triplet

<utilisateur, plateforme, environnement> [Calvary et al., 2003] où :

- L'utilisateur : représente une classe prototypique (informaticien, enfant, personnes âgées,

etc.) d'utilisateur envisagée pour le système.

- La plate-forme : est l'infrastructure matérielle (ordinateur, tablette, téléphone, télévi-

sion, GPS, électroménager, supports de stockage, ressources réseau, clavier, souris, écran,

etc.) et logicielle relative au système. Celles-ci constituent une unité de calcul opération-

nelle dont l'état peut être observé et/ou modié par l'utilisateur.

- L'environnement : correspond au lieu physique et social dans lequel se situe l'interaction

avec les caractéristiques organisationnelles. L'utilisateur n'est plus conné à un lieu xe

(bureau, maison, etc.) ou à un environnement social particulier (seul, avec des collègues,

avec des amis, etc.). Il interagit désormais dans la rue, dans les transports en commun,

lors de fêtes familiales, de réunions de bureau, etc.

La notion de plasticité des IHM permet de faciliter la vie du développeur (lors de la

conception) et celle de l'utilisateur (lors de l'exploration du système) en prenant en compte

l'ensemble des attributs (et leurs relations) qui caractérisent le triplet "utilisateur, plate-

forme, environnement".

Prenons les trois exemples ci-après :

- Exemple 1 : IHM plastique sensible à l'environnement

Un téléphone mobile, sensible à l'ambiance, suggère ou enclenche le mode vibreur lors

d'une réunion.

- Exemple 2 : IHM plastique sensible au changement de la plate-forme

La disposition des informations est ré-aménagée en fonction du changement d'orienta-

tion de l'écran. Ou encore, l'orateur choisit de faire migrer son exposé présenté sur son

PDA vers un tableau mural contrôlé par un ordinateur.

- Exemple 3 : IHM plastique sensible au changement de la classe d'utilisateurs

L'utilisateur prête son PDA à un ami mal-voyant : la modalité vocale se substitue à la

modalité graphique.

5
Interface Homme-Machine personnalisée : une interface qui s'adapte au prol de
l'utilisateur courant [Simonin and Carbonell, 2007].
Nous distinguons deux types d'interfaces personnalisées :

- Interface adaptable : l'utilisateur a la possibilité d'adapter l'interaction à ses préfé-

rences personnelles → C'est une adaptation statique.

- Interface adaptative : le système est capable d'adapter son comportement aux be-

soins, capacités et préférences de l'utilisateur courant pendant l'interaction → C'est une

adaptation dynamique.

Interface Homme-Machine multimodale : une fusion dynamique et sémantique de plu-

1 2
sieurs médias et modalités en entrée et/ou en sortie.

Exemple : l'nteraction  mets ça ici  (http://perso.liris.cnrs.fr/stephanie.jean-d\

aubias/lifIHM/)

Figure 1.2  Interface multimodale

La commande "mets ça ici" est exécutée en montrant sur l'écran l'objet (ça) et l'empla-

cement (ici) correspondant aux mots prononcés pendant ce temps devant un microphone.

La machine répond alors dois-je déplacer aussi ce chier ? en anticipant sur l'intention de

l'utilisateur.

La multimodalité introduit deux mécanismes importants : la fusion sémantique des infor-

mations issues de diérentes modalités en entrée (multimodalité en entrée) et la ssion

sémantique de l'information générée par le noyau fonctionnel (multimodalité en sortie).

1. Multimodalité en entrée : est un type d'interaction où les informations fournies par

1. Média est un dispositif ou périphérique physique qui diuse de l'information

2. Modalité correspond au type de canal de communication utilisé pour transmettre ou obtenir des
informations

6
 l'utilisateur, via plusieurs modalités, sont fusionnées.

Exemple : l'utilisateur exprime par la voix "met ça là" en cliquant sur un objet puis

sur un emplacement de l'interface, constitue une interaction multimodale en entrée

utilisant des informations introduites respectivement à travers les modalités parole

via le média microphone, et manipulation directe via le média souris.

2. Multimodalité en sortie : est un type d'interaction qui consiste à décomposer les

informations générées par le noyau fonctionnel et à les restituer à l'utilisateur en

exploitant les diérentes modalités en sortie et en fonction du contexte d'interaction.

Exemple : l'utilisateur demande la liste des trains de la ville A vers la ville B, le

système répond par synthèse vocale "votre requête peut être satisfaite par les quatre

trains suivants" et ache en même temps une liste détaillée des trains. Il s'agit d'une

interaction multimodale en sortie répondant à la requête de l'utilisateur à travers

les modalités parole via le média haut-parleur, et texte via le média écran.

Les IHM multimodales orent la possibilité de combiner les avantages des entrées natu-

relles mais équivoques comme la parole, et des entrées univoques comme la manipulation

directe. L'utilisation de plusieurs modalités permet aussi de compenser les faiblesses des

autres, lorsqu'il s'agit notamment de résoudre des ambiguïtés.

Interaction Homme-Machine : une science de l'interaction englobant l'ensemble des as-

pects de la conception, du développement et de l'évaluation des systèmes interactifs utiles

et utilisables destinés aux utilisateurs [Ghaoui, 2006].

X Conception : aspects créatifs ou design,

X Développement : aspects techniques de réalisation,

X Évaluation : aspects liés à la validation ergonomique.

Au sens large, l'Interaction Homme-Machine désigne l'étude des principaux phénomènes

(cognitifs, matériels, logiciels, sociaux) qui les entourent [Ghaoui, 2006].

Mode d'interaction : un style d'interaction qui caractérise la manière de communiquer (dia-

loguer) avec un système interactif (http://spotidoc.com/doc/1349308/cours-ihm-1-\

conception-des-interfaces-1, http://lipn.univ-paris13.fr/~recanati/docs/IHM/
Interaction.ppt). Il existe diérents modes dont chacun a ses propres avantages (+) et

limites (-). Parmi ceux-ci, nous présentons :

7
• Langage naturel écrit ou parlé

(+) Vocabulaire et syntaxe connus

(-) Problèmes des ambiguïtés et des sous-dialogues

Exemples : questions formulées en langage naturel, commandes vocales, programme

ELIZA (https://en.wikipedia.org/wiki/ELIZA), dicter des SMS, etc.

• Langage conversationnel (langage de commandes/shell scripts)

(+) Concision et abilité → langage facile à programmer

(-) Apprentissage et une pratique régulière (adapté pour un utilisateur expert)

Exemple : Shell Unix, système d'exploitation Ms-Dos

• Interaction par formulaire

(+) Mécanisme simple et rapide → langage facile à exploiter

(-) Fonctionnalités limitées (valider et annuler)

(-) Dialogue imposé par le système

• Interaction par requête et tableur

(+) Langage puissant, ecace et intuitif

(-) Apprentissage à priori

• Navigation hypertextuelle (n÷uds, ancre, liens)

(+) Interaction simple (sélection des liens)

(-) Diculté de repérage

Figure 1.3  Interface Wikipédia

• Interaction iconique (manipulation directe)

La manipulation directe suit le principe ci-après :

 Représentation permanente des objets par des métaphores. Ces derniers représentent

des éléments graphiques crées ayant une analogie (présentation, comportement) avec

des objets du monde réel

8
  Actions physiques (pointer, modier, sélectionner et cliquer) directes sur les objets

représentés (fenêtre, icônes, menus, boite de dialogue, champs de saisie, barre de

délement) sur l'écran

 Opérations réversibles dont le retours (feedback) sur les objets concernés est immé-

diatement visible

(+) Interface (de type WIMP) accessible à un large public via l'utilisation des fenêtres,

des icônes, des menus et des pointeurs/curseurs. Ceux-ci sont manipulés par de dispo-

sitifs de pointage.

(+) Non utilisation d'une syntaxe → erreurs limitées

(-) Problème du choix de la métaphore

(-) Encombrement de l'écran

Exemples : logiciels de jeux (simulateurs de vol), éditeurs des documents textes WYSI-

WUG notamment Word, OpenOce et logiciels de dessin (photoshop, illustrateur).

Nous parlons parfois de la manipulation indirecte lorsque les actions sont déclenchées

en passant par des menus et des boîtes de dialogue.

Exemples : eacer un chier en passant par le menu contextuel ou redimensionner une

image en ouvrant une boîte de dialogue.

• Interaction gestuelle

(1) Gestes 2D (stylo ou doigts) (http://interaction.lille.inria.fr/~roussel/

digital-library/media/2004-gr-mm.mov)
(2) Gestes 3D

(3) Gestes multi-points ou multi-touches de l'écran tactile

(+) Interaction pratique, concise et plus accessible

(+) Complexité et temps réduits de la tâche à réaliser

(-) Dicultés liées à l'apprentissage

(-) Ambiguïtés (parole, interprétation, etc.)

Interface tactile 2D (stylo) Interface tactile 2D (doigts)

9
 Leap-motion Kinect Interface multi-tactile

Figure 1.4  Exemples des IHM orientées à l'interaction gestuelle

• Interaction tangible [Couture, 2010]

(+) Interaction plus simple et intuitive

(-) Problème de cohérence entre le monde physique et numérique

Projection sur le papier Widgets physiques Utilisation d'un PDA

avec des mini-projecteurs sur une table interactive comme loupe

Figure 1.5  Exemples des IHM relatives à l'interaction tangible

Le schéma 1.6 [Roussel, 2009] résume l'évolution des modes de l'interaction au cours de

ces cinquante dernières années.

Figure 1.6  Évolution des modes d'interaction

Nous constatons que l'interaction est passée d'une complexité réservée à des outils experts

à une simplicité et fonctionnalité extrêmes pour un coût modique.

10
 Certes, cette évolution nous donnent l'opportunité de repenser totalement l'interaction

homme-machine. La palette des interfaces et des interactions disponibles s'élargit et notre

créativité doit être au rendez-vous pour proposer une interaction optimisée de façon à

réussir une expérience utilisateur optimisée.

Système informatique interactif : un système physico-numérique en interaction avec un

(ou plusieurs) humain(s)[Wegner, 1997]. Dans un système interactif, nous considérons :

1. L'interface utilisateur : englobe tous les éléments matériels (avec des contraintes
techniques) et logiciels dédiés à la capture des entrées de l'utilisateur et à la resti-

tution des sorties du système.

2. Le noyau fonctionnel : regroupe les concepts du domaine et les services (traite-

ments, calcul, stockage des données, etc.) qui leur sont applicables.

Il prend en compte les entrées (saisie d'un texte, utilisation de commande vocale, poin-

tage, sélection, suivi des traces, clic de souris, etc.) fournies par l'utilisateur de manière

interactive ce qui permet de modier l'état interne du système. Ces entrées (ou inputs en

anglais) dépendent des sorties (feedbacks ou outputs) produites par le système et inver-

sement.

Figure 1.7  Système informatique interactif

Sachant que :

Entrées/sorties de la machine
 Périphériques d'entrée : englobent les dispositifs de saisie (clavier, pavé numérique),

es dispositifs de lecture (lecteur de disque optique, lecteur de cartes, lecteur de codes

barre), les dispositifs de pointage (souris, trackball, pavé tactile, tablette, crayon op-

tique), les contrôleurs de jeu (manette de jeu, joystick, kinect, gant numérique) et les

dispositifs d'acquisition (scanner, Webcam, microphone), capteurs (de la température,

de la lumière, de la composition de l'air, de l'orientation, de la pression et de la fréquence

cardiaque).

11
 3
 Périphériques de sortie : comprennent les écrans, les imprimantes, les retours d'eort ,

4
les retours tactiles , les enceintes acoustiques, les dispositifs de visualisation de données

2D/3D, les collecticiels, les dispositifs mobiles et les dispositifs vestimentaires.

Entrées/sorties de l'utilisateur
- Entrée de l'interaction : peut être l'un des cinq sens : la vue, l'ouïe, le toucher, le goût

ou l'odorat.

- Sortie de l'interaction : est générée suite aux entrées de l'utilisateur sous forme des

gestes, des mouvements, des expressions faciales, des regards ou de la voix.

Si nous reprenons l'exemple de la télécommande :

L'interface (la télécommande) entre l'utilisateur et la télévision se comporte de telle façon

que s'il appuie sur un bouton, il aura l'eet escompté.

Plus précisément, si l'utilisateur appuie sur le bouton marqué "1", la chaîne "Samira TV"

est lancée. L'utilisateur donne alors une entrée.

Cela aura comme résultat que la chaîne de télévision numéro 1 va s'acher sur l'écran

de télévision ; c'est le retour de la chaîne "Samira TV" ou la réponse de la machine à

l'impulsion de l'utilisateur. Ce dernier récupère la sortie.

Et tout cela forme l'interaction !

Les systèmes interactifs sont également appelés ouverts (dont le fonctionnement dépend
des informations fournies par un environnement externe qu'il ne contrôle pas tels que les

systèmes d'alerte), par opposition aux systèmes fermés - ou autonomes - dont le fonction-

nement peut être entièrement décrit par des algorithmes.

Exemples des systèmes interactifs

Un système interactif englobe une très grande variété de produits, à savoir :

 Applications n-tiers (Web/mobile client-serveur, en réseau, dans le cloud, etc.)

 Robotique (https://www.usine-digitale.fr/article/la-health-tech-europeenne\

-s-invite-a-bruxelles.N883265)et applications de l'intelligence articielle (outils de

la reconnaissance vocale, de la reconnaissance de tracés, de la reconnaissance d'écriture

manuscrite, de la reconnaissance gestuelle, de la reconnaissance mentale, etc.)

3. Périphérique à retour d'eort est un système permettant à un utilisateur d'interagir avec une réalité
virtuelle tout en bénéciant d'un retour de force réel
4. Périphérique à retour tactile est un système qui permet de manipuler des objets avec un certain
ressenti tactile

12
 5
 Technologies immersives (la réalité augmentée, la réalité diminuée , la réalité mixte

6
(https://www.artefacto-ar.com/realite-mixte/) , la réalité virtuelle et la réalité

la tangible

7
 Systèmes ambiants (objets connectés et intelligents)(https://www.treehugger.com/

bikes/safety-first-with-awesome-led-bicycle-backpack-video.html)
 Collecticiels (systèmes interactifs collaboratifs)

Expérience de l'utilisateur (UX) : un ensemble des aspects perçus et vécus par l'utilisateur
dans l'utilisation du système interactif, y compris notamment les aspects de la concep-

tion, de l'utilisabilité et techniques [Norman, 1999]. Cependant, cette dénition soufre de

la confusion en raison de la popularité de deux autres termes similaires : "conception de

l'Interface Homme- Machine" et "conception de l'expérience utilisateur".

Pour cela, une dénition standard de l'expérience de l'utilisateur, a été proposée par ISO,

qui met en évidence deux principaux concepts : l'utilisation et l'utilisation anticipée du

système interactif.

Selon la norme [ISO, 2010], l'expérience utilisateur englobe toutes les émotions, convic-

tions, préférences, perceptions, réactions physiques et psychologiques, comportements et

les réalisations qui se produisent avant, pendant et après l'utilisation du système interactif

(gure 1.9).

Certes, une bonne expérience est relative à l'interface qui répond aux besoins de l'utilisa-

teur dans le contexte utilisé.

Le système virtuel de contrôle de qualité des moteurs, déployé par Renault, (gure 1.8.(f ))

est un exemple intéressant qui ore une expérience utilisateur très immersive améliorée.

Nous considérons un opérateur d'un engin de poids lourd (camion) qui rampe dans les

entrailles du camion pour une inspection et doit vérier pendant combien de temps une

certaine pièce est en service. Avec un système informatisé classique (à écran) de détection

des pannes, l'opérateur devrait en quelque sorte enregistrer le numéro de pièce (en s'en

souvenant, en prenant une photo sur un smartphone ou en l'écrivant sur un morceau de

papier) et accéder au système pour déterminer la durée de fonctionnement de cette pièce.

5. Réalité diminuée consiste à supprimer un objet réel

6. Réalité mixte est une interaction entre le monde virtuel et le réel en temps réel
7. Système ambiant est un ensemble d'interfaces intelligentes supportées par des technologies enfouies
dans les objets du quotidien

13
 (a) (b) (c)

(d) (e) (f)

(g) (h) (i)

(j) (k) (l)

Figure 1.8  Exemples des systèmes interactifs : (a) Application Web client serveur

(b) Assistant médical "SARA" (Sanbot, 2019), (c) Application mobile du E-learning, (d)

Système lié à la réalité augmentée, (e) Système lié à la réalité diminuée, (f ) Système de

contrôle de qualité des moteurs basé sur la réalité mixte (fabriqué par "Renault Trucks",

2017), (g) Jeu vidéo en réalité virtuelle, (h) Système lié à la réalité tangible, (i) Collecticiel

(éditeur de code CLOUD9), (j) Sac à dos intelligente "SEIL bag" (Lee Myung Su, Park

Geun Wan et Park Okhee, 2010), (k) Outil de la reconnaissance de tracé, (l) Outil de la

reconnaissance d'écriture manuscrite

14
 Figure 1.9  Expérience de l'utilisateur

Mais avec un système virtuel de contrôle de qualité des moteurs (basé sur l'utilisation de

la réalité virtuelle), l'enregistrement de service peut être aché directement au-dessus de

l'article, avec très peu de commandes, voire aucune.

1.3 Évolution des IHM

Les interfaces existent depuis l'aube de l'humanité et certaines sont plus mémorables que

autres. Abordons donc l'évolution des IHM et imaginons les interfaces homme-machine

de 2021. Chaque type d'IHM a ses propres caractéristiques.

1.3.1 Interface monodirectionnelle asynchrone

 Traitement par lots

 Communication monodirectionnelle et asynchrone

15
1.3.2 Interface textuelle
 Traitement interactif via les langages des commandes → IHM destinée aux experts

 Communication Homme-Machine bidirectionnelle et synchrone

 Communication textuelle

 Dispositifs d'entrée/sortie (clavier/écran)

1.3.3 Interface graphique

 Traitement interactif via la manipulation des objets graphiques de type WIMP→ IHM

destinée au grand public

 Communication Homme-Machine bidirectionnelle et synchrone

 Périphériques d'entrée/sortie

1.3.4 Interface naturelle (multimodale)

 Traitement interactif (toucher, vision, voix, mouvements ou gestes)

 Dialogue en temps-réel

 Communication multimédia (combinaison de textes, d'images et de son/voix, dispositifs

à retour d'eort/tactile, etc.).

 Intégration des systèmes numériques au sein des objets physiques

 Usage simultané ou alterné de plusieurs modalités

La gure 1.10 résume comment l'interaction homme-machine a évolué peu à peu à partir

des interfaces monodirectionnelles asynchrones vers ces nouvelles IHM dites "naturelles" :

D'autre part, an de compléter la vision d'ensemble, nous explorons, dans la suite de

cette section, les projets de recherches autours de l'IHM (http://nguyen.univ-tln.fr/

share/IHM/transp_introduction.pdf, https://www.thomaspietrzak.com/teaching/
IHM/1-intro-ihm.pdf) qui ont révolutionné le monde :

• Calculateur "Whirlwind" (Jay Forrester, Ken Olsen et leur équipe, 1951)

• Programme interactif de jeu d'échec (Dietrich Prinz, 1951)

• Système "Sketchpad" utilisant un écran cathodique et un crayon optique (Ivan Suther-

land, 1963)

• Souris (Douglas Engelbart, 1964)

16
 Figure 1.10  Chronologie des IHM

• Tablette graphique (Tom Ellis, 1964) et système "GRAIL" de reconnaissance d'écriture

(Gait Real-time Analysis Interactive Lab)

8
• Premier casque de réalité virtuelle (Ivan Sutherland et Bob Sproull, 1967)

• Système hypertexte collaboratif couplé à un système de vidéoconférence (Engelbart,

1968)

• Système imaginaire "Memex" (Vannevar Bush, 1968)

• Installation "VideoPlace" (Myron Krueger, 1969), qui permet d'interagir avec le corps

• Imprimante à laser (Gary Starkweather, 1971)

• Ordinateur personnel portable "Dynabook", muni d'un écran graphique (Alan Kay,

1972)

• Langage à objets Smalltalk (Alan Kay, 1972) et son environnement de programmation

objet graphique (fenêtres superposables, menus déroulants, etc.)

• Gant tactile (Noll, 1972)

• Écran tactile, "PLATO IV" à plasma de 512∗512 pixels (1972, de l'Université d'Illinois)
• Réseau local Ethernet (Robert Metcalfe et David Boggs, 1973), protocole de réseau local

"ARCnet" (Datapoint Corp., 1776), topologie de réseau "Token Ring" (IBM, 1980)

• Papier électronique Gyricon (Nick Sheridon, 1974)

8. Réalité virtuelle est une simulation informatique interactive d'un monde 3D

17
• Simulation virtuelle de la ville Aspen (Colorado) avec trois modes : été, hiver, et poly-

gones "Aspen Film Carte" (équipe de Andrew Lippman, 1978)

• Tableur "VisiCalc" (Dan Bricklin et Bob Frankston, 1979)

• Système hypertexte précurseur du Web (Tim Berners-Lee, 1980)

• Premier système multimodal "Put-That-There" (Rich Bolt, 1980)

• Première station de travail personnelle munie d'un écran graphique Xerox 8010 star

(laboratoire de recherche PARC Xerox, 1981)

• Micro ordinateur bureautique Lisa (Steve Jobs, 1983)

• Ordinateur personnel graphique "Apple Macintosh" (Steve Jobs, 1984), Mac OS 8

(1997), Mac OS X Server (1999), Apple iMac (2012)

• Plateforme graphique "Microsoft Windows 1.0" (MIT, 1985), systèmes de fenêtrage

X-Windows (MIT, 1987) Microsoft Windows 3.1 (MIT, 1992), Microsoft Windows NT

(MIT, 1993), Microsoft Windows 95 (MIT, 1995), Microsoft Windows 98 (MIT, 1998),

Microsoft Windows 2000 (MIT, 2000), Microsoft Windows ME (MIT, 2000), Microsoft

Windows XP (MIT, 2001)

• Tablette multitactile sensible à la pression (Bill Buxton, 1985), ancêtre du smartphone

iPhone 6S 3D Touch(Apple, 2014)

• Ecran 3D "NeXT's NeXTStep" (Steve Jobs, 1988)

• Prototype de navigateur et d'éditeur de pages Web (Nexus, 1990)

• Environnement interactif ubiquitaire "Ubicomp"(Mark Weiser, 1991)

• Premier "smartphone" tactile (Simon et Bell South, 1992)

9
• Répondeur téléphonique doté d'une interface tangible "Marble Answering Machine"

(Durrell Bishop, 1992)

• Navigateur Mosaic sous l'environnement X-Window (Marc Andressen, 1993)

10
• Premier système de réalité augmentée "Digital Desk" (Pierre Wellner, 1993)

• Surfaces augmentées (J. Rekimoto, 1999)

• Tables interactives (Microsoft, 2000)

• Caméra Eye Toy (Sony, 2003)

• Kinect (Microsoft, 2009)

• etc.

9. Interface tangible consiste à associer des objets réels et numériques

10. Réalité augmentée consiste à inclure des information numériques dans le monde réel

18
Une description détaillée des projets est étalée dans [Saer, 2010], [Galitz, 2002], [Coutaz,

2013].

Whirlwind Programme interactif de jeu d'échec Sketchpad

Souris Casque Système collaboratif et vidéoconférence

Aspen Film Carte VisiCalc Put-That-There

Memex VideoPlace Dynabook

Lisa PLATO IV Xerox 8010 star

19
 Smartphone Apple Macintosh Ubicomp

Digital Desk Surface augmentée Table interactive

Wii remote(Nintendo, 2006) iPad(Apple, 2010) Siri (Apple, 2011)

Glass (Google, 2015) Hololens (Microsoft, 2017) Téléviseurs intelligents (Samsung, 2019)

Figure 1.11  Historique des IHM

20
 1.4 Besoins de l'IHM

Suite aux avancés technologiques (loi de Moore), progrès des fonctionnalités (rechercher,

aide, etc.) promises (loi de Buxton), les limites des capacités (perceptives, motrices) hu-

maines et la diversité des contextes d'usage des systèmes interactifs, l'IHM constitue un

véritable enjeu pour nous en tant que utilisateur et pour la communauté de recherche.

Pour cela, il est nécessaire de se focaliser sur les besoins de :

• La réalisation des systèmes interactifs qui soient à la fois utiles (conformité fonc-

tionnelle) et utilisables (conformité interactionnelle) quelques soit le contexte

d'usage (conformité contextuelle). Par utile, il faut entendre des systèmes capables

d'orir les services attendus.

• Le compromis entre la puissance, la simplicité des interfaces et l'interaction

située. C-à-d, enrichir et simplier le système interactif en prenant en compte de divers
contextes d'usage.

Il s'agit par conséquent d'élaborer des théories, des modèles et des méthodes en vue d'aider

les utilisateurs à exprimer mieux leurs besoins, les comprendre et agir.

1.5 Intérêt de l'IHM

An de démontrer l'intérêt que présente l'IHM, il convient alors d'illustrer trois exemples

tirés de l'accident nucléaire Three-Miles Island, la catastrophe du Mont de Sainte-Odile

et les élections présidentielles Américaines.

(1) L'accident nucléaire Three-Miles Island (1979)

Le 28 mars 1979, le réacteur Numéro 2 de la centrale de Three Mile Island, près de

Harrisburg (Pennsylvanie) a subi un accident sérieux [Maddox and Muto, 1999]. Le c÷ur

du réacteur a été gravement endommagé, et le circuit de refroidissement, le bâtiment du

réacteur, ainsi que le bâtiment auxiliaire adjacent ont été fortement contaminés. Il n'y a

pas eu de victimes, que ce soit sur le site ou hors du site de la centrale.

Les principaux facteurs qui y ont contribué sont :

- Panne matérielle (panne d'une pompe à eau du générateur de vapeur) et aucun signal

n'est déclenché,

21
 - Erreur humaine (un technicien ouvre une vanne pour éviter une surpression dangereuse

mais la fermeture automatique ne se produit pas, ce qui a augmenté la pression),

- Fuite du liquide de refroidissement a impliqué une nouvelle surchaue et production

d'une multiplicité de signaux confus.

Tous cela a résulté du fait que la salle de commande est mal conçue, les opérateurs sont

mal formés et le contrôle d'erreurs non prévues du système de sécurité.

(2) Le crash du Mont de Sainte-Odile (1992)

Le 20 janvier 1992, un airbus A320, transportant 90 passagers et six membres d'équipage,

s'écrasait sur les ancs du mont Sainte-Odile, dans le massif des Vosges (Bas-Rhin).

Ce crash a provoqué 87 morts et 9 vivants. Selon le rapport (https://www.bea.aero/

docspa/1992/f-ed920120/htm/f-ed920120.html) parvenu par la commission d'enquête

sur les circonstances et les causes de l'accident, il s'agit d'une confusion liée à la conception

du cockpit (poste de pilotage) et particulièrement l'achage des deux paramètres de

pilotage : angle de descente (mode FPA : Flight Path Angle) et vitesse verticale (mode

VS : Vertical Speed). Au lieu de programmer un angle de descente de 3.3◦ (aché 33),

l'équipage a programmé une vitesse verticale 33000 pieds/minute (aché 33), ce qui a

engendré une mise en descente trop rapide de l'avion.

Ancien tableau de bord Indicateurs de pilotage Nouveau tableau de bord

(d'un Airbus A330) (VS et FPA) (d'un Boeing 747)

Figure 1.12  Tableaux de bord d'un Airbus A330 et d'un Boeing 747

L'interface utilisée présente des erreurs ergonomiques relatives à la mauvaise visibilité des

deux modes, l'absence des unités de mesure des deux paramètres de pilotage, et l'absence

de repères visuels. Après ce crash, l'ergonomie du tableau de bord est améliorée.

(3) Les élections présidentielles Américaines (2000)

Lors des élections présidentielles Américaines, un vote électronique de la population de

22
la Floride a eu lieu, aucun candidat n'était alors clairement déclaré vainqueur à cause de

l'écart (une centaine de voix) entre les candidats était si serré. Ceci est dû à la mauvaise

présentation du bulletin de vote électronique (https://blogs.mediapart.fr/lueur/

blog/270818/elections-2000-bush-v-gore-facteur-x-database-technologies), en
particulier :

- Lignes horizontales alignées sur les trous et

- Espacement réduit entre les trous relatifs

Bulletin sans vote Vote avec deux poinçons Bulletin amélioré

Figure 1.13  Bulletin de vote

En conséquence, des problèmes d'illisibilité et risque d'erreurs (présence de deux poinçons

sur le même vote (c-à-d plus d'un candidat y étaient sélectionnés) ont été soulevés.

De surcroît, les machines de vote électroniques peuvent être un vrai obstacle. En fait, elles

empêchent 20 à 50 % (selon le pays) des électeurs, que nous appelons "les exclus de la

technologie", d'exprimer leur choix. Ces estimations du nombre d'exclus technologiques

ont été calculées par recoupement entre les populations handicapées, âgées, analphabètes

et celles non habituées aux technologies.

Encore, nous avons assisté à l'accident nucléaire de Fukushima en 2011. Il est survenu après

le tsunami qui a endommagé la centrale nucléaire. Quand à lui, est une caractéristique

du manque d'une automatisation appropriée associée à une sous-estimation des risques

lors de la conception : la hauteur de l'enceinte anti-tsunami n'était que 5.7 mètres alors

que les vagues atteignirent 10 mètres. Pour en savoir plus, nous renvoyons le lecteur aux

ouvrages de [Neumann and Wesley, 1995] et [Nogier, 2008].

Que doit-on retenir de ces exemples ? Le problème est bien l'interface (ou IHM). Les

fonctionnements suggérés par les interfaces ne correspondent pas aux fonctionnements

réels de ces systèmes (tableau de bord, machine à voter ou système de sécurité).

23
La solution : concevoir des systèmes interactifs adaptés à l'utilisateur nal, aux
tâches à réaliser, aux diérents contextes d'usage et technologies en respectant
la qualité logiciel (utilisabilité et utilité).

Figure 1.14  Composants de base de l'Interaction Homme-Machine

1.6 Adapter une IHM

Dans l'idéal, l'Interface Homme-Machine doit s'adapter aux :

1.6.1 Caractéristiques de l'utilisateur

L'utilisateur dénote les personnes en interaction avec le système interactif. Il est typique-

ment décrit par ses capacités perceptives, cognitives et motrices, notamment :

• Style d'apprentissage (do-then-read, read-then-do)

• Préférences vis-à-vis les ressources utilisées

• Diérences physiques : âge (vieux, enfant), poids, droitier/gaucher, handicap (moteur,

sensoriel, psychique, mental), limites de ÷il et la main, etc.

• Diérences physiologiques : (bonne/mauvaise) acuité visuelle, fatigabilité, etc.

• Diérences psychologiques : vitesse d'apprentissage, (bonne/mauvaise) capacité de mé-

morisation, conance de prise de décision, curiosité, (bonne/mauvaise) capacité d'ana-

lyse/synthèse, de perception, etc.

24
• Connaissances et expériences :

- Dans le domaine de la tâche (novice, expert, professionnel)

- En informatique, sur le système utilisé (usage occasionnel, quotidien)

• Caractéristiques socio-culturelles : niveau d'éducation, sexe, profession, expérience ha-

biletés, origine social, culture, pays, sens d'écriture, format des dates (05.10.2000), at-

titude, motivation, signication des icônes, des couleurs, culture et personnalité, etc.

Voici à titre illustratif un exemple d'un prol utilisateur.

Table 1.1  Un exemple de prol utilisateur

Caractéristiques de l'utilisateur Personnel du musée
Age 22-54 ans

6 curateurs d'exposition du musée

5 chefs de service d'inscription

Rôle
5 chercheurs

Organisation 10 organisations culturelles

6 de la ICN

Tâche Recherche d'information

Ethnographie

Art Néerlandais classique

Domaine d'expertise
Art contemporain

Le prol (initial ou détaillé) de l'utilisateur permet de cerner des informations critiques

pour la dénition des exigences de l'utilisateur vis-à-vis le système.

Table 1.2  Mapping entre le prol utilisateur et ses exigences

Caractéristiques de l'utilisateur Besoins
Intervalle d'age [20-55] Besoin 1 : accueillir des utilisateurs de diérents

âges

Diérents domaines d'expertise Besoin 2 : avoir de divers types de recherche

Diérents niveaux de connaissances re- Besoin 3 : présenter les éléments de diérents col-

latives aux diverses collections lections

1.6.2 Caractéristiques de la tâche

Une tâche désigne l'ensemble des actions (activités) à accomplir dans le système. Dans

un processus de conception de l'IHM, nous devons :

11 12
• Identier les buts , les tâches (leurs séquencement) et les actions à réaliser

11. But désigne l'état du système que l'utilisateur souhaite obtenir lors de l'interaction
12. Tâche est l'ensemble des activités pour atteindre le but de l'utilisateur

25
• Connaitre les tâches fréquentes, importantes, diciles, sensibles aux changements de

l'environnement

• Connaitre les tâches critiques, régulières, occasionnelles

• Déterminer les facteurs critiques relatifs à une tâche donnée (temps, etc.)

• Dénir les tâches individuelles ou collectives (avec collaboration)

• Savoir l'exécution des tâches (organisation de manière séquentielle ou en parallèle)

• Faire l'analyse du déroulement des étapes (workow)

• Considérer les décisions de l'utilisateur

Reprenant l'exemple précédent, nous pouvons circonscrire les caractéristiques de la tâche

"recherche d'information" pour le curateur d'exposition d'un musée.

Table 1.3  Caractéristiques de la tâche "recherche d'information"

Caractéristiques de la tâche "recherche d'information pour le curateur"

La fréquence d'exécution de la tâche Plusieurs fois par jour

Le temps est-il un facteur critique ? Chercher l'information souhaitée dans un

temps raisonnable

Accomplir la tâche seul ou en collaboration Tâche individuelle (dans la plupart des cas)

Réaliser plusieurs tâches en parallèle Typiquement oui. Rechercher d'un élément

bien précis dans une collection et annoter les

÷uvres d'art (par exemple)

1.6.3 Contexte

Le contexte d'usage du système contient des informations à considérer pendant la concep-

tion et l'exécution du système. Ces informations sont liées à l'environnement physique,

social et organisationnel [Desmarais, 2017].

Le tableau suivant résume l'ensemble de ces caractéristiques.

1.6.4 Technologie
• Contraintes matérielles (taille mémoire, bande passante, puissance de calcul, qualité

des périphériques d'entrée/sortie, capteurs, réutilisation de code ancien, etc).

• Contraintes logicielles (plateforme, applications disponibles)

• Organisation des machines (machine isolées/en réseau)

26
 Table 1.4  Contexte d'usage d'un système interactif

Contexte Caractéristiques du contexte

- Grand public (proposer une prise en main immédiate)

- Loisirs (rendre le produit attirant )

Domaine d'application
- Industrie (augmenter la productivité), et

- Systèmes critiques (assurer un risque presque zéro)

Environnement physique Bruit, vibrations, éclairage, posture, stresse, confort, poussière,

risques à la santé, température, ventilation, espace de travail (bu-

reau, maison), localisation géographique et informations tempo-

relles, etc.

Environnement social Pression de travail, travail individuel ou collaboratif, bureau indi-

viduel ou zones ouvertes, etc.

Environnement organisationnel Attribution des tâches (l'utilisateur ou le système), politiques d'uti-

lisation et d'achats matériels, relations de pouvoir, ux d'échanges

(parallélisme, séquence, interruption), etc.

Services d'assistance de l'utilisateur Politique de formation, disponibilité des experts, guide d'installa-

tion, disponibilité des manuels d'utilisation et aide, etc.

Contraintes Contraintes économiques, échelle de temps (calendrier), coûts, etc.

Par conséquent, une IHM mal-adaptée provoque de la frustration (sentiments de confusion,

d'incertitude doute croissant, découragement) vis-à-vis le système utilisé. Abandonner la

tâche à réaliser, de la part de l'utilisateur, est alors possible.

1.7 Disciplines connexes

L'Interaction Homme-Machine est un domaine scientique fortement pluri- et interdisci-

plinaire, avec un versant théorique et un versant expérimental, couvrant une diversité de

disciplines, en particulier :

 Informatique : comprenant la programmation des IHM, l'Intelligence Articielle, la

reconnaissance de parole, le traitement de la langue naturelle, l'imagerie, etc.

 Sciences cognitives : regroupent un ensemble de disciplines scientiques (sociologie,

philosophie, linguistique, psychologie cognitive, anthropologie, informatique, neurons-

cience) dédiées à la description, l'explication, des mécanismes de la pensée humaine,

animale ou articielle [ISO, 1997].

27
 Ergonomie : est une étude scientique de la relation entre l'homme et ses moyens,

méthodes et milieux de travail et l'application de ses connaissances (de l'utilisateur)

à la conception de systèmes ergonomique. Selon la norme [ISO, 2010], un système

ergonomique est un système utilisable qui peut être utilisé avec le maximum de confort,

de sécurité et d'ecacité par le plus grand nombre.

1.8 Conclusion
Ce chapitre introduit les concepts fondamentaux de l'Interaction Homme-Machine ; nous

y avons en particulier déni : Interface Homme-Machine, Interaction Homme-Machine et

expérience de l'utilisateur. Nous avons évoqué par la suite l'évolution de l'IHM. Après

cela, nous avons motivé son intérêt. Certes, l'étude de l'Interaction Homme-Machine sert

à comprendre mieux les besoins et les capacités des utilisateurs an de concevoir des

interfaces qui leur sont adaptées.

Au regard des besoins d'adaptation, les travaux de recherche en IHM visent à :

1. Comprendre le phénomène de l'interaction (l'observer, le décrire, l'expliquer, l'éva-

luer et l'expérimenter).

2. Innover : proposer de nouvelles formes (techniques, modèles et outils) d'interaction

optimisées.

3. Guider le choix des concepteurs du système à développer : intégrer les connaissances

et le savoir-faire (des théories, méthodes et outils) pour améliorer la conception et

le développement des systèmes interactifs.

Le deuxième chapitre présente les notions de base relatives aux sciences cognitives.

28
Série de TD 1

Exercice 1 : Notions de base relatives à l'IHM

Cochez la ou les bonnes réponses :

1. Dans IHM, la lettre  M  peut désigner :

A. Un ordinateur

B. Un site web

C. Un appareil électronique

D. Une application

2. Interface Homme-Machine désigne :

A. Les dispositifs d'entrée et de sortie + les interfaces des logiciels exploitant la

machine

B. Ensemble des dispositifs matériels et logiciels mis en ÷uvre an qu'un humain

puisse interagir avec une machine

3. Système interactif est un :

A. Système ouvert

B. Système fermé

4. Concepteurs IHM cherche à produire :

A. Une interface adaptée aux besoins de l'utilisateur

B. Une interface ergonomique

C. Une interface conviviale

D. Aucune

5. L'utilisabilité se mesure par :

A. Ecacité

B. Facilité d'apprentissage

C. Facilité de d'utilisation

29
 D. Satisfaction de l'utilisateur

6. Adapter une interface aux :

A. Caractéristiques de l'utilisateur

B. Contexte d'interaction

C. Caractéristiques de la tâche

D. Contraintes techniques

7. Le développement d'IHM est fondé sur :

A. Une approche cognitive

B. Une approche informatique

C. A+B

Exercice 2 : Rôle des mécanismes perceptifs

Soit les 9 points suivants, comment réunir ces 9 points par 4 lignes droites sans lever de

crayon ?

Exercice 3 : Organisation d'une IHM

Nous proposons pour un logiciel grand publique standard, le schéma d'organisation général

montré par la gure ci-dessous.

(1) Zone très visible mais peu accessible, (3) Zone assez visible et très accessible

(2) Zone peu visible et peu accessible, (4) Zone très visible et très accessible

A. Pour chacune des zones montrées dans la gure, trouver la mention correspondante.

30
B. Proposer un exemple d'une interface qui pourra s'adapter avec cette organisation.

C. Essayer de proposer une autre organisation destinée pour la création d'un site Web

pour une université.

Exercice 4 : Évaluation d'une IHM

Que remarquez-vous en regardant ce bureau d'un ordinateur ?

Exercice 5 : Évaluation d'une IHM

Soient les trois congurations de plaques de cuissons suivantes :

Selon vous, quel modèle de plaque de cuisson paraît le plus ergonomique ?

31
Corrigé type de la série de TD 1

Exercice 1 : Notions de base relatives à l'IHM

Cochez la ou les bonnes réponses :

1. Dans IHM, la lettre  M  peut désigner :

A. Un ordinateur

B. Un site web

C. Un appareil électronique

D. Une application

2. Interface Homme-Machine désigne :

A. Les dispositifs d'entrée et de sortie + les interfaces des logiciels exploitant la

machine

B. Ensemble des dispositifs matériels et logiciels mis en ÷uvre an qu'un humain

puisse interagir avec une machine

3. Système interactif est un :

A. Système ouvert

B. Système fermé

4. Concepteurs IHM cherche à produire :

A. Une interface adaptée aux besoins de l'utilisateur

B. Une interface ergonomique

C. Une interface conviviale

D Aucune

5. L'utilisabilité se mesure par :

A. Ecacité

B. Facilité d'apprentissage

C. Facilité de d'utilisation

32
 D. Satisfaction de l'utilisateur

6. Adapter une interface aux :

A. Contraintes techniques

B. Contexte d'interaction

C. Caractéristiques de la tâche

D Aucune réponse

7. Le développement d'IHM est fondé sur :

A. Une approche cognitive

B. Une approche informatique

C. A+B

Exercice 2 : Rôle des mécanismes perceptifs

Soit les 9 points suivants, comment réunir ces 9 points par 4 lignes droites sans lever de

crayon ?

Exercice 3 : Organisation d'une IHM

Sachant que : (1) Zone très visible mais peu accessible, (3) Zone assez visible et très

accessible (2) Zone peu visible et peu accessible, (4) Zone très visible et très accessible

(A) Les mentions correspondantes (C) Une organisation possible

B. L'exemple pour une interface qui pourra s'adapter avec cette organisation est : Face-

book, site de l'université Alger1.

33
Exercice 4 : Évaluation d'une IHM
1. Le bureau d'ordinateur démontré est saturé, ce que nous appelons une charge per-

ceptive (ça fatigue la rétine),

2. Les icônes sont mal organisées (mélanger des applications avec les dossiers et les

chiers) → problème d'homogénéité,

3. Les icônes sont tous sélectionnées → contrôle de l'utilisateur de l'état du système,

4. Les étiquettes des icônes sont longues,

5. La non homogénéité des étiquettes (license, Fresh-Ram) : première lettre de la plu-

part des logiciels est en majuscule alors que d'autres logiciels leurs étiquettes com-

mencent par minuscules,

6. Les étiquettes des icônes sont non signicatives,

7. Les étiquettes sont parfois illisibles (LOGICIELS, de taille petite, etc.),

8. Faux raccourcis (raccourci non fonctionnels : shortcut to... raccourci vers...)

9. Icônes (dans certains cas) sont erronées : UseNEXT

10. Problème de cohérence (utiliser la langue française et anglaise)

34
Exercice 5 : Evaluation d'une IHM

Soient les trois congurations de plaques de cuissons suivantes :

Nous réalisons une évaluation ergonomique de plaques de cuissons selon :

• Compatibilité

• Temps nécessaire pour allumer la plaque de cuisson

• Taux d'erreur

Conguration A : représente une faible compatibilité car les bruleurs et les commandes

sont situés dans deux dispositions spatiales diérentes. Le risque de se tromper de bruleur

est important, il faut ajouter des labels aux boutons. Le temps mis par un utilisateur pour

allumer la plaque de cuisson selon la conguration A est important (perception, décision,

mouvement plus localisation les boutons à gauche, droite, en avant et en arrière).

Conguration B : décalage des bruleurs assure plus de compatibilité par rapport à la

conguration A car on trouve une position de gauche à droite pour les bruleurs comme

pour les boutons. Le risque d'erreur est moins important que celui de la conguration A.

Le temps mis par un utilisateur pour allumer la plaque selon la conguration B est faible

(dû au temps de décision faible) par rapport à la conguration A.

Conguration C : disposition spatiale entre les boutons et les bruleurs est la même.

Le risque d'erreur est minimal. Le temps nécessaire pour allumer la plaque est très faible

(dû au temps de décision très faible).

En conclusion, la conguration C est la meilleure, car la plus intuitive, la conguration A

est la plus mauvaise.

35
 Série de TP 1

But : utiliser le Java pour créer et manipuler des conteneurs et composants graphiques.

Exercice 1

Créer l'interface suivante en utilisant la table des coordonnées de composants inclut dans

cette interface.

Exercice 2

Créer l'interface suivante :

36
Chapitre 2
Sciences cognitives

2.1 Introduction

Les IHM ne sont pas conçues au petit bonheur la chance, mais nécessitent une démarche

de conception pour aboutir à un système interactif de qualité. Cette démarche se base

sur la connaissance des facteurs humains 1 [Ágoston, 2016]. Les connaissances sur les

facteurs humains sont issues de nombreuses sources, en particulier :

- Les sciences cognitives et

- L'ergonomie
Les sciences cognitives forment une base de connaissances importantes sur les diérents

phénomènes liés à la l'acquisition de connaissances, la perception ou l'action, le calcul,

la compréhension, le raisonnement, l'apprentissage, la mémoire, l'attention, l'intelligence

opératoire, les émotions, la conscience, le langage, la prise de décision et la planication

de l'action de l'utilisateur. Dans ce contexte, l'objectif de ce chapitre est double :

1. Comprendre les notions de base relatives aux sciences cognitives et

2. Démontrer l'apport des sciences cognitives dans la conception des IHM en se servant

2
des modèles élaborés dans le domaine. Cela exige d'aborder particulièrement deux

1. Facteurs humains peuvent se dénir comme une science liée à l'application des connaissances de
l'utilisateur, ses caractéristiques, capacités, limites, besoins et comportement à la conception des systèmes
interactifs utilisables
2. Modèle désigne une abstraction simple de certains aspects de l'Interaction Homme-Machine destiné
à comprendre facilement les actions de l'utilisateur

37
 modèles cognitifs de base à savoir : le processeur humain et la théorie de l'action.

Certes, ces deux modèles mettent en évidence deux intérêts majeurs :

(a) Prédire et évaluer d'autres alternatives d'interaction dans la conception des

IHM.

3
(b) Élaborer la charte de conception . Celle-ci permet d'améliorer les performances

du système interactif et surmonter les limites humaines.

2.2 Sciences cognitives

Les sciences cognitives regroupent un ensemble de disciplines (la neuroscience, la lin-

guistique, l'anthropologie, la philosophie, la sociologie, la psychologie et l'informatique)

scientiques dédiées à la description, l'explication et, le cas échéant, à la simulation des

mécanismes de la pensée humaine, animale ou articielle, et plus généralement de tout

système complexe de traitement de l'information capable d'acquérir, conserver, utiliser et

transmettre des connaissances [Tiberghien, 2003]. Cette discipline repose donc sur l'étude

(expérimentation et modélisation) de phénomènes observables chez les individus.

Exemples d'application des sciences cognitives

Les recherches en sciences cognitives débouchent sur de nombreuses applications pratiques

notamment les applications industrielles telles que : la conception et la fabrication de

dictionnaires, d'encyclopédies, des jeux et des livres éducatifs, la fabrication de capteurs

et de composants électroniques à l'informatique et aux télécommunications ainsi que le

développement des systèmes informatiques complexes. À titre d'illustration, citons parmi

ces applications, un système d'aide à la composition de messages pour des personnes

atteintes de maladies neurodégénératives paralysantes.

Un autre projet éducatif qui a abouti à la mise au point d'une plateforme "Tactos". Cette

dernière met en jeu un un boîtier de stimulateurs tactiles, un ordinateur portable, et

une tablette graphique accompagnée d'un stylet tactile. Tactos sert, pour les aveugles ;

comme un outil de reconnaîssance des formes dans l'espace (https://www.cairn.info/

revue-enfance2-2014-1-page-89.htm#no6.
3. Charte de conception est un guide de conception des interfaces dénissant les règles de présentation
et de fonctionnement d'un système interactif

38
Quant à l'application des sciences cognitives à un système informatique interactif, il est

indispensable de déployer des modèles théoriques porteurs de connaissances relatives

à l'utilisateur pendant l'interaction avec le système concerné. Parmi ces modèles, nous

évoquons le processeur humain et la théorie de l'action. Ils permettent d'apporter

des améliorations au niveau de la conception des IHM de façon à formaliser les

interactions de l'utilisateur, ainsi que prédire/évaluer son comportement interactif. Ce

4
modèle d'interaction doit représenter autant que possible le modèle mental [Craik, 1952]

de l'utilisateur an d'accomplir une tâche.

Figure 2.1  Modèle de l'interaction pour la tâche  partager la connexion

2.3 Modèle cognitif du processeur humain

5
Le modèle du processeur humain [Card et al., 1986] modélise les structures mentales d'un

utilisateur interagissant avec un système informatique. Il s'intéresse à la prédiction des

performances de l'utilisateur (telles que le temps de réaction, les capacités de mémorisation

et d'apprentissage) lors de son interaction avec un système informatique. Dans ce modèle,

l'opérateur humain est représenté comme un système de traitement de l'information. Ce

dernier traite de l'information et la transforme d'un input (stimuli) à un output (réponse)

en suivant une série d'étapes de traitement (opérations de comparaison et correspondance)

ordonnées.

4. Modèle mental peut se dénir, dans le contexte de la psychologie cognitive, comme une représenta-
tion interne de certains aspects du monde extérieur. Cette représentation permet de faire des prédictions
et déductions des actions à réaliser lors de l'interaction de l'utilisateur avec le système informatique
5. Structures mentales représentent des façons d'agir ou de penser qui peuvent inclure des buts, des
connaissances, des perceptions et des actions de l'utilisateur.

39
 Figure 2.2  Système de traitement de l'information
Selon la gure 2.3 [Fleury, 2016], le modèle du processeur humain structure le système de

traitement de l'information en un ensemble de trois sous-systèmes interdépendants : sous

système sensoriel, sous système cognitif et sous système moteur. Chaque sous-système du

modèle est constitué d'un ensemble d'entrées et de sorties, d'un processeur de traitement

de l'information, et d'une mémoire spécique de stockage.

Figure 2.3  Modèle du processeur humain

Fonctionnement du modèle du processeur humain

Basé sur le modèle du processeur humain, les activités mentales de l'utilisateur sont

modélisées comme une série d'étapes de traitement, où :

1. L'information est d'abord stimulée puis détectée par l'ensemble sensoriel (les sept

6
sens) de l'humain. Le stimulu détecté est codé sous forme symbolique dans un

tampon spécique au niveau de la mémoire sensorielle : le stimulu visuel est stocké

dans une mémoire iconique, le stimulu sonore est mémorisé dans la mémoire échoïque

alors que le stimulu de type toucher est sauvegardé dans la mémoire haptique.

2. L'information brute symbolique est ensuite transmise, par le processus sensoriel de

6. Stimulu est un phénomène physique détectable par un système sensoriel ou perceptif

40
 la mémoire sensorielle à la mémoire de travail.

Cette sequence d'étapes (1 et 2) s'applique aussi sur chaque item lue (ou modié)

dans la mémoire à long terme. Le succès de l'opération de lecture transfère successi-

vement les items dans la mémoire de travail des degrés d'activation donnés, jusqu'à

créer des mots, des phrases, etc.

3. Le ltre cognitif interprète le stimulu, le reconnait et le stocke dans une mémoire

de travail. Son rôle est de déterminer la nature des informations à transférer entre

les mémoires sensorielle et/ou à long terme à la mémoire de travail. Dans la seconde

phase, l'exécution, ces actions sont eectuées par le système moteur, provoquant

une modication du contenu de la mémoire de travail.

4. Le système moteur est responsable de gérer les mouvements motrices d'une personne

suivant le raisonnement du système cognitif et en réponse à l'information détectée.

Dans la suite du chapitre, nous allons détailler les basiques des trois sous systèmes issus

du modèle du processeur humain.

2.3.1 Sous système sensoriel

7
Le sous système sensoriel, responsable de la perception , correspond à l'ensemble des sous

systèmes (visuel, auditif, tactile, kinesthésique) destinés pour le traitement de stimuli via

l'utilisation des mémoires sensorielles et un mécanisme de traitement intégré.

Dans le cadre de l' interaction homme- machine, la perception visuelle est impor-

tante pour révéler les éléments (ou bien l'organisation visuelle des éléments)
d'une interface. Ce processus fait appel à la théorie de Gestalist ou Gestalt [Car-

roll, 2003]. L'idée fondamentale est que les lois de Gestalt ne sont que des moyens pour

inuencer sur nos perceptions et donc des guides pour nous aider sur notre manière d'in-

teragir. Son intérêt dans la conception des IHM consiste à simplier une IHM, organiser

son contenu visuel et donner du sens à des formes ou à des informations qui ne sont pas

disponibles à la première vue.

7. Perception est un processus dans lequel le système sensoriel reçoit passivement des stimulations (en
entrée), puis traite ces informations an de structurer, identier et interpréter de l'information sensorielle.

41
Théorie de Gestalist

La théorie de Gestalist dénit une série de lois et de méthodes permettant de décrire

la manière typique de percevoir et représenter les objets par regroupement des objets

similaires, reconnaissance des formes, reconnaissance des motifs et la simplication des

images complexes. Elle exprime l'idée que l'esprit humain accorde plus d' importance à
une forme (ensemble) qu'aux parties (ou points) qui forment cet ensemble.

Principe de la théorie de Gestalist

La théorie de Gestalist repose sur deux principes fondateurs :

1. Distinction gure-fond : notre cerveau structure les informations de telle façon

que ce qui est précis, régulier, signicatif, se détache du fond pour adhérer à une
structure globale, chaque élément est alors perçu comme une gure détachée du

fond. Ce fond est perçu comme une information moins structurée, moins
précise et irrégulière.
2. Regroupement : consiste à organiser les informations perçues (et les relations
entre eux).

En voici deux exemples démontrant l'utilisation la théorie de Gestalt en IHM. La pre-

mière application du principe gure/fond sur un menu navigationnel d'où le concepteur

peut utiliser un grand nombre de mécanismes visuels et des traitements de style an de

communiquer les items du menu. Alors que le regroupement des objets peut être expliciter

dans l'organisation des items ou onglets d'un menu.

Lois de Gestalist

Selon les théoriciens de la Gestalt, plusieurs mécanismes interviendraient an de permettre

au cerveau de regrouper les éléments les plus utiles en design de l'IHM, qui sont :

X Loi de la bonne forme : est le principe selon lequel les éléments s'organisent en une

forme simple, symétrique et stable.

La gure 2.4 (a) illustre un regroupement aléatoire des points qui forme automatique-

ment un seul objet (i.e une èche).

La page web https://besweb2017design.wordpress.com/2018/01/24/gestalt-loi\

-de-la-bonne-forme/ présentée dans la gure 2.4 (b) applique la loi de la bonne forme
pour la conception des interfaces web. Ce principe aide l'internaute à visualiser l'essen-

42
 (a) (b)

Figure 2.4  Loi de bonne forme

tiel du superu lorsqu'il y a une masse d'informations. Comme le montre la gure, les

éléments sont disposés de façon à concevoir des formes géométriques simples.

X Loi de la bonne continuité : dans le loi de bonne continuité, des éléments rapprochés

et similaires sont perçus comme étant plus liés que des éléments séparés.

(a) (b)

Figure 2.5  Loi de bonne continuité

Dans la gure 2.5 (a), nous percevons une série de points qui s'harmonisent constituant

un seul objet (un cube). Sur le site illustré dans la gure 2.5 (b), nous observons un

alignement visible des blocs d'objets graphiques de l'interface. Cet alignement est mis

en place par l'utilisation de la grille d'items ce qui facilite la lisibilité de la page.

X Loi de la proximité : conduit la vision à regrouper les éléments les plus proches (selon

la distance, dans l'espace ou dans le temps de mouvement) et faire éloigner les éléments

diérents.

(a) (b)

Figure 2.6  Loi de proximité

La loi de proximité est utilisée ici dans la gure 2.6 (a) : de diérents groupes, rangés en

43
 lignes (à droite) ou en colonnes (à gauche), sont mis en évidence en les délimitant par

un trait et un espacement. Ainsi, la barre d'outils de l'interface Word (gure 2.6 (b))

représente bien la loi de proximité. L'ensemble des onglets forment une barre d'outils.

X Loi de similarité : incite l'÷il à réunir des entités qui se ressemblent ; partageant des

caractéristiques similaires telles que la distance, la forme, la couleur, la taille, la tex-

ture, le comportement ou l'orientation, etc. Notre cerveau permet d'attribuer la même

signication aux objets présentées de la même manière.

Figure 2.7  Loi de similarité

Cette loi peut s'appliquer aux liens (souvent bleu et soulignés) hypertextes dans une

page Web. Ceux permettent à l'utilisateur d'identier rapidement les zones cliquables.

X Loi de destin commun : consiste à percevoir les éléments qui bougent dans la même

direction comme connectés que ceux qui sont stationnaires ou qui bougent dans des di-

rections diérentes. Quelque soit leurs apparences, leurs éloignements, ou leurs échelles,

si un ensemble d'objets se déplace dans une direction commune, cet ensemble est perçu

comment appartenant à un même groupe.

La loi du destin commun est largement utilisée dans le design des IHM, par exemple

lorsque le mouvement d'une barre de délement est synchronisé avec l' achage du

contenu d'une fenêtre ; ou encore lorsque le mouvement d'une souris physique est syn-

chronisé avec le mouvement d'un curseur à l'écran.

X Loi de clôture : son principe est de chercher à compléter ou délimiter (par une borne ou

une couleur) les parties manquantes ou imparfaites d'un élément pour en reconstituer

sa forme.

Les systèmes de fenêtres constituent de bon révélateur du principe de clôture (ferme-

ture). La page web, démontrée dans la gure 2.8, possède deux espaces délimités par

des clôtures : la premier enclôt est celui de toute la fenêtre alors que la seconde clôture

est celle qui entoure les quatre éléments au sein de la fenêtre.

44
 Figure 2.8  Loi de clôture
X Loi de familiarité (expérience du passé) : à partir de l'expérience acquise dans le passé

et les connaissances antérieures du sujet, nous percevons et interprétons facilement les

objets.

(a) (b)

Figure 2.9  Loi de proximité

Prenons l'exemple illustré dans gure 2.9 (a), nous pouvons interpréter ces éléments en

tant que lettres ou nombres selon leur contexte d'utilisation.

Nous repérons ce principe dans les interfaces graphiques, qui font usage des métaphores

(icônes "enregistrer" et "supprimer") an de favoriser la perception des contenus.

2.3.2 Sous système cognitif

Bien entendu, le sous système cognitif gère l'ensemble de activités mentales pour lesquels

nous utilisons et formons des connaissances. Ces activités sont aussi diversiées que : la

mémorisation, la compréhension, l'interprétation, le raisonnement, l'apprentissage, l'at-

tention, le calcul (comparaison des stimuli), le jugement et la prise de décision, la re-

cherche d'information dans la mémoire de travail, si nécessaire, la sélection d'une réponse

motrice et la planication des actions, etc. Pour plus de détails, le lecteur est invité à

consulter ce lien http://www.coerens.com/articles/architecture-cognitive.html

En fait, le processeur du système cognitif analyse et contrôle les comportements de l'indi-

vidu en fonction du contenu de sa mémoire. Deux types de mémoire sont impliqués, l'une

à long terme, pour enregistrer durablement l'information (i.e souvenirs, savoirs, connais-

sances et savoir-faire), l'autre à court terme (appelée aussi mémoire de travail) qui détient

45
temporairement les informations en cours de manipulation.

Certes, les présentes recommandations (bonnes pratiques) de la conception d'une IHM

peuvent aider à générer des interfaces utilisables. Elles sont formulées en s'inspirant no-

tamment des apports des sciences cognitives. Nous citons :

 Limiter le nombre des items dans un menu. Cette recommandation est inspirée de la

loi Miller qui postule que le nombre moyen d'objets pouvant être mémorisés est entre

5-9 items. Toutefois, il est important de garder en tête que cette indication est une

moyenne, la mémoire à court terme peut être très variable d'un individu à l'autre.

 Par ailleurs, ce nombre magique de Miller peut aussi être considéré comme une capacité

d'appréhension. Ce que nous sommes capables d'appréhender de manière simultanée

un certain nombre de commandes. Ce qui incite les concepteurs et ergonomes à ne pas

surcharger les interfaces en informations et en éléments .

 Établir des liens entre les diérents composants (par couleurs, format et emplacement).

 Favoriser l'apprentissage par répétition.

 Favoriser l'apprentissage en utilisant les métaphores.

2.3.3 Sous système moteur

Le système moteur se charge d'exécuter les actions décidées par le sous système cognitif

en agissant sur les stimuli musculaires. Dans le contexte de l'IHM, ces actions peuvent

être les manipulations des claviers, des écrans et des dispositifs de désignation.

En prenant en compte les capacités cognitives et motrices de l'utilisateur dans le processus

de conception des interfaces, les spécialistes du domaine ont établi plusieurs lois mathé-

matiques [Wietho and Butz, 2013] telles que Hick, Fitts (et Steering) dont l'objectif est

d'améliorer et calculer l'utilisabilté de diverses solutions de conception d'une IHM.

 Loi de Hick : décrit le temps moyen nécessaire à un utilisateur pour prendre une décision

en fonction du nombre de choix qu'il a à disposition. Sa formule s'écrit ainsi :

TDécision = k ∗ log2 (n + 1) (2.1)

Sachant que : k est une constante et n est le nombre des options.

Certes, le temps mesuré dépend du nombre des choix proposés et la complexité de la

tâche à réaliser.

46
 An de modéliser de manière mathématique l'acte de "pointer" un élément interactif

dans une IHM, nous exploitons la loi de Fitts qui sera détaillée par la suite.

 Loi de Fitts : détermine le temps de pointage pour aller d'une position de départ à un

objet cible. Diérentes formulations de la loi de Fitts ont été proposées suite à un certain

nombre d'études théoriques et de vérications expérimentales. Les deux variantes les

plus utilisées actuellement sont la formulation de Mackenzie et la loi de Steering.

 Version de Mackenzie : est dénie par l'équation 4.2.

Tpointage = a + [b ∗ log2 (D/W + 1)] (2.2)

Avec des constantes k, a, b mesurées de façon expérimentale et qui varient avec la

nature de tâche de pointage (telle que 1D, 2D, souris, stylet, main, pied, etc.), D
représente la distance au centre de l'objet cible et W est la surface ou la largeur de

la cible, mesurée le long de l'axe du mouvement. Pour un passage à travers un but

ou un mouvement canalisé, nous appliquons la loi de Steering.

 Loi de Steering : est donnée par l'équation 4.3.

D
Tpointage = a + [b ∗ log2 ( )] (2.3)
W
où W est déni comme la largeur de la but ; et mesuré dans la direction perpendicu-

laire à l'axe du mouvement alors que les valeurs des paramètres a, b sont diérentes

de celles utilisées dans l'équation de Fitts (Mackenzie).

(a) Pointage simple (b) Pointage canalisé

Figure 2.10  Types de pointage

Les lois de Fitts et Hick demeurent les seuls modèles mathématiques robustes à la dis-

position des concepteurs d'interface et des chercheurs en IHM. Elles ont de grandes im-

plications dans l'expérience utilisateur et la conception des interfaces. A titre d'exemple,

dans le Windows 7, le menu d'options est basé sur la loi de Fitts. L'utilisateur clique sur

l'une des options an de visualiser ou de masquer le contenu d'un dossier rapidement par

exemple. Elle fait gagner du temps de l'interaction (en diminuant le temps de pointage).

47
 Figure 2.11  Menu Window d'options

Nous pouvons également mieux structurer le contenu d'un formulaire d'information (2.12).

Figure 2.12  Formulaires d'information

Le seconde formulaire (à droite) est plus ergonomique par rapport à celui de la gauche en

terme de la position des des champs et des étiquettes. Une telle disposition des éléments

permet de scanner plus facilement et rapidement le formulaire pour les raisons suivantes :

éviter de faire de zig-zag et en respectant la loi de proximité et la loi de Fitts.

Caractéristiques et limites du modèle processeur humain

Le modèle du processeur humain se caractérise par : (1) Une abstraction de bas niveau, (2)

Une estimation quantitative des performances motrices et perceptuelles de l'utilisateur,

(3) Vérications expérimentales aisées et (4) Il est orienté ecacité.

Cependant, ce modèle ne s'intéresse pas aux structures cognitives (activités mentales) du

sujet humain lors de son interaction. Aussi, il n'implique pas de méthode de conception.

48
An de combler les lacunes du modèle processeur humain, la théorie de l'action [Bertelsen

and Bødker, 2003] a été proposée par Norman en 1986.

2.4 Théorie de l'action

C'est une théorie fondée sur la notion de modèle conceptuel. Cette approche met en

évidence le rôle primordial de l'interface homme-machine. Nous y distinguons en trois :

1. Modèle de l'utilisateur : est décrit par des variables psychologiques de l'utilisateur.

2. Modèle de conception : se dénit par des variables physiques liées au système et aux

utilisateurs. Il découle de l'étude de besoins, de la compréhension des tâches et des

utilisateurs.

3. Image du système : corresponde à la représentation physique du système ou bien les

diérentes interfaces conçues.

Son objectif est de réduire l'eort cognitif nécessaire pour transformer les intentions de

l'utilisateur, sélectionner et exécuter les commandes de l'utilisateur, ainsi que interpréter

les retours de l'utilisateur.

Comparée au modèle d processeur humain, la théorie de l'action permet de :

 manipuler la notion de l'état du système,

 prendre en compte les erreurs de l'utilisateur,

 expliquer les dicultés de l'utilisateur.

Selon la gure 2.13, le processus de la réalisation d'une tâche est établi en sept étapes :

 Dans la première étape, établir le but que l'utilisateur souhaite atteindre ou l'état du

système.

 Dans la formation d'une intention, le but pré-établi est transformé en intention de faire

une action.

 Pour la spécication d'une suite d'actions, l'intention doit être traduite en un séquence

de commandes ordonnées.

 L'étape suivante consiste à exécuter la suite des actions déjà dénies.

En ce qui concerne l'évaluation de l'état du système par rapport au but xé, elle com-

prend :

49
 La perception de l'environnement : l'utilisateur constate un ensemble de changements

survenus sur le système.

 L'interprétation de la perception selon les attentes de l'utilisateur.

 La comparaison vis-à-vis le but de l'utilisateur ce qui permet de redénir des intentions

de l'utilisateur.

Figure 2.13  Principe de la théorie de l'action

Prenons l'exemple suivant : Norman explique qu'une personne assise dans un fauteuil en

train de lire un livre peut avoir besoin de plus de lumière lorsqu'il fait plus sombre. Pour

cela, il va avoir besoin d'enclencher l'interrupteur de la lampe (intention) pour s'éclairer

(but). Pour réaliser cela, il faut spécier comment mouvoir le corps, comment s'étirer

pour atteindre l'interrupteur et comment étendre les doigts pour appuyer sur le bouton

(actions).

Selon la théorie d'action, nous considérons la tâche "s'éclairer pour lire un livre" est

structurée en sept étapes :

(1) Fixer le but : s'éclairer (avoir de la lumière) pour lire un livre

(2) Comment atteindre le but : enclencher l'interrupteur de la lampe

(3) Planier les actions : mouvoir le corps, s'étirer, atteindre l'interrupteur, étendre les

doigts , appuyer sur le bouton

(4) Exécuter les actions

(5) Percevoir l'état du système : percevoir s'il y'a de la lumière dans la pièce

(6) Interpréter l'état du système : la pièce a un certain éclairage

50
(7) Évaluer l'état du système : l'éclairage de la pièce n'est pas susant pour lire livre. En

conséquence, Norman doit allumer d'autres lampes dans la pièce (étape 1).

2.5 Conclusion
En résumé, les connaissances en sciences cognitives jouent un rôle important pour nous

aider à mieux comprendre les utilisateurs. Ces sciences fournissent des outils et guides

pour améliorer et adapter la conception des IHM en prenant en compte des capacités

sensorielles, cognitives et motrices de l'utilisateur.

Dans de ce chapitre, nous nous sommes intéressés en particulier au modèle cognitif du

processeur humain et la théorie de l'action. Il sert à formaliser les phénomènes mentaux

d'un utilisateur lors de son interaction avec un système interactif. A partir de ces deux

modèles, les experts du domaine ont proposé de diérentes lois notamment la loi de Fitts,

Hicks, Miller, règle de trois clics, loi de Pareto, aordance des éléments d'interaction, etc.

Dans le troisième chapitre, nous présentons les divers principes et critères ergonomiques

relatives aux IHM.

51
Série de TD 2

Exercice 1 : Modèle du processeur humain

En se basant sur le modèle du processeur humain, justier l'utilisation d'association

"icônes labels" dans les logiciels bureautiques.

Exercice 2 : Lois de Gestalist

Pour chaque interface Web ci-dessous, indiquer si la loi de Gestaltist est respectée (oui)

ou non respectée (non).

Loi de familiarité : (a) oui (b) non Loi de bonne continuité : (a) oui (b) non

Loi de similutide : (a) oui (b) non Loi de proximité :(a) oui (b) non

52
 Distinction gure/fond : (a) oui (b) non Loi de clôture : (a) oui (b) non

Exercice 3 : Temps d'interaction

Mesurer le temps de réponse d'un individu (utilisateur moyen) à un stimulus issu d'un

système informatique. Cet individu est assis devant son écran doit appuyer sur la barre

d'espace lorsqu'un symbole apparaît.

Quel est son temps de réponse ?

Exercice 4 : Lois de Fitts

Nous considérons un exemple de la fenêtre ci-dessous :

Calculer le temps de pointage (en secondes) d'une icône dans une fenêtre sachant que

a = b=0.1, la distance de la cible D =10 cm et la taille de la cible S =1cm.

Exercice 5 : Lois de Hick et Steering

Nous désirons comparer le temps moyen pour la sélection d'une commande dans un menu

hiérarchique à un seul niveau (menu principale → sous menu 1) et dans un simple menu.

53
1. Calculer le temps moyen de sélection pour des tailles de menus non hiérarchiques

de 12 et 24 items respectivement. Quelle est votre conclusion ?

2. Comparer ce temps avec une conguration d'un menu hiérarchique à un seul niveau.

Chaque item d'un sous-menu est séparé du suivant par une distance de 0,5 cm.

Sachant que a a=1.03, b0.1, k =0.1 et DBC =1cm.

54
Corrigé type de la série de TD 2

Exercice 1 : Modèle du processeur humain

En se basant sur le modèle du processeur humain, justier l'utilisation d'association

"icônes labels" dans les logiciels bureautiques.

Le modèle du processeur humain considère l'individu comme un système de traitement

de l'information constitué de 3 systèmes : système sensoriel, cognitif et moteur. Une in-

formation présentée sur un écran d'ordinateur va être analysée par un utilisateur suivant

ce modèle de processeur humain. Une icône (et son label : signication) est perçue par

l'utilisateur via le système sensoriel (qui détecte les signaux physiques). Cette information

(icône et son label) est transmise au système cognitif et en particulier à la mémoire à court

terme associée (Short Time Memory ou STM) dans un tampon. Le système cognitif a pour

rôle de traiter et d'analyser ce que lui a donné le système sensoriel. Le système cognitif

transmet alors la signication du label à la mémoire à long terme (Long Time Memory ou

LTM) sous forme d'un item (mnème, paquet, chunck) an d'être utilisé ultérieurement.

L'utilisateur agira alors grâce à son système moteur sur l'icône correspondante à l'action

qu'il désire entreprendre.

Une association (icône, label) permet de diminuer le taux d'oubli.

Exercice 2 : Lois de Gestalist

Pour chaque interface Web ci-dessous, indiquer si la loi de Gestaltist est respectée (oui)

ou non respectée (non).

- Loi de familiarité : (a) oui (b) non

- Loi de bonne continuité : (a) oui (b) non
- Loi de similutide : (a) oui (b) non

55
- Loi de proximité : (a) oui (b) non
- Distinction gure/fond : (a) oui (b) non
- Loi de clôture :(a) oui (b) non

Exercice 3 : Temps d'interaction

Chaque sous-système dispose de :

- Mémoire locale

m = capacité de la mémoire

d = persistance de la mémoire

- Processeur

t= cycle de base du processeur

Mesure du temps de réponse minimal d'un individu à un stimulus :

1. Le symbole apparaît

2. Le système sensoriel est activé (un cycle est nécessaire pour que l'image soit repré-

sentée)

3. Le système cognitif est activé (un cycle est nécessaire pour que l'image soit connectée

à une réponse)

4. Le système moteur est activé (un cycle pour appuyer sur la barre d'espace)

T rép = tsensoriel + tcognitif + tmoteur

T rép = 100 + 70 + 70 = 240 ms (<= temps moyen)

Exercice 4 : Lois de Fitts

Calcul du temps de pointage d'une icône dans une fenêtre :

T = a + [b ∗ log2 (D/S + 1)]

T =0.1+0.1 log2 (10/1+1)=0.45 s

Exercice 5 : Lois de Hick et Steering

Calcul du temps moyen pour la sélection d'une commande sachant que a=1.03, b=0.1,

k=0.1 et DBC=1cm. A. Dans un menu simple de 12 items :

56
Tsélection = TDécision + Tpointage
TDécision = T = k ∗ log2 (n + 1) =0.1 log2 (12+1)=0.37 secondes

Tpointage = T = a + [b ∗ log2 (D/W + 1)]=1.03+0.1* log2 [(12*0.5/0.5)+1]=1.40 secondes

Tsélection =0.37+1.40=1.77 secondes

B. Dans un menu hiérarchique de 12 items avec un seul niveau :

Tsélection = TDécision (AB) + Tpointage (AB) + Tpointage (BC) + TDécision (CD) + Tpointage (CD)
TDécision (AB) = k ∗ log2 (n + 1) = 0.1 log2 (6 + 1) =0.28 secondes

Tpointage (AB) = a+[b∗log2 (D/W +1)] = 1.03+0.1∗log2 [(6∗0.5/0.5)+1] = 1.31 secondes

Tpointage (BC) = a + [b ∗ log2 (D/W )] = 1.03 + [0.1 ∗ 1/0.5] =1.23 secondes

TDécision (CD) = k ∗ log2 (n + 1) = 0.1 log2 = 0.28 secondes

Tpointage (CD) = a + [b ∗ log2 (D/W + 1)] = 1.03 + 0.1∗ log2 [(6 ∗ 0.5/0.5) + 1] =1.31 secondes
Tsélection = 0.28 + 1.31 + 1.23 + 0.28 + 1.31 =4.41 secondes

La sélection d'une commande dans un menu hiérarchique est plus longue (avec moins

d'erreur de sélection) que celle dans un menu simple (avec plus d'erreur de sélection).

Nous établissons le même principe pour un menu de 24 items.

57
Série de TP 2

But : utiliser le Java pour gérer la disposition des composants graphiques.

Exercice 1

Réaliser les interfaces suivantes :

Exercice 2

Réaliser les interfaces suivantes :

58
Chapitre 3
Ergonomie des Interfaces Homme-Machine

3.1 Introduction

L'intérêt porté à la qualité des interfaces homme- machine va de pair avec l'importance,

sans cesse croissante, qu'elles prennent dans les systèmes interactifs informatiques. Par

conséquent, l'utilisation des normes et recommandations ergonomiques pour le dévelop-

pement de ces systèmes est essentielle an d'assurer des interfaces utilisables.

Ce chapitre a pour objectif de présenter l'ergonomie des IHM. Il s'agit à la fois de fournir

une dénition, mais surtout de donner une acception la plus courante des termes fon-

damentaux, des critères et recommandations ergonomiques et leurs signications dans le

contexte des systèmes interactifs informatiques.

3.2 Ergonomie
1
Le terme  ergonomie  vient du grec et signie " règle du travail". L'ergonomie au travail

, selon l'Association Internationale d'Ergonomie (2000), est : "la discipline scientique qui

vise la compréhension des interactions entre les individus et les éléments d'un système.

C'est ainsi la profession qui applique des théories, modèles, données et méthodes en vue

d'optimiser le bien-être des utilisateurs et les performances des systèmes".

1. https://www.usabilis.com/ergonomie-cognitive/

59
Au sens large, elle contribue notamment à la conception et à l'évaluation des tâches, des

processus de production, des machines, des produits, des outils, des environnements et

des organisations.

Il en existe plusieurs sortes. Nous distinguons l'ergonomie physique, l'ergonomie organisa-

tionnelle et l'ergonomie cognitive http://www.ethicergonomie.com/lergonomie/. Ces

trois domaines d'ergonomie convergent tous vers un seul et unique objectif : améliorer
le bien-être au travail et ainsi, les performances des individus.
• Ergonomie physique : est centrée sur les caractéristiques physiques et biomécaniques
de l'individu en lien avec son activité physique (gestuelle, posture de travail, etc.) et

son environnement de travail (bruit, lumière, température).

An d'améliorer par exemple le confort des élèves sur un poste du travail informatique,

les postes de travail doivent être correctement aménagés selon la taille de l'individu,

la position de l'ordinateur, la position des pieds, la position du dos, les coudes et les

poignets. Concrètement, cela passe par un poste adapté et l'éleve doit pouvoir utiliser

un siège réglable, poser ses pieds à plat sur le sol ou sur un repose-pied et forme un

◦
angle de 90 .

• Ergonomie organisationnelle : s'interesse à l'optimisation des systèmes socio-techniques,

incluant la conception et la modication des organisations de travail, la gestion des col-

lectifs de travail, la communication, la abilité et le développement des compétences.

Nous prenons l'exemple de l'organisation des espaces tels que la salle de classe pour

l'apprentissage des élèves. Organiser des tables dans une salle en rangées, en U ou table

ronde ; en rangée est adapté pour un exposé, U et table ronde sont utilisées pour un

travail d'équipe ou collaboratif.

Pour une entreprise, il s'agit notamment de son organisation générale, la planication

des tâches, la réalisation des emplois du temps et la communication entre les équipes

et leur manager.

• Ergonomie cognitive : est orientée vers l'adaptation des outils (machines, postes
de travail), des interfaces homme-machine, des activités (régulation, anticipa-

tion, sécurité, abilité) en rapport aux processus mentaux (perception, mémoire,

raisonnement, etc.) des utilisateurs. Elle s'appuie sur les sciences cognitives ainsi que

la psychologie cognitive.

En eet, l'ergonomie cognitive occupe une place prépondérante dès qu'il s'agit d'appré-

60
hender les aspects cognitifs, aectifs et sociaux qui inuencent sur les performances des

systèmes interactifs informatiques. Il est donc nécessaire de s'intéresser, dans la section

suivante, à l'ergonomie cognitive des IHM.

3.3 Ergonomie des IHM

L'ergonomie des IHM [Nogier et al., 2012] sert à concevoir et développer des interfaces
adaptées aux besoins des utilisateurs tout en appliquant les principes de l'ergonomie
cognitive.

Le rôle était par conséquent pour l'ergonome d'interface, de préconiser des ajustements

en collaboration avec les diérents intervenants notamment un concepteur de l'expérience

utilisateur (UXD) et un concepteur de l'interface utilisateur (UID). Ces ajustements per-

mettent de garantir une utilisabilité (facilité d'utilisation) optimale d'une IHM

ainsi qu'une expérience améliorée de l'utilisateur (UX).
L'ergonomie d'un système interactif dépend de la cible, de la tâche à laquelle l'utilisateur

souhaite répondre et du contexte dans lequel il sera utilisé.

Appliquée au domaine du web, l'ergonomie web peut être dénie par sa capacité à

répondre ecacement aux attentes des utilisateurs et à leur fournir un confort de naviga-

tion d'un site web spécique. Elle est cruciale pour faire attirer de visiteurs et les déliser,

mais aussi pour augmenter le taux de transformation de visiteurs en abonnés et puis en

prospects.

Dans le cadre d'interfaces mobiles, il s'agit de faciliter la navigation des mobinautes an

de créer des expériences positives, et générer des interactions optimisées. Nous parlons

dans ce contexte précis de l'ergonomie mobile.

Pour les lecteurs qui désirent approfondir les connaissances sur l'ergonomie web et mobile,

nous vous suggérons l'ouvrage [Nogier et al., 2012].

3.4 Méthodes d'ergonomie des IHM

An d'améliorer l'ergonomie du système interactif, deux pratiques ergonomiques [Kolski,

1995] sont possibles : une ergonomie dite normative et une autre visant la conception.

61
(1) Ergonomie de conception : dénit une démarche de développement ergonomique

des applications interactives depuis la spécication jusqu'à l'évaluation des IHM. Elle

fait appel aux outils spéciques et intégrer un spécialiste des facteurs humains dans

l'équipe de développement. Son rôle constitue un apport précieux lors de l'analyse et

de la modélisation des tâches de l'utilisateur interagissant avec une application donnée.

(2) Ergonomie normative : correspond à une intégration de critères ergonomiques par

le biais de manuels et/ou de guides de style. Toutefois, l'utilisation de ces derniers sera

confortée avantageusement par la présence d'un ergonome.

Les manuels ergonomiques consistent en une compilation de recommandations, guides,

listes de contrôle, standards ou normes ergonomiques. Ces manuels sont établis par des

experts et conçus pour tenir compte des caractéristiques physiologiques, psychologiques

et cognitives des individus. Citons les plus connus [Daubias, 2019b] :

X Compilations de règles de Vanderdonckt [Vanderdonckt and Bodard, 1994]

X Guide de conception de Smith et Mosier [Smith and Mosier, 1986]

X Huit critères de Bastien et Scapin [Bastien and Scapin, 1993]

X Cinq critères centraux d'évaluation de Schneiderman [Shneiderman and Plaisant,

2010a]

X Norme ISO 9241 [J.Dul et al., 1996]

X Sept règles d'or de Coutaz [Coutaz, 1990]

X Dix heuristiques de Nielson [Nielsen, 1995]

X etc.

Les guides de style fournissent des recommandations relatives à la conception des in-

terfaces utilisateurs pour un système d'exploitation donné. Les spécicités à respecter

concernent les aspects des interfaces, le fonctionnement des interactions ainsi que ses

diérents niveaux de granularité. Ils visent également à ce que celles-ci soient utilisées

de manière cohérente d'une application à l'autre.

L'ensemble des ces guides [Daubias, 2019a] sont disponibles sur les références suivantes :

Windows
https://docs.microsoft.com/fr-fr/windows/uwp/design/
MacOs
https://developer.apple.com/library/content/documentation/UserExperience/
Conceptual/OSXHIGuidelines

62
 iOS
https://developer.apple.com/ios/human-interface-guidelines
Linux (et window manager)
http://design.ubuntu.com
Android
https://developer.android.com/guide/practices/ui_guidelines
Android Wear
https://designguidelines.withgoogle.com/wearos/wear-os-bygoogle/designin\
g-for-watches.html
Cependant, les critères de Bastien et Scapin ont été démontrés importants par rapport à

l'utilisation d'autres références, du fait qu'ils ont fait l'objet d'évaluations expérimentales.

Dans la suite du chapitre, nous allons les détailler et les illustrer par des exemples d'in-

terfaces homme-machine.

3.5 Critères de Bastien et Scapin

Face à la multitude des recommandations disponibles, deux ergonomes ; Christian Bas-

tien et Dominique Scapin, ont procédé à une synthèse d'environ de 900 recommandations

ergonomiques. Cette étude a mené l'établissement d'une liste de 18 critères élémentaires

répartis dans huit dimensions.

Par dénition, les critères de Bastien et Scapin désignent un ensemble d'heuristiques qui

servent à évaluer l'utilisabilité d'une interface web ou mobile avant (dans le cadre d'un

audit), pendant (pour la génération des IHM) ou après la conception (an de contrôler

l'ergonomie). Ils ont l'avantage d'être moins coûteux, rapides et révèlent les erreurs er-

gonomiques les plus fréquentes. Cependant, ils n'impliquent pas les utilisateurs dans le

processus d'évaluation ergonomique. Ils comportent les éléments suivants :

 Guidage

 Charge de travail

 Contrôle explicite

 Adaptabilité

 Gestion des erreurs

 Homogénéité/cohérence

63
 Signiance des codes et dénominations

 Compatibilité

Guidage Le guidage regroupe l'ensemble de moyens mis en ÷uvre pour conseiller, orien-
ter, informer et conduire l'utilisateur lors de ses interactions avec un système donné.

Un guidage explicite ou un guidage implicite(3.1 (a) et (b)) peut être impliqué. Le critère

de guidage peut englober quatre sous critères à savoir :

• Incitation : c'est l'ensemble de moyens et mécanismes mobilisés an de conduire

l'utilisateur à réaliser des actions précises dans un contexte donné.

Recommandations :

- Griser les fonctions non disponibles (options de menu, boutons, etc.)

- Fournir la liste des saisies attendues (listes déroulantes, codes à utiliser, etc.)

- Donner le format de saisie des données (dates, dimensions, etc.)

- Modier la forme du curseur (pointeur de la souris) pour donner des indications

sur l'opération à eectuer

- Indiquer toutes les informations d'état

- Indiquer clairement les champs obligatoires (astérisque ou un autre indicateur)

- Montrer clairement comment aller en avant et en arrière

- Acher des bulles d'aides (Tooltips) sur les éléments non triviaux (icônes des

barres d'outils par exemple)

(a) Retours implicite au champ suivant (b) Boutons grisés

(c) Champs obligatoires (d) Incitation du format de la date

Figure 3.1  Guidage-incitation

64
 Dans la gure 3.2 (a), le numéro d'abonné est divisé en trois blocs de trois chires.

Une fois le premier bloc saisi, le curseur se déplace automatiquement au bloc suivant.

• Groupement et distinction des éléments : ce critère concerne l'organisation visuelle

des items d'information par format de présentation (couleur, forme, syntaxe) ou par

position (localisation, entourer par bordure). Cette organisation permet de repérer

les items à l'intérieur de la classe, illustrer des relations entre les divers items or-

ganisés, leur appartenance ou non appartenance à une même classe, ou encore de

montrer la distinction entre les diérentes classes d'items.

(a) (b)

Figure 3.2  Guidage  groupement et distinction

• Feedback immédiat : il s'agit de fournir un retour (feedback) du système en réponse

aux actions de l'utilisateur. Ce feedback doit être immédiate que possible.

Le système doit toujours informer l'utilisateur sur son état en indiquant : les actions

déclenchables et non déclenchables, le résultat des actions eectuées, l'état d'avan-

cement d'une tâche et les erreurs du système.

Recommandations :

- Le système interactif doit répondre à toute action de l'utilisateur par un change-

ment (visuel, sonore, etc.) dans la présentation de l'interface

- Indiquer les modes de fonctionnement du système

- Signaler les traitements longs par une indication d'attente (sablier, barre de pro-

gression, animation, message, etc.)

- Faire apparaître les saisies de l'utilisateur

- Rendre visible les traitements réalisés par le logiciel et indiquer clairement lorsqu'ils

ont échoué

• Lisibilité : cet élément concerne les caractéristiques (police des caractères, couleur

et disposition) lexicales de présentation des informations sur l'écran qui peuvent

faciliter la perception des informations textuelles et iconographiques par un choix

65
 (a) Attente longue (b) Attente courte

(c) Changement de l'apparence du bouton (d) Message de conrmation

Figure 3.3  Guidage  Feedback immédiat

judicieux de leurs propriétés : diversité, taille, minuscule/majuscule, italique/non

italique, contraste, choix de couleur, alignement, espace interligne, mise en page,

dimension, choix des symboles, etc.

Recommandations :

- Utiliser une police de caractère lisible (à l'écran, éviter les textes italiques, carac-

tères de petites tailles, etc.)

- Soigner les espacements (interlignes) et les alignements (justication)

- Adapter la taille des libellés et celle des icônes an de garantir leur interprétation

- Soigner les contrastes (choix des couleurs pour le fond et le premier plan)

- Prendre en compte la conguration de la machine cible (résolution, etc.)

(a) Lisibilité des couleurs (b) Lisibilité de la typographie

Figure 3.4  Guidage  Lisibilité

Charge de travail : ce critère implique les éléments de l'interface qui permettent de

réduire la charge mnésique (diculté de mémorisation) et visuelle pendant l'interaction.

Deux sous-critères participent au critère charge de travail :

66
• Brièveté : il s'agit ici de limiter autant que possible le travail de lecture (i.e concision

des éléments individuels) et les actions nécessaires à l'atteinte d'un but et à l'accom-

plissement d'une tâche (i.e actions minimales).

Recommandations :

- Limiter le nombre d'options dans un menu ou dans une liste déroulante

- Éviter les libellés trop longs

- Réduire le nombre d'actions élémentaires pour atteindre un objectif donné

- Éviter de basculer des informations d'une fenêtre à l'autre, de faire des grands calculs

ou de saisir des informations qui peuvent être déduites par le système.

(a) Problème de concision (b) Cinq clics

Figure 3.5  Charge de travail  Brièveté

• Densité informationnelle : concerne la quantité de l'ensemble des items achés sur l'in-

terface.

Recommandations :

- Ne pas acher que les informations pertinentes pour eectuer une tâche

- Éviter les écrans trop chargés (décomposer si nécessaire)

- Éviter les liens trop nombreux dans un texte aché sur une page web

- Éviter les textes trop verbeux (dialogue simple, phrases courtes)

- Privilégier la reconnaissance (symboles, icônes)

(a) Boite de dialogue chargée (b) Texte verbal

Figure 3.6  Charge de travail  Densité informationnelle

Contrôle explicite : ce critère concerne, d'une part, la prise en compte par le système

des actions des utilisateurs. D'autre part, il est lié au contrôle des utilisateurs sur le trai-

67
tement de leurs actions. Il comprend deux sous critères : actions explicites et contrôle

utilisateur.

Recommandations :

- Ne pas déclencher d'opérations sans le consentement explicite de l'utilisateur

- Déclencher l'opération immédiatement après l'action de l'utilisateur ou sinon indiquer

clairement que l'opération sera diérée (ou qu'elle ne peut pas être eectuée)

- Orir à l'utilisateur une validation explicite des commandes importantes ou dicilement

réversibles

- Orir la possibilité d'interrompre les traitements longs

- Autoriser les retours en arrière

- Permettre, en tout temps, de quitter la fonction courante ou même le logiciel utilisé

(a) Actions explicites (b) Contrôle utilisateur

Figure 3.7  Contrôles explicites

Adaptabilité : ce critère caractérise la capacité du système à réagir selon le contexte et

l'expérience de l'utilisateur. Nous distinguons deux sous-critères :

• Flexibilité : correspond aux diérentes possibilités (méthodes) mises à la disposition des

utilisateurs pour personnaliser l'interface selon les objectifs et les tâches à accomplir

par l'utilisateur.

Recommandations :

- Permettre d'eectuer les tâches (fonctions) à la fois au clavier et à la souris

- Autoriser le déclenchement d'une commande fréquente depuis plusieurs endroits dans

l'application

- Fournir un moyen rapide d'accéder aux commandes des menus (raccourcis)

• Prise en compte de l'expérience de l'utilisateur : elle concerne les moyens mis en ÷uvre

pour respecter le niveau d'expérience de l'utilisateur.

Recommandations :

68
 - Dénir le niveau d'expérience de l'utilisateur

- Guider l'utilisateur novice pas à pas dans la réalisation de la tâche

- Mettre en place un guidage fort en créant des assistants (wizard)

- Paramétrer le logiciel selon les préférences de l'utilisateur

- Donner aux utilisateurs expérimentés les moyens d'eectuer leur tâche de manière

rapide et eciente

- Utiliser des métaphores familières

(a) Flexibilité (commandes et raccourcis) (b) Conguration de l'IHM selon l'expérience

Figure 3.8  Adaptabilité

Gestion des erreurs : elle porte sur les solutions envisagées pour détecter, prévenir,

minimiser et corriger les erreurs du système ou les actions critiques de l'utilisateur.

Trois sous-critères y participent :

• Protection contre les erreurs : c'est un moyen mis en place pour détecter et prévenir les

erreurs de saisie ou de commandes ou les actions aux conséquences néfastes.

Recommandations :

- Mettre en évidence (griser) les commandes non disponibles

- Fournir la liste des valeurs possibles, des unités, etc.

- Détecter les erreurs au plus tôt et avertir immédiatement l'utilisateur

- Minimiser les saisies au clavier (si possible, listes à choix)

- Prévenir les risques de perte de données (demander conrmation)

• Qualité des messages d'erreur : en d'autres termes la pertinence, la facilité de lecture et

l'exactitude de l'information donnée aux utilisateurs sur la nature des erreurs commises

(syntaxe, format, etc.) et sur les actions à entreprendre pour les corriger.

Recommandations :

- Placer les messages d'erreur là où l'utilisateur est censé regarder

- Acher des messages d'erreur explicites (en utilisant le langage de l'utilisateur)

- Éviter les textes trop longs (rester bref, utiliser des liens, des références, etc.)

69
 - Éviter les textes réprobateurs

- Faire en sorte, si possible, que les textes soient auto-susants.

- Trouver le bon compromis entre concision et exhaustivité

• Correction des erreurs : ce sous-critère fait référence aux moyens mis à la disposition

des utilisateurs pour leur permettre de corriger leurs erreurs.

Recommandations :

- Mettre en évidence le champ ou l'élément erroné

- Permettre d'annuler une action ou une série d'actions

- Proposer des alternatives pour corriger les erreurs

(a) Protection contre les erreurs (b) Qualité des messages d'erreurs

(c) Correction des erreurs

Figure 3.9  Gestion des erreurs

Homogénéité et cohérence
L'homogéniété : c'est la façon avec laquelle les choix de conception de l'interface sont

conservés pour des contextes identiques et sont diérents pour des contextes diérents.

La cohérence : elle consiste à avoir un système qui respecte une logique cohérente de dié-

rents éléments pour la présentation (graphisme, localisation, vocabulaire, format, syntaxe,

formulation, ponctuation,casse i.e majuscule, minuscule) ainsi que le comportement (ré-

action du système, messages, retours sonores, etc.) de diérents éléments.

Recommandations :

- Utiliser le même schéma d'agencement pour toutes les fenêtres (gabarit d'écran)

- La sémantique des boutons de la souris doit être constante

- Le même vocabulaire doit être utilisé pour désigner les mêmes fonctions

- Utiliser une organisation et une syntaxe cohérente pour les menus

70
- Utiliser de manière cohérente les symboles graphiques (icônes, couleurs, etc.)

(a) Homogénéité des champs de texte (b) Problème de cohérence (langue)

Figure 3.10  Homogénéité et cohérence

Signiance des codes et dénominations : ce critère correspond à l'adéquation entre

l'information achée ou le comportement présenté par l'utilisateur et son référent.

Recommandations :

- Éviter les termes techniques (jargon informatique) et parler le langage de l'utilisateur

- Utiliser les métaphores des objets (par exemple la gomme)

- Dénir explicitement et respecter les règles d'abréviation

- Prendre en compte les standards en vigueur pour toutes les dénominations

(a) (b)

Figure 3.11  Signication des codes et dénomination

Compatibilité : c'est la capacité de l'IHM à s'intégrer dans l'activité de l'utilisateur. La

compatibilité concerne également le degré de similitude entre les divers environnements,

plateformes, ou applications.

Recommandations :

- Agencer les éléments de l'interface en fonction de la tâche de l'utilisateur

71
- Présenter les informations de façon cohérente par rapport aux autres supports de travail

(documents papier, formulaires, organigrammes, directives, etc.)

- L'accès aux fonctions doit être compatible avec la tâche de l'utilisateur

(a) Barre du menu Word (b) Barre du menu Excel

Figure 3.12  Compatibilité

3.6 Performance du couple Homme-Machine

En complément des critères ergonomiques de Bastien et Scapin, une interface ergono-

mique, selon Jean-Pierre Meinadier, doit vérier :

X Facilité d'apprentissage

X Facilité, ecacité et sécurité d'utilisation

X Plaisir d'utilisation

X Acceptabilité

X Satisfaction des utilisateurs

X Productivité satisfaisante du couple homme-machine

X Rentabilité (pour les entreprises)

Par extension, une interface utilisateur non ergonomique peut provoquer ce qui suit :

Au niveau individuel :

X Confusion

X Frustration

X Panique

X tress

X Ennuie

Au-delà de l'impact direct sur les utilisateurs, une mauvaise ergonomie peut aussi avoir

des conséquences au niveau social (ou sur l'entreprise) :

X Rejet et erreurs

X Baisse des performances

72
X Régression vers des tâches d'exécution

X Coût (détournement, modication des tâches, etc.)

3.7 Conclusion
Pour conclure, nous pouvons comprendre que l'ergonomie des IHM ne se juge pas seule-

ment par l'esthétique de l'écran mais surtout en fonction des critères de l'ergonomie, des

besoins des utilisateurs et ses objectifs.

Par conséquent, les critères de Bastien et Scapin possèdent toutefois l'intérêt d'être ex-

périmentalement vériés (par un ergonome), de fournir des valeurs mesurables de l'uti-

lisabilité de l'IHM et de guider l'équipe de développement bien que son mise en ÷uvre

pose de nombreux problèmes en particulier la diculté d'utilisation par des concepteurs

ou évaluateurs non spécialistes des facteurs humains ainsi que le manque d'information

sur la façon de les utiliser.

Pour cela, il est nécessaire d'impliquer l'utilisateur nal lors de l'évaluation ergonomique

du système à développer, ce qui permet d'identier les problèmes liés à l'usage réel du

système et non détectés par l'ergonome lors de l'évaluation experte.

Dans le quatrième chapitre, nous présentons le cycle de conception des systèmes interac-

tifs.

73
Série de TD 3

Exercice 1 : Notions de base relatives à l'ergonomie des IHM

 Quelle est la diérence entre l'ergonomie normative et analytique ?

 Citez les principes qui réduisent la charge mentale de l'utilisateur ?

 Comment construit-on un bon modèle mental ?

 Citer les règles les plus importantes permettant d'optimiser l'ergonomie des interfaces

web ?

 Quelles sont les bonnes pratiques pour améliorer l'ergonomie mobile ?

Exercice 2 : Critères et principes ergonomiques

Relier chaque critère à sa dénition correspondante.

Critère Dénition
1. Utilisabilité A. L'interface doit minimiser le nombre d'erreurs de l'utilisateur et l'aider à

réparer ses erreurs

2. Utilité B. Préserve des données et des résultats acquis par l'utilisateur

3. Ecacité C. Prise en compte par le système des actions des utilisateurs ainsi que le

contrôle des utilisateurs sur le traitement de leurs actions

4. Ecience D. Ensemble des moyens mis en ÷uvre pour conseiller, orienter infor-

mer et conduire l'utilisateur lors de ses interactions (incitation, groupe-

ment/distinction, feedback immédiat, lisibilité)

Facilité d'apprentissage E. Ensemble des moyens visant à réduire ou éviter les erreurs de l'utilisateur

et lui permettre de les corriger (protection contre erreurs, qualité des messages

d'erreur, correction des erreurs).

6. Facilité de mémorisation F. Façon avec laquelle les choix de conception de l'interface sont conservés

pour des contextes identiques (et sont diérents pour des contextes diérents)

7. Réduction des erreurs G. Capacité d'un objet à être facilement utilisé par une personne donnée

8. Satisfaction subjective H. Ensemble des moyens visant à réduire la charge perceptive et mnésique

(diculté de mémorisation) de l'utilisateur (brièveté, densité informationnelle)

74
 Critère Dénition
9. Transparence I. Capacité du système à réagir selon le contexte et l'expérience de l'utilisateur

(exible, prise en compte de l'expérience de l'utilisateur)

10. Intuitive J. Adéquation entre l'information achée ou le comportement présenté par

l'utilisateur et son référent

11. Intégrité K. Interface respecte les contraintes fonctionnelles et opérationnelles

12. Compatibilité L. Interface s'adapte automatiquement au niveau d'expérience ou aux straté-

gies de l'utilisateur

13. Guidage M. Capacité à produire une tâche donnée avec minimum d'eort

14. Adaptabilité N. Ce qui se passe réellement dans le système informatique est caché pour

l'utilisateur

15. Adaptative O. Capacité de l'IHM à s'intégrer dans l'activité de l'utilisateur

16. Cohérence P. L'interface doit être plaisante à utiliser

17. Homogénéité Q. L'interface doit permettre à l'utilisateur de se souvenir facilement de son

utilisation

18. Contrôle explicite R. Précision ou degré d'achèvement des objectifs atteint par l'utilisateur

19. Charge du travail S. Interface dans laquelle il n'existe pas de contradiction

20. Gestion des erreurs T. Interface facile à apprendre

21. Signication des codes U. Système réalise ce que l'utilisateur pense naturellement ou naïvement qu'il

et dénominations va faire

Exercice 3 : Évaluation ergonomique des IHM

Comparer les quatre IHM du point de vue ergonomique (selon les huit critères de Bastien

et Scapin).

75
Exercice 4 : Évaluation ergonomique des IHM

 Quelle est la diérence entre raccourcis claviers et touches d'accès.

 Le menu ci-dessus appartient à l'application GIF Construction Set. Qu'y a-t-il de bizarre

avec ce menu ?

 Quand on utilise une interface sous Windows, devrait-on penser à de nouveaux raccour-

cis claviers pour les opérations d'édition. De même quand on développe une nouvelle

interface sous Windows.

Exercice 5 : Évaluation ergonomique des IHM

1. Décriver et expliquer les défauts ergonomiques numérotés sur l'interface du logiciel

de la gure ci-dessous (en se basant les huit critères de Bastien et Scapin).

2. Proposer une solution de ces défauts.

76
Corrigé type de la série de TD 3

Exercice 1 : Notions de base relatives à l'ergonomie des IHM

 Quelle est la diérence entre l'ergonomie normative et analytique ?

Ergonomie normative : dénit des recommandations, règles, critères à respecter lors

de la conception d'une interface.

Ergonomie analytique : dénit une démarche de développement ergonomique des

applications depuis l'observation et l'analyse jusqu'à l'évaluation d'une interface.

 Citez les principes qui réduisent la charge mentale de l'utilisateur ?

 Privilégier la clarté visuelle (organisation, perception)

 Prévoir des valeurs par défaut et autoriser les fonctions  Undo  et  Redo 

 Soulager la mémoire à court terme

 Fournir de la rétroaction visuelle

 Privilégier la reconnaissance au rappel

 Orir la possibilité de raccourcis

 Privilégier une syntaxe de type objet-action

 Utiliser des métaphores du monde réel

 Privilégier la découverte progressive des fonctions oertes (contexte)

 Comment construit-on un bon modèle mental ?

• Utiliser des métaphores (minimiser l'appel aux ressources cognitives et privilégier

l'analogie)

• Minimiser les informations confuses et éliminer celles qui ne sont pas signicatives

(maximiser la qualité plutôt que la quantité des informations)

• Favoriser un  retours  clair et informatif

• Assurer de la cohérence de l'interface

 Citer les règles les plus importantes permettant d'optimiser l'ergonomie des interfaces

web ?

77
 L'ergonomie web suit les principes suivants et qui sont inspirés de l'ouvrage de référence

d'Amélie Boucher [Boucher, 2020].

1. Règle d'ergonomie web n◦ 1 : Une architecture solide de l'information

L'architecture de l'information dénit les fondations d'un site. Elle détermine l'organi-

sation des contenus, la navigation dans le site et le système de recherche

2. Règle d'ergonomie web n◦ 2 : Une organisation visuelle irréprochable

3. Règle d'ergonomie web n◦ 3 : Un site web parfaitement cohérent

4. Règle d'ergonomie web n◦ 4 : Le respect des conventions (de localisation, de vocabu-

laire, d'interaction et de présentation) du web

5. Règle d'ergonomie web n◦ 5 : Une bonne transmission de l'information

6. Règle d'ergonomie web n◦ 6 : Des contenus compréhensibles

7. Règle d'ergonomie web n◦ 7 : Une assistance complète pour l'utilsateur

8. Règle d'ergonomie web n◦ 8 : Une bonne gestion des erreurs

9. Règle d'ergonomie web n◦ 9 : Un site rapide et uide

10. Règle d'ergonomie web n◦ 10 : La liberté de l'action de l'utilisateur

11. Règle d'ergonomie web n◦ 11 : Un site accessible à tous

12. Règle d'ergonomie web n◦ 12 : La satisfaction de l'internaute

 Quelles sont les bonnes pratiques pour améliorer l'ergonomie mobile ?

Concevoir une application mobile ergonomique n'est pas une tâche aisée. Ci-après, douze

règles [Daubias, 2019c] pour concevoir une application mobile ergonomiquement réus-

sie.

1. Adapter l'achage à l'écran

2. Faciliter le clic tactile en agrandissant les zones cliquables et en utilisant des éléments

visuellement saillants et aordants

3. Limiter la quantité d'information en utilisant un texte concis et des informations

structurées

4. Limiter l'utilisation du clavier en proposant une saisie automatique des valeurs

5. Utiliser des composants mobiles adaptés

6. Permettre la gestion des erreurs (vérication avant action, annulation possible, de-

mande de conrmation, contrôle de données)

7. Exploiter les spécicités techniques du mobile :

- Le canal sonore et celui haptique (vibrations de l'appareil),

78
 - Le tactile,

- Les diérents capteurs tels que : appareil photo, microphone, GPS, accéléromètre,

gyroscope, etc.

8. Assurer la continuité entre les dispositifs (mobile et site web) :

- Des contenus,

- Du design,

- Des composants.

9. Accélérer la navigation en indiquant où l'utilisateur se trouve dans l'application

10. Penser à l'accessibilité

11. Prévoir un mode dégradé (sans son, sombre et hors connexion)

12. Informer sur les autorisations

Exercice 2 : Critères et principes ergonomiques

1 → G, 2 → K, 3 → R, 4 → M, 5 →T, 6 → Q,7 → A, 8 → P, 9 → N, 10 → U, 11 → B,

12 → O, 13 → D, 14 → I, 15 → L, 16 → S, 17 → F, 18 → C , 19 → H, 20 → E, 21 → J.

Exercice 3 : Évaluation ergonomique des IHM

Comparer les quatre IHM du point de vue ergonomique (selon les huit critères de Bastien

et Scapin).

Interface (a)
+ Simple, compatible avec la tâche dédiée

- Absence de l'unité de mesure ainsi que le format de la température n'est pas intuitif

- Prévention non assistée des erreurs (des champs saisis)

- Absence de retour en arrière

Interface (b)
+ Simple, compatible avec la tâche dédiée

- Une saisie erronée de l'intervalle de température

- Absence de retour en arrière

79
Interface (c)
+ Assistance de l'utilisateur dans la gestion des erreurs (la liste déroulante permet d'éviter

les erreurs de saisie)

- Utilisation de la même liste déroulante (contenant la même valeur de température) pour

toutes les cellules

- Absence de retour en arrière

Interface (d)
+ Utilisation de diérente valeurs de température pour chaque pièce (la cave et la chambre

n'ont pas la même plage de valeurs)

+ Interface facile à utiliser et plus intuitive

- Dans le cas d'un nombre important de cellules, l'IHM sera encombrée

- Absence de retour en arrière

Exercice 4 : Évaluation ergonomique des IHM

(1) les raccourcis claviers consistent à appuyer simultanément sur deux touches du clavier.

Par exemple : Ctrl + C pour copier.

Les touches d'accès permettent d'accéder à une fonction, nous utilisons (F2+ Suppr)

pour accéder à la BIOS.

(2) Le bizarre c'est l'existence des fonctions Banner, Transition, Wide Palette GIF, LED

Sign dans le menu Edition. Par conséquent, nous avons un problème de compatibilité

entre les diérentes fonctionnalités.

(3) Quand nous utilisons une interface sous Windows, nous devrons penser à utiliser les

raccourcis standards de Windows.

Exercice 5 : Évaluation ergonomique des IHM

1. Guidage (retour immédiat) : indiquer par menu où se trouve l'utilisateur
2. Charge de travail -brévité-concision
3. Gestion des erreurs((protection contre les erreurs ) en précisant du code

postale), en ce qui concerne le bouton VALIDER, il faut corriger la lettre N

4. Cohérence : tous le contenu de la fenêtre est écrit en français sauf la date, c'est

une contradiction

80
 Homogénéité : les boutons ne sont pas alignés correctement
Signication des codes et dénomination : l'icône associé au bouton  insérer

une photo  n'est pas signicative

5. Guidage -groupement : il faut regrouper les boutons radio dans le formulaire 

information générale sur le contact

6. Charge de travaildensité informationnel : l'étiquète  ajout d'un contact 

n'est pas concise, par ailleurs la taille des mots est grande

7. Guidage : les majuscules  CONTACT  et le bouton  VALIDER  sont moins

lisibles que les minuscules, c'est un problème de lisibilité)

81
Série de TP 3

But : utiliser le Java pour gérer les évènements appliqués sur des composants graphiques.

Exercice 1

Réaliser les interfaces suivantes :

Exercice 2

Réaliser l'interface qui permet d'acher une fenêtre sur laquelle nous voulons acher le

nombre de clics eectués sur la fenêtre.

82
Exercice 3

Implémenter l'interface suivante :

83
Chapitre 4
Conception des Interfaces Homme-Machine

4.1 Introduction
La conception des systèmes interactifs utilisables est un domaine d'étude axé sur l'utilisa-

teur. Elle sera une cause déterminante du succès ou d'échec du système interactif et par

conséquent de son utilisabilité.

C'est pourquoi une meilleure pensée à la conception et l'utilisation de l'IHM peut aider

à aboutir un système ergonomique avec un minimum de coûts de développement tout

en considérant l'utilisateur dans les phases de conception et évaluation en interaction

itérative. En partant de cette considération, et pour faciliter la démarche de conception

itérative des interfaces homme-machine, il est nécessaire d'utiliser des méthodes rigou-

reuses pour analyser et modéliser l'utilisateur et ses tâches.

L'objectif de ce chapitre est d'apprendre tous les aspects de la conception et du déve-

loppement des systèmes interactifs utilisables (tels que les applications web, les jeux, les

appareils embarqués, etc.), qui sont désormais une partie importante de notre vie.

4.2 Cycle de développement d'un logiciel

Le développement des interfaces homme-machine constitue avant tout un système interac-

tif informatique. C'est pourquoi il s'agit dans la présente section de recenser les diérents

étapes de développement issues du génie logiciel.

84
Par dénition, un cycle de vie logiciel est un ensemble structuré d'activités pour dévelop-

per un logiciel, comprenant :

. Analyse des besoins : il s'agit de recueillir et exprimer les besoins du client.

Le résultat de la phase d'analyse est consigné dans un document appelé "cahier des

charges" du logiciel.

. Spécication : elle est appelée également conception générale, se focalise à dénir

l'architecture générale (structure statique et dynamique) du logiciel à réaliser et décrire

ses fonctionnalités.

Dans la littérature, un ensemble de techniques de spécication issues du génie logiciel

ont été recensé, notamment :

- Les techniques basées sur les langages formels,

- Les techniques basées sur les langages particuliers,

- Les techniques basées sur les approches orientées objets et

- Les techniques basées sur des spécications graphiques et interactives.

L'ensemble de ces techniques sera détaillé dans la suite du chapitre.

. Conception détaillée : cette phase permet de dénir le détail des fonctionnalités en

créant des modules (composants), ou des sous-ensembles du logiciel qui regrouperont

des fonctionnalités apparentées ou liées.

. Réalisation (et tests unitaires) : il s'agit de la phase de développement. Les déve-

loppeurs vont traduire en code les fonctionnalités décrites dans les étapes précédentes.

Idéalement, le développement est piloté par les tests et par conséquent, les tests sont

écrits par les développeurs durant la phase de réalisation. Ces tests unitaires permettent

de vérier unitairement que chaque unité de code lorsqu'elle est exécutée, se comporte

de façon conforme par rapport aux spécications.

. Intégration (et tests d'intégration) : l'ensemble des modules développés séparément

sont regroupés an de vérier qu'ils communiquent correctement et qu'ils fonctionnent

ensemble. Ces vérications sont eectuées à l'aide des tests d'intégration. Ils peuvent

être réalisés conjointement avec l'équipe de projet et le client.

. Mise en production et maintenance : le client vérie la conformité du système

développé aux spécications établies dans le cahier des charges. La mise en exploitation

du logiciel par les utilisateurs peut conduire à la maintenance corrective (i.e corrections

des erreurs) et évolutive (i.e mises à jour et production de nouvelles versions).

85
Techniques de spécication des IHM issues du génie logiciel

Pour spécier les interfaces homme-machine d'un système complexe (se caractérisant par

de nombreuses interactions), plusieurs méthodes peuvent être utilisées et/ou combinées.

Nous présentons ici quatre approches qui nous semblent essentielles dans le domaine de

l'interaction homme-machine, qui sont :

• Les techniques basées sur les langages formels : elles sont utilisées soit à des ns de

spécication formelle de l'interaction homme-machine (c'est-à-dire l'ensemble des ac-

tions autorisées pour l'utilisateur), soit pour raisonner sur des systèmes interactifs ou

expliquer leur fonctionnement. Les principales méthodes sont :

- Le langage d'état pour la spécication des IHM (en anglais ISL) : est un langage

de spécication et de description de la dynamique des interfaces homme-machine. Il

est fondé sur la représentation graphique et textuelle des interfaces homme-machine.

En ISL, une interface homme-machine peut être perçue comme un automate d'états

nis. Ce dernier est représenté par un diagramme de transition d'états. C'est un graphe

orienté dont les n÷uds sont des états et les arcs correspondent aux transitions. Un état

est un ensemble de valeurs qui caractérise le système interactif à un moment donné

dans le temps. Une transition d'état est une relation entre deux états indiquant un

changement d'état possible, et qui peut être annotée pour indiquer les conditions et les

sources de déclenchement (événements) et les opérations qui en résultent (sorties).

Figure 4.1  Diagramme de transition de "cliquer-glisser"

La gure 4.1 démontre le diagramme de transition d'états décrivant l'action "cliquer et

glisser" [Henry et al., 1990] à partir d'événements souris de type press, release et move.

Les transitions sont annotées par les événements qui les déclenchent (en gras) et les

sorties produites (en italique). Cet automate ltre tous les événements move ayant lieu

86
avant le press ou après le release. La dynamique interne de l'interface est dénie par

ces changements d'états.

Grâce au langage de spécication ISL, nous pouvons : spécier rigoureusement l'inter-

face, en garantissant l'absence de défauts d'aspects, dénir des abstractions utiles lors

de projets réalisés en équipe, accroître la dynamique et les qualités ergonomiques d'une

interface à moindre coût et spécier l'automate d'états nis que les interfaces complexes

réalisent.

- Les grammaires indépendantes du contexte : sont utilisés pour exprimer la syntaxe de

l'interaction homme-machine. Par conséquent, la spécication de des interfaces peut se

baser sur le formalisme de Backus Naur (BNF). Nous citons à titre d'exemple Syngraph

(SYNtax direct GRAPHics) [Olsen and Dempsey, 1983] Il génère un programme sur la

base d'une description écrite à l'aide d'une grammaire étendue du formalisme BNF ou

encore DCG (Denite Clause Grammar) [Dang, 1988]. Ce programme dénit une règle

au moyen de trois composants : (i) la spécication lexicale dénit les types d'entrée

utilisés dans l'interaction (les boutons, les touches, les menus, etc.), (ii) la spécication

grammaticale décrit la séquence des entrées pour formuler le commandes de l'applica-

tion et (iii) l'abstraction de données fait référence à la sémantique des actions.

L'aspect textuel de la notation, la diculté à gérer les erreurs et les événements impré-

vus représentent un handicap majeur dans l'application de ce type d'un formalisme à

grammaire hors contexte dans les interfaces graphiques à haute interactivité.

- Les langages à évènements : Dans ce type de langage, une application interactive est

structurée en plusieurs modules. L'information est dirigée d'un module à l'autre par

des événements. Des événements peuvent être des actions de l'utilisateur ou générés

soit par le périphérique ou par l'application. La gestion d'un événement déclenche une

action qui peut provoquer l'exécution de fonctionnalités d'un objet de l'interface ou

dans l'application, générer de nouveaux événements, créer ou détruire des gestionnaires

d'événements [Green, 1985].

Un bon nombre de systèmes ont utilisé le modèle à événements. Nous évoquons comme

exemples : ALGAE [Flecchia and Bergeron, 1986] et Squeak [Cardelli and Pike, 1985].

Les gestionnaires d'événements, dans ces systèmes, sont développés via un langage spé-

cialisé classique. Cependant, Sassafras [Hill, 1986] et Tube [Hill and Herrmann, 1989]

emploient le formalisme des règles de production. De tels formalismes présentent l'avan-

87
 Figure 4.2  Gestionnaire d'événements de message d'aide de l'utilisateur

tage de pouvoir gérer des processus multiples, ce qui n'est pas le cas pour les spécication

basée grammaires et basée automates. Les limites résident, toutefois, dans la complexité

de contrôle des ux d'entrées/sorties ainsi que dans la diculté de compréhension et

de mise à jour du code quand la taille de l'application devient conséquente.

• Les techniques basées sur les langages particuliers : nous y distinguons : (i) les réseaux

de menus, tel que HYPERCARD [Sholl et al., 1989], où chaque page d'écran représente

un état qui relie d'autres états (pages d'écran). L'utilisateur active de diérents menus,

l'appel d'un menu pouvant entraîner l'apparition d'un autre, (ii) les langages déclaratifs

permettant de spécier des interfaces du type formulaire. L'utilisateur fait de la saisie

de texte dans des champs, ou sélectionne des options avec des menus ou des boutons,

tels les systèmes COUSIN [Hayes and Szekely, 1983].

(a) Système HYPERCARD (b) Organisation de l'écran COUSIN

• Les techniques basées sur les approches orientées objets : se sont révélées ecaces

pour le développement des systèmes interactifs. Plusieurs formalismes ont été proposés,

nous pouvons néanmoins citer les formalismes TOOD [Mahfoudhi et al., 1995] qui

introduisent une description orientée-objet des tâches de l'utilisateur, ainsi que les ICOs

88
 (Interactive Cooperative Objects) [Palanque and Paternò, 1998] utilisant les réseaux de

Petri orientés objet. Ces deux derniers ont été utilisés avec succès pour la spécication

des systèmes interactifs.

• Les techniques basées sur des spécications graphiques et interactives : l'idée est de

disposer sur l'écran, à l'aide de la souris, les diérents composants graphiques de l'in-

terface. C'est des techniques faciles d'usage et permettent à des non spécialistes de

créer eux-mêmes les interfaces homme-machine. Il est possible aussi de générer le code

associé à l'interface à développer en employant des outils informatiques performants.

De plus, elles permettent d'accorder plus de temps à une conception ergonomique des

interfaces, dans la mesure où les tâches de programmation sont réduites.

Dans la section suivante, nous allons décrire brièvement trois diérents modèles de déve-

loppement qui ont été largement détaillés dans de nombreux ouvrages de génie logiciel

[Pressman, 2005].

Modèles de développement issus du génie logiciel

L'un des dés actuels à relever, c'est de réduire les coûts des développements lo-
giciels et cela par la pratique du génie logiciel. Celle-ci ore plusieurs modèles de déve-

loppement de logiciels. Trois principaux modèles peuvent actuellement être utilisés pour

le développement de logiciels qui sont le modèle cascade, le modèle en "V" et le modèle

spirale.

Cependant, le choix du modèle de développement est établi par l'équipe de projet et qui

dépend de la nature du projet à réaliser et sa complexité.

• Modèle cascade [Boehm, 1981]

C'est l'un des premiers modèles émergents pour répondre aux besoins industriels en

matière de productivité et de qualité logicielle.

Selon la gure 4.3, le cycle de vie du logiciel est en fait une succession de huit étapes

qui peuvent être grossièrement résumées en : (1) faisant suite à une analyse des besoins,

l'étude de faisabilité débouche sur un cahier des charges, (2) la spécication fonctionnelle

du logiciel dénit ce qui doit être réalisé, (3) la conception du logiciel (ou conception

préliminaire) détaille la décomposition des fonctions an de satisfaire la spécication,

(4) la conception détaillée précise les fonctions précédemment décrites, (5) le codage

89
 consiste à développer à l'aide d'un langage de programmation les fonctions dénies, (6)

l'intégration de chaque fonction dans le logiciel est ensuite eectuée, puis (7) le logiciel

est mis en ÷uvre, (8) il est alors possible d'exploiter le logiciel et de le maintenir.

Figure 4.3  Modèle cascade de développement logiciel

• Modèle en V
Le modèle en V est inspiré des travaux de [Goldberg and Robson, 1983].

Selon la gure 4.4, le cycle prend la forme d'un V. Il est décomposé en six phases appe-

lées : (1) orientation et faisabilité des besoins, (2) conception du système et validation

des besoins, (3) développement logiciel du système, (4) intégration du matériel et du

logiciel, production du système, (5) recette et validation du système et (6) maintenance

du système.

• Modèle spirale [Boehm et al., 1984]

Selon la gure 4.5, le modèle spirale est axé sur l'analyse des risques alors que les deux

premiers modèles sont guidés par la rédaction de documents dont la validation constitue

le critère déterminant pour passer d'une étape à une autre.

Le développement du logiciel suit un processus itératif selon quatre phases (une par

cadran) illustrées par le parcours depuis l'intérieur, jusqu'à l'extérieur de la spirale : (1)

déterminer les objectifs, les alternatives et les contraintes, (2) évaluer les alternatives

90
 Figure 4.4  Modèle en V de développement logiciel

relatives aux objectifs et aux contraintes, via des prototypes, simulations, essais ou

toute autre méthode permettant d'évaluer le risque engendré par chaque alternative,

(3) suite à l'étape précédente, deux cas de gure se présentent : poursuivre la spirale en

élaborant la phase suivante s'il y on a encore des risques sinon couvrir l'ensemble des

étapes traditionnelles pour le développement de logiciel sur le prototype opérationnel

abouti, (4) xer les moyens à mettre en ÷uvre pour poursuivre la spirale.

Les trois modèles de développement issus du génie logiciel, en l'occurrence le modèle cas-

cade, le modèle en V et le modèle spirale, orent un cadre général très utile pour les

concepteurs.

Cependant, les fonctionnalités du logiciel sont mises en avant au détriment de l'utilisateur

(i.e modèles centrés système). De plus, la réalisation des interfaces homme-machine

est reportée à la n du processus de développement.

Ainsi, une implication limitée de l'utilisateur. Ce dernier se contentait d'intervenir

lors de la livraison du produit et/ou lors de l'analyse des besoins.

Par ailleurs, l'analyse et la modélisation des utilisateurs potentiels et des tâches

ne sont pas considérées dans les modèles cités précédemment.

91
 Figure 4.5  Modèle spirale de développement logiciel

Par conséquent, ces modèles sont plus adaptés au développement de systèmes d'informa-

tion qu'à celui des systèmes interactifs qui nous préoccupent.

C'est pourquoi il est nécessaire de dénir un cadre méthodologique améliorée dans lequel

les aspects (particulièrement les utilisateurs et les tâches) liés aux interfaces homme-

machine sont plus explicitement considérés et pas seulement sous entendus comme dans

les modèles classiques issus de la génie logiciel. Ce cadre est inspiré du génie logiciel et de

l'ergonomie des IHM.

4.3 Conception spécique aux systèmes interactifs

Toute méthode (ou modèle) de développement des systèmes interactifs partagent le même

principe. En fait, elles sont fondées sur une démarche :

- Centrée sur l'utilisateur , tout en impliquant l'utilisateur (besoins des utilisateurs,

les tâches à réaliser et le contexte de l'interaction) tout au long des étapes du cycle de vie

du système à interfacer.

92
- Itérative : le développement est basé sur une succession de cycles. Ainsi, une itération
fait référence au cycle de développement du système à réaliser. Ce cycle est généralement

composé de quatre phases à savoir l'analyse, la spécication, le développement et l'évalua-

tion. L'objectif est d'aner le système (en fonction de l'utilisabilté) et d'avoir des retours

en arrière et adaptation cycliques.

- Incrémental : il s'agit de découper le système en incréments. Dans une seule itération,

un incrément est conçu, implémenté, testé et intégré (avec d'autres incréments).

- Prototypée et avec évaluation régulière des IHM : l'interface nale passe par

une série de prototypes. Ces derniers permettant d'évaluer les choix de conception. La

version nale du prototype est considérée comme satisfaisante vis-à-vis des besoins des

utilisateurs pour les diérentes tâches à réaliser.

La gure 4.6 illustre le cycle de vie d'un système interactif en mettant l'accent sur la prise

en compte des utilisateurs.

Figure 4.6  Conception centrée sur l'utilisateur

Théoriquement, le recours à de telles méthodes permet de :

 Réduire les risques : les défauts de conception et les erreurs ergonomiques. Tout en

faisant participer l'utilisateur à la conception et l'évaluation de l'IHM lors du processus

de conception.

 Abaisser les coûts de développement (due à la mauvaise compréhension du cahier des

charges).

 Abaisser les coûts de maintenance (générés par un manque d'implication des utilisateurs

93
 naux dans la phase de conception).

 Réduire le budget de projet. Bien entendu, la démarche de conception a également un

coût, elle est évaluée à environ 6% du budget global du projet (faible coût).

 Accroître la qualité des produits (gain de productivité et forte attractivité).

 Réutiliser et améliorer des composants de base à travers plusieurs cycles d'amélioration.

Parmi les méthodes de conception spéciques aux IHM, nous évoquons la démarche er-

gonomique que nous allons la détailler dans la suite du chapitre.

4.3.1 Démarche ergonomique

La démarche ergonomique place l'utilisateur au c÷ur du processus de développement

de l'IHM. Elle permet de mettre en place un cycle d'amélioration en s'appuyant sur un

ensemble de composants (diérents modules) de base dont l'utilisabilité est anée au l

des versions du produit interactif.

Figure 4.7  Démarche ergonomique

Certes, une collaboration pluridisciplinaire est particulièrement nécessaire entre les dié-

rents intervenants (informaticien(s), utilisateur(s), ergonome et expert(s) du système) du

processus de développement du système interactif.

Dans une démarche ergonomique, les principales étapes de développement d'une IHM sont

les suivantes :

94
(1) Phase d'analyse de besoins : consiste à préciser les attentes et les besoins des

utilisateurs, ainsi que connaître leurs tâches et le contexte d'intéraction.

A l'issue de l'anlyse des besoins, l'équipe de développement sera en mesure de :

• Collecter des données sur les utilisateurs, sur les tâches ou sur les interfaces (no-

tamment en évaluation).

• Analyser et modéliser l'utilisateur à partir des données recueillies. Pour ce qui de

l'analyse, il s'agit de recenser les besoins (informationnels, en outils d'assistance)

des utilisateurs, les exigences physiques et cognitives, ainsi que des limites et

des ressources théoriques d'un utilisateur réalisant une tâche donnée dans un

environnement socio-technique. Ce travail est réservé aux ergonomes qui doivent

d'abord classier (par rôle) les diérents intervenants concernés directement ou

non par le système. Chacun de ces intervenants pourra ensuite être caractérisé

par son niveau de formation, ses connaissances et son expérience.

Une fois l'analyse de l'utilisateur eectuée, la modélisation de ses caractéristiques,

sa manière de travailler, de raisonner, d'agir peut être entamée. Prenons l'exemple

du modèle cognitif du processeur humain qui s'intéresse surtout aux aspects

temporels d'interaction homme-machine, dans le but de comprendre et de prévoir

les performances du système homme-machine. Ou encore, la théorie de l'action

de Norman, qui est considérée l'une des approches couramment utilisée pour la
modélisation des activités humaines.
• Analyser et modéliser les tâches. En prenant en compte les diérents modèles

des utilisateurs, analyser les tâches à réaliser consiste à recenser des données sub-

jectives et objectives relatives aux diérentes tâches, à leur déroulement, à leurs

contraintes, aux besoins des utilisateurs pour les réaliser, etc. Ainsi, an d'éta-

blir les activités que les utilisateurs auront à eectuer, une analyse des tâches

est nécessaire. Cette analyse pourra faire l'objet d'une modélisation : modèle
des tâches prescrites et modèle des tâches à réaliser (tels que le modèle

de GOMS et Keystroke, qui seront détaillés dans la suite du chapitre). Le fait

de construire ces modèles des tâches et le modèle des activités possède l'avan-

tage de de mettre le doigt sur des dysfonctionnements, des oublis, des sources

d'erreur, et donc d'en déduire un ensemble de spécications visant en particulier

l'aménagement des interfaces homme-machine et des outils d'assistance.

95
 Par conséquent, quatre types de connaissances s'avèrent particulièrement complé-

mentaires dans la phase d'analyse :

- Connaissances concernant les utilisateurs du système à interfacer

- Connaissances relatives aux activités à accomplir

- Connaissances sur les diérentes situations de fonctionnement, normales ou anor-

males du système

- Connaissances sur les ressources matérielles et logicielles exploitées

(2) Phase de spécication d'IHM : suite à la phase d'analyse des besoins, un en-

semble de spécications techniques peut être établi.

- Spécications conceptuelles : dénissent un modèle conceptuel qui sera aussi fa-

cile que possible à appréhender par les utilisateurs. Il est construit par les concep-

teurs du système à développer et qui correspond à la représentation interne ou

externe de la structure et du fonctionnement du système interactif. Selon la gure

4.8, (https://www.lri.fr/~mbl/ENS/IHM/ecole-in2p3/Cours/cours1.html) , il

contient l'ensemble des informations (objets, opérations) qui décrivent et expliquent

la structure, l'organisation et le fonctionnement du système.

Figure 4.8  Modèle conceptuel générique

- Spécications sémantiques : dénissent toutes les fonctionnalités que le système

interactif doivent orir.

- Spécications syntaxiques : concernent le dialogue utilisateur-système en précisant

les séquencements des actions de l'utilisateur et le style d'interaction (menu, formu-

laire, langage de commandes, etc.).

- Spécications lexiques : il s'agit de la représentation graphique et de la présenta-

tion externe des objets.

96
A partir de la modélisation des tâches humaines et des diérents utilisateurs, il est

possible d'explorer d'abord les besoins ergonomiques et les spécications

techniques (citées précédemment), puis de dénir le nombre d'interfaces à
utiliser, l'architecture du système à interfacer, l'enchaînement des inter-
faces, le rôle, le contenu informationnel de chaque interface, les modes de
présentation des informations, les modes d'activation des diérents outils
d'aide et les modalités de dialogue homme-machine, etc.
L'expression des spécications peut être facilitée et accélérée par l'utilisation de

nombreuses techniques de conception d'IHM. Nous citons particulièrement per-

sonas/scénario. Cette dernière fournit des archétypes d'utilisateur (personas) qui

guident la conception de l'IHM et partagent une certaine vision des utilisateurs du

système grâce à des scénarios bien établis. Quand aux pesonas : sont des personnes

ctives qui représentent un groupe cible et pour lesquels le système interactif sera

conçu. Ces personas possèdent des données générales (telles que le prénom, le titre,

la photo, l'âge, l'éducation, etc.), des objectifs, des contraintes précises, et un envi-

ronnement de travail. Alors qu'un scénario : est une sorte d'histoire et immagination

avec les personas, l'environnement (site par exemple), le but que le persona doit ac-

complir et les obstacles partagés par des personas.

Figure 4.9  Exemple de persona

Ainsi, l'expression des spécications des IHM peut être améliorée par l'utilisation

des recommandations ergonomiques, des guides de style d'interface et des normes

ou des standards internes en vigueur dans le domaine d'application.

Par conséquent, la spécication des interfaces conduit à la réalisation et l'intégration

97
 du système interactif complet ou d'un prototype de celui-ci et/ou en simulation.

(3) Phase de développement : pendant le développement, il s'agit de pouvoir pro-

duire des prototypes via l'usage des outils d'aide au prototypage. Parmi ceux ci,

nous évoquons : les transparents, les vidéos, les logiciels de maquetage (tels que

raw.io, Mocking Bird, Pencil, Basalmiq, Adobe XD, PenPot, Akira, Sketch) et les

logiciels de développement (frameworks web, Netbeans, Visual Studio). Le proto-

typage a pour objectif de minimiser les coûts de développement des interfaces tout

en visant l'optimisation progressive de leur qualité selon des critères ergonomiques

généraux, ainsi que des critères spéciques au système à réaliser.

Donc, obtenir une IHM nale passe par plusieurs étapes de prototypage :

- Croquis (sketch) représente l'aperçu global de l'interface

- Maquette (mockup, wireframe) correspond à une interface détaillée sans interaction

(statique), qui peut être : une version papier, en carton ou logicielle de l'interface.

- Prototype est la version incomplète d'une interface avec interactions (i.e IHM

dynamique).

Figure 4.10  Croquis, maquette et prototype d'une page web

(4) Phase d'évaluation : l'évaluation de l'utilisabilité d'une IHM est établie en vali-

dant le système nal (conçu et réalisé) d'une manière itérative et par des études
expérimentales et ergonomique avec les utilisateurs. Elle repose générale-

ment sur l'exécution de diérents scénarios, ce qui oriente le choix de fonctionnali-

tés, des modalités d'interaction, les interfaces à réaliser et implique par conséquent

des idées et pistes d'amélioration pour concevoir les interfaces du système.

La réussite (ou l'échec) de l'exécution d'un scénario est évaluée de manière qua-

98
 litative et quantitative selon plusieurs critères : taux de succès, nombre d'erreurs,

temps d'exécution des tâches, nombre d'étapes nécessaires à la réussite du scénario,

rythme d'apprentissage, satisfaction des utilisateurs, etc.

Souvent, deux à trois itérations d'évaluation peuvent sure pour une réaliser une

interface simple.

Certes, de diverses techniques peuvent être impliquées dans le processus de conception

des IHM, nous citons principalement :

- Remue-méninges (brainstorming) : son objectif est de générer un grand nombre d'idées

créatives. L'idée est de : 1) Réunir un petit groupe avec diérents rôles et expertises

(séance d'une heure), 2) Générer une grande quantité de solutions relatives à un problème

spécique de conception, 3) Classer les idées en fonction de leur qualité.

- Focus group : permet de recueillir l'opinion et motivations des utilisateurs sur un produit

informatique. Pour ce faire, il faut : 1) Choisir un groupe représentatif des participants

(7-10), 2) Introduire les objectifs de la séance de discussion (relatifs au produit), 3) Abor-

der de diérents (5-6) thèmes lors de la séance de discussion, 4) Synthétiser les résultats.

- Magicien d'Oz : son but est d'obtenir des informations sur un système inexistant ou

partiellement développé en simulant les fonctionnalités absentes.

- Tri par cartes : est une méthode conçue pour construire l'architecture de l'information.

À l'identique des autres méthodes présentées précédemment, les utilisateurs (en indivi-

duel ou en groupe de 6-8 utilisateurs) qui participent aux séances de tri par carte doivent

constituer un panel représentatif du c÷ur de cible selon des critères (âge, expérience du

domaine, etc.) propres au système à interfacer. Ensuite, eectuer plusieurs sessions de tri

des cartes (de trois à dix selon la convergence des résultats). Finalement, préparer des

cartes avec une information ou une fonctionnalité (décrite par un ou deux mots-clés).

- Scénarimage (storyboard) : est établi grâce à la création d'une description réaliste de

l'utilisation du système. La méthode contient deux étapes, qui sont : 1) Identier des

tâches existantes (typiques et inhabituelles), 2) Créer des scénarios de travail en généra-

lisant les histoires.

- Conception en parallèle : consiste à créer plusieurs IHM (par les diérents utilisateurs

et/ou concepteurs) et sélectionner l'interface la plus ergonomique.

- Audit ergonomique : se base sur l'évaluation de toutes les interfaces d'un système inter-

actif de la part des experts en ergonomie ou des non-spécialistes. L'inspection cognitive

99
est l'une des techniques de l'audit. Elle est constituée de trois étapes : 1) Spécier des

scénarios relatifs au système, 2) Mesurer la facilité d'utilisation et d'apprentissage par

l'exploration et l'inspection systématique du système interactif (écrans et actions), 3) In-

terpréter et prendre en compte les résultats de l'évaluation.

- Observations : visent à identier les diérents problèmes (erreurs) d'un système interac-

tif. Le principe est de : 1) Choisir au moins deux utilisateurs qui agiront indépendamment,

2) Dénir la mission de l'utilisateur (en laboratoire, ou sur terrain), 3) Demander à l'uti-

lisateur de réaliser la mission, 4) Observer et enregistrer les interactions de l'utilisateur

puis les analyser.

- Test A/B : vise à évaluer les performances de deux alternatives de conception pour un

composant.

- Enquêtes ou entretiens : s'intéressent à identier des pistes de conception pour les pro-

chaines itérations ou des problèmes rencontrés par les utilisateurs du système. L'enquête

est conduite sous forme d'interview (entretient en  face à face ), généralement enregis-

tré (sonore/vidéo) d'une durée d'environ de 45 minutes à une heure. Nous les procédons

comme suit : 1) Choisir un panel représentatif des utilisateurs, 2) Poser des questions (face

à face, directives ou non directives) à l'utilisateur dans son environnement de travail.

- Questionnaires : consiste à résumer l'avis de nombreux utilisateurs. Il s'agit de : 1) Choi-

sir un panel représentatif des utilisateurs, 2) Choisir des méthodes d'analyse automatique

ou manuelle des résultats, 3) Choisir le type de questions adaptées (questions ouvertes,

QCM, échelle, etc), 4) Respecter certaines règles de rédaction des questions (forme ar-

mative, concision, etc.), 5) Choisir les moyens de diusion et de récupération.

- Analyse de traces : est utilisée pour étudier le comportement réel des utilisateurs sur une

tâche bien dénie. Pour cela, la méthode commence par la récolte de traces (sous forme

de papiers ou des enregistrements), ensuite analyser automatiquement les traces récoltées.

La gure 4.11 résume l'ensemble des méthodes utilisées pour les trois phases de conception

d'une IHM. En eet, choisir une technique adaptée revient à dénir le contexte d'interac-

tion, les utilisateurs et la phase active (analyse, développement ou évaluation).

Comme nous l'avons évoqué précédemment, le processus de développement d'un système

interactif met en évidence de diérents types de modèles en fonction de l'étape à réaliser :

- Modèle de tâches : réalisé lors de la phase "analyse des besoins". Il est destiné au

concepteur, auquel il fournit un schéma général de l'activité de l'utilisateur du système.

100
 Figure 4.11  Méthodes utilisées pour le développement d'un système interactif

- Modèle d'architecture : est élaboré dans la phase de spécication. Il fournit aux

développeurs une structure générique de l'application à partir de laquelle il est possible

de construire un système interactif particulier.

Pour cela, nous proposons dans la suite du chapitre un bref état de l'art des modèles de

tâches et d'architecture d'interface homme-machine.

4.3.2 Modèles de tâches

La modélisation des tâches humaines est particulièrement importante dans la mesure où

elle facilite la communication entre les intervenants de l'équipe de développement.

Le concept de tâche peut être déni comme  une activité dont l'accomplissement par un

utilisateur produit un changement d'état signicatif d'un domaine d'activité donné dans

un contexte donné  [Palanque and Bastide, 1993].

Les modèles d'analyse de tâches consistent en une décomposition hiérarchique des tâches.

Ils sont utilisés pour analyser, décrire et représenter une tâche particulière de l'utilisateur.

Ils identient également les types de connaissances que l'utilisateur a ou doit avoir pour

réaliser cette tâche. Par ailleurs, ils fournissent un cadre formel pour l'évaluation prédictive

des performances du système interactif puisqu'ils proposent une description mesurable du

comportement de l'utilisateur.

Dans la littérature, de diverses classications ont été élaborées. Nous distinguons : les

101
modèles linguistiques, les modèles hiérarchiques orientés tâches et les modèles cognitifs.

Les modèles linguistiques permettent de décrire les tâches d'interaction entre l'utilisateur

et l'interface au moyen de grammaires formelles qui constituent des modèles à base d'items.

Ces modèles visent en eet l'évaluation du langage de commandes et de sa cohérence.

Dans les modèles hiérarchiques de tâches, le principe est précisé sur la gure 4.12 :

- Décomposer la tâche globale (but) du système d'une manière hiérarchique en sous tâches,

elles même en sous tâches et ainsi de suite, etc.

- Spécier le séquencement des tâches décomposées et leurs contraintes.

- Mettre en évidence les tâches terminales (soulignées).

- Évaluer la décomposition avec les utilisateurs.

Figure 4.12  Modèle de tâches hiérarchique

Quand aux modèles cognitifs (notamment GOMS et Keystroke), une tâche se compose

de :

- Un but : représente ce qui doit être fait.

- Une procédure : est un ensemble de sous-tâches reliées par des relations de composition

ou des relations temporelles.

Alors qu'une tâche élémentaire est une tâche décomposable uniquement en actions phy-

siques ou opérations d'entrée/sortie.

Modèle de GOMS [Card et al., 1983]

Il propose une description des activités cognitives de l'usager sous forme de buts (Goal),

102
 Figure 4.13  Modèle cognitif de tâches pour l'activité "envoyer un sms"

d'opérateurs (Operator), de méthodes (Method) et de règles de sélection (Selection).

Exemple : Appliquer le modèle de GOMS pour le service retirer d'argent dans un sys-

tème de distribution automatique de billets.

Méthode pour le but : retirer d'argent

Pas 1 : identier l'écran,
Pas 2 : Décider si vous n'êtes pas dans le système,
Accomplir le but : entrer dans le système,

103
Pas 3 : Sélectionner le montant,
Pas 4 : Prendre de l'argent,
Pas 5 : Retourner avec le but accompli.

Modèle de Keystroke [Card et al., 1980]

C'est une version améliorée de GOMS, permet une évaluation au niveau des actions phy-

siques de l'utilisateur tout faisant prévoir le temps d'exécution d'une tâche bien dénie à

partir de quatre descriptions : (1) la description préalable de la tâche, (2) la description

du langage de commande du système, (3) la description des paramètres caractérisant es

capacités motrices de l'utilisateur et des temps de réponse du système, et (4) celle de la

méthode de réalisation de la tâche.

Tt = Tt1 + Tt2 + ... + Ttn (4.1)

Où : Tt correspond à la durée d'une tâche qui représente, selon l'équation 4.1), la somme de
la durée de réalisation des tâches élémentaires la constituant. Le temps de réalisation d'une

tâche élémentaire dépend du temps que met un utilisateur à acquérir une représentation

mentale de la tâche et à l'éxécuter, soit :

TT e = Tacquisition + Texecution (4.2)

Texecution = TK + TP + TH + TD + TM + TR (4.3)

Où :

Td0 execution peut être décomposé par le temps d'éxécution de six opérateurs :

TK (Keystroking) : le temps de frappe au clavier ou de manipulation de la souris.

TP (Pointing) : le temps pris pour le pointage de l'objet.

TH (Homming) : le temps de rapatriement de la main.

TD (Drawing) : le temps pris pour l'action de dessiner un tracé.

TM (Mental activity) : le temps de l'activité mentale de l'utilisateur.

TR (Response time) : temps de réponse du système.

4.3.3 Modèles d'architecure

Suite à de nombreuses lacunes relatives au manque de productivité liées au développe-

ment des premiers systèmes interactifs, des recherches ont conduit à la proposition des

104
architectures logicielles.

Par dénition, une architecture logicielle décrit la manière dont les diérents composants

(i.e services, modules, processus, objets, applications, etc.) d'un système interactif seront

agencés et comment se comporter (interagir) avec d'autres composants. Cette architecture

est généralement réalisée par un concepteur.

En ce sens, tous les modèles logiciels applicables aux systèmes interactifs répondent à

deux principes :

1) Exigence de modiabilité ou d'adaptatbilité.

2) Séparation noyau fonctionnel - interface : en dénissant un système interactif comme

l'assemblage de deux composants logiciels indépendants, prenant en charge séparément

les aspects liés à l'application et à l'interface homme-machine.

En eet, cette séparation permet particulièrement de tester les interfaces d'une maquette

d'application sans avoir à développer complètement les fonctionnalités de celle-ci, de

prendre en compte les remarques des utilisateurs, puis de tester de la même manière

les interfaces lors du passage au prototype.

Figure 4.14  Un système interactif

Selon la gure 4.14, l'interaction entre le système interactif et l'utilisateur s'eectue grâce

à une interface homme-machine qui prend en charge :

- La communication de l'utilisateur humain vers le noyau fonctionnel de l'application (en-

trée d'information).

- La communication du noyau fonctionnel vers l'utilisateur humain (sortie d'information).

- La traduction entre les variables informatiques du monde de l'application et celles psy-

chologiques et/ou réelles de l'utilisateur.

Actuellement, les modèles SEEHEIM, ARCH, PAC et MVC sont considérés les modèles

les plus cités et étudiés.

Modèle de SEEHEIM

105
Ce modèle a été suggéré en 1985 par le groupe de travail SIGGRAPH [Pfa, 1985]. Il

découpe le système interactif en trois composants logiques ( gure4.15) qui sont structurés

en couches :

Figure 4.15  Modèle de SEEHEIM

• La présentation : représente la partie de l'application directement liée aux périphériques

d'entrées/sorties utilisateur. Elle gère la présentation (apparence), l'achage à l'écran

ainsi que les manipulations de l'utilisateur.

• Le contrôleur de dialogue : gère le dialogue entre l'utilisateur et le système. Nous citons

par exemple : contrôler la syntaxe des requêtes saisies par l'utilisateur, invoquer les

appels de services, gérer les erreurs et les exceptions, gérer les sessions de l'utilisateur

et les droits d'accès.

• L'interface de l'application : relie le contrôle de dialogue au noyau applicatif par l'invo-

cation des fonctionnalités oertes par l'application.

D'apés COUTAZ, ce modèle, bien qu'il possède des limites liées à sa généralité, il ore

plusieurs avantages notamment : (+) Il facilite la conception itérative des interfaces dans

la mesure où il est possible de traiter séparément l'application et l'interface, (+) Il ne

peut pas être lié à une technique particulière de réalisation, (+) Il sert comme point de

départ à la proposition d'outils de génération automatique d'interface.

Modèle ARCH [UIMS, 1992]

Le modèle ARCH est une extension du modèle de SeeHeim en s'inspirant d'avantage des

boîtes à outils graphiques. Il comprend quatre composants (gure 4.16) :

• Interaction : regroupe un ensemble des widgets d'une boite à outils ainsi que les com-

munications avec les diérents périphériques physiques.

106
 Figure 4.16  Modèle ARCH

• Présentation : représente (logiquement) les widgets d'une boite à outils.

• Contrôleur de dialogue : est responsable du séquencement des tâches et le maintien de

la cohérence entre les multiples vues de l'application.

• Adaptateur au domaine : implémente les tâches relatives au domaine qui sont nécessaires

à l'interaction de l'utilisateur.

Par rapport à la nature des informations transitant entre les composants, il introduit trois

types d'objets :

- Les objets du domaine contiennent des données provenant directement ou indirectement

du noyau fonctionnel.

- Les objets de présentation sont des objets d'interaction virtuels qui décrivent les évé-

nements produits par l'utilisateur et les données qui lui sont présentées indépendamment

des méthodes d'interaction et de visualisation.

- Les objets d'interaction sont des instances propres à une boîte à outils, et qui implé-

mentent des techniques d'interaction et de visualisation spéciques.

Ce modèle présente les avantages suivants : (+) Modiabilité, (+) Portabilité de l'inter-

face, (+) Extensibilité au niveau d'interaction. Cependant, il soure de la centralisation

107
du contrôle (à cause de la structuration des composants en couches).

Exemple : Soit l'application ImageLibrary (ImageItem), réaliser le modèle ARCH corres-

pondant.

Application ImageLibrary Modèle ARCH

Figure 4.17  Modèle ARCH d'une application

Modèle à agents PAC

Le modèle PAC a été proposé par [Coutaz, 1987], s'inspire de la programmation par objets,

et propose une décomposition modulaire de l'application et l'interface en une hiérarchie

d'agents communicants. Les niveaux sémantiques, syntaxiques et lexicaux d'une appli-

cation se retrouvent donc distribués dans des entités de base appelées objets interactifs.

Chaque entité se compose de trois composants (gure 4.18).

Modèle PAC Application interactive

Figure 4.18  Modèle PAC d'une application

• Présentation : dénit le comportement des entrées/sorties de l'agent.

• Abstraction : est la partie sémantique de l'agent (données et traitement).

• Contrôle : gère la cohérence entre l'abstraction et la présentation.

Grâce à la notion d'agent, le modèle PAC peut bénécier de certains avantages, parti-

culièrement : la grande modularité, la perception de l'application à diérents niveaux

108
d'abstraction, et la parallélisme éventuelle des entrées/sorties.

Exemple : Soit l'application démontrée dans la gure , réaliser le modèle PAC correspon-

dant.

Application interactive Modèle PAC

Figure 4.19  Exemple illustrant le modèle PAC d'une application

Modèle MVC

Le modèle MVC (Modèle, Vue, Contrôleur) a été introduit comme architecture logicielle

de référence dont l'environnement de développement des interfaces utilisateur est orientée

objet Smalltalk [Goldberg, 1984]. Il décompose les systèmes interactifs en une hiérarchie

d'agents. Un agent MVC consiste en un modèle muni d'une ou plusieurs vues, et d'un ou

plusieurs contrôleurs (gure 4.20).

Figure 4.20  Modèle MVC

• Modèle : est la représentation abstraite de l'agent (structure de données et fonctions).

• Vue : dénit la représentation externe graphique du modèle.

• Contrôleur : reçoit et interprète les évènements de l'utilisateur en les répercutant sur le

modèle ou la vue.

109
Son principe de fonctionnement est le suivant : 1) L'utilisateur interagit avec la vue via

les widgets, 2) Le modèle stocke les données et l'état de l'interface. Il notie aussi les

vues qui lui sont associées à chaque fois que son état se trouve modié par le noyau de

l'application ou par ses contrôleurs, 3) Le contrôleur gère les interactions avec les utili-

sateurs en écoutant les notications reçues, 4) La vue ache le feedback sur l'interface à

l'utilisateur.

Figure 4.21  Fonctionnement du Modèle MVC

Exemple : Une application Java qui respecte l'architecture MVC comporte :

- Le modèle est souvent représenté par une ou plusieurs classes qui gèrent les données de

l'application.

- Les vues soient codées en Java.

- Les contrôleurs pourront être : (1) des classes qui traitent chacune un événement par-

ticulier ou qui traitent plusieurs événements reliés, (2) un code inclut dans les vues, sous

forme de classes locales.

4.4 Conclusion

Ce chapitre présente le principe de développement des systèmes interactifs. L'accent est

mis sur la notion de conception centrée sur l'utilisateur dans le cycle de vie analyse-

spécication-développement-évaluation.

Au vu des diérents modèles, méthodes, connaissances, outils et architectures expliqués,

il est clair que le développement d'interface nécessite une approche pluridisciplinaire en

considérant une variété des aspects techniques ou humains, issus du génie logiciel et des

110
 Figure 4.22  Exemple du Modèle MVC

sciences cognitives.

Dans le cadre d'une conception des IHM, le succès d'un système interactif repose sur la

prise en compte de divers aspects notamment :

 Cycle de conception

 Conception centrée utilisateur

 Analyse des tâches et contexte d'utilisation du système

 Prototypage

 Programmation de qualité (optimisation et lisibilité du code).

En raison de l'importance accordée à l'évaluation des IHM, il a semblé utile d'aborder

dans le chapitre suivant les méthode d'évaluation des interfaces homme-machine dans les

systèmes interactifs.

111
Série de TD 4

Exercice 1 : Trie par carte

Avec la méthode de conception du trie par cartes, faites des regroupements des items sui-

vants et identiez les cartes avec des libellés appropriés : salade tiède de radicchio, radis et

fenouil salade tiède, ratatouille, tiramissu, soupe poireaux, tagliatelles aux champignons,

taboulé, charlotte au chocolat, ragoût de palourdes, ice cream, ravioli et prosciutto.

(1) La méthode du  trie par cartes  est-elle ecace ?

(2) Comment l'en procède ?

Exercice 2 : Conception d'une IHM

Vous eectuez un stage dans une grande entreprise pharmaceutique. Il vous est demandé

de concevoir l'interface d'un système d'injection automatique de produits anesthésiques.

L'interface à concevoir doit permettre à un médecin de saisir la fréquence des injections

réalisées par le système ainsi que la dose administrée par chaque injection. Une première

maquette logicielle d'interface, réalisée par le concepteur de la partie électronique, vous

est proposée (gure ci-dessous).

La liste déroulante permet de spécier le paramètre à régler (fréquence ou dose), le bouton

C permet d'eacer la valeur saisie, les boutons 0...9 permettent la saisie de la valeur de

chaque paramètre. Enn le bouton set permet de valider la saisie.

Sachant que l'interface nale ne contient que des boutons et des acheurs (pas d'utilisa-

tion de souris ni de clavier) :

1. Quelles peuvent être les conséquences d'une erreur de saisie avec cette interface ?

2. L'interface proposée vous paraît-elle adaptée à l'usage envisagé ? Pourquoi ?

3. Proposez une nouvelle maquette d'interface.

112
Exercice 3 : Modèle de GOMS

Soit le système de distribution automatique de billets suivant :

1. En se basant sur le modèle de GOMS, identiez les buts principaux du système.

2. Appliquez le modèle de GOMS sur les buts suivants : Entrer dans le système, Retirer

d'argent, Consulter solde, Prendre l'historique, Sortir du système.

113
Exercice 4 : Modèle de Keystroke

Nous considérons trois façons diérentes de détruire un chier dans une interface gra-

phique.

(A) La première solution consiste à glisser-déposer avec la souris l'icône du chier à dé-

truire dans la corbeille.

(B) La deuxième solution consiste à sélectionner l'icône du chier à détruire (appuie/relâche

du bouton de la souris sur l'icône) puis à sélectionner l'option  détruire  dans le menu 

Fichier . Pour cela l'utilisateur doit déplacer le curseur de la souris sur le menu  Fichier

, appuyer sur le menu  Fichier , tout en maintenant le bouton de la souris appuyé dé-

placer le curseur de la souris sur l'item  détruire  et enn relâcher le bouton de la souris.

(C) La troisième solution consiste à sélectionner l'icône du chier à détruire (appuie/relâche

du bouton de la souris sur l'icône) puis à saisir au clavier le raccourci clavier : Commande

 X (deux touches du clavier).

Nous supposons que les deux icônes (celle du chier à détruire et celle de la corbeille) sont

visibles à l'écran et que l'utilisateur a la souris dans la main.

Questions
1. Codez avec KEYSTROKE les trois méthodes décrites ci-dessus. Justiez votre réponse.

2. Calculez les temps de réalisation des trois méthodes, en considérant les valeurs moyennes

suivantes :

• Frappe au clavier (appui et relâche) : 280 ms

• Déplacer la souris sur une cible : 1100 ms

• Appuyer ou relâcher le bouton de la souris : 100 ms

• Bouger les mains entre la souris et le clavier : 400 ms

• Acte de penser à l'opération à eectuer : 1200 ms

114
Corrigé type de la série de TD 4

Exercice 1 : Trie par carte

(1) Oui, la méthode du trie par cartes est ecace pour l'organisation des contenus lors

de la conception d'une IHM d'un système interactif.

(2) Trie par cartes est une méthode de conception composée de trois étapes : - Validation

(au niveau utilité et appellation) du contenu des cartes par les participants.

Au niveau utilité des cartes : détecter si les cartes présentées paraissent cohérentes à

l'utilisateur (est-ce qu'il est utile d'avoir ce type d'informations sur le site par exemple ?),

et s'il lui semble manquer des choses. Nous pouvons lui suggérer d'ajouter les contenus

manquants en se servant des cartes vierges.

Au niveau appellation des cartes : demander à l'utilisateur d'analyser les étiquettes, et

d'en proposer de les adaptés si nécessaire. L'utilisateur peut donc renommer les cartes

à sa guise s'il estime que les contenus sont mal décrits. Dans cette étape, le participant

peur renommer des cartes existantes ou ajouter des nouvelles cartes vierges.

- Regroupement des cartes qui se ressemblent (trier les cartes et les répartir en groupes).

- Labellisation de chaque groupe établi : consiste à demander à l'utilisateur de nommer

les groupes qu'il a formés.

115
Exercice 2 : Conception d'une IHM
1. Une erreur de saisie signie une erreur dans la fréquence de l'injection ou dans la

dose du produit anesthésique, ce qui causera des problèmes chez le patient (ça peut

aller jusqu'à la mort)

2. Non, la maquette conçue n'est pas adaptée à l'usage envisagé, pour plusieurs rai-

sons :

• Aucun contrôle de sécurité : n'importe qui peut saisir des valeurs et les valider

• Aucune contrôle explicite : impossible de faire un retour en arrière en cas d'erreurs

• Aucune étape de validation : annuler la saisie des deux paramètres

• Problème de signication des codes et dénomination (pour le bouton C)

• Problème de cohérence (mélanger le français et l'anglais)

• Gestion des erreurs (fournir à l'utilisateur des listes déroulantes pour saisir la fré-

quence et la dose)

• En terme médical, les paramètres doivent être très précis (nombre ottant avec

des unités diérentes)

• Pour chaque injection, nous avons une fréquence, donc la saisie des deux para-

mètres doit être faite dans la même fenêtre

• Guidage (regrouper les boutons Set et C)

IHM d'accès à l'application IHM de la saisie des paramètres IHM de la validation

Exercice 3 : Modèle de GOMS

Méthode Opération Temps de réali- Performance de
sation la méthode
Penser à l'action de suppression avec la méthode (A) 1200 ms

Déplacer la souris vers l'icône du chier à détruire 1100 ms

(A) Appuyer sur le bouton de la souris pour le sélectionner 100 ms 3600

116
 Déplacer la souris vers la corbeille 1100 ms

Relâcher le bouton de la souris 100 ms

Penser à l'action de suppression avec la méthode (B) 1200 ms

Déplacer la souris vers l'icône du chier à détruire 1100 ms

Appuyer sur le bouton de la souris pour sélectionner le 100 ms 4900

chier
(B)
Relâcher le bouton de la souris 100 ms

Déplacer la souris vers le menu  Fichier  1100 ms

Appuyer sur le bouton de la souris pour ouvrir le menu 100 ms

Déplacer la souris vers l'item  détruire  1100 ms

Relâcher le bouton de la souris 100 ms

Penser à l'action de suppression avec la méthode (C) 1200 ms

Déplacer la souris vers l'icône du chier à détruire 1100 ms

Appuyer sur le bouton de la souris pour sélectionner le 100 ms 3460

chier
(C)
Relâcher le bouton de la souris 100 ms

Bouger la main entre la souris et le clavier 400 ms

Appuyer sur la 1ère touche du clavier (par exemple ctrl) 280

Appuyer sur la 2ème touche du clavier (la touche X)

280
Relâcher les deux boutons (en même temps)

Exercice 4 : Modèle de Keystroke

- Quand un contrôlepalette reçoit l'événement (augmenter la température de 10 degrés)

de l'utilisateur (1), la palette met à jour son abstraction (2b) et sa présentation (2a)

pour informer l'utilisateur que le bouton a été activé.

- Puis la palette informe le contrôlepère (fenêtre principale) du changement (3). Le père

met à jour son abstraction (4b) et sa présentation (4a) et informe tous ses contrôle-

ls(5,7) pour qu'ils mettent à jour leur présentation (6a, 8a) (la valeur de la température,

la courbe) et leur abstraction (6b, 8b) (les valeurs qu'ils achent).

117
Série de TP 4

But : utiliser le Java pour développer des boites de dialogue interactives.

Exercice 1

Réaliser l'interface (a) qui permet de sélectionner les options suivantes :

 Oui (ou Yes) alors acher le message  Clic sur bouton Oui ou Yes) avec un bouton

de couleur verte dans l'interface (b),

 Non (No) alors acher le message  Clic sur bouton Non ou No) avec un bouton de

couleur rouge dans l'interface (c),

 Annuler (Cancel) alors acher le message  Clic sur bouton Annuler ou Cancel) avec

un bouton de couleur orange,

 Sinon acher le message  Clic sur fermeture fenêtre .

(a)

(b)

118
 (c)

Exercice 2

Réaliser l'interface (a) qui permet de saisir un texte et l'acher dans une seconde fenêtre

(b) avec un arrière plan de couleur grise.

(a) (b)

Exercice 3

Créer une boîte de dialogue (BoiteListe.java) qui propose des choix dans une liste dérou-

lante et ache le résultat dans une autre boite intitulée BoiteConf.java.

(a) (b)

119
Chapitre 5
Évaluation des Interfaces Homme-Machine

5.1 Introduction

L'évaluation de la qualité des systèmes interactifs est un problème récurrent depuis une

trentaine d'années. En fait, dans la plupart des projets de développement, leur évaluation

est souvent bâclée, maladroitement menée, voire ignorée. Dans ce cas, les interfaces réa-

lisées peuvent ne pas répondre aux besoins et attentes des utilisateurs. Il est maintenant

bien établi que l'évaluation des systèmes interactifs fait désormais souvent partie inté-

grante de leur cycle de conception. Cette évaluation est nécessairement pluridisciplinaire

comportant de diérentes facettes.

L'objectif de ce chapitre est de présenter un aperçu des méthodes d'évaluation des inter-

faces homme- machine.

5.2 Principe de l'évaluation des IHM

L'interface homme-machine est considérée comme un composant du système interactif.

Son évaluation constitue une phase primordiale dans la boucle de conception du système

interactif. Elle ne peut pas être réduite à une simple étape ponctuelle, l' équipe d'éva-

luation doit pouvoir mettre en jeu un ensemble d'outils bien adaptés à chaque étape de

développement du système interactif à interfacer ; durant la conception, la réalisation, la

diusion et la commercialisation du système à réaliser.

120
A cet égard, [Senach, 1990a] a proposé la dénition suivante de l'évaluation : "toute

évaluation consiste à comparer un modèle de l'objet évalué à un modèle de référence

permettant d'établir des conclusions".

Figure 5.1  Principe de l'évaluation

Les pratiques en matière d'évaluation d'une interface homme-machine sont dénies par la

spécication de :

 Dimensions d'évaluation : citons principalement les critères "utilité" et "utilisabilité"

que nous allons les détailler dans la suite du chapitre. Certes, la sélection des dimensions

pertinentes pour le diagnostic de la qualité d'une interface homme-machine dépend non

seulement des objectifs de l'évaluation mais aussi des caractéristiques de la popula-

tion et des exigences des tâches. Par exemple, si nous nous intéressons à évaluation

d'un système critique, le temps de réponse devra être pris en considération. Lorsque

les dimensions d'évaluation sont établies, il convient de dénir les données de base à

recueillir.

 Données de base : l'analyse de l'IHM doit mettre à jour un ensemble de variables

cibles regroupant aussi bien des informations objectives (ou mesures de performance

telles que : taux d'erreur, nombre de tâches réalisées, durée d'exécution d'une tâche,

durée d'apprentissage, et le nombre de fonctions inutilisées, etc.) que subjectives (cor-

respondant au confort d'usage, esthétique, suggestions/préférences, décision d'achat,

facilité d'apprentissage, etc).

 Techniques de recueil de données : permettent de recueillir automatiquement des

données objectives comportementales (relatives à l'interaction de l'utilisateur avec le

système à évaluer) à l'aide de l'inspection cognitive, les observations, le test A/B, l'audit

ergonomique, les enquêtes/les entretiens, les questionnaires et l'analyse de traces.

Une autre dénition de l'évaluation repose sur la notion de vérication et de validation

121
[Kolski, 1996]. Évaluer une IHM consiste à "vérier et valider la qualité du système in-

teractif. Le système est vérié s'il correspond aux spécications issues de la dénition des

besoins. Il est validé s'il correspond aux besoins en respectant les contraintes du domaine

d'application".

5.3 Objectifs et intervenants d'évaluation des IHM

Les objectifs d'évaluation sont exprimés sous forme de questions relatives aux aspects plus

au moins étendus de l'interaction de l'utilisateur avec le système. A ce sujet, une équipe

pluridisciplinaire d'évaluateurs devra être en mesure de y répondre à l'issue de l'évaluation.

En voici quelques unes : quelles sont les dicultés rencontrées par les utilisateurs du

système, quels sont les points forts et les points faibles du système, l'interface permet-elle

à l'utilisateur de réaliser une tâche bien dénie correctement ?, comment peut-on améliorer

l'organisation des informations sur l'écran ?, etc. Ces interrogations peuvent être situées à

des niveaux d'abstraction diérents, très spéciques (concernant une interface bien dénie)

ou ont une portée plus générale (voire universelle dans la mesure où elle concerne tous les

systèmes interactifs).

Cette évaluation s'interesse à :

- L'analyse de l'utilisation du système interactif en situation de travail

- La détection et la correction des défauts d'une IHM

- La proposition et la sélection d'altérnatives de conception

- L'évaluation comparative de diérents systèmes interactifs

Quand à l'équipe d'avaluation, elle est composée de : spécialiste(s) des facteurs humains

(ergonomes, psychologues du travail, etc.), concepteur(s) (souvent des informaticiens),

voire un simple utilisateur. Chacun de ces intervenants génère un type particulier de

connaissances, qui se partagent en :

- Connaissances de l'utilisateur : elles se basent sur la pratique et l'expérience de diérentes

situations de supervision du système complexe. L'utilisateur est en mesure de recenser une

grande partie des tâches qui lui ont été assignées et d'en décrire les contraintes.

- Connaissances du spécialiste des facteurs humains : il doit être familier des exigences

physiques et cognitives, ainsi que des limites et des ressources théoriques d'un utilisateur

122
réalisant une tâche donnée dans un environnement socio-technique. Il doit aussi être lar-

gement sensibilisé au fonctionnement du système technique.

- Connaissances du concepteur : il apporte ses connaissances liées aux méthodes et outils

de développement. Il doit en outre faciliter la liaison entre les données recueillies et leur

modélisation.

- Connaissances de l'expert de l'application : il connait son domaine d'application, son

comportement physique et l'interaction entre ses variables principales constitutives, etc.

Il est aussi capable de recenser les informations utiles pour le maintien du fonctionnement

normal du système et de contribuer à l'analyse des modes opératoires qu'eectuent les

utilisateurs.

5.4 Utilisabilité et utilité d'une IHM

L'utilisabilité (facilité d'usage) d'une IHM se dénit par la capacité d'un objet a être

facilement utilisé par une personne donnée pour réaliser la tâche pour laquelle il a été

conçu. C'est une notion fortement liée à la qualité ergonomique d'une IHM.

Selon l'expert en ergonomie [Nielsen, 1994], l'utilisabilité d'un système interactif repose

sur cinq critères :

• L'ecacité : est la précision et le degré d'achevement selon lequel l'utilisateur atteint

des objectifs spéciques.

• L'ecience : représente le rapport entre la qualité des résultats atteints et les ressources

dépensées pour les obtenir.

• La satisfaction : désigne les attitudes positives dans l'utilisation du système interactif.

• La facilité d'apprentissage : est estimée par le temps mis par un utilisateur pour com-

prendre le fonctionnement du système.

• La facilité d'appropriation : est la prise en main du système interactif.

• La facilité de mémorisation.

• La abilité : est assurée par un taux d'erreurs faible.

L'utilisabilité est souvent associée à l'utilité. Selon [Nielsen, 1994], l'utilité fait référence

aux diérentes possibilités, capacités fonctionnelles, performances et la qualité d'assistance

technique d'aboutir aux usages pour lesquels le système a été conçu. Elle dépend du

contexte et de la situation d'usage, au même titre que l'utilisabilité.

123
Dans un contexte donné, un système interactif peut être utile sans être utilisable, et

inversement. Cependant, ces deux notions dénissent l'usage d'un outil et l'acceptabilité

d'un système.

5.5 Méthodes d'évaluation d'IHM

Une évaluation rigoureuse des IHM nécessite de suivre des méthodes et des techniques

d'évaluation.

De nombreuses méthodes et modèles issus de l'ingénierie et des sciences cognitives ont été

proposés an d'évaluer la qualité des interfaces homme-machine. Cependant, il n'existe

pas à priori une méthode d'évaluation plus ecace. En eet, le choix d'une méthode appro-

priée est fortement liée aux facteurs contextuels notamment l'état de développement du

système interactif à évaluer (réalisé concrètement, ou hypothétique mais potentiellement

envisageable et à l'objectif de l'évaluation), le budget disponible, le type de l'application

et le temps disponible.

Alors que les évaluations entreprises ne sont pas toujours couronnées de succés. Les rai-

sons peuvent être les suivantes : 1) les objectifs poursuivis ne sont pas clairement dénis,

2) les techniques utilisées ne sont pas adaptées au système à évaluer.

A ce sujet, [Senach, 1990b] a classé les méthodes d'évaluation en deux grandes approches :

(1) Approche empirique : se base sur le recueil et l'analyse de données rendant compte de

l'utilisation du système à évaluer (expérimentations). Ces données sont ensuite exploitées

pour inférer des conclusions (dicultés rencontrées) avec les utilisateurs, dans un but

d'amélioration de l'existant, ou pour préciser des besoins en aide ou en formation.

(2) Approche analytique : prend en compte des modèles de l'interface et de l'interaction

homme-machine, l'évaluation étant réalisée en comparant l'interface à un modèle de ré-

férence déni à priori. Ce modèle peut être formel ou informel décrivant les propriétés

d'une "bonne interface".

Nous retrouvons souvent la distinction entre des approches dites prédictives et des ap-

proches dites expérimentales, c'est le cas par exemple de la classication de [Nielson and

Molich, 1990].

Par ailleurs, [Kolski, 1996] a déni une autre classication des méthodes où l'évaluation

est centrée sur l'utilisateur, centrée sur une expertise et centrée sur une modélisation de

124
l'IHM (gure 5.2 ).

Bien entendu, notre objectif est de décrire l'ensemble de ces méthodes qui pourront et

devront être combinées pour arriver à une évaluation pertinente.

Figure 5.2  Méthodes de l'évaluation d'une IHM

Méthodes centrée sur l'utilisateur

Les approches centrées sur l'utilisateur se sont des approches empiriques dont l'aspect ex-

périmentale assure la abilité des résultats d'évaluation par rapport aux méthodes théo-

riques (basées sur des experts et sur des modèles). Généralement, elles sont applicables

sur des IHM partiellement ou totalement réalisées.

L'idée est d'impliquer l'utilisateur dans l'évaluation de l'IHM, contrôler à posteriori ses

choix, observer les interactions de l'utilisateur avec le système et analyser les données

comportementales recueillies. Nous distinguons :

(1) le diagnostic d'usage : l'évaluation de l'IHM s'appuie sur l'expérience d'utilisation du

système dans sa globalité. Six techniques peuvent être employées :

 La méthode des incidents critiques : il s'agit de recueillir systématiquement les dys-

fonctionnements du système homme-machine à partir d'entretiens avec les utilisateurs

et d'observations conduites en situation de travail. La démarche consiste à décrire les

incidents critiques (sous la forme de court récit pour chaque incident), mettre en évi-

dence de classes de situations an de proposer d'améliorations. Cette méthode présente

l'avantage de pouvoir établir rapidement un diagnostic global des principaux dysfonc-

tionnements du système, cependant, elle ne permet pas d'évlauer précisément la qualité

125
 ergonomique d'une interface.

 Le questionnaire d'utilisation : constitue un outil d'évaluation intéressant. Il est composé

d'une série de questions (qui peut être une grille de commandes, questions ouvertes ou

fermées) dont l'objectif est de contrôler la qualité d'une IHM. Lors d'une situation

d'évaluation, des enquêtes de satisfaction sont établies par des évaluateurs en analysant

des données objectives et appréciations subjectives concernant le système à évaluer.

Bien que les questionnaires fournissent un ensemble important d'infomations sûres,

structurées, et cohérentes, leur génération n'est pas non plus triviale. En fait, elle dépend

de l'expérimentateur. De plus, cette méthode ne permet pas de se renseigner sur les

activités de l'utilisateur.

 Le mouchard électronique : implique le recueil automatique et non intrusive des actions

et répercussions des utilisateurs ainsi que leurs performances, en situation réelle ou

en simulation. Il est généralement associé à des questionnaires et des verbalisations.

Par les nombreuses données temporelles fournies, cette technique peut contribuer à

l'amélioration des interfaces et des modules d'assistance. Le mouchard électronique

n'est pas intrusive, ne perturbant pas la réalisation des tâches, et n'apportant donc pas

de biais dans les données recueillies.

 L'analyse des traces écrites : l'idée est de recueillir et analyser des traces écrites (notes

écrites, documents de conduite, cahiers de doléances, rapport, etc.) par l'utilisateur

lors du travail. Ces traces décrivent des points précis ou des problèmes particuliers de

l'interface.

 L'estimation de la charge de travail : consistant à demander à l'utilisateur d'indiquer à

posteriori son sentiment de charge lors de la réalisation d'une tâche, le plus souvent au

moyen d'échelles subjectives, soit objectives par la mesure des paramètres physiques ou

physiologiques (tels que le diamètre de la pupille, fréquence cardiaque respiratoire, etc.)

ou encore par des mesure de performances (temps de réponse et erreurs eectuées). Son

objectif est de mesurer le niveau de diculté lié à l'utilisation de l'IHM.

 L'analyse des mouvements oculaires : il s'agit d'observer (au moyen d'un oculomètre),

suivre et analyser l'activité oculo-motrice (à travers le regard) que l'utilisateur porte à

des objets représentés sur une interface. A partir de cette étude, de diérentes lacunes

d'ergonomie d'interfaces sont décelées lors de situations de crise.

126
(2) les tests de conception : suggèrent que l'évaluation d'un système interactif est élaborée

selon un cycle correspondant à la nature itérative du processus de développement. Ce type

d'évaluation peut être mis en ÷uvre lorsqu'il n'existe pas encore d'expérience d'utilisation

du système. Ils sont fondés sur le recueil des données au moyen de tests. Ceux-ci engendrent

des modications à apporter au système à évaluer, ce qui donne naissance à une nouvelle

version améliorée qui sera aussi mise à l'épreuve et ainsi de suite jusqu'à le développement

d'un système satisfaisant (par rapport aux objectifs du système nal). A l'issue de la

conception d'un système interactif, nous pouvons distinguer trois étapes complémentaires

d'évaluation, à savoir :

 Sélection d'alternative de conception : est réalisée lorsqu'il n'existe aucun critère de

choix évident entre plusieurs possibilités de conception. Elle fait l'objet d'une étude

expérimentale préliminaire avec les utilisateurs an de tester ces alternatives (i.e test

d'usage), assurer l'hiérarchisation des solutions envisagées et choisir la solution la pus

ecace.

 Prototypage : porte sur le contrôle de la qualité de l'interface. Cette dernière est assurée

par : 1) L'évaluation précoce avec les utilisateurs de certains aspects particuliers de l'in-

terface, de confronter le choix de conception à la réalité du terrain an de détecter des

problèmes de conception et, 2) Les mesures de l'impact des aménagements en vériant

que les améliorations introduites sont satisfaisantes.

Deux principaux critères sont considérés : critères ergonomiques et les critères spéci-

ques à l'application (qualité, sécurité, environnement, etc.)

 Banc d'essai nal : contrôle la qualité du produit nal (mesure d'utilisabilté). Le recueil

de données subjectives et objectives sur des sujets à prendre en main est eectué grâce

à des stations d'évaluation (oculomètre, caméra, microphone, etc.).

Figure 5.3  Démarche d'évaluation lors de conception la

127
Méthodes centrée sur une expertise

L'évaluation des aspects d'interaction d'un système interactif nécessite souvent une ana-

lyse qualiée d'un expert sans impliquer à priori l'utilisateur. Elle est applicable dans les

situations où le système existe ou il n'est pas encore développé. Ce type d'approches vient

en complément des approches empiriques pour vérier qu'un maximum de critères ont été

pris en compte. Trois types d'approches peuvent être identiées :

 Évaluation basée sur l'intervention d'expert(s)

Les connaissances d'expert(s) constituent dans une certaine mesure un modèle de la

"bonne interface". Ce modèle repose sur le savoir individuel d'expert(s) acquis par

expérience. Le résultat de l'évaluation relève les problèmes potentiels du système étudié.

Par conséquent, l'expert(s) est (sont) censé(s) savoir ce qu'il faut faire pour améliorer

la qualité de l'interaction.

 Grilles d'évaluation

Le principe est de fournir à l'évaluateur une grille d'évaluation. Cette dernière com-

prend un ensemble de critères caractérisant l'ergonomie d'une interface où chaque cri-

tère correspond à une règle ergonomique bien précise. Ensuite, l'évaluateur procède à la

notation d'une interface donnée pour chaque critère de la liste sur un échelle de mesure.

Cependant, la génération de la grille est validée en suivant trois aspects : l'adéquation

fonctionnel des critères utilisés pour le système à évaluer, les aspects abordés de l'in-

terface et le système de notation des critères.

Figure 5.4  Grille d'évaluation

128
 Évaluation basée sur l'inspection de l'utilisabilité

Elle fait appel aux jugements d'évaluateurs (expert ou non en utilisabilité). Elle repose

sur la détection des aspects des interfaces qui peuvent entrainer des dicultés d'utili-

sation ou alourdir le travail des utilisateurs.

Dans l'évaluation basée sur l'inspection de l'utilisabilité, nous considérons les deux mé-

thodes suivantes :

Méthode cognitive : vise à évaluer la rapidité et facilité d'apprentissage et de prédire

les problèmes rencontrés par l'utilisateur. Elle suit les phases ci-après :

- Phase de préparation : est initiée par la description du prol de l'utilisateur, le choix

de la tâche à évaluer, et la spécication de la séquence d'actions que l'utilisateur peut

eectuer.

- Phase d'évaluation : consiste à tester la faisabilité (l'utilisateur peut ou doit faire cette

action) de l'action, la reconnaissance de contrôle (est ce que l'utilisateur reconnaitra

que celui-là déclenchera bien l'action désirée) et le retour d'information (une fois

l'action déclenchée, l'utilisateur comprendra t'il le retour d'information qui lui permet

de passer à l'action suivante).

- Phase d'interprétation des résultats : en rendant les dispositifs de contrôle plus évi-

dents par l'utilisation de l'association étiquette-icône, fournir un meilleur retour du

système et interpréter les réponses négatives fournies lors la phase d'évaluation.

Évaluation heuristique : consiste à inspecter une interface à partir des heuristiques

et recenser les problèmes d'utilisabilité liés à l'interface. Ces heuristiques peuvent être

des recommandations, des règles générales ou des critères ergonomiques. Nous citons :

Dix heuristiques de Nielson

[Nielson and Molich, 1990] ont proposé dix heuristiques et qui couvrent en pratique

tous les problèmes d'une IHM :

• Proposer des dialogues simples , naturels et minimum,

• Parler le langage de l'utilisateur,

• Minimiser la charge de mémoire de l'utilisateur,

• Être cohérent, et respecter les standards,

• Reéter le monde réel,

• Fournir un retours à l'utilisateur,

• Permettre une personnalisation par les utilisateurs expérimentées,

129
• Prévenir les erreurs,

• Aider l'utilisateur à reconnaitre, diagnostiquer et repérer les erreurs,

• Rendre accessible "Aide et documentation".

Figure 5.5  Dix heuristiques de Nielson

Sept règles d'or de Coutaz : regroupant les critères ci-après :

• Lutter pour la cohérence,

• Lutter pour la concision,

• Réduire la charge cognitive,

• Mettre le contrôle entre les mains d'utilisateur,

• Souplesse d'utilisation,

• Structurer le dialogue,

• Prédire les erreurs.

Cinq critères centraux d'évaluation de Shneiderman

An d'évaluer les caractéristiques d'une interface homme-machine,[Shneiderman and

Plaisant, 2010b] ont suggéré cinq critères :

• Temps d'apprentissage des dispositifs nécessaires à l'exécution d'une tâche,

• Rapidité d'exécution d'une tâche,

• Taux d'erreurs (fréquence des erreurs et temps de correction) eectué par l'utilisateur,

• Période de rémanence (durée de conservation des la connaissance acquise),

• Satisfaction subjective, qui se traduit par un sentiment de confort et d'enrichissement.

130
Méthodes centrée sur une modélisation de l'IHM

Les approches analytiques s'appuient sur des modèles formels de l'interface ou de l'inter-

action homme- machine. Ces modèles élaborent des représentations abstraites des objets

évalués permettant de prédire les performances des utilisateurs. Deux types de modèles

sont diérenciés :

(1) Modèles prédictifs des performances de l'utilisateur : il s'agit de formaliser la connais-

sance de la conception ou l'utilisation du système interactif. Plusieurs modèles formels

ont été progressivement mis au point, notamment :

• Modèles de tâches : impliquent la décomposition d'une manière hiérarchique les tâches

de l'utilisateur en actions élémentaires an de calculer le temps de réalisation. Il est

ensuite possible d'inférer le temps d'éxécution d'une tâche donnée en prenant en consi-

dération les contraintes imposées par le système interactif. Ces performances sont na-

lement validées dans un contexte expérimental. Les plus connus sont :

- GOMS : analyse le comportement rational de l'utilisateur en termes des buts poursui-

vis, d'opérateurs, de méthodes et de règles de sélection des méthodes. Ses prédictions

concernent la durée de réalisation des tâches, le choix des méthodes et le choix des opé-

rateurs. Ce modèle est très réducteur puisqu'il ne permet de prédire les performances

d'un utilisateur expert ne commettant pas d'erreur.

- Keystroke : évalue les actions physiques d'un utilisateur expert en fonction du temps

d'éxécution d'une tâche. Il hérite des avantages et des limitations de GOMS. Ses prin-

cipes possèdent toutefois l'intérêt d'être facilement compréhensibles et de fournir des

valeurs numériques simples, bien que sa mise en ÷uvre pose rapidement de nombreux

problèmes particulièrement dans les phases de tests et de conception d'un système in-

teractif, où elles demandent plus des exigences temporelles de développement.

• Modèles linguistiques : explicitent la structure de l'interaction (actions de l'utilisateur)

homme-machine à l'aide de grammaires. Les modèles principaux développés dans cette

perspective sont :

Modèle ALG (Action Language Grammar) : provenant de [Reisner, 1984], consiste

à représenter les actions de l'utilisateur de l'interface, sous la forme de règles de pro-

duction du type  pour eectuer telle action faire ceci . De telle règle de grammaire

établit la correspondance entre les buts et les opérations à mettre en ÷uvre. Formel-

lement, ALG dénit trois indices pour caractériser une interface donnée : complexité

131
 du langage (nombre d'actions pour atteindre un but), la simplicité (longueur des sé-

quences pour une tâche donnée) des procédures et la cohérence (nombre de règles non

nécessaires et nombre de règles pour des séquences d'actions terminales similaires).

Ces prédictions sont validées par des expérimentations préliminaires. Il a d'ailleurs un

double objectifs : 1) permettre la comparaison entre des alternatives de comparaison

selon selon le critère de facilité d'utilisation, et 2) faciliter l'identication des choix

de conception susceptibles d'engendrer des erreurs d'utilisation. Il est utilisable pour

l'évaluation des interfaces à langage de commandes. Cependant, ce langage ne prend

pas en compte la dynamique et les types de modes d'entrées/sorties, ceux-ci ayant une

inuence indéniable sur la complexité des tâches en fonction du contexte opérationnel.

Modèle CLG (Command Language Grammar) : proposé par [Moran, 1981], permet

principalement de prédire la facilité d'utilisation de l'interface. En CLG, un système

est décomposé en trois composants (conceptuel, communication, physique), chacun est

décrit à diérents niveaux d'abstraction : niveau tâche, niveau sémantique, niveau syn-

taxique, niveau interaction et niveau matériel. Le modèle possède comme limitations

l'absence d'aide à la structuration et l'absence de moyens d'expression du parallélisme

et des interruptions.

Modèle TAG (Task Action Gramma) : est une grammaire formelle décrivant l'ensemble

des tâches et actions sous forme de règles et de mettre en correspondance la sémantique

des tâches avec des séquences d'actions.

(2) Modèles formels de la qualité de l'IHM : identient les propriétés mesurables de l'IHM

selon des critères d'utilisabilité formalisés. Nous pouvons diérencier deux classes relatifs

à la qualité de l'interface : approches cognitives et approches optimales de l'évaluation la

qualité de l'IHM.

• Approches cognitives : s'interessent à l'identication du modèle mental de l'utilisateur

ayant à naviguer dans les menus. D'autres méthodes visent la prédiction des dicul-

tés d'utilisation de l'interface. D'autres travaux concernent l'évaluation de la cohérence

conceptuelle de l'interface qui, au niveau de l'utilisation des fonctions et de la présen-

tation d'inrmation, a une énorme inuence sur sa facilité d'utilisation et son appren-

tissage. Ces méthodes sont très utiles puisqu'elles permettent de mieux comprendre le

modèle cognitif que se forgent les utilisateurs de l'interface à partir de certaines de ses

composantes caractéristiques.

132
• Approches optimales : En évaluant l'interface selon des critères quantitatifs relatifs à

la présentation de l'information, de diérente méthodes ont été réalisées, particulière-

ment :

- Modèle de comportement de l'interface : dénit quatre principes de base que toute

interface doit satisfaire : (i) la prédictibilité de son comportement après chaque inter-

ruption, (ii) la simplicité d'usage, (iii) la cohérence au niveau de la sémantique des

commandes, (iv) la réversibilité de chaque commande.

- Modèles basés sur la complexité perceptive des achages : s'intéressent à l'identi-

cation des critères de la présentation des informations à l'écran et les déterminants

de la complexité perceptive. [Tullis, 1988], [Streveler and Wasserman, 1984] sont deux

exemples de méthodes qui ont suivi le présent modèle.

- Modèles basés sur la génération automatique d'achage : reposent sur la mise en ÷uvre

des systèmes à base de connaissances ergonomiques visant la génération automatique

d'achage ou de spécication d'IHM. Ils ont pour objectif de conduire à des achages

respectant a priori des concepts ergonomiques de base. Par exemple le système [Mac-

kinlay, 1986], il vise à automatiser la présentation de l'information indépendamment de

l'application.

Certes, les diérentes évaluations fournissent des informations à diérents niveaux : l'éva-

luation empirique auprès des utilisateurs permettent d'identier les dicultés concep-

tuelles et procédurales de bas niveau alors que les évaluations analytiques fournissent une

vue générale du système et conduisent à élaborer des hypothèses sur les sources potentiels

de dysfonctionnement.

5.6 Conclusion
Une grande variété de méthodes contribuant à l'évaluation des systèmes interactifs existe.

Celle-ci constitue un processus parallèle à la conception.

Ainsi, elle ne pourra être eective que dans la mesure où des outils ables, systématiques

et faciles à utiliser seront disponibles. En eet, lors de l'évaluation, l'équipe d'évaluation

peut se servir de diverses méthodes et recueillir les données provenant de l'utilisation du

système à interfacer, ce qui nécessite parfois un temps non négligeable de traitement pour

tirer conclusion sur la qualité de l'interface.

133
Série de TD 5

Exercice 1 : Évaluation de l'interface d'un écran d'achage

Nous vous proposons le schéma général d'organisation d'écran :

- Déterminer les aspects à considérer lors de la visualisation d'un écran ?

- Expliquer les points qui ne vous pas paraissent satisfaisants ? Pourquoi ? Proposez une

autre organisation typique (gabarit) d'écran.

Exercice 2 : Notions de base relatives à l'évaluation des IHM

- Énoncez les précautions essentielles d'utilisation de l'attribut couleur dans les IHM ?

- Dicter les principes de lisibilité, signication et portabilité des couleurs ?

- Citer le principe d'achage de texte sur écran ?

Exercice 3 : Évaluation ergonomique des sites Web

1. Que pensez-vous de ce site web (en citant les critères respectés et non respectés) illustré

dans la gure 5.6.

134
 Figure 5.6  Interface (a)

2. Nous présentons ci-dessous (gure illustré 5.7 ) la page d'accueil du site WWW ociel

de la ville de Beaugency. Quel problème rencontre l'utilisateur en arrivant sur ce site ?

Quel principe ergonomique n'est visiblement pas respecté ?

Figure 5.7  Interface (b)

Exercice 4 : Principes ergonomiques des menus

1. Quels sont les principes ergonomiques non respectés dans les menus cidessous ?

2. Redessiner les menus sans ajouter de nouvelles fonctionnalités ?

135
Nous considérons l'interface d'un formulaire de saisie de données sur un site Web, dans

lesquels l'utilisateur doit saisir des informations concernant des personnes. Quatre solu-

tions sont proposées pour le design de cette zone de saisie.

1. Critiquez chacune de ces propositions : quels sont leurs points forts et leurs faiblesses ?

2. Quel est la meilleure proposition, dont vous recommandez ?

136
Corrigé type de la série de TD 5

Exercice 1 : Évaluation de l'interface d'un écran d'achage

- Les aspects à considérer lors de la visualisation d'un écran sont :

(1) Agencement et organisation des composants graphiques sur l'écran an de mettre

en évidence les informations, de faciliter la lecture (les éléments les plus importants

vers les plus fréquents : parcours en Z, horizontal ou vertical) et l'exploration visuel

(accessibilité et visibilité).

(2) Aspects graphiques (en prenant en compte : les couleurs, les polices de caractères, les

icônes, et les techniques de mise en évidence) an de satisfaire les critères esthétiques

et permettre une bonne lisibilité des information

(3) Langage utilisé (compréhension)

- L'organisation d'écran démontrée dans la gure correspondante n'est pas satisfaisante.

Il faut décomposer la fenêtre en zones suivant des règles ergonomiques :

• Agencer les composants sur l'interface en en prenant en compte les critères de la visi-

bilité, de l'accessibilité et de la cohérence (via un gabarit d'écran)

• Concision de l'utilisation des zones selon l'importance de chaque zone (ex : titre)

Nous pouvons décomposer l'interface d'un écran :

- Par Guidage : couplage des zones de sélection et de commande - Par convention habi-

tuelle, nous pouvons positionner les composants graphiques comme suit :

(1) Zone de commande (à gauche) : boutons (ex : barre de menu, d'outil, etc.)

(2) Zone de sélection (à gauche) : correspond à l'action sélectionnée

(3) Zone de travail (à droite) : pour acher le contenu

(4) Zone d'alerte (bas de l'interface) : correspond aux messages d'alerte

Voici sur un écran (gure 5.8) illustrant les diérentes zones avec les critères d'accessibilité

et de visibilité :

137
 Figure 5.8  Accessibilité et visibilité des zones
D'où deux autres solutions sont proposées dans la gure 5.9 :

(a) (b)

Figure 5.9  Organisation d'un écran gabarit

Exercice 2 : Notions de base relatives à l'évaluation des IHM

Un bon ergonome doit prendre en compte :

 Mémoire (facilité de mémorisation)

 Aordance (elle représente la capacité d'un objet à suggérer sa propre utilisation)

 Perception, attention [éviter la charge perceptive (visuel, auditif ) et attirer l'attention]

 Accès, localisation (facilité d'accès)

 Couleurs, texte, lecture à l'écran

Les précautions essentielles d'utilisation de l'attribut couleur dans les IHM ?

Il faut penser à :

(1) Concevoir d'abord en monochrome (noir et blanc) puis rajouter les couleurs (lors-

qu'elles sont utiles)

138
(2) Bien choisir les teintes en fonction du codage de couleur pré-établi

(3) Utiliser l'attribut de couleur pour attirer l'attention, montrer une organisation, indi-

quer un état, montrer des relations (similarité, diérence)

(4) Éviter certaines combinaison de couleurs (rouge/bleu, jaune/violet) → ça fatigue la

rétine

(5) Utiliser au maximum sept couleurs (quatre au plus est conseillé)

(6) L'attribut couleur ne doit pas être un élément déterminant de l'interface [car 8% des

hommes ont des dicultés de perception les couleurs (un peu moins chez les femmes)].

Dicter les principes de lisibilité, signication et portabilité des couleurs.

(1) Principe de lisibilité des couleurs :

- Utiliser des caractères contrastés sur un fond élevé (blanc/noir)

- Privilégier des caractères sombres sur fond claire (noir sur blanc)

- Éviter certaines combinaisons de couleurs (fatigue et stresse visuelle)

- Limiter le nombre de couleurs (sept grand maximum, hors icônes)

(2) Principe de signication des couleurs :

- Utiliser des couleurs suivant leur signication [utiliser les couleurs pour signier un

concept exemple : rouge = stop / vert = go] ou même en respectant les habitudes

socioculturelles de (rouge=joie en chine) ;

- Utiliser des couleurs neutres si on a besoin car elles reposent l'÷il (blanc, noir, beige,

marron, gris)

- Utiliser même couleur pour indiquer le même type d'information

- Utiliser des couleurs contrastées pour les diérents types d'information

- Utiliser des couleurs peu contrastées pour indiquer des informations similaires

(3) Principe de portabilité des couleurs :

- L'information portée par la couleur doit toujours être disponible (rouge : stop, vert :

autoriser)

- Faire attention à la portabilité des couleurs selon : matériel [écran/vidéoprojecteur

(résolution)], les personnes (femme distingue facilement les couleurs par rapport aux

hommes) et contexte (en plein aire/nuit)

Principe d'achage du texte sur écran suivant la typographie suivante :

- Minimiser le nombre de polices utilisé (Pas plus que trois)

- Utiliser les lettres sombres sur fond clair

139
- Écrire un texte aéré

- Utiliser des polices sans empattement (exemple : sans serif ) plus lisibles sur écran :

Arial, Calibri, Helvetica, etc.

- Éviter des textes en gras, italiques et soulignés

- Majuscules sont moins lisibles que les minuscules (par conséquent, écrire les textes en

minuscules avec une lettre en majuscule en début de la phrase)

- Écrire quelques lignes longues mieux que plusieurs lignes courtes

Principes des deux secondes et des trois clics sont les suivants :

(1) Principe des deux secondes : Le temps de réponse d'un système ne dépasse pas deux

secondes.

(2) Principe des trois clics :

- Accéder à l'information souhaitée pas plus de trois clics

- Rendre les actions importantes accessibles directement ou au moins rapidement

Exercice 3 : Évaluation ergonomique des sites Web

1. Le site illustré a les aspects suivants :

(-) Utilisation d'un logo (product alert) qui est incompatible avec l'environnement de ce

site. → Absence du critère de la compatibilité

(-) Redondance entre les items du menu verticale et celui en horizontale : buy, upgrade,

simples, etc. → Absence de la concision.

(-) Utilisation d'un mot insigniant (DRM) → Absence du critère de la signication des

codes et dénomination.

(+) Assistance dans le travail → Mise en ÷uvre d'un composant (i.e bouton "show me

more") qui assiste l'utilisateur lors de son interactions personnalisée.

2. Le problème rencontré par l'utilisateur lors de l'interaction du site : absence des moyens

de contrôle. → Absence du critère de pilotage.

Exercice 4 : Principes ergonomiques des menus

1. Citer les principes ergonomiques non respectés dans :

Menu (a) :

140
(-) Compatibilité entre les commandes du menu chier et celles du menu édition (com-

mande Collage)

(-) Homogénéité :

• CTRL+A (mauvais raccourci pour Quitter)

• Les fonctions enregistrer, imprimer, imprimer avec option ne commencent pas en

majuscule

• Absence de raccourci pour les commandes standards (enregistrer sous, imprimer)

• Utiliser un verbe au lieu du mot "Collage"

• Problème d'alignement des commandes

• Non respect de l'ordre des commandes

Menu (b) :

(-) Signication des codes et dénomination (modications)

(-) Compatibilité (la commande Police)

(-) Homogénéité :

• Absence de raccourci pour les commandes standards (enregistrer sous, imprimer)

• Utiliser un verbe au lieu du mot "Collage"

• Non respect de l'ordre des commandes

Menu (c) :

(-) Contrôle explicite ou pilotage (l'utilisateur devrait sélectionner une seule commande

parmi la commande "Majuscule" ou la commande "Minuscule".

(-) Guidage (illisibilité)

2. Améliorer les menus sans ajouter de nouvelles fonctionnalités.

141
Exercice 5 : Principes ergonomiques des formulaires

Les points forts (+) et faibles (-) de :

Conception A :

(+) Homogénéité étiquette

(+) Homogénéité zone de texte.

(-) Signiance : "courrier électronique" au lieu de "E-mail"

Conception B :

(+) Homogénéité des zones textuelles

(-) Non Homogénéité des étiquettes

(-) Signication des codes et dénomination : "courrier électronique" au lieu de "E-mail"

Conception C :

(+) Homogénéité des étiquettes

-() Non Homogénéité des zones textuelles

(-) Signication des codes et dénomination : "courrier électronique" au lieu de "E-mail"

Conception D :

(+) Homogénéité des étiquettes

(+) Homogénéité des zones textuelles

(+) Signication des codes et dénomination

(-) Concision → faire perdre le temps de l'utilisateur à lire une information fausse

(-) Signiance → ajout d'un attribut 'optionnel' qui ne rapporte pas de la signiance par
rapport au prénom.

2. La meilleure proposition est la conception "D" à condition de supprimer "optionnel"

ou de le reporter au EM AIL.

142
Série de TP 5

But : utiliser le Java pour créer et gérer des menus interactifs.

Exercice 1

Écrire un programme Java qui permet de créer une interface avec une barre de menus

contenant deux menus (simples) : couleurs et dimensions. Le clic sur l'un des sous menus

change automatiquement la valeur de la dimension [(300,400), (200,150)] ou/ et de la

couleur (rouge, vert, bleu) de la fenêtre.

(a) (b)

Exercice 2

Réaliser les interfaces suivantes en utilisant un menu contextuel (package JPopupMenu).

(a) (b)

143
Contrôle continu

Travail à rendre
1) Quelle est la fenêtre racine d'un IHM ? Quel est le conteneur racine associé à la fenêtre

illustrée dans la gure 5.10 ? Quel est le gestionnaire d'agencement (layout manager)

par défaut associé à ce conteneur ? Rappeler par un dessin comment ce gestionnaire

dispose les composants.

2) Créer une telle fenêtre racine que l'on appellera  cadreglobal .

Comment ferme-t-on  proprement  une fenêtre ?

3) Compléter cadreglobal en mettant à l'est un panneau  boiteBoutonsDéplacements 

(instance de JPanel), au sud un panneau  boiteBoutonsJeu  et au centre un panneau

 panneauDessin .

Figure 5.10  Fenêtre (1)

Que constatez-vous si vous achez l'interface ? Colorer ces panneaux en vert à l'est et

en rouge au sud, grâce à la méthode setBackground(Color.green).

4) Quelle est la classe SWING du composant bouton ? Quel est le gestionnaire d'agence-

ment par défaut d'un objet JPanel ?

Ajouter au panneau  boiteBoutonsDéplacements  quatre boutons (pour les déplace-

ments dans les quatre directions (àDroite, àGauche, enHaut, enBas).

Ajouter au panneau  boiteBoutonsJeu , deux boutons  Accélérer ,  Ralentir .

144
 Figure 5.11  Fenêtre (2)

5) Quelle est la classe SWING du composant étiquette ? d'une zone de saisie de texte ?

Ajouter au panneau  panneauDessin  le texte :  ceci sera ma zone de dessin .

En attendant de savoir dessiner, ajouter ensuite une zone de saisie de texte de 10 lignes

et 20 colonnes.

Modier la forme de la fenêtre, que constate-t-on ? en particulier dans le panneau cen-

tral ? Pourquoi ?

6) Modier le gestionnaire d'agencement du panneau de façon à regrouper les 4 bou-

tons 2 par 2 sur 2 lignes (5.12). Quel gestionnaire faut-il choisir ? Quels inconvénients

apparaissent ?

Figure 5.12  Fenêtre (3)

7) Quel autre gestionnaire choisir pour une meilleure disposition ?

Comparer les résultats. Faites des essais pour l'améliorer.

8) Dessiner l'arborescence des composants graphiques de l'interface démontrée dans la

gure (5.12).

145
Mini projet de TP

Description du mini-projet

On considère un site Web (hébergé) d'archivage des bases d'images de lésions cutanées,

qui contiendra les diérentes fonctionnalités suivantes :

• S'authentier

• Gérer les bases d'images : ajouter, modier, consulter, sélectionner et supprimer une

base d'images. Cette dernière comporte des images, leurs méta-données, et d'autres

attributs.

• Chercher une image dans une base de données selon les diérents ltres : nom, identi-

ant, diagnostic, type d'image (dermoscopic, clinique, autre), attributs cliniques (sexe,

âge, taille de lésion, type de lésion, localisation, etc.)

• Consulter l'historique personnel des activités de gestion de bases d'images (par date et

heure)

• Acher/masquer les statistiques relatives à chaque base de données (nombre total des

images, nombre d'images par type)

Travail demandé

Le but de ce mini-projet est de développer un site d'archivage des bases d'images de

lésions cutanées en utilisant le modèle MVC.

Consignes générales pour le rendu du mini projet

 Construire des équipes de trois étudiants

 Chaque trinôme devra remettre :

146
 (1) Le code source java commenté et un chier exécutable.

(2) Un rapport d'environs 12 pages détaillant les méthodes de conception, de dévelop-

pement du site (avec captures d'écran) et de l'évaluation ergonomique du système

donné en faisant appel aux diérents critères ergonomiques étudiés dans le cours.

Ressources utiles
Sites pour s'inspirer et collecter les bases d'images de lésions cutanées :

• https://www.isic-archive.com/#!/onlyHeaderTop/gallery
• Base d'images  SKINL2 . https://www.it.pt/AutomaticPage?id=3459
• Base d'images  HAM10000 . https://www.kaggle.com/kmader/skin-cancer-mnist-ham10000
• Librairie d'images  Dermot . https://licensing.edinburghinnovations.ed.ac.
uk/i/software/dermofit-image-library.html
• http://dermoscopic.blogspot.com/
• Base d'images  PH2 . https://www.fc.up.pt/addi/ph2%20database.html
• http://www.dermweb.com/photo_atlas/

147
Bibliographie

Bastien, J. M. C. and Scapin, D. L. (1993). Critères ergonomiques pour l'évaluation

d'interfaces utilisateurs. Technical report, INRIA.

Bertelsen, O. W. and Bødker, S. (2003). Activity Theory : HCI Models, Theories, and
Frameworks. San Francisco : Morgan Kaufman, 1st edition.

Boehm, B., Gray, T. E., and Seewaldt, T. (1984). Prototyping versus specifying : a

multiproject experiment. IEEE transactions on Software Engineering.

Boehm, B. W. (1981). Software Engineering Economics. 1st edition.

Boucher, A. (2020). Ergonomie web et UX Design Pour une conception centrée utilisateur.
4th edition.

Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., L., B., and Vanderdonckt, J. (2003).

A unifying reference framework for multi-target user interfaces. Journal of Interacting

With Computer, Elsevier Science B.V.

Card, S. K., Moran, T., and Newell, A. (1986). The model human processor : An engi-

neering model of human performance. In K. R. Bo, Kauman, L. and Tomas, J. P.,

editors, Handbook of perception and human performance, volume 2nd, pages 135. New
York : John Wiley and Sons.

Card, S. K., Moran, T. P., and Newell, A. (1980). The keystroke-level model for user

performance time with interactive systems. Communications of the ACM.

Card, S. K., Moran, T. P., and Newell, A. (1983). The psychology of human-computer
interaction. 1st edition.

148
Cardelli, L. and Pike, R. (1985). Squeak : A language for communicating with mice. ACM
SIGGRAPH Computer Graphics, 19(3) :199204.

Carroll, H., editor (2003). HCI Models, Theories, and Frameworks. San Francisco :

Morgan Kaufmann Publishers.

Coutaz, J. (1987). Pac, an implementation model for dialog design. In Proceedings of

Interact'87 Conference, pages 431436.

Coutaz, J. (1990). Interface homme-ordinateur : conception et réalisation. 1st edition.

Coutaz, J. (2013). Essai sans prétention sur l'interaction homme-machine et son évolution.

Bulletin de la Société Informatique de France, (1) :1533.

Couture, N. R. (2010). Interaction tangible, de l'incarnation physique des données vers

l'interaction avec tout le corps. Technical report, L'université Bordeaux 1.

Craik, K. (1952). The Nature of Explanation. Philosophy : science CAM. Cambridge

University Press.

Dang, W. (1988). Formal specication of interactive languages using denite clause gram-

mars. In International Workshop on Programming Language Implementation and Logic

Programming, pages 283291. Springer.

Daubias, J.-S. (2019a). Cours 6 : Éléments d'une ihm et guides de style. Technical report,

Université Lyon1.

Daubias, J.-S. (2019b). Cours 7 : Critères d'évaluation ergonomique. Technical report,

Université Lyon1.

Daubias, J.-S. (2019c). Cours 9 : Évaluation ergonomique spécicités du mobile. Technical

report, Université de Lyon1.

Desmarais, M. C. (2017). Analyse et conception d'interfaces utilisateur. Technical report,

Ecole Polytechnique de Montréal.

Flecchia, M. A. and Bergeron, R. D. (1986). Specifying complex dialogs in algae. In

Proceedings of the SIGCHI/GI conference on Human factors in computing systems and

graphics interface, pages 229234.

149
Fleury, C. (2016). Interaction homme-machine. Technical report, Polytech Paris-Sud.

Galitz, W. O. (2002). The Essential Guide to User Interface Design. Robert Ipsen, 2nd

edition.

Gaussier, P. and Pitti, A. (2015). Interface homme-machine. Technical report, laboratoire

ETIS,UCP  ENSEA.

Ghaoui, C. (2006). Encyclopedia of Human Computer Interaction,. Idea Group Reference,

Liverpool John Moores University, United Kingdom.

Goldberg, A. (1984). Smalltalk-80, the interactive programming environment. 1st edition.

Goldberg, A. and Robson, D. (1983). Smalltalk-80 : the language and its implementation.
1st edition.

Ágoston, T. (2016). From human-computer interaction to cognitive infocommunications :

A cognitive science perspective. In 7th IEEE International Conference on Cognitive

Infocommunications (CogInfoCom2016), pages 433438, Wrocªaw, Poland.

Green, M. (1985). The university of alberta user interface management system. ACM
SIGGRAPH Computer Graphics, 19(3) :205213.

Hayes, P. J. and Szekely, P. A. (1983). Graceful interaction through the cousin command

interface. International Journal of Man-Machine Studies, 19(3) :285305.

Henry, T. R., Hudson, S. E., and Newell, G. L. (1990). Integrating gesture and snap-

ping into a user interface toolkit. In Proceedings of the 3rd annual ACM SIGGRAPH
symposium on User interface software and technology, pages 112122.

Hill, R. D. (1986). Supporting concurrency, communication, and synchronization in

human-computer interactionthe sassafras uims. ACM Transactions on Graphics

(TOG), 5(3) :179210.

Hill, R. D. and Herrmann, M. (1989). The structure of tube-a tool for implementing

advanced user interfaces.

ISO (1997). Articial intelligence  Machine learning. Switzerland, 1st edition.

150
ISO (2010). Human-centred design process for interactive systems. Switzerland, 1st edi-

tion.

J.Dul, Vlaming, P., and M.J.Munnik (1996). A review of iso and cen standards on ergo-

nomics. International Journal of Industrial Ergonomics.

Kolski, C. (1995). Méthodes et modèles de conception et d'évaluation des interfaces

homme-machine. Technical report, Université de Valenciennes.

Kolski, C. (1996). Evaluation des interfaces homme-machine lors du développement des

systèmes interactifs. Technique et Science Informatiques.

Mackinlay, J. (1986). Automating the design of graphical presentation of relationnal

information. ACM Transactions on Graphics.

Maddox, M. and Muto, W. (1999). Three mile island : The human side. Ergonomics in
Design, 7(2).

Mahfoudhi, A., Abed, M., and Angue, J. (1995). Tood : Task object oriented description

for ergonomic interfaces specication. In Analysis, Design and Evaluation of Man

Machine Systems 1995, pages 641646. Elsevier.

Moran, T. (1981). The command language grammar : a representation of the user interface

of interactive computer system. International Journal of Man-Machine Studies.

Neumann, P. G. and Wesley, A. (1995). Computer-Related Risks. Addison-Wesley/ACM

Press.

Nielsen, J. (1994). Usability engineering. Morgan Kaufmann Publishers, San Francisco,

Calif.

Nielsen, J. (1995). 10 usability heuristics for user interface design.

Nielson, J. and Molich, R. (1990). Heuristic evaluation of user interfaces. In Proceedings

of the SIGCHI Conference on Human Factors in Computing Systems, pages 349356.

Nogier, J.-F. (2008). Ergonomie du logiciel et design Web : Le manuel des interfaces
utilisateur. 4th edition.

151
Nogier, J.-F. (2013). Ergonomie des interfaces : Guide pratique pour la conception des
applications web, logicielles, mobiles et tactiles. 5th edition.

Nogier, J.-F., Bouillot, T., and Dunod, J. L. (2012). Ergonomie des interfaces. 5th edition.

Norman, D. (1999). The Invisible Computer : Why Good Products Can Fail, the Personal
Computer is So Complex, and Information Appliances are the Solution. Mit Press. MIT

Press.

Olsen, D. R. and Dempsey, E. P. (1983). Syntax directed graphical interaction. ACM

SIGPLAN Notices, 18 :112117.

Palanque, P. and Bastide, R. (1993). Interactive cooperative objects : an object-oriented

formalism based on petri nets for user interface design. In Systems Engineering in the
Service of Human, pages 274278.

Palanque, P. and Paternò, F. (1998). Modelling clients and servers on the web using

interactive cooperative objects. In Formal Methods in Human-Computer Interaction,

pages 175194. Springer.

Pfa, G. E. (1985). User Interface Management Systems. 1st edition.

Pressman, R. S. (2005). Software Engineering : A Practitioner's Approach. 6th edition.

Recanati, C. (2003). Apports de la psychologie cognitive à la modélisation de l'utilisateur

en ihm. Technical report, Université Paris 13.

Reisner, P. (1984). Formal grammar as a tool for analyzing ease of use, some fundamental

concepts. In Human Factors in Computer Systems, pages 12.

Roussel, N. (2009). Introduction à l'interaction homme-machine. Technical report, Uni-

versité de Paris-Sud.

Saer, D. (2010). Designing for interaction : creating innovative applications and devices.
New Riders, 2nd edition.

Senach, B. (1990a). Evaluation de l'ergonomie des ihm. In Actes du Congrès ERGO-IA'90,

ergonomie et informatique avancée, pages 1921.

152
Senach, B. (1990b). Evaluation ergonomique des interfaces homme-machine : une revue

de la littérature. Technical report, INRIA, Sophia Antipolis.

Shneiderman, B. and Plaisant, C. (2010a). Designing the user interface : strategies for
eective human-computer interaction. 3rd edition.

Shneiderman, B. and Plaisant, C. (2010b). Designing the User Interface : Strategies for
Eective Human-Computer Interaction. 5th edition.

Sholl, H. A., Ammar, R. A., and Weiss, W. S. (1989). Using hypercard to rapidly pro-

totype human-computer interfaces to case systems. In Conference Proceedings., IEEE

International Conference on Systems, Man and Cybernetics, pages 12661267. IEEE.

Simonin, J. and Carbonell, N. (2007). Interfaces adaptatives Adaptation dynamique

à l'utilisateur courant. In Interfaces numériques, à paraître, page 18 pages. Hermès

Science.

Smith, S. L. and Mosier, J. N. (1986). Guidelines for designing user interface software.

Technical report, The MITRE Corporation, Bedford, Massachusetts.

Streveler, D. and Wasserman, A. (1984). Quantitative measures of the spatial properties

of screen design. In In Human Computer Interaction : INTERACT '84, pages 8189.

Thevenin, D. and Coutaz, J. (1999). Plasticity of user interfaces : Framework and research

agenda. In FIP Conference on Human Computer Interaction, Interact'99, Edinburgh,

pages 110117.

Tiberghien, G. (2003). Dictionnaire des sciences cognitives. Jean-François Dortier, Paris.

Tullis, T. (1988). A system for evaluating screen formats : research and application.

Advances in Human-Computer Interaction.

UIMS (1992). A metamodel for the runtime architecture of an interactive system. ACM
SIGCHI Bulletin.

Vanderdonckt, J. and Bodard, F. (1994). Guide ergonomique des interfaces homme-

machine : guide pratique pour la conception ergonomique des interfaces homme-
machines pour des applications interactives. 1st edition.

153
 Wegner, P. (1997). Why interaction is more powerful than algorithms.

Wietho, A. and Butz, A. (2013). Laws of interaction design. Technical report, LMU

München  Medieninformatik.

154

View publication stats