IHM

1
IHM
Cours 1
1-Présentation du module 2-Interaction
Humains-Machines
É. Delozanne, M1-M2-IPCC, Paris 5,
2006-07 Elisabeth.Delozanne_at_math-info.univ-paris5.
fr http//www.math-info.univ-paris5.fr/delozanne/

2
IHM

• TD1-Présentation du module
• Enjeux
• Objectifs de la formation
• Déroulement, cours, mini- projet
• Cours 1 IHM ?

3
Cours 1 Interaction Humains-Machines

• Définition
• Évolution
• Concepts fondamentaux
• Interaction graphique
• Conception centrée-utilisateur
• Utilité et Utilisabilité
• Les clés du succès
• Références

4
Qui suis-je ?

• Maître de Conférences Informatique Paris 5 (sept.
  2002)
• Enseignante
• IHM, Algorithmique, POO, TICE, Math
• Paris 5, IUFM de Créteil, IUP Univ. du Mans,
  Secondaire
• Chercheure
• Thèse en 1992 (Université du Maine)
• Centres dinté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
• CRIP5 (Centre de Recherche en Informatique de
  Paris 5)
• Congé pour recherches Univ. Sydney, Télé-Univ.
  du Québec

5
Évolution de linformatique

• Satisfaire les besoins des utilisateurs
• Difficile les humains et leurs activités sont
  complexes
• Importance de linterface
• point de vue des usagers
• Pour lutilisateur le produit cest linterface
  (J. Raskin 1)
• point de vue du projet informatique
• Entre 50 et 90 du temps de développement dun
  logiciel
• point de vue social et commercial
• Une mauvaise interface coûte
• De largent
• 5 de satisfaction gt 85 de hausse
  (Landay)
• Des vies
• Accident du mont Saint-Odile

6
IHM

• un domaine de linformatique
• qui sintéresse
• à la conception
• à lévaluation
• des logiciels interactifs et de leurs interfaces
• qui sappuie sur des connaissances
• en sciences humaines et sociales psychologie,
  sociologie, ergonomie
• en informatique
• qui met au point
• des méthodes
• des techniques
• des outils

7
Enjeux actuels

• Développement dInternet
• Les sites web des logiciels interactifs
  spécifiques
• Méthodes et techniques dévaluation et de
  conception des sites web
• Le Web a fait de lHypertexte un standard dIHM
• Lenvironnement technologique du web
• Principes généraux de fonctionnement
• Langages à balises (HTML, XML)
• Langages de scripts (Javascript, PHP)

8
Orientation du module IHM

• Sujet
• Formation aux méthodes et techniques dévaluation
  et de conception des logiciels interactifs
• Application au cas particulier des sites web
• 3 grandes catégories dobjets détude
• Humain
• Les utilisateurs finaux, les autres membres de
  lorganisation
• 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 quils veulent
  faire
• Le logiciel interprète, exécute et communique des
  résultats
• Focalisation
• H de IHM et Applications Internet

9
Objectifs de l'enseignement

• Sensibiliser
• aux démarches ergonomiques et centrée-utilisateur
• Faire connaître
• les méthodes et techniques dévaluation et de
  conception centrée utilisateur de logiciels
  interactifs
• Présenter
• des outils informatiques de réalisation de sites
  web
• Envisager
• les évolutions dans le domaine

10
Objectifs dapprentissage (1/2)

• Savoir
• organiser et mettre en uvre
• une démarche rigoureuse de conception centrée
  utilisateur lors de la conception d'un logiciel
  interactif
• concevoir et mettre en uvre
• un plan d'évaluation dans un projet de conception
  de logiciel interactif
• 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 lecture
• organiser
• un travail en équipe

11
Objectifs dapprentissage (2/2)

• trouver
• les recommandations, guides de style, standards,
  design patterns
• présenter
• les principaux concepts du domaine de lIHM
• communiquer
• vos idées, les argumenter, les développer et les
  faire évoluer

