LES INTERFACES HOMME-MACHINE

1re Partie :
Introduction aux Interfaces Homme-Machine
2me Partie :
Notions de base sur les Sciences Cognitives

3me Partie :
Recommandations ergonomiques
4me Partie :
Guides de Style
5me Partie :
Mthodes de conception et d'valuation

6me Partie :
Principes ergonomiques des interfaces Web

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 1 / 28 Jean-Marc PUJOS

1re Partie : PLAN

Introduction aux Interfaces Homme-Machine

La problmatique

La particularit

Lapport des sciences cognitives

Les dfinitions de bases

Les caractristiques de l'interaction

Les types dIHM

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 2 / 28 Jean-Marc PUJOS

 Le mcanisme de la communication

Problmatique
Rfrentiel 1 Rfrentiel 2
Particularit

Sciences
cognitives

Dfinitions de
bases

Caractristiques
de l'interaction

Types dIHM

Frontire = Discontinuit

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 3 / 28 Jean-Marc PUJOS

Le mcanisme de la communication

Problmatique Rfrentiel 1 Rfrentiel 2

Particularit

Sciences
cognitives

Dfinitions de
bases

Caractristiques
de l'interaction

Types dIHM

Reprsentations

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 4 / 28 Jean-Marc PUJOS

 Le mcanisme de la communication

Une reprsentation peut tre :

Problmatique
Symboles ""

Sons "L'imprimante n'a plus de papier"
Particularit

Sciences
cognitives

Dfinitions de

Images
bases

Caractristiques
de l'interaction
Texte "Cours d'IHM 18h15"
Types dIHM
Un sourire, un parfum

Gestes

De faon gnrale : N'importe quoi!

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 5 / 28 Jean-Marc PUJOS

Le mcanisme de la communication

Problmatique Rfrentiel 1 Rfrentiel 2

Particularit K1 K2
Sciences
cognitives

Dfinitions de
bases

Caractristiques
de l'interaction

Types dIHM
Coder Dcoder

Dcoder Coder
Reprsentations

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 6 / 28 Jean-Marc PUJOS

 Le mcanisme de la communication

Problmatique
Ce qu'il faut retenir
Particularit Pas de communication directe
Sciences
Passe toujours par une reprsentation
cognitives

Dfinitions de
bases Une reprsentation n'a pas de sens en propre
Caractristiques Pas de codage / dcodage universel
de l'interaction Une reprsentation ne prend sens que dans
Types dIHM un rfrentiel

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 7 / 28 Jean-Marc PUJOS

Le mcanisme de la communication

Problmatique
Ceci est le mcanisme de base de toute communication

Particularit entre agents
Sciences
cognitives

Il se gnralise au cas de la communication
Dfinitions de
bases Homme Machine
Caractristiques
de l'interaction

Types dIHM Un cas particulier des

Interfaces entre agents

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 8 / 28 Jean-Marc PUJOS

 Le mcanisme de la communication

Problmatique Rfrentiel 1 Rfrentiel 2

K1 K2
Particularit

Sciences
cognitives

Dfinitions de
bases

Caractristiques
de l'interaction

Types dIHM

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 9 / 28 Jean-Marc PUJOS

Le mcanisme de la communication

Problmatique Rfrentiel 1 Rfrentiel 2

Particularit
Perceptif, Subjectif Formel, objectif

Sciences
cognitives

Dfinitions de
bases

Caractristiques
de l'interaction

Types dIHM

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 10 / 28 Jean-Marc PUJOS

 L'tude des I.H.M.

Problmatique

Particularit
Cest :
Sciences
cognitives

Ltude des moyens et techniques permettant de
Dfinitions de franchir la discontinuit entre les rfrentiels de
bases
deux agents
Caractristiques
de l'interaction

Types dIHM
L'art de concevoir et de raliser des

reprsentations pertinentes
 Elles sont susceptibles dtres interprtes de faon
