IHM

1. IHM Cours 1 1-Interaction Humains-Machines 2-Présentation du module M2-EIAH/DU-TICE, Paris 6 Elisabeth.Delozanne@upmc.fr http://www.lutes.upmc.fr/delozanne/2008-2009/M2-P6-EIAH-Accueil.htm

2. Cours 1 : IHM ? IHM ? Définition, Évolution Concepts fondamentaux Interaction graphique, Conception centrée-utilisateur Les clés du succès Références Présentation du module Enjeux, Objectifs de la formation Déroulement, cours, TD, mini- projet TD1 : présentation du projet

3. Qui suis-je ? • Maître de Conférences Informatique Paris 6 (sept. 2007) • Enseignante • IHM, Algorithmique, POO, TICE, Math • Paris 5, IUFM de Créteil, IUP Univ. du Mans, Secondaire • Chercheure • Aida • Thèse en 1992 (Université du Maine) • Centres d’intérêts • EIAH (Projets Élise, Repères, Pépite, Lingot) • Intégration des technologies pour l’éducation et la formation • Conception participative et le prototypage • Congé pour recherches : Univ. Sydney, Télé-Univ. du Québec

4. Évolution de l’informatique • Satisfaire les besoins des utilisateurs • Difficile : les humains et leurs activités sont complexes • Importance de l’interface • point de vue des usagers : • Pour l’utilisateur le produit c’est l’interface (J. Raskin [1]) • point de vue du projet informatique • Entre 50 et 90 % du temps de développement d’un logiciel • point de vue social et commercial • Une mauvaise interface coûte • De l’argent • + 5 % de satisfaction => + 85 % de hausse (Landay) • Des vies • Accident du mont Saint-Odile

5. Quelles dates ? SketchPad, Interface graphique MarkI, programmée en binaire iMac Opérateur sur console Stretch StarXerox, Whysiwyg Macintosh

6. Quelles dates ? 1955 1963 1948 actuel 1955 1981 1984

7. Évolution de l'informatique • 1970 : • Marché en expansion, produire plus, traitement de masse, machine centralisée, informatisation des postes d'employés • Automatisation des tâches manuelles, Informatique des gros systèmes • 1980 : • Crise, concurrence accrue, informatisation des postes de travail administratifs puis des postes de travail des cadres et décideurs, ordinateurs personnels, consommateurs exigeants, • Informatique outil (bureautique, gestion), Informatique de décision, de conception, recherche d’information • 1990 : • Internationalisation des marchés et des entreprises, Web, informatique de coopération, de communication • Informatique de communication • 2000 : • Informatique nomade, vestimentaire, disséminée, invisible, pervasive, ubiquitaire (UbiComp)

8. Conséquence • Importance croissante • de la prise en compte des utilisateurs • et donc • de l’ interface et de l’ interaction

9. Prise en compte de l’utilisateur • Approche technocentrique • centrée sur la machine • et ses possibilités • l’utilisateur doit s’adapter à la machine • Approche anthropocentrique • centrée sur l’homme • et ses besoins • la machine doit s’adapter à l’utilisateur • Approche instrumentale • Co-adaptation des machines et des humains

10. Évolution de la notion d'interface • élargissement des problématiques parallèle à l'évolution technique • « conviviale », « utilisable », facile à comprendre et à utiliser • élément structurant les systèmes d ’informations • écran de texte et clavier • interface dispositif matériel, échange d'information, codage/décodage • interfaces graphiques • utilisateur, tâche, facteurs humains, langage • multimédia, capteurs, reconnaissance vocale, • usager, activité, acteurs humains, communication • papier électronique, tableau ou bureau interactif, médiaspace • travail coopératif, machines comme élément d'un espace interactif • informatique vestimentaire, réalité augmentée/ virtuelle, ordinateur évanescent, interface tangible/ sans couture

11. Concepts de base des interfaces graphiques • WIMPS : Windows, Icons, Menus, Pointers •  WYSIWIG (What You See Is What You Get) : • contrôle à l'utilisateur • Manipulation directe • souris, visualisation immédiate du résultat de la manipulation • apprentissage rapide, efficace aussi pour les experts • limite les efforts de mémorisation • permet l'expérimentation (vérification immédiate, réversibilité) •  Métaphore : • rôle est de transférer sur un nouveau contexte une perception existante (ou supposée) chez l'utilisateur, et ce tant au niveau des objets que des opérations ou des règles de manipulation • « La métaphore du bureau » • autre : tableau de bord, navigation, feuille de calcul

