2 ConceptionInterfaces-v3.0

Chapitre 2
Conception d'Interfaces
Homme-Machine
M. SOUALAH UMMTO
Rappel : Systèmes Interactifs
✔ Un système interactif est un système dont le fonctionnement dépend d'un
environnement externe, qu'il ne contrôle pas. (Wegner, 1997)
✔ Un système interactif est une application informatique qui prend en compte, au
cours de son exécution, les informations communiquées par l'utilisateur du
système, et qui produit, au cours de son exécution, une représentation
perceptible de son état interne.
✔ La conception d'une IHM ne se limite pas à son ergonomie. (Principe : Adapter

l'application à l'utilisateur)
✔ Le système interactif est composé de deux parties :
▪ L'interface utilisateur
▪ Le noyau fonctionnel
Noyau
Interface
fonctionnel
Conception de Systèmes Interactifs
✔ La conception du système interactif peut se faire suivant plusieurs points de vue :
Acteurs Intérêt
Commanditaire du système Les tâches que le système offre pour effectuer son activité.
Mise en œuvre d'un système qui répond aux besoins

Concepteur de l'application
usager.
Utilisateur Un système qui répond à ses connaissances du domaine
Proposer une représentation des objets et des

Concepteur de l'interface
méthodes d'interaction efficaces et compréhensibles.
✔ Composantes d'une interaction homme-machine :
1. Un utilisateur : Acteur principal auquel est destiné le système interactif
2. Une tâche : L'utilisateur effectue une tâche
3. Un contexte : domaine d'application de la tâche
4. Le moyen utilisé : Le système informatique

Crash du mont Sainte-Odile en 1992
La catastrophe du mont Sainte-Odile est un accident aérien ayant eu lieu le 20
janvier 1992 où à la suite d'une mauvaise approche de l'aéroport de Strasbourg, un
Airbus A320-111 de la compagnie française Air Inter s'écrase sur les hauteurs
boisées de La Bloss, près du mont Sainte-Odile, en Alsace (France).
Le crash serait en partie dû à une

mauvaise présentation de l’IHM dans
le cockpit de l’airbus A320 (confusion
entre la vitesse verticale et l’angle de
descente sur le cadran partagé).
Conclusion :
Une interface homme-machine (IHM) de qualité sera celle qui offre à l’utilisateur
les moyens de réaliser ses tâches de façon efficace, en toute sécurité et en
prenant plaisir à le faire.
Les styles
d'interfaces
Interfaces Interfaces Interfaces orientées

orientées textes orientées fenêtres documents
Interfaces orientées fenêtres
I. Les objets visuels de base

✔ Quatre (04) objets visuels de base : Concept "WIMP"
▪ Window (Fenêtre)
▪ Icône
▪ Menu
▪ Pointeur de souris
Le desktop :
Le desktop est représenté par
l'ensemble de la surface
lumineuse de l'écran.
1. Les Fenêtres
Il existe quatre (04) types de fenêtres :
✔ La fenêtre primaire
✔ La fenêtre secondaire
✔ Les boites de dialogue
✔ Les boites de message.
1.1. La fenêtre primaire

✔ Il s'agit de la fenêtre principale de l'application,
✔ C'est une fenêtre déplaçable et redimensionnable.
✔ Elle est placée sur le desktop
✔ C'est la première fenêtre qui s'ouvre dés le lancement de l'application
✔ La taille de la fenêtre primaire est inférieure ou égale à celle du desktop.
1.1.1. Fenêtre primaire standard

Une fenêtre primaire standard possède neuf (09) objets :
1. Une bordure de redimensionnement,
2. Une barre de titre,
3. Un menu système,
4. Barre de menus,
5. Barres de défilement,
6. Région client.
7. Bouton de minimisation,
8. Bouton de maximisation
9. Bouton de fermeture (cas de Windows),
1.1.1. Fenêtre primaire standard

Exemple : Création de fenêtre en java
a. Le menu système
Permet de gérer une fenêtre en utilisant une liste de commande (Menu)
Raccourci de fermeture de la
fenêtre
(Alt + F4) Appuie combinée des
Touches clavier "Alt" et "F4".
1.2. Les fenêtres secondaires

✔ Une application est portée par une et une seule fenêtre primaire.
✔ Une application peut créer une à plusieurs fenêtres secondaires.
✔ La fenêtre secondaire a exactement les mêmes composants que la fenêtre
primaire.
Définition :
✔ Une fenêtre secondaire est une fenêtre portant les mêmes composants que la
fenêtre primaire.
✔ Elle est créée par une application pour des besoins spécifiques.
✔ Elle peut être autonome ou directement liée à la fenêtre primaire.
1.3. Les boites de dialogue

✔ Une boite de dialogue est une fenêtre à travers laquelle l'application communique
ou établit un dialogue avec l'utilisateur.
✔ Une boîte de dialogue comporte, généralement, cinq (05) objets :
▪ Une bordure,
▪ Une barre de titre
▪ Une région client
▪ Bouton fermeture
▪ Menu système

Usages :
✔ afficher une information (message d'erreur, d'avertissement…) ;
✔ demander une validation, une réfutation ou une annulation ;
✔ demander à l'utilisateur de saisir une information dont le système a besoin ;
✔ etc.

✔ Une boite de dialogue peut être modale ou non modale
▪ Une boite de dialogue modale interdit à l'utilisateur d'interagir avec d'autres
fenêtres avant de l'avoir fermée.
▪ La modalité peut être retrouvée au niveau système ou au niveau application :
✔ Au niveau système : Le système bloque la totalité des applications
lancées tant que l'application n'est pas fermée.
✔ Au niveau application : L'application bloque toutes les autres fenêtres
ouvertes tant que la fenêtre n'est pas fermée.
▪ Une boite de dialogue non modale, contrairement à la première, elle offre la

possibilité à l'utilisateur de travailler en parallèle avec plusieurs fenêtres.

Exemples :
Boite de dialogue "Connecter au réseau", non redimensionnable et modale.
1.3. Les boites de message

Une boite de message est une fenêtre qui permet d'afficher
▪ Un conseil,
▪ Une information
▪ Un avertissement.
2. Les Contrôles
Les contrôles classiques : Utilisés dans la
Deux (02) catégories majorité des applications de gestion.
de contrôles
Les contrôles supplémentaires : Utilisés
pour améliorer la lisibilité d'une boite de
dialogue, informer davantage,…etc.
Les contrôles classiques
Les champs statiques, les boutons, les champs d'entrée, les listbox ou boîtes à
listes.
Les contrôles supplémentaires

Le sélecteur rotatif, le curseur gradué, la jauge, la zone sensible, les boutons
personnalisés.
2.1. Les Contrôles classiques
2.1.1. Les champs statiques ou les statiques

Les statiques permettent d'afficher de l'information non accessible à l'utilisateur
(On parle de champs protégés).
Rôle :
✔ Ajouter des titres à la boîte de dialogue, des images, … : Statiques
constants.
✔ Afficher des résultats demandés par l'utilisateur : Statiques variables.
Un statique peut être :
✔ Un cadre avec ou sans titre : Il est utilisé pour regrouper plusieurs objets de
même nature (Boutons radio, case à cocher,…etc.).
✔ Un texte,
✔ Une image
✔ Une figure géométrique
2.1.1. Les champs statiques ou statiques
Statique cadre (avec

titre)
Statique image Statique texte variable
Statique texte courant

2.1.2. Les boutons
Les boutons poussoirs
Ils permettent de lancer
des actions.
Les cases à cocher