suffisamment voisines dans deux rfrentiels donns

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 11 / 28 Jean-Marc PUJOS

L'tude des I.H.M.

Problmatique
Approche pluri-disciplinaire
Particularit

Sciences
cognitives

Dfinitions de
bases

Caractristiques
de l'interaction
Informatique
Types dIHM
Il y a la machine

Sciences cognitives
Mais il y a l'homme aussi!

Ergonomie
et aussi l'interaction des deux!

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 12 / 28 Jean-Marc PUJOS

 L'tude des I.H.M.

Problmatique Le partenaire principal est l'homme

Particularit et non la machine !
Sciences
cognitives

Dfinitions de
Il est impossible de concevoir une interface

bases homme - ordinateur :
Caractristiques
de l'interaction
 en ne prenant en compte que les seuls aspects
Types dIHM relevant de l'algorithmique.

 en ngligeant les aspects cognitifs

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 13 / 28 Jean-Marc PUJOS

Lapport des sciences cognitives

Problmatique

Particularit

Sciences
cognitives

Dfinitions de
bases
Pourquoi a-t-on besoin des
Caractristiques
de l'interaction
sciences cognitives?
Types dIHM

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 14 / 28 Jean-Marc PUJOS

 Lapport des sciences cognitives

Problmatique

Particularit
Quand une interface est
Sciences inadapte, inefficace, dangereuse
cognitives

Dfinitions de
bases c'est souvent du beaucoup plus qu' un
simple problme de programmation.
Caractristiques
de l'interaction
La psychologie cognitive offre des modles thoriques
Types dIHM
du fonctionnement de lesprit humain pour tout
comportement mettant en uvre des connaissances.

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 15 / 28 Jean-Marc PUJOS

Les dfinitions de bases

Problmatique
L'interface Utilisateur:

Particularit  concernant tous les aspects des systmes informatiques
qui influencent la participation de l'utilisateur des
Sciences
cognitives tches informatises (Scapin INRIA 1986)
Dfinitions de
bases

Domaine pluridisciplinaire:
Caractristiques
de l'interaction
 psychologie et sciences cognitives
 ergonomie
Types dIHM
 sociologie
 informatique et ingnierie de systmes
 design graphique
 documentation technique,....

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 16 / 28 Jean-Marc PUJOS

 Les dfinitions de bases

Problmatique

Une bonne conception des interfaces homme-machine :
Particularit unification des deux approches
Sciences
cognitives

Importance accrue avec le dveloppement de
Dfinitions de l'informatique :
bases
 Utilisateurs non informaticiens
Caractristiques  Augmentation des performances : systmes plus flexibles et
de l'interaction adaptables par l'amlioration des interfaces
Types dIHM

Domaine en volution rapide (les utilisateurs, les

technologies,...)

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 17 / 28 Jean-Marc PUJOS

Le modle gnral

Problmatique systme global

Particularit

Sciences
cognitives

Dfinitions de
bases
homme machine
Caractristiques
de l'interaction

Types dIHM

interface
homme machine

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 18 / 28 Jean-Marc PUJOS

 Quelques dfinitions

Problmatique

les 3 participants dans la conception des interfaces homme-
Particularit
machine
Sciences  l'utilisateur (user) : participant avec choix
cognitives
 la machine (computer) : participant avec programme
Dfinitions de  le concepteur (designer) : participant qui anticipe les choix
bases
possibles de l'utilisateur et les code dans un programme
Caractristiques
de l'interaction

L'utilisateur dispose de la documentation pour l'aider dans
Types dIHM ses choix
 manuels, aide en ligne : ensemble de connaissances fournies
l'utilisateur

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 19 / 28 Jean-Marc PUJOS

Un premier modle

Problmatique Du concepteur l'utilisateur :

Particularit

Sciences
cognitives

Dfinitions de 80

60

40

20

bases 0
1st Qtr 2nd Qtr

