Cours 0 : Présentation de l’UE 1-Conception Centrée Utilisateur 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

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

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

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

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

Conception Centrée Utilisateurs ? D. Norman en 1986 , Norme ISO 13407 (1999) 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

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

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

Interaction « Homme »/Machine [8] Tiré de [« A guide to usability » 1993] Maintenant on pense plus support à l’activité, à la communication et interaction avec de l’informatique disséminée, invisible…. Et donc on met humains et machines au pluriel (Guide to usability, Open University, 1993)

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

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)

Point de vue des usagers Pour l’utilisateur produit = interface

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

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

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

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

Objectifs de l‘UE Sensibiliser Faire connaître et pratiquer 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 IHM : l’utilisateur au centre des préoccupations en ingénierie des logiciels interactifs

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

Compétences (2/2) rédiger une analyse de problème , un dossier 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

Organisation de l’UE 4 enseignants : Apprentissage par confrontation 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

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 (analyse concurrentielle, entretiens, personas, scénarios, revue de conception, évaluation) Bibliothèque universitaire 1 séance de présentation de la BUPMC

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

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

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)

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)

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

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

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)

Devoir pour le 10/9 Projet : Lecture 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)

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. La SELF (Société d'Ergonomie de Langue Française) définit l'ergonomie comme : « la mise en œuvre de connaissances scientifiques relatives à l'homme et nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés par le plus grand nombre avec le maximum de confort, de sécurité et d'efficacité. »

Pour l’utilisateur produit = interface Dicton du jour Pour l’utilisateur produit = interface