Ihm 01

Universit de Franche-Comt UFR STGI de Belfort-Montbliard
Licence 3 PSM
Interface Homme-Machine
Prof. Ioan ROXIN
Montbliard, 2006
_________________________________________________________________________________________
Licence 3 PSM, Ergonomie dInterface Homme-Machine, I. Roxin - 2006, page 1
INTERFACE HOMME-MACHINE
IHM ? Dfinitions Evolution historique Interface graphique Interface multimodale Les qualits des interfaces utilisateur Modlisation de l'interface utilisateur Modle dinterface deux niveaux L'homme perceptuel L'homme cognitif Conception d'interface homme-machine Ergonomie d'interface homme-machine Psychologie cognitive Hmisphre gauche et droit Rgles ergonomiques Ingnierie des interfaces utilisateurs Critres d'valuation
_________________________________________________________________________________________
IHM ? Dfinitions
Interaction Homme-Machine : problmatique dusage comment les humains utilisent les
systmes informatiques afin de concevoir des systmes qui satisfassent au mieux les besoins des utilisateurs ; Computer Human Interaction CHI Man-Machine Interaction MMI
Interface Homme-Machine : plutt le dispositif li une application ;

Human Computer Interface HCI (l'interface = adaptateur d'impdance entre l'homme et la machine)
Communication Homme-Machine : problmatique dusage + pb. techniques

Conception globale de lutilisation (pas simplement interface mais tout le processus dinformation) ; Aspects techniques (multimodales, )
Dialogue Homme-Machine : insiste sur la dimension langagire de la communication

Dans le couple Homme-Machine l'important c'est l'HommeOn ne dfinit pas l'usager par le fait qu'il utilise ce programme (qui serait alors l'lment de rfrence) mais par le fait qu'un homme a un problme rsoudre, et donc qu'il a besoin d'un logiciel adapt cette situation." (Jocelyne Nanard, 1990) IHM : Objectifs thiques : conception de systmes informatiques qui prennent en compte l'homme (Apple : "La machine qui on a appris l'Homme") conomiques : augmenter les performances du couple ordinateur-utilisateur intellectuels et scientifiques : comprendre comment un utilisateur interagit avec un systme informatique dans un contexte particulier (ergonomie et psychologie cognitive) ; applicatifs : concevoir et raliser des systmes qui sont utiliss et utiles. Bonne IHM facilit d'apprentissage ; facilit, efficacit et scurit d'utilisation ; plaisir d'utilisation ; acceptabilit du logiciel ; satisfaction des utilisateurs ; productivit satisfaisante du couple personne-machine ; rentabilit pour l'entreprise. Mauvaise IHM niveau individuel : confusion, frustration, panique, stress, ennui ; niveau entreprise/social: rejet, erreurs graves (systmes temps rel, centrale nuclaire) ; mauvaise ou sous-utilisation, baisse des performances ; rgression vers tche d'excution (secrtariat,) ;
cots (rcriture du systme, dtournement).
_________________________________________________________________________________________
Evolution historique
1. Interface monodirectionnelle et asynchrone
Traitement Entre Sortie
traitement par lots (batch processing) ; interface limite aux cartes de donnes et de contrle (JCL - Job Controle
Language) ; communication homme-homme (utilisateur - oprateur) ; communication homme-machine asynchrone (listing).
2. Interface textuelle (Keyboard User Interface - KUI)

Traitement
traitement interactif en temps partag ; langage de commande - communication textuelle, bidirectionnelle et synchrone ; moyen d'entre - le clavier (KUI) ; moyen de sortie - l'cran alphanumrique ; une interface claire, puissante et guidant l'utilisateur (s'il le souhaite).
La conception d'interfaces homme-machine est devenue une partie du travail de tout concepteur d'un programme informatique.
3. Interface graphique (Graphical User Interface - GUI)

l'volution de priphriques ; le dveloppement de diffrents domaines d'applications :

CAO (Conception Assiste par Ordinateur) par le ct graphique ; les SE par les langages de commande textuels ; la bureautique.
3.1. Les concepts gnraux des interfaces graphiques

_________________________________________________________________________________________
Les mtaphores : transfrent une comprhension ou une perception suppose existante chez les utilisateurs dans un nouveau contexte
(dchargent l'utilisateur de la phase d'apprentissage). Ex. mtaphore de bureau ; mtaphore du formulaire papier, du tableau de bord ; mtaphore "ROOM" dans les collecticiels...
Les icnes : reprsentations idographiques des objets sur l'cran, gnralement via une mtaphore. Permettent : de dduire navement les fonctions et
attributs des objets ; de limiter la mmorisation ; d'augmenter la densit d'informations sur l'cran tout en conservant la lisibilit ; de grer gestuellement les donnes par manipulation directe. Ex. : une feuille de papier pour un document ; une main crivant pour un traitement de texte...
La manipulation directe : l'utilisateur cre, modifie, manipule des objets l'cran avec l'impression d'tre sans autre intermdiaire que ce qu'il voit l'cran.

