Vous êtes sur la page 1sur 48

IHM

Cours 1 1-Prsentation du module 2-Interaction Humains-Machines


. Delozanne, M1-IPCC, Paris 5, 2005-06 Elisabeth.Delozanne@math-info.univ-paris5.fr http://www.math-info.univ-paris5.fr/~delozanne/
1

IHM
TD1-Prsentation du module :

Enjeux
Objectifs de la formation Droulement, cours, mini- projet Cours 1 : IHM ?

Cours 1 : Interaction Humains-Machines


Dfinition volution Concepts fondamentaux Interaction graphique

Conception centre-utilisateur
Utilit et Utilisabilit Les cls du succs Rfrences
3

volution de linformatique
Satisfaire les besoins des utilisateurs
Difficile : les humains et leurs activits 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 dveloppement dun logiciel point de vue social et commercial Une mauvaise interface cote De largent + 5 % de satisfaction => + 85 % de hausse (Landay) Des vies 4 Accident du mont Saint-Odile

IHM
un domaine de linformatique qui sintresse la conception lvaluation 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 mthodes des techniques des outils
5

Enjeux actuels
Dveloppement dInternet
Particuliers En 2002 en France : 38 % des foyers possdent au moins 1 PC 3/4 sont connects Internet (7,4 millions, 29 % des foyers) En 2008 50 % des foyers seront connects Internet Entreprises Mthodes et techniques dvaluation et de conception des sites web Le Web a fait de lHypertexte un standard dIHM Principes gnraux de fonctionnement Langages balises (HTML, XML) Langages de scripts (Javascript, PHP)

Les sites web : des logiciels interactifs spcifiques

Lenvironnement technologique du web

Orientation du module IHM


Sujet :
Formation aux mthodes et techniques dvaluation et de conception des logiciels interactifs Application au cas particulier des sites web Humain : Les utilisateurs finaux, les autres membres de lorganisation Leurs tches, leurs besoins, leurs difficults Machines Des (matriels et) logiciels Avec des contraintes techniques et matrielles Interaction : Boucle Les utilisateurs expriment ce quils veulent faire Le logiciel interprte, excute et communique des rsultats

3 grandes catgories dobjets dtude :

Focalisation :

H de IHM et Applications Internet

Organisation du module
"L'IHM ne s'enseigne pas elle s'apprend"
Nous (enseignants) vous fournissons des ressources, des indications, vous faisons partager notre exprience mais Vous construisez votre formation de pratiques : un mini-projet + expriences dutilisation de logiciel+ tudes de cas d interrogations thoriques : cours lectures personnelles : Avant le cours, Synthse, Pour approfondir IHM : analyse de besoins, conception et valuation des interactions GL : outils de conception informatique Programmation et BD : mise en uvre informatique 8

En M1, apprentissage par confrontation

Dvelopper un logiciel :

Lectures
Deux manuels de rfrence
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 E. Brangier, J. Barcenilla, Concevoir un produit facile utiliser : Adapter les technologies lhomme, Editions dorganisation, 2003 Van Duyne D. K., Landay J., Hong J., The design of sites : Patterns, Principles and process for crafting a Customer Centered Web experience, AddisonWesley, 2003

Une excellente introduction lergonomie du logiciel

Des mthodes, des conseils et des exemples


Une synthse sur ltat de lart en IHM

Des textes tlcharger pour prparer chaque cours


Rdaction dune fiche de lecture et dbat

Christophe KOLSKI, ouvrage collectif , Interaction homme-machine pour les systmes d'information Vol. 1 & 2, Herms, 2001

Calendrier
22/9 29/9 13/10 20/10 3/11 24/3 31/3 6/4 8/12 15/12 C1 : IHM ? C2 : Connatre les utilisateurs C3 : Evaluation (1) C4 : Conception centre utilisateur C5 : Evaluation (2) C6 : Conception de sites web C7 : Interaction graphique C8 : Interfaces du futur C9 : Interrogation de cours C10 : Evaluation des projets
10

