Tifanie Bouchara ! ! ! ! !!fanie.bouchara@lecnam.net!

Introduction générale

Introduction à l’interaction homme-machine!

d’après les supports de cours de Pierre Cubaud!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦ Organisa!on5et5objec!fs5

✦  Interac!on5et5interfaces5?5

✦  Présenta!on5d’un5ou!l5:5Processing5✦  Pe!ts5exercices5applica!fs5

5

25

1ère séance!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

5

35

Plan péda. Objectifs de discipline!

Le champ disciplinaire « Analyse, conception et développement d’applications » apporte des connaissances en matière de modèles et méthodes utilisés pour l’analyse et la conception de toute solution applicative fondée sur le développement de logiciels ou la mise en œuvre de progiciels de gestion intégrée (PGI / ERP Enterprise Resource Planning). Il permet la pratique d’outils et d’ateliers rendant possible la mise en œuvre associée via des réalisations. Le champ couvre aussi les notions relatives aux systèmes d’information, des notions complémentaires de génie logiciel, une initiation à la gestion de projet, à l’interaction homme-machine (IHM Interface Homme- Machine), à la mise en œuvre des éléments de culture générale en matière de production du logiciel, notamment en matière de développement durable et d’accessibilité (bonnes pratiques).!!

! ! ! ! ! ! ! ! ! ! !Plan pédagogique National, p. 7 !

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

5

45

Plan péda. Objectifs en IIHM!PPN INFORMATIQUE 2013

© Ministère de l’enseignement supérieur et de la recherche, 2013 Page 32/67 http://www.enseignementsup-recherche.gouv.fr/

Informatique approfondie UE21 Analyse, conception et

développement d’applications

Volume Horaire : 45

10h CM, 15h TD, 20h TP

M2105 Introduction aux interfaces homme-machine Semestre 2

Objectifs du module :

• Spécifier, concevoir et développer les interfaces/interactions avec l’utilisateur

Compétences visées : Compétences citées dans le Référentiel d’activités et de compétences pour les activités : • FA1-A : Analyse d'une solution informatique

• FA1-B : Conception technique d’une solution informatique

• FA1-C : Réalisation d’une solution informatique

Prérequis :

• M2103

Contenus :

• Programmation événementielle

• Spécifications d’interfaces utilisateur, maquettage

• Notions d’ergonomie des interfaces utilisateur

• Programmation d’interfaces, utilisation de composants graphiques

Modalités de mise en œuvre :

• Collaboration avec le module M2104 « Bases de la conception objet »

• Sensibilisation aux notions d’accessibilité numérique

• Utilisation d’un cadre de conception (framework) pour la programmation

Prolongements possibles : Mots clés : Interfaces ; Programmation événementielle ; Utilisateur ; Interactions

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦ Concepts5:55–  Interac!ons5et5Interfaces5u!lisateurs5–  Programma!on5évènemen!elle5–  No!ons5d’ergonomie5des5interfaces5u!lisateurs5–  Composants5graphiques5

✦ Compétences5:55–  Spécifier5/5Concevoir5une5interface,5la5prototyper5par5maqueMage5–  Développer5une5interface5–  Evaluer5une5interface55–  U!liser5un5environnement5de5développement5/5cadre5de5concep!on55

✦  Transverses5:55–  consolider5les5acquis5en5POO5/5Java5–  consolider5les5acquis5en5algorithmie5

5

Objectifs!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Support!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

5

75

Plan péda. Objectifs de la formation!

Les de ́partements Informatique des IUT forment les professionnels qui participent a ̀ la conception, la re ́alisation et la mise en œuvre de solutions informatiques correspondant aux besoins des utilisateurs. !!!Les activite ́s du titulaire du DUT Informatique sont tre ̀s diverses et correspondent au cycle de vie des logiciels : !

•  partant de la demande du client, il assiste le concepteur d’applications informatiques dans la phase d’analyse du projet ; !

•  il de ́veloppe les logiciels, en assure la validation, le suivi et la maintenance ; !

•  il parame ̀tre et adapte des progiciels ; !

•  il re ́dige les documentations techniques des logiciels ; !

•  il de ́veloppe, installe, administre et maintient les syste ̀mes et re ́seaux informatiques. !

!Plan pédagogique National, p. 3 !

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Il5ne5s’agit5pas5de5devenir5des5concepteurs5d’interac!on5(niv.5Master)5mais5d’être5capable5de:55

•  collaborer5avec5eux,5les5assister5techniquement55 5 5➜5introduc)on*à*la*concep)on*5

•  développer5les5interfaces5des5applica!ons5ainsi5conçues555 5 5➜5introduc)on*à*la*programma)on*d’interfaces5

Retours sur les objectifs d’IIHM!

↳

… et à nos objectifs

vous ne serez pas des ‘Concepteurs d’Interaction’ (niveau master) mais vous devrez être capable de:!!collaborer avec eux et les assister techniquement! ��introduction à la conception ! ! !développer les interfaces des applications ainsi conçues! ��introduction à la programmation!! ! d’interfaces / interactions

!22

