__________________________________________________________________________________

MU4IN203 - IHM
Fiches de cours
__________________________________________________________________________________

Fait par
Doan LE

M1 ANDROIDE
2021-2022
Doan LE IHM – Fiches de cours 11/03/2022

Table des matières

Cours 2 : CCU (Conception Centrée sur l’Utilisateur) 5
Découverte 5
Collecter les informations sur l’utilisateur 5
Interview 6
Questionnaire 6
Observation 7
Analyser les informations 7
Diagramme d’affinité 7
Interaction points 8
Formaliser les informations 8
Persona 8
Scénario 9
Invention 9
Collecter et analyser les idées 9
Right Design 9
Brainstorming 9
Formaliser les idées 10
Design dimensions 10
Design space 10

Cours 3 : CCU (suite) 11

Design 11
Sketches 11
Prototype 11
Niveau de détails 11
Niveau d'interactivité 12
Stratégies de prototypage 13
Évaluation 14
Méthode empirique (avec l'utilisateur) 14
Empirique quantitative 14
Empirique qualitative 17
Méthode analytique (sans l’utilisateur) 18
Évaluation heuristique 18
Model-Based Evaluation 19

Cours 5 : Comportement humain 20

Modèle de processeur humain (CNM model) 20
Processeur perceptuel 20
Système visuel 20
Système auditif 20
Système haptique 21
Processeur moteur 21
Mémoires 21
Mémoire perceptuelle 21

M1 ANDROIDE – Sorbonne Université 2

Doan LE IHM – Fiches de cours 11/03/2022

Mémoire de travail 21
Mémoire à long-terme 22
Contrôle moteur 22
Acquisition de compétences 23
Apprentissage 23
Rétention 24
Transfert proactif 25
Transfert rétroactif 25

Cours 6 : Interaction tasks 26

Pointage 26
Mapping 27
Control-Display Gain (CDG) 27
Pointage direct 28
Sélection 28
Première modalité : novice 28
Item 28
Menu panel 29
Menu system 29
Deuxième modalité : expert 30
Simple Interaction Model 30
Skill acquisition & decision making 31

Cours 7 : Entrée de texte 32

Métriques 32
Keyboard design space (layout and button) 32
Layout (location and number of keys, keyboard dimensions) 32
Localisation des touches 32
Nombre de touches 33
Word gesture keyboard 33
Button design 34
Handwriting 34
Smart pens 34
Gesture text input 34

Cours 8 : Interaction Gestuelle 35

Caractérisation des gestes 35
Conception d'une interface gestuelle 35
Créer un ensemble de geste 35
Définir une correspondance geste-commande 36
Choisir le dispositif (hardware) 36
Reconnaître les gestes (gesture recognizer) 37
Algorithme de Rubine 37
$1 recognizer 37
Dynamic Time Warping (DTW) : Déformation temporelle dynamique 38
Fournir une méthode d'enseignement 39

M1 ANDROIDE – Sorbonne Université 3

Doan LE IHM – Fiches de cours 11/03/2022

Évaluer votre ensemble de gestes 39

Evaluation empirique 39
Modèle de performance (contrôle moteur) 40

Cours 10 : HAI, Robotique, VR 41

Human-AI Interaction (HAI) 41
Conception de systèmes interactifs 41
Computational design 41
Optimisation interactive 41
Interagir avec les systèmes intelligents 42
Capturer les informations des utilisateurs 42
Adapter l'interface 42
IHM → AI 43
Systèmes robotiques 43
Industriel et médical 44
Robots industriels (robotic manipulator) 44
Robots médicaux 44
Sociaux et humanoïdes 44
Robots de recherche 44
Robot social 45
Interfaces à changement de forme 46
Dispositifs actionnables 46
Dispositifs robotiques avec feedback haptique 47
Augmentation humaine 47
Drones 48
VR et feedback haptique 48
Simulating objects 48
Exploiting objects 48
Robotic graphics 48

M1 ANDROIDE – Sorbonne Université 4

Doan LE IHM – Fiches de cours 11/03/2022

Cours 2 : CCU (Conception Centrée sur l’Utilisateur)

Waterfall model (mauvaise méthode) : analyse, design, implémentation, test, maintenance
● La réalité nécessite du backtracking
● Les spécifications sont parfois trop abstraites pour guider le design
● Possibilité de mauvaises hypothèses difficiles à détecter et à régler plus tard

Generative Design : Iterative Process

1. Découverte : comprendre et analyser l'utilisateur
a. Collecter les informations sur l’utilisateur : introspection, interviews,
questionnaires, observations
b. Analyser les informations : interaction points, diagramme d’affinité
c. Formaliser : persona, scénario
2. Invention : inventer des idées
a. Collecter des idées : brainstroming, recherche sur internet
b. Analyser les idées : créer des axes
c. Formaliser : sélectionner les idées clefs, design space, design dimensions
3. Design : prototyper le système
a. Collecter : sketches
b. Analyser : idées de prototype
c. Formaliser : sélectionner et raffiner les prototypes (low-fidelity, medium-fidelity,
high-fidelity)
4. Évaluation : évaluer le système
a. Collecter les données : faire des expériences (évaluation empirique et/ou analytique)
b. Analyser les données : analyses statistiques
c. Formaliser : liste des problèmes trouvés, re-designer
5. Boucler : reconcevoir le système

Découverte
1. Capturer les données : introspection, interviews, questionnaires, observations
2. Organiser les données : diagramme d’affinité
3. Représenter les données : persona, scénario, interaction points

Collecter les informations sur l’utilisateur

Trouver les utilisateurs
● Recruter en envoyant des mails ou sur
les réseaux sociaux.
● Ne pas hésiter à contacter des experts
(connaissances tacites).
● Récompenser les personnes (argent,
bière, gadget, reconnaissance, …).
Connaître les utilisateurs
● Identifier les utilisateurs
○ caractéristiques
○ buts : succès et contraintes
○ valeurs : culture, connaissance
● Trouver des problèmes existants
● Faire attention aux contrainte

M1 ANDROIDE – Sorbonne Université 5

Doan LE IHM – Fiches de cours 11/03/2022

Interview
Méthodes : Enregistrer les données :
● Non structuré ● notes écrits
○ pas dirigé par un script ● audios
○ riche mais pas réplicable ● vidéos
● Structuré ● photographies
○ ressemble beaucoup à un
questionnaire Les questions à poser :
○ pas très flexible mais ● Qu’est-ce que l’utilisateur fait ?
réplicable ● Pourquoi le fait-il ?
● Semi-structuré ● Comment le fait-il ?
○ guidé par un script mais libre ● Quand ? Où ?
d’explorer les questions ● Avec quoi et qui ?
intéressantes plus en
profondeur Exemple :
○ bon équilibre entre richesse et ● mauvais : L'actualité du jour est-elle
réplicabilité importante pour vous ?
● meilleur : Comment utilisez-vous la
L’ordre des questions est important ! fonction d'actualité du jour ?
● spécifique, puis générale ● encore mieux : Le journal indique que
● dirigée, puis ouverte vous ne lisez pas les nouvelles du jour.
● fait, puis opinion Pourquoi ?

Questionnaire
Conseils
● Instructions claires sur la façon de
remplir le questionnaire
● Consistance dans les questions
● “likert scale” non numérique au lieu
de juste “oui ou non”
● Eviter les choix de réponse neutre
(permet d'éviter des réponses comme
“je ne sais pas”)
● Anonymat aussi bien pour la
personne qui répond que celle qui va
dépouiller les réponses
● Randomiser les questions
● Utiliser des questions pour vérifier
l’attention
● Mettre les questions personnelles
(nom, âge, …) à la fin
Avantages
● Peut être administré à de larges
populations
● Réponse rapide
● Facile pour collecter et analyser les
données
● Réduction du temps d’analyse
Désavantages
● Pas de contrôle sur le contexte : la
validité des données n’est pas garantie
● Difficile d’avoir un échantillon
random qui représente bien la
population
● Les personnes peuvent répondent
plusieurs fois au questionnaire

M1 ANDROIDE – Sorbonne Université 6

Doan LE IHM – Fiches de cours 11/03/2022

Logiciels
● Google Form : peu personnalisable, données chez Google
● FramaForm : open source, interface moyen
● Limesurvey : meilleur, mais interface moyen

Observation
Ce qu’il faut observer Observer ≠ interagir
● Les utilisateurs et leur environnement
● Les détails verbaux et non verbaux Ethique
● La structure et le langage utilisés ● Demander la permission
● Les dynamiques individuels et de ● Accepter les refus
groupe ● Ne pas distribuer les données
● Les aspects explicites et implicites

Analyser les informations

Analyse
● Compiler les données (textuelles,
numériques et multimédia) dans des Rapport
bases de données ● Considérer différents publics et
● Quantification et analyse statistiques objectifs
● Réduire et interpréter les données ● Préparer un rapport et présenter les
● Affiner les objectifs et le processus conclusions
utilisé

Diagramme d’affinité
Processus Avantages
● Ecrire une idée sur un post-it ● Simple et facile
● Le mettre sur un tableau/mur ● Soutien l'innovation, encourage de
● Regrouper les post-it qui ont une nouveaux modes de pensée
affinité (nommer le groupe) ● Donne un sens à de grands volumes de
données chaotiques
Pourquoi ● Aide les groupes à parvenir à un
● Comprendre ce qui est important à consensus sur les questions les plus
partir de données ambiguës importantes
● Rendre les choses moins complexe ● Méthode flexible pour organiser les
● Identifier les connexions dans les idées
données, les thèmes et les facteurs sur
lesquels se concentrer Désavantages
● Créer des hiérarchies ● Non portable ou mobile
● Occupe un grand espace pendant une
longue période de temps
● On peut perdre la raison derrière les
regroupements qu’on a fait

M1 ANDROIDE – Sorbonne Université 7

Doan LE IHM – Fiches de cours
Interaction points
Description d'un moment où l'utilisateur interagit avec le système (sketch + texte)
1. Qu'a fait l'utilisateur ?
2. Comment le système a-t-il réagi ?
3. Comment l'utilisateur a-t-il répondu ?
Formaliser les informations
Persona
Les extreme characters sont les Personas qui
testent les limites de notre design.
Description de l’utilisateur (spécifique et
détaillé)
● Objectifs : ce que les utilisateurs
essaient d'accomplir, les tâches qu'ils
souhaitent effectuer
● Comportement : modèles de
comportement en ligne et hors ligne,
aidant à identifier les objectifs des
utilisateurs
● Attitudes : attitudes pertinentes qui
prédisent le comportement des
utilisateurs
● Motivations : pourquoi les utilisateurs
veulent atteindre ces objectifs
● Objectifs commerciaux : ce que vous
voulez idéalement que les utilisateurs
fassent pour assurer le succès de votre
système/site
Contient
● Nom et photo
● Démographie (âge, éducation, origine
ethnique, famille, statut, etc...)
● Intitulé du poste et principales
responsabilités
● Objectifs et tâche par rapport à votre
système/site
● Environnement (physique, social,
technologique)
● Un devis qui résume ce qui compte le
plus pour la personne avec pertinence
pour votre système/site
M1 ANDROIDE – Sorbonne Université
11/03/2022
Les critères de l'utilisabilité sont :
● efficacité : le produit permet à ses
utilisateurs d'atteindre le résultat prévu
● efficience : atteint le résultat avec un
effort moindre ou requiert un temps
minimal
● satisfaction : confort et évaluation
subjective de l'interaction pour
l'utilisateur
Les personas ne sont pas des stéréotypes
● Les stéréotypes sont des conceptions
simplistes de groupes basées sur des
hypothèses
● Les personas sont considérés comme
des représentations d'un groupe basé
sur la recherche d'utilisateurs
Exemple : Ellen Noel
● 8 ans, classe élémentaire, française
● a de bons résultats à l’école
● apprend les verbes irréguliers en
anglais
● dispose d’un ordinateur commun à la
maison, ne comprend ce que c’est un
système d’exploitation et comment
l’utiliser mais sait naviguer sur
internet
● “Je sais tout faire mieux que mon
frère”
8
Doan LE IHM – Fiches de cours 11/03/2022

Scénario
Représentations des scénarios : Les scénarios doivent montrer :
● Texte ● les motivations des utilisateurs envers
● Storyboards le système
● Maquettes vidéo ● les actions de l'utilisateur prises
● Prototypes scénarisés ● les raisons de l'utilisateur pour
● Situations physiques lesquelles les actions ont été prises
● la perception de l'utilisateur
3 éléments qui doivent apparaître : ● les résultats en termes de motivations
● Nom et attentes des utilisateur
● Intention de l'utilisateur
● Responsabilité du système Exemple :
Jean prend fréquemment le métro. Il aime
Conseils : descendre quelques stations avant de finir son
● Différents niveaux de détails possibles trajet en Velib. Lorsqu’il approche le métro
● Élargir les scénarios si nécessaire Jussieu, il veut vérifier qu’il y a encore des
● S'appuyer sur des “interaction points” vélos de libre. Il veut aussi regarder s’il y a des
● Ne pas faire d'hypothèses sur la vélos près de chez lui qui ont des espaces
conception de l'interface utilisateur libres.
Le système détecte sa localisation et montre
Point de vue de l'utilisateur sur : l’état des bornes près de son arrêt et près de
● ce qui se produit chez lui.
● comment ça se passe
● pourquoi ça arrive Triangulation : étude d’un phénomène à partir
d’au moins deux points de vue différents

Invention

Collecter et analyser les idées

Right Design
● Créer plusieurs designs/idées
● Raffiner son idée
○ éliminer les pires idées un par un jusqu’à en avoir une seule

Brainstorming
Fonctionnement ● Pas de jugements (ne pas critiquer ou
● Collecter rapidement des idées sur un ignorer)
sujet donné ● Pousser les idées existantes dans de
● Quantité, pas qualité : inclure les nouvelles directions : choisir l’opposé
idées farfelues d’une idée

M1 ANDROIDE – Sorbonne Université 9

Doan LE IHM – Fiches de cours 11/03/2022

Outils ● 1 modérateur par groupe :

● Diagramme d’affinité ○ chronométrer
● Concept map (carte heuristique) ○ écrire et lier des idées
● Les idées doivent être visibles pour
Organisation tous : tableau blanc et post-it
● Sujet bien défini
● Petits groupes (~5 personnes)
● Durée limitée : 5-10 min

Formaliser les idées

Design dimensions Design space

Rassemblez des idées pertinentes au problème Sélectionner un sous-ensemble de dimensions
de conception et d'idées
● Certaines sont les idées du
brainstorming Placer les idées qui correspondent à chaque
● Certains proviennent d'autres endroits dimension
(recherche Web) ● Au moins trois idées par dimension
● Générez des idées s’il en manque pour
Extraire différentes dimensions de conception certaine dimension
qui caractérisent les idées ● Explorer l'intersection de différentes
● Identifier le lien entre les idées dimensions
● Permet de générer des nouvelles idées
selon cette dimension

Exemple : ordinateur portable

● dimension : taille de l’écran
○ diminuer la taille de l’écran : montre connectée
○ entre les deux: tablette

M1 ANDROIDE – Sorbonne Université 10

Doan LE IHM – Fiches de cours 11/03/2022

Cours 3 : CCU (suite)

Design

Sketches
Le sketch est un outil de réflexion, il permet de générer des idées
Graphical vocabulary

Attributs
● Communiquer rapidement et facilement nos idées
○ Rapide à faire
○ Rapide à lire
● Disponible temps voulu (fourni en cas de besoin)
● Jetable
○ Investissement dans le concept, pas dans l'exécution
○ Peu coûteux
● Abondant : quantité avant qualité

Prototype
Plus on s’approche de la deadline, plus on fait Objectifs
des prototypes au lieu des sketchs ● Considérer différentes alternatives
(avant de les mettre en œuvre)
Prototype ● Garantir l'utilisabilité dans diverses
● Représentation concrète d'un conditions
système interactif ● Aider les utilisateurs, les
● Fournit plusieurs niveaux de détails gestionnaires, les développeurs, etc. à
● Permet aux utilisateurs d'envisager le imaginer l'interface
système final ● Se concentrer sur les parties
● Se sentir à l'aise pour suggérer des problématiques de l'interface
modifications
● Qualité avant quantité Choix des prototypes
● Dépend de la phase de conception
● Dépend des besoins des concepteurs

Niveau de détails
3 niveaux :
● Prototypage à basse fidélité
● Prototypage à fidélité moyenne
● Prototypage haute-fidélité
Plus c’est fidèle, mieux sont les feedbacks,
mais pas trop de détails sinon les feedbacks ne
sont pas pertinents

M1 ANDROIDE – Sorbonne Université 11

Doan LE IHM – Fiches de cours 11/03/2022

Prototypage à basse fidélité Prototypage haute-fidélité

● Utilisation du papier ● On-line prototype : utilisation de
○ Link diagram l'ordinateur (animations, vidéos
● Avantages interactives, script, …)
○ Plus rapide ○ Plus longue à créer
○ Coût faible ○ Plus soignée
○ Évaluer plusieurs designs ○ Plus approprié plus tard dans
○ Outil de communication le processus de conception
○ Remaniable ● Avantages
○ Utile pour identifier le marché ○ Fonctionnel
○ Preuve de concept ○ Interactif
● Désavantages ○ Orienté utilisateur
○ Vérification d'erreurs difficile ○ Schéma de navigation clair
○ Spécification peu détaillées ○ Utile pour les tests
○ Utilité limitée quand les ○ Look & feel “final”
spécifications sont choisies ○ Spécifications vivantes
○ Utilité limitée pour les tests ○ Outil de vente et marketing
d’utilisation ● Désavantages
○ Navigation limitée ○ Cher
○ Long à fabriquer
○ Pas efficace pour preuve de
concept
○ Pas efficace pour choisir les
spécifications

