Tifanie Bouchara ! ! ! ! [email protected]!
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/
!