Exemple%d’un%sélecteur%de%couleurs%%

rque%:%le%slider%peut%avoir%des%gradua3ons%

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦  28h5:585séances5de52x1h455heures5les5:5–  514/055aprem5–  18/055ma!n5–  28/055aprem5–  04/06555aprem5–  07/06555ma!n5–  11/065aprem5–  14/065ma!n5–  18/065aprem555555^>55TP5exam5

✦  ~58h5CM5+5205h5TD/TP5

Volume horaire!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦ Notes5de5contrôle5con!nu5:555

–  Un5TP5exam*le*18/06*après^midi5

–  Plusieurs5TP5à5rendre,5seuls5ou5en5binomes5–  Des5interros5de5cours5les518/055;504/06;511/065et514/065555

Evaluation!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦  IHM5?5Interac!on5?5Interfaces5?5Homme^machine5?55Défini!ons,5Historique5et5Exemples5

✦  Programma!on5évènemen!elle55Architecture5d’appli5interac!ve,5Modèle5Vue5Contrôleur,5No!on5d’Evènement,5Processing*

✦  Programma!on5graphique55Composants5graphiques5(widgets),5Layouts5/5mise5en5page,5librairie*Java*Swing*

✦  U!lisateur5et5règles5ergonomiques5

✦  Concep!on5/5Evalua!on555Méthodes5et5ou!ls,5Cycle5de5concep!on,5Prototypage/MaqueMage,5Balsamiq*Mockup*55

✦  Applica!on5à5un5cas5concret5

✦  Interfaces5avancées55 5Geste/Voix5,5Réalité5Mixte,5Interac!on5tangible 5 55

Contenu du cours!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦ Moi:55–  En5transmeMre5le5plus5possible5–  Faire5en5sorte5que5vous5en5appreniez5le5plus5possible5

✦ Vous5:55–  En5apprendre5le5plus5possible5–  Consolider/Appliquer5vos5connaissances5préalables5

•  Par)ciper*/*Echanger**•  Faites*les*exercices*/*TP*•  Révisez*…5

ATTENTION*:*ne*pas*empêcher*les*autres*de*réaliser*leur*part*du*contrat*!!!*

Le contrat enseignant-apprenants!

Quelques définitions!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦ C’est5quoi5pour5vous?55

Interaction ? Interfaces ?!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

IHM Interface Homme – Machine Interaction Homme – Machine

On parlera aussi de : Communication Homme – Machine Dialogue Homme – Machine Interaction Personne – Machine

155

IHM!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Quelques définitions!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 175

Système interactif!

Système interactif = système informatique qui interagit avec son environnement

Système homme-machine = système interactif destinés des êtres-humains Un système interactif (homme-machine) est composé de :

une interface + un noyau fonctionnel!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 185

Interface homme-machine!

✦  Ensemble*des*disposi)fs5matériels5et5logiciels5permeMant5à5un5u!lisateur5d’interagir5avec5un5système5interac!f,5c’est^à^dire5:55

•  contrôler,5commander5et5superviser5un5système5interac!f5

✦  Par!e5d’un5système5interac!f5qui5:55•  récupère et traite les données de commandes par des périphériques d’entrée

•  représente l’état interne du système sur des périphériques de sortie !

Homme* Machine*

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 195

Interaction homme-machine!

✦  Ensemble*des*aspects*d’interac)on*avec*un*système5:55•  glisser5les5doigts,5appuyer5sur5un5bouton,5déplacer5la5souris…5•  entendre5un5son,5voir5le5curseur,5lire5un5texte,5sen!r5une5vibra!on…5

5

✦  Discipline5qui5s’intéresse5à5la5concep!on,5au5développement5et5à5l'évalua!on5de5systèmes5interac!fs5homme^machines5ainsi5qu’aux5phénomènes5liés5(défini!on5ACM5SIGCHI)5

!

Homme* Machine*

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 205

Multidisciplinarité!

IHM!

Ingénierie!

Facteurs humains!

Design!

Arts graphiques!Typographie!Conception sonore!Design industriel!

Informatique!Intelligence artificielle!Electronique!Génie logiciel!

Sciences cognitives!Psychologie!Ergonomie!Sociologie!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Applications ? !

JX)PYY/U'+LDZBJD+/0ZYB'ZYD-'([+J*1U

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Applications ? !

Exercice5

Nommer5un5logiciel5sans5IHM5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Applications ? !

Exercice5

Calculer5la5propor!on5d’heures5de5forma!on5en5IHM55par5rapport5au5total5de5la5forma!on5d’un5DUT5?55

Histoire de l’interaction!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 255

Premières machines à calculer!

Pascaline)(Pascal,)~1642))Machine)de)Babbage)

(implémenta<on)2002,)Londres))

✦  Interfaces5réduites55

^>5des5chiffres5fixés5sur5des5roues5dentées5✦  Machine5totalement5mécanique5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 265

1935-1960 : Les prémisses!ENIAC5

Mark515lecture5de5ruban5perforé5

Disposi!fs5d’entrée^sor!e5limités5:5✦  perforateurs/lecteurs5de5carte5✦  tableau5de5bord5(voyants)5✦  imprimante5