Trois (03) types
(interrupteur). Elles fonctionnent
de boutons
indépendamment les unes les autres.
Les boutons radio

Ils permettent de faire un choix et un seul parmi
plusieurs possibles.
Remarque : Un bouton grisé indique son inactivité.

2.1.2. Les boutons
Exemple de boite de dialogue "Insérer objet" présentant les trois types de
boutons.
Bouton poussoir
Case à cocher
Bouton radio

2.1.3. Les champs d'entrée ou champs de saisie ou zone d'édition
✔ Zone permettant de saisir des informations à partir du clavier.
✔ La zone d'édition peut être multi-ligne (multi-line entry field) ou zone
d'édition simple (single-line entry field).
Zone d'édition simple

2.1. Les contrôles classiques

2.1.4. Les listbox ou boîtes à listes
✔ Une listbox permet d'afficher une liste d'éléments.
✔ Il existe quatre (04) types de listbox :
1. Listbox simple,
2. Listbox déroulante,
3. Listbox simple combinée (ou combo-box),
4. Listbox combinée déroulante (ou combo-box déroulante).
a. Listbox simple
✔ Une listbox est dite simple si elle apparaît dans sa totalité dans une
boite de dialogue.
✔ Une listbox peut être :

▪ à sélection unique : Un seul élément peut être sélectionné à la fois.
▪ à sélection multiple : Possibilité de sélectionner plusieurs éléments à la
fois.
b. Listbox déroulante
✔ Une listbox déroulante permet de cacher à l'utilisateur la liste des
éléments. Elle n'affiche que le dernier élément sélectionné.
✔ Elle peut être en position fermée ou position ouverte.
Listes
déroulantes
fermées
c. Combo-box simple
✔ Un combo-box est une superposition d'un champ d'entrée et d'une
listbox.
Champ d'entrée
Listbox
d. Combo-box déroulante
✔ Une combo-box est une combinaison d'un champ d'entrée et d'une
listbox déroulante.
Combo-Box
2.2. Les contrôles supplémentaires

2.2.1. Sélecteur rotatif
Il permet d'éviter à l'utilisateur de saisir une fausse valeur.
Sélecteur rotatif avec

un simple compteur
2.2. Les contrôles supplémentaires

2.2.2. Curseur gradué
Il permet d'indiquer une valeur prise.
2.2.3. La jauge
Elle permet d'afficher l'état d'avancement d'une tâche.
Remarque : Il est possible d'utiliser beaucoup d'autres types de

contrôles dans les boîtes de dialogue.
2.2. Les Contrôles supplémentaires
2.2.4. Autres types contrôles supplémentaires
Le sélecteur rotatif,
Le curseur gradué,
La jauge,
Les boutons personnalisés.

Les interactions avec l'utilisateur
✔ Toute application à interface graphique doit obligatoirement offrir deux
modes d'interaction avec l'utilisateur :
▪ Interaction à partir du clavier.
▪ Interaction à partir de la souris.
✔ En théorie tout action effectuée avec une souris devrait être accessible
avec le clavier et inversement, on parle de dualité clavier-souris.
✔ Objectifs :
▪ Offrir à l'utilisateur plus de liberté (cas de panne du dispositif de souris)
▪ Offrir un moyen de travail rapide (Eviter le passage alterné
souris-clavier en cas de saisie).
Remarque : Actuellement, rare les dispositifs de souris non reconnus par les
système, ainsi la règle précédente n'est pas applicable
systématiquement.
La construction d'IHM
1. Approche IHM
✔ Les méthodes de développement d'IHM suivent le processus global
des méthodes issues du génie-logiciel.
✔ Les approches peuvent être classées en deux catégories :
▪ Méthodes dites classiques
▪ Méthodes agiles
1. Approche IHM
Méthodes cartésiennes
(SADT)
Méthodes systémiques
(MERISE)
Méthodes orientées
objets (OMT, OOSE)
Elles se basent sur le suivi d'un
modèle de processus formalisé.
Cycle de vie d'une application
✔ Le cycle de vie d’une application désigne la période comprise entre le moment

de commande de l’application et le moment de son abandon par l’utilisateur.
✔ Les différentes phases du cycle de vie sont représentées par le schéma suivant :
Présentation
Analyse
Expression
Besoins Spécifications Modèles d’analyse
Client (Maître
Conception
d’ouvrage)
Validation & Programmes Conception

Retour vers l’une des
Exploitation
phases précédentes Tests, Evaluation Implémentation – Mise en œuvre
2.1 – Phase d’expression et de présentation des besoins
✔
Le client (Maître d’ouvrage) exprime les besoins d’une manière plus
ou moins complète : Phase de l’étude de l’existant.
✔ L’informaticien-analyste procède à la transcription des spécifications
✔ Le cycle de de
vielad’une
future application,
application en utilisant
désigne des outils
la période appropriés.
comprise entre le moment
de commande de l’application
✔ Dossier et le moment
de spécifications de son abandon
: Déterminer par l’utilisateur.
la faisabilité des
✔ Les différentes phases du cycle de vie sont représentées par le schéma
besoins.
suivant :
Présentation
Expression Analyse
Client (Maître
Conception
d’ouvrage)
Validation &
Programmes Conception
Exploitation
2.2 – Phase d’analyse
Cyclecle
Cycle de de application
vie d'une vies
Objectif : Construction d’un modèle du monde réel (le modèle d’analyse)
qui met en évidence les propriétés importantes du problème.
✔ Le modèle d’analyse est une abstraction précise et concise du but de
✔ Le cycle de vie d’une application désigne la période comprise entre le moment de
l’application et non de la façon dont elle sera bâtie.
commande de l’application et le moment de son abandon par l’utilisateur.
✔ Les ✔
différentes phases
Les objets du cycle
du modèle de vie sont
d’analyse représentées
doivent par le schéma
être les concepts suivant
du domaine
: de l’application et non des objets informatiques.
Présentation
Expression Analyse
Client (Maître
d’ouvrage)
Conception

Exploitation
III – Programmes
2.2 – Phase d’analyse
et vie
Cycle de Interfaces Homme-Machine
d'une application
Le modèle d’analyse doit permettre :
✔ de structurer les idées (Comprendre le problème).
✔ de simuler le fonctionnement du monde réel (maîtriser la complexité).
✔✔ d’introduire
Le cycle delavie d’une
phase deapplication
conception désigne la période
(trace des décisionscomprise entre le
de spécifications).
moment de commande de l’application et le moment de son abandon par
✔ de communiquer avec le client pour valider les spécifications (Accord sur le
l’utilisateur.
quoi?).
✔ Les différentes phases du cycle de vie sont représentées par le schéma suivant
✔ de :
communiquer entre informaticiens (Equipe d’analyse et de développement).
Il s’agit d’un modèle de comportement du système à réaliser.
Présentation
Expression Analyse
Client (Maître
Conception
d’ouvrage)

Exploitation
2.3 – Phase de conception
LeIIIsystème
– Programmes
est découpé en sous
Cycle et Interfaces
systèmes
de vieproposée Homme-Machine
ou modèles
d'unepour
techniques fondés sur le
application
modèle d’analyse et sur l’architecture le logiciel.
Elle fournit un support à l’implémentation physique du système.
Elle traduit la solution dans une architecture réalisable en terme de domaines
techniques:
✔ Le cycle de vie d’une application désigne la période comprise entre le
✔ Domaines
moment applicatifs (Fonctions
de commande réalisées par
de l’application etl’application)
le moment de son abandon par
✔ Domaines de services (IHM, Gestion des impressions, droits d’accès,…)
l’utilisateur.
✔ ✔ Domaines d’architecture
Les différentes phases(Mécanismes et composants
du cycle de vie réutilisables
sont représentées : Structure
par le schéma de
suivant
données)
:
✔ Domaine d’implémentation (Système d’exploitation, langage de programmation,…)
Présentation
Expression Analyse
Client (Maître
Conception
d’ouvrage)

