1 IHM M2-IFL/DU-TICE, UPMC 09-Accueil.htm 1-Interaction Humains-Machines 2-Présentation du module 3-Évaluation heuristique Cours 1

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 : Méthodes d’inspection  Évaluation heuristique  Critères d’utilisabilité de l’INRIA

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 Pourquoi étudier l’IHM ? 1.Économiques  50 à 90 % des coûts de développement 2.Sociales  des gens qui sont différents de vous utiliseront vos logiciels  des interfaces mal conçues coûtent cher  Argent :+ 5 % de satisfaction => + 85 % de hausse (Landay)  Vie : accident du Mont Saint-Odile 3.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 4.Professionnelles  Vous aurez à travailler  pour des entreprises qui font des logiciels pour des utilisateurs, pas seulement pour des machines

5 É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)

6 Point de vue des usagers Pour l’utilisateur le produit c’est l’interface (J. Raskin [1])

7 Conséquence  Importance croissante de la prise en compte des utilisateurs  et donc de l’ interface et de l’ interaction

8 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

9 É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

10 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 disséminée, vestimentaire, invisible, réalité virtuelle, réalité augmentée, réalité mixte, interfaces tangibles

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 : domaine pluridisciplinaire  s’intéresse  la conception  l’évaluation  des logiciels interactifs et de leurs interfaces  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

13 I H M : objets d’études 3 grandes catégories  Interaction : Boucle  Les utilisateurs expriment ce qu’ils veulent faire  Le logiciel interprète, exécute et communique des résultats  Les utilisateurs interprètent les modifications  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  (Génie Logiciel, plan qualité)

14 Orientation du module IHM H de Humain Plutôt que M de Machine Interaction Plutôt que fonctionnalité

15 Performance du couple « Homme »/Machine  [8]

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 concepteurs  Les concepteurs (amateurs)  se centrent uniquement 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

18 Conception de l’interaction  Concevoir l’interaction des usagers avec le système  Pas une opération cosmétique  chargée de mettre en final l’application au goût du jour  Étape centrale  dans le processus de conception d’un logiciel

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

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

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

22 Utilisabilité  norme ISO (1998) :  l’utilisabilité « est le degré selon lequel un produit peut- être utilisé  par des utilisateurs identifiés,  pour atteindre des buts définis  avec efficacité, efficience et satisfaction  dans un contexte d’utilisation spécifié ».  Bastien  Utilisabilité/utilité : qualité ergonomique de l'interface

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

24 Cycle de conception 4 phases Ergonomie Comprendre Participation des utilisateurs Concevoir Prototypage Développer Études utilsateurs Évaluer

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

26 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

27 Conception centrée usager Connais tes usagers ! (Cours 2, phase 1 du projet)  Collecte d’informations  Questions : que font-ils ? Souvent ? Rarement ?contraintes de temps ? Communication avec d’autres ? Autour de l’ordinateur ?  Comment : observations, entretiens, questionnaires  Analyse des informations  Catégories de tâches  Ressources pour la conception  Profils d’utilisateurs, personnages, scénarios  Maintenir des usagers dans l’équipe de conception tout au long du projet

28 Prototypage Indispensable pour  Aider les utilisateurs, les clients et l’équipe à imaginer les solutions  Explorer des alternatives  Évaluer l’utilisabilité dans différentes conditions  Se concentrer sur les parties problématiques (cours 3 et 4, projet IHM, texte Beaudoin- lafon & mackay 2007)

29 Évaluation  Tester avec des usagers réels  Pour les modèles et les maquettes, utiliser des techniques d’évaluation « légères »  Inspections (TD n°1)  Tests utilisateurs informels  Pour les prototypes avancés, utiliser des techniques d’évaluation plus « lourdes » et rigoureuses  Expérimentations contrôlées  Expérimentations en contexte  Cours 5 et atelier en février

30 Conception itérative (cours de James Landay)cours

31 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)

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

33 Compétences (1/2) Savoir 1.organiser et mettre en œuvre  une démarche rigoureuse de conception centrée utilisateur lors de la conception d'un logiciel interactif 2.mettre en œuvre  des techniques simples de recueil d’informations, d’analyse et de conception  un plan d'évaluation dans un projet de conception de logiciel interactif 3.rédiger  une analyse de problème, un dossier de conception, un rapport d'évaluation d'un logiciel interactif  une fiche de lecture 4.organiser  un travail en équipe

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

35 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

36 Plan du cours  Cf le site /M2-IFL-DU-TICE-09-Accueil.htm

37 Projet  Conception d’un site Web  Utilisateurs potentiels réels et accessibles (entretiens)  Une base de données  Par groupe de 3  Rendre des documents sur un site web de votre projet à date fixes  Mettre en œuvre les différentes techniques étudiées en cours

38 Déroulement  4 phases  Phase 0 : choix du sujet, constitution des équipes  Phase 1 : définition du problème  Phase 2 : conception  Phase 3 : développement  Phase 4 : évaluation  (descriptif en ligne)

39 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 14 octobre sur Moodle

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  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 2008  Manuel de référence  Ben Shneiderman, Catherine Plaisant, Maxine Cohen, and Steven Jacobs, Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition), Pearson, 672 Pages Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition)  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  Poly sur les techniques de conception + textes de bases  Des cours  Professionnel :  Recherche :

41 Évaluation de l’UE?  Première session : Contrôle continu (CC)  P : Note de projet (sur 10)  Note personnelle  L: Fiche de lecture IHM (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 Retenir  Concepts de base : WIMP, WYSIWIG, manipulation directe, métaphore  Conception centrée utilisateur (définition de la norme ISO)  Utilisabilité  Les 7 clés du succès

44 Dicton du jour  L’interface est (presque) la seule chose que l’usager connaît du logiciel que vous avez construit