volution de l'informatique
1970 :
March en expansion, produire plus, traitement de masse, machine centralise, informatisation des postes d'employs Automatisation des tches manuelles, Informatique des gros systmes Crise, concurrence accrue, informatisation des postes de travail administratifs puis des postes de travail des cadres et dcideurs, ordinateurs personnels, consommateurs exigeants, Informatique outil (bureautique, gestion), Informatique de dcision, de conception, recherche dinformation Internationalisation des marchs et des entreprises, Web, informatique de coopration, de communication Informatique de communication Informatique nomade, vestimentaire, dissmine, invisible, pervasive, ubiquitaire (UbiComp) 11

1980 :

1990 :

2000 :

Consquence
Importance croissante

de la prise en compte des utilisateurs

et donc de l interface et de l interaction

12

IHM ?
1970 : Interface Homme/Machine 1980 : Interaction Homme/Machine
Apparition des interfaces graphiques Informatique personnelle Informatique outil

1990 : Interactions Humains-Machines 2000 : I. des Humains avec des Mondes


TIC : informatique de communication Informatique dissmine, vestimentaire, invisible, ralit virtuelle, ralit augmente, ralit mixte, interfaces tangibles
13

IHM

Interface homme machine


Dispositif matriel et logiciel li une application

Interaction homme machine


Relations entre lhumain et la machine par linterface

14

Interface Utilisateur (User Interfaces)

J. Nanard [3], J. Landay [4]


pour l'usager, c'est le lieu o s'opre la communication avec le systme 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 frontire

15

Reproches aux informaticiens


Les concepteurs informaticiens
se centrent uniquement sur le fonctionnement du systme traitent linterface en dernier pensent que tous les utilisateurs leur ressemblent ne sont pas forms lanalyse de besoins, travailler avec des utilisateurs ne comprennent pas que les besoins voluent au cours de conception
16

Avertissement aux informaticiens


Linterface est la seule chose que lusager connat du systme que vous concevez

Concevoir linteraction des usagers avec le systme


N est pas une opration cosmtique charge de mettre en final lapplication au got du jour C est une tape centrale dans le processus de conception dun logiciel

17

Interactions Humains/machines
la conception, l'valuation et l'implmentation des systmes informatiques interactifs et l'tude des principaux phnomnes qui les entourent. (Hewett, 92) la conception de systmes informatiques qui permettent aux utilisateurs de mener leurs activits de faon productive et sre. (Preece et al, 94) [6] concerne la comprhension et la cration de logiciels et dautres dispositifs technologiques que les gens vont avoir envie dutiliser et mme 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]
18

Performance du couple Homme /Machine


[8]

19

Utilisateur, usager, acteur, stakeholder


Utilisateur :

Usager :

utilise une application et doit sen contenter 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 est engag dans une activit dont il est responsable vis-vis dune organisation sociale le logiciel est un partenaire pour lpauler dans cette activit Utilisateur primaire, secondaire, priphrique
20

Acteur :

Stakeholdeur : partie prenantes

IHM ? Point de vue ergonomique


Tche, activit Conception Technologie Humains

Organisation et environnement social


Chacun des facteurs influence les autres
21

Pourquoi tudier lIHM ?


1. conomiques 2. Sociales
50 90 % des cots de dveloppement pour les dapplications interactives des gens qui sont diffrents de vous utiliseront vos logiciels des interfaces mal conues cotent cher Les interfaces utilisateurs sont difficiles mettre au point Les gens sont imprvisibles Existence de techniques, mthodes et dmarches rigoureuses Vous aurez travailler pour des entreprises qui font des logiciels pour des utilisateurs, pas seulement pour des machines 22

3. Scientifiques et techniques

4. Professionnelles

Interfaces graphiques : historique (1/2)


1945 :
Memex, systme hypertexte tudes sur les partitions d'cran, multifentrage (univ. de Standford )

annes 1960 : annes 70 :

dbut des annes 80 : Les ides sont l. Pas la technologie

avec en particulier les recherches autour de Smalltalk (Xerox Parc)