Niveau d'interactivité
Non interactif Faible interaction
● Fixe (ex : images, vidéos) ● Chemin prédéterminé
● Peut toujours montrer une ● Peut tester des formes alternatives
interaction... d'interaction
● Exemple : images, vidéos ● Exemple :
○ Séquence de captures d'écran
○ Utiliser des post-il pour
représenter des widgets
interactifs

Forte interaction
● Ouvert
● Les utilisateurs interagissent avec le système, avec certaines limitations
● Exemple : Magicien d'Oz
○ Technique de prototypage de nouvelles interfaces utilisateur
■ On joue avec du papier comme si c’était vrai
○ Le concepteur joue le rôle du système
■ Créer une expérience interactive pour l'utilisateur

M1 ANDROIDE – Sorbonne Université 12

Doan LE IHM – Fiches de cours
○ Utile pour créer des
■ Prototypes vidéo
■ Expériences en direct permettant d'explorer rapidement différentes
alternatives de conception
○ Très efficace pour les systèmes de reconnaissance vocale
Stratégies de prototypage
Prototypes verticaux
● Comprend une fonctionnalité
approfondie pour une seule fonction
● Exemple : vérificateur d'orthographe
Prototypes horizontaux
● L'interface de surface entière sans
fonctionnalité sous-jacente
● On peut seulement faire une
simulation : aucun travail réel ne peut
être effectué
Combiner les prototypes verticaux et
horizontaux pour pouvoir tester des
fonctionnalités avec une interface principale
Wireframing
● Illustration en deux dimensions de
l'interface d'une page qui se concentre
spécifiquement sur
○ la répartition de l'espace
○ la hiérarchisation du contenu
○ les fonctionnalités disponibles
○ comportements attendus
● Désavantages
○ L'accent est mis sur la
disposition de l'écran et non
sur l'interaction
○ Principalement statique
○ On suppose qu’il y a des
boutons, des curseurs, des
menus déroulants
● Il faut mieux se concentrer sur
l'interaction
○ Créez une interaction simple
mais puissante
M1 ANDROIDE – Sorbonne Université
11/03/2022
Task
● Créer la fonctionnalité nécessaire à
une seule tâche
● Exemple : ajouter et modifier une
image
Scénario
● Créez la fonctionnalité nécessaire pour
exécuter un scénario
● Exemple : modifier trois images et
vérifier l'orthographe d'un document
● Comme une minuscule pièce en un
acte
○ Subdiviser en micro-scènes un
paragraphe qui décrivent une
série de points d'interaction
● Créez un ou plusieurs personas et
décors réalistes
● Identifiez une série d'événements sur
une période donnée
● Équilibrer à la fois les situations
normales et inhabituelles
Use vs. Design scenario
● Raconter une histoire qui illustre
comment une ou plusieurs personnes
interagissent avec la technologie dans
un contexte réel
● Use scenario
○ S'inspire de l'observation
réelle de personnes
confrontées à des défis qu'une
nouvelle technologie pourrait
relever
● Design scenario
○ S'appuie sur des scénarios
actuels et imagine comment
ces personnes interagissent
avec la nouvelle technologie
dans ce contexte
13
Doan LE IHM – Fiches de cours 11/03/2022

Design vs. Concept scenario Design scenario → Video prototype

● Design scenario ● Design scenario → storyboard →
○ Aide les concepteurs à prototype vidéo
explorer les possibilités ● Fournit une manière successivement
○ Avantages : réalisme, remise plus profonde de penser pour une
en question des idées interaction
● Concept scenario ● Chacun doit être considéré comme
○ Aide à commercialiser ou à hautement interactif
“vendre” le concept ○ Créer des alternatives est peu
○ Avantages : utilisation coûteux
idéalisée, potentiel ○ Les utiliser pour explorer des
commercial alternatives
○ Ne pas avoir peur d'essayer et
de rejeter des idées

