1

IHM

M2-EIAH/DU-TICE, Paris 6Elisabeth.Delozanne@upmc.fr

http://www.lutes.upmc.fr/delozanne/2008-2009/M2-P6-EIAH-Accueil.htm

1-Interaction Humains-Machines 2-Présentation du

module

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 : présentation du projet

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

Évolution de l’informatiqueSatisfaire les besoins des utilisateurs

Difficile : les humains et leurs activités sont complexes

Importance de l’interface point de vue des usagers :

Pour l’utilisateur le produit c’est l’interface (J. Raskin [1]) point de vue du projet informatique

Entre 50 et 90 % du temps de développement d’un logiciel point de vue social et commercial

Une mauvaise interface coûte•De l’argent–+ 5 % de satisfaction => + 85 % de hausse (Landay)

•Des vies–Accident du mont Saint-Odile

5

Quelles dates ?

Opérateur sur console StretchMarkI, programmée en binaire

SketchPad, Interface graphique

StarXerox, WhysiwygMacintosh

iMac

6

Quelles dates ?

1948

1963

1981

1984

actuel

1955

1955

7

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

8

ConséquenceImportance croissante

de la prise en compte des utilisateurs

et donc de l’ interface et de l’ interaction

9

Prise en compte de l’utilisateurApproche 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

É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

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 un domaine de l’informatique qui s’intéresse

à la conception à l’évaluation des logiciels interactifs et de leurs interfaces

qui s’appuie sur des connaissances en sciences humaines et sociales : psychologie,

sociologie, ergonomie en informatique

qui met au point des méthodes des techniques des outils

13

Orientation du module IHMSujet :

Formation aux méthodes et techniques d’évaluation et de conception des logiciels interactifs

3 grandes catégories d’objets d’étude : 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

Interaction : Boucle Les utilisateurs expriment ce qu’ils veulent faire Le logiciel interprète, exécute et communique des résultats

Focalisation : H de IHM

14

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

15

IHM

Interface homme – machine Dispositif matériel et logiciel

lié à une application

Interaction homme – machine Relations entre l’humain

et la machine par l’interface

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 informaticiensLes concepteurs informaticiens

se centrent uniquement sur le fonctionnement du système

traitent l’interface en dernierpensent que tous les utilisateurs leur ressemblent

ne sont pas formés à l’analyse de besoins, à travailler avec des

utilisateursne comprennent pas que les besoins évoluent au cours de conception

18

Avertissement aux informaticiens

L’interface est la seule chose que l’usager connaît du système que vous concevez

Concevoir l’interaction des usagers avec le système N’ est pas une opération cosmétique chargée de mettre

en final l’application au goût du jour C’ est une étape centrale dans le processus de

conception d’un logiciel

19

Interactions Humains/machines

la conception, l'évaluation et l'implémentation des systèmes informatiques interactifs et l'étude des principaux phénomènes qui les entourent. (Hewett, 92)

la conception de systèmes informatiques qui permettent aux utilisateurs de mener leurs activités de façon productive et sûre. (Preece et al, 94) [6]

concerne la compréhension et la création de logiciels et d’autres dispositifs technologiques que les gens vont avoir envie d’utiliser et même plaisir à utiliser, qu’ils vont pouvoir utiliser et qu’ils vont trouver efficaces quand ils les utiliseront

(Caroll 2001, 2004) [7] HCI = design, prototyping, evaluation &implementation of

UI (J. Landay 2002)[3]

20

Performance du couple « Homme »/Machine[8]

21

Utilisateur, usager, acteur,  stakeholderUtilisateur :

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

22

IHM ? Point de vue ergonomique

Tâche, activité

ConceptionHumains

Technologie

Organisation et environnement social

Chacun des facteurs influence les autres

23

Pourquoi étudier l’IHM ?1. Économiques

50 à 90 % des coûts de développement pour les d’applications interactives

2. Sociales des gens qui sont différents de vous utiliseront vos logiciels des interfaces mal conçues coûtent cher

3. Scientifiques et techniques Les interfaces utilisateurs sont difficiles à mettre au point

Les gens sont imprévisibles 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

24

En tant que concepteur…

Retenez que Ce n’est pas à l’utilisateur de s’adapter à vos idées,

certes géniales

Maisc’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 utilisateurDes techniques : entretiens, incidents critiques etc.

25

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

26

Les clés du succèsCycle de conceptionConception centrée usagerL’analyse des tâches et les analyses en contexte de travail usuel

Le prototypage rapideL’évaluation constanteConception itérativeLa qualité de la programmation

(cours de James Landay)

27

Cycle de conception

Ergonomie

Analyse

Participation des utilisateurs

Conception

PrototypageDéveloppement

Études utilsateurs

Évaluation

28

Conception centrée usager

Connais tes usagers !Classes d’utilisateurs

Créer des personnagesLeurs compétences

Visuelles, tactiles, manipulatrices Métiers Connaissances du domaine