12
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
• En M1, apprentissage par confrontation
• de pratiques
• un mini-projet expériences dutilisation 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

13
Intérêt du projet

• Comme en entreprise
• Satisfaire les utilisateurs
• Les comprendre et les impliquer
• Lien analyse de besoins-programmation
• Un projet commun IHM et Java avancé
• Communiquer et travailler en équipe
• Être flexible
• Subir de fortes contraintes temporelles
• Se départir de jugements subjectifs

14
Lectures

• 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, lergonomie des interfaces
  utilisateurs Dunod, 3  édition 2005
• Une excellente introduction à lergonomie du
  logiciel
• E. Brangier, J. Barcenilla, Concevoir un produit
  facile à utiliser  Adapter les technologies à
  lhomme, Editions dorganisation, 2003
• Des méthodes, des conseils et des exemples
• Van 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
• Une synthèse sur létat de lart 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 dune fiche de lecture et débat

15
Calendrier
16
Évaluation du module ?

• Première session Contrôle continu (CC)
• P Note de projet (50 )
• Note personnelle
• L Synthèse de lecture (25 )
• C Interrogation de cours (25 )
• CC (2P L C)/4
• Deuxième session (NF)
• Examen E2
• NF sup (E2, (E2 CC)/2)

17
Quelles dates ?
SketchPad, Interface graphique
MarkI, programmée en binaire
iMac
Opérateur sur console Stretch
StarXerox, Whysiwyg
Macintosh
18
Quelles dates ?

• 1955

1963
1948
actuel
1955
1981
1984
19
É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 dinformation
• 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)

20
Conséquence

• Importance croissante
• de la prise en compte des utilisateurs
• et donc
• de l interface et de l interaction

21
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

22
IHM

• Interface homme machine
• Dispositif matériel et logiciel lié à une
  application
• Interaction homme machine
• Relations entre lhumain et la machine par
  linterface

23
Interface Utilisateur (User Interfaces)

• J. Nanard 3, J. Landay 4
• pour l'usager, c'est le lieu où s'opère la
  communication avec le système informatique
  utilisé pour l'aider dans son activité
• J. Caelen 5
• l'interface participe autant de l'homme que de
  la machine puisqu'elle est à leur frontière

24
Reproches aux informaticiens

• Les concepteurs informaticiens
• se centrent uniquement sur le fonctionnement du
  système
• traitent linterface en dernier
• pensent que tous les utilisateurs leur
  ressemblent
• ne sont pas formés
• à lanalyse de besoins, à travailler avec des
  utilisateurs
• ne comprennent pas que les besoins évoluent au
  cours de conception

25
Avertissement aux informaticiens

• Linterface est la seule chose que lusager
  connaît du système que vous concevez
• Concevoir linteraction des usagers avec le
  système
• N est pas une opération cosmétique chargée de
  mettre en final lapplication au goût du jour
• C est une étape centrale dans le processus de
  conception dun logiciel

26
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 dautres dispositifs technologiques
  que les gens
• vont avoir envie dutiliser et même plaisir à
  utiliser,
• quils vont pouvoir utiliser
• et quils vont trouver efficaces quand ils les
  utiliseront (Caroll 2001, 2004) 7
• HCI design, prototyping, evaluation
  implementation of UI (J. Landay 2002)3

27
Performance du couple  Homme /Machine

• 8

28
Utilisateur, usager, acteur,  stakeholder

• Utilisateur
• utilise une application et doit sen contenter
• Usager
• a un besoin que le logiciel doit satisfaire
• sattend à 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 dune organisation sociale
• le logiciel est un partenaire pour lépauler
  dans cette activité
•  Stakeholdeur  partie prenantes
• Utilisateur primaire, secondaire, périphérique

29
IHM ? Point de vue ergonomique

• Tâche, activité
• Conception
• Humains
• Technologie
• Organisation et environnement social
• Chacun des facteurs influence les autres