Évaluation
Pourquoi évaluer ?
● S'assurer que le système correspond aux besoins des utilisateurs ou aux objectifs
● Pour découvrir les problèmes ou juger les fonctionnalités du système
○ Facilite-t-il les tâches des utilisateurs ?
○ Offre-t-il les bonnes fonctionnalités ?
○ Est-il facile d'accès et présenté comme prévu ?
● Pour évaluer les effets sur les utilisateurs (comprendre les comportements des utilisateurs)
○ Le système est-il facile à apprendre et à utiliser ?
○ Comment les utilisateurs perçoivent-ils le système ?
○ Y a-t-il des domaines qui surchargent les utilisateurs ?
● Comprendre et prévoir les comportements des utilisateurs

Méthode empirique (avec l'utilisateur)

Empirique quantitative
Expérience en laboratoire (ex : Magicien
d’Oz)
● Avantages ● Désavantages
○ Équipement : audio/vidéo, ○ Environnement naturel
miroirs transparents, manquant (étagères, calendrier
ordinateurs spéciaux mural, rues, personnes...)
○ Pas de perturbations, calme ○ Situation non naturelle :
○ Seul endroit possible en cas manque de pertinence
d'utilisation réelle, de danger,
de distance (ISS...) ou de
situation contrôlée

M1 ANDROIDE – Sorbonne Université 14

Doan LE IHM – Fiches de cours 11/03/2022

Expérience sur le terrain

● Avantages ● Désavantages
○ Situations (lieu et contexte) ○ Bruit, interruptions de tâches
○ Comportement plus naturel ○ Toujours un ressenti comme
○ Plus réaliste (également en une situation de test
raison des perturbations)
○ Plus adapté aux études à long
terme

Hypothèses
● Une affirmation qui prédit le résultat d'une expérience
○ Hypothèse de recherche : Les utilisateurs pointent plus rapidement avec une souris
qu'avec un trackpad
○ Hypothèse nulle : Les utilisateurs pointent aussi vite avec une souris qu'avec qu'ils le
font avec un trackpad
● Une déclaration formelle qui présente la relation attendue entre une variable indépendante
et une variable dépendante (la modification des variables indépendantes influence les
variables dépendantes)
○ Les variables indépendantes sont variées et sous contrôle (ex : le nombre d'entrées
dans le menu)
○ Les variables dépendantes sont mesurées (ex : le temps d'exécution, les taux d'erreur,
la mémorisation)
○ Exemple : Le passage des minuscules aux majuscules (variable indépendante)
influence le temps de lecture (variable dépendante)
● Une hypothèse doit être
○ testable : les moyens de manipuler les variables et/ou de mesurer la variable de
résultat doivent exister
○ falsifiable : on doit pouvoir réfuter l'hypothèse à l'aide de données
○ précise : doit être spécifique (opérationnalisée)

Plan expérimental
● Between group ● Within group
○ Chaque groupe teste des ○ Tous les groupes testent la
choses différentes même chose
○ Nécessite d’avoir beaucoup de ○ Intervertir l’ordre des tests
personnes dans chaque groupe pour chaque groupe : permet
de regarder l’évolution de
l’apprentissage
○ Apprentissage difficile à
prédire

Programmer l’expérience
● Charger la bonne séquence d'essais à exécuter
● Programmer l'expérience pour présenter les essais et répondre aux entrées de l'utilisateur
● Enregistrer les données mesurées (fichier CSV)

M1 ANDROIDE – Sorbonne Université 15

Doan LE IHM – Fiches de cours 11/03/2022

Exécuter l'expérience
● Formulaire de consentement
○ Les sujets doivent rester anonymes
■ Associez un numéro à chaque sujet
■ Choisissez les conditions en fonction de ces numéros
● Instructions pour les participants
● Liste de choses à faire pour l'expérimentateur
● Pauses si nécessaire
● Débriefing + feedbacks après l’expérience
● Questionnaires / interviews semi-structurés

Analyser les résultats (R Studio)

● Analyses statistiques
○ Fournit les caractéristiques mathématiques des données
○ Décrit comment les ensembles de données sont liés les uns aux autres
○ Estime la probabilité que les hypothèses soient correctes
○ Tests effectués :
■ McNemar (Khi²)
■ T-test (Student)
■ One-way ANOVA (ANalysis Of VAriance)
■ Two-way ANOVA
■ Linear regression
● Rendu visuel (graphe, histogramme, …)

Faire un rapport
● Introduction
○ Objectif
○ Hypothèses
● Participants (âge, sexe, compétences, etc.)
● Appareillage (dispositifs utilisés, configuration, etc.)
● Méthodes
○ Stimulus et tâche
○ Procédure (instructions, pré-test, post-test, questionnaire, etc.)
○ Variables indépendantes et dépendantes
○ Conception (intra, inter, bloc, répétition, etc.)
● Résultats
○ Analyses statistiques
● Discussion
○ Revoir les hypothèses
○ Ce qui a bien fonctionné, les limites et menaces potentielles de validité, etc.

M1 ANDROIDE – Sorbonne Université 16

Doan LE IHM – Fiches de cours 11/03/2022

Empirique qualitative
Observation silencieuse
● Le concepteur observe l'utilisateur en ● Avantages :
laboratoire ou dans un environnement ○ aide à découvrir les grands
naturel pendant qu'il travaille sur l'une problèmes
des tâches. ● Désavantages :
● Pas de communication pendant ○ aucune compréhension du
l'observation processus de décision (qui
peut être erroné) ou le modèle
mental de l'utilisateur, ses
opinions ou ses sentiments

Think Aloud
● L'utilisateur est invité à dire à haute
voix
○ Son état : ce qu'il pense qu'il
se passe
○ Ses objectifs : ce qu'il essaie
d'atteindre
○ Ses actions : pourquoi il fait
quelque chose de spécifique
● Avantages :
○ Avoir un aperçu de la pensée
de l'utilisateur
● Désavantages :
○ Il est difficile de parler tout en
se concentrant sur une tâche
○ La plupart des utilisateurs
trouvent bizarre de parler à
haute voix
○ Parler consciemment peut
changer le comportement

Enregistrement des observations

● Papier et crayon ● Enregistrement audio
○ L'évaluateur note les ○ Bon pour le discours avec
événements, les Think Aloud et Constructive
interprétations et les autres Interaction
observations ○ Mais difficile à relier à l'état
○ Bon marché mais difficile de l'interface
avec beaucoup de détails ● Vidéo
(l'écriture est lente) ○ Idéal : 2 caméras (utilisateur
○ Les formulaires peuvent aider et écran) en une seule image
○ Meilleure capture, mais peut
être trop intrusif au départ

Test rétrospectif
● Activité supplémentaire après une
observation
● Le sujet et l'évaluateur regardent les
enregistrements vidéo ensemble,
l'utilisateur commente ses actions
rétrospectivement
● Bon point de départ pour un entretien
ultérieur, le fait de regarder la vidéo
évite les mauvais souvenirs
● Débouche souvent sur des suggestions
concrètes d'amélioration

M1 ANDROIDE – Sorbonne Université 17

Doan LE IHM – Fiches de cours 11/03/2022

Méthode analytique (sans l’utilisateur)

● Literature Review
● Cognitive Walkthrough
● Heuristic Evaluation
● Model-Based Evaluation

Évaluation heuristique
Procédure
1. Recruter un petit groupe (3-5) d’évaluateurs
2. Les évaluateurs vérifient indépendamment la conformité avec principes d’utilisabilité
(“heuristiques”)
3. Des évaluateurs différents trouveront des problèmes différents
4. Les évaluateurs ne communiquent qu'après coup
5. Les résultats sont ensuite agrégés

Avantages Désavantages
● Rapide et bon marché ● Subjectif (mieux fait par plusieurs
designers indépendants)
Les heuristiques
● Visibilité de l'état du système
○ Maintenir l’utilisateur toujours informé sur sa localisation à travers des marquages
appropriées dans un temps raisonnable
■ 0,1 sec : pas d'indicateur particulier
■ 1.0 sec : l'utilisateur a tendance à perdre le fil des données
■ 10 sec : durée maximale si l'utilisateur doit rester concentré sur l'action
■ pour des délais plus longs, utiliser des barres de progression du pourcentage
d'avancement de l'action
● Correspondance entre le système et le monde réel
○ Parler le langage des utilisateurs
○ Respecter les conventions du monde réel
○ Exemple de violation de convention : quand on glisse une disque dans la corbeille, il
faut le supprimer, pas l'éjecter
● Contrôle et liberté de l'utilisateur
○ Proposer des “sorties” en cas de choix erronés, pouvoir annuler ou refaire
○ Personnalisation possible
● Cohérence et normes
● Prévention des erreurs (ex : suggestions pour les recherches Google)
○ Minimiser la charge de mémoire des utilisateurs
● Reconnaissance plutôt que mémorisation (ex : autocomplétion, liste déroulante)
○ L’utilisateur ne doit pas se rappeler des informations d’une partie du dialogue à
l’autre
○ Les directives pour l’usage du système doivent être visible ou facilement récupérables
à chaque fois que c’est nécessaire pendant le dialogue
● Souplesse et efficacité d'utilisation
○ Accélérateurs pour les experts (ex : gestes, raccourcis clavier)

M1 ANDROIDE – Sorbonne Université 18

Doan LE IHM – Fiches de cours 11/03/2022

○ Permet aux utilisateurs de personnaliser les actions fréquentes (ex : macros)

● Conception esthétique et minimaliste
○ Eviter les informations non pertinentes dans les dialogues
○ Les préférences esthétiques diffèrent selon les cultures
● Fonction d’aide (reconnaissance, au diagnostic et à la récupération des erreurs)
○ Messages d'erreur explicites
○ Indiquer précisément le problème
○ Suggérer une solution de manière constructive
● Aide et documentation (ex : tutoriels, aide pour la sécurité des mots de passe)
○ Toutes les informations devraient être facile à chercher et être concentrées sur la tâche

Model-Based Evaluation
Il existe plusieurs modèles théoriques qui offrent un cadre pour la conception et l'évaluation
● GOMS (Goals, Operators, Methods, and Selection rules)
○ Modéliser le comportement à différents niveaux d'abstraction, depuis la tâche
jusqu'aux actions physiques
● KLM (Keystroke-Level Model)
○ Prédit le temps nécessaire à un utilisateur expert pour accomplir une tâche de routine
sans erreur à l'aide d'un système informatique interactif
● Design Rationale
○ Historique des décisions de conception avec raisons et alternatives
● Design Patterns

M1 ANDROIDE – Sorbonne Université 19

Doan LE IHM – Fiches de cours 11/03/2022

