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

2. Qui suis-je ? Maître de Conférences Informatique Paris 6 (sept. 2007->…) Enseignante • IHM, Algorithmique, Programmation, TICE, Math • U. Paris-Descartes, IUFM de Créteil, IUP U.. 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) • IHM, Conception participative et le prototypage • Congé pour recherches : U. Sydney, Télé-U. 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 • UPMC, U. du Maine Chercheur • Thèse 2006 (U. 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 • Aux gens • d’interagir avec la machine • À 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 Interactions des Humains avec des Mondes • Informatique mobile, disséminée, vestimentaire, invisible • Réalité virtuelle, réalité augmentée, réalité mixte • Interfaces tangibles • Web dynamique, communautaire, temps réel

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. Pourquoi étudier l’IHM ? • Économiques • 50 à 90 % des coûts de développement • Sociales • des interactions mal conçues coûtent cher • Argent :+ 5 % de satisfaction => + 85 % de hausse (Landay) • Vie : accident du Mont Saint-Odile • Scientifiques et techniques • Défis • Personnes : imprévisibles • Activités : complexes • 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

12. Qui conçoit des interactions ? • Une équipe • Idéalement • Spécialistes de l’interaction/l’expérience utilisateur (UX) • Ergonomes • Marketing • Rédacteurs techniques • Ingénieurs spécialisés dans les tests • Développeurs Informatiques • Graphistes • Utilisateurs

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

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

15. Orientation du cours IHM

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

17. 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 , undossier de conception, un rapport d'évaluation d'un logiciel interactif • une fiche de lecture

18. 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

19. 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

20. Plan du cours Cf le site http://lutes.upmc.fr/delozanne/2013-2014/IHM-IFL-TICE/siteIHM/CoursIHM.htm

21. 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 • Livrables réguliers • Déposer des documents sur un site web à 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

22. 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

23. Déroulement • 4 phases • Phase 0 : dépôt de sujet (11/9), constitution des équipes (18/9) • Phase 1 : définition du problème (11/12) • Phase 2 : conception (20/12) • Phase 3 : développement (23/1) • Phase 4 : évaluation (29/1) à chaque cours • Devoir à rendre : en ligne • Présentation de l’avancement du projet

24. 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 18 septembre sur Moodle

25. 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

26. É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)

27. Devoir pour le 18/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 • Rédiger une fiche de lecture

28. En tant que concepteur… Retenez 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 • Les besoins évoluent avec le temps Pour cela • Des sciences (humaines) : ergonomie (des logiciels), psychologie, sociologie • Des méthodes : conception centrée utilisateur • Des techniques : entretiens, incidents critiques etc.

29. Dicton du jour • Pour l’utilisateur produit = interface