apparition du Star (terminal bureautique de Xerox) et du Lisa (micro bureautique d'Apple). apparition des microprocesseurs 32 bits 23 look and feel ou WIMP (Windows, Icons, Menus, Pointer)

1945 : Memex
une machine virtuelle , Vannevar Bush

24

Interfaces graphiques : historique (2/2)


1984 :
lancement du Macintosh (68000) : succs fond sur la qualit de l'interface et la convivialit

5 ans aprs,
PC et compatibles Windows et Presentation Manager CUA (Common User Access) dans le monde UNIX sur stations de travail : XWindow, Motif, Open Look, NextStep

1990 :
World Wide Web (CERN) : modle Hypertexte en rseau Interfaces graphiques mais aussi multimodales, tangibles etc. (par exemple : Calvary 2002) [9])

25

volution de la notion d'interface


largissement des problmatiques parallle l'volution technique conviviale , utilisable , facile comprendre et utiliser lment structurant les systmes d informations cran de texte et clavier interface dispositif matriel, change d'information, codage/dcodage interfaces graphiques utilisateur, tche, facteurs humains, langage multimdia, capteurs, reconnaissance vocale, usager, activit, acteurs humains, communication papier lectronique, tableau ou bureau interactif, mdiaspace travail coopratif, machines comme lment d'un espace interactif informatique vestimentaire, ralit augmente/ virtuelle, 26 ordinateur vanescent, interface tangible/ sans couture

Concepts de base des interfaces graphiques


WIMPS : Windows, Icons, Menus, Pointers WYSIWIG (What You See Is What You Get) : Manipulation directe

contrle l'utilisateur

Mtaphore :

souris, visualisation immdiate du rsultat de la manipulation apprentissage rapide, efficace aussi pour les experts limite les efforts de mmorisation permet l'exprimentation (vrification immdiate, rversibilit)

rle est de transfrer sur un nouveau contexte une perception existante (ou suppose) chez l'utilisateur, et ce tant au niveau des objets que des oprations ou des rgles de manipulation La mtaphore du bureau autre : tableau de bord, navigation, feuille de calcul
27

Prise en compte de lutilisateur


Approche technocentrique
centre sur la machine et ses possibilits lutilisateur doit sadapter la machine

Approche anthropocentrique

Approche instrumentale

centre sur lhomme et ses besoins la machine doit sadapter lutilisateur


Co-adaptation des machines et des humains
28

En tant que concepteur


Retenez que
Ce nest pas lutilisateur de sadapter vos ides, certes gniales

Mais
cest au concepteur de sadapter lactivit de lutilisateur

Pour cela il y a
Des sciences (humaines) : ergonomie (des logiciels), psychologie, sociologie Des mthodes : conception centre utilisateur Des techniques : entretiens, incidents critiques etc.

29

Conception centre utilisateurs


Terme invent par D. Norman en 1986 [10]
Norme ISO 13407 : 5 principes
analyse des besoins des utilisateurs, de leurs tches et de leur contexte de travail. participation active de ces utilisateurs la conception. rpartition approprie des fonctions entre les utilisateurs et la technologie. dmarche itrative de conception. intervention d'une quipe de conception multi-disciplinaire.

30

Conception centre utilisateurs


logique de fonctionnement/ dutilisation
Logique dutilisation : modle conceptuel de linterface Logique de fonctionnement : architecture logicielle de linterface Variabilit, spcificit, diffrences

prendre en compte les besoins des utilisateurs

il ne suffit pas de demander aux utilisateurs ce quils veulent :


ergonomie des IHM

Mthodes, techniques, exprience pour mener lanalyse des besoins

2 concepts cls : utilit et utilisabilit


31

Utilit et utilisabilit
Utilit
permet lutilisateur d'atteindre ses buts de haut niveau Fonctionnalits, conformit au cahier des charges

Utilisabilit A Guide to usability [8]


la possibilit datteindre ses buts, le confort d'utilisation rgles de dialogue, de navigation sant, scurit, efficacit, plaisir

Schneiderman [11] : l'utilisabilit se mesure principalement


temps d'apprentissage, vitesse d'excution des tches, taux d'erreurs, facilit de rtention dans le temps, satisfaction subjective
32

Critres dutilisabilit
Coutaz [2]
Utilisabilit = Souplesse + Robustesse

Bastien [12]
Utilisabilit/utilit : qualit ergonomique de l'interface Norme AFNOR Z67-133-1 Comptabilit, Homognit, Guidage, Souplesse, Contrle explicite, Gestion des erreurs, Concision