Cours 5 : Comportement humain

Modèle de processeur humain (CNM model)

Processeur en série :
● Processeur perceptuel Processeur en parallèle possible (ex : lire et
○ Traitement du stimulus : taper sur un clavier en même temps)
τp = ~10 ms [50 - 200]
● Processeur cognitive Stimulus d’identification : visuel, audio,
○ Traitement de l'information : haptique (toucher), olfactif , odorat
τc = 70 ms [25 - 170]
● Processeur moteur
○ Décision de l’action à faire :
τm = 70 ms [30 - 100]

Processeur perceptuel

Système visuel
Champe de vision Mouvement des yeux
● Fovéa (3-5°) : région où les détails ● Temps moyen : 230 ms [70 - 700]
sont les plus précis ● Saccades (déplacements des yeux) :
● Périphérie (180°) ~30 ms
● Fixation (arrêt du déplacement) : ~60
Outil : oculomètre (eye-tracking) ms (jusqu’à 700 ms)

Système auditif
Système auditif périphérique
● L'oreille externe
○ Réflecteur et atténuateur
○ Aide à identifier les directions
● L'oreille moyenne
○ Convertir les vibrations
sonores en vibrations sonores
de plus haute pression
● L'oreille interne
○ Remplie de liquide (plutôt que
d'air)
○ Cellules ciliées : transforment
les vibrations en signaux
électriques neuronaux
Conduction osseuse (ex : Google glass)
● Conduction du son jusqu'à l'oreille
interne à travers les os du du crâne
● Pour les personnes ayant une audition
normale et déficiente
● Presque inaudible pour les personnes
extérieures
Sons 3D
● Placement virtuel de sources sonores
n'importe où dans l'espace 3D
● Réseaux de haut-parleurs

Système auditif central : traite la hauteur, le

rythme, la fréquence, etc.

M1 ANDROIDE – Sorbonne Université 20

Doan LE IHM – Fiches de cours 11/03/2022

Système haptique
Sens tactile Sens kinesthésique
● Stimulation de la peau ● Stimulation avec la force ou les
● Température, texture, vibration, … mouvements
● Localisation de son corps dans
l'espace (proprioception)

Processeur moteur
Planifier le mouvement
● Dernière étape avant la communication avec l'environnement
○ L'utilisateur ne peut organiser et initier une action qu'après avoir avoir identifié le
stimulus et sélectionné une réponse
● Les programmes moteurs sont stockés en mémoire
● Le temps de réaction (TR) augmente avec la complexité du mouvement
● Exemple : déplacer la souris au moment où le carré rouge apparaît
○ processeur moteur = moment juste avant de déplacer la souris

Mémoires

Mémoire perceptuelle
Mémoire à court terme
● Stockage littéral de l'information (image physique, son physique, etc.)
● Les informations sensorielles sont stockées brièvement
● Se dégradent au fil du temps
● Très grande capacité (pratiquement illimitée)
● Dépend de la modalité (ex : visuel vs. audio)

Mémoire de travail
Lien entre la mémoire perceptuelle et la mémoire à long terme
● Prise de décision, répétition, encodage, ...
● "retenir l'information en cours d'examen"

Chunk
● Unité de mesure pour le mémoire
● Dépend de la tâche, la présentation, l'utilisateur, les connaissances préalables, …
● On peut alors augmenter la capacité de la mémoire à court terme de 7 à 79 éléments
● Relations entre les morceaux (hiérarchique ou similitude)
● Nombre d'éléments : 7 éléments [5 - 9]
● Durée : 7 s [5 - 34]
● Un nouveau chunk entre → les chunks précédents sont moins accessibles

M1 ANDROIDE – Sorbonne Université 21

Doan LE IHM – Fiches de cours
Mémoire à long-terme
Mémoire explicite (déclarative ou consciente)
● Savoir que quelque chose est le cas
(ex : Paris est la capitale de la France)
● Mémoire épisodique
○ Stocker des expériences
personnelles spécifiques
● Mémoire sémantique
○ Stocker des informations
factuelles
Mémoire implicite (procédural ou inconscient)
● Savoir comment faire quelque chose
(ex : faire du vélo)
Contrôle moteur
Degré de liberté (Degrees of freedom : DoF)
● Le nombre de DoF d'un système
correspond au nombre de variables
indépendantes qui sont nécessaires
pour décrire le système
○ Articulation = 1-3
○ Contraction musculaire = 1
● Bras
○ Au niveau de l'articulation : 7
(3 à l’épaule, 1 au coude, 3 au
poignet)
○ Au niveau musculaire : 26
Equivalence motrice
● Permet de faire le même mouvement
avec des effecteurs très différents
● Exemple : écrire de la main droite et
de la main gauche plus ou moins
similaire
M1 ANDROIDE – Sorbonne Université
11/03/2022
Stratégies pour améliorer la rétention
● Répétition : pratiquer
● Association : les nouvelles
informations doivent être liées à celles
précédemment apprises
● Simplicité : les nouvelles informations
doivent rester simples
● Organisation : la structure facilite la
mémorisation
● Imagerie : les images mentales
facilitent la mémorisation
● Significatif : les informations
pertinentes sont plus susceptibles
d'être mémorisées
● Chunking : les informations sont plus
facilement mémorisées si elles sont
regroupées ensemble
● Unicité, renforcement positif, …
Forward kinematics
● Retrouver la position de la main
● P(hand) = f(l1, l2, l3, o1, o2, o3)
avec l les longueurs des parties du bras
et o les angles des articulations
Backward kinematics
● Retrouver les positions des
articulations (angle)
● (o1, o2, o3) = f(l1, l2, l3, P(hand))
Redondance (ou abondance)
● Permet l'adaptabilité (flexibilité et
stabilité)
● Adaptabilité : capacité
d'ajuster/modifier le comportement
moteur dans de nouvelles conditions
afin d'atteindre l'objectif
● Exemple : index au même endroit mais
3 positions possible pour le bras
22
Doan LE IHM – Fiches de cours 11/03/2022

Loi de Fitts
● Relation entre l'amplitude (A) et la
largeur de la cible (W), et le temps de
mouvement moyen (MT) :
MT = a + b ID
○ ID : indice de difficulté
○ a : temps de réaction (temps
mis avant de déplacer le
curseur)
○ b : sensibilité
● La difficulté d'une tâche de pointage
est assimilée à la quantité
d'information transmise (bit/s) :
ID = log2(A/W + 1)
● Exemple : menubar Mac (fixé en haut)
et Windows (attaché à la fenêtre)
○ Mac : largeur de la cible infini
(problème si plusieurs onglets
ouverts)
○ Windows : diminue la distance
Réalisation du contrôle moteur
● Régulation basée sur les sens
○ Système de contrôle en boucle
fermée
○ Ajustement des mouvements
en fonction de ce qu’on voit
(ex : pointage)
● Régulation centrale des mouvements
○ Système de contrôle en boucle
ouverte
○ Mouvement rapide/balistique
(ex : musicien)

Acquisition de compétences
Formes de compétences
● Compétence cognitive ● Aptitude psychomotrice
○ donner un sens à un problème ○ mouvement volontaire du
et le résoudre corps avec un résultat final
● Compétence perceptive résultat final prédéterminé
○ interpréter rapidement des ○ frapper une balle avec une
informations à un moment batte, appuyer sur une touche
donné

Apprentissage
Contrôle du moteur Apprentissage moteur
● Processus qui rendent possible une ● Changements dans les compétences
performance qualifiée suite à la pratique ou à l'expérience