12. IHM un domaine de l’informatique • qui s’intéresse • à la conception • à l’évaluation • des logiciels interactifs et de leurs interfaces • qui s’appuie sur des connaissances • en sciences humaines et sociales : psychologie, sociologie, ergonomie • en informatique • qui met au point • des méthodes • des techniques • des outils

13. Orientation du module IHM • Sujet : • Formation aux méthodes et techniques d’évaluation et de conception des logiciels interactifs • 3 grandes catégories d’objets d’étude : • Humain : • Les utilisateurs finaux, les autres membres de l’organisation • Leurs tâches, leurs besoins, leurs difficultés • Machines • Des (matériels et) logiciels • Avec des contraintes techniques et matérielles • Interaction : Boucle • Les utilisateurs expriment ce qu’ils veulent faire • Le logiciel interprète, exécute et communique des résultats • Focalisation : • H de IHM

14. IHM ? • 1970 : Interface Homme/Machine • Apparition des interfaces graphiques • Informatique personnelle • 1980 : Interaction Homme/Machine • Informatique outil • 1990 : Interactions Humains-Machines • TIC : informatique de communication • 2000 : I. des Humains avec des Mondes • Informatique disséminée, vestimentaire, invisible, réalité virtuelle, réalité augmentée, réalité mixte, interfaces tangibles

15. IHM • Interface homme – machine • Dispositif matériel et logiciel lié à une application • Interaction homme – machine • Relations entre l’humain et la machine par l’interface

16. Qui construit des interfaces ? • Une équipe • Pourquoi ? • Idéalement • Graphistes • Spécialistes de l’interaction • Ergonomes • Marketing • Rédacteurs techniques • Ingénieurs spécialisés dans les tests • Développeurs Informatiques • Utilisateurs

17. Reproches aux informaticiens • Les concepteurs informaticiens • se centrent uniquement sur le fonctionnement du système • traitent l’interface en dernier • pensent que tous les utilisateurs leur ressemblent • ne sont pas formés • à l’analyse de besoins, à travailler avec des utilisateurs • ne comprennent pas que les besoins évoluent au cours de conception

18. Avertissement aux informaticiens • L’interface est la seule chose que l’usager connaît du système que vous concevez • Concevoir l’interaction des usagers avec le système • N’ est pas une opération cosmétique chargée de mettre en final l’application au goût du jour • C’ est une étape centrale dans le processus de conception d’un logiciel

19. Interactions Humains/machines • la conception, l'évaluation et l'implémentation des systèmes informatiques interactifs et l'étude des principaux phénomènes qui les entourent. (Hewett, 92) • la conception de systèmes informatiques qui permettent aux utilisateurs de mener leurs activités de façon productive et sûre. (Preece et al, 94) [6] • concerne la compréhension et la création de logiciels et d’autres dispositifs technologiques que les gens • vont avoir envied’utiliser et même plaisirà utiliser, • qu’ils vont pouvoir utiliser • et qu’ils vont trouver efficaces quand ils les utiliseront (Caroll 2001, 2004) [7] • HCI = design, prototyping, evaluation &implementation of UI (J. Landay 2002)[3]

20. Performance du couple « Homme »/Machine • [8]

21. Utilisateur, usager, acteur,  stakeholder • Utilisateur : • utilise une application et doit s’en contenter • Usager : • a un besoin que le logiciel doit satisfaire • s’attend à un service que le logiciel doit lui rendre • a des droits que le logiciel doit respecter • Acteur : • est engagé dans une activité dont il est responsable vis-à-vis d’une organisation sociale • le logiciel est un partenaire pour l’épauler dans cette activité • « Stakeholdeur » : parties prenantes • Utilisateur primaire, secondaire, périphérique

22. IHM ? Point de vue ergonomique Tâche, activité Conception Humains Technologie Organisation et environnement social Chacun des facteurs influence les autres

23. Pourquoi étudier l’IHM ? • Économiques • 50 à 90 % des coûts de développement pour les d’applications interactives • Sociales • des gens qui sont différents de vous utiliseront vos logiciels • des interfaces mal conçues coûtent cher • Scientifiques et techniques • Les interfaces utilisateurs sont difficiles à mettre au point • Les gens sont imprévisibles • Existence de techniques, méthodes et démarches rigoureuses • Professionnelles • Vous aurez à travailler • pour des entreprises qui font des logiciels pour des utilisateurs, pas seulement pour des machines

