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

Les sciences cognitives

Diapositive 1 / 43

Jean-Marc PUJOS

2me Partie : PLAN

Les SCIENCES COGNITIVES et Les bases psychologiques
Introduction aux sciences cognitives Le sous-systme sensoriel De la sensation la perception Le sous-systme cognitif Le sous-systme moteur Les limites Lapproche cognitive pour les IHM Lapproche pour les utilisateurs

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 2 / 43

Jean-Marc PUJOS

Le modle du processeur humain

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

CARD, MORAN, NEWELL (1983)

larchitecture du systme cognitif : reprsentation de l'individu par analogie avec les ordinateurs Trois sous-systmes essentiels: sous-systme de perception (sensoriel) sous-systme cognitif sous-systme moteur

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 3 / 43

Jean-Marc PUJOS

Le modle dinteraction
les 3 sous-systmes
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

rponse

entre
i n t e r f a c e

pense

homme

machine

calcul

lecture

sortie

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 4 / 43

Jean-Marc PUJOS

Le schma gnral (CARD 1983)

mmoires et processus du systme perceptivo-cognitif
LTM STM
buffers sensoriels

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

processeur cognitif

processeurs sensoriels processeur moteur actions

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 5 / 43

Jean-Marc PUJOS

Le sous-systme sensoriel

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

L'quipement sensoriel humain:

l'information reue diffre de l'information relle Fentre du visible de 360 700 nanomtres Fentre de l'audible : 20 16000 cycles/s champ visuel : ellipse illusions optico-gomtriques

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 6 / 43

Jean-Marc PUJOS

De la sensation la perception
Exemples
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 7 / 43

Jean-Marc PUJOS

De la sensation la perception
Exemple : VOIR
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

le vase de Rubin ou les deux visages

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 8 / 43

Jean-Marc PUJOS

De la sensation la perception
Exemple : VOIR (suite)
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

La fixation dun des deux points facilite lorganisation de la figure (il ou bouche)

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 9 / 43

Jean-Marc PUJOS

De la sensation la perception
Approche gestaltiste (1920)
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

la cible F est mieux dtecte en A qu'en

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 10 / 43

Jean-Marc PUJOS

De la sensation la perception
Quelques lois gestaltistes :
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Simplicit

Continuit

B Proximit

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 11 / 43

Jean-Marc PUJOS

De la sensation la perception
Un exemple connu de tous :
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Le logotype de Carrefour a t construit sur linitiale du mot Carrefour, la lettre C traite en blanc, mise au milieu dun losange, rouge gauche, bleu droite et filets noirs en haut et en bas .
Ce logo figurait peint, le losange nettement visible sur les portes du premier supermarch Carrefour (550 m), Annecy. Pour lanecdote ce supermarch se situait justement un carrefour, lorigine de lenseigne venant de l, selon toute vraisemblance.
Les sciences cognitives Diapositive 12 / 43 Jean-Marc PUJOS

CNAM UE IHM NSY110

De la sensation la perception
Voir l'espace :
Introduction Sous-systme sensoriel Sous-systme cognitif
angle visuel

Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

perception de la profondeur?

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 13 / 43

Jean-Marc PUJOS

De la sensation la perception
Voir l'espace : (suite)
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 14 / 43

Jean-Marc PUJOS

Le sous-systme cognitif

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Vers le systme cognitif :

filtre cognitif

autres sources

stimuli

Z
information brute non reconnue

mmoire sensorielle visuelle

lettre reconnue : Z

SENSATION

PERCEPTION

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 15 / 43

Jean-Marc PUJOS