Pratique délibérée
● Off-task practice
○ motivation (importance, fixation ○ apprentissage perceptif (stimuli
d'objectifs) environnementaux)
○ information verbale (instructions, ○ apprentissage par l'observation (ex
concentration de l'attention) : regarder des vidéos)
○ pratique mentale

M1 ANDROIDE – Sorbonne Université 23

Doan LE IHM – Fiches de cours 11/03/2022

● On-task practice
○ répartition de la pratique (repos, ○ pratique partielle ou totale
temps total de pratique) (décomposition en petites parties)
○ variabilité de la pratique ○ conseils (feedback)

Feedback
● Sensoriel (intrinsèque) : son ressenti
● Augmenté (extrinsèque)
○ Connaissance du résultat
■ informations liées au résultat de la performance
■ faciliter l'atteinte des objectifs
○ Connaissance de la performance (kinematic feedback)
■ informations relatives aux caractéristiques spécifiques des composantes du
mouvement
■ motive l'apprenant à poursuivre ses efforts pour atteindre un objectif

Power Law of Practice

● Les performances tendent à suivre une fonction logarithmique de la pratique
● Fonctionne pour un groupe, mais pas pour un individu

3 étapes d’apprentissage (ex : écrire avec un clavier)

● Cognitive (déclarative) : novice
○ mémoriser la disposition du clavier de manière déclarative
○ intensif et lent
● Associative (déclarative + procédurale = transitoire) : intermédiaire
○ apprendre à utiliser le clavier de manière procédurale
○ pour certaines "touches problématiques" : utiliser les connaissances déclaratives (la
touche “Q” est au-dessus de la touche “A”)
● Autonome (procédural) : expert
○ utilise la mémoire procédurale, perte des connaissances déclaratives
○ retrouver l'emplacement de la touche “R” : imager la lettre et voir où va son doigt
(reproduction du mouvement / séquence de mouvements)

Rétention

Paradoxe de l'utilisateur assisté

● Externalisation (avec un guide)
○ Réduit la charge de la
mémoire
○ Peut avoir des conséquences
négatives sur la performance
Test ce qui a été appris après une pause et l'acquisition de
connaissances
Procédure ● Internalisation (sans guide)
1. Faire l’expérience ○ Stocker les informations en
2. Période de pause : 24h ou 48h mémoire
3. Refaire l’expérience

M1 ANDROIDE – Sorbonne Université 24

Doan LE IHM – Fiches de cours 11/03/2022

Transfert proactif
Facteurs
● Transfert positive
○ Mettre en évidence les
similitudes
○ Traitement similaire de
l'information
● Transfert négative
Test si une compétence déjà acquise affecte ○ Incompréhension du
l'apprentissage d'une nouvelle compétence mouvement
○ Mettre en évidence les
Procédure différences
● Groupe 1 : fait tâche A puis tâche B
● Groupe 2 (groupe témoin, différent du
groupe 1) : seulement la tâche B
● On mesure les performances de la
tâche B : temps de sélection
(performance) en fonction du temps
(apprentissage)
○ (x-y) / (x-c)
avec x le résultat du groupe 2,
y celui du groupe 1, c la
performance ultime
Rétention vs. Transfert proactif
○ transfert positive : la tâche A a
● Rétention
permit à l’utilisateur d’être
○ Compétence acquise pour une
meilleur pour la tâche B
tâche spécifique
○ transfert négative : moins bon
○ Même tâche que
pour faire la tâche B à cause
l'apprentissage
de la tâche A
● Transfert proactif
○ transfert nulle : tâche A n’a
○ Généralisation de la
pas d’impact sur la tâche B
compétence
● Exemple : faire du vélo inversé
○ Tâche différente de
○ plusieurs mois pour s’adapter
l'apprentissage
○ enfant : quelques semaines
(meilleur plasticité cérébrale)

Transfert rétroactif
Test si la nouvelle compétence affecte la compétence apprise précédemment

Procédure
1. Faire l’expérience
2. Période de pause : 24h ou 48h
3. Faire une autre expérience
4. Refaire la 1ère expérience

M1 ANDROIDE – Sorbonne Université 25

Doan LE IHM – Fiches de cours 11/03/2022

Cours 6 : Interaction tasks

Séquence d'interaction Tâche d'interaction
● Série de tâches d'interaction de base ● Unité d'action primitive
● Indépendant de l'application et du
matériel
● Orienté utilisateur

Six tâches d'interaction

● Position : pointage ● Sélection
○ curseur, saisie, commandes ○ sélection parmi un ensemble
directionnelles d'alternatives
○ 1D, 2D, 3D ○ alternatives : commandes ou
○ savoir la position éléments à l'écran
● Orientation ○ menu, ligne de commande,
○ curseur, saisie, commandes entrée vocale
directionnelles ● Texte
○ 2D, 3D ○ saisir une chaîne de texte
○ degrés de liberté ○ chaîne de texte faisant partie
● Chemin de l'information stockée
○ position + orientation + temps ○ clavier virtuel ou physique
○ 2D, 3D ● Quantification
○ gestes faits ○ spécifier une valeur
○ saisie, curseur

Pointage
Utilisation de la loi de Fitts

Pointage direct (ex : tablette)
● La position du curseur est "attachée"
au doigt
Pointage indirect (ex : souris)
● La position du curseur est contrôlée
par le dispositif
● Pas de lien entre la position de la main
et celle du curseur
● Hovering : pas de déplacement des
objets de la fenêtre quand déplacement
du curseur
Pointage absolu (ex : tablette graphique avec
le stylet)
● Mapping 1 à 1 entre l'espace d'entrée
et l'espace de sortie
● La position “donnée” est la “vraie”
position
Pointage relatif
● Le dispositif contrôle la position
relative du curseur
● Clutching (embrayage) : soulever la
souris pour continuer de bouger le
curseur
● Mapping ? combien de pixel se
déplace le curseur quand on déplace la
souris
● Le pointage relatif direct n’existe pas

M1 ANDROIDE – Sorbonne Université 26

Doan LE IHM – Fiches de cours 11/03/2022

Mapping
Contrôle
● Position : entrée humaine → position du curseur
● Rate (ou vélocité) : entrée humaine → vélocité du curseur (ex : joystick, trackpoint)

Dispositif
● isotonique
○ absence de résistance, mouvement libre (ex : souris)
○ le plus approprié pour le contrôle de la position
● isométrique
○ absence de mouvement, résistance
○ le plus approprié pour le contrôle de la vélocité
● élastique
○ la résistance augmente avec le mouvement (ex : joystick, tracepoint)

Control-Display Gain (CDG)

CDgain = Vpointer / Vdevice Dynamic CDG

● avec CDgain constant, Vpointer la
vélocité du curseur, Vdevice la vitesse
du périphérique d'entrée
● CDgain = 1 :
lorsque la souris se déplace de 1 cm, le
pointeur se déplace de 1 cm
● CDgain < 1 :
le pointeur se déplace plus lentement
que la souris (meilleure précision)
● CDgain > 1 :
le pointeur se déplace plus rapidement
que la souris (moins de clutching)
Autres stratégies
● Réduire la distance
○ Drag-and-pop : les icônes se
rapprochent automatiquement
du curseur
○ Ninjas Cursors
○ TorusDesktop
● Augmenter la largeur
○ Barre d'outils Mac : l’icône
grossit quand on s‘approche
○ Bubble cursor
● Le CDgain peut changer en fonction
de la vitesse de l'appareil
○ plus je déplace l'appareil
rapidement, plus le curseur est
rapide (accélération)
○ les mouvements lents font
diminuer le CDgain
● Exemple : MacOS vs. Windows 7
○ MacOS : peut être très précis,
tout comme très rapide
○ Windows 7 : trop linéaire, très
peu de différence entre les
niveaux, bug quand très lent
● Pointage sémantique
○ Le CDgain peut changer en
fonction de la représentation à
l'écran
○ L’espace moteur est plus
grand que ce qu’on voit
● La difficulté de la tâche
○ n'est pas liée à la
représentation à l'écran
○ mais à la difficulté réelle du
mouvement effectué dans le
monde physique

M1 ANDROIDE – Sorbonne Université 27

Doan LE IHM – Fiches de cours 11/03/2022

Pointage direct
Avantage
● Les utilisateurs interagissent Performance vs. Ergonomie
directement avec les objets (comme ● Système de capture de mouvement
dans le monde réel) ○ collecte des points de données
● Simulation biomécanique
Inconvénient ○ inversion des mouvements
● Faible précision (problème du gros observés pour en déduire des
doigt) événements anatomiques.
○ Occlusion (doigt, main) ● Simulation
○ Résolution d'entrée ○ mise à l'échelle (ajustement)
○ Parallaxe ○ inverse kinematics (angles à
● Solutions possibles toutes les articulations)
○ Phantom Pen ○ inverse dynamics
○ Interaction à l'arrière du (mouvements aux articulations
dispositif (pseudo - et forces)
transparence) ○ optimisation statique (forces
○ Interface consciente de exercées par les muscles)
l'occlusion (ex : retour clavier
avec le zoom et déplacement
de la lettre sur laquelle le
doigt est placé)
○ Zoom

Sélection
Première modalité Transition du mode novice au mode expert
● Mode novice
● item, menu panel, menu system Théories et modèles
Deuxième modalité ● modèle d'interaction simple
● Mode expert ● acquisition de compétences et prise de
● raccourci clavier et gestuel, décision
commandes dans le terminal

Première modalité : novice

Item
Nom de la commande Icône
● significatif ● sémantiquement lié
● compréhensible ● compréhensible
● rapide à lire ● complexité
● court ● taille
● esthétique

M1 ANDROIDE – Sorbonne Université 28

Doan LE IHM – Fiches de cours 11/03/2022

Exemple : Advanced item

● Touche de raccourci ● Mettre en évidence un élément
○ touches Ctrl / Shift fréquent
○ accès direct ○ transparence : mauvais
● Mnémonique ○ délai
○ touches alt (plusieurs étapes) ■ Menus temporels
● État : case à cocher ■ Menus pliés (folded
menus) : très mauvais
○ taille : manque de cohérence
spatiale

Menu panel
Organisation Mise en page
● alphabétique ● traditionnelle
○ recherche par commande ○ disposition verticale
○ ex : liste de contacts ○ mise en page horizontale
● sémantique ○ mise en page en grille
○ recherche de fonctionnalité ● circulaire (Pie menus)
○ utilisation de séparateur ○ distance radiale égale
● fréquence ○ 15 % plus rapide (pour 8
○ moins de recherche visuelle éléments)
○ moins de pointage ○ relations sémantiques
○ Split menus (ex : liste de ○ souvent utilisé dans les jeux
police) > Linear menus ● autre
■ si la fréquence ○ Occlusion aware
d’utilisation d’une ○ Arch
commande > 30% ○ User-drawn

Menu system
Identifier les relations entre les commandes Construire la hiérarchie des commandes
● Comparaison des similitudes pour ● Largeur
chaque paire de commandes ○ Scanner plus d'éléments en un
● Groupes exclusifs coup d'œil
○ Chemins plus courts
Recherche de titres de menus (ou de noms de ○ Moins de branches visitées
catégories) ○ Titres moins abstraits
● Recherche par fonctionnalité vs. par ○ Plus facile de construire un
commande modèle mental de la hiérarchie
● Refléter les commandes à l'intérieur ● Profondeur
des groupes ○ Moins d'éléments à scanner
● Eviter les chevauchements ○ Moins de précision
○ Moins d'alternatives
○ Moins d'éléments affichés en
même temps

M1 ANDROIDE – Sorbonne Université 29

Doan LE IHM – Fiches de cours 11/03/2022

Deuxième modalité : expert

Raccourcis clavier
● Défis de conception Méthodes d'enseignement
○ cartographie ● Retour audio, menu désactivé (oblige
○ collision de noms à apprendre les raccourcis)
● Avantages ○ indésirable dans certaines
○ accès direct situations
○ charge cognitive (1 opération) ○ frustration
○ espace d'écran ● Menu
○ interaction à deux mains ○ coûteux
● Inconvénients ○ nécessite plusieurs étapes
○ mémorisation ● Barre d'outils : ExposeHK
○ ergonomie (et parfois ○ cliquer sur Ctrl pour faire
performance...) apparaître les raccourcis à
● Avancés l’écran
○ gestes de rotation (poignet + ● Icônes : IconHK
bras) ○ mettre le raccourcis dans
○ raccourcis sensibles au doigt l'icône
(selon le doigt qu’on utilise) ○ peut être statique ou
○ touches étendues dynamique (feedforward)
○ retour haptique ● Clavier
○ statique : raccourcis
directement sur le clavier
○ dynamique : petit écran sur les
touches qui affiche les
raccourcis quand on appuie
sur Ctrl
○ virtuel : pareil que le clavier
statique mais en virtuel

Simple Interaction Model

Menu + raccourcis clavier Objet d’intérêt + sélection multiple

Valeur de contrôle : tout faire en un seul mouvement

M1 ANDROIDE – Sorbonne Université 30

Doan LE IHM – Fiches de cours 11/03/2022

Skill acquisition & decision making

Characterization

Interaction sous-optimale
● Observations
○ 50% des participants ne passent jamais aux raccourcis clavier (dans nos expériences
en laboratoire)
● Théorie
○ Paradoxe de l'utilisateur actif
■ Productivité à court terme contre efficacité à long terme
○ Biais d'assimilation
■ Les utilisateurs préfèrent les méthodes connues (aux méthodes plus efficaces)
○ Hypothèse des contraintes douces
■ Les utilisateurs trouvent que les techniques d’apprentissage qui fournissent
un retour d'information interactif sont les plus optimales

M1 ANDROIDE – Sorbonne Université 31

Doan LE IHM – Fiches de cours 11/03/2022

Cours 7 : Entrée de texte

Métriques
Word per minute (WPM) Points à avoir
● Ecrit : 13-22 wpm ● Efficacité
● Clavier ○ permet d'effectuer des tâches
○ virtuel : 35 wpm rapidement
○ physique : 60 wpm (expert : ● Robustesse
300 wpm) ○ taux d'erreur minimal, aide les
● Parler : 150 wpm utilisateurs en cas d’erreur
○ erreurs possibles (word) :
Interaction sous-optimale substitution (work), intrusion
● le paradoxe de l'utilisateur actif : (worrd), omission (wrd),
maximiser la satisfaction à court-terme transposition (wrod)
plutôt qu’à long-terme ○ seulement 40-70% des erreurs
sont détectées
Réticence au changement ● Découvrabilité
● coût économique et personnel ○ les utilisateurs peuvent se
● performance qui diminue pendant débrouiller sans tutoriel
l’apprentissage ○ utilisation par association
● temps d'apprentissage possible (ex : “€” sur la “e”)
● précision et correction des erreurs ● Ergonomique
● ne convient pas dans tous les contextes ● Satisfaction
● Familiarité

Keyboard design space (layout and button)

Layout (location and number of keys, keyboard dimensions)

Localisation des touches

QWERTY
● Clavier le plus commun
● Origine : télégraphiste pour la
traduction des messages en morse
● Souvent avec la main gauche
● Utilisation des doigts adjacents →
plus lent que les autres doigts
● ~30 % des frappes sur la rangée
inférieure → lent et difficile
● ~52 % des frappes sur la rangée
supérieure → loin à atteindre
Alphabétique
● Arrangement familière
Fitaly and Opti (virtuel : entrée au stylet)
● Arrangement par fréquence des
digrammes
Kalq (clavier virtuel pour tablette)
● Pour taper avec 2 pouces
● Clavier divisé en 2, un bout par pouce
(aux coins inférieurs de l’écran)

M1 ANDROIDE – Sorbonne Université 32

Doan LE IHM – Fiches de cours 11/03/2022

Dvorak (anglais) / Bépo (français) ● Des centaines d'études empiriques

● Performance ○ DSK plus rapide à apprendre
○ moins de mouvements ○ 5% plus rapide que le
bizarres avec les doigts QWERTY
○ moins de frappes avec le ● Confort
même doigt ○ réduit les microtraumatismes
○ moins de saut avec les doigts répétés
○ moins de frappes d'une seule ○ réduit le risque d’avoir le
main et pas l’autre syndrome du canal carpien

Nombre de touches
● QWERTY Tous les caractères n'ont pas la même
○ 26 touches pour les 26 lettres fréquence
○ barre d’espace ● Hoffman code (code de redondance
○ touche “entrée” minimale) : les symboles fréquents
● Half QWERTY : 17 touches obtiennent des codes plus courts
● Multitap (ex : téléphone à l’ancienne) ● ex : e → 010, t → 1101, a → 1011, …,
○ 11 touches z → 11000010100
○ prédiction (ex : T9)
● Manette de jeu : 5 touches Toutes les combinaisons de caractères ne
● 3 touches sont pas possibles
○ flèches gauche et droite + ● dépend du dictionnaire
touche pour sélectionner ● plusieurs alternatifs pour la même
séquence
Compromis : diminuer le nombre de boutons
et de dimensions → augmenter le nombre
d'actions

Word gesture keyboard

Principe Reconnaissance des gestes
● Tracer approximativement toutes les ● identifier le mot qui a la plus forte
lettres du mot voulu probabilité compte tenu du geste
● Théorème de Bayes
Performance ○ Ŵ = argmaxw P(G|W)P(W)
● pointage : loi de Fitts ○ P(G|W) : est la probabilité que
● croissement : loi de Accot & Zhai le mot geste de W
(comme Fitts, mais plus rapide) correspondent aux données de
l'utilisateur (positions de début
Facile d’utilisation / fun et de fin, DTW, template
● pas de problème du “gros doigt” matching)
○ P(W) : probabilité que le mot
Transition du novice à l'expert W soit le mot voulu par
● guidage visuel (novice) l'utilisateur
● geste (expert)