Leur contexteMaintenir des usagers dans l’équipe de

conception tout au long du projet

29

Comment ?Analyse de tâches, analyses en contexte

Observer les pratiques usuelles de travail Routinières Exceptionnelles Situations de stress

Créer des scénarios d’utilisation réelle

Tester les idées nouvelles avant de développer un logiciel

30

ÉvaluationTester avec des usagers réelsConstruire des modèlesPour les modèles et les maquettes, utiliser des

techniques d’évaluation « légères » Évaluation par des experts Inspections Tests informels

Pour les prototypes avancés, utiliser des techniques d’évaluation plus « lourdes » et rigoureuses Expérimentations contrôlées Expérimentations en contexte

31

Conception itérative

(cours de James Landay)

32

Étapes de la conceptionPlanifier le processus de conceptionÉtudier les différentes catégories

d’utilisateurs et le contexte d’utilisationIdentifier 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

33

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

34

Objectifs de l'enseignement

1. Sensibiliser aux démarches ergonomiques et centrée-

utilisateur

2. Faire connaître 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

35

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. concevoir et mettre en œuvre un plan d'évaluation dans un projet de conception de

logiciel interactif3. rédiger

un état de l'art, un cahier des charges, un dossier de conception, un rapport d'évaluation d'un logiciel interactif

une fiche de lecture4. organiser

un travail en équipe

36

Compétences(2/2) 6. trouver

les recommandations, guides de style, standards, design patterns

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

37

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

Développer un logiciel : IHM : analyse de besoins, conception et évaluation des interactions GL : outils de conception informatique Programmation et BD : mise en œuvre informatique

38

Plan du coursCf le sitehttp://www.lutes.upmc.fr/delozanne/

2008-2009/IHM-M2-P6-EIAH/siteIHM/CoursIHM.htm

39

Intérêt du projetComme en entrepriseSatisfaire les utilisateurs

Les comprendre et les impliquer Focus sur l’analyse des besoins et la conception du

point de vue utilisateur

Communiquer et travailler en équipeÊtre flexibleSubir de fortes contraintes temporellesSe départir de jugements subjectifs

40

LecturesUne 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 exemplesVan Duyne D. K., Landay J., Hong J., The design of sites : Patterns,

Principles and process for crafting a Customer Centered Web experience, Addison-Wesley, 2003

Deux manuels de référence Ben SHNEIDERMAN, Designing the User Interface, Addison Wesley, 2004

(nouvelle édition) J.-F. Nogier, Ergonomie du logiciel et design des sites web, l’ergonomie

des interfaces utilisateurs Dunod, 3 ° édition 2005 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 Rédaction de fiches de lecture et débat

Des sites

41

Évaluation du module ?Première session : Contrôle continu (CC)

P : Note de projet (sur 10) Note personnelle

L: Synthèse de lecture (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 roueDesign Patterns

43

Références (1/2)Gaëlle CALVARY Ingénierie de l'interaction homme-

machine : rétrospective et perspectives, Interaction homme-machine et recherche d'information, Traité des Sciences et Techniques de l'Information, C. Paganelli Ed., Hermès 2002, 19-63 http://iihm.imag.fr/publs/2002/TSTI.calvary.pdf

Christian BASTIEN, Dominique SCAPIN, Évaluation des systèmes d’information et critères ergonomiques, in Christophe KOLSKI (Ed.), Environnements évolués et évaluation de l'IHM, Interaction homme-machine pour les systèmes d'information Vol 2, Hermès, 2001, 53-113

Jean CAELEN, Communication Homme-Machine & sciences pour l’ingénieur, Revue d’Interaction Homme Machine, volume 1- N°1/1998, p. 1-10.

John M. Caroll (ed), Human Computer Interaction in the new Millennium, Addison Wesley, 2001

44

Références (2/2) Jocelyne NANARD, La manipulation directe en Interface

Homme-Machine, Thèse d’État, Université des Sciences et Techniques du Languedoc, Montpellier, Décembre 1990 (introduction et chapitre 1)

Donald Norman, S. W. DRAPER, User-Centred Design, Hillsdale, NJ : Erlbaum, 1986

Jenny PREECE et al, Human Computer Interaction, Addison Wesley, 1994

Jef RASKIN, The Human Interface, New Direction for designing Interactive Systems, Addison Wesley 2000

Ben SHNEIDERMAN, Designing the User Interface, Addison Wesley, 2004 (nouvelle édition)

Guide to usability, Open University , 144 p., 1993

45

SitesBeaudoin Lafon

http://wiki.lri.fr:8000/fondihm/fondihm.wikiCoutaz :

http://iihm.imag.fr/coutaz.book/coutaz.properties.html

Landay : http://guir.berkeley.edu/courses/cs160/2002_spring/lectures.htm

Cannyhttp://www.cs.berkeley.edu/~jfc/cs160/F04/

Bastienhttp://www.lergonome.org

Lompré :http://www.univ-pau.fr/~lompre

46

Take home message

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