1 ENSEIRB Informatique Interaction Homme-Machine Jean-Michel Couturier, Blue Yeti, décembre 2011 Votre interlocuteur • Ingénieur ESIM (2000), option EII • DEA d’Acoustique (Master) • Thèse en informatique musicale • Création d’entreprise : Blue Yeti • Coordonnées: [email protected]- www.blueyeti.fr Interaction Homme-Machine Une définition : “l’Interaction Homme-Machine est une discipline concernée par la réalisation, l'évaluation et l'implémentation de systèmes informatiques interactifs pour une utilisation humaine ainsi par que l'étude des phénomènes majeurs afférents”. Qu’est-ce qu’un système interactif ? Un système interactif est une application informatique qui prend en compte, au cours de son exécution, des informations communiquées par le ou les utilisateurs du système, et qui produit, au cours de son exécution, une représentation perceptible de son état interne. Décomposition d’un système interactif ? Interface Noyau fonctionnel Système interactif Modèle conceptuel générique Réponses Feed-back Commandes Opérations Objets
25
Embed
Interaction Homme-Machine Qu est-ce qu un système …jmc.blueyeti.fr/downloads/IHM_ENSEIRB.pdf · Langages de programmation Systèmes conversationnels Interaction en langue naturelle
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
“l’Interaction Homme-Machine est une discipline concernée par la réalisation, l'évaluation et l'implémentation de systèmes informatiques interactifs pour une utilisation humaine ainsi par que l'étude des phénomènes majeurs afférents”.
Qu’est-ce qu’un système interactif ?
Un système interactif est une application informatique qui prend en compte, au cours de son exécution, des informations communiquées par le ou les utilisateurs du système, et qui produit, au cours de son exécution, une représentation perceptible de son état interne.
Décomposition d’un système interactif ?
Interface Noyau fonctionnel
Système interactif
Modèle conceptuel générique
Réponses
Feed-back
Commandes
Opérations Objets
2
Conception centrée utilisateur
Facteurs humains
Analyse
Etudes utilisateurs
Evaluation
Participation utilisateurs
Conception
Prototypage Instrumentation
Développement
Exemples d’utilisation
• Maison : ordinateur de bureau ou portable, télévision, console de jeux
• Travail : ordinateur, machines spéciales, caisses automatiques, …
Définition : suite d’actes effectués par un usager dans le cadre d’une tâche
Actes langagiers
Actes non-langagiers
On distingue la tâche prescrite de la tâche réalisée
Tâche et activité
Tâche = ce qui doit être fait
Activité = ce qui est fait
Exemple : distributeur de billets
Mise en situation de l’utilisateur : permet de comprendre son activité
-> tests d’utilisabilité
Tâche métier ≠ tâche système
-> réduire la tâche système au minimum
11
Théorie de l’action (D. A. Norman)
But de l’utilisateur
Plan
Suite d’actions
Exécution
Evaluation
Interprétation
Perception
Action motrice
Que
faire ?
Comment
le faire ?
Distance sémantique d’exécution
Distance articulatoire d’exécution
Distance sémantique d’évaluation
Distance articulatoire d’évaluation
Interaction Graphique
Action et perception
Gestes Retours Sonores Visuels Haptiques
Interface de contrôle
Utilisateur
Système
Retours secondaires Sonores
Visuels Haptiques
primaires
Interaction graphique
Interface graphique :
représentation “dessinée” (affichée) sur un écran d’une interface (réelle ou inventée) interactive entre l’utilisateur et la machine. L’utilisateur agit sur l’interface graphique par l’intermédiaire de périphériques d’entrée.
Périphériques usuels
Périphériques d’entrée :
– Dispositifs de pointage 2D : souris, trackpad
– Dispositifs de saisie de texte : clavier
– Captation d’image : Webcam
Périphériques de sortie :
– Ecran
– Haut-parleurs
Dispositifs de pointage 2D
• Sans superposition retour visuel primaire et secondaire :
• Avec superposition retours visuel primaire et secondaire :
Ecrans tactiles (avec doigts ou crayon)
• Sans les mains :
Eye trackers, head trackers, capteurs sur la langue
12
Dispositifs de Réalité mixte
Utilisent un ou plusieurs périphériques d’entrée et un périphérique de sortie.
Principales catégories :
– Affichage vidéo du monde réel, à l’aide d’écrans ou de lunettes-écran (HMD), certaines permettant de voir au travers
– Environnement complètement graphique mais partiellement immersifs : utilisation d’objets réels sur image virtuelle
Surface interactive : expériences tangibles
Surface interactive : expériences tangibles Dispositifs de Réalité Virtuelle
Immersion des utilisateurs dans des univers virtuels.
Superposition des retours sensoriels primaires et secondaires.
De très nombreux périphériques :
souris 3D et dispositifs de pointage 3D, gants de données, dispositifs de captation de mouvement, joysticks et bras à retour d’effort, exosquelettes, tapis omnidirectionnel, …
Typologie des dispositifs
Dispositifs statiques (écran)
Dispositifs mobiles (robots)
Dispositifs portables (PDA, téléphone)
Dispositifs vestimentaires (capteurs)
Dispositifs environnementaux (bornes, captation sans contact)
Exemple de dispositifs
Graphique (écran + clavier + souris)
Vocal (microphone + HP)
Gestuel (gant, retour d’effort)
Visuel (caméra, vidéo-projecteur)
Multimodal (mixte)
13
Périphériques d’entrée : typologie
Acquisition directe
Haptique Invasive non invasive
non haptique
Acquisition indirecte
Comparer les périphériques d’entrée
Rotation Translation
1 inf 1 inf 1 inf 1 inf 1 inf 1 inf
P
dP
dF
F
A
dA
dT
T
X Y Z rX rY rZ
s
s s
2
g
g g
g g
g 2 g
g g g
4
j j j j
j
j 13 1
c 109
taxinomie
j : joystick Saitek Cyborg 3D Gold
g : tablette graphique Wacom Intuos 2
c : clavier AZERTY
s : souris USB
Différents styles d’interaction
Systèmes conversationnels
Textuels
Vocaux
Menus, formulaires
Navigation hypertexte
Manipulation directe
Manipulation directe
Métaphore du « monde physique » – Adapter les fonctionnalités aux intentions de l’utilisateur
– Commandes transcrites sous une forme physique
– Informations affichées non ambiguës et faciles à lire
– Retours garants de la visibilité sur le fonctionnement de l’application
– Facilite l’apprentissage des utilisateurs débutants
– Offre un accès rapide aux utilisateurs expérimentés
– Simplifie la sélection des données
– Facilite les tâches répétitives
Reconnaissance de geste
Reconnaître les mouvements captés par un périphérique d’entrée par rapport à un vocabulaire gestuel prédéfini
Un geste va définir une commande et éventuellement ses paramètres
Ex : PDA, défilement à deux doigts sur les portables mac, …
Navigation : au-delà des menus
Différentes utilisations :
– Navigation discrète : Choix d’une commande parmi plusieurs
– Navigation continue : Déplacement dans un espace (ex: plan, jeu vidéo 3D)
14
Interaction multi-pointeurs
Permet d’augmenter les possibilités d’interaction :
– Combinaison de gestes pour effectuer une action
– Plusieurs actions en parallèle
– Plusieurs utilisateurs sur la même interface
Interaction 3D
Extension de l’interaction 2D (écrans) à un espace 3D
Techniques d’interactions s’inspirant :
– De situations réelles : saisie d’objets, navigation
– De techniques 2D comme le pointage
Principalement utilisées dans les jeux vidéos, en réalité virtuelle ou en visualisation d’information
Utilisation de système d’affichage 2D ou 3D
Interaction vocale
Utilisation du langage
Style d’interaction conversationnel
Entrée et sortie :
– En entrée : son de la voix capté par un micro et analysé par la machine -> commandes
– En sortie : Texte lu par un synthétiseur vocal
Peut être couplé avec d’autres modalités d’interaction
Accessibilité
Interaction WIMP : faciliter l’utilisation des interfaces existantes
– Sortie : afficheurs de brailles, zoom, textes descriptifs pour les images, synthèse vocale
– Entrée : systèmes de pointage adaptés, systèmes de saisie de texte, voix, capteurs divers …
Imaginer d’autres interfaces
IHM et mobilité : smartphone
Un petit écran…
…Associé à un grand nombre de capteurs
Multi-touch
Caméras
micro
Accéléromètres
boussole
GPS
Apple iOS : une IHM adaptée
Système et IHM crées sur-mesure
- SDK complet avec widgets préformatés
- Fonctionnalités spécifiques, gestion multitouch
- Utilisation de modèles physiques dans l’interface
15
iPhone et iPad
Interfaces différentes, adaptées à la taille des écrans et à l’usage
Google Android
• Open Source
• Personnalisation par les opérateurs / fabricants
• IHM hétérogènes
Microsoft Windows Phone 7
Marque une véritable rupture avec les anciennes versions
– Pour le texte : un dispositif de saisie (clavier)
– Affichage de l’interface : Ecran
Quelques conseils pratiques
16
Interaction WIMP : l’Ecran
Permet de visualiser l’interface graphique
Comment est-il parcouru ?
1ère exploration : en Z
Ensuite : recherche sélective
Utilisation des couleurs (1)
Perception de la couleur
Bleu périphérique : améliore la vision centrale
Eviter le bleu saturé pour texte ou petits objets
Rouge
Vert
Bleu
Utilisation des couleurs (2)
– Différencier les couleurs : les répartir de façon homogène le long du spectre visible.
– Distinguer les couleurs en teinte et en clarté
– Minimiser le nombre de couleurs : 7±2
– respecter le sens que l’utilisateur donne aux couleurs
– Utiliser les contrastes : différences, similarités
– Saturation : importance des informations
Attention à la fatigue visuelle !
Polices de caractère
– Ne pas utiliser plus de 3 polices de caractères
– Associer une police de caractères à chaque type d’objet
– Afficher les textes en minuscules avec une majuscule au début
– Utiliser une police droite
– Mieux vaut quelques lignes longues que plusieurs lignes courtes
– Aérer le texte
Icônes
Porteuse de sens et riche en symbolique
Occupe moins de place à l’écran
Appréciée des utilisateurs
Indépendante de la langue
Attention à l’interprétation et à la signification !
Construction des icônes
Ressemblance
Descriptif
Exemple
Caricature
Analogie
Symbolique
17
Icônes
• Le lien entre l’icône et son référent doit être le plus direct possible
• Utiliser des icônes pour les objets et les commandes fréquemment employés
• Accompagner l’icône de son nom
• Limiter le nombre d’icônes
Langage
Libeller les commandes et les messages
– Utiliser une syntaxe homogène
– Produire des messages brefs, concis, pertinents et clairs
– Utiliser des tournures affirmatives
– Respecter l’ordre dans lequel les actions doivent être exécutées
– Rester cohérent avec le reste de l’interface
Mise en évidence
Pour être efficace la mise en évidence doit rester exceptionnelle – Clignotement
– Inversion vidéo
– Graisse
– Taille
– Police de caractères
– Soulignement
– Forme
– Puces
– Proximité
– Encadrement
– Son
– Couleur
Dialogue homme-machine
Agencer le dialogue pour permettre à l’utilisateur d’explorer facilement le logiciel et y trouver les fonctionnalités nécessaires à sa tâche
• Compatibilité : présenter les commandes et les données dans l’ordre d’utilisation, regrouper les infos relatives à une même activité sur une même fenêtre
• Contrôle utilisateur : laisser l’initiative du dialogue à l’utilisateur
• Guidage : guider l’utilisateur pour faciliter la navigation
Conception des fenêtres
Multi-fenêtrage – Ne pas perturber la tâche utilisateur
– Faciliter l’activation et l’ouverture des fenêtres
– Autoriser la mémorisation d’un arrangement de fenêtres
– Moins il y a de fenêtres, plus elles sont complexes
– Minimiser la quantité d’informations à mémoriser d’une fenêtre à l’autre
– Inadapté aux petits écrans (smartphones,…)
Conception des fenêtres
Fenêtres de dialogue – Présenter les composants dans l’ordre d’utilisation
– Minimiser les déplacements de la souris
– Mettre en évidence les éléments les plus importants
– Regrouper les commandes en fonction de leur sens
– Donner un titre à chaque groupe d’objets
– Eviter les fenêtres trop verbeuses
– Fournir une aide contextuelle
– Diminuer les saisies clavier
– Permettre un accès rapide et direct aux utilisateurs expérimentés
– Guider l’utilisateur
18
Conception des fenêtres
Boutons Pour les commandes fréquemment utilisées
Préciser l’intitulé en toutes lettres
Composants de sélection Pour choix fréquents et peu nombreux
Liste lorsque place réduite et choix peu fréquents ou variables
Champs de saisie Libellés les plus courts possibles
Proposer par défaut la valeur la plus courante
Prévenir les erreurs de saisie Laisser l’utilisateur choisir les unités
Guider l’utilisateur dans la saisie
Menus
Le menu guide l’emploi d’un système – Minimiser la taille des menus
– Organiser le menu selon l’utilisation (séquentialité, fréquence d’usage, importance)
– Les commandes à effet destructeur sont en bas
– Les commandes non disponibles sont grisées
– Permettre un accès rapide et direct aux commandes fréquentes par un raccourcis clavier
– Menu contextuel : pour les commandes fréquentes et rapides, signaler les objets ayant un menu contextuel
Manipulation directe
Métaphore du « monde physique » – Adapter les fonctionnalités aux intentions de l’utilisateur
– Commandes transcrites sous une forme physique
– Informations affichées non ambiguës et faciles à lire
– Retours garants de la visibilité sur le fonctionnement de l’application
– Facilite l’apprentissage des utilisateurs débutants
– Offre un accès rapide aux utilisateurs expérimentés
– Simplifie la sélection des données
– Facilite les tâches répétitives
Erreurs et aide
Plusieurs types d’erreurs
– Erreurs d’intention
– Erreurs d’exécution
– Erreurs perceptives
– Erreurs cognitives
– Erreurs motrices
Erreurs d’intention
Faciliter l’apprentissage
- Guider l’utilisateur
- Fournir une visibilité sur le fonctionnement du système
- Fournir un retour aux actions de l’utilisateur
- Rendre possible l’exploration du logiciel
- Fournir une aide en ligne adaptée à la tâche
Erreurs d’exécution
Sous-systèmes à l’origine des erreurs d’exécution
Erreurs motrices
Erreurs cognitives
Erreurs perceptives
Homme Machine
Interface
Lecture
Pensée
Réponse
19
Erreurs perceptives
Faciliter la reconnaissance
– Utiliser les techniques de mise en évidence
– Rendre clairement visibles les changements de mode et les états du système
– Fournir un feed-back immédiat aux actions de l’utilisateur
Erreurs cognitives
Faciliter et diminuer le travail de mémorisation
– Minimiser le calcul mental
– Fournir des aides mnémoniques
– Concevoir un mode de dialogue et une présentation cohérente
– Mettre en jeu la reconnaissance plus que le souvenir
Erreurs motrices
Eviter les erreurs de manipulation
- Agrandir les objets à sélectionner
- Prévoir les appuis accidentels
- Eviter de changer trop souvent de moyen d’interaction
- Minimiser les saisies clavier
Prévention des erreurs
Réduire les possibilités d’erreurs
– Signaler à l’utilisateur lorsqu’une commande est irréversible et lui demander confirmation
– Rendre inactives les commandes indisponibles
– Rendre actifs les champs en fonction du contexte
– Tester pour identifier les erreurs
Correction des erreurs
Réversibilité
– Signaler l’erreur au plus tôt
– Permettre de modifier facilement les saisies erronées
– Permettre le retour en arrière
– Autoriser les interruptions pour les commandes longues
Messages d’erreurs
Préciser la nature du problème et donner les moyens d’y remédier
– Message coopératif
– Descriptif du problème
– Non ambiguë – Adapté au niveau de connaissances de l’utilisateur
– Message qui ne culpabilise pas l’utilisateur et ne dramatise pas la situation
– Non anthropomorphique
20
Messages d’erreurs Aide en ligne
Structurer l’aide en ligne en s’appuyant sur la tâche utilisateur
L’aide participe à l’apprentissage du logiciel
– Bulles d’aide
– Manuel en ligne
– Assistant (wizard)
– Didacticiel
Utilité et utilisabilité
Utilité : capacité de l’objet à servir la réalisation d’une activité humaine
Utilisabilité : facilité d’emploi de cet objet
> Notion qui englobe à la fois la performance, la satisfaction et la facilité
Utilisabilité : évaluation ergonomique
Faire coïncider fonctionnalité et utilisabilité
fonctionnalité utilisabilité
Evaluation par inspection
Principes ergonomiques Logiciel
Composants Grille de critères
Analyse
Evaluation par inspection
Le dialogue est-il simple ?
Le langage utilisé est-il celui de l'utilisateur ?
Le travail de mémorisation est-il minimal?
La présentation et le dialogue sont-ils cohérents ?
Les retours sont-ils visibles ?
Les sorties sont-elles explicites ?
Existe-t-il des raccourcis ?
Les messages d'erreur sont-ils explicites?
Les erreurs sont-elles évitées ?
Existe-t-il une aide ?
Le logiciel est-il documenté ?
Exemples de check-list (tirée de www.usabilis.com )
21
Test de perception
Savoir ce que l’utilisateur perçoit et comprend de l’interface
– Compréhension fonctionnelle
– Occasion de valider la charte graphique
Test de Perception
• Que permet de faire cette fenêtre ?
• Où se trouvent les boutons/les menus ?
• Que signifient-ils ? A quoi servent-ils ?
• Que va-t-il se passer quand on clique sur ce bouton ? Quand on sélectionne ce menu ?
• Pour une tâche type, comment faire ?
Aspect fonctionnel :
Exemples de questions à poser (tirées de www.usabilis.com )
Test de Perception
• Que ressent l'utilisateur ?
• Que pense-t-il du graphisme ?
• Quel thème associe-t-il au graphisme ?
• Que regarde-t-il en premier ?
• Qu'aime-t-il et que n'aime-t-il pas ?
• Quelle impression garde-t-il d'une entreprise qui affiche cette image ?
Graphisme :
Exemples de questions à poser (tirées de www.usabilis.com )
Evaluation coopérative
Observation de l’utilisateur en mise en situation
– L’inviter à penser à voix haute
– Identifier les processus cognitifs
– Dès les premières phases du développement
Evaluation coopérative
• « Que voulez-vous faire ? » : L'observateur identifie le but poursuivi par l'utilisateur.
• « Comment faites-vous cela ? » : L'utilisateur explique le mode opératoire qu'il met en œuvre pour atteindre ce but.
• « Que fait le système ? Que veut dire ce message ? » : L'observateur vérifie si la réponse du logiciel est correctement comprise et qu'elle correspond à ce que l'utilisateur attendait.
Exemples de questions à poser (tirées de www.usabilis.com )
Test d’utilisabilité
Un système est utilisable lorsqu’il permet à l’utilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans le contexte d’utilisation spécifié.
22
Test d’utilisabilité
Tester les trois critères :
- Efficacité (objectifs visés = atteints ?)
- Efficience (quelles ressources nécessaires pour atteindre l’objectif ?)
- Satisfaction (système agréable à utiliser ?)
Test d’utilisabilité
Protocole de test
- Placer l’utilisateur dans un contexte le plus proche de l’utilisation réelle
- Le test permet d’évaluer le logiciel, pas l’utilisateur
- Définir un objectif précis par séance de test
- Choisir un panel représentatif
- Cinq utilisateurs suffisent
Développement logiciel centré utilisateur
1- Analyse de la tâche - Construction d’un modèle de la tâche
2- Analyse de la situation de travail et choix de conception
3- Spécifications : manuel utilisateur
4- prototypage
5- "Après-vente"
Développement logiciel centré utilisateur
1- Analyse de la tâche - Construction d’un modèle de la tâche
Etape 1 : interviews pour identifier la tâche prévue
Etape 2 : observation des utilisateurs sur leur lieu de travail pour modéliser l’activité effectivement réalisée
Permet de structurer l’interface homme-machine
Développement logiciel centré utilisateur
2- Analyse de la situation de travail et choix de conception
Observation, interview et questionnaire sur le lieu d’utilisation
Permet de concevoir l’interface homme-machine
Développement logiciel centré utilisateur
3- Spécifications : manuel utilisateur
Spécifier le logiciel en écrivant le manuel utilisateur incite à adopter le point de vue de l’utilisateur
= prototype papier
= revu en fin de développement et mis à jour
23
Développement logiciel centré utilisateur
4- prototypage
Première version de l’application
• Prototypage horizontal : partie graphique de l’IHM
• Prototypage vertical : mise en œuvre de certaines fonctionnalités