30
Pourquoi étudier lIHM ?

• Économiques
• 50 à 90 des coûts de développement pour les
  dapplications interactives
• Sociales
• des gens qui sont différents de vous utiliseront
  vos logiciels
• des interfaces mal conçues coûtent cher
• 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
• Professionnelles
• Vous aurez à travailler
• pour des entreprises qui font des logiciels pour
  des utilisateurs, pas seulement pour des machines

31
Interfaces graphiques historique (1/2)

• 1945
• Memex, système hypertexte
• années 1960
• études sur les partitions d'écran, multifenêtrage
  (univ. de Standford )
• années 70
• avec en particulier les recherches autour de
  Smalltalk (Xerox Parc)
• début des années 80 Les idées sont là. Pas la
  technologie
• apparition du Star (terminal bureautique de
  Xerox) et du Lisa (micro bureautique d'Apple).
• apparition des microprocesseurs 32 bitslook and
  feel ou WIMP (Windows, Icons, Menus, Pointer)

32
1945 Memex

• une machine  virtuelle , Vannevar Bush

33
Interfaces graphiques historique (2/2)

• 1984
• lancement du Macintosh (68000) succès fondé
  sur la qualité de l'interface et la convivialité
• 5 ans après,
• PC et compatibles Windows et Presentation
  ManagerCUA (Common User Access)
• dans le monde UNIX sur stations de travail
  XWindow, Motif, Open Look, NextStep
• 1990
• World Wide Web (CERN) modèle Hypertexte en
  réseau
• Interfaces graphiques mais aussi multimodales,
  tangibles etc.
• (par exemple Calvary 2002) 9)

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

35
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

36
Prise en compte de lutilisateur

• Approche technocentrique
• centrée sur la machine
• et ses possibilités
• lutilisateur doit sadapter à la machine
• Approche anthropocentrique
• centrée sur lhomme
• et ses besoins
• la machine doit sadapter à lutilisateur
• Approche instrumentale
• Co-adaptation des machines et des humains

37
En tant que concepteur

• Retenez que
• Ce nest pas à lutilisateur de sadapter à vos
  idées, certes géniales
• Mais
• cest au concepteur de sadapter à lactivité de
  lutilisateur
• 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.

38
Conception centrée utilisateurs

• Terme inventé par D. Norman en 1986 10
• Norme ISO 13407 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

39
Conception centrée utilisateurs

• logique de fonctionnement/ dutilisation
• Logique dutilisation modèle conceptuel de
  linterface
• Logique de fonctionnement architecture
  logicielle de linterface
• prendre en compte les besoins des utilisateurs
• Variabilité, spécificité, différences
• il ne suffit pas de demander aux utilisateurs ce
  quils veulent
• Méthodes, techniques, expérience pour mener
  lanalyse des besoins
• ? ergonomie des IHM
• 2 concepts clés utilité et utilisabilité

40
Utilité et utilisabilité

• Utilité
• permet à lutilisateur d'atteindre ses buts de
  haut niveau
• Fonctionnalités, conformité au cahier des charges
  
• Utilisabilité
• la possibilité datteindre ses buts, le confort
  d'utilisation
• règles de dialogue, de navigation
• A Guide to usability 8
• santé, sécurité, efficacité, plaisir
• Schneiderman 11 l'utilisabilité se mesure
  principalement
• temps d'apprentissage, vitesse d'exécution des
  tâches, taux d'erreurs, facilité de rétention
  dans le temps, satisfaction subjective

41
Critères dutilisabilité

• Coutaz 2
• Utilisabilité Souplesse Robustesse
• Bastien 12
• Utilisabilité/utilité qualité ergonomique de
  l'interface
• Norme AFNOR Z67-133-1
• Comptabilité, Homogénéité, Guidage, Souplesse,
  Contrôle explicite, Gestion des erreurs,
  Concision