Caractristiques
de l'interaction

Types dIHM Ordinateur

concepteur
utilisateur

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 20 / 28 Jean-Marc PUJOS

 Un second modle

Problmatique environnement
Particularit

Sciences
cognitives

Dfinitions de
bases
concepteur
Caractristiques participation dans la utilisateur
de l'interaction conception

Types dIHM

description de
la tche
tche

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 21 / 28 Jean-Marc PUJOS

Lvolution des IHM

Problmatique ANNES 80
Particularit

Sciences
cognitives

Dfinitions de
interface

bases
utilisateur ordinateur
Caractristiques
de l'interaction

Types dIHM
lent
expriment faible en E/S
programmeur

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 22 / 28 Jean-Marc PUJOS

 Lvolution des IHM

ANNEES 90
Problmatique

Particularit

Sciences
cognitives

Dfinitions de
bases utilisateur interface
ordinateur
Caractristiques
de l'interaction

Types dIHM grand public

non informaticien
rapides

nombreux dispositifs E/S

indpendance Interface/Appli

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 23 / 28 Jean-Marc PUJOS

Lvolution des IHM

Problmatique ...- 1965 de la prhistoire pas d'utilisateur rel

l'histoire utilisateur unique propritaire
Particularit computer non accessible (batch)
Sciences
cognitives
1965-1980 traditionnel time-sharing
Dfinitions de l'utilisateur sous contrle
bases

Caractristiques 1980-1995 personal utilisateur unique,

de l'interaction computer personnalisation puis approche
graphique
Types dIHM

1995 --... multimdias , auto-adaptativit .....

rseaux

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 24 / 28 Jean-Marc PUJOS

 Interfaces orientes lignes
(Line-oriented interfaces)

Interfaces une dimension

Problmatique

Particularit

Sciences
cognitives
Dialogue questions/rponses trs structur
Dfinitions de
Construit sur les langages de commande (fortes
bases
contraintes) accs direct aux fonctionnalits du
Caractristiques
de l'interaction
systme: approche d informaticien (contrle de
l'utilisateur par la machine)
Types dIHM

Effort de mmorisation important

Implmentation: tty (papier) puis cran (glass-tty)
saisie par le clavier (character-oriented interface)

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 25 / 28 Jean-Marc PUJOS

Interfaces pleines pages

(Full-screen interfaces)
interfaces deux dimensions
Problmatique

Particularit

Sciences
cognitives
Dialogue style grille de saisie ( futures boites de
Dfinitions de
dialogue)
bases

Acclrateurs et navigation dans l'cran ==>
Caractristiques
de l'interaction
utilisation de cls de fonction
Types dIHM
Apparition de la notion de menus hirarchiques
et hirarchie d'crans

Le clavier : lment de saisie essentiel
(character-oriented interface)

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 26 / 28 Jean-Marc PUJOS

 Les Interfaces graphiques

Problmatique

WIMP (Windows, Icnes, Menus ,Pointing devices) ou
Particularit Windows , Icons , Mice et Pulldown Menus ?
Sciences
Approche multifentrage : dimension 2 et 1/2
cognitives

Manipulation directe et reprsentation graphique d'objets
Dfinitions de
bases
Feedback permanent vers l'utilisateur
Caractristiques
de l'interaction

Bas sur les objets de l'utilisateur
(Object-Oriented interfaces)
Types dIHM

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 27 / 28 Jean-Marc PUJOS

LES INTERFACES HOMME-MACHINE

1re Partie :
Introduction aux Interfaces Homme-Machine
2me Partie :
Notions de base sur les Sciences Cognitives

3me Partie :
Recommandations ergonomiques
4me Partie :
Guides de Style
5me Partie :
Mthodes de conception et d'valuation

6me Partie :
Principes ergonomiques des interfaces Web

CNAM UE IHM NSY110 Introduction aux IHM Diapositive 28 / 28 Jean-Marc PUJOS