M1 ANDROIDE – Sorbonne Université 33

Doan LE IHM – Fiches de cours 11/03/2022

Button design
● Taille et orientation
● Point d’activation
● Couleur et matériel
● Virtuel ou physique
○ Physique : retour haptique riche
○ Virtuel : flexibilité (choix de langue), risque d'erreur (problème du “gros doigt”)
○ Autres : TiltText (zoomboard)

Handwriting

Smart pens
Dispositif qui capture l'écriture manuscrite Anoto pen
● téléchargée vers un ordinateur et ● motif de points non répétitifs imprimé
affichée sur le moniteur sur le papier (plus de 300 motifs
différents)
Technologies utilisées ● les points sont en noir pour la caméra
● stylo positionnel (positional pen) infrarouge
● stylo à bille roulante (trackball pen) ● les motifs peuvent être imprimés avec
● caméra une imprimante laser
● livescribe (reconnaissance de
l’écriture en temps réel)

Gesture text input

"Écriture" pure
● naturelle, mais difficile à reconnaître
● lent

Saisie de texte par gestes

● Unistroke
● Graffiti
○ plus facile à deviner
○ 5 min de pratique → 97% de précision
● Edgewrite
○ entrée : séquence de coins visités
○ contraintes physiques : déplacement du stylet le long des bords
○ public visé : personnes handicapées

M1 ANDROIDE – Sorbonne Université 34

Doan LE IHM – Fiches de cours 11/03/2022

Cours 8 : Interaction Gestuelle

Caractérisation des gestes

Définition Fonctions
● Un geste est un mouvement du corps ● Gestes sémiotiques (ex : langue des
qui contient des informations signes)
● Communication non verbale : le geste ○ pour communiquer des
est une étiquette pour les actions qui informations significatives
ont les caractéristiques ou manifestent ● Gestes ergotiques (ex : poterie)
une expressivité délibérée ○ pour manipuler le monde
● Différent du pointage qui ne prend pas physique et créer des artefacts
en compte le chemin parcouru ● Gestes épistémiques (ex : le braille,
les massages)
Les aspects d'un geste ○ pour apprendre de
● peut être statique ou dynamique l'environnement à travers
● est défini dans le temps l'expérience tactile ou
● est lié à un transfert d'informations l'exploration haptique
● est délibéré
● véhicule une expression

Conception d'une interface gestuelle

Principes
● Basé sur les compétences existantes de Étapes : Elicitation Study
l'utilisateur en matière de dessin et 1. Créer un ensemble de gestes
d'écriture manuscrite 2. Définir une correspondance
● Regroupement physique d'une geste-commande
commande et de ses opérandes en une 3. Choisir le dispositif
seule action 4. Reconnaître les gestes (gesture
● Changement de mode implicite et recognizer)
rapide 5. Fournir une méthode d'enseignement
● Interaction sans contact avec les yeux 6. Évaluer votre ensemble de gestes
● Alternative aux boutons pour les petits
écrans

Créer un ensemble de geste

Sans grammaire Avec grammaire
● Forme gestuelle qui convient ou ● Forme gestuelle qui ne suggère
suggère son sens (généralement) pas de sens
● Organisation
● Exactitude

M1 ANDROIDE – Sorbonne Université 35

Doan LE IHM – Fiches de cours 11/03/2022

Définir une correspondance geste-commande

Objectif : capturer des correspondances
"naturelles" Gestes définis par l'utilisateur
● Avantages
Procédure ○ Utiliser les attentes des
1. Plusieurs utilisateurs utilisateurs (mappings
2. L'expérimentateur démontre l'effet naturels)
3. Les utilisateurs doivent deviner le ● Problèmes
geste ○ Ne fonctionne que pour un
4. Pour chaque commande, gardez le ensemble minuscule de gestes
geste le plus fréquent ○ Collisions et correspondances
non-naturelles
Relations sémantiques
● Se concentrer sur les relations entre
gestes et commandes
● Mettre en évidence : similitude,
opposition, etc.

Choisir le dispositif (hardware)

Sur le dispositif Avec le dispositif
● Doigts ● Accéléromètre
○ pression ○ electromechanical device :
○ mouvement translation, rotation,
○ identification du doigt inclinaison
○ orientation du doigt ○ forces : statique ou dynamique
● Multitouch ● Gyroscope
○ nombre de doigts ○ capture bien les changements
○ partie du corps d’orientation
● Objet (ex : stylet) ○ problème : drift si utilisation
● Optical illusion : FTIR (Frustrated prolongée (réglé si combiné
Total Internal Reflection) avec accéléromètre)
● Magnétomètre
A distance du dispositif ○ champ magnétique
● Capacitive sensor ○ lent à mettre en place mais
● Leap motion bien quand combiné avec
● Depth sensing l’accéléromètre et le
○ stéréoscopie : reproduction gyroscope
d’une perception du relief à ● RGB (depth) camera
partir de 2 images planes ○ bien pour la translation, mieux
○ structured light : petit point pour la rotation
infrarouge (mauvaise
résolution) Autour du dispositif
○ time-of-flight camera : temps ● Capteurs
aller-retour de l’onde
○

M1 ANDROIDE – Sorbonne Université 36

Doan LE IHM – Fiches de cours 11/03/2022

Reconnaître les gestes (gesture recognizer)

