IHM

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

• 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
• Particuliers
• En 2002 en France
• 38 des foyers possèdent au moins 1 PC
• 3/4 sont connectés à Internet (7,4 millions, 29
  des foyers)
• En 2008
• 50 des foyers seront connectés à Internet
• Entreprises
• 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
• Informatique nomade

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

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 cahier des charges, un dossier de conception,
  un rapport d'évaluation d'un logiciel interactif
• 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
• 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 dans la vie professionnelle
• Satisfaire les utilisateurs
• Les comprendre et les impliquer
• Communiquer
• Ê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)
• Alan Dix, Janet Finlay, Human-Computer
  Interaction, Gregory Abowd Russell Beale.
  London, UK Prentice Hall Europe, 2004
• 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

15
Calendrier (1)
16
Calendrier (2)
17
Évaluation du module ?

• Pas définitivement arrêtée
• Panachage note de projet et note de travail
  personnel et examen final

18
É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, avoir des idées,
  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)

19
Conséquence

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

20
IHM ?

• Interface Homme/Machine
• Apparition des interfaces graphiques
• Informatique personnelle
• Interaction Homme/Machine
• Informatique outil
• Interactions Humains-Machines
• TIC informatique de communication
• Interaction des Humains avec des Mondes
• Informatique disséminée, vestimentaire,
  invisible, réalité virtuelle, réalité augmentée,
  réalité mixte, interfaces tangibles

21
IHM

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

22
Interface ? Définitions

• Petit Robert
• Jonction entre deux éléments d'un système
  d'informatique
• Hachette
• dispositif matériel et logiciel grâce auquel
  s'effectuent les échanges d'informations entre
  deux systèmes
• J. Coutaz 2
• dispositif qui sert de limite commune à
  plusieurs entités communicantes, chacune
  s'exprimant dans un langage spécifique.

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
Interface homme - machine

• Dispositif technique

homme
machine
25
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

26
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

27
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

28
Performance du couple  Homme /Machine

• 8

29
IHM ? Point de vue cognitiviste
Capacités de perception, daction, cognition
Capacités de stockage, de traitement,
dentrées/sorties
humain
machine
Environnement (physique, organisationnel, social)
30
Utilisateur/ usager /acteur

• 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é

31
IHM ? Point de vue ergonomique

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

32
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

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

34
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
• (par exemple Calvary 2002) 9)

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

36
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

37
Styles dinteraction

• Conversationnel
• Langage de commande, Dialogue imposé par le
  système
• Menu et formulaire
• Guidage du système, Dialogue imposé par le
  système
• Navigation
• Nuds, ancres, liens, Difficulté de repérage
• Manipulation directe
• Actions physiques sur des représentations
  dobjets informatiques
• Inspire toutes les interfaces graphiques
  actuelles
• Métaphore du monde réel
• Édition de documents
• WYSIWYG
• dialogue contrôlé par lutilisateur

38
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

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

40
Conception de systèmes interactifs

• Importance de lhumain
• Utilisation de résultats ou de techniques des
  sciences humaines
• Manque de formation des informaticiens
• Aspect chaotique de la conception
• Petits changements, grands effets
• Nécessité dune approche itérative
• cycle de vie en spirale
• approche empirique (test/corrections)
• mais démarche rigoureuse

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

42
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é

43
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

44
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
• Des études
• http//www.lergonome.org
• Cours dergonomie en ligne
• http//www.univ-pau.fr/lompre

45
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

46
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

47
Cycle de conception
Conception
Analyse
Participation des utilisateurs
Ergonomie
Évaluation
Développement
Études utilsateurs
Prototypage
48
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

49
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

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

51
Conception itérative
Analyse
Conception
Développement
Évaluation
52
Conception itérative/descendante

• La conception dIHM est un processus itératif
• Pourquoi ?
• Difficile de prédire lutilisation dun produit
• Les utilisateurs ont des attentes différentes,
  des réactions différentes, des modèles
  conceptuels différents
• La modélisation est très difficile
• Les utilisateurs peuvent être très utiles
• Les bonnes idées surgissent rarement du premier
  coup

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

54
Programmation

• Des méthodes
• Cf. cours de Génie Logiciel
• Des outils
• Boîte à outils
• Générateurs dinterface
• Modèles à évènements
• Modèles dentrée-sortie
• etc.
• (peu étudiés dans ce cours pourquoi ?)

55
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

56
Références (1/3)

• 1 Jef RASKIN, The Human Interface, New
  Direction for designing Interactive Systems,
  Addison Wesley 2000
• 2 Coutaz http//iihm.imag.fr/coutaz.book/couta
  z.properties.html3Jocelyne 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)
• 4 Landay http//guir.berkeley.edu/courses/cs16
  0/2002_spring/lectures.htm
• 5 Jean CAELEN, Communication Homme-Machine
  sciences pour lingénieur, Revue dInteraction
  Homme Machine, volume 1- N1/1998, p. 1-10.
• 6 Jenny PREECE et al, Human Computer
  Interaction, Addison Wesley, 1994

57
Références (2/3)

• 7 John M. Caroll (ed), Human Computer
  Interaction in the new Millennium, Addison
  Wesley, 8 Guide to usability, Open University ,
  144 p., 1993
• 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 2001http//iihm.imag.fr/publs/2002/TSTI.cal
  vary.pdf
• 10 Donald Norman, S. W. DRAPER, User-Centred
  Design, Hillsdale, NJ  Erlbaum, 1986
• 11 Ben SHNEIDERMAN, Designing the User
  Interface, Addison Wesley, 2004 (nouvelle
  édition)

58
Références (3/3)

• 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
• Cannyhttp//www.cs.berkeley.edu/jfc/cs160/F04/
• Bastienhttp//www.lergonome.org
• Lompré http//www.univ-pau.fr/lompre

59
Take home message

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