Notions de psychologie cognitive - Université Nice Sophia Antipolis

DUTInformatique‐ M2105 JanvieràJuin2015
UniversitéNiceSophiaAntipolis
GaëtanRey 1
Introductionà
l’InteractionHommeMachine
GaëtanRey
[e-mail]
DUTInformatique– Mars2016
Malheureusementaujourd’hui
Tropdesystèmessontinadaptés
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 2
C’estquoil’IHM?
Interface/interactionHomme‐Machine
E TUDE DE PHÉNOMÈNES MIS EN JEU DANS
L
’ ACCOMPLISSEMENT DE TÂCHES AVEC UN SYSTÈME
INFORMATIQUE
Quelstypesdephénomènes?
cognitifs
matériels
logiciels
sociaux
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 3
Objectifsdudomainedel’IHM
Spécifier,concevoiretdévelopperdessystèmes,dispositifs,outils,machine...
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 4
Fonctionnalité
Environnement
Utilisateur
Plateforme
Utiles
Enconformitéaveclesfonctions
attenduesparl’utilisateurcible
Utilisables
Enconformitéaveclescapacitéscognitives,
sensori‐motricesdel’utilisateurcible:
confort,efficacité,sécurité,qualitédu
produitdelatâcheréaliséeaveclesystème
Contextualisé
Enconformitéaveclecontexte
d’interaction:
•plate‐formed’interaction
•environnementphysiqueetsocial
Désirables
Enconformitéaveclesvaleurs
del’utilisateurcible
Objectifsducours
Demanièregénérale,àlafindecemodule,chaqueétudiantdevraavoircompriscommentspécifier,
concevoiretdévelopperlesinterfaces/interactionsavecl’utilisateur.
C'estàdirequechaqueétudiantsdevraêtrecapable:
d'identifieretdenommer(enfrançaisetenanglais)lesdifférentscomposantsconstituantuneinterfacegraphique
despécifieruneinterfacegraphique,c'estàdire:
dedécrirel'utilisateurtypeàl'aidedumodèledeRasmussen
deconstruirel'arbredestâchesdel'applicationselonlanotationHTA(Hierarchical Task Analysis)
d'utiliserl'approcheparscénariopourguidersonanalysedesbesoins
deconcevoiruneinterfacegraphique,c'estàdire:
dejugeruneinterfaceàl'aidedesenseignementsdumodèleduprocesseurhumain,desleçonsdumodèled'ICSetdelathéorie del'action
dechoisirlescomposantsd'interfacequifavorisentl'affordance
decomparerdesinterfacesenfonctiondelaloidefitts
d'organiserdescomposantsselonlesrèglesdegroupage
deproduiredesmaquettesbasesethautesfidélitésd'uneinterfaceàl'aided'outilsdeprototypage(mockup)
d'argumenter leschoixfaitslorsdelaconceptiondesmaquettesenfonctiondespropriétésergonomiques
dedévelopperuneinterfacegraphique,c'estàdire:
deproduireuneinterfaceàl'aidedulangagedeprogrammationJava
d'organiserl'architecturedel’application(lesclassesJava)enfonctionduprincipedeséparationdespréoccupations
demettreenœuvrelepatrondeconceptionobservateur/observablepourlesinteractionsentrel'utilisateuretl'interface
d'utiliserlaprogrammationévènementielleenjava
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 5
IHMetGénieLogiciel
L’IHMs’inscritdansunprocessusde
développementduGénieLogiciel
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 6
Concep
t
io
n
Concep
t
ionglo
b
ale
Concep
t
iondétaillée
Analysedes besoins
Légende :
Tes
t
sdʹintégra
t
io
n
Tes
t
sdusys
t
ème
Tes
t
sdʹaccep
t
atio
n
Tes
t
sunitaires
Codage
Es
t
tes
t
épar
E
t
apes dumodèle
encascade
Contexted’interaction
Modèledel’utilisateur
Modèledetâche
Modèledesconceptsmétier
Maquette
IHMconcrète
Scénarios
IHMfinale
Architecturelogicielle
Programmation
évènementielle