prsentation continue d'objets traits ; actions physiques ou actions sur les boutons au lieu de noms de commandes et d'une syntaxe complexe ; oprations incrmentales et rversibles dont l'effet est immdiatement visible sur les objets traits.
Ex. diteur pleine page (vs. diteur ligne) ; tableur ; diteur graphique ; jeux vido...
Le WYSIWYG (What You See Is What You Get, alias "ce que vous voyez est ce que vous
obtenez) : complment logique de la manipulation directe lorsque le rsultat de l'action peut tre montr l'cran tel qu'il apparatra dans le monde rel. Ex. : la tabulation et la mise en page
dans un traitement de texte.
Les fentres : surfaces d'affichage protges sur l'cran. La fentre est le lieu de
communication entre l'utilisateur et le processus qui est l'origine de la cration de la fentre. L'assemblage gomtrique des surfaces qui constituent une fentre est assur par le systme de fentrage.
Les menus droulants : un systme de menus deux nivaux permettant l'utilisateur de disposer l'cran (ou dans une fentre), en clair, de toutes les oprations qui sont disponibles.

barre de menus (menu de premier niveau) ; menus droulants de deuxime niveau ;

les oprations non accessibles dans le contexte apparaissent estompes ; les raccourcis sont indiqus dans les menus pour les oprations les plus frquentes.
menu surgissant (contextuel) - apparat cot de l'objet avec les oprations applicables
_________________________________________________________________________________________
3.2. L'HISTOIRE DES INTERFACES GRAPHIQUES

GUI (Graphical User Interface) ou "look and feel" ou WIMP (Windows, Icons, Menus, Pointer) Universit de Stanford (les annes 60) - des tudes sur :
les partitions d'cran (systme de fentrage) ; l'utilisation de la souris (Douglas Engelbart).
PARC (Palo Alto Research Center) Xerox :

un langage orient objets - Smalltalk (les annes 70) ; un terminal bureautique, le Star (au dbut des annes 80). 1983, le micro-ordinateur bureautique Lisa ; 1984, Macintosh (processeur 32 bits, Motorola 68000) une bote outils (Toolbox) ; un bureau (Finder).
Apple -
1985-1986 - dans le monde PC ont t lances trois botes outils:
TopView d'IBM, mort-n ; GEM de Digital Research (copie limite de la Toolbox du Mac) ; MS-Windows (dmarr en novembre 1983) IBM 1986 - la version texte de l'interface commune d'accs (CUA -Common User Access), pour les terminaux type 3270 (Dialog Manager) ; 1988 - Presetation Manager sous OS/2 : multitche et ouverte sur les rseaux
(architecture de style client-serveur) ;
1989 - la version graphique de CUA. Microsoft 22 mai 1990 - l'inauguration de Windows 3.0 : une bote outils au standard CUA ; les limitations du DOS surmontes (monotche, espace
mmoire, communication).
1993 Windows NT systme d'exploitation multitche, multi-processeur, multithread, multiuser 1995 - Windows 95, 1998 Windows 98
Windows 2000, Windows XP (2001)
_________________________________________________________________________________________
4. Interface multimodale
l'utilisation de modalits de communication naturelles l'homme : geste, parole, son, vision ; l'extension des facults sensori-motrices des ordinateurs : cration de nouveaux dispositifs physiques d'interaction dans la communication homme-machine (gants numriques, casque de vision, systmes de reconnaissance et de synthse vocale...) ; dfinition de systmes de reprsentation symbolique des informations changes au moyen de ces dispositifs.
Evnement monomodal : un vnement issu (entre) ou destination (sortie) d'un seul

mdia.
Evnement multimodal : un ensemble d'vnements monomodaux issus ou

destination de mdias distincts, produits dans des voisinages temporels proches, et smantiquement lis.
Modalit1 : un processus d'analyse ou de synthse (processus de reconnaissance de

geste avec un gant numrique ; processus de synthse de son...).
Utilisation des modes pour l'interprtation et/ou la gnration
Combin
Altern
Synergique
Indpendant
Exclusif Squentiel
Concurrent Parallle
Usage des modalits
Les dnominations du multimodal (Coutaz, 1992)
Types de coopration entre modalits : par quivalence - avoir le choix entre plusieurs modalits pour transmettre un nonc ; par redondance - transmettre un mme nonc sur plusieurs modalits ; par complmentarit - faire transmettre diffrents messages d'un mme nonc sur plusieurs modalit en associant chaque modalit un type de message particulier ; par spcialisation - toujours choisir la mme modalit pour un type d'nonc particulier et ne pas l'utiliser pour d'autres types d'nonc. _________________________________________________________________________________________
La multimodalit peut servir :

faciliter l'interprtation des noncs ; amliorer les rsultats obtenus par les modalits ; amliorer le confort de la communication ; adapter l'interface diffrentes applications, un environnement changeant (bruit, urgence...), diffrents systmes ou diffrents utilisateurs (ex. handicaps).
Modalit : l'interprtation du sens du message transmis par le mdia. Mdialit : seulement le codage du message.
Un systme informatique multimdia dispose d'quipements pour l'acquisition,
l'dition, la mmorisation et la restitution d'informations multimdia. Il est le dpositaire d'informations multimdia mais ne connat pas le contenu smantique des informations.
Un systme informatique multimodal - systme capable de rpondre aux modalits

de la communication humaine. Un systme multimodal : est quip de dispositifs multimdias "turbo" ; produit des noncs multimodaux adapts ; comprend les noncs multimodaux d'entre.
Diffrences entre MULTIMEDIA et MULTIMODAL Objectifs : MMED - gestionnaire d'infos dont le sens est ignor ; MMOD - comptence d'un interlocuteur humain. Traitements : MMED transformation des donnes brutes (numrisation) ; encapsulation en units types ; organisation de l'espace de ces units types ; MMOD transformation des donnes brutes (numrisation) ; transformation en units smantiques. Aujourd'hui : information MMED : objet de la tche ; information MMOD : objet servant contrler la tche.
_________________________________________________________________________________________
LES QUALITES DES INTERFACES UTILISATEUR