Exploitation
2.4 – Phase d’implémentation
✔ Elle concerne l’écriture des programmes : Traitements et IHM dans les
✔ Le cycle de vie d’une
langages application désigne
de programmation la période
déterminés comprise
lors de entre
la phase de le moment
de commande de l’application et le moment de son abandon par l’utilisateur.
conception.
✔ Les✔différentes
Mise en phases
place dedulacycle de vie sontsur
communication représentées
le réseau. par le schéma
suivant :
Présentation
Expressio Analyse
n
Client (Maître
d’ouvrage) Conception

Exploitation
2.5 – Phase de tests et de validation
Elle permet
✔ de valider le fonctionnement des traitement en vérifiant l’exactitude des
✔ Le cycle de vie d’une application désigne la période comprise entre le
résultats.
moment de commande de l’application et le moment de son abandon par
✔ l’utilisateur.
de valider avec l’utilisateur la logique de l’application au travers de son IHM.
✔EnLes
fonctions des remarques
différentes de l’utilisateur,
phases du cycle de vie sont différentes corrections
représentées peuventsuivant
par le schéma être
effectuées
: (Alpha-tests : tests du programmeur sans l’utilisateur. Béta-tests :
tests de l’utilisateur).
Présentation
Expressio Analyse
n
Besoins Spécification Modèles d’analyse
s
Client (Maître
Conception
d’ouvrage)

Exploitation
1. Approche IHM
Méthodes cartésiennes
(SADT)
eXtreme Programming (XP),
Scrum, … Méthodes systémiques
(MERISE)
✔ En novembre 2001, publication
du manifeste du développement Méthodes orientées
logiciel agile. objets (OMT, OOSE)
✔ Le manifeste regroupe 04 Elles se basent sur le suivi d'un
valeurs et 12 principes associés. modèle de processus formalisé.
1. Approche IHM
Méthodes agiles
Valeur 1 : Aspect humain et communicatif avec la mise en avant de

l'interaction entre les personnes plutôt que les processus et les
outils.
Valeur 2 : La livraison d'un produit opérationnel est la priorité vis-
à-vis d'une documentation parfois, excessive.
Valeur 3 : La collaboration avec le client – Elle est devenue
primordiale et ne doit pas se restreindre à une simple
négociation de contrat.
Valeur 4 : Réactivité face au changement. Elle est préférée au suivi
strict d'un processus qui ne mène parfois, pas à la réponse
aux demandes du client.
1. Approche IHM
1.1. Méthodes de conception d'IHM
✔ Les méthodes de génie-logiciel (GL) restent insuffisante en
conception IHM.
✔ L'implication de l'utilisateur reste marginale.
Deux critères méthodologiques de construction des IHM
✔ Degré d'implication de l'utilisateur.
✔ Moment de l'implication de l'utilisateur.
Constats :
✔ Les utilisateurs sont consultés en général, d'une manière discontinue
et modérée.
✔ Deux moments importants sont choisis :
▪ Le début du développement
▪ La fin du développement
Caractérisation des méthodes selon l'implication des utilisateurs
(Degré et moment)
Source : Gaëlle CALVARY – "Ingénierie de l'Interaction Homme-Machine : Rétrospective et Perspectives" - URL:http://iihm.imag.fr

1. Approche IHM
1.2. Méthodes centrées utilisateur
Principes :
✔ L'analyse de l'activité est menée sur le terrain.
✔ Modélisation de l'utilisateur (Données informelles, questionnaires,

discussions, etc.)
✔ Modélisation de la tâche et des concepts du domaine. La participation

de l'utilisateur est très importante.
✔ Une modélisation des concepts informatiques :

▪ Projeter le domaine fonctionnel en termes informatique.
▪ La modélisation associe les opérations aux tâches et les objets
informatiques aux concepts du domaine.
1. Approche IHM
Principes :
✔ Modélisation de l'interaction :
▪ La modélisation concerne les tâches élémentaires
▪ Décrire les interface au moyen d'objet – action disponibles dans

l'environnement d'accueil.
✔ Processus de développement itératif : Approche itérative à base de

maquettage et de prototypage.
1. Approche IHM
Conception participative
✔ Ces approches impliquent l'utilisateur tout au long du processus de
développement.
✔ Elle présente un double intérêt :
▪ Détecter au plus vite d'éventuelles anomalies.
▪ Forcer l'adhésion des utilisateur (Réduire la résistance au
changement).
Modèles d'utilisateurs
Modèle du processeur humain
✔ L'individu est considéré comme un processeur de traitement de l'information
✔ Il est régi par des règles
✔ Le processeur humain comprend trois sous systèmes interdépendants :
▪ Le système sensoriel
▪ Le système cognitif
▪ Le système moteur
✔ Chacun des sous-systèmes est doté d'une mémoire et d'un processeur.
Paramètres de base d'une mémoire :

▪ Capacité : Le nombre d'éléments informationnels mémorisés. Elle est notée μ ou m.
▪ Persistance : Temps au bout duquel un élément d'information est retrouvée (Il est
estimé acceptable s'il est inférieur à 0.5 seconde). Elle est notée δ ou d.
▪ Type d'information mémorisée : Physique, symbolique. Il est noté κ ou k.

✔ Pour tout processeur le paramètre de base est le cycle d'accès (T ou t) à sa mémoire
locale.
Modèle du processeur humain
✔ Le traitement des informations nécessite un moyen de stockage.
✔ Le stockage des information se fait par l'action de mémorisation.
✔ La mémorisation consiste à fixer une information dans la mémoire.
✔ La restitution de l'information se fera au moment voulu afin de prendre une décision.
Principales mémoires humaines :

✔ Mémoire à court terme
✔ Mémoire à long terme
Mémoire à court terme (MCT) :

✔ C'est la mémoire de travail.
✔ Elle traite l'information à l'instant présent.
✔ Elle est caractérisée par un oublie très rapide.
✔ Elle possède une capacité de stockage limitée.
✔ Elle est très sensible aux distractions : La concentration diminue, d'où la difficulté de
mémorisation.
Mémoire à long terme (MLT) :
✔ La MLT est caractérisée par un oublie progressif si l'information n'est pas revue.
✔ Elle classe et organise les informations, les connaissances, les souvenirs,…etc.
✔ Elle est une mémoire de stockage illimitée.
✔ Il est recommandé de l'entretenir pour la pérenniser.
La mémorisation se fait par le transfert de

l'information de la mémoire à court terme vers
la mémoire à long terme.
Le système cognitif
✔ Le système cognitif peut être considéré comme un système de traitement des

informations. Elle passerait par trois stades successifs :
▪ la mémoire sensorielle,
▪ la mémoire à court terme,
▪ la mémoire à long terme.
✔ Le passage de la mémoire à court terme à la mémoire à long terme n'est pas

systématique. Ce processus s'opère :
▪ soit si l'encodage est approfondi (visualisation, hiérarchisation),
▪ soit si l'information est répétée,
▪ soit si elle a une valeur affective importante pour le sujet.
✔ Le passage de la mémoire à court terme à la mémoire à long terme s'appelle la