DUTInformatique‐ M2105 JanvieràJuin2015
UniversitéNiceSophiaAntipolis
GaëtanRey 2
APPORTS
DE LA PSYCHOLOGIE COGNITIVE
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 72
Conception
Conception globale
Conception détaillée
Analyse des besoins
Légende :
Tests d'intégration
Tests du système
Tests d'acceptation
Tests unitaires
Codage
Est testé par
Etapes du modèle
en cascade
Psychologie cognitiveetergonomie
Lapsychologiecognitive
produitdesmodèlespourprédireetexpliquerle
comportementdusujethumain
L'ergonomie
visel'adaptationdesconditionsdetravailàl'hommeparla
conceptiond'outils,demachines,dedispositifs
quipuissentêtreutilisésaveclemaximum
deconfort,d'efficacitéetdesécurité
Ellesinterviennentdanslaqualitédeslogiciels
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 73
Desmodèlesmaispourquoi?
Servirdebasederéflexion,deréférence
Lorsdel’analyseetdelaconception
Desmodèlespourtous
Domainemétier‐>
Utilisateur
Système
EnvironnementPhysique
EnvironnementSocial
…
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 74
Modèlesdel’utilisateur
Segmentsdemarché(Market segments)
sous‐ensembleshomogènesdeconsommateurs,partageant unouplusieurs
critères
Profilsutilisateurs(Userprofiles)
ensemblededonnéesquiinfluencentlecomportementd'undispositif
informatique
Portraitspsychographiques (Psychographics)
lesattitudes,opinions,ettraitsdepersonnalitésquilesamènentversun
produit
Personnagesextrêmes(Extreme characters)
définirlesprofilsetportraitpourdespersonnagesimaginairescaricaturaux
Personna
personnesfictivesutiliséesdansledéveloppementdelogiciels.
archétypesd'utilisateurspossiblesauxquelslesconcepteurspourrontseréférer
lorsdelaconception
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 75
LemodèledeRasmussen
Modèlesimplifiédestroisniveauxdecontrôledes
comportementshumains
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 76
Rasmussen,Information
processingandHuman‐
MachineInteraction,
anapproachtocognitive
engineering,Series,Vol.12,
North‐Holland,1986.
Buts
Symboles
Comportementbasé
surlesconnaissances
(savoir)
Comportement
basésurlesrègles
(procédés)
Comportement
baséssurles
habiletés
(réflexes)
Identi‐
fication
Decision,
choixde
latâche
Planifi‐
cation
Recon‐
naissance
Associa‐
tion
état/tâche
Règles
pré‐
stokées
(Situations)
Entées sensorielles
Réactions
sensorimotrices
automatisées
Signaux Actions
Extractionde
caractéristiques
Situations
LemodèledeRasmussen
Cadrepourlamodélisationsimplifiéedescompétencesde
l'utilisateurcible
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 77
Tâches dans les domaines
Niveaux de compétence
Domaine d’application
(ex. Achat de produits)
Domaine
informatique
(ex. web)
expertfamilierdébutant
X
X