Visibilit - permet l'utilisateur de voir ce qu'il peut faire avec l'interface et de voir s'effectuer son propre travail. Transparence - ce qui se passe rellement dans le systme informatique est cach pour l'utilisateur ; Intuitivit - le systme ralise ce que l'utilisateur pense naturellement ou navement qu'il va faire ; Prvisibilit - donne toujours le mme type de retour pour le mme type de commande ; Cohrence (consistance) - prvisible quel que soit le contexte ou l'application ; une action donne a toujours les mmes consquences ; Tolrance - admet des diffrences syntaxiques ou lexicales (flexibilit grammaticale) par rapport la commande correcte ; Intgrit - prserve des donnes et des rsultats acquis par l'utilisateur, en
vitant les consquences d'une action intempestive de celui-ci ;
Guidage - des aides au reprage, aide contextuelle ; Contrle - retours clairs et concis sur chaque action ; en cas d'erreur, pas de messages pjoratifs, mais toujours positifs et constructifs ; Concision - au niveau des commandes de l'utilisateur (abrviations, valeurs par dfaut, macrocommandes...) et au niveau des prsentations d'cran (ne doivent fournir que les seules informations utiles) ; Bonne prsentation des crans - les crans doivent avoir une bonne apparence, pas trop charge, claire et bien ordonne ; Adaptabilit - sans reprogrammation l'interface peut tre adapte diffrents types d'utilisateurs ou elle donne l'utilisateur final des possibilits de dfinir son propre style d'interface ; Adaptativit - l'interface s'adapte automatiquement au niveau d'exprience ou aux stratgies de l'utilisateur ; Automaticit - les tches rptitives doivent pouvoir s'automatiser ; Cohrence avec les documents manuels - les formulaires l'cran doivent tre le reflet des documents d'entre (ou vice versa).
_________________________________________________________________________________________
Modlisation de l'interface utilisateur

Une interface = l'ensemble des rgles communes de communication entre deux acteurs
Interface rgles communes de communication
acteur 1
acteur 2
Concept d'interface
Exemple : UCP - DP ; UCP1 - UCP2 ; L1 - L2
L'acteur humain :
a une facult dadaptation ; a son libre arbitre.
L'interface utilisateur a pour but de rendre compatibles deux systmes de traitement de l'information :
1. le traitement symbolique de l'information par la machine qui a sa logique de fonctionnement ; 2. le traitement humain de l'information par l'utilisateur qui a sa logique d'utilisation.
Traitement symbolique de l'information Traitement humain de l'information
IU
logique de fonctionnement
logique d'utilisation
L'interface utilisateur
Construire une bonne interface : adapter la logique du fonctionnement du systme informatique la logique d'utilisation de l'utilisateur, en tenant compte des caractristiques propres de cet utilisateur ; crer chez ce dernier une bonne logique d'utilisation par la pratique mme de l'interface.
_________________________________________________________________________________________
Modle d'interface deux niveaux

L'interface perceptuelle ou l'interface de surface - met en relation les organes d'entresortie de l'ordinateur et les organes sensori-moteurs de l'homme ; il s'agit de ce que l'utilisateur peroit du systme par ses sens et de ses moyens d'action sur le systme. L'interface conceptuelle - concerne des abstractions de l'application et du systme. Elles sont spcifies par le concepteur, en termes d'objets, dans le modle conceptuel de la tche. L'utilisateur s'en fait une reprsentation mentale qui, partir de ses objectifs, lui permettra de dduire les actions effectuer sur l'interface perceptuelle et d'valuer les rponses du systme.
Concepteur Interface conceptuelle

Conoit un modle conceptuel en fonction de l'utilisateur Invisible Domaine du signifi
Utilisateur
Cre son propre modle mental du systme
Systme d'interface utilisateur
Interface perceptuelle
Image du systme Domaine du signifiant
Mmoire de travail (action-perception)
Interface physique
Organes d'entres-sorties Organes sensori-moteurs
Modle lmentaire d'interface utilisateur

L'interface perceptuelle est le domaine du signifiant, l'interface conceptuelle celui de l'abstraction, du signifi. La premire apparat comme "l'image" de la seconde.
_________________________________________________________________________________________
L'homme perceptuel
Le modle du "processeur humain" (Card, S.K., Moran, T.P., and Newell, A. The Psychology of HumanComputer Interaction. Lawrence Erlbaum Associates, Hillsdale, N,J., 1983)
trois processeurs :
un processeur perceptuel (auditif/visuel)(cycle de 50-200 ms) ; un processeur cognitif (25-170 ms) ; un processeur moteur (30-100ms) ; mmoire de travail mmoire sensorielle (visuelle et auditive) mmoire court terme mmoire long terme. mmoire smantique et pisodique mmoire dclarative et procdurale
une hirarchie de mmoire :
_________________________________________________________________________________________
D'aprs Miller ("The magic number seven : some limits in our capacity for processing information", Psychological review, 63, pp. 81-97, 1956) notre mmoire court terme a les caractristiques suivantes (http://www.well.com/user/smalin/miller.html ): mmorise 7 items2 (mnmes ou motif symbolique), de 5 9 selon les individus et ,
suivant leur tat de fatigue ou de stress, ou suivant la difficult du problme ; stocke les mnmes sous forme de motifs acoustiques ou visuels ; elle regroupe les motifs visuels tels que lettres, chiffres, mots, formes gomtriques selon leur taille, leur couleur, leur localisation ; la recherche est squentielle et exhaustive ; elle oublie au bout de 15 30 secondes.
L'homme cognitif
Notre mental cre des modles de son environnement et se comporte selon ces modles. Une bonne interface utilisateur doit permettre l'utilisateur de se crer un modle mental correct, proche du modle du concepteur.
Modle conceptuel du concepteur
Distance
Modle mental de l'utilisateur
monde conceptuel Conception