consolidation. Elle est fortement dépendante des interférences.
✔ Modèle d'Atkinson et Shiffrin (1968)
▪ Le stimulus est capté par les

organes des sens dans le
registre sensoriel.
▪ Les informations sont
transférées dans la mémoire
à court terme.
▪ Les informations sont
perdues, si elles ne sont pas
transférées dans la mémoire
à long terme.
✔ Modèle du processeur humain (Jacko et Sears – 2002)
μ : Capacité
δ : Persistance
κ : Type d'info.
✔ Modèle du processeur humain (Jacko et Sears – 2002)
Conséquences :
▪ Taux de mémorisation (7 items) : Limiter le nombre d'item par menu à 7.
▪ Regroupement des unités informationnelles par motif visuel : Etablir les liens
entre les éléments (couleurs, format, …)
▪ La recherche d'information se fait d'une manière séquentielle : Ecrire des
messages concis.
▪ L'oubli de la mémoire à court terme est de l’ordre de 15 à 30 secondes : Ne pas
présenter d’informations inutiles.
Le pointage de souris
1. Les interfaces WIMP (Windows, Icons, Menus, Pointing)

✔ Principal modèle d'interface interactive proposée actuellement
✔ Les interfaces WIMP ont été imaginées et développées au Xerox PARC en
1973.
✔ Elles ont été popularisée avec le Macintosh (Apple) en 1984.
2. La vitesse de pointage
L'usage de la souris se fait selon la procédure suivante :
✔ repérage de la cible
✔ déplacement de la souris au dessus de la cible
✔ clic sur la cible
La cible pouvant être une icône, un élément d’un menu, une partie d’une fenêtre.
Le pointage de souris
✔ L'évaluation des performances motrices humaines lors d’une tâche d’acquisition

de cible sont basés sur la loi de Fitts.
✔ La loi de Fitts énonce que le temps du mouvement T requis pour sélectionner
une cible de taille L située à une distance D est :
T = 0.1 log 2 (D/L)
✔ Le temps t (en seconde) de pointage d'une cible de taille L à une distance D est
proportionnel au logarithme de 2D/L.
✔ le temps de pointage est plus long si la cible est plus éloignée ou si elle est plus
petite.
Utilisation de la loi de Fitts
✔ Augmenter la taille des objets pointables.
✔ Réduire la distance.
Résumé :
Modéliser l'utilisateur
Modélisation de l'interaction Modéliser la tâche

Homme-machine
Modéliser l'application
Résumé :
Le modèle du processeur humain vise à représenter l’être humain par une analogie
avec l’ordinateur.
Issu de la psychologie cognitive, le modèle du processeur humain permet d'évaluer

l'utilisabilité d'un produit.
Il existe différentes types de mémoires :
✔ La mémoire sensorielle (stimulus auditif) et iconique (stimulus visuel) : permet

de percevoir l’information ;
✔ La mémoire à Court Terme (MCT) ou appelé également Mémoire de Travail
(MT) : Elle permet de manipuler et de stocker l’information à court terme ;
✔ La mémoire à long terme (MLT) permet d’encoder, stocker et récupérer
l’information (reconnaissance et rappel).
Modèle d'Atkinson et Shiffrin
Résumé :
Système sensoriel : C'est un ensemble des sous-systèmes spécialisés chacun
dans le traitement d’une classe de stimuli où chaque
sous-système dispose d’une mémoire spécifique dite mémoire
sensorielle et d’un mécanisme de traitement intégré
(processeur).
Système cognitif : Il contrôle le comportement de l'individu en fonction du contenu

de sa mémoire (la mémoire à court terme et la mémoire à long
terme).
Système moteur : Le système moteur est responsable des mouvements lors d’une
interaction homme-machine, où ces mouvements représentent
les manipulations des claviers, écrans et des dispositifs de
désignation, un mouvement n'est pas continu mais il est
constitué d'une suite de micromouvements discrets dont chaque
micromouvement s'accomplit en moyenne en 70 ms.
Modèles de tâches
Introduction
Objectif des IHM : Assurer la communication entre l'homme et la machine
de manière :
▪ Simple
▪ Intuitive
▪ Efficace
✔ La communication se fait via une interface :
▪ Nécessité d'étudier et d'analyser le comportement de l'utilisateur lors
de l'exécution de la tache.
▪ Quelles sont les tâches effectuées ?

▪ Comment sont effectuées ces tâches ?
Modélisation des tâches

Modèles de tâches
Exemple : Rédiger une lettre
But : Produire une lettre
Editer une Imprimer une

lettre lettre
Saisir le ……. Modifier le

texte texte
Déplacer Sélectionne …….

le curseur r le texte
Les tâches sont décomposées en tâches plus simples conduisant à des

actions. (J. Preece, 1994)
Modèles de tâches
Terminologie
But : Etat à atteindre
Dispositif : Méthodes outils ou techniques pour atteindre les buts

Tâches : Activités nécessaires pour atteindre les buts à l'aide de dispositifs.
Une tâche est définie par :
▪ Un but (Etat souhaité)
▪ Une procédure pour atteindre le but.
Sous-tâches : Composantes des tâches

Procédure : Ensemble de sous-tâches liées par des relations de
composition et des relations temporelles.
Actions : Tâches simples dépourvues de structure de contrôle.
Il s'agit d'une opération sur un dispositif d'E/S qui provoque un
changement d'état du dispositif (Clic, mouvement, affichage, etc.)
Tâche élémentaire : C'est une tâche décomposable en actions physiques.
Modèles de tâches
Exemple : Rédiger une lettre
Produire une lettre Définir le but à atteindre
Manuel PC Machine à ……. Choix du dispositif

écrire
Déterminer les tâches à

Allumer le PC
réaliser
Lancer le Créer un Saisir la Modifier

Trait. Txt fichier lettre la lettre
Sélectionner Supprimer
le texte le texte …….
Les modèles de tâches sont des structures arborescentes dont les nœuds sont des
buts et les sous arbres sont les procédures pour atteindre les buts.
Modèles de tâches
Théorie de l'action
1. Modèle de tâches
✔ Les modèles de tâches sont des descriptions logiques des activités à

réaliser pour atteindre les objectifs des utilisateurs(*).
✔ Le modèle de tâches permet de concevoir, analyser et évaluer les

applications logicielles interactives.
✔ Un modèle de tâches décrit comment réaliser les activités afin

d'atteindre les objectifs des utilisateurs, relatifs aux interactions avec
l'application.
(*)
Fabio Paterno (2001), "Task models in Interactive software systems.
Modèles de tâches
2. Théorie de l'action de Norman
✔ Le but de la théorie est d'obtenir une représentation mentale de l'état à
atteindre.
✔ L'objectif est de comprendre comment un usager d'un système exécute
une action.
✔ Finalité : Possibilité d'analyser les différentes étapes nécessaires pour
atteindre le but.
But
Action qu'on veut effectuer
Exécution Evaluation
Action exécutée sur Comparaison de l'effet de
l'environnement l'action avec l'objectif
Résultat
Modèles de tâches
2. Théorie de l'action de Norman
✔ La théorie de l'action décrit la psychologie d'une personne réalisant une
tâche.
✔ Donald Norman émet sept (07) étapes pour l'accomplissement d'une
tâche :
▪ Etablissement du but
▪ Formation d'une intention
▪ Spécification d'une suite d'actions
▪ Exécution des actions
▪ Perception de l'état du système
▪ Interprétation de l'état du système
▪ Evaluation de l'état par rapport au but fixé.
✔ Les différentes étapes sont réparties en deux phases :