DUTInformatique‐ M2105 JanvieràJuin2015
UniversitéNiceSophiaAntipolis
GaëtanRey 3
LemodèledeRasmussen
Intérêts
fournituncadresimplepourlamodélisationde
l'utilisateur
complètelathéoriedel'actiondeNorman(cf.dernière
partiedecechapitre)
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 78
J’aiidentifiémonutilisateur,
etaprès?
Attention,l’analyseneselimitepasàl’utilisateurmais
elles’intéresseaussiauxautresconcepts
Avecnosmodèles(utilisateurs,…)etnotrearbrede
tâches,onvaconstruirenotreinterface
Réalisationd’unemaquette
Basefidélité(fildefer)
Hautefidélité(prochederéelle)
Réalisationd’unprototype
Maispourcela,onabesoindeguides
Apportdelapsychologiecognitive
Propriétésergonomiques
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 79
Modèle duProcesseur Humain
Card,Moran,Newell "ThePsychology ofHuman ComputerInteraction"1983
Sujethumain:unsystèmedetraitementdel'informationrégipardesprincipes
Cesystème:3sous‐systèmesinterdépendants
systèmesensoriel
responsabledelaperception:ensembledessous‐systèmesspécialiséschacundansletraitementd'uneclassedestimuli(phénomènes
physiquesdétectables)
systèmemoteur
responsabledesmouvements
systèmecognitif
responsableduraisonnementetdesprisesdedécision
Chaquesous‐systèmecomprend
unprocesseur(cycledebase=tpspourtraiteruneunitéd’info+accèsàcetteinfo:~100ms)
unemémoire(capacité=nombred’unitésd’info,persistance‐duréedevied’uneunitéd’info)
Selonlestâchesàaccomplir,lesprocesseurspeuventfonctionner
enséquence(ex:enfoncerunboutonenréponseàunstimulusvisuel)
enparallèle(ex:saisiedetexte,lectureettraductionsimultanées)
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 80
Modèle duProcesseur Humain
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 81
LONG TERM MEMORY
WORKING MEMORY
VISUAL IMAGE
STORE
AUDITORY IMAGE
STORE
Perceptual
Processor
Cognitive
Processor
p= 100 [50-200]
ms
c= 70 [25-170]
ms
Eye movement = 230 [70-700] msec
Motor
Processor
m= 70 [30-100]
ms
Mémoire tampondesprocesseurs sensoriels,
contient desinformations sensorielles
codées demanière physique,
puis symbolique danss lamémoire detravail
Système sensoriel
Représentationnoninterprétéedesentrées:typed'information=physique(notée:k)
Exemple
Sous‐systèmevisuel:larétineestuncapteursensibleàlalumière:elleenregistresonintensité,salongueurd’ondeetsarépartition
spatiale
Visioncentraleoufovea (2degrés):enregistrementavecprécision
Visionpériphérique:sertàl’orientationdesyeuxetdelatête(cibleau‐delàde30
0
delafovea ‐>mouvementtête)
Visionscentraleetpériphérique,mouvementsdesyeuxetdelatêtecoopèrentpourfournirunereprésentationcontinuedelascène
visuelled’intérêtpourl’observateur
Persistance:letempsau‐delàduquellaprobabilitéderetrouveruneinformationdanslamémoire
sensorielleest50%
200mspourlamémoirevisuelle
1500mspourlamémoireauditive
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 82
Mémoire àcourtterme
Filtrecognitif
C'est lalettre P
P
T=100ms
Mémoire visuelle
Codage descaractéristiques physiques
Filtre posé parle
processeur cognitif
entermes de
caractéristiques physiques
(ex:liste delettres/chiffres
decouleur)
Codage symbolique
Système sensoriel
Capacité
delamémoirevisuelle:17[7~17]caractères
delamémoireauditive:5[4.4~6.2]caractères
Tempsdecyc l e
p
Tempss’écoulantentrelaproductiond’unstimulusetlasensationde
perceptiondustimulus(enfait,l’imagesedéveloppeprogressivement:
d’abordmouvementetfréquencespatiale)
100ms[50ms~200ms]
2stimuliproduitsaucoursdumêmecyclesontcombinésenunseul
perceptsisuffisammentsemblables
2lampesprochess’allumantdansl’intervalle[60~100ms]=perçuescomme1
seulelampeenmouvement
Tauxderafraîchissementdel’écran:nbimages/seconde=(1/
p
)*1000
Fastman :(1/50)*1000=20images/s
Middleman :(1/100)*1000=10images/s
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 83

