Click here to load reader

Introduction au domaine de l’Interaction Homme- · PDF fileReprésentation des objets sous forme iconique ... Au niveau de l'ordinateur, architecture logicielle séparer : ... en

  • View
    213

  • Download
    0

Embed Size (px)

Text of Introduction au domaine de l’Interaction Homme- · PDF fileReprésentation des...

  • 1

    1

    Introduction au domaine de lInteraction Homme-Machine

    Philippe Palanque

    LIIHS-Universit Paul [email protected]

    http://liihs.irit.fr/palanqueBureau 275 IRIT 2

    2

    Objectifs du coursIntroduction au domaineIntroduction aux conceptsIntroduction aux techniquesTable des matires du Master IHMLien entre les diffrents cours du MasterInformations gnrales pour les chefs d oeuvre

  • 2

    3

    Contenu du coursElments de User Centered DesignElments d ergonomieElments de psychologie cognitiveElments de gnie des systmes interactifsElments de technologie des systmes interactifs

    4

    BibliographieLes Interfaces Homme-Ordinateur Jolle Coutaz, Dunod, 1990 puisDesigning 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 lIHM

    6

    a ne marche jamais !!!Utilisateur

    Input deviceOutput

    device

    UnitCentrale Tches

    Un utilisateur en pleine activit

  • 4

    7

    Quelques dfinitionsSystmes InteractifsInterface Homme-MachineCommunication Homme-MachineModle dinteractionStyle dinteractionMtaphore dinteractionDialogue, noyau fonctionnel

    8

    Systmes interactifs

    Interface => Communication - Canal, Langage, Sens

    Homme => Tche - Prise en compte de facteurs humains

    Ordinateur => Processus - Aspects logiciels

    application interactive

    interfacenoyau

    fonctionnel

  • 5

    9

    Communication Homme-MachineCanaux de communication

    Entre/sortie: 2 Plans diffrentsE: Textuel: Langage de commandeGestuel: Souris, Interface GraphiqueVocal, Gestuel volu, Multi modal

    S: Ecran, Ecran Graphique, Synthtiseur

    Langage = Mode d'interactionPlusieurs Mthodes d'expression pour un mme mdia

    Objectif de la communicationExcuter une tche = Entrer des commandes et

    interprter des sorties

    10

    Modle d'interactionModle d'interaction : Aspect morphologique de

    l'interactionStyle d'interaction : Aspect morpho-lexical et morpho-

    syntaxique=> choix d'utilisation des priphriques

    Compromis entre plus naturel et plus simple implanter

    Exemple: interfaces iconiques- choix objet-verbe ou verbe-objet...- cohrence inter-applications

  • 6

    11

    Modle d'interactionModle d'interaction : Look (qu'est-ce que l'on montre)Style d'interaction : Feel (comment on manipule)Mtaphore d'interaction Exemples :

    Reprsentation des objets sous forme iconiqueConstruction d'une commande (action-paramtre ou paramtre action)Mode de saisie de la commande :

    Drag and dropSlection MenuLangage de commande

    12

    Sparation Interface/Application

    80 % du code d'une application peut tre considrcomme 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

    Sparation interface/noyauAu niveau de l'ordinateur, architecture logicielle sparer :

    Ce qui tabli la communication, Ce qui gre le dialogue Ce qui fait les oprations effectives.

    Application modulaireInterface

    E/S, Systme

    Noyau Fonctionnel

    Utilisateur

  • 8

    15

    Sparation Interface/Application

    Repr-sentation

    externeDialogue

    Noyau Fonction-

    nel

    Architecture SeeheimUn exemple d'architecture favorisant la sparation interface / application

    16

    Objectifs d'une interface utilisateurAmliorer la communication

    Communication "naturelle"Cohrence intra et inter applicationsMtaphores

    Communication efficaceChoix des styles d'interactionStructures de tches et sous-tchestude de la frquence des commandesMta-communication

  • 9

    17

    Caractristiques d'une bonne IHMAdapte aux besoinsFacile apprendreIntuitive : prdictibleRassurante : apprentissage par essais - erreursAgrable - esthtique - dynamique - ludiquePerformante : tches rapides excuter -ractions immdiates

    18

    Comptences RequisesUne Approche multi-disciplinaire

    InformatiqueDomaine de l'ApplicationConnaissance de l'utilisateur

    Ncessite d'tre centr sur l'utilisateurPenser luiConnatre ses caractristique cognitivesConnatre son environnementSe mettre sa placeCommuniquer avec lui

  • 10

    19

    Domaines abordsTous et mme plus

    Application de bureauSystmes temps rel critiques (avion, ATC, )

    Systmes E/S Systmes standard (souris, clavier, crans)Systmes exotiques (tout !!)

    20

    Enjeux Socio-EconomiquesUn sujet de plus en plus la mode

    Presse et mdiasIndustrieRecherche

    Change l'aspect du dv. informatique80 % du code des applications interactives est consacr l'interface

    Change le marchInformatiqueNon-informatique

  • 11

    21

    Pourquoi des IHM graphiques

    Enqute du DOD, 1970 et de la crise du logiciel(75 % des logiciels livrs ne sont pas utiliss)

    Pb de modification des besoins (Maintenabilit) Pb d'erreurs d'excution (Fiabilit) Pb de refus d'utilisation (Utilisabilit)

    Les remdes apports par le gnie logiciel Approches objets (composants rutilisables) Mthode formelles de conception Prise en compte de l'utilisateur lors de la conception Ateliers de Gnie Logiciel

    22

    La crise du logiciel

    logiciel livr, mais jamais utilis avec succs : 3,2 millions $

    logiciel utilis tel que livr 119 000 $

    logiciel paymais non livr1,95 millions $

    logiciel utilismais remanisouvent puis abandonn1,3 millions $

    logiciel utilis aprs modifications 198 000 $

    Rapport du GAO (Government Accounting Office) sur la rpartition des cots de neuf projets de taille moyenne [GAO 79]

  • 12

    23

    Pourquoi de nouvelles interfacesInformation plus complexe manipulerNouveaux types d'applicationTches moins prcises Utilisateurs plus variables (niveau de connaissance, catgorie (cadres))

    Faire un outil qui exploite plus les caractristiques de l'utilisateur (informatique : outils trs complexes)Mais aussi rvolution technologique permet de mettre en uvre ce type d'interfaces

    24

    Exigences du marchDe plus en plus de produits efficaces:

    Il faut se tenir jour avec la concurrenceou: il faut garder la comptitivit de l'entrepriseen amliorant la circulation de l'information

    -> cration d'un besoinImpossible de revenir en arrireDe 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 utilisateursCot d'apprentissage (formation)Perte de productivit des utilisateursUtilisation incomplte: manque gagnerCots de maintenance Perte de crdibilit

    26

    Rentabilit d'une IHMConcevoir une application interactive:Cot Important la conception: tests, exprimentations, consultationsChoisir un bon compromisDeux parties (une visible - une cache)

    Prsentation --- DialogueStatique --- Dynamique

    Facteurs humains trs coteux

  • 14

    27

    Exemples de mauvaise conception

    Libells non clairs ou ambigus (syntax error)Fonctionnalits inutilesEcrans trop denses, mal structursEcrans trop nombreux"Chemins" trop longsContexte inconnu ou oubliEssai en vol (Aro)

    28

    Dtecter une mauvaise IHMConvivialit:

    Qui a la main ?O suis-je, o en tais-je ?J'ai peur de faire une btise,

    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

    rsultat = 65.43

    30

    Exemple : tableur

  • 16

    31

    Exemple de manipulation indirecte

    Identifier :

    32

    Manipulation directe

    Reprsentation visuelle des objetsVisualisation des commandes possiblesInteraction constante, construction progressive du but atteindre."Manipulation" comme dans le monde rel

  • 17

    33

    Exemple de manipulation directe

    34

    Taxonomie des modles et styles dinteraction

    Matrielle - Historique - FonctionnelleModle Tltype (Ligne de Commande)Modle Terminal Vido (Ecran + Clavier)Menus & Ecrans de saisieInterfaces IconiquesSystmes de FentrageManipulation Directe & Interaction GraphiqueNavigationLangage Naturel

  • 18

    35

    Priphriques d'entre Claviers

    Potentiomtres (rotatifs, linaires)

    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

    fatigueprcision mdiocreproximit de l'cranasez cher

    prcision moyenne

    saisie du styletassez cher

    prcision moyennecontrle plus difficilemoins rapide

    prcision moyennemoins rapide

    pratique et simplerobuste

    pratiquerapiderobuste

    trs prciscalque

    robustebon marchcontrle dplacementrobustebon march

    Inconvnients Avantages

  • 19

    37

    Hypertextes

    Technique de prsentation 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 prsentation un outil d'interactionanimation, interaction sur une pagelangage de programmationextension