▪ La phase d'exécution
▪ La phase d'évaluation
2. Théorie de l'action de D. Norman
2.1. La phase d'exécution
✔ La phase d'exécution a pour finalité de réaliser quelque chose, voir un
produit fini.
Exemple : Une personne lisant un livre au crépuscule : Elle a besoin de

plus de lumière.
But : Allumer le lumière
Intention : Déclencher l'interrupteur.
Spécifications (Comment ?)
▪ Mouvoir le corps
▪ Atteindre l'interrupteur
▪ Actionner l'interrupteur.
Nécessité d'exécuter l'ensemble des actions pour allumer effectivement

la lumière.
2.1. La phase d'exécution
✔ Principe
▪ Le but est transformé en intention
▪ L'intention est transformée en spécification
▪ Les spécifications constituent une séquence d'actions
La séquence d'actions constitue un tout indissociable : Rien ne se passe

tant que l'ensemble des actions ne sont pas entièrement exécutées.
Résumé : La phase d'exécution est définie par :
▪ Définir le but (Etat final à atteindre)
▪ Traduire le but en intention d'agir (Faire quelque chose)
▪ Expliciter l'intention par un ensemble d'actions à réaliser pour
satisfaire l'intention.
▪ Exécuter entièrement la séquence d'actions.
2.2. La phase d'évaluation
✔ La phase d'évaluation consiste à examiner le résultat issu de l'exécution
des spécifications, puis de déterminer le niveau de satisfaction du but.
✔ Formellement, l'évaluation signifie examiner et calculer.
Exemple : Allumer la lumière

▪ Une fois l'interrupteur activé, vérifier si réellement la lumière est
allumée.
▪ Vérifier la qualité de la lumière.
▪ Evaluer le taux de satisfaction du but (La personne lit-elle à son aise ?)
Résumé : La phase d'évaluation est définie par :

▪ L'évaluation commence avec la perception de l'environnement.
▪ La perception doit être interprétée selon les attentes
▪ Comparer la perception par rapport au but.
2.3. Schéma récapitulatif (Théorie de l'action de Norman)
Les 7 étapes de la théorie de l'action selon D. Norman

2.4. Notion de gouffre : Distance d'exécution et distance d'évaluation
✔ La notion de gouffre représente les différences entre les intentions de l'utilisateur
et les actions permises.
✔ On distingue deux type de gouffres :
▪ Le gouffre d'exécution.
▪ Le gouffre d'évaluation.
✔ L'utilisateur modélise le monde en

termes de variables
psychologiques (cf. Théorie de
l'action).
✔ Le monde réel se manifeste en

termes de variables physiques.
✔ Le gouffre représente la différence

entre la façon dont le système
fonctionne et les expériences des
usagers.
2.4.1. Gouffre d'exécution

✔ Le gouffre d'exécution, encore appelé distance d'exécution, est l'effort
nécessaire pour transformer les intentions, ainsi que pour sélectionner et
exécuter les commandes.
✔ Le gouffre d'exécution est la distance entre les buts de l'utilisateur et la forme

d'actions d'entrée.
✔ Le gouffre d’exécution désigne la distance mentale que l'utilisateur doit

parcourir pour passer de ses intentions à l’exécution des actions, en tenant
compte des propriétés des dispositifs physiques mis à sa disposition, à travers
l’IHM, pour modifier l’état du système.
2.4.2. Gouffre d'évaluation

✔ Le gouffre de l’évaluation définit le parcours inverse du gouffre d'exécution..
✔ Le gouffre d'évaluation modélise les informations internes du système

traversant l’interface de sortie du procédé en subissant des transformations
pour aboutir à une présentation perceptible par l'utilisateur grâce à l’IHM.
✔ Est-ce que le retour de l’information peut être interprété de la même manière

que les intentions? Le gouffre de l’évaluation est l’effort nécessaire pour
interpréter la rétroaction (feedback).
✔ Un bon système donne une rétroaction facilement comprise par les

utilisateurs.
✔ Un mauvais système ne donnera pas de rétroaction ou son interprétation sera

difficile
2.4.3. Réduire le gouffre d'exécution

La réduction du gouffre d'exécution peut se faire selon trois actions :
✔ Améliorer le "mapping" entre intention et sélection
Exemple : Suppression du fichier
- Drag and drop (Fichier vers la poubelle)

- Utiliser la commande de suppression., etc.
✔ "Visual affordance" des éléments d'interaction (capacité à suggérer leur

fonction).
- Nature des éléments de l'interface (ex. Scroll bar, sablier, etc.)
✔ Feedback proactif des éléments d'interaction.

- Indication à l'utilisateur l'état de fonctionnement du système (indication
visuelle. ex : barre de progression, bouton grisé, etc.)
2.5. Distance sémantique et distance articulatoire
Exemple : Cas d'une application d'apprentissage (e-Learning)
✔ L’interface s’intercale entre l’apprenant, subjectif, et une application
numérique formelle, objective.
✔ Elle doit, particulièrement en matière de e-learning, ne pas constituer

d’obstacles à la progression de l'apprentissage :
▪ L’effort attendu est lié à l’apprentissage d’un savoir ou d’un savoir-faire
déterminé, pas à la maîtrise et la conduite de l'interface.
Constat : Les bénéficiaires de la formation n’ont pas tous la même
dextérité, les mêmes référentiels, la même aisance avec la
technologie.
Problématique : Comment être sûr que l’échec à une activité
pédagogique est lié à un manque de concentration ou de
sérieux, plutôt qu’à la difficulté de comprendre là où il fallait
cliquer, quand et comment ?
✔ Application de la théorie de l'action de Norman : l’apprenant doit
communiquer avec le logiciel en trois étapes :
1. d’abord une intention (je veux faire telle chose),

2. ensuite une planification (pour cela je dois ouvrir tel onglet, et
cliquer sur tel bouton),
3. enfin l’action (la réalisation physique de ces actes) :
✔ En retour :
1. le logiciel (l’application) renvoie à l’apprenant un signal pour
l’informer de son traitement.
2. Il enregistre (perçoit) les ordres, les interprète
3. puis les formule.
Norman a classé ces phases deux à deux, et introduit la notion de distance
sémantique et de distance articulatoire.
2.5.1. distance sémantique

La distance sémantique est la différence entre le niveau
d’abstraction offert par le langage d’interface et le niveau de
conceptualisation de la tâche par l’utilisateur (ex. apprenant).
2.5.2. Distance articulatoire

La distance articulatoire est l’effort nécessaire à l’élaboration de la
relation entre la signification de l’expression échangée avec le
système et sa forme.
2.5.1. Réduire la distance articulatoire
✔ La réduction de distance articulatoire vise à épargner l’effort de
planification dans l’élaboration des commandes ou dans l’interprétation
des résultats.
✔ réduire la distance articulatoire consiste, par exemple, à permettre à
l’usager d’exprimer par un seul geste, quelque chose qui lui aurait
demandé plusieurs gestes autrement).
Exemple : Impression d'une page de traitement de texte
3. Modélisation de la tâche
✔ La modélisation de la tâche permet de décrire la manière d'utiliser un