• Voir aussi
• http//www.lergonome.org
• Cours dergonomie en ligne
• http//www.univ-pau.fr/lompre

42
Utilisabilité

• norme ISO 9241-11 (1998) 
• lutilisabilité  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 dutilisation spécifié .

43
Utilisabilité (ISO-9241)
44
Qui construit des interfaces ?

• Une équipe
• Pourquoi ?
• Idéalement
• Graphistes
• Spécialistes de linteraction
• Ergonomes
• Marketing
• Rédacteurs techniques
• Ingénieurs spécialisés dans les tests
• Développeurs Informatiques
• Utilisateurs

45
Les clés du succès

• Cycle de conception
• Conception centrée usager
• Lanalyse des tâches et les analyses en contexte
  de travail usuel
• Le prototypage rapide
• Lévaluation constante
• Conception itérative
• La qualité de la programmation

46
Cycle de conception
Conception
Analyse
Participation des utilisateurs
Ergonomie
Évaluation
Développement
Études utilsateurs
Prototypage
47
Conception centrée usager

• Connais tes usagers !
• Classes dutilisateurs
• Créer des personnages
• Leurs compétences
• Visuelles, tactiles, manipulatrices
• Métiers
• Connaissances du domaine
• Leur contexte
• Maintenir des usagers dans léquipe de conception
  tout au long du projet

48
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 dutilisation réelle
• Tester les idées nouvelles avant de développer un
  logiciel

49
Évaluation

• Tester avec des usagers réels
• Construire des modèles
• Pour 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

50
Conception itérative
51
Étapes de la conception

• Planifier le processus de conception
• Étudier les différentes catégories dutilisateurs
  et le contexte dutilisation
• Identifier les buts et les tâches des
  utilisateurs ainsi que les exigences
  dorganisation
• Produire des solutions de conception et les
  matérialiser
• Evaluer les solutions et itérer le processus pour
  les affiner

52
Programmation

• Des méthodes
• Cf. cours de Génie Logiciel, programmation
  avancée
• Des outils
• Boîte à outils
• Générateurs dinterface
• Modèles à évènements
• Modèles dentrée-sortie
• etc.
• (non étudiés dans ce cours qui se focalise sur le
  versant humain)

53
En résumé formation en IHM

• Regardez e t 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
• Design Patterns
• Lire Calvary 9 pour une introduction à lIHM

54
Références (1/2)

• 9 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
• 12 Christian BASTIEN, Dominique SCAPIN,
  Évaluation des systèmes dinformation 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
• 4Jean CAELEN, Communication Homme-Machine
  sciences pour lingénieur, Revue dInteraction
  Homme Machine, volume 1- N1/1998, p. 1-10.
• 7 John M. Caroll (ed), Human Computer
  Interaction in the new Millennium, Addison
  Wesley, 2001

55
Références (2/2)

• 3Jocelyne 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)
• 10 Donald Norman, S. W. DRAPER, User-Centred
  Design, Hillsdale, NJ  Erlbaum, 1986
• 5 Jenny PREECE et al, Human Computer
  Interaction, Addison Wesley, 1994
• 1 Jef RASKIN, The Human Interface, New
  Direction for designing Interactive Systems,
  Addison Wesley 2000
• 11 Ben SHNEIDERMAN, Designing the User
  Interface, Addison Wesley, 2004 (nouvelle
  édition)
• 8 Guide to usability, Open University , 144 p.,
  1993

56
Sites

• 2 Coutaz http//iihm.imag.fr/coutaz.book/couta
  z.properties.html
• 4 Landay http//guir.berkeley.edu/courses/cs16
  0/2002_spring/lectures.htm
• Cannyhttp//www.cs.berkeley.edu/jfc/cs160/F04/
• Bastienhttp//www.lergonome.org
• Lompré http//www.univ-pau.fr/lompre

57
Take home message

• Linterface est (presque) la seule chose que
  lusager connaît du logiciel que vous avez
  construit