Un système capable de prendre un geste
d'entrée inconnu et de le classer comme étant Approche basé sur des modèles
un élément d'un ensemble prédéfini de gestes ● Enregistrez un ensemble de gestes et
(vocabulaire). attribuer une étiquette à chacun d'eux
● Chaque geste enregistré peut être
Approche basée sur le training enregistré une ou plusieurs fois (avec
● Enregistrer plusieurs exemples d'un la même étiquette)
ensemble de gestes, attribuer une ● Pour un geste inconnu en entrée,
étiquette à chacun d'eux calculez la distance entre le geste
● Construire un modèle permettant de d'entrée et les gestes préenregistrés
discriminer les différentes données ● Renvoie une distance
● Pour un geste inconnu, prendre une ● Exemples en HCI :
décision basée sur le modèle ○ Libstroke
● Exemples : ○ Rubine (risque de
○ Support Vector Machine surapprentissage si trop
(SVM) d’exemples)
○ Naive Bayes (NB) ○ $1 recognizer
○ Gaussian Mixture Model ● Exemples en ML :
(GMM) ○ k-Nearest neighbor
○ Hidden Markov Model ○ Dynamic Time Warping for
(HMM), for temporal classification (DTW)
sequences

Algorithme de Rubine
1. L'utilisateur effectue un geste
2. Le geste est représenté comme une liste de points
3. Calculer un vecteur de caractéristiques statistiques (angle, longueur, distance, durée, …)
4. Comparer ce vecteur avec ceux des modèles (matrice de covariance)
5. Le geste reconnu est celui qui a le score le plus élevé

$1 recognizer
1. Ré-échantillonner le geste (invariant à
la fréquence d’acquisition et à la
vitesse d’exécution)
a. découper le geste en N = 64
points ordonnés équidistants
les uns des autres
b. calcul de la longueur totale du
geste → L = longueur / (N - 1)
c. interpolation linéaire sur les
points du geste d’origine →
permet de calculer la distance
en prenant les points 2 à 2
2. Ré-orientation du geste / rotation
“indicative” (invariant à l’orientation)
a. calcul du centre du geste
(centroïde)
b. calcul de l’angle entre le
centroïde, le premier point et
l'horizontale
c. rotation des points en utilisant
cet angle

M1 ANDROIDE – Sorbonne Université 37

Doan LE IHM – Fiches de cours
3. Mise à l’échelle et translation
(invariant à l’échelle et à la position) :
mise à l'échelle non uniforme → on
ramène le geste à un carré de référence
a. calcul de la bounding box
(calcul de min_x, max_x,
min_y, max_y)
b. mise à l’échelle
c. translation à l’origine
Reconnaissance du geste
● L’angle indicatif ne garantit pas que le
geste candidat C sera parfaitement
aligné avec un template
● On cherche à ajuster l’angle de
rotation de C pour minimiser la
distance entre C et Ti
● Golden Section Search :
○ Recherche d’une valeur
minimale pour une fonction
unimodale
○ Similaire à la recherche
dichotomique
Limitations
● Pas possible de distinguer un carré
d’un rectangle
● Pas possible de distinguer une ellipse
d’un cercle
● Pas possible de distinguer une flèche
vers le bas/haut
● Pas possible de reconnaître des gestes
“1D”
Dynamic Time Warping (DTW) : Déformation temporelle dynamique
Principe
● Déterminer pour chaque élément
d’une séquence, le meilleur élément
correspondant dans l’autre séquence
relativement à un certain voisinage et
à une certaine métrique
(Distance(Ri,Ti)).
● DTW réalise d’abord un alignement
non linéaire en cherchant parmi tous
les alignements possibles, celui qui
minimise une fonction de coût cumulé.
M1 ANDROIDE – Sorbonne Université
11/03/2022
4. Reconnaissance du geste
a. un geste candidat C est
comparé à chaque templates Ti
b. calcul de la distance moyenne
di entre les points
c. le template avec le di le plus
faible est le résultat
d. la distance est transformée en
score entre 0 et 1
Principes
● être résilient aux variations de
l'échantillonnage
● être invariants en termes de rotation,
d'échelle et de position (!= Rubine)
● ne pas nécessiter de techniques
mathématiques avancées
● être facilement écrit (~100 lignes de
codes)
● être rapide (interactivité)
● ne nécessiter qu'un seul exemple (>
Rubine)
● être indépendant du nombre de points
d'entrée
● être précis
● “Time Warping” : Dilatation ou
compression des séquence pour
obtenir le meilleur alignement possible
Calcul
● Séquence de référence R = [r1, r2, ...,
rn] et séquence de test T = [t 1, t2, ..., tm]
● Si m = n alors on peut calculer la
distance deux à deux :
𝑛
∑ 𝑑𝑖𝑠𝑡𝑎𝑛𝑐𝑒(𝑟𝑖, 𝑡𝑖)
𝑖=1
38
Doan LE IHM – Fiches de cours 11/03/2022

● Possibilité de calculer la distance ● Contraintes locales

euclidienne ou d’utiliser une autre ○ Monotonicité pour respecter le
métrique (fonction qui donne un réel) séquencement des points
● Pas possible d’utiliser cette méthode ○ Eviter les sauts dans le temps
dès que n ≠ m ○ Pour tout couple (ri, tj), le
● Attention : les échantillons doivent choix des prédécesseurs est
être équidistants en temps limité à (ri-1, tj), (ri, tj-1) et
● Calcul du chemin W = [w1, w2, ..., wk] (ri-1, tj-1)
de longueur minimale : ● Exhaustivité
𝑘 ○ Chaque élément de R doit être
∑ 𝑑𝑖𝑠𝑡𝑎𝑛𝑐𝑒(𝑤𝑖) mis en relation avec au moins
𝑖=1
un élément de T et vice-versa
● Conditions aux frontières
○ max(m, n) ≤ k ≤ m + n - 1
○ w1 = (r1, t,)
○ wk = (rn, tm)

Matrice de distance et alignement

Fournir une méthode d'enseignement

● Coût temporel ● quand fournir de l’aide
● Type d’information : texte + image ○ feedback : après que
(animation pas mieux) l’utilisateur a fait le geste
● où fournir l’aide (position) ○ feedforward : avant ou
● taille de l’aide (escape occupé) pendant

Évaluer votre ensemble de gestes

Evaluation empirique
Etude en laboratoire
● montrer un stimulus (ex : le nom d'une commande, un dessin)
● demander au participant d'effectuer le geste correspondant
● mesurer la performance (rapidité, précision, apprentissage, mémorisation, confort,
satisfaction)

M1 ANDROIDE – Sorbonne Université 39

Doan LE IHM – Fiches de cours 11/03/2022

Modèle de performance (contrôle moteur)

CLC model : 𝑇 = ∑ 𝑇(𝑙𝑖𝑛𝑒) + ∑ 𝑇(𝑐𝑜𝑟𝑛𝑒𝑟) + ∑ 𝑇(𝑐𝑢𝑟𝑣𝑒)

● Curve
○ ⅔ power law
○ La vitesse augmente avec la courbure
1/3
○ 𝑉(𝑡) = 𝑘 𝑅(𝑡)
● Line
𝑛
○ 𝑇(𝑙𝑖𝑛𝑒) = 𝑚 * 𝐿
● Corner
○ pas d'impact

Validation Améliorations possibles

● graphe temps actuel (en ms) en
fonction du temps prévu (en ms)
Limites
● "bonne" prédiction de performance
relative (comparer des vocabulaires)
● "mauvaise" prédiction du temps
absolu (le vocabulaire en lui-même)
● impact de l'entraînement (ex : corner
cutting)
● gestes familiers vs. non familiers
● impact de l'ensemble des gestes sur la
performance individuelle des gestes
Difficulté d’exécution
● plus c’est rapide (vitesse en temps
d’exécution), mieux c’est

M1 ANDROIDE – Sorbonne Université 40

Doan LE IHM – Fiches de cours 11/03/2022

Cours 10 : HAI, Robotique, VR

Human-AI Interaction (HAI)

Conception de systèmes interactifs

Conception centrée humain Machine Learning + Théorie
● Besoins utilisateur → Innovation → ● Modèle prédictif du comportement
Prototype → Evaluation humain + Optimisation et inférence
● Problème : coût (temps et argent) probabiliste
● Challenge : évaluation automatique de ● Théorie
l’interface ○ complètement controllable
○ hautement généralisable
○ moins consommateur de
données
○ difficile à éditer
● Machine Learning
○ facile à étendre
○ réactif
○ consommateur de données
○ peu contrôlable
○ peu généralisable

Computational design
Pratiques actuelles :
● interfaces conçues manuellement
● s’appuient sur l’expérience
Défi : méthodes pour la
automatique d’interface
Problème d'optimisation
● large espace de conception
● fonction d’évaluation
● contraintes (moteur, visuel)
Exemple :
● Clavier : Metropolis Keyboard (PDA -
Stylus)
génération ● Modèle : loi de Fitts
● Contraintes : fréquence des caractères
● Méthode d’optimisation : simulated
annealing / recuit simulé (méthode
statistique)

Optimisation interactive
Exemple : clavier AZERTY
● Nouveau layout
● Changer la touche pour le point pour ne plus avoir à faire shift, de même pour les chiffres

M1 ANDROIDE – Sorbonne Université 41

Doan LE IHM – Fiches de cours
Interagir avec les systèmes intelligents
Capturer les informations des utilisateurs
Traitement du signal
● Interaction gestuelle
● Reconnaissance des visages
● Multimodalité
○ Entrées : put-that-there,
parole, geste, regard, vision,
interaction à deux mains,
multitouch
Adapter l'interface
Desktop-based applications
● Caractériser la diversité
● Capturer la diversité
● Designer pour la diversité
● Personnaliser l'interface
Personnaliser l'interface
● Configurer (utilisateur)
○ informer, motiver, faciliter
● Adapter (système)
○ politique : plus récent (MRU),
plus fréquent (MFU),
combinaison des deux (CRF),
chaîne de Markov, access rank
(prédiction + stabilité + CRF
+ Markov + pondération
temporelle + seuil de
commutation)
○ représentation : attributs
visuels
● Approche mixte (utilisateur &
système)
○ créer ses propres raccourcis
gestuels : Fieldward (montre
un gradient de couleur
indiquant les directions
optimales pour faire un geste
reconnaissable)
M1 ANDROIDE – Sorbonne Université
11/03/2022
● Données physiologiques
○ EVHI (Environnement Virtuel
Hautement Interactif)
○ Capteurs :
électrocardiogramme,
électromyogramme, activité
électrodermale
○ Application axée sur les loisirs
Tutoring systems
● Tuteurs cognitifs
○ utilisation de logiciels pour
imiter le rôle d'un bon tuteur
humain
● Applications
○ formation aux langues
étrangères : reconnaître les
erreurs de langue et les
corriger
○ fournir des conseils lorsqu'un
élève est bloqué sur un
problème de mathématiques :
offrir un retour d'information
spécifique au contexte
○ apprendre aux techniciens de
l'armée de l'air à diagnostiquer
les problèmes des systèmes
électriques des avions
○ cours en ligne ouverts et
massifs (MOOC)
○ multiplier la taille des salles
de cours : génération
automatisée des questions
● Méthodes impliquées
○ modèles cognitifs (étudiant)
○ retour d'information (quand,
où, quoi, qui, comment)
○ reconnaissance automatique
de la parole
○ traitement du langage naturel
○ apprentissage automatique
42
Doan LE IHM – Fiches de cours 11/03/2022

Robotic systems
● humanoïdes
● robots chirurgicaux
● prothèses
● agents conversationnels incarnés
● drone, essaim robotique

IHM → AI
Donner un aperçu de l'avenir des systèmes Fournir des recommandations et des méthodes
basés sur l'IA ● Problèmes
● Que faire des technologies émergentes ○ divergence réelle ou perçue
en matière d'IA et de robotique ? entre les fonctionnalités du
○ créer / identifier de nouveaux système et l'interprétation
usages sociale
○ exemple : comment les drones ○ confusion, manque de
pourraient-ils changer nos confiance, faible taux
activités quotidiennes ? d'adoption
● Créer de nouveaux usages ● L'IA centrée sur l'homme
○ Brainstorming, espace de ○ conception basée sur les
conception, prototypage, … facteurs humains
○ Conception partiellement ○ amélioration de la technologie
centrée sur l'humain ○ conception conforme à
● Approche l'éthique
○ Résolution de problèmes ● Principes, lignes directrices, stratégies,
(besoins des utilisateurs) vs. vocabulaire, taxonomie
axée sur la technologie ○ explicabilité (XAI)
● Éthique