système afin qu'un utilisateur puisse atteindre un but donné.
✔ La tâche est décrite sous forme d'une succession de commandes
offertes par le système (séquences, parallélisme, synchronisation).
✔ De nombreux formalismes ont été développés afin de décrire les tâches
à effectuer pour effectuer un travail (atteindre un but). On cite
▪ CTT (Travaux de Paterno)
▪ MAD (Travaux de Scapin)
▪ UAN
▪ GOMS
3.1. Modélisation de Scapin – MAD (Méthode analytique de
Description) et HTA (Hierarchical Task Analysis)
Planification hiérarchique
✔ Description de la tâche est guidée par les buts
✔ La méthode convient aux tâches planifiées et procédurales.
✔ Le principe consiste à recenser à partir du but, l'ensemble des
sous-tâches d'une tâche, jusqu'au niveau des actions.
But
But 1 But 2 But 3
Tâche 1.1 Tâche 1. 2 Tâche 1.3

......................
S/Tâche 1.2.1 S/Tâche 1.2.2 S/Tâche 1.2.3
Action 1.2.2.1 Action 1.2.2.2 Tâche 1.2.2.3

3.2. Identification de tâches
✔ L'identification d'une tâche consiste à :
▪ Identifier l’objectif que cherche à atteindre l’utilisateur lorsqu’il se sert du
système et
▪ identifier les informations dont il a besoin.
✔ La connaissance de la tâche permet de structurer l’interface selon le
point de vue de l’utilisateur.
Les types de tâches
✔ Tâches prescrites (prévues) : Elles sont recueillies par interviews. Ce

sont des tâches recommandées ou standards.
✔ Tâches effectives : Recueillies par l'observation des utilisateurs.
3.2. Identification de tâches
Démarche de recueil des besoins

✔ Pour analyser le besoin des utilisateurs, on procède généralement en
deux étapes :
▪ Des interviews et des entretiens qui permettent d’identifier la tâche
prévue (ce qui doit être fait);
▪ Cette analyse est ensuite, consolidée par l’observation des
utilisateurs afin de comprendre l’activité effectivement réalisée.
✔ Les résultats issus du recueil des besoins sont consignés sous la forme
d’un graphe appelé modèle de tâche.
Notations Séquence
Tâche
Alternative Suite non ordonnée
Alternative non stricte

Boucle
Exemple : Manger des crêpes
Exemple : Suite non-ordonnée (Acheter les ingrédients)
Exemple : Alternative (Mélanger la farine dans le lait)
Exemple : Alternative non stricte (Faire cuire la pâte)
Exemple : Boucle (Faire cuire la crêpe)
Exercice : Modéliser l'ensemble des tâches permettant de représenter les