DUTInformatique‐ M2105 JanvieràJuin2015
UniversitéNiceSophiaAntipolis
GaëtanRey 4
Soussystème sensoriel visuel
Différencesentrevisioncentraleetpériphérique
Visionpériphériquemoinssensibleauxcouleursmaisplussensibleaux
mouvements
Acuitévisuelle
Tailleminimaledesobjetsdiscernables
Traitde0,04mmnoirsurfondblancdistinguableàunedistancede50cm
Perceptiondelacouleur
CônessensiblesauxRougeVertBleu
SynthèseadditiveRVBsurnosécrans
Dépendanteducontexte(autrescouleurenvironnantes)
Unepartiedelapopulationestdaltonienne(5‐10%)
Noncalibragedesécrans
Unmêmecodecouleurpeutdonnerlieuàdifférentesinterprétations
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 84
Soussystème sensoriel visuel
Perceptiondelaprofondeur:
Visionstéréoscopique:différenceentrelesimagesperçuesparlesdeux
yeux
Visionactive:bougerlatêteetlecorps
Effetdeperspective:tailledesobjetsdiminueens’éloignant
Perceptiondesformes,desobjets,d’unescène
Associationdesdifférentessensationsàl’expérienceetaucontexte
pourlesorganiserenuntoutcohérent(approcheconstructiviste)
Peutdonnerlieuàdesillusionsd’optiques
Perceptiondumouvement
Ilfautaumoins10imagesparsecondespourpercevoirlemouvement
(fusiondesimages).Danslecascontraire,onverradesimages
saccadées.
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 85
Soussystème sensoriel auditif
Captationdesvibrationsdel’airavecunebandepassantetrèslarge
Unmilliondefréquencesdistinctes
Entendresansécouter
Signauxsonorestoujoursinterprétésdontcertainsdemanièreinconsciente
Effetdemasquage
Unesourcepeutencacheruneautre.Distinctionsilocalisationsoufréquences
suffisammentéloignées
EffetCocktail
Possibilitédefocalisersurunesourcesonoreparmiplusieurstoutenentendantles
autressons
Localisationd’unesourcesonore
Ouïestéréophonique :nosdeuxoreillespermettentdelocaliserunesourcesonore
Ouïeactive :bougerlatêteetlecorpspourlocaliserunesourcesonore
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 86
Soussystèmesensorieltactile
Toucher
Perceptiondetempérature,pression,douleur
Capteurstactilesplusdensessurcertainesrégionsducorps:doigts,bouche
Toucheractif
Déplacersesdoigtspourévaluerlamatièred’unobjetoulemanipulerpourpercevoir
saforme
Proprioception
Connaîtrelaconfigurationdesoncorpsdansl’espace
Senskinesthésique
Sensationdesforces(muscles,ligaments,articulation)doncdelarésistancedesobjets
Senshaptique
Sensationtactile,+sensationkinesthésique
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 87
Systèmecognitif
Mémoireàlongterme(LMT):infostockéepourusageultérieur
1unitéd’info:mnèmeouchunk=unitécognitivesymbolique
Natured’unmnème:dépenddel’expérience
Organisation:réseauxsémantiques(lesmnèmessontreliésentreeux)
Capacitéetpersistance:infinies(lepbestla“mauvaiseclef”d’accès)
Mémoireàcourtterme(MCT):infoencoursdetraitement
Contenu:lesinformationsenprovenancedessystèmessensoriels(sousforme
symbolique)+lesmnèmesactivésdelaMLT
Persistance:7[5~226]sec.
Capacitépure(redireleschiffresd’unelisteénoncéeetquis’arrêtebrutalement)
3[2.5~ 4.1]mnèmes
CapacitéavecinterventiondelaMLT(redireleplusgrandnombre)
7± 2mnèmes(Miller)
MCTsaturée:fonctionnecommelessystèmesdepagination:remplacementdespages
(mnèmes)lesplusanciennementréférencées
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 88
Quelquesprincipes
Principed’incertitude(LoideHick):letempsnécessairepourchoisirun
élémentdansunensembledenélémentséquiprobablescroîtavecn
Exempledetâche:presserlatouchesituéesouslalumièrequis’allumede
manièrealéatoire
T=I.log
2
(n+1)
I=constantequicaractériselabandepassantedel’utilisateurverslesystème=
letempsnécessairepourtransmettreunbitd’information=150ms/biten
moyenne
log
2
(n+1)estl’entropiethéoriquedeladécision(mesuredel’incertitude).
(n+1),nonpasncarilyaincertitudesurlefaitderépondreounon+
incertitudesurlanaturedelaréponse.
Conséquence:réduirelenombred’élémentsdansleslistes
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 89