(avec une certaine ide de l'utilisateur)
monde perceptuel
Dialectique
cration du modle utilisation du modle
"Image" Prsentation et comportement de l'interface
Modles et image
7 jours dans la semaine ; 7 merveilles du monde ; 7 arts ; 7 pchs : avarice ; envie; 7 samoura (Akira Kurosawa) ; 7-Up (1920, Mr. C.L. Griggs of Missouri - Lithiate Lemon-Lime Soda) v. http://acorn.educ.nottingham.ac.uk/ShellCent/Number/Num7.html
_________________________________________________________________________________________
Rgles ergonomiques
De rgles ergonomiques pour le concepteur d'interface :
limiter, dans le menus, le nombre de choix lorsqu'il ncessitent une analyse de
tous les items, 7

"disques rpts")
(pour ne dpasser la capacit globale de la mmoire court et viter les appels
utiliser les formats, la couleur, les emplacements, pour tablir des liens entre les
lments ; gnrer des "retours" du systme, immdiats et vidents, chaque action de l'utilisateur, et proposer des "fermetures" pour chaque sous-tche, au moins toutes les 20 secondes ; informer pour rassurer et pour rduire la tache cognitive ; viter de surcharger l'cran en rendant visible ce qui est utile et seulement qui est utile ; viter la mmorisation entre crans successifs en utilisant les fentres pour rappeler les crans prcdents ; privilgier la manipulation directe les lments sont affichs sous forme symbolique et lutilisateur agit directement sur eux ; laisser lutilisateur matre de linitiative du dialogue : la machine propose, lutilisateur dispose ; largir les possibilits dapprentissage de lutilisateur (modle conceptuel, aide en ligne) ; assurer la cohrence : repose sur le caractre unitaire des constituants de linterface, labsence dexception ; lment fdrateur la mtaphore : emploie dun terme concret pour exprimer une notion abstraite par substitution analogique (ex. le thermomtre pour la temprature). Il y a deux classes de mtaphore : 1. Celles qui sinspirent du monde rel (bureau) ; 2. Celles qui parlent dun monde abstrait (langages).
Quelques rgles pour les pages web

Le principe KISS
L'une des cls pour un bon site web est la simplicit. Avez-vous entendu parl du principe "KISS" (Keep It Simple Silly)? Faites-la btement simple. Cela s'applique doublement pour les sites web. C'est simple de tomber dans le pige en utilisant tous les cadres possibles sur une page web. C'est intressant de pouvoir crer des cadres, des tableaux, des polices de diffrentes tailles et des GIF anims, mais si vous avez des cadres HTML sur chaque page, c'est peu prs sr que vos lecteurs vont tre plus accabls qu'impressionns. Rappelez-vous, que ce nest pas parce que vous POUVEZ crer un effet, que vous DEVEZ le faire. Demandez-vous: quelle valeur suis-je ajoutant avec cette technique? Est-ce la meilleure faon de communiquer ce que je veux dire?
_________________________________________________________________________________________
Simple, pas ennuyeux

Simple ne signifie pas forcement terne et ennuyeux. Beaucoup de gens confondent les effets fantastiques avec la communication effective. Que signifie faire une page simple ? Pensez comment les gens vont utiliser vos pages et prsenter leurs vos informations d'une faon qui reprsente leurs besoins et leurs attentes. Design propre + Bon emploi de la technologie = Un bon site web.
Les cinq doigts

Il est important de rendre votre site simple naviguer. Beaucoup de facteurs aident crer des chemins faciles travers votre site. Par exemple, une chose que vous pouvez faire c'est de garder le nombre de choix des "tapes suivantes" rduit, ainsi les gens ne vont pas se perdre dans une longue liste d'options. En moyenne le cerveau humain peroit cinq (ou moins) items comme un groupe, mais quand il compte plus de cinq items il doit les sparer en petits sous-groupes pour les traiter? Il est logique, alors, d'essayer de garder les listes d'items arrangs en groupes de cinq ou moins. Cela aide vos lecteurs voir plus vite les options et en slectionner une.
Dure de l'attention: 30 secondes

Quand quelqu'un arrive sur une page web, il devra tre capable de voir facilement les options qu'il a et en choisir une rapidement. Premire rgle, un lecteur ne doit pas mettre plus de 30 secondes pour "charger" votre page et dcider de ce qu'il veut faire. Si cela lui prend plus de 30 secondes, vous allez commencer perdre votre audience. Rappelez-vous que les gens ont une trs courte dure d'attention et ceux qui utilisent un modem pour accder au web ont une dure encore plus courte que les autres. Cela signifie deux choses: 1. Assurez-vous que vos pages aient une taille raisonnable et quelles se chargent rapidement. 2. Assurez-vous que la disposition de vos pages soit assez claire pour que les lecteurs puissent saisir d'un seul coup d'il votre schma de navigation et comprendre comment slectionner une option "tape suivante".
Les mots comptent

Vous rappelez-vous de votre professeur de franais du collge ? Rappelez-vous comment il vous disait limportance d'une bonne orthographe et une bonne grammaire? Il avait raison. Le web a trop de crateurs de pages qui oublient l'essentiel. Vous ne devez pas oublier toutes les rgles qui gouvernent la communication crite, seulement parce que votre page web est en direct. Vous ne devez pas oublier la correction. Rdigez bien et passez quelques minutes de plus sur votre texte. Vos lecteurs vous en remercieront.
_________________________________________________________________________________________
Equilibre
Une grande partie d'un bon design de page web est base sur l'quilibre : Equilibre entre le texte et les graphiques. A moins que le contenu ne dicte seulement du texte ou seulement des graphiques, utilisez des notions communes et un jugement esthtique, pour que l'un ne soit pas cras par l'autre. Equilibre entre le temps de chargement et le contenu de la page. Bien sr vous voulez de belles pages, mais vous avez besoin d'quilibrer le contenu de la page avec la ralit que vos lecteurs sont ailleurs et se connectant avec un modem. Est-ce que la photo de votre mariage vaut une attente de 120 secondes? Equilibre entre l'arrire-plan et le premier plan. La plupart d'entre nous impriment les documents sur du papier blanc ou sur un autre solide papier couleur. Sur le web, c'est assez passionnant de pouvoir crer des arrire-plans, mais c'est trs simple aussi de laisser l'arrire - plan craser le contenu de l'avant.
Cadres et tableaux
Les cadres peuvent constituer une grande amlioration de votre page web, mais veillez la faon dont vous allez les employer. Si tout ce dont vous avez besoin c'est des colonnes et des lignes, alors les tableaux seront plus indiqus pour votre page. Si vous voulez crer une structure navigable qui sera toujours visible, comme un sommaire par exemple, vous devez employer des cadres (ou frames).
Cadres avec modration

Les cadres peuvent amliorer votre site, mais comme tous les cadres web, assurez - vous que vous ne les employez pas trop. Si vous sentez que vous avez besoin de plus de trois cadres simultanment sur l'cran pensez la faon dont vous allez organiser vos informations. Si trop de choses marchent en mme temps, vos lecteurs peuvent se sentir drouts. Si vos lecteurs utilisent un moniteur de 14 puces, trop de cadres vont finir par crer une page en dsordre.
Apprendre plus
Crer des pages web est un processus continu d'apprentissage. La technologie et les outils sont en volution constante ainsi que notre comprhension de la faon avec laquelle les gens employent le mdia en direct. Pour crer de bons sites web, ne vous reposez sur vos lauriers. Le web est le meilleur endroit pour apprendre et pour continuer apprendre. Vous voulez devenir un crivain : lisez des romans clbres. Vous voulez tre un grand scnariste : regardez des films clbres. De mme, si vous voulez faire le design d'un grand site web, vous devez regarder les autres sites web. Prenez le temps de surfer sur le web et de regarder les choses cres par les autres. Regardez le bon et le mauvais et observez ce qui va et ce qui ne va pas. Pensez aux sites visits et utilisez vos observations pour crer vous-mmes de sites web clbres.
_________________________________________________________________________________________
Couleurs
La couleur est par excellence, la partie de lart qui dtient le don magique. Alors que le sujet, la forme, la ligne sadressent dabord la pense, la couleur na aucun sens pour lintelligence mais elle a tous les pouvoirs sur la sensibilit . Eugne DELACROIX
Questions : Pourquoi choisir telle couleur plutt quune autre ? Combien de couleurs utiliser ? Comment organiser le choix des couleurs ?
Combinaison de couleurs pour les caractres et le fond

COULEUR DE CARACTERE OU DE SYMBOLE Blanc Jaune Cyan Vert Magenta Rouge Bleu COULEUR DE FOND A UTILISER Magenta, rouge, vert, bleu Magenta, rouge Rouge Jaune, blanc Bleu, blanc, cyan, vert Blanc, jaune, cyan Blanc, cyan, vert Jaune Blanc, cyan Cyan, bleu Cyan, bleu Rouge Magenta, bleu Rouge A EVITER
daprs Bruce, M. & Foster, J. J. (1982). The visibility of colored characters on colored backgrounds in viewdata displays. Visible Language, 16, 4, 382-390 Adresses web :
http://www.colormatch.dk/ http://graphicdesign.about.com/library/color/blweb.htm
_________________________________________________________________________________________
CONCEPTION D'INTERFACES HOMME-MACHINE

Ergonomie et facteurs humains Observations Recommandations Rgles Ingnierie Gnie logiciel ; Mthodes, techniques et outils
Ergonomie et facteurs humains

Ergonomie : "du grec ergon (travail) tude scientifique des conditions (psychologiques et socioconomiques) de travail et de relation entre l'homme et la machine" (Petit Robert) Ergonomie physique (au dpart ; v. siges) ; Ergonomie cognitive ou ergonomie du travail mental : modliser le travail intellectuel ; Ergonomie des interfaces : tout ce qui dans un systme informatique influence la participation de l'utilisateur des tches informatises (J. P. Meinadier, L'interface utilisateur pour une informatique conviviale, Dunod, 1991) modlisation de l'utilisateur : le modle du processeur humain ; l'homme perceptuel, cognitif et social ; modlisation de la tche : valuation du comportement ; thorie de l'action. Pour comprendre les utilisateurs et construire des interfaces conviviales il faut prendre en compte : Psychologie cognitive : Apprentissage Processus de perception spatiale Processus de mmorisation - mmoire court terme - mmoire long terme Psychologie temporelle Perception : voir, entendre, sentir (1 degr) goter, sentir (2 degr) Habilits motrices : Sensibilit Force Anthropomtrie : taille, ... Affectivit : Affection, haine, crainte, anxit, ennui, frustration
_________________________________________________________________________________________
Psychologie cognitive
Limagerie mentale visuelle = une jeu de construction aussi inconsciente et aussi ncessaire que la respiration des reprsentations visuelles pralablement stockes en mmoire. Comment ? Traitement cognitif une slection impitoyable (nos yeux en voient beaucoup trop pour nous) ; toutes les informations comprises dans le champ visuel sont stockes pendant quelques diximes de seconde dans un buffer perceptif ; limage se transmet principalement larrire du cerveau, dans laire visuelle primaire (V1) seule une toute petite partie dentre elles sera traite (ex. regarder sa montre) ; le systme temporal (lartiste) : traite les informations concernant la forme ou la couleur de lobjet ; stocke en vrac les composants de limage (l'ovale dun visage, le nez, les cheveux..) ; le systme parital (le gomtre) : traite les informations sur ses dimensions, ses proportions ou sa distance ; sait comment les assembler en cas de besoin ; La mmoire visuelle ressemblerait plus un puzzle qu un album photo. Une mthode apparemment complique (dmontage remontage) mais assez logique et trs conomique. En choisissant les bons lments, il est possible de se reprsenter une mme personne diffrentes chelles, dans diffrents attitudes, avec diffrents vtements, etc. Sinon, Out of memory Processus (symbolique) dune perception visuelle :
_________________________________________________________________________________________
Pour bien voir, le cerveau commence par faire le tri

Lexprience dOlivier Koenig et Stephen M. Kosslyn (Universit dHarvard) Tracer mentalement une lettre sur des grilles de 20 cases prsentes lune aprs lautre. Chacune de ces grilles comportait une croix dans lune de ses cases, et lexercice consistait dire si cette case serait ou non recouverte par un F imaginaire. Le temps de raction : toujours plus court pour la barre verticale de F ; + 30 millisecondes pour la grande barre horizontale ; + 60 millisecondes pour la petite barre
Conclusion Pour se reprsenter le F, les sujets devaient en assembler mentalement les constituants: dabord montant, puis le trait suprieur, et le trait mdian. Mmoire associative : la gardienne du sens
le
La mmoire smantique, aussi appele mmoire associative, permet ddifier, dtiqueter et de relier entre elles toutes les reprsentations schmatiques quun individu dveloppe durant son existence. Pour passer dun concept assez abstrait (ex. chat) une image mentale en bonne et due forme on active successivement : des rseaux neuronaux en mmoire smantique ; des rseaux neuronaux dans les deux sous-ensembles de la mmoire visuelle (temporal et parital) ; des rseaux neuronaux dans laire visuelle primaire (notre salle de projection prive). Ensuite, limage pourra tre mentalement anime, complte ou modifie. La mmoire smantique peut activer ou tre active par dautres reprsentations perceptives comme des sons ou des odeurs (pas seulement des formes visuelles ; v. Proust). D'autres part, les perceptions visuelles ne se contentent pas dactiver la mmoire visuelle et smantique ; elles peuvent dborder sur la mmoire auditive. Une lecture intrieure inconsciente permet linformation visuelle datteindre la mmoire auditive (lintrospection : nous savons bien que nous nous rcitons trs souvent ce que nous voyons). Lutilisation de diffrents mdias dans une application multimdia.
_________________________________________________________________________________________
Hmisphres
Le symbole Yin-Yang
Caractristiques modales des hmisphres Hmisphre gauche VERBAL Mots pour nommer, dcrire, dfinir ANALITIQUE Dcouverte tape par tape SYMBOLIQUE Symbole de remplacement ABSTRAIT Information exacte TEMPOREL Organisation squentielle RATIONNEL
Conclusions tirs des faits et raisonnements
Hmisphre droite Non VERBAL SYNTETIQUE

Prise en compte des choses ensemble
ANALOGIQUE Liens mtaphoriques CONCRET ATEMPOREL Aucun sens du temps NON RATIONNEL Tendance ne pas juger SPATIAL Relations entre les lments INTUITIF Impressions, sentiments, images GLOBAL
NUMERIQUE Utilisation des nombres LOGIQUE Conclusion argumentes LINEAIRE
Ides relies, pense convergente Perception d'ensemble
Ingnierie des interfaces utilisateurs

_________________________________________________________________________________________
Pour un programme ou systme interactif : 1. choix d'algorithmes (processeurs) ; 2. les structures de donnes (mmoire) ; 3. la communication homme-machine - devient un des problmes majeurs de l'informatique interactive. La conception de l'interface utilisateur est un projet en soi, non une opration annexe de dernire minute ; les efforts fournis sont considrables : consomme environ 60% du temps global de conception ; le code ncessaire l'interface utilisateur atteint souvent 50% du code. Les interface sont de plus en plus sophistiques : interfaces graphiques ; interfaces multimodales. La conception d'interface devient de plus en plus complexe mais aussi primordiale pour le succs d'une application. La rutilisabilit des travaux dj effectus est souhaitable. Comme dans tout projet, une mthodologie est indispensable. C'est un mtier qui a ses spcialistes. L'axe ingnierie s'attaque vritablement la conception d'interfaces au niveau technique.
L'objectif : fournir aux concepteurs d'interfaces un environnement de gnie logiciel leur permettant de crer dans de bonnes conditions des interfaces utilisateurs.
Il s'agit de :
rduire le temps de conception ; augmenter la qualit de l'interface ; permettre le test par prototypage ; diminuer la programmation ; augmenter la rutilisation.
Les lments de rponse que l'on souhaite fournir aux concepteurs :

une mthodologie d'laboration s'appuyant sur un environnement bien organis et ayant pour cible une architecture logicielle bien structure ; des outils de spcification et de mise en uvre coordonns ; une interface concepteur approprie.
_________________________________________________________________________________________
Les utilisateurs diffrences physiques : ge ; handicap ; connaissances et expriences : dans le domaine de la tche (novice, professionnel, expert) ; en informatique, sur le systme (occasionnel, quotidien) ; caractristiques psychologiques : visuel/auditif ; rationnel/sentimental ; logique/intuitif ; analytique/synthtique ; caractristiques socioculturelles : signification des icnes, des couleurs ; sens d'criture ; format des dates. La tche ses caractristiques : rptitive, rgulire, occasionnelle, sensible aux modifications de l'environnement, contrainte par le temps, risque son genre : bureautique, conception, contrle, transaction, recherche d'informations, cration, communication, collaboration distance entre le modle de la tche du systme et le modle de la tche que s'est construit l'utilisateur : distance d'excution (objectif atteindre et actions accomplir sur le systme) ; distance d'valuation (avancement vers l'objectif). Le contexte systme haute scurit : cots levs, fiabilit, protocoles d'apprentissage longs, maintien de l'attention, prise de dcision dans des situations critiques utilisation industrielle ou commerciale : les cots doivent tre minimiss ; les compromis entre vitesse, taux d'erreurs et formation sont dcids partir des cots sur le cycle de vie ; bureautique personnelle, divertissement : apprentissage rapide, taux d'erreurs minimes et satisfaction subjective sont des critres trs importants ainsi que des prix bas en raison de la comptition ; systme coopratif, exploratoire, cratif : experts du domaine mais pas en informatique sociologie de l'entreprise : pouvoir, influence, salaire
_________________________________________________________________________________________
Les systmes informatiques

