introduction au domaine de l’interaction...
Post on 10-Sep-2018
214 Views
Preview:
TRANSCRIPT
1
1
Introduction au domaine de l’Interaction Homme-Machine
Philippe Palanque
LIIHS-Université Paul Sabatierpalanque@irit.fr
http://liihs.irit.fr/palanqueBureau 275 IRIT 2
2
Objectifs du coursIntroduction au domaineIntroduction aux conceptsIntroduction aux techniquesTable des matières du Master IHMLien entre les différents cours du MasterInformations générales pour les chefs d ’oeuvre
2
3
Contenu du coursEléments de «User Centered Design»Eléments d ’ergonomieEléments de psychologie cognitiveEléments de génie des systèmes interactifsEléments de technologie des systèmes interactifs
4
BibliographieLes Interfaces Homme-Ordinateur Joëlle Coutaz, Dunod, 1990 épuiséDesigning the User Interface B. Shneiderman 1997The psychology of everyday things Donald Norman, BasicBooks, 1988User Interface Management Systems Dan Olsen, 1998The Psychology of HCI, Card Moran & Newell 83 Lawrence Erlbaum eds.Human Computer Interaction, Jenny PreeceHuman Computer Interaction Alan Dix, Greg Abowd, Janet Finlay
3
5
La Carte de l’IHM
6
Ça ne marche jamais !!!Utilisateur
Input deviceOutput
device
UnitéCentrale Tâches
Un utilisateur en pleine activité
4
7
Quelques définitionsSystèmes InteractifsInterface Homme-MachineCommunication Homme-MachineModèle d’interactionStyle d’interactionMétaphore d’interactionDialogue, noyau fonctionnel
8
Systèmes interactifs
Interface => Communication - Canal, Langage, Sens
Homme => Tâche - Prise en compte de facteurs humains
Ordinateur => Processus - Aspects logiciels
application interactive
interfacenoyau
fonctionnel
5
9
Communication Homme-MachineCanaux de communication
Entrée/sortie: 2 Plans différentsE: Textuel: Langage de commandeGestuel: Souris, Interface GraphiqueVocal, Gestuel évolué, Multi modal
S: Ecran, Ecran Graphique, Synthétiseur…
Langage = Mode d'interactionPlusieurs Méthodes d'expression pour un même média
Objectif de la communicationExécuter une tâche = Entrer des commandes et
interpréter des sorties
10
Modèle d'interactionModèle d'interaction : Aspect morphologique de
l'interactionStyle d'interaction : Aspect morpho-lexical et morpho-
syntaxique=> choix d'utilisation des périphériques
Compromis entre plus naturel et plus simple à implanter
Exemple: interfaces iconiques- choix objet-verbe ou verbe-objet...- cohérence inter-applications
6
11
Modèle d'interactionModèle d'interaction : Look (qu'est-ce que l'on montre)Style d'interaction : Feel (comment on manipule)Métaphore d'interaction Exemples :
Représentation des objets sous forme iconiqueConstruction d'une commande (action-paramètre ou paramètre action)Mode de saisie de la commande :
Drag and dropSélection MenuLangage de commande
12
Séparation Interface/Application
80 % du code d'une application peut être considérécomme faisant partie de la gestion du dialogue (Brad Myers 90)
Application non modulaire
Application
Interface & E/S
7
13
Proportion interface/noyau
Editeurs (de textes, de dessins, ...)
Code de calcul
14
Séparation interface/noyauAu niveau de l'ordinateur, architecture logicielle séparer :
Ce qui établi la communication, Ce qui gère le dialogue Ce qui fait les opérations effectives.
Application modulaireInterface
E/S, Système
Noyau Fonctionnel
Utilisateur
8
15
Séparation Interface/Application
Repré-sentation
externeDialogue
Noyau Fonction-
nel
Architecture SeeheimUn exemple d'architecture favorisant la séparation interface / application
16
Objectifs d'une interface utilisateurAméliorer la communication
Communication "naturelle"Cohérence intra et inter applicationsMétaphores
Communication efficaceChoix des styles d'interactionStructures de tâches et sous-tâchesÉtude de la fréquence des commandesMéta-communication
9
17
Caractéristiques d'une bonne IHMAdaptée aux besoinsFacile à apprendreIntuitive : prédictibleRassurante : apprentissage par essais - erreursAgréable - esthétique - dynamique - ludiquePerformante : tâches rapides à exécuter -réactions immédiates
18
Compétences RequisesUne Approche multi-disciplinaire
InformatiqueDomaine de l'ApplicationConnaissance de l'utilisateur
Nécessite d'être centré sur l'utilisateurPenser à luiConnaître ses caractéristique cognitivesConnaître son environnementSe mettre à sa placeCommuniquer avec lui
10
19
Domaines abordésTous et même plus
Application de bureauSystèmes temps réel critiques (avion, ATC, …)
Systèmes E/S Systèmes standard (souris, clavier, écrans)Systèmes exotiques (tout !!)
20
Enjeux Socio-EconomiquesUn sujet de plus en plus à la mode
Presse et médiasIndustrieRecherche
Change l'aspect du dév. informatique80 % du code des applications interactives est consacré àl'interface
Change le marchéInformatiqueNon-informatique
11
21
Pourquoi des IHM graphiques
Enquête du DOD, 1970 et de la crise du logiciel(75 % des logiciels livrés ne sont pas utilisés)
• Pb de modification des besoins (Maintenabilité)• Pb d'erreurs d'exécution (Fiabilité)• Pb de refus d'utilisation (Utilisabilité)
Les remèdes apportés par le génie logiciel• Approches à objets (composants réutilisables)• Méthode formelles de conception • Prise en compte de l'utilisateur lors de la conception• Ateliers de Génie Logiciel
22
La crise du logiciel
logiciel livré, mais jamais utilisé avec succès : 3,2 millions $
logiciel utilisé tel que livré 119 000 $
logiciel payémais non livré1,95 millions $
logiciel utilisémais remaniésouvent puis abandonné1,3 millions $
logiciel utilisé après modifications 198 000 $
Rapport du GAO (Government Accounting Office) sur la répartition des coûts de neuf projets de taille moyenne [GAO 79]
12
23
Pourquoi de nouvelles interfacesInformation plus complexe à manipulerNouveaux types d'applicationTâches moins précises Utilisateurs plus variables (niveau de connaissance, catégorie (cadres))
Faire un outil qui exploite plus les caractéristiques de l'utilisateur (informatique : outils très complexes)Mais aussi révolution technologique permet de mettre en œuvre ce type d'interfaces
24
Exigences du marchéDe plus en plus de produits efficaces:
Il faut se tenir à jour avec la concurrenceou: il faut garder la compétitivité de l'entrepriseen améliorant la circulation de l'information
-> création d'un besoinImpossible de revenir en arrièreDe nos jours il faut concevoir pour les NTIC, ou au moins savoir le faire
13
25
Dangers d'une "mauvaise" IHMRejet pur et simple par les utilisateursCoût d'apprentissage (formation)Perte de productivité des utilisateursUtilisation incomplète: manque à gagnerCoûts de maintenance Perte de crédibilité
26
Rentabilité d'une IHMConcevoir une application interactive:Coût Important à la conception: tests, expérimentations, consultationsChoisir un bon compromisDeux parties (une visible - une cachée)
Présentation --- DialogueStatique --- Dynamique
Facteurs humains très coûteux
14
27
Exemples de mauvaise conception
Libellés non clairs ou ambigus (syntax error…)Fonctionnalités inutilesEcrans trop denses, mal structurésEcrans trop nombreux"Chemins" trop longsContexte inconnu ou oubliéEssai en vol (Aéro)
28
Détecter une mauvaise IHMConvivialité:
Qui a la main ?Où suis-je, où en étais-je ?J'ai peur de faire une bêtise, …
Efficacité:Passages claviers/sourisDans quel menu se trouve quelle fonction ?Complexité des commandes
15
29
Exemple : logiciel de calcul
prochaine valeur ? 5.45prochaine valeur ? 3.00prochaine valeur ? 8.33
résultat = 65.43
30
Exemple : tableur
16
31
Exemple de manipulation indirecte
Identifier :
32
Manipulation directe
Représentation visuelle des objetsVisualisation des commandes possiblesInteraction constante, construction progressive du but à atteindre."Manipulation" comme dans le monde réel
17
33
Exemple de manipulation directe
34
Taxonomie des modèles et styles d’interaction
Matérielle - Historique - FonctionnelleModèle Télétype (Ligne de Commande)Modèle Terminal Vidéo (Ecran + Clavier)Menus & Ecrans de saisieInterfaces IconiquesSystèmes de FenêtrageManipulation Directe & Interaction GraphiqueNavigationLangage Naturel
18
35
Périphériques d'entrée• Claviers
• Potentiomètres (rotatifs, linéaires)
• Souris, tablettes, manches à balai, boules
• Ecrans tactiles, crayons optiques
• Lecture optique
• Capteurs de position et de direction
36
Outils de pointage
Crayon optique
Ecrantactile
Souris
Tablette
Manche à balai
Boule
peu confortable peu fiable
fatigueprécision médiocreproximité de l'écranasez cher
précision moyenne
saisie du styletassez cher
précision moyennecontrôle plus difficilemoins rapide
précision moyennemoins rapide
pratique et simplerobuste
pratiquerapiderobuste
très préciscalque
robustebon marchécontrôle déplacementrobustebon marché
Inconvénients Avantages
19
37
Hypertextes
Technique de présentation de documentsEnsembles de pages (cartes, fiches)Texte, dessinLiens entre pages (ordre + zones sensibles)Services pour aider la navigation
38
Hypertextes
évolution : d'une technique de présentation à un outil d'interactionanimation, interaction sur une pagelangage de programmationextension à d'autres médias (hypermédias)
-> excellents outils de prototypage d'interfaces graphiques
20
39
Utilisation de l'animation
médium de présentationdessin animé, aide animée, etc.
artifice de présentationvisualisation scientifiqueanimation de programmes
40
L'animation comme artifice
donne du feed-backfacilite les changements de contexte
14 items 7.7 MB available
home
folderexec1
7.7 MB available2 items
21
41
Nouvelles dimensionsgraphiquevidéoaudioparole (synthèse)
clavier / sourisparole (reconnaissance)gesteregard
homme machineMultimediaMultimedia
MultimodalMultimodal
homme
homme
machine
hommeMultiutilisateursMultiutilisateurs
42
Où allons-nous ?
22
43
Erreurs peuvent avoir de graves conséquences
The captain (Kevin Hunt) believed the right enginewas malfunctioning due to the smell of smoke, because in previous Boeing 737 variants, bleed airfrom the engines for the air conditioning system wastaken from this engine. However, starting with the Boeing 737-400 variant, Boeing redesigned the system so both engines fed it. Several cabin staff and passengers also noticed that the left engine had a stream of unburnt fuel igniting in the jet exhaust, but this information was not passed to the flight crew, because they thought that the pilots knew what theywere doing. Forty-seven of the 118 passengers (126 people on board including flight staff) died (39 at the scene, 8 later). All eight of the flight crew survived the accident. Of the 79 survivors, 5 had minor injuries and 74 were seriously injured. No-one on the motorway was hurt (and no vehicles were damaged), although one driver did subsequently receivedamages for post-traumatic stress disorder.
44
Entrée gestuelleReconnaissance de tracés à main levée
Hello
Sélection
Destruction Editeur musical Tableur
Création DéplacementCopie
23
45
Entrée gestuelle
AvantagesAvantages • domaine + action en une seule opération
• naturel
• extensible
• inadapté à la souris
• vocabulaire non explicite
• ambiguïtés possibles
InconvénientsInconvénients
46
Geste en 3 dimensions
Gant numérique (Dataglove, Powerglove)Capteur de position (Polhemus)Caméra vidéoAvantages :
mouvements naturels, mains libresInconvénients :
erreurs de reconnaissancesyndrome d'immersion
24
47
Utilisation du toucher
Complément de l'entrée gestuelleForce / chaleur / toucherExemples :
ressorts des joysticksmanche à balai des avionsboutons à texture variable ?
Réalisation technique très difficilerésolution (toucher), inertie (force)
48
Langage naturelun vieux rêve...reconnaissance de la parole ou texte saisitechniques de traitement des langages, mais :
vocabulaire énormegrammaires mal définies et ambiguësellipses, références implicites, etc.
25
49
Langage naturel
Un vieux rêve... pour longtemps ?Faible efficacitéCoûterait cher à interfacer avec un noyau fonctionnel traditionnel
50
Reconnaissance de la parole
handicapésmains ou yeux occupés, ou mobilité requisesituations extrêmes (champ de bataille, pilotes)"vol" d'informations dans des conversations humainesmélange avec geste (interaction multimodale)
26
51
Parole : aspects techniquesSignal sonore numériséReconnaissance de phonèmesSegmentation + reconnaissance de mots
programmation dynamiqueréseaux de neurones
Ambiguïtés : utilisation du contexte, du sensavec les difficultés du langage naturel
52
Parole : types de systèmes
Reconnaissance du locuteurMots isolés / parole continueTaille du vocabulaireMono/multi-locuteursDurée de l'entraînementTaux de reconnaissanceEnvironnement bruité
27
53
Synthèse de paroleApplications :
ordinateurs pour aveuglessystèmes grand public (gares, horloge parlante, ...)
Production à partir de :texte écritphonèmesenregistrement numérique
Qualité variable :richesse des règlestype de voix, prosodie
54
Synthèse de sons
Complément naturel de l'imageApproche "langage"
chaque son a un senssuperposition, juxtapositionutilisation d'instruments de musique"earcons"
Approche "simulation"sons "du monde réel"le paramétrage porte le sens (sourd/métallique, réverbération, etc.)
28
55
Sons : techniquesConvertisseurs analogique <-> numérique
sons échantillonnésAlgorithmes de synthèse
addition/combinaison d'harmoniquesmodèles physiques
Processeurs spécialisés : DSPplus rapide, très bas niveau
Son stéréo, 3D
56
Interaction multimodale
Combinaison de plusieurs moyens d'entrée"Mets-ça ici"Permet d'utiliser plus largement la voixModalité : canal de communication + langage
gestes 2D ° WIMP, langage naturel langage de commandes
29
57
Multimodalité : typologie
synergique => fusion des actions/événements
sh
ParallèleSéquentiel
Indépendant
Combiné Synergique
Exclusif Concurrent
Alterné
Usage des médias
Interprétatio
n
58
Interaction à deux mainsextension naturelle de la manipulation directe
deux moyens de désignation (boule + souris)augmente le réalisme et la souplesse
plus efficaceélimination des aller-retour vers les menus et palettesparallélisation partielle des actions
nombreuses techniques d'interaction à imaginer
30
59
Toolglass & Magic Lenses
Xerox PARC, 1993fenêtres transparentes + interaction àdeux mainséconomie des mouvements des yeux
60
MultimédiaMélange de types/supports de données
texte, graphiquevidéo, animationson
applications :enseignement (hypermédias)collecticielargument publicitaire !
31
61
Réalité virtuelleConvergence de la synthèse 3D et des interfacesUtilisation de lunettes ou casque à vision stéréoPériphériques d'entrée exotiques
gants, combinaison, suivi de l'œilmouvements de la tête
Immersion totale dans un monde virtuelUtilisation pour jeux, simulateurs, pilotes de chasse, etc.
62
Réalité virtuelle : problèmes
techniques : qualité et fréquence des imagesd'interaction
syndrome d'immersioncommunication avec l'extérieur
d'application : applicable seulement à certaines tâchesde fond : est-ce la bonne direction ?
32
63
Collecticielordinateurs personnels et temps partagé : pas d'interactionmessagerie, réseaux locaux, connexion entre sites : collaboration, communication entre utilisateurs.domaine multi-disciplinaire :
psychologie,linguistique,sociologie, anthropologie,réseaux et télécommunications, systèmes distribuésIHM,IA
64
Collecticiel : définitions
Computer Supported Cooperative Work (CSCW, TCAO) :
systèmes informatiques offrant un support pour des groupes de personnes engagées dans une tâche commune, et fournissant une interface à un environnement partagé.
groupware (collecticiel, collectique, etc.) :aspects logiciels du CSCW
33
65
Matrice Espace-TempsLocal Distant
Synchrone
Asynchrone
Salle de réunioninformatisée
Vidéo Conférence
Outils d'argumentation Email,
Workflow
Editeurs partagés
Agendas partagés
66
Le "Trèfle" du collecticiel
EspaceEspacededeProductionProduction
EspaceEspacedede
CoordinationCoordinationEspaceEspace
dedeCommunicationCommunication
34
67
Typologie
Espace de Production : ex Group-DesignCaractérise les objets qui résultent de l'activité du groupe
Espace de Coordination : Ex WorkflowDéfinition des acteurs (individus, groupes, rôles, agents logiciels) Identification des activités et des tâches
Espace de communication : Ex MédiaspaceCommunication directe entre acteurs, contenu non-interprété par le système
68
Architectures du collecticiel
CentraliséeUn seul process gère l'application, affichée simultanément sur plusieurs écrans
RépliquéeUn process par utilisateur, avec diffusion des modifications
HybrideApplication répartie avec données communes centralisées
35
69
CSCW et Interfaces
70
VidéoVisiophone, "mediaspace"Mélange données + imageProblèmes techniques
bande passantecontact visuelgauche/droite
Problèmes d'utilisation (privacy)feed-back, réciprocité
36
71
Réalité augmentée
réaction contre la réalité virtuelleimmerger les ordinateurs dans le monde quotidienenrichir plutôt que remplacerréseaux + ordinateurs partout : informatique ubiquitaireexemples : badges actifs, Digital Desk
72
Réalité Augmentée Demo
37
73
Réalité Augmentée (BrightBoard)
74
ConclusionDomaine en pleine mutation
on sait faire beaucoupil reste beaucoup à inventer
Enjeux commerciaux très grandsbesoin de standardsles standards sont parfois dangereux
top related