IHM Cours 1 1 Interaction HumainsMachines 2 Prsentation

IHM Cours 1 1 -Interaction Humains-Machines 2 -Présentation du module 3 -Évaluation heuristique M 2 -IFL/DU-TICE, UPMC Elisabeth. Delozanne@upmc. fr http: //www. lutes. upmc. fr/delozanne/2009 -2010/M 2 -IFL-DU-TICE 09 -Accueil. htm 1

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

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 3

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 4

É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 (Ubi. Comp) 5

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

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

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 8

É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, 9 ordinateur évanescent, interface tangible/ sans couture

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 10

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 11

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 12

IHM : 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é) 13

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

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

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 16

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 17

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 18

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

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

Conception centrée utilisateurs Ø Terme inventé par D. Norman en 1986 [10] Ø Norme ISO 13407 : 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 21

Utilisabilité Ønorme ISO 9241 -11 (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 22 22

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

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

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

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 26

Conception centrée usager Connais tes usagers ! Ø Collecte d’informations (Cours 2, phase 1 du projet) § 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 27

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

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

Conception itérative (cours de James Landay) 30

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

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 32

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 33

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 34

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 35

Plan du cours ØCf le site http: //www. lutes. upmc. fr/delozanne/20092010/M 2 -IFL-DU-TICE-09 -Accueil. htm 36

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 37

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

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 39

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 (5 th Edition), Pearson, 672 Pages Ø 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 : http: //www. cs. washington. edu/education/courses/490 l/08 sp/ § Recherche : http: //wiki 8000. lri. fr: 8000/CEI. wiki 40

É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 : E 2 § NF = sup (E 2, (E 2 + CC)/2) 41

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 42

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 43

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