contraintes techniques : plate-forme ; taille mmoire ; taille et rsolution dcran (14-21 pouces ; 640x480, 800x600, 1024x768) profondeur de la couleur (8 bits/pixel 256 couleurs ; 16 bpp ; 24 bpp ; ) capteurs, effecteurs ; contraintes logistiques : cots ; dates limites ; pressions ; personnel disponible.
En IHM les informaticiens ont 3 dfauts:

croire que l'ergonomie est une affaire de got, de bon sens ; croire que ce qui est au got du dveloppeur conviendra au got de l'utilisateur ; croire que c'est l'utilisateur de s'adapter la machine.
La conception d'interface doit :

tre prise en compte ds la conception initiale du systme ; prendre en compte les utilisateurs ; tre prcde par une analyse rigoureuse des tches ; prendre en compte le contexte d'utilisation du logiciel. Pas des expriences, des savoir-faire gnralisables.
IHM domaine pluridisciplinaire :

informatique ; psychologie cognitive ; sciences de lducation, pdagogie ; anthropologie, sociologie, philosophie, linguistique ; communication, graphisme, audiovisuel (infographiste) ; ergonomie cognitive, ergonomie des interfaces.
_________________________________________________________________________________________
Le contrle d'interaction
- joue le rle d'un arbitre central entre l'interface et l'application ;
CONTRLE
Choix
Elments Interface avec l'application
Appels de Fonctions
Elments de contrle
& Entres Proposition de choix
Elments d'acquisition
Elments de prsentation
Rsultats des Appels
Le contrle dans une application interactive Le contrle dans une application intercative
Application

