Raymond HOUE - La famille du Refuge
Contents
1. Repr sentation de l action m mm mum anaue 533323 EHE nnmnnn amans HNHNENENE HN m s w m m a s s a m m s m m a s m m m a s s m m m a s m m T m a s s dKkKkd dKkKkd m m a s s m n s a BP Pe a aF dF a a a dd a ta a Ju dP a a s J d a a s a a n d an a a a hh an a a a n a a a a J aF a a a m d an d a a a n a EL P Dn Formel objectif ENIT Cours IHM S9 SE Monde de l homme s mantique x Articulatoire Op ratoire Monde de la machine W ENIT Cours IHM S9 53 Que retenir de lath orie de Norman e D composition de la r alisation d une t che tablissement d un but repr sentation mentale de l tat atteindre Formation d une intention analyse de la diff rence entre tat actuel et but et d cision d agir pour atteindre le but Go cification d une suite d actions physiques liens entre variables psychologiques but et variables physiques syst me physique r el et Correspondances entre variables physiques et dispositifs de commandes Ex cution des actions Perception de l tat du syst me repr sentation mentale Interpr tation de l tat du syst me valuation comparaison au but recherch et retour Mise en vidence des probl mes cl s Mod le d activit D NO2. Lacompatibilit r pond aux objectifs suivants Correspondance entre les connaissances de l utilisateur et la capacit du logiciel Univers familier et habituel apprentissage facilit Homogeneite ou consistance e Bmilarit interne d un produit Capacit d un systeme informatique conser ver une logque d usage constante dans une application ou d une application une autre niveau proc dure et niveau pr sentation des informations gt amp obilit des choix de conception e Objectifs gt Rendre le comportement du syst me pr visible gt Diminuer le temps de recherche d une information Faciliter la prise d informations Guidage Moyens mis disposition de l utilisateur pour Connaitre l tat du syst me Etablir les liens de causalit entre actions et tat du syst me Evaluer le syst me et orienter son action sur celui ci Deux types de guidage Explicite message d avertissement vitement d erreurs aide en ligne codes clairs explicites et sans ambiguit mplicite structuration de l affichage diff rentiation par typographie couleur attributs informatiques des cat gories d information Objectifs Faciliter l apprentissage Aider l utilisateur se rep rer et choisir ses actions Pr venir les erreurs Souplesse ou flexibilite e Capacit de l interface s adapter aux diff rentes exigences de la t che aux diverses
3. suppression de fichiers 4 8 MS DOS E MacOs MS DOS commande vs Mac OS WIMP e La manipulation directe a ses limites S paration clavier souris gt Actions r p titives sur des objets diff rents macros WYSW YG position d une image dans texte modifiable ult rieurement Office vs Latex e Pas de paradigme id al e web e Destechnologes anciennes 1964 Xanadu Ted Nelson gt hypertexte 1969 r seau Arpanet pour une id e nouvelle 1989 Tim Berners Lee CERN World Wide Web N ai fait que prendre le prinape d hypertexte et le relier au prinape du TCP et du DNS gt 1993 Navigateur graphique Mosaic Marc Andreesen NCSA pourtant peu r volutionnaire gt Impact d une demande sociale et commerciale forte gt Interaction classique et relativement limit e e aconception de sites Web met en jeu des eh Leen sp cifiques en mati re d ergonomie et ENIT Cours IHM 59 D finition LA PROBLEMATIQUE Probleme de communication Frontier Discontinuit ENIT Cours IHM S9 Diff rents modes de repr sentation e S mboles e SON e Images e Texte cours HHM 19h gt e Gestes e Un sourire parfum Decodage gt Referentiel 1 R f rentiel 2 D coder Coder Repr sentations ENIT Cours IHM 9 En resume e Pas de communication di
4. 59 36 Le sous systeme cognitif Caract ristiques du syst me perceptif PERCEPTION VISUEL 200ms u 17 signes Stimuli SCHEER vers la M moires AUDITIF sensorielles m moire 1500ms de travail u 5 items R physique Temps de cycle du processeur perceptif 100ms ENIT Cours IHM S9 37 Le sous systeme cognitif KEE COGNITION M moire long terme d infini m infini R s mantique perception moteur ENIT Cours IHM S9 38 Le sous systeme cognitif ort Time Memory principal goulet d tranglement de notre syst me de traitement de l information tendance naturelle l analogie si saturation de la STM effacement de ceux des l ments qui n ont pas t r activ s r cemment Long Term Memory m moire permanente capacit illimit e support de toutes les connaissances accumul es mais aussi guide dans les moindres actions que nous effectuons Les divers types de connaissances d claratives faits proc durales actions analogiques images mentales sensori motrices automatisme Divers types d oublis r pressif refoulement provoqu chocs traumatismes r gressif pas de diminution de la capacit mais difficult d attention partag e banal interf rence Le processus cognitif e L attention s lective e L apprentissage e r solution des probl mes e La communication par le langage e Le syst me c
5. S9 112 L evaluation des interfaces e En cours de conception test papier et surtout maquettes e En cours de sp cification exp rimentation par prototypage valuation de fonctionnement v rification de comportement valuation et performances divers niveaux limit ou complet prototypes jetables ou volution vers le produit fini outil de communication entre informaticiens ergonomes utilisateurs repr sentatifs e Avant diffusion puis apr s tests enqu tes Evaluation d une IHM D finir les OBJECTIFS Modalit de l valuation d valuation Dimensions UTILITE ET UTILISABILITE gt Recueillir les Ca cibles lusion ud de recueil ENIT Cours IHM 9 114 Utilite et utilisabilite E E UTILISABILITE UTILIT E Facilit s Capacit fonctionnelle _ v d apprentissage gt Performances v d utilisation Assistance de m morisation aux d erreurs E gt Satisfaction ne AEAEE AA EE AA Err UTILIT POTENTIELLE UTILIT R ELLE ENIT Cours IHM S9 115 Schema d evaluation Utilisabilit Facilit s d apprentissage Capacit fonctionnelle d utilisation Performances du syst me de documentation Qualit d assistance Qualit ergonomique Propri t s Propri t s externes intrins ques Ad quation Coh rence interne Logique du travail L valuation ergonomique des
6. es et utiles retour arri re gestion des signets etc Mas une application Web doit se suffire elle m me en vitant l utilisation intensive des boutons Back et Forward du navigateur gt navigation fluide ensemble des choix du site rep re dans le site etc e Le respect imp ratif des standards Condition sine qua non d une application Web gt Le principe est d offrir l acc s un ensemble de ressources pages HTML fichiers Images etc partir d un navigateur g n rique Nouveaut s apport es par le Web La notion de site les notions de branche et portail La page d accueil ou home page La navigation de type arborescente pyramidale en r seau ou en r teau Le d coupage en mode page La notion de click amp go et d intuitivit ce que l on voit est l o on ira L utilisation des images compress es fixes ou anim es Le navigateur comme l ment f d rateur Le drill down La notion de site e Le site institutionnel C est le Web public gt doit tre attrayant riche et convivial o La cible est inconnue Il doit donc s appuyer sur les standards etavoir des pages de poids raisonnable e Le site intranet Est constitu par Une collection de domaines regroupements d applications ou d informations par m tiers et processus Des informations g n rales page d accuell plan du site un gossare E
7. habitudes et connaissances des utilisateurs Personnalisation de l interface Dans le fonctionnement adaptation du logiciel diverses populations d utilisateurs Dans l utilisation diverses proc dures options et commandes pour atteindre un m me objectif e Objectifs Adaptation ala diversit des utilisateurs L outil doit s adapter l homme et non l inverse Controle explicite Ensemble des l ments du dialogue qui permettent a l utilisateur de matriser le lancement et d roulement des op rations eemantique des commandes rendant compte de leur s effets Hfets des commandes pr dictibles e Objectifs Favoriser la pr vision des r actions de l interface Favoriser l apprentissage Diminuer les risques d erreur 3estion des erreurs ou robustesse e Ensemble des moyens pour Quider l utilisateur dans la perception l identification de Ses erreurs et Conserver l int grit de l application gt Hobustesse Objectifs Favoriser l exploration et l apprentissage par un syst me tol rant les changements de d cision des utilisateurs Eviter les perturbations crainte blocage associ es la difficult de corriger les erreurs commises Permettre l utilisateur de localiser comprendre et corriger pr cis ment Confirmation de la suppression du fichier Voulez vous vraiment envoyer Photos d doc la Corbeille g Concision charge cognitive e Ensemble
8. libres sur 103 Go C 0 Go 7 utres WORK DATA OTHER DATA H 5 Wl l P riph riques utilisant des supports amovibles 5 a lt z Lecteur DVD RW E S Lecteur DVD 1 F VISTA C pA Lecteur DVD J Lecteur DVD K Pas de syntaxe gt erreurs limit es B 5 WORK DATA J biblio 2007 5 Lecteur DVD L E E E L s 9 E s A A x NT visibilit des objets d int r t E 4 L ENT d ADMINISTRATIF 18 Mes dossiers de partage 4 ENSEIGNEMENTS Y EN PC DE RAYMOND Groupe de travail WORKGROUP Processeur Genuine Intel R CPU T2080 1 73GHz G feedback rapide sur les actions actions r versibles e Manipulation directe WYSIWYG What You See is What You Get Contr le directe et r versibilit facilit e e conviviales non r serv es des sp cialistes Manipulation directe disparition de la syntaxe Shneidermann 1982 action directe sur les objets pas de syntaxe erreurs limit es visibilit des objets d int ret feedback rapide sur les actions actions r versibles Manipulation directe WYSYWIG Cliquez pour ajouter des commentaires ENIT Cours IHM 59 L3 5 8 Int r t de la manipulation directe Margono et Shneidermann 1987 Etude sur 30 novices Portant sur cr ation copie renommage Ordinateurs modernes 1971
9. ou non Edition affichage _ Insertion Transfert du contr le entre l utilisateur et le syst me e Adaptation Adaptatibilit param trisation par l utilisateur gt Adaptativit modification initi e par le syst me E Presse papiers Office EIS Interligne Kd Interligne Interligne Interligne Normal 24 Points i 4 Lignes Page de commentaires Avant le paragraphe Avant le paragraphe Masque k 05 3 volet Office Exemple substitivit des donn es Apprenabilite e Causdlit Facilit de d terminer le comportement du syst me partir d interactions ant rieures Conception de diapositive gt visibilit op rationnelle ee en page des postes Obser vabilit Facilit offerte l utilisateur de 7 Lus Barres d outils k Format Outils Diaporama Fen tre v rifier les effets de ses actions aua gt y Miniatures 9 Mosaiques De o Obser vabilit imm diate Exemple anciennes ver sons du SI s finder du Macintosh ou de l explorateur Windows Crs IH R organiser les ic nes par F Present 141 Choisir les d tails Personn r CE ll r sent ge onnalise Observabilite e Exemple Gestion de l attente en cas de temps de 9 r ponse Importants er WEE gt informer l utilisateur de l avancement e du travail Annuler Temps d attente Affichage NH pr vu S
10. Cours IHM S9 Raymond HOUE Objectifs du cours apercu g n ral INTRODUCTION ENIT Cours IHM S9 Objectifs du cours e Sensibilisation sur l importance des IHM Multiplicit des choix de conception Prise en compte des utilisateurs finaux gt Importance de l valuation e Principes ergonomiques Pas de solution toute fate et guidelines gt Interfaces graphiques Exemples de base Applications web Utilice des IHMs e Part importante dans le d veloppement des logiciels Nielsen 1993 1 3 des r unions d avancement de projet 48 logiciel interactif 80 web du code produit e Importance conomique de l utilisabilit des IHMs Refonte des IHMs des interfaces de la compagnie Ameritech appels t l phoniques gain de 600 ms par appel 3 millions par an Correction de 20 des 75 probl mes d utilisabilit obser v s sur le SGBD Vax Rally 1994 gain de 8096 des b n fices 66 de CA Importance sur la s curit des logiciels Crash Airbus au mont Saint Odile gt mauvaise appr ciation par absence d unit sur un des cadrans de descente altim trie Accident nucl aire de Three Mile Island gt mauvaise prise en compte de la dimension humaine dans la conception du poste de contr le Panorama rapide e La saga de Windows Windows 1 0 fen tres chevauchantes Windows 2 0 Windows 3 0 e Lesrat s de Linux gr
11. J lt Mod les d Mise au point del Patrick Marcel 07 09 2004 18 28 E X D re S S Envoy s E enseignants Assembl me BARRERE 17 09 2004 19 10 49 Corbeille adresse demande corpus gt Georgia Veldre Ta 08 09 2004 11 18 bol Thunderbird pense que ce message est ind sirable Acceptable V Boite de r ception Outlesi Express 80 Dossiers locaux Outils Message E Sujet enseignants Assembl eg n rale de rentr e JXrXme BARRERE lt jerome barrere univ tours fr gt S Date 07 09 2004 19 10 Boite de r ception Pour enseignants univ tours fr istos univ tours fr Dossiers gi Outlook Express Mesdames Messieurs Erica de Vries Re Propositions recension 03 09 2004 07 26 Dossiers locaux Pascale Sebillot our info 03 09 2004 11 05 e Bolte de r ception EB a Denis s Categorie 3 m 4 15 20 moment de la rentr e universitaire 2004 2005 le Pr sident de lt d envoi A Jean Yves Antoine univ u l universit se propose d changer avec l ensemble des personnels de E l ments envoy s snovotny comit de direction du G 07 09 2004 11 36 l universit et vous convie une assembl e g n rale de rentr e sa 3 l ments supprim s Y Franck Poirier r union Corail 10 09 2004 18 59 Brouillons Herison ANDRIAMIHAJA soutenance stage DEA 11 09 2004 17 31 Cette r union se tiendra ra i
12. RMAN 1986 distance s mantique formation valuation distance s mantique en entr e d une intention en sortie interpretation distance articulatoire SES de l tat du distance articulatoire en entr e d une suite syst me en sortie d actions erception de I distance op ratoire P P distance op ratoire ex cution en entr e l tat du systeme en sortie distance iu lt distance d ex cution d valuation AFNOR ergonomiques RECOMMANDATIONS Les recommandations AFNOR e AFNOR lt Ergonomie et conception du dialogue homme ordinateur Z67 110 Afnor PAHS damer 1988 e AFNOR lt D finition des crit res ergonomiques de conception et d valuation des produits logiciels Z67 133 1 Afnor PARIS D cembre 1991 Hecommandations ergonomiques Quelques exemples e Compatibilit e Homog n it e Guidage e uplesse ou flexibilit e Contr le explicite e Gestion des erreurs e Concision Standardisation Courrier entrant pour Jean Yves Antoine univ tours fr Mozilla Thunderbird EINEN SUED hage Messages Outils Aide emn Relever crire Adresses R pondre R p tous Transf rer Supprimer Acceptable Dossiers El da Courrier_jya j M S O u I e Courrier entrant G J Fwd MISE A JOUR gt Arnaud Giacometti 07 09 2004 11 20 Erouillons D Fwd Re UE libre Blois gt Patrick Marcel 07 09 2004 17 02 S
13. S CENTRE DE n FORMATIONS INTERNATIONALES INDUSTRIELLES RECHERCHE COMP TENCES Recherche dans les fiches UE Si Fiches GO Affichage des fiches par semestre Cliquez sur un semestre pour afficher les fiches Semestres1 6 gt Semestes749 correspondantes L OQ IC e ordinateur WORK D I ENSEIGNEMENTS 4 Rechercher p Fichier Edition Affichage Outils L4 O Vue globale el locale du Sysiel m Organiser V Affichages DR Explorer Diaporama ES Courrier lectronique Partager gj Graver TOMUS METER Date de la prise de vue Mots cl s Taille Notation par ex explorateur Windows B Images R Musique Autres Dossiers CD kanban Ebook 4 ENIT gt ADMINISTRATIF 4 ENSEIGNEMENTS b AD gt ALGO gt BD k CD kanban Incoming ORG ENT methodes et out Dossier de fichiers Date de modificati 05 11 2007 12 23 ENIT Cours IHM S9 63 Autre exemple de guidage e Formulaire de saisie Indiquer les champs optionnels et obligatoires Pr ciser le format de saisie Dire autant que possible quelles valeurs sont attendues O gt le guidage le plus s r est celui qui consiste limiter les choix a une liste de pr s lection Robustesse e Huseurs styles d interaction pour une m me t che e Initiative du dialogue contr le utilisateur Syst me pr emptif
14. a perception des couleurs absorption et r flexion description des couleurs l analyse tri chromique Rouge Vert Bleu synth se additive gt cran Magenta Cyan Jaune synth se soustractive gt document papier Teinte Hue Saturation Luminosit Brightness Absorption et mission Les couleurs 2 3 e Conseils d utilisation Tester car diff rences selon mat riel Concevoir en monochrome puis rajouter les couleurs Utiliser cet attribut pour attirer l attention monter une organisation indiquer un tat monter des relations Pr voir la modification possible par l utilisateur Ce ne doit pas tre le seul l ment discriminant Utiliser des couleurs pour les t ches de recherche Sassurer que les couleurs diff rent en luminosit et teinte assure la meilleure perception Les couleurs 3 3 e Autres conseils d utilisation e assurer de la coh rence dans les associations avec les associations connues de l utilisateur Utiliser 8 couleurs diff rentes maximum le mieux 4 et moins viter les bleus satur s pour le texte et les petits symboles Choisir soigneusement les couleurs de fond et des MOM images color es sur fond achromatique noir blanc gris ou inversement mais avec contraste important en couleur et intensit lumineuse fond fonc noir bleu fonc pour texte en couleur et fond clair pour symboles graphiques grands viter les fonds m
15. and public avec l arriv e d une GUI et kits d installation A e Pourquoi Latex ne sera jamais un outil grand public Commandes d dition complexes Compilation gt etc HISTORIQUE SITUATIONS D UTILISATION Ordinateurs de 19 g n ration 1945 1956 e Premiers ordinateurs NM Ecker et Mauchly 1946 Manchester Mark Newman et al 1948 EDVAC Cambridge Von Neumann 1949 e Niveau mat riel uniquement Langages d pendants de la machine e Interaction Homme Machine quasi inexistante e Utilisation r serv e des experts ENIT Cours IHM 59 7 Ordinateurs de 28 et 3 me g n ration 1956 1971 e Technologie s paration mat riel logiciel Syst mes d exploitation EMT VMG DOS Langages de haut niveau Fortran Cobol e Interaction Dispositifs d E S Lecteurs perforateurs de cartes Tableaux de bord voyant Imprimantes Le barrage de la syntaxe Langages de commandes gt syntaxe herm tique apprentissage difficile Syst mes co teux e Interaction toujours restreinte Toujours r serv s des experts ENIT Cours IHM 9 SE Ordinateurs modernes 1971 e Pas d volution dans l architecture des ordinateurs Augmentation de la puissance de calcul loi de Moore gt volution applications et nouvelles formes d interaction e Nouveaux dispositifs d E S domaine de la recherch
16. arron et vert Conseils pratiques SYNTHESE ENIT Cours IHM S9 Du bon sens en somme e Prendre en compte distance et ange de vision ISO 1988 Exprimer les diff rences par des couleurs tr s contrast es et similitudes par des couleurs de faible contraste ISO 1988 Formes diff rentes couleurs diff rentes ISO 1988 Prendre en compte le confort visuel viter les couleurs tr s loign es dans le spectre Utiliser des couleurs satur es avec luminosit pour mettre en vidence et inversement Discrimination pour les items en fonction de la distance et de l loignement dans le spectre Lerouge plus proche le bleu plus loign couleurs chaudes objets apparaissant plus granas e La couleur satisfait l utilisateur Styles d interaction e Langages de commande S lection de menus Manipulation directe WIMP Formulaires Langage naturel complexit flexibilit richesse d expression structuration apprentissage ais gestion erreurs visuel apprentissage ais r tention apprentissage flexibilit WYSIWYG saisie donn es apprentissage ais pr vention erreurs naturalit complexit apprentissage erreurs lenteur masquage info peu flexible lenteur relative pointage ambiguit ic nes co teux en espace usage sp cifique impr cision ambiguit ENIT Cours IHM S9 96 yles d interaction et niveau d expertis
17. ation de droite 100 70 5 2 100 70 70 70 70 910ms e dem pour la configuration du milieu Avec en plus la verbalisation 1 br leur 28 3 me e La derni re configuration gt 1240ms Approche cognitive pour les IHM R SOUDRE ts PROBLEME b SOLUTION PERCEPTIBLE p PERCEPTIBLE Perceptif J A Subjectif J EXPOSER INTERPR TER Passer de la repr sentation l expression formelle Formel P Objectif PROBLEME SOLUTION FORMEL MEI FORMELLE lt gt L interface un sandwich t Perceptif Subjectif m L aspect externe de l interface Formel Objectif Le Noyau Fonctionnel de l application ENIT Cours IHM S9 48 Un cas possible triste sandwich b Perceptif Subjectif L aspect externe de l interface Formel Objectif Le Noyau Fonctionnel de l application ENIT Cours IHM S9 Une autre cas gt bon sandwich Perceptif x Subjectif L aspect externe de l interface Formel Objectif Le Noyau Fonctionnel de l application ENIT Cours IHM S9 50 Part de travail de l homme th orie de l action de Norman 1986 erceptif subjectif Repr sentation de l action Formel Objectif ENIT Cours IHM S9 51 Perceptif subjectif muna quuna Quaus
18. cules gt Bien diff rentier les zones remplir des l gendes Organisation des ecrans 2 3 exte gt 3 types Messages brefs et concis adapt au niveau de l utilisateur deforme affirmative constructifs plut t que critiques pla ant l utilisateur en situation de commande si une action est indiqu e utiliser des mots consistants avec l action bei e indications courtes appel aussi fil d Ariane bien localis s et adapt s au niveau utilisateur grammaticalement simples forme active affirmative ordre d utilisation bien agenc s terminologie consistante Instructions indications plus complexes texte simples et clairs Organisation des ecrans 3 3 Nombres Entiers justifi s droite D cimaux dignement sur la virgule viter les z ros non significatifs D couper les nombres par tranches de 3 ou 4 chiffres avec les s parateurs usuels blanc trait d union virgule US e Techniques de codage gt sur les stations Clignotement gras inverse vid o taille fonte soulignement for mes caract res sp ciaux et ic nes encadrement son et couleur Cestechniques permettent d attirer l attention de l il de l utilisateur mais en abuser fait disparaltre l effet attendu Les couleurs 1 3 e Attribut de plus en plus important tres utilis car puissant mas risque de mauvaises utilisations e Hude de la vision humaine reges de bonne utilisation L
19. de Ses perceptions Ses processus mentaux Ses capacit s d apprentissage e Les facteurs de performance Syst me humain de traitement de l information Caract ristiques psychologiques Connaissances et exp riences T ches de l utilisateur Caract ristiques physiques Environnement physique Qutils disposition de l utilisateur Connaissances et exp riences de l utilisat eur e Divers niveaux d interface adaptables selon les utilisateurs Autres niveaux que novice et expert consid rer e Sont a prendre en compte Niveau d ducation capacit abstraction niveau de lecture Habitude frappe clavier Exp rience en informatique gt Exp rience sur la t che Exp rience en syst mes automatis s Utilisation d autres syst mes Les taches de l utilisateur e La fr quence d utilisation Forte fr quence gt facilit d utilisation Faible fr quence facilit d apprentissage et de m morisation Les types de contr le Contr le utilisateur l utilisateur choisit sa s quence d actions parmi les commandes du syst me Contr le par machine syst me guide l utilisateur par une s quence impos e e Les types de choix Choix libre type zone a remplir Choix forc s lection dans un choix multiple Caract ristiques physiques de l utilisateur e L utilisateur peut tre gt Droitier ou gaucher prise en compte pour frappe des commande
20. des moyens qui contribuent pour l utilisateur la r duction de ses activit s de perception et m morisation e Objectifs optimiser la prise d informations et de d cision en pr sentant des informations pr cises et br ve minimiser le nombre d actions ou d op rations et le temps de manipulation Dialogues conseils 1 LES GUIDES DE STYLE Differents styles Les styles de dialogues Les menus Les grilles de saisie Les langages Les langages de commandes Les manipulations directes L organisation des crans La couleur Des conseils Les temps de r ponses La gestion des erreurs La documentation Les manuels utilisateurs Lade en ligne Les menus presentation e Avantages Facilit d apprentissage o Facilit de m morisation Saisie limit e e Inconv nients Flexibilit faible gt Navigation parfois fastidieuse et difficile o Difficult si le choix est vaste Syst me tr s structur rigide e Conseill pour gt Utilisateur peu motiv Faibles connaissances et exp riences Usage discr tionnaire Les menus principes et regles de conception e dructure des menus Structure des menus structure de la t che ordre des menus ordre des actions utilisateurs minimiser la profondeur tendre en largeur menus verticaux gt Items inactifs gris s pour novices enlev s si experts labels courts et consistant grammaticalement e O
21. e Novice Occasionnel Expert Langages de commande S lection de menus ES D Manipulation directe MP Ea as Formulaires ENIT Cours IHM 59 99 ni JUSTIFICATION ET COLONNES texte crit en minuscules Lecture d un texte lecture d un texte se lit beaucoup plus vite un texte ecrit en minuscules un texte crit en minuscules qu un texte en se lit beaucoup plus vite se lit beaucoup plus vite majuscules La vitesse qu un texte en majuscules La qu un texte en majuscules La de lecture en vitesse de lecture en vitesse de lecture majuscules a t minuscules a t estim e majuscules a t estim e estim e 13 plus lente 13 plus lente qu en 13 plus lente qu en qu en minuscules ceci majuscules ceci provenant minuscules ceci provenant provenant d une d une differentiation plus d une differentiation plus diff rentiation plus forte des majuscules que des forte des minuscules que des forte des minuscules minuscules majuscules que des majuscules Estimation faite par Tulis en 1988 De meme la lecture d un texte est am lior e si la longueur d une ligne est Lecture d un texte sup rieure 26 un texte crit en minuscules se lit beaucoup plus vite qu un texte en caract res longueur majuscules La vitesse de lecture en majuscules a t estim e 13 conseill e 50 55 plus lente qu en minuscules ceci provenant d une differentiation plus caracteres ou doubles for
22. e 1962 lvan Sutherland MIT cran graphique et stylo optique 1964 Doug Enghelbart Standford U gt souris ENIT Cours IHM 9 Ordinateurs modernes 1971 e Nouveaux dispositifs OH syst mes commerciaux Exemple IBM 370 Clavier Ecran alphanum rique affichage de caract res uniquement ou de dessins sommaires style minitel Interaction par langages de commande Toujours r se Administrateur Invite de commandes ON ENIT Cours IHM S9 10 Ordinateurs modernes 1971 Vers le grand public interfaces graphiques et manipulation directe GUI Graphical User Interface Interface WIMP Window Icon Menu Pointer e GUI recherche 1964 souris fen tre Doug Enghelbart 1970s Xerox Palo Alto Xerox Star ENIT Cours IHM 59 ll Ordinateurs modernes 1971 d GUI une id e longue merger commercialement S 1981 Xerox 8010 Star 1982 Apple lle Apple Lisa o 1984 Macintosh o 1990 Windows 3 0 Qui semble pourtant naturelle aujourd hui S ENIT Cours IHM 9 12 Ordinateurs modernes 1971 1 Ordinateur Manipulation directe w disparition de la syntaxe Shneidermann 1982 action directe sur les objets Taille totale Espace libre VISTA C RECOVERY D E Images gt SE lt lt Musique 33 1 Go
23. e l historique du rafraichissement O Les standards e Feuilles de style e Recommandations du W XHTML XML DHIML e Les langages gt PHP ASP gt DRY Dont Repeat Yourself
24. e perception gt statiques sur des visuels d interface tests d utilisabilit navigation sur un prototype significatif Impl ENIT Cours IHM S9 149 Ciblage du site resp marketing et resp utilisabilit Identification du contenu et des usages cdi D finition du service et du public cibl ge cat gorie socio professionnelle exp rience informatique et Internet Analyse des besoins interview aupr s d un chantillon repr sentatif d utilisateurs appartenant la cible questions ouvertes ne pas diriger l expression du besoin Quelle r ponse cherchez vous obtenir en consultant ce site Qu attendez vous en priorit de ce site Dans quel contexte tes vous amen s consulter ce site c d j un autre site Web rendant ce type de ser vice Quelles sont ses acunes D autres m dias vous offrent ils ce type de service Quelles sont leurs limites leurs points forts Tests d utilisabilit peuvent conduire une remise en cause partielle du ciblage ENIT Cours IHM 59 150 Ciblage suite e Analyse des besoins et tests d utilisabilit gt valuation critique des sites Web concurrents par vous m me ou avec un chantillon d utilisateurs Ex check list d valuation rapide IBM Web Design Guidelines L objectif du site est il clairement per u Le public cibl peut il clarement sidentifier Le site est il utile et p
25. environnements graphiques sont particuli rement bien adapt pour les applications n cessitant une interaction importante avec l utilisateur etune grande richesse de manipulation directe gt on peut presque tout faire avec un environnement graphique Le Web plus adapt aux applications d coupables en processus l mentaires potentiel plus limit s par ses diff rents handicaps presque pas de possibilit s de manipulation pas de gestion v nementielle sans script ou d veloppements suppl mentaires suffisant pour des applications de gestion gain d terminant en terme de simplicit Les fondamentaux du VVeb e Le Web fonctionne en mode et d connect Lapage est l l ment principal et le granule de base gt composant monolithique n y a pas de rafraichissement possible une fois la page charg e dans le navigateur sauf en changeant de page Le protocole HTTP fonctionne en mode non connect gt pas de dialogue permanent entre le client et le ser veur Peu de traitements c t client L essentiel des tratements d une application Web sont ex cut s sur le ser veur Les traitements c t client sont limit s aux contr les de niveau syntaxique contr le de saisie t a P petites animations a l aide de langage comme Javascript ou Flas Les fondamentaux du Web suite e L ergonomie doit participer la navigation Le navigateur Web offre des fonctions d di
26. er Ek ic ne d attente sablier horloge gt e m 6 30 secondes Message avec marque d avancement r alis temps d attente 30 secondes Idem avec en outre un d tail des c e actions en cours de r alisation A E fichiers de donn es Palices ENIT Cours IHM S9 67 Concision Google Mozilla Firebird Fichier Edition Affichage Aller a Marque pages Outils 7 e i Ax Le http fan google Fri b Geckozone Forum Geckozone Forum Mazilla Firebird Mozilla Firebird Help Google France Web Images Groupes Annuaire Actualit s Recherche Google J ai de la chance Rechercher dans Web Pages francophones Pages France Recherche avanc e Pr f rences Outils linguistiques Publicit Google Toolbar A propos de Google Google com in English 22004 Google Hombre de pages Web recens es par Google 4 285 199 774 Termin v gt t 5 http voila fr f Bienvenue sur Voila Mozilla Firebird Fichier Edition Affichage Aller Marque pages Outils 7 5 Geckozone 9 Forum Geckozone 9 Forum Mozilla Firebird h Mozilla Firebird Help Mozilla en fran ais VO il acf Mercredi 6 octobre 12 05 37 E Tout le Web Satan Votre recherche Saisissez un ou plusieurs mots Voila trouve pour vous PagesJaunes Auto Emploi Immo gt gt Aide Shopping Ala
27. ers la page d accueil du domaine Exemple de navigation Page d accueil r Domaine l Sitemap Domaine B NN Domaine C XN DL Aide O Accueil Domaine A N Bandeau de _ asa k liens vers les T accueil du d domaines N Th me San 3 i Actualite Th me 2 Bandeau de liens vers les th mes ENIT Cours IHM S9 147 Hesp Mar keting Resp Utilisabilit Resp Graphique Resp D veloppement Resp R dactionnel Intervenants multiples les objectifs du site a cible vis e es ser vices proposer les sc narios d utilisation du site le protocole de navigation les tests d utilisabilit la chartre graphique prendre en compte e l utilisabilit l image v hiculer viale resp marketing impl mentation la maintenance du site r f rencement r daction du contenu avec le resp marketing ENIT Cours IHM 9 148 Demarche de conception e les objectifs le contenu Ciblage en fonction des utilisateurs vis s l organisation des diff rentes rubriques les protocoles de navigation otructu ration e finaliser l impl mentation charte graphique interfaces prise en tenant compte de recommandations ergonomiques e recours ades tests d utilisabilit mentation tout au long de la conception et le plus t t possible avec aes utilisateurs novices correspondant la able us e tests d
28. ertinent pour ce public Le site est il int ressant et attirant De quel point de vue site permet il aux utilisateurs de r aliser toutes les t ches qu ils veulent accomplir Les visiteurs peuvent ils facilement accomplir ces t ches Le contenu et l organisation du site sont ils coh rents avec l objectif Les informations importantes sont elles faciles trouver Les informations pr sent es sont elles claires faciles comprendre e Le visiteur sait il toujours o il en est et comment faire pour aller ou il veut Le graphisme est il agr able ENIT Cours IHM S9 151 Structuration e L architecture de communication est tablie et d crit l ensemble de l information qui doit tre pr sente sur le site e reste organiser cette information pour la rendre accessible le plus ais ment possible e M thode du tri par carte Objectif regrouper les diff rentes pages du site en rubriques et sous rubriques par une m thode empirique D crire chaque grain d information qui correspondra une page sur le site par quelques mots cl s et une phrase de description Regroupement des cartes par similarit avec possibilit de faire ventuellement des groupes de groupes sous rubriques Plusieurs participants utilisateurs ou concepteurs Analyse comparative des diff rentes classifications obtenues oe limiter une cinquantaine de cartes cartes blanches ENIT Cours IHM S9 152 st
29. es m thode du think aloud e M thode simple et puissante Le concepteur se place derri re l utilisateur et encourage celui ci penser voix haute pendant qu il utilise le syst me Quelques r gles simples gt L utilisateur aura t mis en confiance ce n est pas l utilisateur qu on teste c est le syst me et les conditions du test lui sont expliqu es et justifi es Le concepteur ne donne pas d aides l utilisateur m me en cas de demandes mais note toutes les demandes et interrogations Le concepteur n intervient qu en cas d impasse grave probl me r soudre Cette d marche est auss utilisable pour tester la documentation fournie Approches empiriques vduation cooperative Technique pour identifier les points modifier pour rendre un prototype plus utilisable Quatre tapes Recruter des utilisateurs essayeurs D finir le public cible futurs utilisateurs ou profils types Choisir dans la cible Choisir et pr parer les activit s de test sp cifiques mais repr sentatives d terminer la dur e d activit et pr parer un descriptif d activit Organiser la session de test think aloud Enregistrements des r actions utilisateurs vid o audio fichier log Laisser agir parler les utilisateurs tests et questionner Analyser les r sultats Evaluation des utilisateurs tude du comportement de l utilisateur pour une meilleure prise en compte
30. f nares fr 23 CH INTERSPEECH 2004 ICSLP INTERSPEECH 2004 I 13 09 2004 09 59 lt ul gt a C Daul lt 3h skiar Th ce h aFh af 12 naf2nna B e mardi 5 octobre 2004 16h30 UFR Droit conomie et sciences sociales H Emmanuel Frenod ub De INTERSPEECH 2004 ICSLP Jean Yves Antoine univ ubs fr HABRY Christian Objet INTERSPEECH 2004 ICSLP Cal for Participations E LAlaccompagnement lorie u ee Pacth loria fr Call for Participations M O Z L adam iu vannes fr INTERSPEECH2004 ICSIP Adeline Nazarenko INTE 2 LBadeline nazarenko lipn th International Conference on Spoken Language Processing T h u n d rb rd Bladjela robert amp xlub inte L Baecl3 univ lile3 fr lt Roumiquiere CB hafhaf Mohamed aicha RO ITRAH 6 gt October 4 8 2004 International Convention Center Jeju Jeju Island Korea lt ENIT Cours IHM S9 59 Coh rence entre les ver sions Propri t s de la Barre des et du menu D marrer Barre des t ches Menu D marrer CO Menu D marrer Personnaliser S lectionnez ce style de menu pour un acc s rapide Internet la messagerie lectronique S lectionnez cette option pour utiliser le style de menus des pr c dentes versions de windows Appliquer MS Windows XP ENIT Cours IHM S9 60 Prise en compte du niveau d expertise faible ex
31. ible de 360 700 nanometres Fen tre de l audible 20 16000 cycles s Champ visuel ellipse illusions optico gom triques De la sensation la perception De la sensation la perception La fixation d un des deux points facilite l organisation de la figure ceil ou bouche Oeil de la jeune femme bouche de la vielle femme ENIT Cours IHM 59 Le sous systeme cognitif Vers le syst me cognitif autres sources filtre cognitif ana in a mn n i a s s n in Seed TAMAT TMA A NISI L iama kh lamia k h ama k k kam is ki se P PSP LP PP LP PP LUN CC LTD DT TR DT TR D pt A ue A ANN ANNE KKK TIG TAARA Hn S nef information DETIENE SN LRU brute non VAN mg leu m u e a Be Leier a Lt Leier ee a EIER LR LR LU E E Ta E MILL LLL ILLLLEELLLILLLLIELLLL re G O n n LI SC ACACA NSS NNN RE a mg ka ma e i Leier a Lt Leier eier pa ki FILI LEISTEN weise ka Pn k L kam Pn L k La Pn n m moire sensorielle visuelle lettre reconnue Z SENSATION PERCEPTION ENIT Cours IHM S9 35 Le sous systeme cognitif Architecture de la m moire humaine mod le simplifi d Atkinson et Schiffrin Stimulus l entr e Cowan 1988 rajoute deux composants sp cialis s stock stock phonologique visuel linguistique visuo spatial ENIT Cours IHM
32. ile apprendre aide Les experts un systeme rapide aide plus faible e Informer l utilisateur Gestion des erreurs e Deux objectifs minimiser les erreurs utilisateur faciliter leur recouvrement Type d erreurs 3 sources erreurs de perception erreurs du syst me cognitif erreurs du syst me moteur Prevention des erreurs e Erreurs de perception Eviter la notion de modes Utiliser les attributs visuels e Erreurs cognitives Assurer la consistance des abr viations et mn moniques Fournir des informations de contexte et tat Minimiser les calculs pour l utilisateur e Erreurs du syst me moteur Ne pas utiliser de combinaisons complexes de cl s D signer des actions diff rentes par des s quences nettement diff rentes Minimiser les besoins de frappe Tester obligatoire Recouvrement des erreurs e Choisir le type appropri de r ponse avertir pr venir ne rien faire corriger dialoguer interroger e Fournir le undo annuler e Pr voir le cancel de l op ration en cours Demander la confirmation pour les op rations destructrices e Afficher en surbrillance les localisations d erreur Fournir une aide intelligente i e adapt e l erreur e Avoir un acces rapide une aide contextuelle plus large Fournir des messages d erreurs de qualit descriptifs concis non critiques prescriptifs consistants grammaticalement sans point d exclamatio
33. interfaces Exigences des t ches homme machine selon B SENACH utilisateurs ENIT Cours IHM S9 Variables cibles e Mesures performance Taux d erreur Dur e d ex cution d une t che Dur e de lecture de la documentation Dur e d apprentissage Fonctions inutilis es Demandes d aide e Variables subjectives Confort d usage Suggestions de pr f rences Esth tique D cision d achat Facilit d apprentissage Approches d evaluation e Approches andaytiques Infor melles Formelles th oriques e Approches empiriques Approches analytiques informelles e Expertise le savoir de l expert modele de la bonne interface everyone is expert e Grille d valuation on fournit une liste des propri t s d une bonne interface aussi complete que possible et on note chacune des propri t s de la liste L valuateur note sur une chelle de mesure Exemple du Smith et Mosier 944 r gles e Approche heuristic evaluation Nielsen et Molich 1990 application de principes ou heuristiques guidelines lors de la conception et v rifications sur le prototype pas d implication priori d utilisateurs dans l valuation Evaluation heuristique J NIELSEN Usability Engneering Academic Press 1994 e Caract ristiques de base d utilisabilit gt Dialogue simple et naturel Parler le langage de l utilisateur Minimiser la charge m moire Consisstance Feedbac
34. ironnements Web hypertexte est centr sur la fa on naviguer de parcourir les entit s disponibles gt la page est le granule de base Les navigateurs proposent des fonctions avanc es facilitant le parcours boutons avant et arri re iste des pages vues bookmarks etc e Husgrande faiblesse des environnements graphiques Les notions de parcours et de navigation n existent pas Le seul l ment d orientation r side dans la barre de menu Seul point de d part et d aiguillage tout au long de la session Le mode evenementiel e Tr s important pour les environnements graphiques permet de rafraichir une partie d un didogue ou d une fen tre en r ponse une action de l utilisateur Quasi inexistant pour le Web gt ne se passe rien l int rieur d une page tant que l utilisateur ne clique pas sur un lien ou sur un bouton L ergonomie Web nemultiplie pas les changes entre client et ser veur d coupe le processus en unit atomique sous forme de pages R duction au minimum avec la combinaison HTML HTTP remplacement d une page par une nouvelle chaque appel HTTP Quelques possibilit s Enrichir la page HTML avec du code script Jscript ou JavaScript Pasd enrichissement partiel avec HTML 3 2 mais possible avec HTML 4 Le HTML dynamique DHTML peut tre une r ponse adapt e ce probl me Emploi de la technologie AJAX Le potentiel global Les
35. ks informatifs Sortie explicite Raccourcis Bons messages d erreurs Pr vention des erreurs Aide et documentation Approches analytiques formelles e Modeles pr dictifs des performances de l utilisateur Analyses des t ches Approches linguistiques Complexit cognitives e Mod les de qualit Approche cognitive Mod les mentaux Coh rence interne et externe Approche perceptive Complexit perceptive Qualit d affichage Modeles pr dictifs analyse des t ches e Bas sur le principe de rationalit rationnel bas sur 4 ensembles Buts un but d finit un tat recherch M thodes d crivent un proc d permettant d atteindre un but connaissance proc durale r sultat de l exp rience acquise i STEE actions l mentaires provoquant un changement tat R gles de s lection pour le choix entre m thodes e Modele d valuation de performance individuelle Mod lisation de comportement sans erreur e Modele lt keystroke gt Evaluation au niveau des actions physiques de l utilisateur Mod les pr dictifs Approche linguistique Ex ALG Action Language Grammar Reisner gt Pr sentation des actions de l utilisateur sous forme de grammaire Un ensemble de r gles de production du type FOUR effectuer telle action FAIFE telles op rations gt D finition des r ges d utilisation gt trois indices pour caract riser l interface La comple
36. la configuration du langage abr viations synonymes macros e Vocabulaire Utiliser le vocabulaire courant bien diff renti pas de jargon informaticien gt vocabulaire de l utilisateur Construire les abr viations selon une r gle simple et consistante Dans le manuel mots complets novices et non abr viations experts Les manipulations directes pr sentation e Avantages Facilit d apprentissage et de m morisation Saisie clavier peu importante Aspect direct et WYSIWYG Flexibilit et actions facilement r versibles Retours instantan s et contexte visibles e Inconv nients Difficult de tout repr senter par des ic nes Occupation importante de l cran e Conseill pour Attitude n gative motivation faible Faibles connaissances et exp riences Usage discr tionnaire fr quence faible Les manipulations directes caract ristiques e L utilisateur effectue des actions directement sur les objets visibles et non travers un langage repr sentation continue des objets utilisation de boutons presser ou d actions physiques pointage s lection au lieu d un langage de commande Op rations incr mentales r versibles avec effet visible imm diat L utilisateur manipule les objets sur l cran comme il manipule les objets similaires de son monde r el e Deux aspects importants Engagement motivation effet Hawthorne gt distance s mantique et articulatoire Le
37. langage naturel mais un langage issu de celui ci sp cialis langage op ratif O Les langages de commanaes pr sentation e Avantages Puissance et flexibilit contr le par utilisateur Efficacit rapidit Faible occupation de l cran Faible occupation des ressources e Inconv nients Apprentissage difficile Forte m morisation saisie importante par frappe clavier Risques importants d erreurs e Conseill pour gt Attitude positive motivation forte Exp riences et connaissances fortes t ches syst mes informatiques importantes peu structur es forte fr quence d utilisation Habitude frappe clavier Les langages de commandes Principes et r gles de conception e Aspects s mantiques Choisir entre langage riche ou langage minimal e Aspects syntaxiques Utiliser une syntaxe forme imp rative verbe objet Utiliser la ponctuation usuelle du langage courant gt Utiliser des pr positions plut t qu une grammare positionnelle Utiliser des parametres par d faut gt viter l usage fr quent de touches shift ou de touches de contr le Les langages de commandes Interaction et vocabulaire e Interaction Fournir des commandes ditables les d fauts apparents Fournir des retours d informations aide m moire et r f rence en ligne prompts gt Utiliser des cl s de fonction pour les commandes tr s utilis es Permettre
38. n ni mot hostile Documentation G n ralit s C est un l ment n cessaire mais non suffisant de l interface utilisateur souvent le premier l ment pris en compte pour juger d un syst me avant son achat documentation facile lire et compr hensible gt systeme facile utiliser lesr dacteurs impliqu s dans la conception de l interface notion de style guide pour la documentation e Deux types de documentation manuels utilisateurs aide en ligne M thodes de conception et d valuation ASPECTS METHODOLOGIQUES Les m thodes de conception et d vduation e Les m thodes de conception L vduation des interfaces e L vduation des utilisateurs Regles generales e S parer la conception de l application de la conception de l interface gt ex MVC e Prendre en compte les utilisateurs s Concevoir de mani re it rative Par une quipe pluridisciplinaire La conception des des IHM Tests fonctionnels Retour en cas d erreur Sp cifications internes Tests unitaires Conception d taill e Affichage des crans Choix des s quences Tests des images boutons Impl mentation ENIT Cours IHM 9 111 Les tests de conception MAQUETTAGE PROTOTYPFAGE PRODUIT FINI Test de familiarit Test de temps de r action Test d opinion Mesure D tection d impact de d fauts Banc d essai final ENIT Cours IHM
39. ne t che En consid rant successivement les 3 t ches propos es calculer le temps mis par un utilisateur n ayant pas d ja utilis un de es modeles pour allumer le br leur haut gauche R ponse question e Analyse de la compatibilit stimulus r ponse La configuration de gauche a la plus fable compatibilit gt boutons de commandes et br leurs dans des dispositions spatiales diff rentes Boutons de gauche br leurs de gauche MAIS n cessit d une indication suppl mentaire pour savoir lequel est en haut par exemple une tiquette gt lire analyser agir La configuration du milieu a une meilleure p que la pr c dente D calage boutons dispos s comme les br leurs Laconfiguration de droite est la meilleure Compatibilit vidente R ponse question 2 e Configuration de droite Perception de la plaque transiert de l info visuelle en m moire de travail et verbalisation br leur haut gauche gt gt tp D cision d ex cuter un mouvement des yeux vers les boutons gt tc Perception des boutons transfert et verbalisation du code verbal du bouton gt tp Comparaison des deux codes bouton et br leur gt tC D cision de r ponse soit oui allumer non retour en 5 tc Ex cution du mouvement gt tm Mouvement pour allumer gt tc Suite reponse question 2 e Les tapes 5 sont r p t es en moyenne 4 1 2 fois D o l estimation du temps configur
40. ognitif calqu sur le mod le des syst mes de production op re selon le cycle reconnaissance action e Selon les l ments saisis dans la STM o recherche des l ments actions associ s dans la LTM Gr ce au syst me moteur ces actions sont ex cut es modifiant ainsi le monde percu et donc la m moire court terme via le sous syst me sensoriel Le sous systeme moteur e Responsable des mouvements un mouvement est une suite de micro mouvements 0ms par micro mouvement en moyenne Deux types de mouvements mouvements fins d placements souris mouvements importants frappe clavier e Hr quents passages d un type a l autre concentration importante forte charge minimiser les mouvements des yeux organisation intelligente de l cran par rapport ala t che Limites du modele processeur humain Quelques l ments compl mentaires traitements parall les multimodal les contradictions internes l adaptation de l utilisateur ex clavier QW ERT Y la satisfaction l effet Hawthorne motivation les diff rences culturelles Ce qu il faut retenir tp gt temps de cycle processeur perceptif 100ms tc gt temps de cycle processeur cognitif 0ms tm gt temps de cycle processeur moteur 0ms Exemple d application du modele du processeur humain 1 Quel mod le de plaque est le plus ergonomique Pourquoi 2 Evaluation du temps n cessaire pour u
41. ours IHM 9 25 Interfaces a une dimension e Dialogue questions r ponses tr s structur Langages de commande forte contrainte Acces direct aux fonctionnalit s du syst me approche d informaticien contr le de l utilisateur par la machine Hfort de m morisation important Mise en uvre gt clavier Interfaces a deux dimensions e Dialogue style grille de saisie e Acc l rateur et navigation dans l cran e Notions de menus hi rarchiques et hi rarchie d crans e Clavier l ment de saisie essentiel Interfaces graphiques e WIMP Windows Ic nes Menus Pointing devices e Approche multifen trage e Manipulation directe et repr sentation graphique d objets e Feedback permanent vers l utilisateur Bas sur les objets de l utilisateur Notions de base MOD LISATION DU PROBLEME Le modele du processeur humain CARD MORAN NEW H L 1983 e L architecture du syst me cognitif gt repr sentation de l individu par avec les ordinateurs rois sous systemes essentiels sous systeme de perception sensoriel sous systeme cognitif SoUS syst me moteur Le modele d interaction reponse entr e calcul sortie pensee homme lecture ENIT Cours IHM S9 Le sous systeme sensoriel e L quipement sensoriel humain L information re ue diff re de l information r elle Fen tre du vis
42. pertise Novice et primo utilisateur anxieux rassurer pour faciliter P apprentissage et viter les m re j et 2 Aide sur Microsoft PowerPoint F1 Afficher le Compagnon Office gt Limiter le nombre d actions de concepts i Feedback d information 41505 Messages d erreur informatifs Activer le produt Manuel d utilisation intuitif tutoriel propos de Microsoft PowerPoint Aide contextuelle pu Utilisateur occasionnel connaissance enee ege globale du syst me mais difficult se rappeler la VE position des diff rentes fonctionnalit s S j n Consistance de l interface Pr vention des erreurs utilisateur explorateur Aide en ligne 4 4 4 Prise en compte du niveau d expertise gt forte Expert excellente connaissance du domaine de la t che du syst me et de son interface recherche avant tout l efficaat et la rapidit Haccourcis clavier Commande en ligne Cr ation de macros Edition Affichage Inbertion Format Annuler Police CTRL Z En R p ter Police CTRL Y C auper C TRE Copier Presse papiers Office Coller CTRL4 V Collage sp cial EFFacer Suppr S lectionner tout CTRL A Cupliquer CTRL D Supprimer la diapositive Rechercher CTRL F Remplacer CTRL H Ecole Nationale d Irg nieurt de Tanbesr race du chemi DEN E Direct gt Plan de site EN RELATIONS RELATION
43. rdre des choix conventionnels fr quence d utilisation ordre attendu cat gories s mantiques alphab tiques e S lection des choix e Navigation Les grilles de saisie pr sentation Avantages Facilit d apprentissage et de m morisation Simplicit d utilisation Possibilit de saisies de donn es tr s vari es Bonne utilisation de l espace cran Fourniture du contexte par les l gendes des zones remplir e Inconv nients Saisie Importante par frappe clavier avec navigation obligatoire Connaissances suppos es connues des formats d entr es e Conseill pour gt Attitude n gative et motivation faible mod r e Connaissances et exp riences mod r es fortes d autres syst mes de la t che et de l informatique Fr quence mod r e forte usage discr tionnaire d une t che tr s structuree Les grilles de saisie Principes et r gles de conception e Remplissage des champs Placer les labels gauche si alphab tiques droite si num riques D couper les listes longues par ligne blanche par 5 Distinguer les zones remplir par attribut visuel couleur inverse vid o soulignement e Format des entr es Tol rer diff rentes entr es si non ambigu t D couper les formats d entr e trop longs Proposer des valeurs par d faut e Organisation de la grille Partir du support papier s il existe sinon groupement M par importance rela
44. recte Blais d une repr sentation interm diation e Une repr sentation n a pas de sens en propre Codage d codage non universel Ne vaut que dans un r f rentiel R f rentiel 1 R f rentiel 2 cC K2 gt gt lypique d une communication Homme Machine Definition dune IHM des moyens et techniques permettant de franchir la discontinuit entre les r f rentiels humain et machine e Art de concevoir et de r aliser desrepr sentations pertinentes susceptibles d tre interpr t es de facon suffisamment voisines dans deux r f rentiels donn s Approche pluridisciplinaire informatique psychologie l mg ergonomie Y cognitive cognitive J l N T MM 7 r Ba mms ergonomie sociale ENIT Cours IHM 59 Un premier modele Du concepteur l utilisateur Ordinateur programme concepteur x Anticipe les choix de Utilisateur et utilisateur les code dans un programme choix ENIT Cours IHM 59 N LA Un autre modele environnement concepteur participation dans la conception description de la tache ENIT Cours IHM S9 24 Caracteristiques des evolutions ANN ES 80 lent exp riment faible en E S programmeur ANNEES 90 grand public non informaticien gt rapides gt nombreux dispositifs E S ind pendance Interface Appli ENIT C
45. ructuration suite W Organisation du contenu navigation ww Ne pas se limiter une structuration statique contenu pur Consid rer des contraintes de navigation crit res ergonomiques analogues ceux de la navigation par menus largeur d abord Minimiser la profondeur du site 3 4 niveaux maximum Optimiser le nombre de sous chemins par rubrique 8 sous rubriques maximum j Pr f rer une arborescence en arbre plut t qu en graphe Evolutivit gt amp atistiques d utilisation pages consult es liens suivis testsd utilisabilit grandeur nature pouvant conduire une refonte Mise jour r guli re du site fr quence accrue r f rencement ENIT Cours IHM 59 153 Ce qu il faut viter les standards respecter 1 CONSEILS ENIT Cours IHM S9 154 Conseils pratiques e Harmoniser le style Eviter d utiliser plus de trois couleurs diff rentes dans une page Choisir un chantillonnage de couleurs unique et limit pour l ensemble du site gt viter d utiliser de multiples polices de caract res e Optimiser la gestion des images Ne pas surcharger une page avec des images dans tous les sens surtout les images anim es viter de recourir des images d origines diverses et vari es et sen tenir aune seule biblioth que d images viter les frames ncompatibilit avec certains navigateurs Probl mes d impression gt Mauvaise gestion d
46. s clefs D ficient visuel importance des choix et tailles de fontes napte pour diff rentier les couleurs plus fr quent chez l homme que chez la femme e L environnement physique Le niveau de bruit affecte la capacit de concentration Le manque d intimit g n re le stress L insuffisance de lumi re de place de confort gt stress Plus de stress plus de fatigue gt d gradation de performance Principes ergonomiques 1 INTERFACESW EB ENIT Cours IHM S9 133 Du GUI au Web e Diff rence entre les deux types d applications gt Les applications gr aohiques se manipulent gt Les application Web se parcourent Les applications graphiques n cessitent un certain apprentissage gt Les applications Web normalement sont comprises des le d but Comparatif rapide La manipulation e res forte pour les environnements graphiques et les gestes possibles sont tr s nombreux Clic et double clic Glisser d placer avec ou sans combinaison de touche Processus objet action e Fable pour les environnements Web Simple clic gt Manipulation au clavier Utilisation limit e de la souris presque r duite au clic Les possibilit s sont r duites mais suffisantes Objets graphiques courants case cocher bouton radio liste d roulante etc Boutons d action et liens provoques un changement majeur de contexte La navigation e Essentielle pour les env
47. s manipulations directes 3 3 e Principes et r gles de conception Minimiser distance s mantique et articulatoire distance s mantique distance psychologique entre les intentions de l utilisateur et les objets et op rations manipulables de l interface distance articulatoire distance entre l action d sir e ou le r sultat obtenu et la forme en entr e ou sortie dans l interface distance en ex cution et valuation cf th orie de l action Fournir des retours sur position curseur s lection op r e Fournir une interface alternative pour les utilisateurs forte fr quence Concevoir des ic nes concrets familiers proche en distance articulatoire viter les d tails excessifs dans le dessin des ic nes Accompagner les ic nes de noms Limiter le nombre d ic nes diff rents 12 si possible Permettre la repr sentation par ic nes ou par texte selon le choix de l utilisateur Assurer l homog n it similarit d ic nes relations Organisation des ecrans 1 3 e Agencement g n ral Mettre toutes les informations essentielles pour la prise de d cison Assurer la consistance dans la localisation des types d informations de Se les items s mantiquement angle visuel e 5 L il balae l cran a partir du coin haut gauche dans le sens des aiguilles d une montre R partir de facon quilibr e les zones blanches et organiser verticalement les listes gt viter le tout majus
48. t d fini par Une charte graphique laquelle se conforme la totalit de l intranet Un syst me de navigation intuitif et coh rent Visualisation d une page Gaillard Renault 02 Un modele de type de page menu permettant une navigation ais e dans le site les informations n cessaires la pr sentation de la page ENTETE CORPS DE LA PAGE ou le corps de l information CONTENU SOMMAIRE ou MENU NOTE DE BAS DE PAGE les informations propres l auteur le cas ch ant des messages d indication une aide en ligne par exemple et ou quelques liens compl mentaires Les diff rents niveaux de navigation L accueil du site Point d entr e unique du site vers tous les domaines Le site doit contenir une carte du site sitemap accessible depuis la page d accueil et permettant une recherche d information rapide gt Il peut exister une aide ou un gossarre pour l ensemble du site navigation dans le site Un ou plusieurs bandeaux de navigation sur toutes les pages du site de facon uniforme et invariante Un lien vers la page d accueil sur toutes les pages du site La pag d accueil de chaque domaine contient des liens vers les th mes de celui ci vers les autres domaines du site e Lanavigation dans un domaine Un ou plusieurs bandeaux de navigation sur toutes les pages du domaine de facon permettre la navigation inter th me gt Toutes les pages du domaine ont un lien v
49. te des minuscules que des majuscules Estimation faite par Tullis colonnes de 30 35 car en 1988 De m me la lecture d un texte est am lior e si la longi d une ligne est sup rieure 26 caracteres longueur conseill e 50 55 caracteres ou doubles colonnes de 30 35 car ENIT Cours IHM 9 100 Menu caractere gras et inverse vid o lt a Fermer un texte crit en minuscules se lit beaucoup plus vite qu un texte en majuscules La vitesse de lecture en majuscules a t estim e 13 PS quen ceci sup rieure 26 caract res ane consdill e 50 55 caract res OU doubles colonnes 30 35 car Ne pas souligner de longs textes ceci r duit la lisibilit ENIT Cours IHM S9 101 Ce n est pas en mettant du rouge l vres un bull dog qu on a envie de l embrasser Conseils Ce n est pas en mettant du Fond monochromatique rouge l vres un bull texte couleur brillante dog qu on a envie de viter fonds marrons ou verts E ZEISS l embrasser contraste lev en brillance et saturation Ce n est pas en mettant du rouge l vres un bull dog qu on a envie de l embrasser Cours IHM 59 102 ENIT Temps de reponse e Vitesse d affichage adapt e la t che Temps de r ponse pour les tapes interm diaires d un processus 2 secondes e Variation des temps de r ponse moins de 50 autour de cette moyenne Les novices syst me lent mais fac
50. tive d utilisation ou ordre amilier gt viter la m morisation d un cran un autre D finir la taille des groupes angle vision 5 Les grilles de saisie utilisations e Entr e des donn es Rendre simples les entr es tres utilis es gt L utilisateur sp cifie l unit de mesure mais n effectue pas les conversions Codes et abr viations familiers Qarder les champs les plus courts possibles viter les passages minuscules majuscules les combinaisons lettres chiffres les remplissages de Z ros e Navigation Positionner curseur dans la zone la plus probable de remplissage Tol rer les mouvements avant arri re entre les champs et dans les champs Num roter avec titre commun si plusieurs crans n cessaires e Traitement des erreurs gt Utiliser la surbrillance des zones d erreurs avec messages Tol rer l dition dans les champs insert supprimer overstrike Les langages e Langage contraintes fortes langage de programmation ou de commande e Langage naturel probl me d ambiguit pour la machine mais universalit et absence d apprentissage e Langage restreint les utilisateurs restreignent leur langage m me en l absence de contraintes nonc es un langage restreint bien concu donne de meilleurs r sultats restrictions de niveau lexical syntaxique s mantiques et conceptuelles dans le cadre d activit s particuli res le langage utilis n est pas le
51. une Top Voila fr Guide Web Itin raires amp Plans Voyages gt Vendanges en f te Cin ma AM Mobiles Logith que Famille et G n alogie Encyclop die Communiquer B L essentiel aujourd hui C E mail Q Derni re minute t Chat 9124 connect s Intel pourrait retirer ses budgets publicitaires Havas PC Pavilion A605 fr avec cran 15 TFT et imprimante multifonctions Le messager Pages perso M Van Roekeghem attend une norme mobilisation Rencontres des services de la Cnam Traducteur La Cnam veut contr ler syst matiquement les arr ts Clubs maladie de moyenne dur e N Le journal M t o d gt L i Chateaudun 7 image du jour Qe Click here to get the plugin Autres villes ila eBay fr Achetez vendez En Voila gt Toutle sport gt Programmes Tele Chaque jour des milliers de D Voila en page d accueil Football Zebina N y cL dl Dos Hos offres sejours Termin www e lederc com ENIT Cours IHM S9 68 Compatibilit e Crit re essentiel conditionnant la pertinence de tous les autres e Niveau produit Les utilisateurs connaissent d autres produits Exploiter cette connaissance Dans une m me compagnie avoir un style d interface utilisateur e Niveau t che en termes de t che utilisateur et faciliter le passage d une t che une autre int r t du multi fen trage
52. xit du langage nombre d actions pour atteindre un but La simplicit des proc dures longueur des s quences pour une t che donn e La coh rence de structures nombre de r gles non n cessaires et nombre de r gles pour des s quences terminales similaires Modeles pr dictifs complexit cognitive e Nombre tota de reges de production pour mod liser la t che e Nombre de productions d clench es e Nombre maximal de buts en m moire pour une fonction donn e e Piles de buts maintenues en m moire de travail gt pas de prise en compte des diff rentes exp riences des utilisateurs Approches empiriques e Utilisateurs impliqu s dans l valuation e Contr le posteriori des choix Andyse de donn es comportementales DIAGNOSTICS lt TESTS de D USAGE CONCEPTION Approches empiriques diagnostic d usage e Analyse des incidents critiques Recueil syst matique des dysfonctionnements nterview discours du sujet libre dirig semi dirig Observation comportements observables gt Insuffisamment pr cis pour valuer pr cis ment la qualit ergonomique d une interface Questionnaires V rifier la satisfaction des besoins utilisateurs Appr ciations subjectives possibles Q ouvertes Construction difficile Informations non quantifi es e Mouchards lectroniques Courant en laboratoire Biais Si connu D ontologie sinon Approches empiriqu
Download Pdf Manuals
Related Search