Voir aussi :

http://www.lergonome.org Cours dergonomie en ligne http://www.univ-pau.fr/~lompre


33

Utilisabilit
norme ISO 9241-11 (1998) :
lutilisabilit est le degr selon lequel un produit peuttre utilis par des utilisateurs identifis, pour atteindre des buts dfinis avec efficacit, efficience et satisfaction dans un contexte dutilisation spcifi .

34

Qui construit des interfaces ?


Une quipe
Pourquoi ?

Idalement
Graphistes Spcialistes de linteraction Ergonomes Marketing Rdacteurs techniques Ingnieurs spcialiss dans les tests Dveloppeurs Informatiques Utilisateurs
35

Les cls du succs


Cycle de conception Conception centre usager Lanalyse des tches et les analyses en contexte de travail usuel Le prototypage rapide Lvaluation constante Conception itrative La qualit de la programmation
36

Cycle de conception

Analyse
Ergonomie

Conception
Participation des utilisateurs

valuation
tudes utilsateurs

Dveloppement
Prototypage

37

Conception centre usager


Connais tes usagers ! Classes dutilisateurs Leurs comptences
Crer des personnages Visuelles, tactiles, manipulatrices Mtiers Connaissances du domaine

Leur contexte Maintenir des usagers dans lquipe de conception tout au long du projet
38

Comment ?
Analyse de tches, analyses en contexte
Observer les pratiques usuelles de travail Routinires Exceptionnelles Situations de stress Crer des scnarios dutilisation relle Tester les ides nouvelles avant de dvelopper un logiciel

39

valuation
Tester avec des usagers rels Construire des modles Pour les modles et les maquettes, utiliser des techniques dvaluation lgres
valuation par des experts Inspections Tests informels

Pour les prototypes avancs, utiliser des techniques dvaluation plus lourdes et rigoureuses
Exprimentations contrles Exprimentations en contexte
40

Conception itrative

41

tapes de la conception
Planifier le processus de conception tudier les diffrentes catgories dutilisateurs et le contexte dutilisation Identifier les buts et les tches des utilisateurs ainsi que les exigences dorganisation Produire des solutions de conception et les matrialiser Evaluer les solutions et itrer le processus pour les affiner
42

Programmation
Des mthodes :
Cf. cours de Gnie Logiciel, programmation avance

Des outils :
Bote outils Gnrateurs dinterface Modles vnements Modles dentre-sortie etc. (non tudis dans ce cours qui se focalise sur le versant humain)

43

En rsum : formation en IHM


Regardez e t critiquez un maximum de sites et de logiciels Notez les bonnes ides, les problmes rencontrs et les cueils viter, les scnarios 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 lIHM44

Rfrences (1/2)
[9] Galle CALVARY Ingnierie de l'interaction hommeSciences et Techniques de l'Information, C. Paganelli Ed., Herms 2002, 19-63 http://iihm.imag.fr/publs/2002/TSTI.calvary.pdf [12 ] Christian BASTIEN, Dominique SCAPIN, valuation des systmes dinformation et critres ergonomiques, in Christophe KOLSKI (Ed.), Environnements volus et valuation de l'IHM, Interaction homme-machine pour les systmes d'information Vol 2, Herms, 2001, 53-113 [4]Jean CAELEN, Communication Homme-Machine & sciences pour lingnieur, 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
45

machine : rtrospective et perspectives, Interaction homme-machine et recherche d'information, Trait des

Rfrences (2/2)
[3]Jocelyne NANARD, La manipulation directe en Interface Homme-Machine, Thse dtat, Universit des Sciences et Techniques du Languedoc, Montpellier, Dcembre 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
46

Sites
[2] Coutaz : http://iihm.imag.fr/coutaz.book/coutaz.properties.h tml [4] Landay : http://guir.berkeley.edu/courses/cs160/2002_sprin g/lectures.htm Canny http://www.cs.berkeley.edu/~jfc/cs160/F04/ Bastien http://www.lergonome.org Lompr : http://www.univ-pau.fr/~lompre
47

Take home message

Linterface est (presque) la seule chose que lusager connat du logiciel que vous avez construit

48

Vous aimerez peut-être aussi