ralise les fonctions et objets du domaine en terme d'objets smantiques traduit les objets smantiques en terme d'objets interactifs assure la corresp. entre obj. sm. et obj. interactifs ; dfinit deux protocoles de communication ; gre la dynamique de l'interaction. conception itrative
Protocol de Protocole communication avec l'application Protocol de Protocole communication avec le composant de prsentation
Prsentation Contrleur
Intrt dcouplage Application-IHM
Application
Contrleur de Dialogue
Composant de Prsentation
UISM IHM Systme interactif Le modle de base : SEEHEIM

_________________________________________________________________________________________
Critres d'valuation
5 variables de mesure
(Ben Shneiderman, Designing the User Interface, Addison Wesley, 1992) 1. temps d'apprentissage ; 2. vitesse dexcution des tches par le couple homme-machine ; 3. taux d'erreurs et facilit de leur rcupration ; 4. rtention de l'apprentissage dans le temps ; 5. satisfaction subjective des utilisateurs.
8 critres de qualit ergonomique - AFNOR (D. Scapin)

1. Guidage 1.1. 1.2. Incitation Groupement/Distinctions entre items 1.2.1. Groupement/Distinctions par la localisation 1.2.2. Groupement/Distinctions par le format 1.3. 1.4. 2.1. Feed-back immdiat Lisibilit Brivet 2.1.1. Concision 2.1.2. Actions minimales 2.2. 3.1. 3.2. 4.1. 4.2. 5.1. 5.2. 5.3. Densit informationnelle Actions explicites Contrle utilisateur Flexibilit Prise en compte de l'exprience de l'utilisateur Protection contre les erreurs Qualit des messages Correction des erreurs 3. Contrle explicite
2. Charge de travail
4. Adaptabilit
5. Gestion des erreurs
6. Homognit / Cohrence 7. Signifiance des codes et dnominations 8. Compatibilit