Ligne5de5commandes5:5✦  syntaxe5complexe5✦  Charge5cogni!ve5pour5rappel5des5commandes5✦  Intervalle5important5entre5ac!on5et5réponse5✦  Ni5les5commandes,5ni5les5objets5ne5sont5visibles5

Traitement5par5lot5(batch)processing)5:5✦  interac!on5discon!nue5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 275

1935-1960 : Les prémisses!

S.A.G.E)

Semi5Automa!c5Ground5Environment55

(MIT/IBM5pour5US5Air5Force,5~1958)5:5✦  Innova!on5:5présenta!on5des5résultats5sur5écran5cathodique5✦  U!lisa!on5de5symboles5pour5les5trajectoires5:5T5(target),5F5(fighter)5✦  En5entrée5:5des5boutons,5des5glissières5et5un5pistolet5op!que!5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦  Ecran5cathodique5et5stylo5op!que5✦  Désigna!on5directe5des5objets5sur5l’écran5✦  Nouvelles5techniques5:5zoom,5feedback5par5ligne5

élas!que5

285

60’s : 2 inventions clés!

Sutherland, Sketchpad: A man-machine graphical communication system, 1963!

Sketchpad)(Sutherland,5~1963)5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦  25roues5:5capter5le5mouvement5sur5deux5axes5✦  pointage5plus5performants5que5d’autres5disposi!fs5

plus5tardifs5(ex.51982,5joys!ck,5clavier…)5

295

60’s : 2 inventions clés!

Engelbart, Mouse Patent, 1970!

Souris)(Engelbart,5~1964)5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 305

70’s : premiers ordinateurs personnels!

✦ Interfaces5textuelles5✦ Interac!on5conversa!onnelle5

ligne de commande & Menus et écrans de saisie

dialogue imposé par le système

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 315

80’s : début des GUI!

Xerox 8010 Star (1981)

Apple Lisa (1982)

Macintosh (1984)

Windows 3.0 (1990)

✦ Disposi!fs5de5pointage5et5interfaces5graphiques5✦ 5WIMP5:5Windows,5Icons,5Menus5&5Pointers555fenêtres,5icônes,5menus5&5disposi!f5de5pointage5

➡  boucle5entrée/sor!e5plus5courte5➡  dialogue5contrôlée5par5le5système5puis5par5l’u!lisateur5

✦ Métaphore)du)bureau)✦ Undo)✦ Direct)Manipula<on5(ar!cle5classique5de519835par5Schneiderman)5

$16,500! $2,495!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 325

70-80’s Xerox Park : Cut/Copy/Paste!qT`L%P%g_irg%C#i!%12BJD-(%#U*/%P%B5*%B/)W%s%)2L*(

JX)PYY-(eL+L45(2R+/0ZY=TTqY9=Y=MY/U'&L12UU*2UR&)DBL&.0/1&)20B&)U2B(Y

t%]/D0%25LLD%P

JX)PYYeee+-/1/'(L+B/1Y*(LU(0&0(L51(+J*1

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 335

✦ Document5affiché5dans5son5format5final5✦ L’objet5d’intérêt5:55

•  toujours5visible5

•  directement5manipulable5par5la5souris5

✦ Les5ac!ons5:55•  leurs5résultats5sont5immédiatement5affichés5•  Facilement5réversibles5

Direct manipulation!

Xerox 8010 Star (1981)

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 345

✦ What You See Is What You Get

✦ ACAI : Affichage Conforme A l'Impression

WYSIWYG!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

80’s : exemple de station!

7-(%L*23/-%Z02)JD45(*W)D45(%OTVL

@m/U(W%s%]2-%621F%9MOlA

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

✦ Métaphore5du5bureau5

70’s- 80’s : Apple Macintosh!

#))U(%P%$2B,-*/LJ%@9Y9MO>A

JX)PYY*/2L*W*(BJ+B/1YZ5DLY

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM)

Evolution ?!

#))U(%#452%@9Y=TTTA

g%cD-'/e%@g99+9%P%MY9MOqA"(g8;8_C%@T+O%P%9TY9MOOA

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 385

L’interaction à travers les âges!

http://www.scottberkun.com/blog/2010/the-future-of-ui-will-be-boring/!

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 395

Nouvelles approches!

Réalité5augmentée5/5virtuelle5

Interfaces5tangibles5

Interaction 3D/ captation du geste !

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 405

Nouvelles approches : Collaboration!

✦  Ensemble5sur5un5même5projet5•  A5distance5(remote)collabora<on)5

•  Au5même5endroit5(collabora!on5co^localisée)5

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 415

Nouvelles approches : Ubiquité!

✦  Systèmes5embarqués5

✦  Smart)objects)

DUT Informatique – Introduction à l’Interaction Homme-Machine (IIHM) 425

Pour plus d’infos!

http://interstices.info/jcms/c_23015/40-ans-dinteraction-homme-machine-points-de-repere-et-perspectives!

http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html!

http://toastytech.com/guis/

http://www.guidebookgallery.org/

!