24. En tant que concepteur… Retenez que • Ce n’est pas à l’utilisateur de s’adapter à vos idées, certes géniales Mais • c’est au concepteur de s’adapter à l’activité de l’utilisateur Pour cela il y a • Des sciences (humaines) : ergonomie (des logiciels), psychologie, sociologie • Des méthodes : conception centrée utilisateur • Des techniques : entretiens, incidents critiques etc.

25. Conception centrée utilisateurs • Terme inventé par D. Norman en 1986 [10] • Norme ISO 13407 : 5 principes • analyse des besoins des utilisateurs, de leurs tâches et de leur contexte de travail • participation active de ces utilisateurs à la conception • répartition appropriée des fonctions entre les utilisateurs et la technologie • démarche itérative de conception • intervention d'une équipe de conception multi-disciplinaire

26. Les clés du succès • Cycle de conception • Conception centrée usager • L’analyse des tâches et les analyses en contexte de travail usuel • Le prototypage rapide • L’évaluation constante • Conception itérative • La qualité de la programmation (cours de James Landay)

27. Cycle de conception Conception Analyse Participation des utilisateurs Ergonomie Évaluation Développement Études utilsateurs Prototypage

28. Conception centrée usager Connais tes usagers ! • Classes d’utilisateurs • Créer des personnages • Leurs compétences • Visuelles, tactiles, manipulatrices • Métiers • Connaissances du domaine • Leur contexte • Maintenir des usagers dans l’équipe de conception tout au long du projet

29. Comment ? • Analyse de tâches, analyses en contexte • Observer les pratiques usuelles de travail • Routinières • Exceptionnelles • Situations de stress • Créer des scénarios d’utilisation réelle • Tester les idées nouvelles avant de développer un logiciel

30. Évaluation • Tester avec des usagers réels • Construire des modèles • Pour les modèles et les maquettes, utiliser des techniques d’évaluation « légères » • Évaluation par des experts • Inspections • Tests informels • Pour les prototypes avancés, utiliser des techniques d’évaluation plus « lourdes » et rigoureuses • Expérimentations contrôlées • Expérimentations en contexte

31. Conception itérative (cours de James Landay)

32. Étapes de la conception • Planifier le processus de conception • Étudier les différentes catégories d’utilisateurs et le contexte d’utilisation • Identifier les buts et les tâches des utilisateurs ainsi que les exigences d’organisation • Produire des solutions de conception et les matérialiser • Evaluer les solutions et itérer le processus pour les affiner

33. Programmation • Des méthodes : • Cf. cours de Génie Logiciel, programmation avancée • Des outils : • Boîte à outils • Générateurs d’interface • Modèles à évènements • Modèles d’entrée-sortie • etc. (non étudiés dans ce cours qui se focalise sur le versant humain)

34. Objectifs de l'enseignement • Sensibiliser • aux démarches ergonomiques et centrée-utilisateur • Faire connaître • les méthodes et techniques d’évaluation et de conception centrée utilisateur de logiciels interactifs • Envisager • les évolutions dans le domaine • Pas étudiées dans ce cours • Technologies pour le développement des GUI

35. Compétences (1/2) Savoir • organiser et mettre en œuvre • une démarche rigoureuse de conception centrée utilisateur lors de la conception d'un logiciel interactif • concevoir et mettre en œuvre • un plan d'évaluation dans un projet de conception de logiciel interactif • rédiger • un état de l'art, un cahier des charges, un dossier de conception, un rapport d'évaluation d'un logiciel interactif • une fiche de lecture • organiser • un travail en équipe

36. Compétences(2/2) • trouver • les recommandations, guides de style, standards, design patterns • présenter • les principaux concepts du domaine de l’IHM • communiquer • vos idées, les argumenter, les développer et les faire évoluer

37. Organisation du module • "L'IHM ne s'enseigne pas … elle s'apprend" • Nous (enseignants) vous fournissons des ressources, des indications, vous faisons partager notre expérience mais • Vous construisez votre formation • Apprentissage par confrontation • de pratiques : • un mini-projet + expériences d’utilisation de logiciel+ études de cas • d’ interrogations théoriques : • cours • lectures personnelles : • Avant le cours, Synthèse, Pour approfondir • Développer un logiciel : • IHM : analyse de besoins, conception et évaluation des interactions • GL : outils de conception informatique • Programmation et BD : mise en œuvre informatique

