IHM-Web

1. IHM-Web Cours 0 1-Interaction Humains-Machines 2-Présentation de l’UE M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr http://lutes.upmc.fr/delozanne/2012-2013/M2-IFL-DU-TICE-Accueil.htm

2. Qui suis-je ? • Maître de Conférences Informatique Paris 6 (sept. 2007) • Enseignante • IHM, Algorithmique, Programmation, TICE, Math • Paris 5, IUFM de Créteil, IUP Univ. du Mans, Secondaire • Chercheure • Équipe Mocah du LIP6 • 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

3. Johan Michel • Chef de projet Pédagogique Speexx (Avr. 2007) • Création, mise en place et gestion de dispositifs d’apprentissage des langues • Maître d’apprentissage, Paris 3 • Enseignant • Programmation web, Algorithmique, POO, TICE, introduction aux métiers de la FOAD Langue • Paris 6, Université du Maine • Chercheur • Thèse 2006 (Université du Maine) • Centres d’intérêts • EIAH langues, FOAD langues

4. Interaction « Homme »/Machine • [8] (Guide to usability, Open University, 1993)

5. Interaction Humains Machines • Interaction : Boucle • Les gens expriment leur intention • Le logiciel interprète, exécute et communique des résultats • Les gens interprètent les modifications • Humains • Les utilisateurs finaux, leurs collègues • Leur activité, le contexte, leurs besoins, leurs difficultés, leurs échanges via les réseaux • Machines • Des (matériels et) logiciels • Avec des contraintes techniques et matérielles

6. Interface Homme-Machine • Partie d’une application qui permet • Au gens • d’interagir avec la machine • A la machine • de communiquer des résultats • Logiciel/matériel I/O Brush

7. Point de vue des usagers

8. Sigle 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 mobile, disséminée, vestimentaire, invisible • Réalité virtuelle, réalité augmentée, réalité mixte • Interfaces tangibles

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. IHM (Cours de James Landay) • Domaine qui s’intéresse à • La conception • Le prototypage • L’évaluation • Des Interfaces et des Interactions Humains Machines

11. Qui conçoit des interfaces ? • Une équipe • 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

12. Pourquoi étudier l’IHM ? • Économiques • 50 à 90 % des coûts de développement • Sociales • des interfaces mal conçues coûtent cher • Argent :+ 5 % de satisfaction => + 85 % de hausse (Landay) • Vie : accident du Mont Saint-Odile • Scientifiques et techniques • Les interfaces utilisateurs sont difficiles à mettre au point • Les gens sont imprévisibles • Les activités sont complexes • existence de techniques, méthodes et démarches rigoureuses • Professionnelles • Vous aurez à travailler • pour des entreprises/services qui font des applications pour des utilisateurs, pas seulement pour des machines

13. Orientation du cours IHM

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

15. Deux écueils en images • Conception ego-centrique • Conception techno-centrique ( cours Landay)

16. 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 • Les utilisateurs savent rarement spécifier leurs besoins et les besoins évoluent avec le temps 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.

17. IHM : domaine pluridisciplinaire • s’appuie sur des connaissances • en sciences humaines et sociales (SHS) : psychologie, sociologie, ergonomie, anthropologie • en informatique • en design • met au point • des modèles • des méthodes • des techniques • des outils

18. Objectifs de l‘UE • Sensibiliser • aux démarches ergonomiques et centrée-utilisateur • Faire connaître et pratiquer • les techniques simples mais efficacesd’évaluation et de conception centrée utilisateur de logiciels interactifs • Techniques de réalisation d’une interface Web (cours de M. Michel)

19. Compétences (1/2) Savoir • organiser • une démarche rigoureuse de conception centrée utilisateur • mettre en œuvre • des techniques simples de recueil d’informations, d’analyse et de conception : • entretiens, remue-méninges, scénarios et personas, prototypage, inspection heuristique, revue de conception • un plan d'évaluation dans un projet • rédiger • une analyse de problème , un dossier de conception, un rapport d'évaluation d'un logiciel interactif • une fiche de lecture

20. Compétences(2/2) • trouver • les recommandations, guides de style, standards, design patterns, les expertises • organiser • un travail en équipe • communiquer • vos idées, les argumenter, les développer et les faire évoluer

21. Organisation de l’UE • 2 enseignants : • E. Delozanne (UPMC) : Conception centrée utilisateur • Johan Michel (Digital Publishing ) : Technologies Web • Apprentissage par confrontation • de pratiques : • un mini-projet • mise en œuvre des techniques visées • vos expériences d’utilisation de logiciel • retours sur votre travail • du groupe • des enseignants • d’ interrogations théoriques : • cours • lectures personnelles : • Avant le cours, Synthèse, Pour approfondir, Pour mettre en œuvre

22. Plan du cours • Cf le site • http://lutes.upmc.fr/delozanne/2012-2013/IHM-IFL-TICE/siteIHM/CoursIHM.htm • Dans la rubriqueprojet du site • Conseils de méthodede travail

23. Projet • Conception d’une application Web • Utilisateurs potentiels réels et accessibles (entretiens) • Qui ne vous ressemblent pas trop • Une base de données • Par groupe de 2 ou 3 • Rendre des documents sur un site web de votre projet à date fixes • Obtenir des retours rapides sur votre travail • Mettre en œuvre les différentes techniques étudiées en cours • Produire un prototype évalué par vos pairs fin janvier

24. Sujet • Pas trop ambitieux • Des utilisateurs • Accessibles (entretiens) • Différents de vous • Exemples de sujets • Sur la partie projet du site de l’UE-IHM

25. Déroulement • 4 phases • Phase 0 : constitution des équipes (12/9) • Phase 1 : définition du problème (7/11) • Phase 2 : conception (14/11) • Phase 3 : développement (23/1) • Phase 4 : évaluation (27/1) à chaque cours • Devoir à rendre : en ligne • Présentation de l’avancement du projet

26. Fiche de lecture • Choisir un texte et préparer une fiche • Thèmes: conception, évaluation, prototypage, histoire de l’IHM, IHM &EIAH • Fiche • Identification • de l’auteur de la fiche, du texte, des auteurs, de l’ouvrage dont est issu le texte • Résumé (ce que disent les auteurs) • Analyse et commentaires (ce que vous en pensez) • Les erreurs de vos prédécesseurs (Cf. méthodologie de la recherche) A rendre le 31 octobre sur Moodle

27. 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 • D. Van Duyne, J. Landay, J. Hong, The Design of Sites: Patterns for creating winning web sites, Prentice Hall, 2007 • A. Boucher, Ergonomie Web, Eyrolles 2009 • Manuel de référence • B. Shneiderman, C. Plaisant, M. Cohen, and S. Jacobs, Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition), Pearson, 672 Pages • Des textes à télécharger pour préparer chaque cours • Poly sur les techniques de conception + textes de bases • Autres références : sur le site

28. Évaluation de l’UE ? • Première session : Contrôle continu (CC) • P : Note de projet (sur 10) • PP : Note personnelle (sur 5) • PE : Note équipe (sur 5) • Note personnelle • L: Fiche de lecture IHM (sur 5) • TP : Travaux pratiques en php, mysql, html (sur 5) CC = PP + PE + L +TP • Deuxième session (NF) • Examen : E2 • NF = sup (E2, (E2 + CC)/2)

29. Devoir pour le 12/9 • Projet : • Réfléchir à un idée de projet • Déposer une fiche descriptive sur Moodle • Faire campagne pour trouver des équipiers • Lecture • Choisir un texte • Commencer la lecture

30. Dicton du jour L’interface est (presque) la seule chose que l’usager connaît de l’application que vous avez construite