Systèmes robotiques
Interaction homme-robot (HRI)
● Sous-domaine de la robotique
particulièrement pertinent pour les
systèmes interactifs.
● Permettre aux robots d'interagir avec
succès avec les humains
○ Faire les choses correctement
en plus de faire les bonnes
choses
○ NOT : bras de robots
industriels utilisés dans la
construction automobile
● Domaine multidisciplinaire
○ Human Computer Interaction
○ Robotique
○ Vision par ordinateur
○ Intelligence artificielle
○ Psychologie cognitive
○ Traitement de la parole et du
langage

M1 ANDROIDE – Sorbonne Université 43

Doan LE IHM – Fiches de cours 11/03/2022

Industriel et médical

Robots industriels (robotic manipulator)

● Charges utiles lourdes
● Fonctionnement rapide et précis
● Grands degrés de liberté
● Environnement industriel contraint
● Coûteux
● Pas de réelle possibilité d'interaction

Robots médicaux
Robot DaVinci “Cobots”
● Chirurgien dans une console, ● Outils pour la laparoscopie
effectuant la tâche à distance ● Le chirurgien effectue la tâche
● Robot effectuant la manipulation manuellement
● 4 bras (ou plus) équipés de pinces ● Mode “pause” possible
médicales ● Procédure mini-invasive
○ moins de cicatrices et moins
de douleur
○ temps d'opération plus court
○ meilleur rétablissement

Sociaux et humanoïdes

Robots de recherche
Baxter iCub
● Deux bras avec pince ● Interaction avec l'environnement et les
○ peut interagir avec humains
l'environnement et les ● Plateforme pour l'IA
utilisateurs ○ taille d'un enfant de 5 ans
○ affichage facial ○ équipé de 4000 capteurs (y
● Avantages compris la peau)
○ modèle pour la manipulation ● Avantages
des tâches ○ caractéristiques humanoïde
○ caméras pour détecter ○ main à 5 doigts
l'environnement ○ affichage du visage
● Problèmes ○ autonome
○ pas mobile ● Problèmes
○ la main est une simple pince ○ fragile
○ pas stable (compliqué de faire
un modèle debout)

M1 ANDROIDE – Sorbonne Université 44

Doan LE IHM – Fiches de cours 11/03/2022

Robot social
Les utilisations des robots sociaux ● Recherche en IHM avec des “créatures
● Tutorat haptiques”
○ fournir un moyen amusant et ○ communication de l'émotion
interactif de pratiquer et de par le toucher
maîtriser de nouvelles ○ Look and Feel +
compétences d'apprentissage comportement connecté
● Compagnonnage
○ fournir un soutien émotionnel Niveau d’autonomie
aux jeunes, aux personnes ● Contrôle exécutif
âgées ou handicapés ○ L'humain peut donner un
● Aider les clients objectif abstrait de haut niveau
○ fournir des informations sur (ex : aller à un endroit précis).
les produits et services, les ○ Le robot détecte
heures d'ouverture des l'environnement de manière
magasins et les prix, … autonome, établit le plan et
Nao/Pepper exécute l'action.
● Avantages ● Autonomie complète
○ forme humanoïde ○ Le robot exécute tous les
○ anthropomorphisme aspects d'une tâche de manière
● Problèmes autonome sans intervention
○ manquent d'empathie, humaine pour la détection, la
d'émotion et de raisonnement planification ou l'exécution de
○ peuvent réagir de manière l'action.
imprévisible à des situations
pour lesquelles ils n'ont pas Anthropomorphisme : Uncanny Valley
été formés
○ sensibles aux
dysfonctionnements et aux
défaillances du matériel
○ peuvent nécessiter une
maintenance importante

Assistants et jouets
● But : interagir avec les humains
○ zoomorphisme
○ interaction et comportement
de type animal
○ mignon (socialement
acceptable)

M1 ANDROIDE – Sorbonne Université 45

Doan LE IHM – Fiches de cours
Interfaces à changement de forme
Changement de forme à grande échelle
● Rendu physique du contenu 3D
● Interaction avec un objet physique sur
la table
● Fabriqué avec un réseau de “tiges” qui
peuvent se déplacer de haut en bas
● Exemples : inFORM, MegaFaces,
Kinetic Screen, LiftTiles
Robots modulaires auto-reconfigurables
(MSR)
● Versatilité
○ Reconfiguration pour se
désassembler et/ou se
ré-assembler pour former des
morphologies bien adaptées à
une variété de tâches
● Robustesse
○ Système composé de
nombreuses parties répétées
qui peuvent être ré-arrangées
pendant le fonctionnement
○ Auto-réparation : les pièces
défectueuses sont mises au
rebut et remplacées par un
module identique à la volée
● Faible coût
○ Coûts moindres des modules :
la production en série de
modules unitaires identiques
présente un avantage
économique
● Exemples : M-Blocks 2.0, Molecube
Dispositifs actionnables
● Smartphone (ex : Mobilimb)
○ Améliorer l’ergonomie
○ Favoriser la collaboration
○ Augmenter le contexte
M1 ANDROIDE – Sorbonne Université
11/03/2022
Petite échelle, appareils mobiles
● Modifier certaines parties de l'appareil
(ex : courber l'écran pour plus de
lisibilité)
● Ajouter un contrôleur tangible
supplémentaire (ex : bouton sur le
pouce, surfaces de saisie
supplémentaires)
● Améliorer l'interaction
● Exemples : Morphees, Bendi,
ChainFORM
Robotique en essaim
● Coordination de robots multiples en
tant que système composé d'un grand
nombre de robots physiques et simples
● Explorer le comportement collectif qui
émerge des interactions entre les
robots et entre les robots et
l'environnement
● Avantages
○ Robustesse, évolutivité
○ Les comportements globaux
émergent des interactions
locales
● Tâches et comportements
○ Agrégation et rendez-vous
○ Déploiement et couverture de
zone
○ Rassemblement en troupeau et
contrôle de la formation
○ Recherche de nourriture et
transport
● Exemples : Zooids, Kilobots
● Desktop (ex : LivingDesktop)
● Wearable (ex : Rovables)
46
Doan LE IHM – Fiches de cours
Dispositifs robotiques avec feedback haptique
La technologie haptique désigne toute
technologie capable de créer une expérience
virtuelle du toucher (application de forces, de
vibrations ou de mouvements à l'utilisateur).
Objectifs
● Améliorer les méthodes de saisie
traditionnelles
● Feedback sans regard
● Divertissement (ex : immersion)
● Apprentissage / monde médical (ex :
chirurgie virtuelle)
● Substitution sensorielle (ex : appareil
pour les aveugles)
Contrôleurs pour la VR
● Problème de la VR
○ Impossible de toucher les
objets virtuels ou de sentir
d’environnement
● Solution
○ Ajouter au contrôleur un
actionnement robotisé
● Avantages
○ Tenus par l'utilisateur et
attachés au contrôleur
○ Permet l'immersion
○ Les utilisateurs ressentent les
objets virtuels
Augmentation humaine
L'utilisation de dispositifs robotiques permet
● Extension de l'expérience sensorielle,
de la physicalité et de la cognition de
l'homme
● Propulsion des capacités humaines
au-delà des niveaux physiologiques
innés, en permettant aux humains
d'effectuer un ensemble diversifié de
tâches avec des corps étendus
M1 ANDROIDE – Sorbonne Université
11/03/2022
Exemples de dispositifs haptique :
● Phantom / Falcom
○ Grounded device : quelques
degrés de liberté, peut sentir
les objets virtuels (élasticité,
rugosité, texture, …)
○ Simule le toucher en un seul
point de contact
○ Stylet relié à un bras en forme
de lampe : 3 petits moteurs
donnent un retour de force à
l'utilisateur en exerçant une
pression sur le stylet
● SwarmHaptics
○ Dispositif haptique avec des
robots en essaim
● Haptic Edge Display
○ Dispositif haptique sur les
bords des appareils mobiles
pour l'interaction tactile
● Linespace
○ Plateforme de création pour
les aveugles
Power Exoskeleton
● Augmenter la performance humaine
ou compenser un déficit
● Faciliter les mouvements pour
soulever et tenir des objets lourds, tout
en réduisant les contraintes au niveau
du dos
● Détection l'environnement de manière
autonome, élaboration des plans et des
objectifs, mise en œuvre des actions
● L’humain surveille les progrès du
robot et peut intervenir/influencer le
robot au besoin
47
Doan LE IHM – Fiches de cours 11/03/2022

Supernumerary limbs (membres ● Portés directement sur le corps et sous

surnuméraires) le contrôle direct de l'utilisateur
● Augmenter les capacités de ● Capacités supplémentaires au système
l’utilisateur en fournissant un sensorimoteur de l’utilisateur :
ensemble supplémentaire de membres ○ entrée : retour haptique et
robotiques, qui peuvent être contrôlés visuel
indépendamment des membres ○ sortie : nouveaux degrés de
naturels liberté
● Exemples : MetaLimb, The sixth
Finger, Hand Development Kit

Drones
Exemple :
● Utiliser un drone comme compagnon de vie qui te suit partout et qui affiche le menu sur
l’environnement (vidéo projection).
● L’interaction se fait à distance avec le bras.

VR et feedback haptique

Simulating objects Exploiting objects

Exemples :
Les accessoires passifs améliorent les
● Gants augmentés
environnements virtuels
○ manque de réalisme
● Augmentation d'un environnement
○ retour uniquement au bout des
virtuel haute-fidélité avec des objets
doigts
physiques
● Face Haptic
● Construits à partir de matériaux
● Electro Muscle Stimulation (EMS)
physiques bon marché et faciles à
○ réguler la course à pied avec
assembler
des petits stimulis au mollet
● Exemples : Nintendo Labo, utilisation
(pour poser les orteils avant le
de cube ou de vraies personnes
talon)

Robotic graphics
Principes Exemples :
● Utilisation d'un robot pour superposer ● Quadcopter (Beyond The Force)
des objets virtuels à des accessoires ○ s'approprier les objets et
physiques l'environnement pour
● Mettre l'accent sur les aspects mobiles, l'haptique dans la réalité
non encombrants et non attachés à virtuelle.
l'être humain ● Robot aspirateur
○ simuler les objets avec un
retour haptique
○ déplacer les objets IRL

M1 ANDROIDE – Sorbonne Université 48

Doan LE IHM – Fiches de cours 11/03/2022

● RoomShift ● TilePop
○ Robots essaims déplaçant des ● 3 colonnes virtuels mais seulement 1
meubles IRL qui peut se déplacer
● Bras robotique
○ cube avec une texture
différente par face
○ prothèse (main) pour simuler
les contacts humains

M1 ANDROIDE – Sorbonne Université 49