_________________________________________________________________________________________
Bibliographie
COUTAZ, Jolle, Interfaces homme-ordinateur: conception et ralisation, DUNOD Informatique, Paris, 1990. GALITZ, Wilbert O., The Essential Guide to User Interface Design, Publisher: John Wiley & Sons ; 2nd edition (June 15, 2002) ISBN: 0471084646, 760 p. GILLET, Jean-Michel, L'interface graphique : Enjeux, ergonomie, mise en uvre sous Windows, InterEditions, Paris, 1995. MENADIER, Jean-Pierre, L'interface utilisateur: pour une informatique plus conviviale, DUNOD Informatique, Paris, 1991. NIELSEN, Jakob, Conception de sites web : L'Art de la simplicit, Paris, CampusPress, 2000, 385p. NIELSEN, Jakob, Marie TAHIR, Lart de la page daccueil, Paris, Eyrolles, 2002, 330 p. THATCHER, Jim, Henry Shawn, Cynthia Waddell, Sarah Swierenga, Mark Urban, Michael Burks, Bob Regan, Paul Bohman - Constructing Accessible Web Sites, Publisher: Glasshaus ; April 2002, ISBN: 1904151000, 400 p. WEINMAN, Lynda - Conception graphique des sites Web, CampusPress, Paris, 1999, 440p.
URLographie
ENST Bretagne, Ergonomie d'un site Web
http://webbo.enst-bretagne.fr/tig/webErgonomie
Dictionnaire en ligne http://www.webopedia.com/ Usable Information Technology, Jakob Nielsen's Website