38. Plan du cours Cf le site http://www.lutes.upmc.fr/delozanne/2008-2009/IHM-M2-P6-EIAH/siteIHM/CoursIHM.htm

39. Intérêt du projet Comme en entreprise • Satisfaire les utilisateurs • Les comprendre et les impliquer • Focus sur l’analyse des besoins et la conception du point de vue utilisateur • Communiquer et travailler en équipe • Être flexible • Subir de fortes contraintes temporelles • Se départir de jugements subjectifs

40. Lectures • Une excellente introduction à l’ergonomie du logiciel E. Brangier, J. Barcenilla, Concevoir un produit facile à utiliser : Adapter les technologies à l’homme, Editions d’organisation, 2003 • Des méthodes, des conseils et des exemples Van Duyne D. K., Landay J., Hong J., The design of sites : Patterns, Principles and process for crafting a Customer Centered Web experience, Addison-Wesley, 2003 • Deux manuels de référence • Ben SHNEIDERMAN, Designing the User Interface, Addison Wesley, 2004 (nouvelle édition) • J.-F. Nogier, Ergonomie du logiciel et design des sites web, l’ergonomie des interfaces utilisateurs Dunod, 3 ° édition 2005 • Une synthèse des approches en IHM • Christophe KOLSKI, ouvrage collectif , Interaction homme-machine pour les systèmes d'information Vol. 1 & 2, Hermès, 2001 • Des textes à télécharger pour préparer chaque cours • Rédaction de fiches de lecture et débat • Des sites

41. Évaluation du module ? • Première session : Contrôle continu (CC) • P : Note de projet (sur 10) • Note personnelle • L: Synthèse de lecture (sur 5) • TP : Travaux pratique en php, mysql, html (sur 5) CC = P + L +TP • Deuxième session (NF) • Examen : E2 • NF = sup (E2, (E2 + CC)/2)

42. En résumé : formation en IHM • Regardez et critiquez un maximum de sites et de logiciels • Notez • les bonnes idées, • les problèmes rencontrés et les écueils à éviter, • les scénarios originaux, • les utilisations innovantes • En informatique on apprend beaucoup en • Étudiant et adaptant les solutions des autres • Ne réinventez pas la roue • Design Patterns

43. Références (1/2) • Gaëlle CALVARY Ingénierie de l'interaction homme-machine : rétrospective et perspectives, Interaction homme-machine et recherche d'information, Traité des Sciences et Techniques de l'Information, C. Paganelli Ed., Hermès 2002, 19-63http://iihm.imag.fr/publs/2002/TSTI.calvary.pdf • Christian BASTIEN, Dominique SCAPIN, Évaluation des systèmes d’information et critères ergonomiques, in Christophe KOLSKI (Ed.), Environnements évolués et évaluation de l'IHM, Interaction homme-machine pour les systèmes d'information Vol 2, Hermès, 2001, 53-113 • Jean CAELEN, Communication Homme-Machine & sciences pour l’ingénieur, Revue d’Interaction Homme Machine, volume 1- N°1/1998, p. 1-10. • John M. Caroll (ed), Human Computer Interaction in the new Millennium, Addison Wesley, 2001

44. Références (2/2) • Jocelyne NANARD, La manipulation directe en Interface Homme-Machine, Thèse d’État, Université des Sciences et Techniques du Languedoc, Montpellier, Décembre 1990 (introduction et chapitre 1) • Donald Norman, S. W. DRAPER, User-Centred Design, Hillsdale, NJ : Erlbaum, 1986 • Jenny PREECE et al, Human Computer Interaction, Addison Wesley, 1994 • Jef RASKIN, The Human Interface, New Direction for designing Interactive Systems, Addison Wesley 2000 • Ben SHNEIDERMAN, Designing the User Interface, Addison Wesley, 2004 (nouvelle édition) • Guide to usability, Open University , 144 p., 1993

45. Sites • Beaudoin Lafon http://wiki.lri.fr:8000/fondihm/fondihm.wiki • Coutaz : http://iihm.imag.fr/coutaz.book/coutaz.properties.html • Landay : http://guir.berkeley.edu/courses/cs160/2002_spring/lectures.htm • Cannyhttp://www.cs.berkeley.edu/~jfc/cs160/F04/ • Bastienhttp://www.lergonome.org • Lompré :http://www.univ-pau.fr/~lompre

46. Take home message • L’interface est (presque) la seule chose que l’usager connaît du logiciel que vous avez construit