Le sous-systme cognitif
Architecture de la mmoire humaine
(modle simplifi d'Atkinson et Schiffrin)
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Registres sensoriels Stimulus l'entre visuel auditif Haptique

toucher, odorat

Stock court terme

processus de Contrle Rptition Codage Dcision Stratgies de rcupration

rponse

Cowan (1988) rajoute deux composants spcialiss: stock phonologique (linguistique) stock visuel (visuo-spatial)

stock long terme

stockage permanent des connaissances

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 16 / 43

Jean-Marc PUJOS

Le sous-systme cognitif
Caractristiques du systme perceptif
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

PERCEPTION
VISUEL = 200ms = 17 signes R : physique vers la AUDITIF = 1500ms = 5 items R : physique Mmoires sensorielles mmoire de travail

Stimuli

Temps de cycle du processeur perceptif : 100ms

d:dure de stockage m:capacit de stockage R:reprsentation

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 17 / 43

Jean-Marc PUJOS

Le sous-systme cognitif

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Mmoire long terme d = infini m = infini R. : smantique mmoire de travail (court terme) = 7s 73s m = 7 2 mnmes (chunks) R. : acoustique, visuel,...

COGNITION

perception

moteur

Temps de cycle du processeur cognitif :70ms

d:dure de stockage m:capacit de stockage R:reprsentation

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 18 / 43

Jean-Marc PUJOS

Le sous-systme cognitif
Short Time Memory: principal goulet d'tranglement de notre systme de traitement de l'information
tendance naturelle l'analogie si saturation de la STM: effacement de ceux des lments qui n'ont pas t ractivs rcemment

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Long Term Memory: mmoire permanente, capacit illimite

support de toutes les connaissances accumules mais aussi guide dans les moindres actions que nous effectuons

les divers types de connaissances:

dclaratives (faits) , procdurales (actions), analogiques (images mentales), sensori-motrices (automatisme)

l'oubli ? divers types

rpressif (refoulement), provoqu (chocs, traumatismes), rgressif (pas de diminution de la capacit , mais difficult d'attention partage), banal (interfrence)

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 19 / 43

Jean-Marc PUJOS

Le processus cognitif
L'attention slective
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

L'apprentissage La rsolution des problmes : de la Gestalt theory l'utilisation de l'analogie, mais l'homme a plus d'une exprience. La communication par le langage (pour Chomsky, la linguistique est une branche de la psychologie) Le systme cognitif : calqu sur le modle des systmes de production: opre selon le cycle reconnaissance-action Selon les lments saisis dans la STM, recherche des lments actions associs dans la LTM Grce au systme moteur, ces actions sont excutes, modifiant ainsi le monde peru et donc la mmoire court terme (via le sous-systme sensoriel)
Les sciences cognitives Diapositive 20 / 43 Jean-Marc PUJOS

CNAM UE IHM NSY110

Le sous-systme moteur

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Responsable des mouvements : un mouvement est une suite de micro-mouvements (70ms par micromouvement en moyenne) Deux types de mouvements :
mouvements fins (dplacements souris) mouvements importants : (frappe clavier) frquents passages d'un type l'autre: concentration importante ==> forte charge minimiser les mouvements des yeux (organisation intelligente de l'cran par rapport la tche)

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 21 / 43

Jean-Marc PUJOS

Les limites du modle processeur HUMAIN

Quelques lments complmentaires
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

traitements parallles( multimodal) les contradictions internes l'adaptation de l'utilisateur (ex: clavier QWERTY) l'homostasie (ajustement) la satisfaction l'effet Hawthorne (motivation) les diffrences culturelles

Ce quil faut retenir

tp : temps de cycle processeur perceptif : 100ms tc : temps de cycle processeur cognitif : 70ms tm : temps de cycle processeur moteur : 70ms

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 22 / 43

Jean-Marc PUJOS

Lapproche cognitive pour les IHM

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Que faire pour rsoudre un problme ?

Ou : comment se servir d'un outil pour rsoudre un problme

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 23 / 43

Jean-Marc PUJOS

Lapproche cognitive pour les IHM

Se rduit un problme de communication

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Rfrentiel 1 La solution de mon problme

Rfrentiel 2

Mon xxxxxxxxxx sait tout faire Du moins c'est ce que dit la pub

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 24 / 43

Jean-Marc PUJOS

Lapproche cognitive pour les IHM

RSOUDRE
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

PROBLEME PERCEPTIBLE Perceptif Subjectif EXPOSER

SOLUTION PERCEPTIBLE

INTERPRETER

frontire Passer de la reprsentation l'expression formelle

Formel Objectif PROBLEME FORMEL SOLUTION FORMELLE

R-CRITURE FORMELLE

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 25 / 43

Jean-Marc PUJOS

Lapproche cognitive pour les IHM

RSOUDRE
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Perceptif Subjectif

PROBLEME PERCEPTIBLE

SOLUTION PERCEPTIBLE

EXPOSER

INTERPRETER

Passer de la reprsentation l'expression formelle

Formel Objectif

PROBLEME FORMEL

R-CRITURE FORMELLE

SOLUTION FORMELLE

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 26 / 43

Jean-Marc PUJOS

Un sandwich

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Perceptif Subjectif

La part de travail qui reste faire par l'homme L'aspect externe de l'interface L'interface de l'application

Formel Objectif

Le Noyau Fonctionnel de l'application

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 27 / 43

Jean-Marc PUJOS

Un triste sandwich

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Perceptif Subjectif

La part de travail qui reste faire par l'homme

L'aspect externe de l'interface

Formel Objectif

L'interface de l'application Le Noyau Fonctionnel de l'application

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 28 / 43

Jean-Marc PUJOS

Un bon sandwich

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Perceptif Subjectif

La part de travail qui reste faire par l'homme L'aspect externe de l'interface

L'interface de l'application
Formel Objectif

Le Noyau Fonctionnel de l'application

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 29 / 43

Jean-Marc PUJOS

Lapproche cognitive pour les IHM

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Mais que reste-t-il donc faire l'homme ?

Thorie de l'action (D. Norman 1986)

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 30 / 43

Jean-Marc PUJOS

La thorie de NORMAN
Perceptif, subjectif
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs PROBLEME FORMEL PROBLEME PERCEPTIBLE

BUT
SOLUTION PERCEPTIBLE

Formation Planification Expression

d'une intention d'une suite d'actions d'une ou des actions

Reprsentation de l'action

SOLUTION FORMELLE

Formel, Objectif
CNAM UE IHM NSY110 Les sciences cognitives Diapositive 31 / 43 Jean-Marc PUJOS

La thorie de NORMAN
BUT BUT

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

PROBLEME PERCEPTIBLE

SOLUTION PERCEPTIBLE

Evaluation par rapport Perceptif, subjectif Interprtation de son

au but sens

Perception de la repr sentation

Reprsentation de l'action
PROBLEME FORMEL SOLUTION FORMELLE

Formel, objectif

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 32 / 43

Jean-Marc PUJOS

La thorie de NORMAN

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Monde de l'homme BUT

Distances :

Smantique Articulatoire Opratoire

Formation d'une intention Planification d'une suite d'actions Expression d'une ou des actions

Evaluation par rapport au but Interprtation de son sens Perception de la reprsentation

Monde de la machine

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 33 / 43

Jean-Marc PUJOS

La thorie de NORMAN
Dcompose la ralisation d'une tche :
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites

tablissement d'un but : reprsentation mentale de l'tat atteindre Formation d'une intention : analyse de la diffrence entre tat actuel et But , et dcision d'agir pour atteindre le but Spcification dune suite d'actions physiques (liens entre variables psychologiques (but) et variables physiques (systme physique rel) et, correspondances entre variables physiques et dispositifs de commandes Excution des actions Perception de l'tat du systme (reprsentation mentale)

Approche pour les IHM Approche pour les utilisateurs

Interprtation de l'tat du systme valuation (comparaison au but recherch et ... retour)

Permet la mise en vidence des problmes cls

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 34 / 43

Jean-Marc PUJOS

La thorie de NORMAN
BUT de l'utilisateur (variables psychologiques)

Modle dactivit (D. NORMAN 1986)

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs
distance articulatoire en entre distance smantique en entre

formation d'une intention

valuation

distance smantique en sortie

spcification d'une suite d'actions

interprtation de l'tat du systme

distance articulatoire en sortie

distance opratoire en entre

excution

perception de l'tat du systme

distance opratoire en sortie

distance d'excution
CNAM UE IHM NSY110 Les sciences cognitives Diapositive 35 / 43

distance d'valuation
Jean-Marc PUJOS

Lapproche cognitive - en rsum

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

En rsum, deux points importants :

1) concevoir une bonne interface, c'est faire en sorte de rduire la part de travail de l'homme 2) la part de travail de l'homme se mesure en termes des 3 distances smantique, articulatoire et opratoire

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 36 / 43

Jean-Marc PUJOS

Le rsultat de la conception
Je pense a de a
Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Lusager

Le systme peru

ECART
Je pense a de lui

Le systme rel

Le concepteur

Le vrai systme
Diapositive 37 / 43 Jean-Marc PUJOS

CNAM UE IHM NSY110

Les sciences cognitives

Le rsultat de la conception

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Le systme peru

Les effets de l'cart

Ecart observ
Dysfonctionnement effectif observ le systme ne se comporte pas comme l'usager l'imagine / le souhaite

ECART
Le systme rel

Ecart inobserv
L'usager n'a pas russi imaginer comment se comporte le systme. Fonctions existantes inutilises

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 38 / 43

Jean-Marc PUJOS

Le modle mental de lutilisateur

L'utilisateur n'est pas passif devant un systme :
Il forme des intentions, des prdictions, des infrences, il se fait une image du systme Il se forge une reprsentation interne du fonctionnement du systme partir des lments et processus visibles pour lui

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Rsultats intressants :
On cherche rsoudre de nouveaux problmes en se rfrant des modles mentaux existants du monde rel plutt qu'en appliquant une logique abstraite de rsolution On part d'une hypothse de similitude maximale entre les problmes anciens et nouveaux D'o l'importance du modle conceptuel

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 39 / 43

Jean-Marc PUJOS

Modle mental et modle conceptuel

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Le but du concepteur :
Faciliter le dveloppement d'un modle mental de l'utilisateur stable, complet, et appropri, ce travers un modle conceptuel, cadre gnral prsentant les fonctionnalits du systme

Le modle conceptuel :
Anticipation des attentes de l'utilisateur et non reflet de la connaissance et du modle mental du concepteur.

D'o les rgles de conception suivantes

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 40 / 43

Jean-Marc PUJOS

Rgles de conception du modle conceptuel

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

Consistance et cohrence facilitent le dveloppement des modles mentaux Assurer consistance et visibilit des lments et processus pour aider l'utilisateur dcouvrir le modle conceptuel du systme Rendre visibles des lments et processus Se souvenir de l'importance des retours d'information Utiliser des mtaphores mais attention aux simplifications abusives appauvrissantes

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 41 / 43

Jean-Marc PUJOS

CONCLUSION

Introduction Sous-systme sensoriel Sous-systme cognitif Sous-systme moteur Les limites Approche pour les IHM Approche pour les utilisateurs

La seule faon de rduire l'cart entre systme peru et systme rel est de confronter le modle mental que le concepteur a de l'usager avec la ralit. D'ou : La ncessit de mthodes de conception incrmentales avec contrle itratif tout au long du cycle de conception

prototypage, approche en spirale

Ncessit d'une mthode spcifique, partant de l'analyse de la tche et des utilisateurs

CNAM UE IHM NSY110

Les sciences cognitives

Diapositive 42 / 43

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

Les sciences cognitives

Diapositive 43 / 43

Jean-Marc PUJOS