Les étapes clés de la conception ergonomique des sites Web
Contents
1. S minaire INRA Christian Bastien Juin 2002 Exemple d ebauche de maquette papier ie ate MEA d Lei m PE P ers js E sel RETTEN T 5 T da P m 4 i i D L z x Kr Ab Jn E KI GE SR d G at EHRE MCCC P HE 1 d dii me d eels bee d agri can Le nti pa ENSE ween e pm qn B urn cm P We t Ls d EP MU egy p Bad eng ze Pre a io 0 eas UM za dat Wat s im i i ee nn anal W A Le SE S minaire INRA Christian Bastien Juin 2002 E RN a gn gn LR vn a ER epi keen paian m SET EE ee SECH ee aH Ge Wi Techniques et methodes d evaluation S minaire INRA Christian Bastien Juin 2002 Les methodes d evaluation e M thodes requ rant la participation d utilisateurs Tests d utilisation Les questionnaires entretiens verbalisations cons cutives etc e M thodes s appliquant aux caract ristiques de l interface M thodes analytiques L valuation experte M thodes d inspection Le cognitive Walkthrough e L valuation de la conformit des recommandations L valuation de la conformit des dimensions ergonomiques Les outils d aide l valuation e L valuation automatique Les2. e Adaptation aux diff rentes plates formes existantes insertion de code Ces divers outils montrent que certains crit res l mentaires se pr tent assez bien une valuation automatique N cessit de articuler des outils de description de t ches et a des outils de description de l interface Difficult d valuer certains crit res l mentaires S minaire INRA Christian Bastien Juin 2002 34 L evaluation automatique e Les outils de validation HI ML WebTechs W3C HTML Validation Service Dr Watson Doctor HTML Les outils d valuation ergonomique de sites Web Bobby WebMetrics Tool Suite Les log files S minaire INRA Christian Bastien Juin 2002 Les outils de validation HTML Dr Watson URL optional eee Y Analyze HTML syntax Y Verity regular links 3 LI Verify image links 1 Generate word counts f O Spell check non HTML text Y Compute estimated download speeds 7 LI Check search engine compatibility LJ Check site link popularity Proceed with diagnosis 1 Browser extensions allowed Mone Metscape 4x Microsomle 4 x HTML Analysis depth Y Level af HTML standards enforcement Lax Normal 3 Strict 7 L Include style warnings S minaire INRA Christian Bastien Juin 2002 36 Les outils de validation HTML Cheching server response Server response Dr Watson httpzivww comitis comli
3. was redirected to http www comitis comilli Analyzing HTML Analyzing HTML syntax avntax and style analysis CC KI OD fhe line s takes vou fo that line In the code line 24 ling FAT 3 31 line 3 35 line 40 line 45 line 3 55 line 60 line 3 51 line 91 line 337 unmatched no matching P seen unmatched F no matching P seers illegal value far BGCOLOR attribute af td ifr efde ernpty container element empty container element empty container element illegal value far BGCOLOR attribute af td ifr EAE legal value for BGCOLOR attribute af td ifr etde SITR an line 66 seems ta overlap TO opened an line B8 illegal value for BGCOLOR attribute af td ifr etde zA cannot be nested IA nat yet seen far amp an line FB S minaire INRA Christian Bastien Juin 2002 37 Les outils de validation HTML Dr Watson 4 lt p gt Le Livre International b font p gt 3 lt a href cat default asp gt 8 lt pXimg src images logolli gif JF alt Logo Le Livre International width 366 height 188 a p gt d 2 lt table barder B 98 cellspacing 8 gt Ju lt tr gt K lt td bgcalor f efde font K face llerdana Arial Helvetica ul FT lt li gt Vous vivez lt bx lt u hors de France lt ux lt b gt et vous KC aimez les livres les vid eacu
4. 1986 Guidelines for designing user interface software report no ESD TR 86 278 Mitre corporation e Vanderdonckt J 1995 Guide ergonomique des interfaces homme machine Namur belgique presses universitaires de namur Listes de contr le e Ravden S J amp Johnson 1 1989 Evaluating usability of human computer interfaces A practical method Chichester england john wiley amp sons S minaire INRA Christian Bastien Juin 2002 28 Les connaissances ENTREE DE DONNEES Formats des donnees 1 4 Delimiter les champs d entree de donnees Afin de d limiter clairement chaque champ de donn es afficher des caract res Sp ciaux autres formes de mise en vidence EXEMPLE Un trait de soulignement peut tre utilis cette fin voire un trait discontinu permettant d indiquer le nombre de symboles requis l entr e tel que bon Entrer votre code mauvais Entrer votre code EXEMPLE Voir la copie d cran la fin de cette section COMMENTAIRE Une telle incitation permet de r duire les erreurs lors de la saisie de donn es par l utilisateur R F RENCE BB 2 2 1 EG 6 3 6 3 1 MS 5 15 4 3 4 PR 4 8 1 Savage Habinek et Blackstad 1982 VOIR AUSSI 1 0 6 2 2 2 4 4 15 S minaire INRA Christian Bastien Juin 2002 29 Les connaissances e Normes ex AFNOR ISO DIN etc e Heuristiques Molich R amp Nielsen J 1990 march Imp
5. Les etapes cles de la conception ergonomique des sites Web Christian Bastien Universit Rene Descartes Paris V Laboratoire d Ergonomie Informatique 45 rue des Saints Peres 75270 Paris cedex 06 Christian Bastien ergo info univ parisd fr S minaire INRA Christian Bastien Juin 2002 Trois aspects importants de ergonomie du Web e Adequation aux caract ristiques des utilisateurs e Adequation aux caract ristiques des t ches e Adequation au contexte Mat riel logiciel e Prise en compte des recommandations ergonomiques pour la conception S minaire INRA Christian Bastien Juin 2002 Les attributs de l utilisabilit Facilit d apprentissage Efficacit d utilisation Facilite de memorisation Utilisation sans erreurs Satisfaction L utilite S minaire INRA Christian Bastien Juin 2002 Les etapes cles C2 4 5 Conception Conception Production Lancement fonctionnelle d taill e Analyse des besoins S minaire INRA Christian Bastien Juin 2002 Les methodes cles Analyse des besoins Benchmarking Audits entretiens Questionnaires Maquettage Analyse d Analyse prototypage des usages des taches Tests Architecture de utilisateurs l information Focus Groups Assurance qualit Tests utilisateurs Tests sur le terrain Maintenance Lancement
6. log files S minaire INRA Christian Bastien Juin 2002 8 Methodes requerant la participation d utilisateurs Les tests d utilisation Exp rimentation Observation Mesures psychophysiologiques Outils automatiques d enregistrement des interactions S minaire INRA Christian Bastien Juin 2002 S minaire INRA Christian Bastien Juin 2002 Methodes requerant la participation d utilisateurs Les questionnaires Satisfaction pr f rences etc e SUS System Usability Scale QUIS Generic User Interface Questionnaire PUTQ Perdue Usability Testing Questionnaire WAMMI Website analysis and measurement inventory S minaire INRA Christian Bastien Juin 2002 Methodes requerant la participation d utilisateurs e Le SUS System Usability Scale J aimerais utiliser ce syst mes fr quemment Je trouve ce syst me inutilement complexe Je pensais que ce syst mes tait facile utiliser J aurais besoin d un support technique pour pouvoir utiliser ce syst me Les diff rentes fonctionnalit s de ce syst mes sont bien int gr es Ce systeme est truff d incoh rences Le grand public peut apprendre utiliser ce syst me tres rapidement Ce systeme est lourd a utiliser J ai confiance en ce syst me J ai du apprendre beaucoup choses avant de pouvoir utiliser le syst me S minaire INRA Christian Bastien Juin 2002 12 Methodes requerant la pa
7. end tag for element which is not open explanation Error at line 6 lt pXimg src images lIagaolli gif t document type does not allow element P here Error at line 27 alt Logo Le Livre International width 366 height 188 a p gt there is no attribute WIDTH 1 explanation S minaire INRA Christian Bastien Juin 2002 41 Les outils d evaluation ergonomique de sites Web Check one page Fill in the form below with the URL af the web page that you want Bobby to examine and press the Submit Button For accessibility and tag compatibility validation with browser specifications other than the default HTML AU make a selection from the drop down menu For multiple selections go to the Advanced page URL http www comitis com ili Evaluation Criteria HTML 4 0 a Text Only Output S minaire INRA Christian Bastien Juin 2002 42 Les outils d evaluation ergonomique de sites Web Click on the error messages below to find out more information Accessibility Errors APPROVED Congratulations This web page contains no accessibility errors It hone af the web pages an your site contain accessibility errors vou are entitled to use the Bobby Approved icon Accessibility Recommendations This section contains a list of accessibility recommendations that you should fix in order to Improve accessibility Accessibility recommendations do nat affect the Bobby Approved rat
8. ges home asp C Sites web Microsoft Ca MSN Web Sites 9 Apple E INRIA anb mb51H a m z E Sab ap mg yuseo ARTO D KEG GIR Presentation du site 5 ans le domaine des ouvelles Technologies de l Infarmation et de la Communication on enten 1 D le d ine des NTIC les Technologies de tde lac ication tend Presentation du site parler de plus en plus souvent d ergonomie et des ergonomes L emploi de ces termes est souvent Les articles et tudes restrictif et galvaud Bien que l int r t de ce nouveau m tier soit reconnu ce dernier est encore peu ou mal connu Bibliographie Liens utiles L objectif de ce site au travers de nos publications et r sultats d tudes est donc De renseigner les lecteurs sur ce domaine en mergence dans le domaine des NTIC Contactez nous a De discuter de th mes relatifs l ergonomie de ces NTIC ex sites Web t l phonie mobile et toute nouvelle technologie etc 1 Le saviez Yous Christian Bastien Dernier article publi Psychologie cognitive ergonomie et conception des logicieE interactifs et du Web 2 amp me partie T 13 07 2004 Dans l article pr c dent nous avons abord la m moire et quelques lois de la perception visuelle Ce nouvel article a pour objet l usage de la couleur dans la conception des interfaces Recevez nos articles Ell P venir ETE Retrouvez le prochain article D but septembre Psychologie cognitive er
9. gonomie et conception des logiciels interactifs et du Web 3 me partie Lire la suite L quipe de l ergqoname a Christian Bastien pour canzulter son CH Remy Rubio pour consulter son CH cone Internet S minaire INRA Christian Bastien Juin 2002 47 Pour en savoir davantage e Sites d int r t http www usableweb com http www usabilitynet org http www useit com possibilit de recevoir une newsletter http www iarchitect com mshame htm Hall of shame http www hcibib org base de donn es d articles ouvrages sur http jthom best vwh net usability usability toolbox e Listes de discussion et communaut s http usableweb com topics 000656 0 0 htmI http www upassoc org html utest html http listes cru fr wws info ergoihm S minaire INRA Christian Bastien Juin 2002 48
10. ing 1 Use the LANG attribute ta identity the language af the text 2 If passible avoid using tables to farmat text documents in columns 3 Specifi a logical tab order among form controls Lines 83 84 value DEMANDE DINFO SUR MAT sp sinputteipe submit maj value Etre informe des mises a jour font p gt S minaire INRA Christian Bastien Juin 2002 43 Les outils d evaluation ergonomique de sites Web Copyright 1906 1098 CAST Center bor Applied Special Technology a Browser Compatibility Errors The following section contains 1 browser compatibility error Browser compatibility errors help to determine when HTML tags and their attributes are not compatible with certain web browsers or HTML specifications Problems here da nat mean that this page is necessarily inaccessible Browser compatibility errors do nat atfect the accessibility rating of 1 Attribute BGCOLOR in element TD must be assigned color for browser si HTML 4 0 Line 31 lt td bgcalar trefde fant Line 55 td aliqn z RIGHT Bacalarz f etde fant Line 60 td bgcolor Tretde fant Line 81 td bgcolor Tretde stont face verdana Arial Helvetica sizez 2 gt Line 84 td bgcolor Tretde tant face verdana Arial Helvetica size 4 gt Line 87 td bgcolor Tretde tant face verdana Arial Helvetica size 2 Line 101 td bacalar f efde 7 tant face verdana Arial Helvetica s
11. ize gt Line 104 td bacalar f efde 7 trant face verdana Arial Helvetica size Z 7 S minaire INRA Christian Bastien Juin 2002 44 Les outils d evaluation ergonomique de sites Web Download Time The following three column table gives download time statistics forthe Images applets and objects an this page The first column contains the URL af each item the second column the item size in Kilobytes and the third column the approximate download time for each item when using a 20 000 baud modem Atthe end ofthe repart an arbitrary delay of 0 5 seconds is added far each file ta accaunt far slaw dawrs caused by HTTP connection times URL Size Time Seconds http ar comitis comilli 5 28 K 1 47 imagesilogolli dif 14 38 K 3 99 Total 19 65 K 5 4B HTTP Request Delays 1 00 Total Delays 6 46 Bobby finished S minaire INRA Christian Bastien Juin 2002 45 Les log files e Informations enregistr es Adresse IP date et heure de la connexion nom du fichier requis r sultat de la requ te nombre d octets envoy s L analyse Les avantages Les limites S minaire INRA Christian Bastien Juin 2002 Pr c dente Suivante Arr ter Actualiser D marrage Pour en savoir davantage www lergonome org T lergonome com Le portail de l ergonomie Pr EE e amp w Remplissage automatique Imprimer Courrier Adresse O http uww lergonome org de pa
12. logie du syst me l explication d un terme en entrant de dialogue le mot cl appropri Ainsi apr s avoir entr le terme changement d chelle l utilisateur obtient une explication de la t che correspondante avec r f rence au programme concern et aux informations suppl mentaires se trouvant dans le manuel d utilisation S minaire INRA Christian Bastien Juin 2002 32 Les Criteres Ergonomiques 1 Guidage 1 1 Incitation 1 2 Gr Dist entre items 1 2 1 par la localisation 1 2 2 par le format 1 3 Feedback imm diat 1 4 Lisibilit 2 Charge de travail 2 1 Bri vet 2 1 1 Concision 2 1 2 Actions minimales 2 2 Densit informationnelle 3 Contr le explicite 3 1 Actions explicites 3 2 Contr le utilisateur Adaptabilit 4 1 Flexibilit 4 2 Prise en compte de l exp rience utilisateur Gestion des erreurs 5 1 Protection contre les erreurs 5 2 Qualit des messages d erreur 5 3 Correction des erreurs Homogeneite Coherence Signifiance des codes et denominations Compatibilite S minaire INRA Christian Bastien Juin 2002 33 Les outils d aide l valuation e Remarques valuation restreinte des aspects de la qualit ergonomique e Techniques compl mentaires l inspection de la qualit ergonomique des syst mes interactifs et aux tests d utilisation Tres utiles pour valuer la coherence Techniques d licates
13. nformit des normes standards inspections S minaire INRA Christian Bastien Juin 2002 21 Les methodes d inspection Le cognitive walkthrough Objectif valuer la facilit d apprentissage par l exploration d un syst me interactif N cessite Description d taill e de l interface Description de la t che r aliser Caract ristiques des utilisateurs e Description du contexte d utilisation Description pr cise de la s quence des actions effectuer S minaire INRA Christian Bastien Juin 2002 Les methodes d inspection Le cognitive walkthrough D roulement Pour chacune des actions s interroger sur ce que l utilisateur serait tent de faire Les utilisateurs vont ils tenter d ex cuter les actions appropri es Les utilisateurs sauront ils que les actions appropri es sont permises ou disponibles Les utilisateurs vont ils associer aux effets souhait s les actions appropri es Lorsque les actions seront effectu es l utilisateur pourra t il se rendre compte des traitements en cours S minaire INRA Christian Bastien Juin 2002 23 Les methodes d inspection L evaluation de la conformite a des recommandations Consiste juger la conformit des elements de l interface aux recommandations ergonomiques ou de style contenues dans divers types de recueils S minaire INRA Christian Bastien Juin 2002 Les co
14. nnaissances Principes Dimensions Criteres Normes Recommandations Guides de conception Regles de conception Guides de style algorithmes de conception Recueils de recommandations S minaire INRA Christian Bastien Juin 2002 25 Les connaissances e Principes Enonc s g n raux s appuyant sur des donn es exp rimentales relatives a la facon dont les utilisateurs apprennent et travaillent Be consistent in your choice of words formats graphics and procedures Recommandations nonc s plus sp cifiques Be consistent in the way you have users leave every menu S minaire INRA Christian Bastien Juin 2002 26 Les connaissances Les r gles de conception Exemples tirees de Smith 1988 1 Put date time at right in line 1 Put display title centered in line 2 For multipage display put PAGE x of y at right in line 3 Put body of display in line 4 19 Put advisory error messages at left in line 20 Put user promts at left in line 21 Put user command entry in line 22 CON OO FP C5 N Put frame ID at left in line 1 S minaire INRA Christian Bastien Juin 2002 2 Les connaissances Connaissances ergonomiques disponibles Guides et guides de style e Mayhew D J 1992 Principles and guidelines in software user interface Englewood cliffs prentice hall Recueil de recommandations e Smith S L amp Mosier J N
15. nt la participation d utilisateurs Le PUTQ Perdue Usability Testing Questionnaire 100 questions group es en 8 partie e Compatibilit e Coherence Flexibilit Facilit d apprentissage e Actions minimales e Charge mn sique minimale e Limites perceptives e Guidage utilisateur S minaire INRA Christian Bastien Juin 2002 16 Les questionnaires et les entretiens Le WAMMI Website analysis and measurement inventory WAMMI Please press the VVAMMI button and WAMMI help us improve the design of our web site Strongly Strongly Agree Disagree statements 1 10 of 20 s See There is lot af interesting information on this web site OOOO feelin control when l m using this web site d car quickly find what I want an this web site Do you have any additional comments about the web site s ease of use If vou are finished please press the SUBMIT Button fo send VOLF responses S minaire INRA Christian Bastien Juin 2002 17 Methodes requerant la participation d utilisateurs e Remarques Les tests d utilisation Observation in situ intrusive Observation libre aucune trace de l activit Les questionnaires et les entretiens e N alt rent aucunement les performances Verbalisations cons cutives avec ou sans traces de l activit Disponibilit des utilisateurs Appareillage co teux et complexe S minaire INRA Christian Bastien Juin 2002 Me
16. roving a human computer dialogue Communications of the ACM p 338 348 Nielsen J 1994 Enhancing the explanatory power of usability heuristics In Adelson S Dumais amp J Olson ed Proceedings of ACM CHI 94 conference on human factors computing systems 1 pp 152 158 Boston massachusetts ACM Crit res ergonomiques Bastien J M C amp Scapin D L 1993 Ergonomic criteria for the evaluation of human computer interfaces Technical report No 156 Institut National de Recherche en Informatique et en Automatique S minaire INRA Christian Bastien Juin 2002 30 Les connaissances Exemple de principe tir de la norme ISO 9241 10 3 2 Caractere autodescriptif Description Un dialogue est autodescriptif dans la mesure ou chaque tape du dialogue est imm diatement comprehensible au niveau du retour d information du syst me ou est expliqu e a l utilisateur qui demande l information correspondante S minaire INRA Christian Bastien Juin 2002 31 Les connaissances 3 2 Caractere autodescriptif Norme ISO 9241 10 Application Exemple e convient que la terminologie Les termes techniques utilises employee dans le feed back ou dans le dialogue sont les termes dans les explications soit effectivement utilises dans le coherente et corresponde a domaine d application sp cifique l environnement de la tache plut t De plus l utilisateur peut avoir qu la techno
17. rticipation d utilisateurs Le QUIS Generic User Interface Questionnaire Apprentissage L apprentissage difficile facile M morisation des noms et actions des commandes difficile facile L exploration difficile facile Les t ches peuvent tre accomplies sans d tours jamais toujours La documentation claire obscure Les messages d erreurs utiles inutiles S minaire INRA Christian Bastien Juin 2002 13 Methodes requerant la participation d utilisateurs Le QUIS Terminologie Termes utilises de maniere incoherente coherente Position des messages a incoherente coherente Li e a la t che en cours jamais toujours Les messages d incitation confus clairs Le feedback jamais toujours Messages d erreurs inutiles utiles S minaire INRA Christian Bastien Juin 2002 14 Methodes requerant la participation d utilisateurs Le QUIS Ecrans e L organisation des informations confuse tres claire La s quence des crans confuse tres claire e Les caract res a l cran difficiles lire facile a lire Les mises en vidence simplifient les t ches pas du tout beaucoup Lesysteme L exp rience des utilisateurs est prise en compte jamais toujours La vitesse des traitements trop lente assez rapide e La fid lit La correction des erreurs difficile facile S minaire INRA Christian Bastien Juin 2002 15 Methodes requera
18. te os les C 0 ou les C D Rom frantrccedil ais lt li gt K lt Hix lt font size 1 gt Le Livre Internationa font est FF fait pour vous nous vous proposons un moyen FF simple et efficace de recevoir tous ces articles S minaire INRA Christian Bastien Juin 2002 38 Les outils de validation HTML WSC HTML Validation Service Validate Documents by URI Enter the location af a document you would like validated Location http comitis com Ii Include Vweblint results run VWeblintin pedantic made Show Source input Show an outline af this document Show parse tree dont show attributes in the parse tree Submitthis URI far validation Reset this form S minaire INRA Christian Bastien Juin 2002 39 Les outils de validation HTML W3C WSC HTML Validation Service Results Here are the Wac HTML Validation Service results far the document at URI http Jump ta WWeblint Results Outline Source Listing ar Parse Tree HTML Validation Results Below are the results of attempting ta parse this document with an SGML parser Version of HTML selected HTML 2 0 S minaire INRA Christian Bastien Juin 2002 40 Les outils de validation HTML WAT Error at line 24 lt p gt le Livre InternationaK bx lt fontx lt p gt t document type does not allow element P here Error at line 24 lt p gt Le Livre Internationak bx font p gt t
19. thodes s appliquant aux caract ristiques de l interface e M thodes s appliquant aux caract ristiques de l interface M thodes analytiques L valuation experte M thodes d inspection valuations automatiques S minaire INRA Christian Bastien Juin 2002 Methodes s appliquant aux caract ristiques de l interface L valuation experte e Informelle e Comparaison des performances attributs et caract ristiques d un systeme specification maquette prototype a des normes recommandations etc Peut tre subjective formation exp rience etc Relativement peu co teuses e Rapides Cependant r s variables nombre et type de d fauts d tect es strat gies S minaire INRA Christian Bastien Juin 2002 20 Methodes s appliquant aux caract ristiques de l interface Les m thodes d inspection Ensemble d approches faisant appel aux jugements d valuateurs experts ou non en utilisabilite Visent g n ralement la d tection des aspects de l interface pouvant entrainer des difficult s d utilisation ou alourdir le travail des utilisateurs e oe distinguent les unes des autres par la fa on avec laquelle les jugements sont d riv s et par les crit res d valuation la base de leurs jugements L inspection cognitive cognitive walkthrough L analyse de la conformit un ensemble de recommandations guidelines reviews L analyse de la co
Download Pdf Manuals
Related Search