DUTInformatique‐ M2105 JanvieràJuin2015
UniversitéNiceSophiaAntipolis
GaëtanRey 5
Quelquesprincipes
LoideFitts :tempsnécessairepourdésignerunecibledetailleLsituéeàune
distanceD
T=a+I.Log
2
(2D/L)
Icaractériselabandepassante(ouIP=indicedeperformance)del’utilisateur=letemps
nécessairepourtransmettreunbitd’information=100ms/bitenmoyenne
ID=Log2(2D/L)estappeléindicededifficulté(expriméenbits)
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 90
Cible
D
••••
L
LaloideFitts
Objectifs
Calculerlesperformancespourundispositifdonné
Classerlesdispositifsentreeux(constantedelaloideFitts àfixer)
Elleapermisdemontrerquelasourisestpresqueaussi
performantequelamain=>Lechoixdelasourisparmiplusieurs
dispositifsparXeroxrésulted’uneétudeaveclaloideFitts
Main>Souris>Joystick>Trackball>Touchpad
Lesmembresextrêmesetpluspetitssontlesplusrapides
Yeux>Doigts>Bras>Jambes
Eye Tracker plusrapidequelamain!
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 91
Quelquesprincipes
Augmenterlatailledesciblesds l’espacevisuel
consommedesressourcespixels=>
jouersurlatransparencedeswidgets
changerlatailledelacibledemanièretransitoire(etsavariante:ajouterdespoignéesauxpetitescibles)
Exemplesdechangementdetailletransitoire
ExpérimentationdeMcGuffin&Balakrishnan [CHI2002]
Ilsuffitd’agrandirleswidgets prochesdupointeurdelasouris
OKpourwidgets isolés
Pbd’occlusionsiwidgets contigus
Techniquefish‐eyedudockdeMacOS X
Okenattaquelatérale
Pbdudéplacementdelacible:àl’intérieurdudockleswidgets sontagrandisvisuellementverticalementet
horizontalementalorsquedansl’espacemoteurlestaillessontinchangées:leslimitesdroiteetgauchedela
cible=lesmêmesquelorsqu’iln’yapasd’agrandissement=>Pasd’avantagepourlasélectionetmêmedes
erreurs:onvatroploin
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 92
Quelquesprincipes
Raccourcirlesdistances:jouersurl’espacemoteur
Exemples:
Menuscirculaires/menuslinéaires(8éléments):15%plusrapide(etmoins
d’erreur)[Callahan 88]
Extension:lesmarking menus[Kurtenback,Buxton1993]
Lemenujaillitsilecurseurresteimmobileuninstant
Silecurseurbougeimmédiatement,lesystèmeinterprètelegestedel’expert
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 93
Position initiale du curseur
Quelquesprincipes
Raccourcirlesdistances:jouersurl’espacemoteur
Exemples:
Menuscirculaires
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 94
Circle Dock Circular‐Application‐Menu OffMaps 2
Quelquesprincipes
Raccourcirlesdistances:jouersurl’espacemoteur
Exemples:
Drag‐and‐Pop:Rapprochementtransitoiredeciblepotentielles(grades
surfacesinteractives):3.7foisplusrapide(maisplusd’erreurs)[Baudisch 2003]
Drag‐and‐Throw [Hascoët 2003]:lancerd’uneicôneversuneciblepotentielle
Mars2016 GaëtanRey– UniversitéNiceSophiaAntipolis 95
Cibles potentielles
Proxies des cibles
Icône visitée