actions définissant le but "Manger les crêpes"
Rappel : Méthode de modélisation de tâches
✔ Plusieurs méthodes sont proposées pour modéliser les tâches.
✔ Les méthodes les plus utilisées sont SADT basée sur les réseaux de
pétri et MAD (Méthode Analytique de Description de tâches), qui
propose une description des tâches facilement maîtrisable.
La méthode MAD
✔ La méthode MAD est issue des travaux de SCAPIN et
PIERRET-GOLBREICH à l'INRIA (France).
✔ MAD vise la description des tâches humaines dans le but d'une
meilleure prise en compte de l'ergonomie dans la conception d'IHM.
✔ MAD a introduit trois concepts :
▪ La tâche
▪ La tâche élémentaire
▪ La tâche composée.
3. Modélisation de la tâche – La méthode MAD
La tâche :
✔ Elle est représentée par un objet générique appelé objet-tâche.
✔ Une tâche est définie par (Scapin, 2001) :
▪ Un état initial (I) : sous-ensemble de l'état du monde de l'application,
constitué de la liste des objets et arguments d'entrée de la tâche ;
▪ Un état final (F) : sous-ensemble de l'état du monde de l'application,
constitué de la liste des objets et arguments de sortie de la tâche ;
▪ Un but (B) : sous-ensemble de l'état final indiquant explicitement le
but recherché dans l'exécution de la tâche ;
▪ Des préconditions (C.N) : ensemble de prédicats exprimant les
contraintes qui doivent être satisfaites par l'état initial pour le
déclenchement de l'exécution de la tâche ;
▪ Des post-conditions (P.C) : ensemble de prédicats exprimant les
contraintes qui doivent être satisfaites par l'état final, après
l'exécution de la tâche.
La tâche :
✔ L'objet tâche est la racine de deux sous classes :
▪ La classe tâche élémentaire (tâche indécomposable)
▪ La classe tâche composée : Tâche dont le niveau opérationnel est
défini par une structure décrivant le corps de la tâche.
✔ La structure du niveau opération définie la procédure – L'agencement
des tâches est complétées par les arguments d'agencement.
✔ Le formalisme s’appuie sur une décomposition hiérarchique des tâches
reliées par des constructeurs (Argument d'agencement).
✔ Les arguments d'agencement définissent le comportement de la tâche
lors de son exécution.
✔ Les types d'argument d'agencement :
▪ SEQ : Tâche séquentielle
▪ PAR : Tâche parallèle
▪ ALT : Tâche alternative
▪ BOUCLE : Tâche itérative
▪ FAC : Tâche facultative
▪ SIM : Tâches simultanées
▪ PRIOR tâche prioritaire.
✔ Exemple : Modélisation des tâche d'un contrôle aérien
▪ Tâche : Gérer la position
▪ Etat initial : Environnement contrôlé
▪ Etat final : Position contrôlée en toute sécurité
▪ But : En fonction de la charge de trafic, gérer au mieux les positions
de contrôle.
▪ Précondition : -
▪ Post-condition : Gérer les priorités.
La tâche :
✔ Exemple : Modélisation des tâche d'un contrôle aérien (HTA)
5.1
SEQ
Recueil d'informations
5 5.2.1
SEQ
Gérer la position 5.2 Prévenir
Prendre une décision
5.2.2
ALT 5.3 Restructure le secteur
Ne rien faire - Boucler

sur gérer la position
5.4
Restructurer le secteur
3.3. Arbre des tâches
✔ L'arbre des tâches est un arbre dont les sommets représentent
l'ensemble des tâches, sous-tâches et actions d'une activité et les arcs
représentent le les liens père-fils ou mère-fille.
✔ L'arbre des tâches décrit le but
et la procédure nécessaire pour
l'atteindre tout en modélisant la
nature des liens entre sommets
fils pour l'exécution effective
d'une tâche.
✔ L'arbre des tâches est utilisé

pour décrire le protocole
d'expérimentation.
3.3.1. Principe
✔ Une tâche peut être décomposée en sous-tâches
✔ La sous-tâche peut être décomposée en actions.
✔ L'ensemble des sous-tâches correspond à la procédure associée à la
tâche.
✔ La tâche, sous-tache ou action est représenté par un sommet.
✔ Tout sommet doit être nommé avec un verbe d'action qui correspond
au but de la tâche. Exemple : Tracer une courbe,…
T0
Pour atteindre le but T , il faut
0
effectuer la procédure composée
des tâches T , T et T .
1 2 3
T T2 T3
1
3.3.1. Principe
✔ Un arbre de tâches doit être lu :

▪ de gauche à droite : déroulement globalement chronologique des
tâches (dans l'exemple : T , T puis T )
1 2 3
▪ de haut en bas : description de plus en plus détaillée de la tâche
(dans l'exemple : T est constitué de T , T et T )
0 1 2 3
3.3.2. formalisme pour les arbres de tâches
La différentiation entre sous-tâche et action se fait par l'adjonction d'une
couleur de fond pour les actions (exemple le bleu ciel).
T0
T0 est la tâche générale (But)
T3 est une sous-tâche
T T2 T3 T1 et T2 sont des actions
1
✔ La nature de la tâche peut être signifiée par le type de son trait de
contour et sa couleur.
Exemple :
▪ Simple trait : tâches indiquées dans le fascicule
▪ Pointillé long : tâches non indiquées dans le fascicule et dont la
conception est explicitement demandée par le scénario
▪ Pointillé fin : tâches non indiquées dans le fascicule et dont la
conception n'est pas explicitement demandée par le scénario
T0 Pour atteindre le but T , il faudra

0
effectuer T (donnée dans le
1
protocole), et d'autres tâches T
2
T T2 T3
1 et T à définir.
3
✔ Le type de l'action peut être indiqué à l'intérieur du cadre de l'action avec

le code particulier, tels que :
▪ mo = mise en œuvre
▪ a = acquisition
▪ c = contrôle
▪ t = traitement
Exemple :
T0
Pour atteindre le but T , il faut
effectuer une action de0mise en
œuvre + une action de traitement +
une sous-tâche
Tmo1 Tt2 T3
3.3.3. Opérateurs structurels et temporels des arbres de tâches
(optionnels)
a. Opérateurs structurels
✔ ET (opérateur par défaut) placé entre 2 tâches :

indique que pour effectuer la tâche mère, il faut effectuer les des 2
tâches autour du "ET"
T0 Pour atteindre le but T0, il faut
effectuer T1 et T2 (dans un ordre
ET non précisé).
T T2
1
(optionnels)
✔ OU placé entre 2 tâches :

indique que pour effectuer la tâche mère, il faut effectuer une seule
des 2 tâches autour du "OU" (ou exclusif)
effectuer T1 ou effectuer T2.
OU
T T2
1
(optionnels)
✔ * (étoile) placée au niveau d'une tâche :

indique que cette tâche est itérative (peut être effectuée plusieurs fois).
On peut indiquer le nombre de fois par un nombre.
T0
Pour atteindre le but T0, il faut
effectuer 3 fois T1 et une fois T2.
*3 T2
T
1
(optionnels)
✔ opt placée au niveau d'une tâche :

indique que cette tâche est optionnelle.
T0
Pour atteindre le but T0, il faut
effectuer éventuellement T1 et
effectuerT2.
opt
T T2
1
(optionnels)
✔ Remarque : Les différents opérateurs peuvent être combinés pour

exprimer d'autres aspect de la procédure.
T0 * Pour atteindre le but T0, il

faut effectuer T1 ou T2
OU éventuellement, plusieurs
fois
T T2
1
(optionnels)
b. Opérateurs temporels
✔ ; (point virgule) placé entre deux tâches

indique que la tâche de droite est subséquente à la tâche de gauche. C'est
l'opérateur le plus fréquent et qui conditionne la chronologie de gauche à
droite dans l'arbre des tâches.
T0 Pour atteindre le but T0, il

faut effectuer T1 puis T2 (Le
; ET est implicite)
T T2
1
(optionnels)
b. Opérateurs temporels
✔ <> (symboles inférieur et supérieur) placé entre deux tâches :

Indique que les 2 tâches sont entrelacées : elles doivent être menées
de front pour atteindre le but.

effectuer T1 et T2 au même
<> temps (Le ET est implicite)
T T2
1
c. Exemple
L’organisation générale des tâches du problème est décomposé en 4 sous
tâches principales, qui peuvent à leur tour être découpées jusqu’à un
niveau d’actions élémentaires.
4. Démarche de conception des IHM
Introduction : Règles générale de développement d'interfaces

✔ Séparer la conception de l’application de la conception de l'interface :
▪ Prendre en compte les utilisateurs
▪ Concevoir de manière itérative
▪ Utiliser une équipe pluridisciplinaire
✔ Architecture globale du système projeté
▪ Séparation de l'IHM du noyau fonctionnelle
Composant Noyau fonctionnel de

d'interaction l'application
✔ Une démarche constitue l'approche suivi par le concepteur pour

concevoir le système projeté.
✔ La démarche définie les différentes étapes suivi par le concepteur pour

modéliser l'architecture globale du système projeté.
✔ La démarche de conception d'IHM est inspiré de la démarche de

Génie-Logiciel.
✔ La démarche globale est définie en trois phases classiques :
▪ Phase de conception
▪ Phase de réalisation
▪ Phase de validation
Phase de conception (spécifications)
✔ Analyse préalable
✔ Définition des interfaces
✔ Elaborer les scénarios
✔ Elaborer un plan de test
Phase de réalisation
Programmation
Phase de validation
✔ Tests unitaires
✔ Tests d'intégration
✔ Tests de validation
(Utilisation)
1. Analyse préalable
✔ L'analyse préalable a pour vocation d'étudier les spécifications des performances

d'usage.
✔ Pendant l'analyse préalable, il faut :
▪ Définir les objectifs du système : spécifier qualitativement et

quantitativement les performances d'usage.
▪ Analyser les tâches et activités de l'utilisateur.
▪ Identifier les caractéristiques de l'utilisateur.

2. Spécifications des besoins
✔ La spécification décrit ce que doit faire le système (Elle répond à la question :

QUOI) et les contraintes sous lesquelles, il doit opérer.
✔ L'ingénierie de la spécification consiste à décrire la communication entre le client
et le concepteur du système.
✔ L'étape de spécification abouti à la rédaction d'un cahier de charges du
nouveau système.
2.1. Etude des spécifications selon le modèle de SEEHEIM

✔ Le modèle de SEEHEIM est issu des travaux du groupe de travail SIGGRAPH,
1985.
✔ En 1983, une des principales préoccupations était le remplacement des

interfaces Homme-machine textuelles par des interfaces graphiques.
✔ Le modèle de Seeheim proposait une organisation du logiciel qui permettait de

modifier les interfaces sans modifier les noyaux fonctionnels.
2. Spécifications des besoins

✔ Le modèle de SEEHEIM est issu des travaux du groupe de travail SIGGRAPH,
1985.
✔ Le modèle de spécification décrit le modèle de développement d'interfaces selon
trois niveaux :
▪ Spécifications sémantiques
▪ Spécifications syntaxiques
▪ Spécifications lexicales
Ordre de réalisation de l'interface
Interface de Contrôle du
Présentation
l'application dialogue
(lexical)
(sémantique) (syntaxique)
Noyau fonctionnel –
Spécifications conceptuelles
(Application)
2.1.1. Niveau conceptuel (Spécifications conceptuelles)
✔ Le niveau conceptuel permet de traduire la sémantique de l'application pour

l'interface utilisateur.
✔ Les spécifications conceptuelles consistent à définir les objets manipulés par

l'utilisateur, leurs attributs, propriétés et relations.
✔ D'un point de vue dynamique, les spécifications conceptuelles permettent aussi,

de définir les actions et les opérations exécutables sur les différents objets de
l'interface.
✔ Le noyau fonctionnel manipule les objets du domaine d'application.

2.1.2. Niveau interface de l'application (Spécifications sémantiques)
✔ La couche interface de l'application sert à relier les fonctions et données du

noyau fonctionnel aux données et actions de l'IHM. On parle aussi d'interface du
noyau fonctionnel
✔ Le niveau sémantique permet de traduire la sémantique de l'application pour

l'interface utilisateur.
✔ Les spécifications sémantiques sont des spécifications fonctionnelles. Elles

consistent à donner une description de l'effet des commandes utilisateur sur les
différents objets de l'application.
Exemple : Déplacer une fenêtre
▪ Sélectionner la fenêtre
2.1.3. Niveau contrôle du dialogue (Spécifications syntaxiques)
✔ La Gestion du Dialogue gère le séquencement des entrées et des sorties, par

exemple l'enchaînement des écrans dans une interface graphique.
✔ Le niveau contrôle est chargé de l'analyse du langage d'interaction.
✔ Il analyse les phrases et les requêtes pour l'application.
✔ Le niveau de contrôle du dialogue est le véritable gestionnaire de l'état

d'interaction. On parle de niveau syntaxique.
✔ Pour rester dans le domaine de la qualité, il faut d'abord choisir le style de

dialogue homme-machine ( Menus, formulaires, langage de commande, langage
naturel, manipulation directe, action-objet, etc.), ensuite appliquer les règles
ergonomiques qui conviennent au style de dialogue choisi.
2.1.4. Niveau présentation (Spécifications lexicales)
✔ La présentation est la couche qui gère les entrées et les sorties ; elle
représente les données et interprète les actions de l'utilisateur.
✔ Le niveau présentation définit l'image du système pour l'utilisateur.
✔ Il concerne la représentation graphique et la présentation de l'IHM vers

l'extérieur du système.
✔ Le niveau présentation permet de :
▪ Lire les données provenant du dispositif d'entrée (Actions utilisateur)

▪ Traduire les données dans le format informatique interne propre à
l'application et inversement. On parle aussi de niveau lexical, car il est
directement en contact avec l'utilisateur.
3. Le maquettage et prototypage
La conception d'une interface homme-machine requiert deux grands types de

représentation physique :
✔ des représentations permettant de visualiser l’objet (Maquette)
✔ des représentations permettant de valider les fonctions (par exemple

sous la forme de tests ergonomiques... : Les prototypes)
3.1. La maquette
✔ La maquette correspond uniquement à l'interface. Elle définit une ébauche de

l'application : Elle représente une vue statique des interfaces.
✔ La maquette représente une première estimation du développement, en matière

de coût, de temps et charge de travail.
✔ La maquette est une version de démonstration donnant une vue du futur

système.
✔ Une maquette est réalisée par l'usage de croquis ou de story-boards.
✔ Une maquette permet de créer une description réaliste de l'utilisation du

système en donnant un aperçu sur l'ensemble des interactions représentatives
pour l'accomplissement d'une tâche.
3.1. La maquette
3.2. Le prototype
✔ Le prototype représente la réalisation d'un premier modèle.
✔ À partir du prototype, les développeurs peuvent tester les fonctions d'usage et

repérer les failles du produit.
✔ (Nielsen, 1993) distingue deux degrés de prototypage selon le niveau

d’interaction :
▪ Le prototypage horizontal
▪ Le prototypage vertical
3.2.1. Le prototypage horizontal
Le prototypage horizontal correspond au développement de la partie graphique de
l’interface homme-machine, c’est parfois une simple maquette sur papier. L’objectif
alors est :
✔ d’explorer les différentes alternatives de conception;
✔ s’assurer de l’utilisabilité dans des conditions variées ;
✔ aider les utilisateurs à imaginer l’interface;
✔ se concentrer sur les parties problématiques de l’interface.

3.2.1. Le prototypage vertical
✔ Le prototype vertical met en œuvre certaines des fonctionnalités afin que
l’utilisateur puisse dérouler un scénario d’utilisation typique.
✔ Le prototype vertical n'évolue pas nécessairement d'une manière continue vers
le produit final.
5. Exercices
Exercice 1 :
Soit une tâche T à réaliser. La structure de la tâche T est donnée comme suit :
✔ T s'affine en deux tâches T1 et T2.
✔ La tâche T1 doit être effectuée avant la tâche T2.
✔ T1 sera considérée comme atteinte lorsque ses deux sous-tâches T11 et T12
seront réalisées.
✔ T11 et T12 sont réalisables dans un ordre quelconque, chacune étant
interruptible.
✔ T11 doit être effectuée au moins une fois.
✔ T2 est achevée lorsque ses deux sous-tâches T21 et T22 sont réalisées. T21 et
T22 peuvent être menées de front (en parallèle).
1. Donner un arbre des tâches modélisant T. Précisez les notations.

2. Dessiner une maquette possible pour cet arbre.
5. Exercices
Exercice 2 : Soit l'arbre des tâches MAD suivant :
Gestion des ressources de l'équipe
Consultation de Effectuer une Prise en compte d'une

de la disponibilité réservation nouvelle ressource
Définir Définir intervalle Définir réservation Résoudre

ressource(s) de temps conflits
Nommer Choisir selon le type Définir Définir intervalle(s) Contacter Réserver ressource
ressource de ressource ressource(s) de temps personne équivalente
Nommer type Choisir

de ressource ressource

2 ConceptionInterfaces-v3.0

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2 ConceptionInterfaces-v3.0

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 2

✔ La conception d'une IHM ne se limite pas à son ergonomie. (Principe : Adapter

Mise en œuvre d'un système qui répond aux besoins

Utilisateur Un système qui répond à ses connaissances du domaine

Proposer une représentation des objets et des

✔ Composantes d'une interaction homme-machine :

1. Un utilisateur : Acteur principal auquel est destiné le système interactif

2. Une tâche : L'utilisateur effectue une tâche

3. Un contexte : domaine d'application de la tâche

4. Le moyen utilisé : Le système informatique

Le crash serait en partie dû à une

Interfaces Interfaces Interfaces orientées

I. Les objets visuels de base

1.1. La fenêtre primaire

1.1.1. Fenêtre primaire standard

1.1.1. Fenêtre primaire standard

1.2. Les fenêtres secondaires

1.3. Les boites de dialogue

1.3. Les boites de dialogue

1.3. Les boites de dialogue

▪ Une boite de dialogue non modale, contrairement à la première, elle offre la

1.3. Les boites de dialogue

1.3. Les boites de message

Les contrôles supplémentaires

2.1. Les Contrôles classiques

2.1.1. Les champs statiques ou les statiques

2.1.1. Les champs statiques ou statiques

Statique cadre (avec

Statique image Statique texte variable

Statique texte courant

Les cases à cocher

Les boutons radio

Remarque : Un bouton grisé indique son inactivité.

2.1. Les Contrôles classiques

Zone d'édition simple

2.1. Les contrôles classiques

✔ Une listbox peut être :

2.2. Les contrôles supplémentaires

Sélecteur rotatif avec

2.2. Les contrôles supplémentaires

Remarque : Il est possible d'utiliser beaucoup d'autres types de

2.2. Les Contrôles supplémentaires

2.2.4. Autres types contrôles supplémentaires

Les boutons personnalisés.

✔ Le cycle de vie d’une application désigne la période comprise entre le moment

Validation & Programmes Conception

Besoins Spécifications Modèles d’analyse

Besoins Spécifications Modèles d’analyse

Validation & Programmes Conception

Besoins Spécifications Modèles d’analyse

Validation & Programmes Conception

Besoins Spécifications Modèles d’analyse

Validation & Programmes Conception

Validation & Programmes Conception

Validation & Programmes Conception

Valeur 1 : Aspect humain et communicatif avec la mise en avant de

Source : Gaëlle CALVARY – "Ingénierie de l'Interaction Homme-Machine : Rétrospective et Perspectives" - URL:http://iihm.imag.fr

✔ L'analyse de l'activité est menée sur le terrain.

✔ Modélisation de l'utilisateur (Données informelles, questionnaires,

✔ Modélisation de la tâche et des concepts du domaine. La participation

✔ Une modélisation des concepts informatiques :

▪ La modélisation concerne les tâches élémentaires

▪ Décrire les interface au moyen d'objet – action disponibles dans