Interaction Homme-Machine - Cours 2 : psychologie des utilisateurs - Lri.fr
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Interaction Homme-Machine
Cours 2 : psychologie des utilisateurs
Année 2015/2016 – Et3 Info - Polytech Paris-Sud
Cédric Fleury (cedric.fleury@lri.fr)
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2015/
Une partie de ce cours est basée sur les transparents de Ignacio Avellino,
Anastasia Bezerianos et Michel Beaudouin-Lafon
Rappels
Système interactif n’est pas juste un système algorithmique
Représentation d’un état interne
Réponse aux actions de l’utilisateur
Boucle perception-action
IHM : approche multidisciplinaire
Prise en compte des capacités humaines dans le système
Adaptation au modèle mental de l’utilisateur
Différents styles d’interaction
WIMP, interaction gestuelle, tangible jusqu’à la réalité virtuelle
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2015/
2
Plan du cours
A - Processeur humain
B - Perception
C - Cognition
D - Système moteur
3
Plan du cours
A - Processeur humain
B - Perception
C - Cognition
D - Système moteur
4
Capacité humaine
Loi de Moore
Capacité humaine vs capacité des ordinateurs
Computer
capabilities
Saul Greenberg
5
Le processeur humain
Modélisation de l’homme comme
un système de traitement
d’information
Perception
Memoire
Système moteur
(Card, Moran & Newell 1983)
The Psychology of Human-Computer Interaction
6
Le processeur humain
Ressources attentionnelles
multiples (Wickens, 1984)
7
Le processeur humain
Chaque processeur a un cycle de traitement
Durée nécessaire pour traiter une entrée et produire une sortie
La vitesse d’un traitement dépend de l’individu et des
conditions (ex. intensité du stimulus, bruit, alcool,...)
La vitesse du plus rapide peut être 10 fois plus élevée que la
vitesse du plus lent
8
Couplage action-perception
Physiologie « classique » (approche cognitiviste)
Perception Cognition Action
Fort couplage entre action et perception
Action pour la perception
Bouger la tête pour percevoir la profondeur
Manipuler un objet pour percevoir sa forme
Perception pour l’action
Adjuster le bras et la main pour attraper un objet
9
Plan du cours
A - Processeur humain
B - Perception
C - Cognition
D - Système moteur
10Perception visuelle
Organe sensorielle : l’oeil
Perception de
la couleur
du mouvement
de la profondeur
Champs de vision de 180° (x160°)
Acuité visuelle : 0,04 mm à 50 cm
Perception périphérique
Moins sensible aux couleurs
Plus sensible aux mouvements
11Perception visuelle
Attention !
Daltonisme rouge-vert est très commun
(8% des hommes adultes)
=> Eviter le rouge et le vert pour les différences
=> N’utilisez pas que de couleur pour montrer des différences
Ishihara Test for Colour Blindness
http://colorvisiontesting.com/ishihara.htm
1213
14
15
Processeur perceptuel
Il explique :
Ecran (60hz) = 17 ms
Vidéo (au minimum 25 FPS) < 40 ms
Animation fluide < 50 ms
Il dépend de :
facteurs physiques (différences
individuelles, fatigue)
«signal to noise ration» (intensité)
En IHM :
Un retard de plus de 100 ms peut être
considéré comme un événement
indépendant
=> il faut donc un feedback !
1617
Lois gestaltistes
Köhler, Koffka,Wertheimer (Berliner Schule):
“Gestaltpsychologie”, 1912
18Lois gestaltistes
Théorie selon laquelle les processus de la perception et
de la représentation mentale traitent spontanément les
phénomènes en un ensemble structuré (les formes) et non
comme une simple addition ou juxtaposition d'éléments
Théorie psychologique, philosophique et biologique qui
touche la perception et la cognition
=> plus de 100 lois !
19Lois gestaltises en IHM
Comment relier les éléments entre eux?
Keynote - Mac OSX El Capitan
20Loi de la bonne forme
Notre perception tend à simplifier les formes visualisées
21Loi de proximité
Les objets physiquement ou temporellement proches sont
perçus comme un seul ensemble
En IHM :
Aide à simplifier l’interface, sans utiliser
d’elements de regroupement (ex : carrés)
Keynote - Mac OSX El Capitan
22Loi de similitude
Si la distance ne permet pas de regrouper les points, nous
nous attacherons ensuite à repérer les plus similaires entre
eux pour percevoir une forme/groupe
En IHM :
Organisation d’objets selon leur forme,
taille, couleur
Microsoft Windows XP 23Loi de clôture
Nous percevons les formes fermés comme appartenant au
même ensemble
En IHM :
Base des systèmes de fenêtres
Utilisé pour regrouper
Ne pas en abuser !
Keynote - Mac OSX El Capitan 24Loi de continuité
Les formes continues apparaissent comme appartenant au
même ensemble. Dans une intersection d’objets, on perçoit
les objets comme deux unités ininterrompues.
En IHM :
Des éléments de forme différente
placés l'un après l'autre
Keynote - Mac OSX El Capitan 25Loi de destin commun
Des parties en mouvement ayant la même trajectoire sont
perçues comme faisant partie de la même forme
http://www.andyrutledge.com/common-fate.php
En IHM :
Des icônes sélectionnées et déplacés
ensemble sont considérées comme un groupe
Des mots affichés ensemble, même si
différents, sont perçus comme une unité
https://home.redbrickhealth.com/
26Expérience du passé
L'expérience passée et le contexte ont un effet sur la façon
dont nous interprétons les éléments du groupe
En IHM :
Fondation des métaphores dans «l’UI».
Skeuomorphisme, métaphore du desktop
Keynote - Mac OSX El Capitan
27Figure et fond
La perception consiste en une distinction de la figure (cible)
sur le fond (contexte) graphique
En IHM :
Il faut que les figures soient bien distinctes du fond
28https://en.wikipedia.org/wiki/Gestalt_psychology
Plus de ressources: http://architectingusability.com/2011/05/26/using-the-gestalt-laws-of-perception-in-ui-design/
29Visibilité
30Visibilité
Une grande partie de la connaissance provient du monde
réel, et non de notre tête
La visibilité est importante pour révéler le contenu d’une
interface
Un «design » naturel ne requiert pas d’effort conscient, les
indices sont évidents
Nous arrivons à bien interpreter les indices présents autour
de nous
Attention, cependant, l’excès de visibilité peut être mauvais
31Télécommande modifié Bill Moggridge - http://www.designinginteractions.com/chapters/4 32
Perception auditive
Fréquences : 20 Hz à 20KHz
Focus et perception sélective
Effet « cocktail party »
Effets de masquage
On entend une source sonore mais pas l’autre
Plusieurs facteurs : intervalle de fréquence, intensité, distance
Localisation d’une source
Corrélation avec la localisation visuelle
33Perception auditive
Audio Texte
Moins d’effort que la lecture Plus d’effort que l'écoute
Moins rapide Plus rapide
Non persistant Persistant
Omnidirectionnel «unidirectionnel» (focalisé)
34Perception tactile
Sens tactile : types de récepteurs
température (chaud, froid), douleur,
pression, toucher. http://www.onformative.com/
uploads/projects/heat1.jpg
https://perceptability.files.wordpress.com/
2011/03/braille.jpg
Sens proprioceptif (vs. extéroceptif)
Configuration du corps dans l’espace,
donc perception de la forme d’un objet saisi
http://enerchilaser.com/images/
proprioception_proper.jpg
Sens kinesthésique
Perception de l’effort des muscles, donc de
la résistance/poids d’un objet
http://www.watchingdance.org/research/
kinesthetic_empathy/images/IMG_5209.jpg
35Perception
Implications générales pour l’IHM :
La présentation visuelle change la perception
Faire attention au choix de couleurs
Eviter des changements brusques
Utiliser les bordures, la proximité, etc pour grouper les informations
Eviter les instructions audio et des menus audio trop brefs
36Plan du cours
A - Processeur humain
B - Perception
C - Cognition
D - Système moteur
37Processus cognitifs
Processus responsable des décisions
Comparaisons des stimuli et sélection d’une réponse
Types
Mécaniques, basés sur des habiletés et l’apprentissage
(ex : pour marcher, pointer, parler, faire du vélo)
Basés sur des règles
(ex : il y a un obstacle, il faut tourner à droite)
Basés sur des connaissances (résolution de problèmes)
38L’attention
Capacité de l'esprit à se centrer sur les choses/objets
pertinents
Liée à la perception visuelle et auditive
Mais… les êtres humains ont des ressources cognitives limitées
Il est plus facile de se concentrer sur des informations bien
structurées
39Expérience 1
1. Lisez la séquence de chiffres à votre voisin et arrêtez vous
brusquement. Demandez lui de donner les chiffres dont il se rappelle
en partant de la fin.
2. Choisissez et encadrez 5 chiffres sur votre feuille sans les montrer,
puis lisez-les à votre voisin.
Demandez-lui de :
Compter à rebours à haute voix de 50 à 0
Répondre à une question
(par exemple, qu’est-ce que il a mangé il y a 3 jours ?)
Est-ce qu’il se rappelle de la séquence des 5 chiffres correctement ?
Changez de rôle
Répétez l’experience avec 9 chiffres
40Mémoire et apprentissage
Mémoire de travail
Capacité:
μWM = 7 ± 2 morceaux
Demi-vie: (Miller ’56)
δ1,WM = 73 s (1 morceau)
δ3,WM = 7 s (3 morceaux)
Encodage visuel et auditif
Les interférences provoque une dégradation plus rapide de
la mémoire à courte terme
41Mémoire et apprentissage
Mémoire à long terme
Capacité : infinie
Demi-vie : infinie
Encodage sémantique
Lecture rapide, écriture lente
Apprentissage et mémorisation par
répétition (court terme => long terme)
42Regroupement
Les éléments de la perception et de la mémoire sont
regroupés en unités : « chunks »
Essayez de mémoriser ce numéro: 436759068
… et après celui-ci : 436-759-068
Le nombre magique 7± 2 de la mémoire à court terme
s’applique au nombre des « chunks » plutôt qu’au nombre
des éléments uniques.
437 groupes
Ce que certains concepteurs d’interfaces font:
7 options dans un menu
7 puces dans les diapositives
7 icônes dans les barres d'outils
7 éléments dans un onglet
Est-ce une action de rappel (mémorisation) ou de
reconnaissance?
44Rappel et Reconnaissance
Nous sommes meilleures pour reconnaître que pour se
souvenir (se rappeler). Exemple :
Ligne de commande vs GUI
Boîte de recherche vs liste des options
Raccourcis clavier vs actions dans le menu
Nous sommes meilleures pour nous rappeler des images
que des mots. Exemple :
Icônes vs items du menu
45Interférences : l’effet Stroop
Expérience
Identifier et mémoriser la couleur des mots suivants dans
l’ordre, le plus rapidement possible
46L’effet Stroop
Livre
Crayon
Voiture
Camion
Chapeau
47L’effet Stroop
48L’effet Stroop
Rouge
Noir
Orange
Bleu
Vert
49L’effet Stroop
50L’effet Stroop
Interférence entre :
une tâche principale (identifier la couleur)
un processus cognitif (lire un mot)
Effet sur le temps de réaction et sur le pourcentage d’erreurs
=> Il faut éviter à tout prix ce genre d’effets
51Mémoire et apprentissage
Implications générales pour l’IHM :
Éviter des procédures complexes (risque d’interférence)
Rappel et reconnaissance (faciliter les deux)
La reconnaissance est préférée
ex : menus, icônes, listes de sélection
Placement consistent
ex : boutons« OK»/« Cancel»
Regrouper les informations liées
ex : onglets, sous-menus
Aider à l'apprentissage associatif
ex : aide, conseils
Aider les associations et contexte
ex : couleurs, des étiquettes, métadonnées temporelles
52Cognition distribuée
Edwin Hutchins, 1980s
53Cognition distribuée en IHM
Favorise l'expérimentation
Assiste l'apprentissage (scaffold learning)
Montre les différences importantes
Transforme les calculs lents en perception rapide
Aide à «unifier» (supports chunking)
Améliore l’efficacité
Facilite la collaboration
54Cognition distribuée
Favorise l'expérimentation
http://legionofleia.com/wp-content/uploads/2015/08/tetris-video-game.jpg
Tâche cognitive -> tâche perceptive
55Cognition Distribuée
Assiste l'apprentissage (scaffold learning)
Exemple :
représentation physique d’un
concept abstrait
=> 2 * 5 = 10 petites boules
https://qph.is.quoracdn.net/main-
qimg-6631721d99daf7d62d2d8943180
4dd7e?convert_to_webp=true
56Cognition distribuée
Montre les differences importantes
http://www.mapaplan.com/travel-map/london-top-tourist-attractions-map/high-resolution/london-top-tourist-
attractions-map-15-tube-underground-subway-metro-overground-map-plan-high-resolution.gif
57Cognition distribuée
Transforme les calculs lents en perception rapide
Edward Tufte
58Cognition distribuée
Transforme les calculs lents en perception rapide
Edward Tufte
59Cognition distribuée
Aide à «unifier» (supports chunking)
60Cognition distribuée
Améliore l’efficacité
Deux lignes parallèles sont coupées par une ligne transversale.
Combien d’angles se forment ?
61Cognition distribuée
Facilite la collaboration
62Plan du cours
A - Processeur humain
B - Perception
C - Cognition
D - Système moteur
63Expérience 2
Tracez des traits entre les lignes pendent 5 seconds
Essayez de rester entre les deux lignes
Comptez le nombre d’allers-retours
Combien de millisecondes par aller-retour ?
Tracez le contour des bouts de ligne, comptez le nombre de corrections
Combien de millisecondes par correction ?
34 inversions x 2 côtés = 68 inversions
9 corrections x 2 côtés = 18 corrections
64Processeur Moteur
~74ms par inversion
~270 ms par correction
Circuit ouvert
TM = 70ms
Temps moyen entre inversions
65Système Moteur
~74ms par inversion
~270 ms par correction
Circuit fermé
TP + TC + TM = 250ms
Temps moyen entre corrections
En IHM ?
Le temps de percevoir, prendre une
decision et de l’exécuter est de ~250ms
66Loi de Fitts
67Expérience 3
Cibles de différentes tailles
0.5 cm 1 cm 2 cm
Différentes distances entre les cibles
4 cm
Faites des points entre les deux lignes
pendent 10s, le plus vite possible !
Comptez le nombre de points
8 cm
16 cm
68Expérience
1,20#
1,00#
Temps#(s)#per#point#
0,80#
0,60# 0,5#
1#
0,40#
2#
0,20#
0,00#
2# 3# 4# 5# 6# 7# 8# 9# 10# 11# 12# 13# 14# 15# 16# 17#
Distance#
Doubler la distance augmente le temps d’une valeur plus ou
moins une constante
Semble indiquer une relation logarithmique
Doubler la largeur a le même résultat que diminuer la
distance par 4
Semble indiquer une relation Distance / Largeur
69Loi de Fitts
Tpos = IM ⨯ ID
IM = index de mouvement : constant = 100 (ms/bit)
ID = index de difficulté (bits) = log2 ( 2 * D / L )
Tpos = 100 ms/bit ⨯ log2 ( 2 * D / L )
70Loi de Fitts
Formule Originale
Tpos = 100 ms/bit ⨯ log2 ( 2 * D / L )
Formule de Shannon (ISO, 80’s)
Tpos = a + b ⨯ log2 ( (D / L) + 1 )
71Loi de Fitts
Prédiction de temps selon D et L
1,20#
1,00#
Temps#(s)#per#point#
0,80#
0,60#
0,40#
0,20#
0,00#
0#000# 0#001# 0#002# 0#003# 0#004# 0#005# 0#006# 0#007#
ID#=#log2(2D/L)#[bits]#
72Loi de Fitts et IHM
Design d’interface
(clavier logiciel, interface adapté à diffèrent type d’utilisateurs, ...)
Technique de Pointage: réduire D ou agrandir L
Pour comparer les performances entre périphériques
d’entrée (souris, touchpad, tablette ...)
La pente de la droite comme un indice de performance
7350 ans d'input
Pourquoi battre la souris ?
Parce qu’il est le meilleur appareil de pointage
Dispositif Étude ID (bits/s)
Main Fits (1954) 10.6
Mouse Card, English & Burr (1978) 10.4
Joystick Card, English & Burr (1978) 5.0
Trackball Epps (1986) 2.9
Touchpad Epps (1986) 1.6
Eye tracker Ware & Mikaelian (1987) 13.7
MacKenzie, I. Fitts’ Law as a research and design tool in human computer
interaction. Human Computer Interaction, 1992, Vol 7, pp 91-139.
74Mouvements canalisés
Origine du mouvement Fin du mouvement
Tâche : traversez le canal avec le curseur sans en sortir.
Complétez la tâche le plus vite possible.
Essayez de minimiser les erreurs.
75Mouvements canalisés
Origine du mouvement Fin du mouvement
Taille L
Loi du mouvement canalisé (« steering law »)
D
T = a+b a, b constantes
W
76Mouvement et menus
77Mouvement et menus
A
A -> B : pointage
B
78Mouvement et menus
A
A -> B : pointage B -> C : mouvement canalisé
B C
79Mouvement et menus
A
A -> B : pointage B -> C : mouvement canalisé
B C
D
C -> D : pointage
AB BC CD
T ≈ a + b1 ⋅ log 2 (1+ ) + b2 ⋅ + b1 ⋅ log 2 (1+ )
W W W
80Les Menus de Mac OS X
La taille du canal > L
L
81Choix et recherche visuelle
Et le temps passé pour identifier un item dans un menu ?
Item 1
Item 2 Trouvez l’item 7
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
82Choix et recherche visuelle
Et le temps passé pour identifier un item dans un menu ?
Item 9
Item 2 Trouvez l’item 7
Item 3
Item 1
Item 8
Item 6
Item 10
Item 5
Item 7
Item 4
83Choix et Recherche Visuelle
Et le temps passé pour identifier un item dans un menu ?
1. Si les items sont en ordre (ex. alphabétique), le temps de
choix est moyenné par la loi de Hick (logarithmique)
=> utilisation expert
2. Si les items sont placés par hasard et que l’utilisateur ne
connaît pas leur position, l’utilisateur doit chercher la cible de
façon linéaire (plutôt que logarithmique)
=> utilisation novice
84Techniques de pointage
Maintenant on connait les limites, imposées par les
caractéristiques humaines
=> Comment utiliser cette information, pour améliorer le
temps de pointage ?
Menu Radial
Certaines techniques de pointage comme
Optimiser la valeur de D et L
Découplage de l’espace moteur et perceptif
Prediction des cibles possibles
85Menu radial
86Menu radial
Selon la loi de Fitts
Temps pour arriver à un element ? Quasiment 0
Effort pour arriver à un element ?
Pouvez-vous arriver à un element avec les yeux fermés ? Oui
Compromis ?
Quantité d’éléments dans les menus pull-down et marking ?
Placement du menu radial
Problèmes d’occlusion
87Techniques de pointage
«Battre la Loi de Fitts» en réduisant D ou agrandissant W
(Blanch et al., 2004)
Agrandir la taille des cibles lorsque le curseur se trouve dessus (Mac OS X Doc)
http://profs.logti.etsmtl.ca/mmcguffin/research/expandingTargets/
Agrandir L dans l’espace moteur (Blanch et al., 2004)
http://iihm.imag.fr/blanch/projects/semantic-pointing/
Prédiction de la position de la cible pour réduire D (Baudisch et al., 2003)
http://patrickbaudisch.com/projects/dragandpop/index.html
(Baudisch et al., 2003)
88Techniques de pointage
Bubble cursor DynaSpot
(Grossman & Balakrishnan, 2005) (Chapuis et al., 2009)
http://youtu.be/JUBXkD_8ZeQ http://youtu.be/itb1y5PMEOc
89Vous pouvez aussi lire
