UE 2 : CCU-Web

1. UE 2 : CCU-Web Cours 0 : Présentation de l’UE 1-Conception Centrée Utilisateur 2-Présentation de l’UE M2-IMFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr

2. Qui suis-je ? Projet CCU 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 Cours web 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. Bertrand Marne • Projet Web • Attaché temporaire d’enseignement et de recherche au LIP6 • Enseignant • SVT (jusqu’en 2014) • Chercheur • Équipe Mocah du LIP6 • Thèse en juillet 2014 • Outils auteurs et jeux sérieux

5. Julien Chenat • Cours CCU-UX • 8 d’expérience : User Experience Designer • Architecte de l’information (Viadeo) • Consultant en ergonomie (Altima, EnjoyAffinity, Tagora) • Chef de projet Web, Concepteur et développeur Web

6. Conception Centrée Utilisateurs ? D. Norman en 1986 , Norme ISO 13407 (1999) 5 principes • analyse des besoinsdes utilisateurs, de leurstâches et de leurcontexte de travail • participation active de cesutilisateurs à la conception • répartitionappropriée des fonctions entre les utilisateurs et la technologie • démarcheitérativede conception • intervention d'uneéquipe de conception multi-disciplinaire

7. Cycles de conception itérative (cours de James Landay)

8. Ce module • Techniques pour • Aborder l’interaction H/M du point de vue de l’utilisateur • Maintenir ce point de vue tout au long de la conception

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

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

11. 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)

12. Point de vue des usagers

13. Pourquoi étudier la CCU ? • É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

14. Qui sont les concepteurs ? • 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

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

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

17. Objectifs de l‘UE • Sensibiliser • aux démarches ergonomiques et centrée-utilisateur • Faire connaître et pratiquer • techniques 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 et B. Marne) • Html, php, javascript

18. 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, maquette à main levée, prototypage, inspection heuristique, revue de conception • un plan d'évaluation dans un projet • une base de données en PHP/MySQL • un site Web en utilisant Javascript et un framework HTML/CSS

19. Compétences (2/2) • rédiger • une analyse de problème , undossier de conception, un rapport d'évaluation d'un logiciel interactif • une fiche de lecture • une bibliographie en utilisant un logiciel de gestion de références • 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

20. Organisation de l’UE • 4 enseignants : • J. Chenat, É. Delozanne : Conception centrée utilisateur • Johan Michel, Bertrand Marne : Technologies Web • Apprentissage par confrontation • de pratiques : • un 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

21. Plan du cours • Web • 5 cours Web (Html, Base de données, php) • 9 TP (Zotero, Javascript, Frameworks HTML/CSS, encadrement du projet) • CCU • 5 cours CCU • 8 TP encadrement du projet (analyseconcurrentielle, entretiens, personas, scénarios, revue de conception, évaluation) • Bibliothèqueuniversitaire • 1 séance de présentation de la BUPMC

22. Projet • Conception d’une application Web (mobile) • 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 à dates fixes • Obtenir des retours rapides sur votre travail • Pour progresser (pas sanctionner, seconde chance) • Mettre en œuvre les différentes techniques étudiées en cours • Produire un prototype évalué par vos pairs fin janvier

23. Sujet • Pas trop ambitieux • Des utilisateurs • Accessibles (entretiens) • Différents de vous • Exemples de sujets http://lutes.upmc.fr/delozanne/2014-2015/IHMweb/projetIHM.htm

24. Déroulement • 4 phases • 0 : dépôt de sujet (10/9), constitution des équipes (17/9) • 1 : définition du problème (12/11) • 2 : conception (17/12) • 3 : développement (27/1) • 4 : évaluation (28/1)

25. Projet encadré • Présentation des Techniques • Cours, exercices • Fiches de synthèse • Bibliographie • Mise en œuvre séances de projet • Rendre un document (en ligne) • Présenter l’avancement du projet (phase 0-2) • Développer (phase 3) • Évaluer (phase 4)

26. Fiche de lecture • Choisir un texte et préparer une fiche • Thèmes: CCU, conception, évaluation • 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 A rendre le 1 ier octobre sur Moodle Consignes et conseils : • http://lutes.upmc.fr/delozanne/2014-2015/IHMweb/LectureCCU.htm

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 • A. Boucher, Ergonomie Web, Eyrolles 2009 • S. Daumal,. Design d'expérience utilisateur: Principes et méthodes UX. Éditions Eyrolles, 2012 • S. Krug, Don't make me think, Pearson France, 2012 • L. Wroblewski, Mobile first, Éditions Eyrolles 2011 • A. Walter, Design Emotionnel, Éditions Eyrolles 2011 • Des fiches de synthèse à chaqueétape du projet • Autres références • http://lutes.upmc.fr/delozanne/2014-2015/IHMweb/LectureCCU.htm

28. Contrôle de connaissances • Première session : Contrôle continu (CC) • P : Note de projet (sur 20) • L: Fiche de lecture IHM (sur 20) • TP : Travaux pratiques en php, mysql, html (sur 20) CC = (2P+ L +TP)/4 • Deuxième session (NF) • Examen : E2 • NF = sup (E2, (E2 + CC)/2)

29. Devoir pour le 10/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 (1/10)

30. En tant que concepteur… Retenez Ce n’est pas à l’utilisateur de s’adapter à vos idées, certes géniales Mais • C’est à vous d’adapter l’application à 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.

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