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

38

75

Tangible User Interfaces (Triangles)

76

Tangible User Interfaces

39

77

Futur ??? (Ambient room)