http://www.useit.com/
Association Francophone d'Interaction Homme-Machine http://www.afihm.org/ INRIA - Thme de recherche : Interaction homme-machine, images, donnes, connaissances
http://www.inria.fr/recherche/equipes/projets_theme3.fr.html
Web design http://www.lynda.com/ Web Developer's Virtual Library http://wdvl.internet.com/Authoring/Languages/XML/SVG/ Web Graphique http://www.webgraphique.com/
WEB STYLE GUIDE, 2nd edition
http://www.webstyleguide.com/
_________________________________________________________________________________________

Ihm 01

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ihm 01

Transféré par

Droits d'auteur :

Formats disponibles

Universit de Franche-Comt UFR STGI de Belfort-Montbliard

Interface Homme-Machine : plutt le dispositif li une application ;

Communication Homme-Machine : problmatique dusage + pb. techniques

Dialogue Homme-Machine : insiste sur la dimension langagire de la communication

cots (rcriture du systme, dtournement).

Language) ; communication homme-homme (utilisateur - oprateur) ; communication homme-machine asynchrone (listing).

2. Interface textuelle (Keyboard User Interface - KUI)

3. Interface graphique (Graphical User Interface - GUI)

l'volution de priphriques ; le dveloppement de diffrents domaines d'applications :

3.1. Les concepts gnraux des interfaces graphiques

barre de menus (menu de premier niveau) ; menus droulants de deuxime niveau ;

3.2. L'HISTOIRE DES INTERFACES GRAPHIQUES

PARC (Palo Alto Research Center) Xerox :

1985-1986 - dans le monde PC ont t lances trois botes outils:

Windows 2000, Windows XP (2001)

Evnement monomodal : un vnement issu (entre) ou destination (sortie) d'un seul

Evnement multimodal : un ensemble d'vnements monomodaux issus ou

Modalit1 : un processus d'analyse ou de synthse (processus de reconnaissance de

Utilisation des modes pour l'interprtation et/ou la gnration

Usage des modalits

Les dnominations du multimodal (Coutaz, 1992)

La multimodalit peut servir :

Un systme informatique multimodal - systme capable de rpondre aux modalits

LES QUALITES DES INTERFACES UTILISATEUR

Modlisation de l'interface utilisateur

a une facult dadaptation ; a son libre arbitre.

Modle d'interface deux niveaux

Concepteur Interface conceptuelle

Cre son propre modle mental du systme

Systme d'interface utilisateur

Mmoire de travail (action-perception)

Modle lmentaire d'interface utilisateur

une hirarchie de mmoire :

Modle conceptuel du concepteur

Modle mental de l'utilisateur

monde conceptuel Conception

"Image" Prsentation et comportement de l'interface

tous les items, 7

(pour ne dpasser la capacit globale de la mmoire court et viter les appels

Quelques rgles pour les pages web

Simple, pas ennuyeux

Les cinq doigts

Dure de l'attention: 30 secondes

Les mots comptent

Cadres avec modration

Combinaison de couleurs pour les caractres et le fond

CONCEPTION D'INTERFACES HOMME-MACHINE

Ergonomie et facteurs humains

Pour bien voir, le cerveau commence par faire le tri

Hmisphre droite Non VERBAL SYNTETIQUE

NUMERIQUE Utilisation des nombres LOGIQUE Conclusion argumentes LINEAIRE

Ides relies, pense convergente Perception d'ensemble

Ingnierie des interfaces utilisateurs

Les lments de rponse que l'on souhaite fournir aux concepteurs :

Les systmes informatiques

En IHM les informaticiens ont 3 dfauts:

La conception d'interface doit :

IHM domaine pluridisciplinaire :

Elments Interface avec l'application

& Entres Proposition de choix

Rsultats des Appels

Intrt dcouplage Application-IHM

UISM IHM Systme interactif Le modle de base : SEEHEIM