TUDES

ERGONOMIE DU LOGICIEL ET DESIGN WEB

Le manuel des interfaces utilisateur

DVELOPPEMENT

Jean-Franois Nogier

4e dition

ERGONOMIE DU LOGICIEL ET DESIGN WEB

Le manuel des interfaces utilisateur

Russir son site Web en 60 fiches Jean-Marc Hardy, Gaetano Palermo 160 pages Dunod, 2008.

Guide pratique de cration numrique Jason Simmons 256 pages Dunod, 2008.

ERGONOMIE DU LOGICIEL ET DESIGN WEB

Le manuel des interfaces utilisateur Jean-Franois Nogier
Consultant

4e dition

Illustration de couverture : Lac Stuckely Julien Bastide - Fotolia.com

Dunod, Paris, 2001, 2003, 2005, 2008 ISBN 978-2-10-053749-5

Table des matires

Table des matires

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii Chapitre 1 Lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.1 Agencement de lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Graphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2.1 1.2.2 1.2.3 1.2.4 Couleur . . . . . . . . . . . . Polices de caractres . . . . . . Icnes . . . . . . . . . . . . . Techniques de mise en vidence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 6

. 6 . 14 . 15 . 20

1.3 Langage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 1.3.1 Libell des commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 1.3.2 Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Chapitre 2 Le dialogue homme-machine . . . . . . . . . . . . . . . . . . . . . 37 2.1 Organisation du dialogue. . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 2.2 Conception des fentres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 Multi-fentrage . . . . . Fentres de dialogue . . . Boutons . . . . . . . . . Composants de slection . Champs de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 44 52 53 54

2.3 Menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 2.3.1 Avantages et inconvnients . . . . . . . . . . . . . . . . . . . . . . . . 59

vi

Ergonomie du logiciel et design web

2.3.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3.3 Menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.4 Touches de fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.4.1 Avantages et inconvnients . . . . . . . . . . . . . . . . . . . . . . . . 2.4.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.5 Manipulation directe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.5.1 Avantages et inconvnients . . . . . . . . . . . . . . . . . . . . . . . . 2.5.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.5.3 Souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.6 Temps de rponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapitre 3 Les erreurs et laide en ligne . . . . . . . . . . . . . . . . . . . . 3.1 Traitement des erreurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 3.1.8 Erreurs dintention . . Erreurs dexcution . . Erreurs perceptives . . Erreurs cognitives . . . Erreurs motrices . . . Prvention des erreurs Correction des erreurs Messages derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60 62 64 64 64 65 66 67 71 73 77 78 78 79 80 81 82 83 85 86 90 91 92 96 99

3.2 Aide en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.1 Diffrentes aides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3 Linterface idale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapitre 4 Dfinition et ciblage du site . . . . . . . . . . . . . . . . . . . . .

4.1 Pourquoi faire des sites web faciles utiliser ? . . . . . . . . . . . . . . . . 100 4.2 Les affres de la conception web . . . . . . . . . . . . . . . . . . . . . . . . 103 4.2.1 Une quipe pluridisciplinaire . . . . . . . . . . . . . . . . . . . . . . . 103 4.2.2 Lutilisateur moyen nexiste pas. . . . . . . . . . . . . . . . . . . . . . 105 4.3 Tester lergonomie du site . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 4.3.1 Test de perception . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Table des matires

vii

4.3.2 Test dutilisabilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 4.4 Identication du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 4.4.1 Ciblage du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 4.4.2 Analyse de la concurrence . . . . . . . . . . . . . . . . . . . . . . . . . 110 4.4.3 Architecture de communication . . . . . . . . . . . . . . . . . . . . . . 111 4.5 Structure du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 4.5.1 Tri par carte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 4.5.2 Organisation du contenu. . . . . . . . . . . . . . . . . . . . . . . . . . 115 4.6 Lutilisabilit du site au quotidien . . . . . . . . . . . . . . . . . . . . . . . 117 4.7 Lergonomie des intranets . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 4.7.1 Les enjeux de lintranet . . . . . . . . . . . . . . . . . . . . . . . . . . 122 4.7.2 La navigation : principale difficult des intranets . . . . . . . . . . . . . . 123 4.7.3 Le moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Chapitre 5 La navigation web . . . . . . . . . . . . . . . . . . . . . . . . . . 129 5.1 Conception du systme de navigation . . . . . . . . . . . . . . . . . . . . . 130 5.1.1 Principes ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . 130 5.1.2 La rgle des 3 clics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 5.1.3 Les lments du systme de navigation . . . . . . . . . . . . . . . . . . . 136 5.2 Barre de navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 5.2.1 5.2.2 5.2.3 5.2.4 5.2.5 Menu droulant . . . . Les onglets . . . . . . . Liste de slection . . . . Boutons de navigation . Rollover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 145 147 148 150

5.3 Chemin de progression (ou l dAriane). . . . . . . . . . . . . . . . . . . . 152 5.4 Liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 5.5 Vrier la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Chapitre 6 La page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 6.1 Organisation visuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 6.1.1 Structuration de linformation . . . . . . . . . . . . . . . . . . . . . . . 166

viii Ergonomie du logiciel et design web

6.1.2 Longueur de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 6.1.3 Construction de la page. . . . . . . . . . . . . . . . . . . . . . . . . . 171 6.2 Page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 6.3 Graphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 6.3.1 6.3.2 6.3.3 6.3.4 Images . . . . . . Animations . . . . Format des images Palette web-safe et . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . profondeur graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 184 186 188

6.4 Le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 6.4.1 Lcriture web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 6.4.2 Liste puces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 6.4.3 Lisibilit des caractres . . . . . . . . . . . . . . . . . . . . . . . . . . 196 6.5 Formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 6.6 Un nouveau mdia de cration . . . . . . . . . . . . . . . . . . . . . . . . 203

Chapitre 7 Mthodes de conception des interfaces . . . . . . . . . . . . . . . 205 7.1 Quel bnce ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 7.2 Conception oriente utilisateur . . . . . . . . . . . . . . . . . . . . . . . . 208 7.3 Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 7.3.1 Enqute / interviews utilisateur . . . . . . . . . . . . . . . . . . . . . . 210 7.3.2 Focus group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 7.4 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 7.4.1 Personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 7.4.2 Tri par carte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 7.4.3 Maquettage / prototypage . . . . . . . . . . . . . . . . . . . . . . . . . 223 7.5 valuation ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 7.5.1 Audit ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 7.5.2 Test utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 7.6 Derniers conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Table des matires

ix

Annexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 A Ltre humain en situation de travail . . . . . . . . . . . . . . . . . . . . . 246 A.1 A.2 A.3 Modle du processeur humain . . . . . . . . . . . . . . . . . . . . . . . . 246 Thorie de laction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Tche et activit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

B Critres ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 B.1 B.2 B.3 B.4 B.5 B.6 B.7 B.8 Compatibilit . . . . . . . . . . . . . Guidage . . . . . . . . . . . . . . . . Homognit . . . . . . . . . . . . . Flexibilit . . . . . . . . . . . . . . . Contrle utilisateur . . . . . . . . . . Traitement des erreurs. . . . . . . . . Charge mentale . . . . . . . . . . . . Check-list dvaluation ergonomique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 257 259 260 261 261 263 264

C Check-list de conception dun site web . . . . . . . . . . . . . . . . . . . . 267 Bibliographie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Webographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

Avant-propos

xi

Avant-propos

Trente rais se runissent autour dun moyeu. Cest de son vide que dpend lusage du char. On ptrit de la terre glaise pour faire des vases. Cest de son vide que dpend lusage des vases. On perce des portes et des fentres pour faire une maison. Cest de leur vide que dpend lusage de la maison. Cest pourquoi lutilit vient de ltre, lusage du non-tre. Lao-Tseu

Chaque jour, linformatique prend une place grandissante dans notre vie quotidienne ; au bureau, mais aussi dans nos foyers o lordinateur commence trouver sa place dans le salon entre la bibliothque et la chane hi-fi. La plupart des instruments mnagers : machine laver, four micro-ondes, tlphone, lecteur DVD, etc. fonctionnent laide dun microprocesseur et dun logiciel. Ces outils, rendus intelligents par linformatique, ont t conus pour nous rendre service, nous faciliter la vie. Et effectivement, ils nous aident et nous permettent de raliser facilement certaines tches qui, sans eux, auraient demand beaucoup plus de temps et dnergie. Mais qui na jamais prouv des difficults les utiliser ? Qui na pas eu ouvrir le mode demploi du magntoscope avant denregistrer son mission favorite ? Qui na jamais ressenti ce sentiment de frustration de ne pas pouvoir utiliser pleinement un objet faute de savoir comment sen servir ? En dautres termes, nul doute que ces machines nous sont utiles, mais elles ne sont pas toujours facilement utilisables

xii Ergonomie du logiciel et design web

En fait, lusage dun instrument se caractrise selon deux axes : son utilit et son utilisabilit1. Lutilit est la capacit de lobjet servir la ralisation dune activit humaine, tandis que lutilisabilit reprsente la facilit demploi de cet objet. Considrons, par exemple, deux objets ddis une utilisation similaire : la combinaison de plonge et le scaphandre. Ils relvent de la mme utilit : permettre de se dplacer sous leau. Cependant, le scaphandre, du fait de son poids et de la connexion permanente avec la source dair, est dune utilisabilit moindre que la combinaison qui offre une plus grande autonomie. Les plongeurs lont vite compris : depuis que la combinaison de plonge a t invente, le scaphandre nest quasiment plus utilis Linstrument dont lutilisabilit est la meilleure a t choisi. Lutilisabilit est la capacit de lobjet tre facilement utilis par une personne donne pour raliser la tche pour laquelle il a t conu. La notion dutilisabilit englobe la fois la performance de ralisation de la tche, la satisfaction que procure lutilisation de lobjet et la facilit avec laquelle on apprend sen servir. Cette qualit concerne tout type dinstrument destin aider ltre humain. Nous nous intressons ici son application loutil informatique, cest--dire le logiciel. Les enjeux de lergonomie Lorsquun logiciel est employ des fins professionnelles, son utilisabilit est essentielle car elle dtermine la performance du salari. Un logiciel facilement utilisable permettra de raliser rapidement la tche prvue, sans perte de temps et avec moins de stress. Pour une entreprise, lutilisabilit est un critre de choix important ; non seulement la productivit en dpend, mais aussi la qualit de latmosphre de travail. La vie de tous les jours nous le montre : lergonomie conditionne la russite commerciale dune technologie. Nest-ce pas la facilit dutilisation qui a permis au Macintosh de tenir le haut du march chez tous les allergiques linformatique , tandis qu linverse, Linux comblait les informaticiens par sa puissance et sa concision ?

1. Utilisabilit est une traduction littrale de Usability qui est le terme employ par les ergonomes anglo-saxons. Usability aurait aussi pu tre traduit par ergonomie , mais ce mot a un sens plus large. Lergonomie est une science qui a pour objet ltude du travail humain, tandis que lutilisabilit est une caractristique de lobjet lui-mme. Cest donc par abus de langage que nous emploierons parfois dans cet ouvrage le terme ergonomie la place de utilisabilit .

Avant-propos

xiii

Le succs commercial dun produit informatique nest pas uniquement li sa technicit. Le choix du consommateur se porte vers le logiciel le mieux adapt son besoin et ses comptences. Lutilisabilit est un critre de choix au moment de lachat, au mme titre que le cot ou lesthtisme du produit. Mais cest aussi, et surtout, un facteur de fidlisation ; le client achte les yeux ferms lorsquil est sr de pouvoir utiliser facilement le produit. tel point quen gnral, il est prt faire des concessions en terme de fonctionnalits et de performances lorsquil sait loutil agrable utiliser et quil ne perdra pas de temps apprendre sen servir. Finalement, lors de la mise en uvre des grands systmes dinformation, lutilisabilit est une condition majeure de russite du projet. Le retard dans le dveloppement de nombreux systmes oprationnels est imputable un manque de connaissance de lutilisation effective du systme final, conduisant la livraison avorte dune premire version mal adapte aux besoins de lutilisateur, voire au contexte oprationnel. Les travaux dajustement raliss ensuite se traduisent non seulement par des dveloppements non prvus, source de dpassements budgtaires, mais aussi par une acceptation difficile du systme lie des adaptations ad hoc. chauds par quelques mauvaises expriences, les clients sont vigilants. Lors du dveloppement de systmes risque tels que les salles de contrle de centrale nuclaire ou les centres de contrle de la circulation arienne, lutilisabilit est maintenant considre comme un critre dacceptation la livraison du systme final. Une dmarche pragmatique La cl de la russite dun projet informatique nest donc pas seulement technique, cest aussi la prise en compte, tout au long du dveloppement, de lutilisabilit du logiciel. Pour cela, il importe de mettre en place un processus itratif. En effet, dans le domaine du dveloppement logiciel, lenfer est pav de bonnes intentions et malgr toute lattention quon y porte, jamais la premire version ne sera satisfaisante. Plutt que de chercher faire bien du premier coup, il est prfrable de raliser rapidement une maquette et de la faire tester par les utilisateurs. Le test dutilisabilit a t conu pour cela. Il permet dvaluer lergonomie dun logiciel. Il consiste placer lutilisateur en situation effective dutilisation du logiciel. Il lui est demand de raliser la tche pour laquelle le logiciel a t conu. Il est alors possible de dterminer de manire objective lutilisabilit du produit en mesurant sa performance : a-t-il pu accomplir correctement la tche et dans le temps voulu ? Mais le test dutilisabilit est surtout loccasion de voir lutilisateur en situation et dobserver les problmes quil rencontre, les questions quil se pose, les fonctionnalits quil apprcie ou non, etc. Les quipes de dveloppement peuvent ainsi recueillir des lments prcieux sur la faon de rendre le logiciel plus facile utiliser.

xiv Ergonomie du logiciel et design web

Bien entendu, travailler partir de prototypes et impliquer lutilisateur dans la conception du produit ne veut pas dire partir de zro et rinventer la roue ! De nombreuses exprimentations ont t menes dans le domaine du logiciel. Elles ont permis dlaborer un certain nombre de recommandations [Mayhew 92] qui vont servir de point de dpart au dveloppement du premier prototype. Suivre ces recommandations permet dviter les principaux cueils afin de se concentrer sur les particularits du logiciel dvelopp. Audience Ce livre fait la synthse des rgles issues des diffrentes tudes et exprimentations menes au cours des dernires annes dans le domaine de lergonomie du logiciel. Il donne des conseils pratiques et prsente des mthodes afin de concevoir des logiciels faciles utiliser. Dans la mesure o lutilisabilit nat de la relation qui stablit entre le logiciel et son utilisateur, nous nous intresserons principalement la conception des interfaces homme-machine. Dans un systme informatique, linterface hommemachine reprsente la partie du logiciel qui permet lutilisateur dinteragir avec le programme informatique. Cependant lutilisabilit relve galement de la conception globale du logiciel, voire galement de la ligne de produits dans laquelle il se positionne. Cest pourquoi, le livre sadresse toutes les personnes impliques dans la conception et le dveloppement logiciel, en particulier celles en charge des spcifications et de linterface homme-machine, mais aussi les chefs de projet et les responsables marketing. Dans la mesure o linterface est essentielle dans les dveloppements internet, ce livre concerne particulirement les concepteurs web. Par ailleurs, il intressera galement ceux qui souhaitent valuer lutilisabilit dun logiciel en vue den faire lacquisition pour leur propre usage ou pour celui de leur entreprise. Organisation du livre Cet ouvrage est un guide de conception pour les interfaces homme-machine et les sites web. Il donne les rgles et les principes ergonomiques prendre en compte chaque tape de la dfinition de linterface utilisateur, quil sagisse dun logiciel ou dun site internet. Le livre sarticule en 3 parties. La premire traite des composants logiciels de linterface homme-machine. La seconde aborde le design des sites et prsente les diffrents objets employs dans les pages web. La dernire partie introduit la dmarche de conception oriente utilisateur . Les trois premiers chapitres concernent plus particulirement les quipes de spcification et de dveloppement informatique. Ils traitent la conception des interfaces homme-machine pour les logiciels.

Avant-propos

xv

Lcran donne des recommandations sur lergonomie de laffichage, le graphisme de linterface, les polices de caractres et les textes. Le dialogue hommemachine explique comment organiser linterface. Il traite de la conception des fentres et du choix des modes de dialogue, en particulier les menus, les boutons et les champs de saisie. Les erreurs et laide en ligne fournit les rgles suivre pour prvenir lutilisateur des erreurs et construire une aide en ligne. Les autres chapitres concernent le design des sites web. Dans la mesure o Internet vise le grand public, il est essentiel que les services en ligne soient simples utiliser. Ces chapitres sadressent plus spcifiquement aux concepteurs web, aux graphistes ainsi quaux webmasters. Dfinition et ciblage du site aborde les premires tapes de la conception dun site. Il montre comment identifier le contenu en fonction du public vis et prsente les mthodes pour intgrer le point de vue des utilisateurs dans la phase de maquettage. La navigation web expose les principes ergonomiques de la navigation web et introduit les principaux lments employs pour la navigation sur les sites : barre de navigation, menus, onglets et chemin de progression. La page web traite de la conception de la page web et de son contenu, en particulier la page daccueil. Il aborde les aspects graphiques et rdactionnels spcifiques du web. Dans ce livre, nous donnons pour chacune des tapes de la conception des rgles visant amliorer lutilisabilit. Mais il ne sagit pas de recettes de cuisine ! Certaines de ces rgles sont contradictoires tandis que dautres peuvent tre remises en cause en fonction du contexte. Elles ne doivent pas tre appliques la lettre sans prendre en compte lutilisation effective du logiciel ou du site web. Ces recommandations permettent dorienter les choix de conception en sappuyant sur les exprimentations menes dans le domaine. Il reste ensuite valider le design de linterface en situation relle : cest le rle des tests dutilisabilit. Le chapitre Mthodes de conception des interfaces dcrit diffrentes mthodes permettant de prendre en compte lergonomie au cours du dveloppement dun logiciel, en particulier les tests utilisateur et le maquettage/prototypage. Ce chapitre sadresse aux chefs de projet dsireux de suivre un processus de conception orient utilisateur . Il intressera galement les personnes en charge de lvaluation dun logiciel car il prsente diffrentes mthodes dvaluation. En annexe, on trouvera une prsentation des travaux majeurs en psychologie cognitive sur lesquels sappuie lergonomie du logiciel, en particulier le modle du processeur humain et la notion de critres ergonomiques. Deux check-lists se trouvent la fin de louvrage. La premire permet dvaluer rapidement la qualit ergonomique dun logiciel. La seconde, ddie aux appli-

xvi Ergonomie du logiciel et design web

cations web, sert vrifier que les critres dutilisabilit sont pris en compte lors de la conception dun site internet. Pour en savoir plus sur la pratique de lutilisabilit, la bibliographie fournit, outre les principaux ouvrages du domaine, les adresses internet des sites traitant de lergonomie informatique. Itinraire professionnel Ce livre est le fruit de mon parcours professionnel. Tout dabord au centre scientifique IBM France, jai men des recherches sur la communication entre lhomme et la machine, mintressant la faon dont lordinateur aurait pu produire des textes semblables ceux dun tre humain. Ensuite Thales (ex-Thomson-CSF), jai eu loccasion de participer au dveloppement de centres de contrle arien et de conseiller les quipes logicielles sur la conception des postes de travail pour les aiguilleurs du ciel. Puis comme web manager, jai particip la conception des sites intranet et conduit les programmes internes lis aux technologies web. Ensuite, jai fond Usabilis, une agence de conseil en ergonomie des technologies de linformation. Nous accompagnons les matrises douvrage dans la conception des services en ligne et des produits logiciels. Cet itinraire a t pour moi loccasion de mettre en uvre les rgles et les mthodes que vous trouverez dans ce livre. Remerciements Louvrage est le manuel des formations que je dispense luniversit ParisDauphine, Suplec, lInstitut national des tlcommunications et dans le cadre des formations professionnelles Cegos. Jen remercie les lves, les stagiaires et les responsables des formations. Cet ouvrage est aussi le fruit dchanges et de discussions sur la pratique de lutilisabilit. Mes remerciements vont tous ceux qui placent le respect de lutilisateur comme une exigence professionnelle. Merci Nathalie Brardier, Hlne Billet, Jolle Cohen, Jolle Coutaz, Genevive Jomier, Laetitia Giannettini, Marit Milon, Ccile Montarnal, Gilles Ambone, Marc Badran, rige Baudoin, Vincent Bnard, Thierry Bouillot, Jean-Philippe Bourdarie, Simon Dupont-Gellert, Jrme Ernu, Frdric Fuchs, Sylvain Fustier, Michel Germain, Frdric Gaillard, Antoine Israel, Gilles Murawiec, Loc Nunez, Franois Palaci, Christophe Ralite, Gilles Rouquet, Elie Slom, Daniel Trembacz et O. Wiener de mavoir fait partager leur passion de rendre les technologies utilisables.

1
Lcran

AGENCEMENT

DE LCRAN ....................................................................................................2

GRAPHISME ............................................................................................................................6 Couleur ..............................................................................................................................6 Polices de caractres .........................................................................................................14 Icnes...............................................................................................................................15 Techniques de mise en vidence ........................................................................................20 LANGAGE .............................................................................................................................27 Libell des commandes ......................................................................................................28 Messages ..........................................................................................................................29

Lcran est le principal mdia de linterface homme-machine. Son agencement influence de faon notable lutilisabilit du logiciel. En effet, la vision est le sens le plus dvelopp chez ltre humain. Pour une interface homme-machine, comme pour un site internet, o une grande part du message est graphique, la faon de prsenter les informations est essentielle. Ce chapitre donne les rgles suivre pour organiser lcran de manire mettre en vidence les donnes importantes et faciliter les mouvements de la souris. Il dtaille les aspects graphiques et fournit des rgles pour choisir les couleurs, les polices de caractres, les icnes et les diffrents moyens de mise en vidence. Finalement, il aborde la question du langage employ sur linterface et dans les fentres de message. En effet, le langage est un lment dterminant en terme dutilisabilit car il conditionne la comprhension du logiciel et donc sa facilit dapprentissage.

1. Lcran

1.1

AGENCEMENT DE LCRAN
Lutilisateur ne regarde pas toujours lcran de la mme manire. On distingue deux stratgies dexploration visuelle. Lorsquil dcouvre pour la premire fois le logiciel, lutilisateur explore lcran. Des tudes exprimentales, menes dans le domaine de la publicit, ont montr que lors de lexploration rapide dun support dinformation quelconque, lusager adopte une stratgie en Z. Le regard part du coin suprieur gauche de limage, parcourt systmatiquement la zone centrale et se termine dans le coin infrieur droit.

Figure 1.1 Lorsquil dcouvre pour la premire fois un cran, lutilisateur le parcourt en Z.

Par contre, lorsque lutilisateur connat limage, il effectue une recherche slective, cest--dire quil cherche une information quil pense tre une certaine place. Des tudes ont montr qualors il nexplore pas lensemble de lcran, mais quil adopte une stratgie de fixation slective sur les points qui lui semblent pertinents. Pour organiser lcran, il convient non seulement de prendre en compte la visibilit des diffrents composants, mais aussi leur accessibilit laide de la souris. Par exemple, un objet plac dans un coin est difficile atteindre car le mouvement est plus contraint que lorsquil est au centre de lcran. La figure 1.2 rsume ces rsultats. Le positionnement est un des moyens les plus efficaces pour mettre en vidence une information [Chapman 93]. En effet, plus la charge de travail augmente, plus lutilisateur sachemine vers une standardisation des procdures dexploration, donc vers de la recherche slective se focalisant sur certaines zones de lcran.

1.1 Agencement de lcran

Figure 1.2 Selon leur position et les contraintes du mouvement de la souris, les diffrents emplacements ne sont pas quivalents. Ce schma prsente les caractristiques standard de visibilit et daccessibilit des zones de lcran.

La position des informations doit tre cohrente. Un positionnement cohrent des objets de linterface contribue lhomognit de lensemble. Pour cela, on utilise un trac rgulateur. Le trac rgulateur est un terme darchitecture dsignant un schma type dont le rle est de prciser le positionnement de divers lments dans une surface. Appliqu linterface homme-machine dun logiciel, le trac rgulateur dtermine lagencement des fentres de lapplication. Un trac rgulateur bien respect permet dharmoniser lensemble du logiciel. Lutilisateur lit et mmorise les informations plus facilement car il sait o les trouver. Qui plus est, le trac rgulateur est un facteur dhomognit dune ligne de produit, comme en tmoignent les fentres prsentes ci-aprs (figure 1.4).

1. Lcran

Figure 1.3 Le trac rgulateur permet dhomogniser les diffrentes fentres de lapplication et ainsi den faciliter lapprentissage.

Figure 1.4 Lorsquil est bien suivi le trac rgulateur confre aux diffrents logiciels un air de famille : ici le Microsoft Ofce 95.

1.1 Agencement de lcran

Organiser les zones de manipulation dans le sens de la lecture et en fonction de la frquence dutilisation. Les zones de manipulation sont des espaces de lcran sujets de nombreuses slections la souris, par exemple une barre de menu. Lorsque lutilisateur en prend connaissance, il commence par la lire. Les commandes importantes doivent donc apparatre en premier, dans le sens de la lecture, cest--dire en haut et gauche. Ensuite, quand il utilise la barre de menu, lespace central est plus facile atteindre car il est gnralement situ dans la partie mdiane de lcran. Sur ce principe, la figure 1.5 propose des tracs rgulateurs pour les zones de manipulation.

Figure 1.5 Dans une zone de manipulation, les objets importants apparaissent en premier dans le sens de la lecture, tandis que ceux frquemment utiliss sont placs au centre an de faciliter la slection.

Les zones de manipulation vont tre frquemment parcourues des yeux par lutilisateur qui y cherche, en saidant gnralement de la souris, les commandes utiliser. Elles devront donc tre conues de la faon la plus compacte possible afin que lutilisateur ait en permanence toutes les commandes sous les yeux et que le dplacement de la souris soit limit.

Dconseill

Figure 1.6 Sur ce logiciel, les deux seuls menus ont t maladroitement placs aux extrmits de la barre obligeant lutilisateur dinutiles mouvements de la souris.

1. Lcran

Regrouper les informations. Le regroupement sert de base lagencement des diffrents objets de linterface. Il permet de rapprocher les informations qui, du point de vue de lutilisateur, sont lies entre elles. Ainsi, on rassemblera dans le mme espace les donnes ncessaires laccomplissement dune mme tche : cest le principe de la composition des fentres.

1.2

GRAPHISME
Le graphisme dun logiciel ne rpond pas uniquement des critres esthtiques. Il doit avant tout permettre une mise en vidence efficace et une lisibilit correcte des informations. Toutefois, lesthtique est aussi prendre en compte car cest un facteur de prfrence qui contribue une attitude positive de lutilisateur.

1.2.1 Couleur
La couleur est un lment important de la signaltique de linterface hommemachine. Elle met en vidence ltat courant des objets affichs et permet de regrouper des objets de mme nature mais loigns par leur position. Perception de la couleur La couleur est perue par la rtine de lil. Deux types de photorcepteurs y rsident : les btonnets et les cnes. Les btonnets, situs en priphrie de la rtine, sont sensibles aux formes, tandis que les cnes, placs au centre de la rtine (appel fova), permettent de percevoir les couleurs. Les cnes comportent trois types de pigments, sensibles au rouge, au vert ou au bleu. Cependant, la proportion de pigments dans les cnes nest pas homogne, elle dpend de la position du cne. Les cnes du centre de la fova ne contiennent aucun pigment bleu tandis que les pigments rouges et verts sont moins frquents en priphrie. Il en dcoule deux rgles concernant lutilisation des couleurs. Un bleu priphrique amliore la vision centrale. Le bleu est gnralement recommand pour les encadrements.

1.2 Graphisme

Figure 1.7 La rpartition des pigments dans les cnes dpend de leur position sur la fova.

Il est prfrable dviter le bleu satur pour du texte ou des petits objets. En effet, cette couleur est mal perue au centre de la fova qui est la zone active pour la perception des petits objets. Par ailleurs, lil est plus ou moins sensible certaines couleurs. Il ne ragit pas de la mme manire selon la longueur donde. En particulier, la couleur laquelle lil est le plus sensible est un mlange de vert et de jaune (voir figure 1.8).

Figure 1.8 Sensibilit de lil en fonction de la longueur donde [Dribr 64].

Qui plus est, la sensibilit de lil dpend de la luminosit ambiante. La nuit, elle se dcale vers le violet, rendant lil aveugle au rouge [Solomon 97]. Lorsque la couleur est porteuse de sens, il est essentiel que lutilisateur puisse la reconnatre, cest--dire la nommer sans ambigut. Pour cela, les exprimentations ont montr que lorsque les couleurs sont rparties de faon homogne le long du spectre visible, elles sont plus faciles distinguer les unes des autres.

1. Lcran

Choisir des couleurs rparties tout au long du spectre visible. Par ailleurs, il a galement t montr que les couleurs satures se reconnaissent plus facilement que les autres. Cependant, ces couleurs sont manier avec prcaution car elles posent des problmes de lisibilit pour le texte. Utiliser la couleur et un autre moyen de mise en vidence pour afficher une information importante. Une couleur nest pas perue exactement de la mme manire par tout le monde. Rappelons, ce sujet, que le daltonisme touche une proportion non ngligeable dhommes (8 %), mais quon le rencontre moins frquemment dans la population fminine (0,4 %). Il est donc prfrable de ne pas sappuyer uniquement sur cet lment de prsentation pour la mise en vidence. Distinguer les couleurs en teinte et clart. La diffrence en clart rend la distinction possible par les daltoniens car elle ne porte pas uniquement sur la longueur donde de la couleur. Composantes de la couleur Le codage Teinte, Saturation, Intensit (ou HSV pour Hue, Saturation and Value) reflte la manire dont la couleur est perue par ltre humain. Il est pratique pour rgler les couleurs de linterface. Lindice de teinte correspond la longueur donde principale. Elle dtermine ce que lon appelle couramment la couleur. Le niveau de saturation reprsente la largeur de la bande de longueurs donde occupe par la couleur : son spectre. La couleur est dite sature lorsque la bande est troite. Au contraire, lorsque la bande est plus large, on parle de couleur dsature : ce sont les pastels. La saturation minimale est obtenue par un mlange quilibr de toutes les longueurs dondes. La couleur est dite achromatique : cest le gris. Finalement, lintensit est le degr de rflexion de la couleur, la faon dont elle rflchit la lumire. Cette caractristique est galement appele clart. Elle correspond un niveau de gris : de blanc noir. On parle galement de la brillance ou luminance dune source lumineuse. Ce paramtre ne dpend pas uniquement de la couleur. Il correspond lnergie lumineuse mise par lobjet color. Il est conditionn par la puissance de la source lumineuse, par lclairement ambiant ainsi que, bien entendu, par la couleur.

1.2 Graphisme

Codage couleur Le codage couleur, appel aussi code des couleurs, consiste associer chaque couleur de linterface une signification prcise et uniforme pour lensemble de lapplication. Bien quelle embellisse linterface et contribue son attrait aux yeux de lutilisateur, la couleur na pas seulement un rle esthtique. Le codage couleur est donc un savant compromis entre les gots de lquipe de dveloppement, ceux des utilisateurs et les contraintes dutilisabilit prsentes ci-dessous. Dans une interface homme-machine, la couleur peut tre utilise de diverses manires. Son principal intrt est de pouvoir ajouter de linformation un objet sans en modifier la forme : la couleur permet dindiquer un tat. Elle sert galement regrouper les informations de mme nature en les affichant de la mme couleur, voire en utilisant des dgrads pour tablir une relation entre ces objets. Inversement, la couleur va servir mettre en vidence lcran certains composants colors de manire distinctive. Cependant, il importe de minimiser la charge perceptive pour des raisons esthtiques et defficacit du codage. Minimiser le nombre de couleurs (7 2). Pour tre efficace, le codage couleur doit tre simple. Dans la mesure o chaque couleur est porteuse dun sens, un trop grand nombre de couleurs conduit un codage complexe difficile assimiler par lutilisateur. partir de 10 couleurs, la limite de la mmoire court terme est atteinte et lon doit faire appel au souvenir, cest--dire la mmoire long terme, pour se remmorer la signification des couleurs1. Pour un objet donn, le nombre de couleurs utilises doit tre nettement infrieur au nombre de ses attributs. Un nombre trop important de couleurs, qui plus est sur une petite surface, est cause de fatigue visuelle importante et source de confusion. Le codage couleur perd son efficacit lorsque la densit de couleurs est trop grande. Sil nest pas possible dutiliser une couleur pour coder ltat de lobjet, un autre code graphique doit tre employ. Le choix des couleurs peut tre restreint pour deux raisons : soit lobjet utilise dj un nombre important de couleurs, soit toutes les couleurs disponibles sont
1. Les notions de mmoire court terme et de mmoire long terme sont prsentes en annexe.

10

1. Lcran

dj employes. Dans ce cas, il est prfrable dutiliser un autre code graphique : un symbole, une lettre, la texture du trait, etc. Respecter le sens que lutilisateur donne aux couleurs. Dans la mesure o lon attribue un sens une couleur, il convient de vrifier au pralable que lutilisateur nassocie pas dj une autre signification cette couleur. En effet, certaines professions partagent de faon plus ou moins explicite une sorte de code des couleurs, comme le montre le tableau suivant.
Tableau 1.1 Certains domaines utilisent un code des couleurs auquel il convient dtre vigilant lors de la conception du logiciel. Finance Rouge Vert Jaune Bleu Noir Gain Froid Perte Chimie Chaud Signalisation routire Interdiction Secours Avertissement Obligation Fort Dsert Mer Cartographie Cartographie routire Nationale Touristique Dpartementale

En terme de scurit, la signification des couleurs est dfinie dans la norme NF X 08-003. Ce codage est utilis en particulier pour la signalisation routire. Mais la connotation que lutilisateur attribue a priori aux couleurs est aussi culturelle. Le blanc par exemple, qui, dans la culture europenne, symbolise la puret, est la couleur du deuil en Asie. De mme, le rouge est associ la mort en Afrique, tandis quil signifie la joie pour les cultures asiatiques et la puret en Inde. Certaines couleurs peuvent avoir une connotation trs forte ; ainsi, le vert et lorange ont une signification religieuse en Irlande o ils sont ports par les catholiques et les protestants. Cette dimension symbolique de la couleur doit tre intgre suffisamment tt dans le design, car elle peut tre source dune mauvaise comprhension de linterface, voire dun rejet de la part de lutilisateur. Choix des couleurs Une fois le type de couleur choisi, le choix de la couleur consiste ajuster prcisment chacune de ses composantes en teinte, saturation et intensit. Cette tche est un compromis entre les rgles qui suivent.

1.2 Graphisme

11

Utiliser des couleurs trs contrastes pour exprimer une diffrence. Pour cela un contraste de teinte, cest--dire des couleurs complmentaires, par exemple : rouge/cyan, bleu/jaune, vert/bleu ou blanc/noir, permet de marquer la distinction entre diffrents objets de linterface. Choisir des couleurs peu contrastes pour exprimer une similarit. Au contraire, des couleurs proches, par exemple : rouge/rose, jaune/orange, bleu/violet ou blanc/gris, vont conduire regrouper les objets correspondants. viter le bleu satur pour les petits objets et pour du texte. Lutilisation dun bleu ou dun rouge satur provoque un phnomne de halo, appel chromostropsis, qui rend difficile la lecture des petits objets tels que les caractres dun texte par exemple. Utiliser le bleu pour encadrer. Du fait de la rpartition des pigments colors dans les cnes de la rtine, lil est plus sensible au bleu en priphrie. viter les fonds marrons et verts. Avec de telles couleurs de fond, il est particulirement difficile de trouver une couleur de texte qui garantisse une bonne lisibilit [Mayhew 92]. Leffet de relief du rouge et du bleu est galement prendre en compte : le rouge semble plus proche, en avant, tandis que le bleu semble plus loign, en arrire. De mme, la chaleur dune couleur influence sa perception. surface gale, une couleur chaude semble occuper plus despace quune couleur froide. Rappelons que le rouge, le jaune et lorange sont des couleurs chaudes, alors que le vert, le bleu et le violet sont des couleurs froides. Pour les grandes surfaces, utiliser des couleurs peu satures. Lemploi dune couleur vive sur une grande surface confre une certaine agressivit linterface. Il est gnralement source de fatigue visuelle lors dune utilisation prolonge du logiciel. Au contraire, les couleurs peu satures, pastel, sont beaucoup plus reposantes. Le choix de la couleur de fond dcran est dterminant pour le rendu visuel de lensemble de linterface.

12

1. Lcran

viter un fond gris ou color pour de petits objets. Les objets de petite taille semblent encore plus petits sur un fond gris. Par ailleurs, plus ils sont petits, plus il est difficile de distinguer leur couleur. Dans ce cas o il est prfrable demployer un fond noir, car le noir fait ressortir les petits objets, les rendant plus visibles [Drevermann 98]. Inconvnient majeur du fond noir, il augmente la fatigue visuelle du fait du contraste lumineux quil engendre, ainsi que des reflets quil peut occasionner selon lclairage de la pice. Utiliser une couleur neutre et claire pour le fond de lcran. Le gris est la couleur neutre par excellence car il est achromatique, cest--dire que toutes les longueurs donde y sont prsentes quantit gale. Il prsente un grand intrt pour les crans de visualisation informatique [Chincholle 94]. En effet, il facilite la perception des diffrentes formes de codage utilises habituellement par les logiciels (couleur, clignotement, etc.). Il offre un large spectre de couleurs davant-plan, car le gris garantit le fonctionnement dun grand nombre de contrastes par rapport au fond de lcran. Les donnes affiches sur du gris apparaissent beaucoup plus nettement que si un fond color est utilis. Dans lambiance lumineuse standard (350-400 lux), un fond gris clair diminue les rflexions et offre un meilleur quilibre de luminance entre lcran et les autres surfaces du champ de vision. De ce fait, la fatigue visuelle est nettement diminue. Rappelons cependant le caractre vampirique du gris, selon lexpression dEugne Delacroix, qui attnue les couleurs voisines, surtout lorsquelles occupent de petites surfaces. Qui plus est, le gris est gnralement peru comme une couleur triste. On lutilisera donc lorsque le risque de fatigue visuelle est important. Cest-dire principalement dans le cas dapplications professionnelles o lutilisateur travaille en permanence sur la mme fentre, par exemple pour du contrle de processus. Dans les autres cas, on prfrera un fond blanc gnralement mieux apprci des utilisateurs. Les couleurs doivent tre identifiables littralement par lutilisateur et diffrencies en teinte, saturation et intensit. Au final, il importe que les diffrentes couleurs choisies soient clairement distinctes aux yeux de lutilisateur. La couleur ne doit pas entraner de confusion ou retarder la comprhension dune information. Pour le vrifier, il suffit de demander lutilisateur de nommer chacune des couleurs utilises lcran, montrant ainsi quil ny a pas dambigut. Rappelons ce sujet que plus les couleurs sont loignes dans le spectre, plus on les distingue facilement les unes des autres.

1.2 Graphisme

13

Mthode de choix des couleurs La premire rgle suivre lorsque lon conoit une interface en couleur est de ne pas utiliser la couleur ! Il est prfrable de concevoir en noir et blanc, puis de najouter la couleur que lorsquelle est utile. Cest la meilleure garantie pour que la couleur soit utilise bon escient, une fois tous les autres moyens de mise en vidence utiliss. Comme nous venons de le voir, le choix des couleurs sappuie sur de nombreux critres. La mthode suivante distingue diffrentes tapes afin de faciliter ce processus [Reynolds 94, Chincholle 95]. Le principe est de choisir les couleurs de manire ce que les informations importantes attirent lil, tandis que les autres semblent en retrait.

1. Identier les objets ou les donnes afcher. 2. Regrouper ces objets par niveau de visibilit, lobjectif tant de rendre plus visibles les objets importants. 3. Choisir les composantes de la couleur, en sappuyant sur le fait que la teinte dpend de la connotation attribue la couleur, puis que la saturation et lintensit jouent sur la visibilit recherche. 4. Finalement, prototyper le rsultat obtenu.

Figure 1.9 Une mthode pour choisir les couleurs.

Il est essentiel de tester les couleurs de visu, car le rendu dpend non seulement du type dcran utilis, mais aussi des conditions dclairement de la pice. En effet, lil est sensible la luminance, cest--dire la brillance de la couleur. Ce paramtre, qui dtermine la visibilit de lobjet, dpend de lcran et des conditions dclairage. Mais il ncessite un appareillage particulier, un chromamtre, pour tre mesur. Il est donc difficile de vrifier de faon objective le rendu effectif en terme de visibilit. Cependant, dans la majorit des cas, jouer sur la saturation de la couleur donne des rsultats tout fait acceptables. Choisir des couleurs satures pour mettre en vidence les informations importantes. Utiliser des couleurs peu satures pour les informations de moindre importance. Il convient nanmoins dtre vigilant sur lemploi des couleurs satures, car elles sont cause de fatigue visuelle et nuisent, pour certaines dentre elles, la lisibilit, en particulier le rouge et le bleu satur. Il est alors possible de jouer aussi sur la clart de la couleur pour faire ressortir lobjet.

14

1. Lcran

1.2.2 Polices de caractres

La police des caractres joue un rle important dans le design de linterface homme-machine. Cependant, sa porte est moindre que la couleur car il est plus difficile de diffrencier deux polices de caractres que deux couleurs. Ne pas utiliser plus de 3 polices de caractres. Lutilisation dun trop grand nombre de polices rend lcran confus ; la signaltique de la typographie perd son efficacit. Inversement, un faible nombre de polices facilite la mmorisation du codage utilis. Le choix dune police de caractres sappuie sur deux critres : le rle de la police doit tre clair pour lutilisateur et les caractres doivent tre lisibles sans effort. Associer une police de caractres chaque type dobjet de linterface. Une utilisation cohrente des polices de caractres est un vecteur dharmonisation de lapplication. la manire du codage couleur, il convient donc de dfinir une utilisation prcise des polices de caractre. Les textes doivent tre affichs en minuscules, la premire lettre tant en majuscule. Un texte en casse mixte est lu plus rapidement : un gain de 13 % a t observ par rapport au temps mis pour lire le mme texte en majuscules. En effet, les lettres minuscules sont moins ambigus que les lettres majuscules. Linterprtation est donc facilite et les risques de confusion sont minimiss.

Figure 1.10 Les lettres minuscules sont plus diffrentes les unes des autres que les lettres majuscules, comme le montre la gure o la premire phrase en minuscules est plus rapidement dchiffrable car ses signes se distinguent mieux, bien que seule la partie suprieure des lettres apparaisse.

Par contre, les majuscules sont un excellent moyen de mettre en vidence un mot dans un texte. [Mayhew 92] rapporte quun gain de 13 % a t observ lorsquon recherche un mot dans un texte et quil y apparat en majuscule. En

1.2 Graphisme

15

conclusion, les minuscules facilitent la lecture, tandis que les majuscules facilitent la recherche. Utiliser une police droite. Les polices droites, sans srif, par exemple Arial, Helvetica ou Verdana, ne comportent pas dempattement et prsentent une graisse dpaisseur constante sur tout le caractre. Ces lettres simples au dessin homogne et contrast facilitent la lecture des lments textuels lcran [Chincholle 96]. Au contraire, pour les textes sur support papier, lempattement des polices srifies (par exemple Times) cre une ligne horizontale qui conduit lil de gauche droite. Utiliser des lettres sombres sur fond clair. Ce choix garantit un contraste optimal entre le texte et son support, ainsi quune fatigue visuelle minimale grce lutilisation dun fond clair. Mieux vaut quelques lignes longues que plusieurs lignes courtes. Lutilisation de lignes trop courtes ralentit la lecture et la rend fatigante car elle exige de nombreux mouvements oculaires. La lecture est plus rapide lorsque la ligne dpasse 26 caractres. Il est donc recommand dutiliser 50 55 caractres par ligne, voire 30 35 en double colonne. Arer le texte. Un espacement facilite la lecture. Il est conseill dinsrer une ligne blanche toutes les 5 lignes et de laisser un espace entre les colonnes. La norme ISO 9241-3 dfinit exactement les contraintes sur les polices de caractres pour que les textes puissent tre lisibles sans effort lcran (voir tableau 1.2 page suivante). Afin dappliquer ces rgles, on sappuiera sur une distance moyenne de lecture lcran de 60 15 cm. Par ailleurs, la distance minimale gnralement considre est de 40 cm, en de, la fatigue visuelle est trop importante [ISO 9241-5].

1.2.3 Icnes
Les icnes sont des graphismes plus ou moins abstraits auxquels est associe une signification dans linterface. Elles occupent moins de place lcran que du texte et sont gnralement apprcies des utilisateurs.

16

1. Lcran

Tableau 1.2 Exigences de lisibilit des polices de caractres [ISO 9241-3]. Caractristiques du caractre Hauteur minimale du caractre (h) en fonction de la distance de lecture (d) paisseur du trait (e) Largeur du caractre (l) Espacement entre caractres (esp) Espacement entre lignes (E) Matrice de points Type de police Italique Contrainte de lisibilit h > 2,8 mm pour d = 50 cm h > 3,5 mm pour d = 60 cm h > 4 mm pour d = 70 cm h/12 < e < h/6 0,7 h < l < 0,9 h esp > e h < E < 1,5 h 7 x 9 pixels minimum Police droite de prfrence viter. Inclinaison maximale : 45

Le principal intrt dune icne est probablement le fait dtre indpendante de la langue. Il convient toutefois dtre vigilant la connotation culturelle associe certains graphismes. Par exemple, un franais ne verra pas ncessairement une bote aux lettres dans licne suivante.

Dconseill

Figure 1.11 Cette icne est ambigu car, part les Amricains, rares sont ceux qui y voient une bote aux lettres.

Vrifier la comprhension des icnes auprs des utilisateurs cibls permet de lever ce genre de problme. Une icne est susceptible de contenir plus dinformations que du texte sur une mme surface. En effet, une icne prend en gnral moins de place quun mot, sauf, bien entendu, lorsquelle est accompagne dun libell explicatif. De plus, licne est interprte plus rapidement que du texte. Elle nest gnralement pas lue, mais plutt reconnue, ce qui peut tre source derreur lorsque la charge de travail est importante. Lutilisation des icnes prsente des inconvnients, en particulier sur le plan de lapprentissage du logiciel. Le problme le plus frquemment rencontr est

1.2 Graphisme

17

celui de la comprhension de licne. Par exemple, quelle est la signification de licne suivante ?

Figure 1.12 Il nest pas trivial de trouver une icne facile comprendre. Que veut dire celle-ci : Modier la couleur, Copier le format ou Effacer ?

La cration des icnes est dlicate. Leur graphisme riche en symbolique, mais aussi simple et suffisamment dpouill pour tenir sur quelques pixels demande gnralement de longues heures de conception. Il est fortement conseill de valider le graphisme des icnes par un test dutilisabilit au cours duquel on vrifiera si elles sont correctement comprises par lutilisateur. Lexemple suivant nous montre que linterprtation dune interface base uniquement dicnes nest pas immdiate.

Dconseill

Figure 1.13 Une interface sans texte peut sembler obscure pour qui ne connat pas la signication des icnes.

Porteuses de sens, mais moins explicites que du texte, les icnes constituent un lment spcifique du langage de linterface qui demande tre appris. Des difficults de comprhension des icnes peuvent avoir un impact ngatif sur la performance lors des premires utilisations ou en cas dutilisation peu frquente. Cependant, en rgle gnrale, les utilisateurs prfrent les interfaces icnes [Wiedenbeck 99]. Probablement parce quelles donnent un aspect ludique au logiciel qui, de ce fait, semble plus facile utiliser. Toutefois, les exprimentations ont montr que les icnes sont sources derreur. Ainsi [Camacho 90] a demand ses sujets de slectionner des commandes identifies soit par une icne, soit par du texte. Il a relev un taux derreur de 61 % lorsque la commande est reprsente par une icne, et seulement de 39 % lorsquun texte est utilis.

18

1. Lcran

Construction des icnes Diffrentes rgles vont permettre de construire des icnes. Le tableau 1.3 en fait la synthse. Le plus souvent, la construction de licne sappuie sur une combinaison de ces rgles, le principe directeur tant de minimiser leffort dinterprtation.
Tableau 1.3 Rgles de construction des icnes. Rgle Ressemblance Description Licne reprsente une image de lobjet. Exemple

Descriptif

Licne reprsente laction et lobjet sur lequel elle porte, voire lobjet avant et aprs lexcution de la commande. Licne dcrit une utilisation typique de lobjet.

Exemple

Caricature

Licne reprsente une caractristique remarquable de la commande. Licne reprsente des liens smantiques avec lobjet : soit lobjet fonctionne de manire semblable (mtonymie), soit il sagit dun glissement de sens (mtaphore).

Analogie

Symbolique

Licne est une image abstraite.

Arbitraire

Licne est un symbole arbitraire.

Le lien entre licne et son rfrent doit tre le plus direct possible. Pour faciliter la comprhension des icnes, il est prfrable dutiliser des pictogrammes concrets et familiers, comme le montre lexemple suivant.

1.2 Graphisme

19

Dconseill

Prfrable

Figure 1.14 Un graphisme familier facilite linterprtation de licne.

La clart de licne dpend de la rgle de construction employe. En gnral, les icnes descriptives sont les plus faciles comprendre car elles illustrent le fonctionnement de la commande. Au contraire, linterprtation est plus difficile pour les icnes arbitraires . [Mayhew 92] classe les icnes par difficult dinterprtation croissante, comme indiqu figure suivante.

Figure 1.15 Plus le graphisme de licne est abstrait, plus il est difcile interprter.

Recommandations La conception des icnes est dautant mieux russie quelle est aborde une fois toutes les commandes de lapplication identifies. Dans ces conditions, les icnes sont dessines ensemble et non les unes aprs les autres ; cest un facteur dhomognit. Utiliser des icnes pour les objets et les commandes frquemment employs. Lapprentissage des icnes est facilit par le fait que lutilisateur les utilise frquemment. Accompagner licne de son nom. Le texte prcise la signification de licne et facilite ainsi sa comprhension. Mais le libell occupe de la place lcran et surcharge le graphisme. Il est donc recommand de prvoir un affichage la demande par des bulles daide ou en option. Par exemple, certains logiciels permettent de choisir dafficher ou non les textes associs aux icnes.

20

1. Lcran

Figure 1.16 Laisser le choix de lafchage des icnes permet lutilisateur de gagner de la place lcran en afchant uniquement les icnes.

Pour une icne, le texte et le graphisme ont un rle distinct : le texte facilite la comprhension de licne, tandis que le graphisme permet de la reconnatre. Limiter le nombre dicnes. Les exprimentations ont montr quau-del de 12 icnes, leur mmorisation se dgrade. partir de 20, elle devient mauvaise [Mayhew 92].

1.2.4 Techniques de mise en vidence

De nombreux moyens sont la disposition du concepteur pour attirer lattention de lutilisateur sur les objets de linterface : le clignotement, la graisse, linversion vido, la taille, la police de caractres, le soulignage, la forme, les puces, le rapprochement, lencadrement, le son et la couleur Cependant, ces diffrentes techniques ne sont pas quivalentes. Tout le problme est de les utiliser bon escient, de faon cohrente et surtout avec parcimonie. Pour tre efficace, la mise en vidence doit rester exceptionnelle. En effet, les techniques de mise en vidence sont dautant plus efficaces quelles conservent un caractre dexception par rapport laffichage standard. Un emploi abusif a gnralement leffet contraire et pour consquence de disperser lattention de lutilisateur. Limiter le nombre total de moyens de mise en vidence utiliss sur linterface (5 au maximum). La signification des diffrents modes en sera plus facile mmoriser, linterface sera plus facile apprendre. Ne pas utiliser simultanment plusieurs moyens de mise en vidence sur le mme objet.

1.2 Graphisme

21

Lefficacit dune mise en vidence nest pas lie au nombre de moyens utiliss. Qui plus est, la mise en vidence ne doit pas rentrer en conflit avec les autres artifices graphiques utiliss sur linterface. La mise en vidence dun objet ne doit pas affecter la perception de son tat. En particulier, linversion de la couleur de fond et de la couleur de texte (inverse vido) prsente linconvnient de modifier la couleur de base de lobjet. Linformation associe cette couleur est alors perdue. La mise en vidence dun objet doit sarrter ds la disparition de ltat correspondant ou laction de lutilisateur. La mise en vidence reflte ltat dun objet. Il convient cependant que lutilisateur garde le contrle sur ce mode de prsentation. La possibilit doit lui tre offerte dacquitter lvnement, signifiant quil la pris en compte. Nous prsentons ci-aprs les diffrentes rgles suivre pour utiliser correctement les techniques visant mettre en vidence un objet lcran. Clignotement Le systme visuel humain est particulirement sensible aux mouvements, en particulier les cellules situes dans la zone priphrique de la rtine. Si lil fixe lcran et quun objet bouge ou clignote dans une autre partie de lcran situe dans le champ visuel, le cerveau dtecte le mouvement et incite le regard se tourner vers cette source visuelle. En contrepartie, si plusieurs objets clignotent ou se dplacent, lil soblige ne fixer que ceux qui ont un intrt pour lui. Il filtre les donnes traiter. Dans ce cas, le mouvement nattire plus le regard. Cest pourquoi le clignotement doit rester une exception. Il ne peut sappliquer qu un petit nombre dlments de lcran, de prfrence proches les uns des autres. Le clignotement sert attirer lattention sur un objet en priphrie du champ de vision. Il sagit probablement du moyen de mise en vidence le plus efficace. Il convient cependant de lutiliser avec parcimonie car il distrait lattention de lutilisateur et provoque une fatigue visuelle. Il est donc prfrable demployer une frquence lente (2 5 Hz) avec une dure daffichage suprieure celle deffacement. Dans la mesure o le clignotement nuit la lisibilit, il est viter pour les textes. Toutefois, lorsquil nest pas possible de faire autrement, un moyen de

22

1. Lcran

prserver la lisibilit est de mettre en uvre un clignotement par changement de couleur, et non par effacement temporaire. Offrir la possibilit darrter le clignotement. Dans la mesure o il est particulirement attractif, ce mode de mise en vidence est aussi relativement dsagrable. Lutilisateur doit donc pouvoir le contrler. Inversion vido Linversion vido consiste inverser la couleur du fond avec la couleur du texte. Par extension, on considre ici quil sagit de la technique visant modifier la couleur de fond dun texte. Linversion vido permet de faire ressortir une chane de caractres. Ce mode de mise en vidence est assez efficace. Il prsente cependant linconvnient de rduire la lisibilit du texte, en particulier lorsquun fond sombre est employ. Il est donc viter pour des textes longs.

Figure 1.17 Le changement de la couleur du fond met en vidence le texte.

Graisse La graisse permet de mettre en vidence une chane de caractres dans un texte. Ce mode de mise en vidence est moins efficace que linversion vido pour une utilisation similaire. Toutefois, il dnature beaucoup moins lapparence graphique du texte. Il est souvent utilis dans les pages web, o il est trs efficace.

1.2 Graphisme

23

Figure 1.18 Le texte est mis en vidence par une graisse plus paisse.

Taille Ce mode de mise en vidence est assez peu utilis sur les interfaces hommemachine. Cependant, il peut servir reprsenter limportance relative de diffrents objets graphiques. La taille est utile pour les comparaisons relatives. Il convient nanmoins de limiter le nombre de tailles possibles (5 au maximum) afin quelles demeurent faciles diffrencier.

Figure 1.19 La taille permet de comparer rapidement les donnes du schma.

Police de caractres La police permet de distinguer une chane de caractres dans du texte. Ce codage est moins efficace que linversion vido, mais il peut tre utilis pour de longs textes ; par exemple, dans la figure 1.20, le texte de laide se distingue par une police italique.

24

1. Lcran

Figure 1.20 La police de caractre sert ici distinguer le rle jou par chacun des textes de linterface.

Soulignement Le soulignement sert mettre en vidence du texte. Le soulignement rduit la lisibilit. Il est donc viter pour des textes longs. Ce mode de mise en vidence est utilis en association avec la couleur dans les applications internet pour reprsenter les liens.

Figure 1.21 Le soulignement met en vidence une ligne du tableau.

Forme La forme permet didentifier rapidement le type dinformation.

1.2 Graphisme

25

La forme prsente lintrt de prvenir lutilisateur sur le type de donne affiche avant quil ne la lise effectivement. Afin de faciliter la comprhension de ce codage, il convient de dfinir des rgles pour lensemble de lapplication en associant une forme prcise chaque type dinformation.

Figure 1.22 La forme est un moyen de mise en vidence assez riche car elle apporte une connotation additionnelle.

Puces Les puces servent mettre en vidence une ligne et structurer le texte. Ce mode de mise en vidence permet principalement de structurer un texte. Il prsente lintrt de peu surcharger lcran. La puce apparat en dbut de ligne, dans laxe de la lecture. Elle attire le regard sur le texte qui suit.

Figure 1.23 Les puces servent non seulement mettre en vidence les informations importantes mais aussi structurer la prsentation.

Proximit La proximit permet dassocier des informations. Regrouper les informations en les rapprochant les unes des autres est un moyen de mettre en vidence les informations connexes.

26

1. Lcran

(a) Dconseill

(b) Prfrable

Figure 1.24 Des rapprochements mal adapts conduisent une mauvaise interprtation (a). Une fois les informations correctement regroupes, la signication de la fentre apparat plus clairement (b).

Encadrement Lencadrement sert regrouper les donnes et focaliser le regard. Lencadrement est utile pour renforcer la mise en vidence par proximit.

Figure 1.25 Lencadrement permet dassocier diffrentes donnes.

Son Lutilisation dun signal sonore, ventuellement rptitif en cas durgence, est un moyen dalerte trs efficace. En particulier, les alarmes sonores permettent de rappeler lutilisateur son poste de travail si celui-ci est amen le quitter. Le son permet dattirer lattention. Cest probablement le moyen de mise en vidence le plus efficace, car il ne ncessite pas de regarder lcran. Il est donc recommand dans les cas o lutilisateur nest pas constamment face lcran. En contrepartie, il prsente linconvnient dtre peu prcis.

1.3 Langage

27

Restreindre lutilisation des alarmes sonores un usage prcis. Pour tre efficace sans agacer lutilisateur, voire lembarrasser vis--vis de ses collgues de travail, un tel mode de mise en vidence doit tre employ avec parcimonie et des fins prcises. Offrir la possibilit de rgler le niveau sonore. la longue, ce mode de mise en vidence peut devenir agaant, en particulier pour les autres occupants de la pice. Le nombre de sons diffrents doit tre faible (moins de 5). Ils doivent tre distincts en timbre et tonalit. Afin de faciliter la mmorisation et de minimiser leffet perturbant des alarmes sonores, il est prfrable de minimiser le nombre de sons distincts. Couleur La couleur permet de distinguer un objet lcran. En gnral, cest le changement de couleur, plus que la couleur en elle-mme, qui attire le regard. Afin que la couleur mette en vidence un objet, il convient de veiller utiliser une couleur distincte lcran pour laquelle lil est sensible (au centre du spectre visible) et saturer cette couleur. Par exemple, jaune citron, cyan ou vert fluo sont des couleurs qui attirent le regard.

1.3

LANGAGE
Le langage de linterface homme-machine constitue la base mme du dialogue entre lutilisateur et lapplication. Des textes simples et non ambigus facilitent lapprentissage et la mmorisation du logiciel. Ils en garantissent une comprhension correcte. Employer le langage de lutilisateur. Lorsque le langage utilis est connu de lutilisateur, quil lui est familier. Il na pas traduire les termes de linterface homme-machine. La comprhension est plus rapide.

28

1. Lcran

Dconseill

Figure 1.26 Pour la plupart des utilisateurs, ce texte est incomprhensible car il emploie un vocabulaire trop spcialis.

1.3.1 Libell des commandes

Un texte est plus explicite quune icne pour dsigner une commande. Cependant, il prend gnralement plus de place lcran et prsente linconvnient dtre dpendant de la langue. Un seul et unique libell pour chaque commande. Le nom utilis pour chacune des commandes et chacun des objets de linterface doit tre cohrent dans toute lapplication. Utiliser une syntaxe homogne pour le libell des commandes. Il convient en particulier de distinguer par la syntaxe les commandes, les objets ou les tats du logiciel. Cest pourquoi on utilisera de prfrence des verbes linfinitif pour dsigner les commandes, voire un verbe suivi dun substantif sil est ncessaire dtre plus prcis. Au contraire, on emploiera des substantifs pour nommer les tats et les objets de linterface. viter les verbes la forme nominale. Lutilisation dun verbe la forme nominale induit une confusion entre action et tat. Par exemple, la commande Affichage va-t-elle dclencher un processus daffichage (action) ou prsenter les paramtres courants daffichage (tat) ? viter les abrviations. Les abrviations sont source dambigut et ncessitent un effort de mmorisation. Dans la mesure du possible, il est prfrable demployer les mots complets moins quil ne sagisse dune abrviation familire lutilisateur. Cependant, lorsquon ne peut pas faire autrement, il convient dadopter une rgle de construction simple et homogne pour les abrviations. Le tableau 1.4

1.3 Langage

29

indique diffrentes techniques dabrviation qui peuvent tre employes. Il est recommand de terminer labrviation par un point afin de montrer que le mot a t coup.
Tableau 1.4 Rgles de construction des abrviations. Rgle Troncature Premires lettres du mot Effacement des voyelles Initiales du mot Premires lettres et initiales Effacement des voyelles et troncature Mot Rotation Rotation Rotation Rotation vers la droite Rotation vers la droite Rotation Abrviation Rotat. Rot. Rttn RD RotD Rtt.

Lorsque les abrviations sont lisibles, les exprimentations ont montr quelles taient mmorises plus facilement [Mayhew 92]. La taille influence galement la mmorisation : plus le code est court (4 5 caractres), plus il est facile mmoriser. De plus, lhomognit des abrviations, le suivi dune mme rgle de construction, rendent lapprentissage plus ais. Nanmoins, il importe avant tout de vrifier (par un test) que les abrviations sont correctement comprises par lutilisateur.

1.3.2 Messages
Les messages permettent au systme de communiquer explicitement avec lutilisateur soit pour le questionner afin de dterminer les actions venir, soit pour expliquer un fonctionnement. Dfinir le rle et le contenu des diffrents types de messages de faon homogne. Afin de garantir la cohrence de linterface, il convient de mettre en place une typologie claire des diffrents types de messages : message derreur, message de demande de confirmation, message dinformation, etc. et dassocier chacun dentre eux un schma de fentre ainsi quun contenu type. Un message dont la forme ne correspond pas au contenu sme le doute dans lesprit de lutilisateur, comme le montre la figure 1.27.

30

1. Lcran

Dconseill

Figure 1.27 Lorsque la prsentation ne correspond pas au contenu, le message est ambigu.

viter les messages longs lorsque la charge de travail est importante. Un message dont linterprtation prendrait trop de temps risque de ne pas tre lu. Utiliser la barre dtat pour les messages optionnels. La barre dtat tant situe en bas de la fentre, la lecture du message va demander lutilisateur de quitter la zone de travail pour regarder en bas de la fentre. Il est donc difficile de garantir que les messages affichs cet endroit seront lus. Employer une fentre de message lorsquon veut que le message soit lu. Laffichage dune fentre de message, la ncessit de la fermer et le fait quelle masque une partie de la zone de travail, risquent de perturber lutilisateur. Il convient den rserver lusage pour les informations importantes. Afficher le message prs de lobjet auquel il est li. Dans la mesure du possible, le message doit apparatre prs de lendroit o lutilisateur est cens regarder, cest--dire prs de la zone de lcran sur laquelle il attend une modification suite la commande. La rdaction du message doit galement suivre diffrentes rgles visant en faciliter la comprhension et viter les ambiguts. Produire des messages brefs, concis et pertinents. Afin de minimiser le travail de lecture, il importe que le message soit court pour tre lu rapidement et sans ambigut. En effet, plus les informations sont nombreuses, plus le risque de confusion est grand.

1.3 Langage

31

Suite votre demande dimpression, 25 pages du document XXX ont t imprimes. (a) Dconseill

25 pages imprimes.

(b) Prfrable

Figure 1.28 Dans le message (a), linformation attendue par lutilisateur, lavancement de la tche dimpression, est perdue dans le texte, au contraire du message (b) o elle apparat clairement.

Le contenu du message doit tre rduit lessentiel, cest--dire aux seules informations pertinentes pour lutilisateur. titre dexemple ne pas suivre, quapporte le message suivant lutilisateur ?

Dconseill

Figure 1.29 Ce message inutile, et long, a sem le doute chez de nombreux utilisateurs avant dtre retir du logiciel.

Produire des messages clairs, adapts au niveau de connaissance de lutilisateur. Lorsque lutilisateur est expriment, quil se sert frquemment du logiciel, le message indique uniquement la syntaxe de la commande, tandis quil prcisera sa smantique aux utilisateurs dbutants ou dans le cas dune utilisation occasionnelle (figure 1.30).

32

1. Lcran

Valeur Nb billet errone. Dconseill

Utilisateur expriment Erreur : Nb billet doit tre infrieur 10. Utilisateur dbutant Erreur : Nb billet doit tre infrieur 10 au-del de 10, utilisez la rubrique Billets Groups. Prfrable

Figure 1.30 Le message doit tre adapt aux connaissances de lutilisateur.

Construire des messages affirmatifs. La forme affirmative est moins ambigu et plus rapide comprendre que la tournure ngative qui prte confusion.
Vous ne pouvez pas quitter avant de sauvegarder votre session. Dconseill Sauvegardez votre session avant de quitter.

Prfrable

Figure 1.31 La forme afrmative est plus simple comprendre.

Employer la forme active. De mme, la forme active est plus directe et plus facile interprter que le passif.
La grille des programmes est affiche aprs avoir slectionn la chane TV. Dconseill Pour afficher la grille des programmes, slectionnez la chane TV correspondante. Prfrable

Figure 1.32 La forme active est moins ambigu.

Produire des messages constructifs et non critiques. Les messages doivent permettre lutilisateur de comprendre son erreur.

1.3 Langage

33

Dconseill

Prfrable

Figure 1.33 Lorsque le message apporte des lments dexplication, il est plus facile comprendre.

viter les impasses. Le message doit tre constructif et indiquer lutilisateur la marche suivre. Il participe ainsi son apprentissage.
Saisissez votre code. Dconseill Prfrable Saisissez votre code puis Appuyez sur Validation.

Figure 1.34 Le message doit expliquer le mode opratoire et ainsi apprendre lutilisateur se servir du logiciel.

En particulier, lorsquune action est requise, le message doit expliciter laction attendue de la part de lutilisateur.

Figure 1.35 Ce message prcise clairement la cause du problme, mais il nindique que partiellement la faon dy remdier. Une fois le CD-ROM dans le lecteur, que doit faire lutilisateur ?

34

1. Lcran

Respecter lordre dans lequel les actions doivent tre excutes. Lordre dans lequel les actions sont exprimes dans le message doit tre cohrent avec la faon dont elles doivent tre ralises sur le logiciel.

Dconseill

Figure 1.36 Ce message, o les actions raliser sont prsentes dans lordre inverse dexcution, a t source de nombreuses erreurs.

la lecture du message prcdent, en tant quutilisateur, jai plusieurs fois insr le CD-ROM et cliqu sur OK, avant de me rendre compte quil fallait faire linverse pour que la commande sexcute correctement. Un libell du type Pour accder ce document, cliquer sur OK puis insrer le CD-ROM ehmcd-2 aurait vit de nombreuses erreurs.

Prfrable

Figure 1.37 Les actions demandes lutilisateur sont ici prsentes dans lordre dans lequel elles doivent tre ralises. Qui plus est, la fentre de message reste afche tout au long de linteraction vitant lutilisateur de devoir mmoriser la procdure.

1.3 Langage

35

Adopter un vocabulaire homogne. La cohrence des termes utiliss sur linterface facilite sa comprhension et son apprentissage. Afin dtre plus explicite, il est prfrable dutiliser toujours les mmes termes quitte rpter certains mots. Pour cela, un glossaire du vocabulaire utilis dans linterface doit tre dfini et mis jour au cours du projet.
Pour afficher les chanes, slectionner la page Chanes Pour visualiser les programmes des stations TV, activer Programmes Dconseill Pour afficher les chanes TV, slectionner Chanes Pour visualiser les programmes TV, slectionner Programmes Prfrable

Figure 1.38 Un vocabulaire homogne facilite la comprhension.

Rester cohrent avec le reste de linterface. Lorsquune action est requise, il convient de sassurer de ladquation entre le terme utilis et laction utilisateur attendue. Ainsi, le terme Tapez peut tre parfois ambigu, comme le montre lexemple suivant.
Tableau 1.5 Le dernier message est ambigu car il ne prcise pas laction attendue par le logiciel. Message Saisissez votre code Appuyez sur "Enter" Tapez "Enter" Action attendue Saisie clavier Appui sur une touche Appui ou saisie ?

Il convient galement dtre homogne avec le reste du graphisme de linterface, en particulier avec celui des touches du clavier (figure 1.39).

36

1. Lcran

Appuyez sur la touche "Backspace" Dconseill

Appuyez sur la touche " BkSp" Prfrable

Figure 1.39 Le message est plus facile comprendre sil est cohrent avec le reste de linterface, en particulier avec la srigraphie utilise sur le clavier.

Pour conclure, rappelons que la typographie peut aussi permettre une lecture rapide du message. Utilise bon escient, elle facilite grandement la lecture, comme le montre lexemple suivant.
Appuyer sur F1 pour afficher laide et sur F5 pour rafrachir limage Pour afficher laide, Appuyer sur F1 Pour rafrachir limage, Appuyer sur F5 Prfrable

Dconseill

Figure 1.40 Une typographie adapte facilite la lecture des messages.

37

2
Le dialogue homme-machine

ORGANISATION

DU DIALOGUE ...........................................................................................38

CONCEPTION DES FENTRES ................................................................................................41 Multi-fentrage .................................................................................................................41 Fentres de dialogue .........................................................................................................44 Boutons ............................................................................................................................52 Composants de slection ...................................................................................................53 Champs de saisie ..............................................................................................................54 MENUS ..................................................................................................................................58 Avantages et inconvnients ...............................................................................................59 Recommandations.............................................................................................................60 Menus contextuels ............................................................................................................62 TOUCHES DE FONCTION ......................................................................................................64 Avantages et inconvnients ...............................................................................................64 Recommandations.............................................................................................................64 MANIPULATION DIRECTE .....................................................................................................65 Avantages et inconvnients ...............................................................................................66 Recommandations.............................................................................................................67 Souris ...............................................................................................................................71 TEMPS
DE RPONSE ..............................................................................................................73

Le dialogue homme-machine est une mtaphore pour dsigner les changes entre lutilisateur et le logiciel. Ce dialogue prend diffrentes formes appeles modes de dialogue : depuis lappui sur une touche du clavier (touches de fonction) jusqu la manipulation directe des composants de linterface.

38

2. Le dialogue homme-machine

La limite entre les diffrents modes de dialogue nest pas toujours claire. Linterface homme-machine combine gnralement plusieurs modes afin de sadapter aux diffrents utilisateurs et au fait que lutilisateur volue. Par exemple, un menu convient au dbutant lorsquil apprend se servir du logiciel. Ensuite, sil doit lutiliser frquemment, il prfrera les touches de fonction (raccourcis clavier), plus rapides dutilisation. Aprs avoir prsent les rgles suivre pour organiser le dialogue, ce chapitre introduit loutil de dialogue le plus frquemment utilis dans les interfaces : la fentre. Il fournit des conseils afin de concevoir les fentres et choisir leurs composants. Puis les trois autres modes de dialogue sont abords : les menus, les touches de fonction et la manipulation directe. Nous avons omis le langage de commande (par exemple, le Shell Unix ou le Dos) car ce mode de dialogue reste ddi des usages spcifiques. Finalement, nous abordons en fin de chapitre la gestion des temps de rponse.

2.1

ORGANISATION DU DIALOGUE
Organiser le dialogue homme-machine consiste dfinir la faon dont sarticulent les interventions de lutilisateur et du logiciel. Lobjectif est de permettre lutilisateur dexplorer facilement le logiciel pour quil puisse y trouver les fonctionnalits ncessaires sa tche. Lagencement du dialogue est dterminant pour lutilisabilit du logiciel. Il sappuie sur trois principes de base. Le premier principe relve du critre de compatibilit ; la structure du dialogue doit tre adapte lactivit de lutilisateur. Prsenter les commandes et les donnes dans lordre dutilisation. Les commandes doivent apparatre au moment o lutilisateur en a besoin, dans un ordre cohrent par rapport la faon dont elles sont utilises pour accomplir la tche. De mme, la logique de prsentation des donnes doit tre similaire celle habituellement utilise sur les autres supports dont se sert lutilisateur. un niveau plus global, le dcoupage en fentres sappuie sur lanalyse de lactivit de lusager. Le contenu de chaque fentre se dfinit en identifiant les informations ncessaires lutilisateur pour mener bien lactivit laquelle est ddie la fentre.

2.1 Organisation du dialogue

39

Regrouper les informations relatives une mme activit sur la mme fentre. Chaque fentre forme un tout cohrent et apporte linformation ncessaire la tche correspondante. Considrons, par exemple, un logiciel de gestion de magasin.

Figure 2.1 Nous supposons, pour cet exemple, que la tche de gestion du magasin se dcompose en trois sous-tches : tablir le bilan des ventes, vrier les commandes et contrler les stocks.

Chaque fentre de lapplication, voir figure suivante, permet de traiter une des trois sous-tches identifies, la fois en terme de contenu (donnes) et dactions (commandes).

Figure 2.2 Chaque fentre du logiciel est ddie une sous-tche. Elles prsentent lutilisateur les donnes qui vont lui permettre de prendre la dcision requise ce stade et les actions raliser en consquence.

40

2. Le dialogue homme-machine

Le second principe suivre concerne le contrle utilisateur. En rgle gnrale, le dialogue homme-machine ne doit pas tre directif. Lutilisateur doit pouvoir mener le dialogue sa guise. Laisser linitiative du dialogue lutilisateur. En particulier, il convient dviter les impasses, cest--dire permettre de revenir en arrire (Dfaire, Annuler), dabandonner le dialogue ou dinterrompre un traitement en cours. Nanmoins, le dialogue peut parfois tre plus directif lorsque lactivit de lutilisateur est frquemment interrompue ou que la tche se fait en squences rptitives. Le troisime critre respecter dans lorganisation du dialogue hommemachine est le guidage. Guider lutilisateur pour faciliter la navigation. La navigation dans un logiciel est une mtaphore pour dsigner le cheminement au sein des diffrents menus et fentres de linterface homme-machine. Quand la navigation est complexe, les choix sont nombreux, la mmoire court terme est rapidement sature. Lutilisateur a des difficults savoir o il est et par o il est pass. Il est ncessaire de laider sorienter. Pour cela, linterface peut, par exemple, afficher une trace du chemin parcouru en prsentant les diffrents choix quil a effectus. Cette technique est frquemment utilise dans les applications web (chemin de progression).

Figure 2.3 En afchant la trace des options choisies, le site montre lutilisateur le chemin quil a parcouru.

La vue hirarchique permet galement de sorienter dans une grande quantit dinformations en fournissant la fois une vue globale sur lorganisation de lensemble des donnes et une vue prcise sur lobjet qui intresse lutilisateur. LExplorateur Windows sappuie sur ce principe. Larborescence de fichiers, affiche dans la partie gauche de lExplorateur, fournit une vue globale sur les donnes stockes en mmoire et indique le chemin parcouru pour atteindre le rpertoire slectionn. Dans la partie droite, lutilisateur

2.2 Conception des fentres 41

Figure 2.4 LExplorateur Windows permet lutilisateur de mieux se reprer en prsentant la fois lensemble des chiers (vue globale) et des informations dtailles sur celui qui intresse lutilisateur (vue de dtail). Lorsque les donnes sont prsentes dans leur contexte, elles sont plus faciles interprter, car moins ambigus.

visualise lintgralit du contenu du rpertoire, tandis quau centre saffiche une description dtaille de lobjet slectionn.

2.2

CONCEPTION DES FENTRES

La plupart des interfaces homme-machine utilisent des fentres, cest--dire que lcran est dcoup en plusieurs zones gres de manire indpendante par un logiciel de multi-fentrage. Chaque fentre regroupe un ensemble dobjets qui vont servir doutils au dialogue entre lutilisateur et le logiciel.

2.2.1 Multi-fentrage
Deux modes daffichage des fentres sont possibles : par tuilage ou par recouvrement. Le tuilage est une organisation fixe des fentres sans possibilit de dplacement. Au contraire, le multi-fentrage par recouvrement, gnralement employ, permet lutilisateur de dplacer les fentres.

42

2. Le dialogue homme-machine

Avantages et inconvnients Le principal avantage du multi-fentrage est la flexibilit quil offre : lutilisateur organise lespace de travail selon la tche raliser. Dans la mesure o les fentres prsentent plusieurs parties de lcran indpendamment les unes des autres, elles permettent de mener diffrentes activits en parallle, par exemple effectuer les commandes dans une fentre et visualiser le rsultat dans une autre, comparer le contenu de deux fentres ou encore visualiser un point prcis dans une fentre tout en conservant une vue globale dans une autre. Le multi-fentrage offre galement lintrt de fournir plusieurs vues ou reprsentations du mme objet applicatif, le code dans une fentre et le rsultat gnr dans une autre, par exemple. Le principal inconvnient du multi-fentrage est quil ncessite un certain apprentissage des commandes dutilisation des fentres. Des exprimentations ont montr que le multi-fentrage ne prsentait vritablement un gain que pour les utilisateurs expriments [Mayhew 92]. Le multi-fentrage par recouvrement pose le problme de la visibilit des fentres, les unes recouvrant les autres. linverse, en cas de tuilage, si lespace fait dfaut, lutilisateur doit se servir des barres de dfilement, chose fastidieuse. Recommandations Lutilisation des fentres ne doit pas perturber la tche mtier . La gestion des fentres relve de la tche dutilisation de linterface proprement dite. Plus elle sera simple, plus linterface semblera facile utiliser. Les diffrentes commandes lies au multi-fentrage, cest--dire lactivation, louverture, la fermeture, la rduction et le dplacement des fentres, doivent tre la fois faciles utiliser et faciles apprendre. Faciliter lactivation et louverture des fentres. Les commandes dactivation et douverture des fentres permettent lutilisateur de se dplacer, de naviguer , dans linterface. Ce sont les commandes les plus frquemment utilises. Il convient donc de les rendre faciles dutilisation, en permettant par exemple louverture rapide de la fentre par un double-clic ou lactivation cyclique des fentres de lapplication (Alt+Tab sous Windows).

2.2 Conception des fentres 43

Les commandes dorganisation des fentres doivent tre faciles mmoriser. Comparativement aux fonctions de navigation, les commandes dorganisation des fentres, telles que le dplacement, le dimensionnement et la rduction des fentres, sont employes moins souvent, et en gnral uniquement en dbut de session. Il est donc recommand den faciliter lapprentissage. Mettre en vidence la fentre active. Du fait de son rle spcifique, cette fentre doit pouvoir se distinguer clairement du reste de lapplication. Utiliser le tuilage pour les utilisateurs occasionnels, lorsque les sorties sont prvisibles et que lcran est suffisamment grand. Imposer un arrangement fixe des fentres est une perte de flexibilit, mais rend linterface simple utiliser et facile apprendre. Il convient aux utilisateurs novices en informatique connaissant mal la manipulation des fentres. Il est toutefois recommand de sassurer que lapplication autorise ce type de fentrage en vrifiant que toutes les informations peuvent tre affiches lcran sans demander lutilisateur de se servir des barres de dfilement. Autoriser les recouvrements de fentres pour les utilisateurs expriments, lorsque les sorties ne sont pas prvisibles ou les crans petits. Le multi-fentrage par recouvrement offre lintrt de permettre lutilisateur dorganiser lui-mme son espace de travail. Autoriser la mmorisation dun arrangement de fentres. Bien entendu, pouvoir organiser son gr larrangement des fentres nest un vritable gain que dans la mesure o cette opration na pas tre rpte chaque nouvelle session. Moins il y a de fentres, plus elles sont complexes. Le nombre de fentres est inversement proportionnel la complexit de chacune dentre elles. Pour la mme quantit dinformation, lorsque le nombre de fentres diminue, le contenu de chacune dentre elles augmente. Elles deviennent donc plus difficiles utiliser.

44

2. Le dialogue homme-machine

Augmenter le nombre de fentres pour une utilisation peu frquente. primtre constant, lorsque les fentres sont nombreuses, elles affichent moins de donnes. Elles sont individuellement plus simples et plus claires, donc plus faciles apprendre. Diminuer le nombre de fentres en cas dutilisation frquente. Lutilisation rpte du logiciel aide lutilisateur assimiler la complexit de chaque fentre. Ce dernier apprciera la rduction des oprations de fentrage, qui lui permettra de gagner en rapidit. Minimiser la quantit dinformations mmoriser dune fentre lautre. Afin de rduire le travail de mmorisation, il est prfrable que toutes les informations relatives une tche soient places dans une mme fentre.

2.2.2 Fentres de dialogue

La fentre de dialogue permet lutilisateur de consulter et de modifier un ensemble de donnes. Une fois les modifications faites, des boutons servent dclencher un traitement sur la base des paramtres dfinis dans la fentre.

Figure 2.5 Fentre de dialogue.

2.2 Conception des fentres 45

Avantages et inconvnients Ce composant se retrouve dans la plupart des interfaces homme-machine. Il prsente lintrt dtre facile comprendre. En effet, le fonctionnement du logiciel transparat au travers de la fentre. Des textes ou des graphiques peuvent expliquer le lien entre les diffrentes donnes saisir et le rle de chacune dentre elles. Qui plus est, la fentre de dialogue est contextuelle, cest--dire quelle fournit le contexte de linteraction. Lutilisateur voit ce qui a t saisi et ce quil reste saisir. Le risque derreur est rduit car, en gnral, seules les actions autorises sont actives, les champs non valides restant griss. Finalement, la fentre de dialogue est facile mmoriser. Lutilisateur se souvient de la position respective des champs. Il utilise sa mmoire spatiale. On relvera cependant deux inconvnients. Dune part, le dialogue est contrl par le systme. Lutilisateur ne matrise pas le contenu de la fentre, qui limite le cadre de linteraction. Dautre part, les champs de saisie, et autres composants qui apparaissent dans les fentres de dialogue, sont autant de sources derreur. En rsum, du fait quelles sont faciles comprendre, les fentres de dialogue conviennent aux utilisateurs occasionnels. Cependant, elles demandent une certaine connaissance du logiciel du fait des composants varis quelles contiennent. Par ailleurs, dans la mesure o elles imposent une certaine rigidit au dialogue, les fentres de dialogue sont principalement adaptes une tche structure. Recommandations Le contenu dune fentre doit tre adapt lattente de lutilisateur. Il est important de ne pas saturer son attention par laffichage de donnes inutiles, voire de ne pas masquer certaines informations importantes par des affichages superflus. Prsenter uniquement les informations pertinentes vis--vis de la tche. Par exemple, les fentres suivantes (figure 2.6) prsentent le rcapitulatif dune commande [Mayhew 92]. Celle de gauche ne permet pas de diffrencier les articles. linverse, droite, chaque article est dcrit selon les critres de choix de lutilisateur : la couleur, la taille et la quantit. Linformation prsente est celle qui intresse lutilisateur lorsquil vrifie sa commande. Cependant, pour cela, un compromis a d tre fait : le libell de larticle a t rduit afin de pouvoir afficher plus dinformations.

46

2. Le dialogue homme-machine

Dconseill

Prfrable

Figure 2.6 Il nest utile dafcher une information que si elle rpond une question que se pose lutilisateur. Au contraire, la fentre de gauche, conduit lutilisateur se demander pourquoi des articles semblables ont des prix diffrents.

Une fois le contenu de la fentre dfini, il sagit darranger les diffrents composants les uns par rapport aux autres. Prsenter les composants dans lordre dutilisation. Lordre de saisie le plus naturel est le sens de la lecture, cest--dire de haut en bas et de gauche droite. Ainsi la saisie est plus rapide car les composants de la fentre sont lus dans lordre o lutilisateur en a besoin. Minimiser les dplacements de la souris. Lorsque les composants de la fentre sont proches les uns des autres et faciles slectionner, le mouvement de la souris est plus rapide. Il est conseill de prvoir galement une saisie au clavier car cest un mode de dialogue rapide. Cependant, il est source derreur et doit donc tre propos pour les utilisateurs expriments comme une alternative la souris. Faciliter laccs aux composants de la fentre les plus frquemment utiliss. La saisie dans une fentre est globalement plus rapide lorsque les composants les plus frquemment utiliss sont faciles slectionner.

2.2 Conception des fentres 47

Mettre en vidence les lments les plus importants. Les lments cls de la fentre doivent apparatre clairement aux yeux de lutilisateur.

Dconseill

Prfrable

Figure 2.7 Un agencement adapt de la fentre facilite son utilisation et minimise les risques derreur.

Ci-dessus, la fentre de droite a t rorganise en appliquant les principes dorganisation noncs prcdemment. Les diffrents champs sont prsents dans lordre de la saisie : tout dabord le nom du document, puis le nombre de copies ainsi quventuellement la plage dimpression, lorientation et les informations annexes (annotations et rsum). Finalement, les boutons en bas de la fentre servent dclencher la commande. Laffichage de valeurs par dfaut et lutilisation de boutons pour choisir le nombre de copies permettent dviter des erreurs de saisie. Linformation la plus frquemment utilise, le nom du document, est visible en premier, en haut de la fentre. Par ailleurs, les informations importantes telles que le titre de la fentre ou le nom du document sont mises en vidence par une police grasse et un positionnement central. Il est noter quun problme dutilisabilit a aussi t corrig puisquil ntait pas possible dabandonner le dialogue dans la fentre de gauche. Regrouper les commandes en fonction de leur sens ou de lobjet auquel elles se rapportent. Plus le nombre dlments lcran est important, plus le temps de recherche augmente. Lorsque les informations sont regroupes, la lecture de la fentre est plus facile car lutilisateur y trouve plus rapidement ce quil cherche.

48

2. Le dialogue homme-machine

Diffrents artifices graphiques permettent de constituer des groupes, par exemple des espaces de sparation, un cadre autour du groupe ou un fond de mme couleur.

Dconseill

Prfrable

Figure 2.8 Le regroupement facilite la comprhension de la fentre. Pour cela, plusieurs artices typographiques ont t mis en uvre : le rapprochement, lencadrement et la police de caractres.

Donner un titre chaque groupe dobjets. Le titre guide la lecture de la fentre (voir figure 2.9). Toutefois, il augmente la taille du groupe. Un compromis doit tre trouv entre la taille de la fentre et le guidage induit par les titres. Puisquil sagit dun lment de signaltique particulier, le titre se distingue par une typographie diffrente. La position du titre est aussi un lment distinctif, par exemple une indentation ou un centrage. Par ailleurs, un alignement rgulier des lments de la fentre facilite la lecture. Cest galement un vecteur de prfrence car il confre une esthtique plus harmonieuse la fentre. Cependant, il ne garantit pas une rduction du temps de recherche [Tullis 88]. De tous les composants de linterface, la fentre est celui qui va faire lobjet de la lecture la plus attentive de la part de lutilisateur. Elle doit lui fournir les informations ncessaires pour mener bien sa tche et uniquement celles-ci. Les donnes superflues, en dehors du contexte de la tche courante vont surcharger inutilement laffichage.

2.2 Conception des fentres 49

Figure 2.9 Les titres rendent explicites le rle des diffrents groupes dobjets de la fentre.

viter les fentres trop verbeuses. Il importe de veiller nafficher que les donnes pertinentes, cest--dire celles dont se sert lutilisateur pour raliser la tche laquelle est ddie la fentre. Trop dinformations vont non seulement accrotre le temps de lecture, mais aussi induire des difficults de comprhension.

Dconseill

Figure 2.10 Lorsque la fentre est trop riche, lutilisateur est perdu. Plutt que dafcher la totalit des informations, il est prfrable de faire un tri.

50

2. Le dialogue homme-machine

Fournir une aide contextuelle. Un bon moyen de fournir des informations lutilisateur sans surcharger linterface est dafficher une aide contextuelle dans la barre dtat de la fentre. Le texte de laide ne sy affiche que lorsque le pointeur souris est au-dessus du champ concern. Aucun affichage supplmentaire ne vient masquer la zone dintrt de lutilisateur. Il ne lira le message quen cas de besoin. Lexemple suivant montre comment laide contextuelle permet de diminuer de manire sensible le contenu de la fentre.

Dconseill

Prfrable

Figure 2.11 La fentre de droite est moins charge car le texte explicatif nest afch qu la demande lorsque lutilisateur place le pointeur souris au-dessus du champ concern. Ainsi, le message daide peut tre plus riche sans surcharger la zone de travail.

Utiliser des titres courts et non ambigus. Dans une fentre de dialogue, les titres sont des lments de guidage. Ils permettent lutilisateur de sorienter efficacement dans la mesure o ils peuvent tre lus rapidement et correctement compris. Uniformiser les termes et la syntaxe employs dans toutes les fentres de lapplication. Lemploi dun vocabulaire cohrent sur lensemble de linterface facilite lapprentissage du logiciel.

2.2 Conception des fentres 51

Diminuer les saisies clavier. Le principal inconvnient des fentres de dialogue est lutilisation du clavier pour les saisies, car ce dernier est source derreur. Il est donc conseill de proposer galement une saisie la souris : listes de slection, boutons radio ou cases cocher. Optimiser loccupation de lcran. Plus la fentre contient dobjets, plus elle prend de place lcran. Lutilisation des onglets permet de regrouper un grand nombre de donnes dans une mme fentre. Il convient toutefois de veiller ce que les diffrents onglets soient cohrents vis--vis de la tche de lutilisateur et que ce dernier nait pas se souvenir de la valeur dun paramtre dune page lautre.

Figure 2.12 Les onglets permettent de gagner de la place lcran.

Permettre un accs rapide et direct aux utilisateurs expriments. Lutilisation de la fentre peut tre fastidieuse pour les utilisateurs expriments. Des raccourcis claviers, vont permettre de rendre plus rapide laccs aux fonctions les plus frquemment utilises. Guider lutilisateur. Lapprentissage de la fentre de dialogue est facilit par des textes explicatifs et laffichage de messages contextuels dans la barre dtat.

52

2. Le dialogue homme-machine

2.2.3 Boutons
Un bouton sert dclencher une commande par un clic souris. Il prend lapparence grise lorsquil est inactif. Son principal intrt est de permettre un accs rapide aux commandes.

Figure 2.13 Bouton.

Employer des boutons pour les commandes frquemment utilises. Le bouton tant visible en permanence, il est accessible immdiatement. Il demande un seul clic pour dclencher la commande. Le gain en rapidit qui en rsulte est dautant plus sensible que la commande est utilise frquemment. Prciser lintitul de la commande en toutes lettres dans ltiquette du bouton. Il convient dindiquer la fonctionnalit associe au bouton afin de guider lutilisateur en lui permettant de prvoir les rsultats de son action. Il est prfrable de prciser explicitement ce que fait le bouton, par exemple Imprimer ou Ouvrir plutt que demployer un terme gnrique qui nest gnralement pas lu, comme Ok ou Valider. Les menus, que nous prsentons plus loin, permettent, tout comme les boutons, de dclencher une commande par slection. Leur rle est semblable. Aussi, lors de la conception de linterface, la question se pose frquemment de savoir sil convient de choisir un menu ou un bouton. Le tableau suivant fournit des critres de choix.
Tableau 2.1 Critres de choix entre un bouton et un menu. Conserver lattention sur la zone de travail Bouton Menu contextuel Menu droulant X Visibilit constante X Commandes frquentes X X X X X Place rduite Utilisateur dbutant X

2.2 Conception des fentres 53

La principale diffrence entre le menu (voir 2.3) et le bouton est son caractre phmre ; il napparat que sur action de lutilisateur et disparat ds slection dun item. Les menus sont donc particulirement utiles lorsque lcran est charg.

2.2.4 Composants de slection

Dans une fentre, diffrents composants vont permettre de choisir parmi un ensemble de donnes : les boutons de slection, que lon appelle boutons radio ou case cocher selon que les choix sont exclusifs ou non, la liste de slection et la liste simple.

Boutons de slection

Liste de slection

Liste

Figure 2.14 Le nombre de choix possibles et la place libre lcran sont les principaux critres de choix dun composant de slection.

Utiliser les boutons de slection pour des choix frquents et peu nombreux. Le principal intrt du bouton de slection (bouton radio ou case cocher) est le fait quil offre un accs direct aux diffrents choix et quil reste visible en permanence. En contrepartie, il occupe de la place lcran. Employer la liste de slection lorsque la place est rduite et les choix peu frquents. La liste de slection peut contenir plus de choix. Mais ils sont dun accs moins direct que les boutons de slection (2 clics). Cependant, elle prsente lavantage doccuper moins de place lcran. Utiliser la liste lorsque lensemble des choix possibles est variable. La liste peut contenir un grand nombre dlments. Elle est particulirement utile lorsque lon ne connat pas a priori le nombre de choix possibles, mais la slection y est difficile car lutilisateur doit se servir des barres de dfilement.

54

2. Le dialogue homme-machine

Prsenter verticalement les composants de slection. Il est prfrable de disposer les lments de choix verticalement afin de rduire le temps de recherche en minimisant les mouvements oculaires effectus lors de la comparaison. Le tableau 2.2 rsume les diffrents critres de choix dun composant de slection.
Tableau 2.2 Choix des composants de slection. Jusqu 5-6 choix Bouton de slection Liste de slection Liste X X X X X X Jusqu 10-12 choix Place rduite Plus de 12 choix Les choix peuvent changer

2.2.5 Champs de saisie

Le champ de saisie permet lutilisateur de fournir des informations au logiciel. Lorsquil remplit un champ de saisie, lutilisateur se focalise sur cette petite zone de lcran. Il convient donc dtre attentif placer dans cet espace rduit toutes les donnes ncessaires une saisie correcte.

Figure 2.15 Champs de saisie.

Choisir les libells les plus courts possible. Le texte de ltiquette est gnralement un compromis entre la comprhensibilit du mot et sa longueur.

2.2 Conception des fentres 55

Prsenter les champs de saisie de faon cohrente par rapport aux autres supports de travail. Lutilisateur commet moins derreurs lorsquil retrouve sur linterface un arrangement qui lui est familier.

Dconseill

Prfrable

Figure 2.16 Un agencement habituel des champs de saisie rduit le risque derreur.

Proposer par dfaut la valeur la plus courante. La saisie ncessite une certaine habitude du clavier. Elle est souvent perue comme une activit fastidieuse plus forte raison quand elle est rptitive. Il est donc recommand de pr-remplir le champ avec la valeur la plus frquente ou bien la dernire valeur saisie. ventuellement, une liste historique peut aussi donner accs lensemble des dernires saisies.

Figure 2.17 Lhistorique vite de ritrer les saisies.

Prvenir des erreurs de saisie. Les saisies au clavier sont source derreur. Il est prfrable dviter les saisies mixtes majuscules et minuscules ou lettres et chiffres, ainsi que les saisies inutiles, comme un zro en tte de chiffre. La saisie peut aussi se faire par manipulation directe avec une barre de dfilement. Ainsi la valeur est toujours exacte car elle appartient ncessairement lintervalle prdfini. Cependant, par rapport un champ de saisie, ce type de dialogue est moins prcis et peu rapide.

56

2. Le dialogue homme-machine

Figure 2.18 Une barre de dlement permet dviter les erreurs de saisie, mais elle est moins rapide quune saisie au clavier.

Laisser lutilisateur choisir les units. La saisie est plus facile lorsque lutilisateur travaille selon ses habitudes ; il commet moins derreurs et apprend plus facilement.

Figure 2.19 Des erreurs sont vites lorsque lutilisateur choisit lui-mme les units.

Les problmes dutilisabilit qui apparaissent gnralement avec les champs de saisie proviennent de difficults de comprhension plus forte raison lorsque la fentre est utilise peu souvent. Il convient dtre particulirement attentif au guidage offert par les champs de saisie. Prciser le format de la saisie. Selon les cas, on indiquera, si ncessaire, les units, la syntaxe ou le nombre de caractres maximum du champ.

Figure 2.20 Les indications guident lutilisateur dans la saisie.

2.2 Conception des fentres 57

Indiquer les champs de saisie optionnels et ceux qui sont obligatoires. Distinguer par une prsentation diffrente les champs facultatifs de ceux qui sont obligatoires aide lutilisateur comprendre le fonctionnement du systme et lui vite des erreurs. Guider lutilisateur dans la saisie. Lorsque lapplication le permet, il est conseill dassocier une liste de slection au champ de saisie. En effet, ce composant fournit les valeurs possibles du champ. Il nest plus ncessaire de saisir au clavier, il suffit de slectionner la valeur souhaite dans la liste. En limitant la frappe, ce composant rduit sensiblement le risque derreur. Finalement, lors de la conception dune interface homme-machine, la question se pose frquemment de savoir comment aligner les tiquettes et les champs de saisie. Analysons les diffrents cas de figure.

Dconseill

Figure 2.21 La saisie est difcile car les champs ne sont pas aligns.

Les champs de saisie ne sont pas aligns. la lecture, le dbut de chaque champ doit tre recherch, la saisie est ralentie.

Dconseill

Figure 2.22 Les champs sont loigns des tiquettes ; des erreurs sont craindre.

La distance entre les premiers labels et la zone de saisie correspondante est consquente. Les mouvements oculaires sont importants. Des erreurs de parallaxe sont craindre.

58

2. Le dialogue homme-machine

Dconseill

Figure 2.23 Le risque de confusion est moindre mais linterface est charge.

Les points de suite limitent les risques derreur, mais les mouvements oculaires demeurent importants et linterface est charge.

Prfrable

Figure 2.24 Le lien entre ltiquette et le champ apparat clairement.

Cette prsentation rduit les mouvements oculaires ainsi que les risques de confusion. Mis part son esthtique, cest la solution passe-partout si lon ne peut pas rduire les tiquettes.

Prfrable

Figure 2.25 Lorsque ltiquette peut tre rduite, cette prsentation facilite la lecture et rduit le temps de saisie.

Par contre, sil est possible duniformiser la taille des tiquettes, la justification gauche de lensemble facilitera la lecture ainsi que la saisie. La distance tant rduite, les risques de confusion sont moindres.

2.3

MENUS
Le rle dun menu est de prsenter, de manire groupe, un ensemble de commandes. Il peut prendre deux formes. Sil apparat au-dessus de lobjet de linterface qui vient dtre slectionn, cest un menu contextuel. Lorsquil est appel depuis la barre de menu de la fentre, cest un menu droulant.

2.3 Menus

59

Menu contextuel

Menu droulant

Figure 2.26 Les menus.

2.3.1 Avantages et inconvnients

En terme dutilisabilit, les menus offrent diffrents avantages. Dune part, ils sont faciles comprendre. Ils prsentent au mme niveau lensemble des commandes disponibles un moment donn. Si certaines dentre elles ne sont pas autorises, elles apparaissent inactives, en gris, dans le menu. Le fonctionnement du logiciel est ainsi expliqu lutilisateur. Dautre part, les menus sont faciles mmoriser, car lutilisateur se souvient de la position de la commande dans le menu. Finalement, les erreurs sont moins nombreuses puisque la saisie est plus simple : une slection la souris. Les menus droulants offrent lintrt dtre constamment accessibles depuis la barre de menu. Lutilisateur gardant ainsi sous les yeux les titres des menus, la mmorisation est facilite. Par ailleurs, le comportement des menus droulants permet de les passer rapidement en revue. Lutilisateur peut ainsi explorer les diffrentes fonctionnalits proposes. Toutefois, linconvnient du menu est son manque de rapidit. En effet, louverture du menu, le dplacement de la souris, puis la slection de la commande prennent du temps et ncessitent une certaine prcision. De plus, le dialogue est ici contrl par le systme, puisque lutilisateur ne peut choisir que dans lensemble de commandes proposes par le menu. Par ailleurs, les menus sont

60

2. Le dialogue homme-machine

inadapts lorsque le nombre de choix est trop important. Finalement, la barre de menu prend de la place lcran, tandis que le menu lui-mme peut masquer certains objets de linterface. Peu rapides, les menus sont simples utiliser et faciles comprendre. Ils conviennent aux utilisateurs occasionnels ou dbutants.

2.3.2 Recommandations
Le principal intrt du menu est de faciliter lapprentissage du logiciel. Il remplit parfaitement ce rle lorsque la tche est bien structure. Dans ce cas, il est possible dassocier aux diffrentes activits de lutilisateur un menu ou une partie dun menu. Ajuster la structure des menus lactivit de lutilisateur. Le menu guide lemploi du systme. Lutilisateur se repre facilement lorsque le fonctionnement du logiciel, reprsent au travers de larborescence de menus, concide avec son activit, chaque menu fournissant une rponse la problmatique de chaque opration. Minimiser la taille des menus. Il est conseill de ne pas dpasser 10 choix par menu lorsque les utilisateurs sont dbutants. Le menu peut tre plus long pour des utilisateurs expriments, jusqu 20 lments sils sont simples et quils peuvent tre groups. Au-del de ces valeurs, il convient de crer des sous-menus. Organiser les menus en largeur dabord : minimiser la profondeur. Les sous-menus permettent de dcouper un menu en plusieurs niveaux. La manire de dcomposer le menu influe sur le temps daccs un item. [Miller 81] a montr que les performances sont meilleures avec un menu en largeur plutt quen profondeur. Pour 64 options, la structure optimisant les temps daccs possde 2 niveaux et 8 options par item. Le taux derreur est le plus important pour 6 niveaux avec 2 options par item, tandis que le temps de slection est maximum avec 1 niveau 64 choix.

2.3 Menus

61

Organiser le menu selon lutilisation. Lorganisation des menus sappuie sur trois principes : Squentialit : Les items apparaissent dans lordre dans lequel ils sont utiliss. Frquence dusage : Les items les plus frquemment utiliss sont placs en haut du menu. Importance : Les items les plus importants sont placs en tte de liste ; les autres suivent par ordre dcroissant dimportance. La faon dordonner les items doit tre cohrente et rapidement comprise par lutilisateur. Les commandes effet destructeur sont distinctement spares des autres et places en bas du menu. Slectionner litem voisin de celui quon voulait choisir est une erreur frquente sur un menu. Il faut absolument viter que ce voisin ne soit destructeur par erreur. Cest pourquoi les commandes Effacer ou Quitter seront systmatiquement spares du reste du menu par un trait. Les commandes non disponibles saffichent en gris dans le menu. Lutilisateur comprend mieux le fonctionnement du systme lorsque les commandes non disponibles saffichent dans une couleur diffrente des autres. Il identifie et mmorise ainsi les fonctionnalits autorises selon ltat du systme. Lorsque lutilisateur est plus expriment, il est envisageable de ne pas afficher les commandes non disponibles. La taille du menu est rduite, offrant de cette manire un gain en rapidit.

62

2. Le dialogue homme-machine

Le titre de la fentre doit tre cohrent avec litem du menu. Le fait que le titre dune fentre soit le mme que le nom de litem du menu qui a permis de louvrir est non seulement un facteur dhomognit, mais aussi un moyen de guidage qui concourt faciliter lapprentissage du logiciel.

Figure 2.27 Lorsque le titre de la fentre est cohrent avec litem du menu correspondant, lutilisateur tablit le lien entre la slection de la commande et lafchage de la fentre.

Permettre un accs rapide et direct aux commandes frquentes par des raccourcis clavier. Lutilisation des menus est parfois fastidieuse car lutilisateur doit cliquer au moins deux fois pour dclencher une commande, ce qui constitue finalement une perte de temps importante lorsque lopration est frquemment ritre. Des raccourcis clavier, cest--dire lappui simultan sur plusieurs touches, permettent de rendre linteraction plus rapide. Cependant, ils sont difficiles apprendre, cest pourquoi il est conseill dindiquer le nom du raccourci dans le menu, afin que lutilisateur puisse le mmoriser facilement.

2.3.3 Menus contextuels

Le menu contextuel, appel aussi pop-up menu, permet daccder directement un ensemble de commandes. Il apparat lendroit du clic sous le pointeur souris. Son contenu varie selon le composant slectionn, voire selon ltat de lobjet.

2.3 Menus

63

Figure 2.28 Menu contextuel.

La commande dclenche par le biais du menu contextuel sapplique lobjet slectionn. Cest le principe de la manipulation directe : lutilisateur agit directement sur lobjet quil slectionne. Utiliser un menu contextuel pour les commandes rapides et frquentes ncessitant de maintenir lattention sur la zone de travail. Lintrt du menu contextuel est de minimiser les actions utilisateur et les dplacements de la souris. Il prsente ct de lobjet slectionn la liste des actions possibles. Activer une commande par le menu contextuel vite de dplacer le pointeur lautre bout de lcran pour ouvrir un menu droulant ou pour cliquer sur un bouton. Lutilisateur conserve lobjet dans son champ de vision et maintient son attention sur la zone de travail. Le menu contextuel est un bon moyen dconomiser de la place dans un cran charg. Cependant, rien nindique lutilisateur quun composant est susceptible douvrir un menu contextuel. Mettre en vidence les objets susceptibles douvrir un menu contextuel lorsque le pointeur souris passe au-dessus. Pour les applications complexes, lapprentissage des diffrentes zones dappel de menu contextuel peut prendre un certain temps. Les menus contextuels sont viter pour des commandes occasionnelles. En effet, les menus contextuels vont ncessiter un certain apprentissage. Ils sont gnralement apprcis par les utilisateurs expriments. Par contre, il est conseill de fournir un autre mode daccs pour les dbutants (ex. menu droulant).

64

2. Le dialogue homme-machine

2.4

TOUCHES DE FONCTION
Le clavier alphanumrique permet un accs direct certaines commandes. Les touches gnralement utilises pour cela sont les touches de fonction situes sur la ligne du haut du clavier. Par extension, on appelle touche de fonction le mode de dialogue consistant utiliser le clavier pour activer des commandes.

2.4.1 Avantages et inconvnients

Le principal intrt de ce mode de dialogue est dtre facile utiliser et surtout rapide. Il suffit dun simple appui pour dclencher la commande. Lutilisateur contrle le dialogue. Il dcide lui-mme des commandes dclencher. Par ailleurs, les touches de fonction permettent de gagner de la place lcran. Cependant, il est parfois utile dafficher lintitul des touches dans le bas de lcran, sil nest pas inscrit sur la touche elle-mme. Lorsquelles sont peu nombreuses, les touches de fonction sont faciles apprendre condition toutefois que lintitul des touches soit explicite et quaucune combinaison de plusieurs touches (appui simultan) ne soit requise. Dans ces conditions seulement, ce mode de dialogue est facile mmoriser. Finalement, il est assez peu sujet erreur dans la mesure o laction demande (un appui) est relativement simple. Par contre, ce mode de dialogue prsente linconvnient de sa simplicit, savoir quil est rapidement limit par le nombre de touches disponibles. Il dpend du clavier utilis, ce qui peut poser des problmes de compatibilit dans certains cas. Par ailleurs, il ne peut couvrir quun nombre limit de fonctionnalits. Les touches de fonction conviennent aux utilisateurs occasionnels lorsquelles sont utilises en petit nombre et que les libells sont explicites. Par contre, il peut tre mis en uvre avec un plus grand nombre de touches pour des utilisateurs expriments qui apprcieront, au prix dun effort dapprentissage, la rapidit dutilisation et le contrle du dialogue. Une fois acquises, les touches de fonction vont permettre de rduire sensiblement le temps dexcution des commandes. Cest la raison pour laquelle elles sont frquemment employes dans les applications professionnelles.

2.4.2 Recommandations
Rserver les touches de fonction aux commandes frquentes et gnriques. Il est intressant de permettre un accs rapide aux commandes qui se retrouvent diffrents niveaux de lapplication ou dans plusieurs fentres, telles que Valider, Fermer ou Imprimer.

2.5 Manipulation directe

65

Utiliser la mme touche pour les couples de commandes. Lorsquune commande fonctionne en bascule la manire dun interrupteur, elle est plus simple apprendre lorsque le mme moyen de dialogue donne accs aux deux fonctionnalits, par exemple : Ouvrir et Fermer. Placer les commandes les plus frquentes aux positions les plus accessibles. Placer les commandes risque des positions daccs plus difficile. En associant ainsi les commandes aux touches selon leur degr daccessibilit, laccs aux commandes frquentes est rendu plus facile, tandis que les commandes importantes sont protges. Sur un clavier, les touches les plus accessibles sont celles de la range du bas : la barre despace, les touches Ctrl et Alt. Sur une range de touches, celles situes aux extrmits sont les plus faciles atteindre, tandis que dans une matrice les touches dangle sont les plus accessibles.

Figure 2.29 En rgle gnrale, les touches les plus accessibles sont aux extrmits.

Placer les touches de fonction de faon cohrente par rapport aux objets correspondants lcran. Lorsque les touches contrlent des composants de lcran, il est recommand que leurs positions respectives soient homothtiques, afin den faciliter lapprentissage.

2.5

MANIPULATION DIRECTE
La manipulation directe est le mode de dialogue utilis sur la plupart des interfaces graphiques disposant dune souris ou dun autre moyen de pointage. Avec une interface manipulation directe, lutilisateur agit directement : il dsigne lobjet,

66

2. Le dialogue homme-machine

puis il slectionne la commande. Ce mode de dialogue sappuie sur la mtaphore du monde physique qui veut que lutilisateur se serve du logiciel de la mme manire quil utilise les objets du monde rel : en les manipulant . Pour cela, lobjet sur lequel porte laction est visible lcran en permanence. La commande est transmise par une action physique simple, gnralement un clic. Tout comme dans le monde rel, il est possible de faire et de dfaire de la mme manire ; laction lmentaire est gnralement rversible. Finalement, limpact de la commande sur lobjet est immdiatement visible.

2.5.1 Avantages et inconvnients

Adopte par la plupart des logiciels, la manipulation directe offre de nombreux avantages. Cest un mode dinteraction familier. De ce fait, il est facile mmoriser et facile apprendre. Linteraction est directe. Lutilisateur sintresse au rsultat quil cherche obtenir plus qu la manire de dclencher la commande. Les erreurs sont peu nombreuses. En effet, les objets tant toujours visibles et changeant de prsentation en rponse aux actions de lutilisateur, ce dernier a une meilleure visibilit sur le fonctionnement du logiciel. Il le comprend mieux et commet moins derreurs. De plus, le clavier tant moins utilis, les erreurs de saisie sont plus rares. Finalement, cest un mode de dialogue rversible. Chaque commande dispose de son inverse , gnralement accessible de la mme manire. Il est possible de revenir en arrire, de dfaire ou dannuler, et donc de rattraper ses erreurs. En contrepartie, ce mode de dialogue ne fournit aucune indication sur la faon de sen servir. Il nest pas auto-explicatif la manire des fentres de dialogue par exemple. Il peut donc tre difficile apprendre. La manipulation directe peut tre aussi inefficace. Elle requiert parfois une opration manuelle l o un automatisme serait plus performant, en particulier pour les tches rptitives. Qui plus est, la manipulation directe ncessite parfois un effort de prcision chez lutilisateur, par exemple pour slectionner de petits objets. La manipulation directe convient aux utilisateurs occasionnels ayant peu de connaissances informatiques mais connaissant nanmoins le domaine applicatif, ce qui leur permettra de pallier le manque de guidage de ce mode de dialogue. Par contre, des utilisateurs expriments auront tendance prfrer un dialogue clavier du fait du gain de rapidit quil prsente. Dans la mesure o elle sappuie sur une reprsentation spatiale des donnes et quelle propose une interaction par dplacement dobjets graphiques, la manipulation directe est particulirement bien adapte au traitement des donnes go-rfrences, par exemple la surveillance de processus, les applications de contrle/commande, la simulation ou la CAO.

2.5 Manipulation directe

67

2.5.2 Recommandations
La principale caractristique dune interface manipulation directe est la facilit dutilisation. La Thorie de laction (voir section A.2) nous permet de mesurer la complexit dutilisation du logiciel par le biais de deux distances : la distance smantique, entre le but vis par lutilisateur et les objets de linterface, et la distance articulatoire, entre laction et sa reprsentation physique [Norman 86, Hutchins 86]. Sappuyant sur cette dcomposition, lobjectif, lorsquon conoit une interface manipulation directe, est de rduire ces distances afin de minimiser les processus cognitifs et moteurs de comprhension et de manipulation du systme. Dans un premier temps, la rduction des distances smantiques minimise les ressources cognitives ncessaires la comprhension du systme. Adapter les fonctionnalits aux intentions de lutilisateur. Le logiciel est plus simple utiliser lorsque les fonctionnalits proposes rpondent directement aux besoins de lutilisateur, lui permettant de raliser chacune des activits lmentaires lies sa tche.

Dconseill

Prfrable

Figure 2.30 Quand les fonctionnalits rpondent directement aux besoins de lutilisateur, le logiciel est plus simple utiliser.

Par exemple, dans la figure prcdente, le logiciel de gauche offre quelques fonctionnalits graphiques (slection, saisie de texte, trac de droite) qui permettront peut-tre un utilisateur habile de dessiner. Cependant, il ne sera pas aussi facile utiliser que le logiciel de droite qui propose directement des outils pour construire les cercles ou les rectangles.

68

2. Le dialogue homme-machine

Prsenter les rsultats sous une forme directement exploitable. Afin de faciliter la comprhension du logiciel, il convient galement de veiller ce que les informations soient prsentes de manire ce quelles rpondent aux questions que se pose lutilisateur.

Dconseill

Prfrable

Figure 2.31 Le logiciel est plus facile comprendre si les donnes afches peuvent tre exploites directement.

Imaginons que lutilisateur consulte le logiciel ci-dessus (figure 2.3.1) afin didentifier les personnes qui nont pas respect lchance de paiement. Avec une fentre telle que celle de gauche, il doit tout dabord isoler les paiements qui nont pas t encaisss puis vrifier quils auraient d ltre avant la date courante. Cette opration est longue et fastidieuse. Elle peut tre vite par un traitement automatique qui permettrait de ne prsenter que linformation utile, comme lillustre la fentre de droite. Ces deux exemples nous montrent que la rduction des distances smantiques ncessite une parfaite connaissance de lactivit de lutilisateur. La rduction des distances articulatoires, quant elle, minimise les ressources perceptives et motrices lies lutilisation du logiciel. Il sagit ici de faciliter les oprations de bas niveau de linteraction, telles que la manipulation et la lecture. Les commandes doivent se transcrire sous une forme physique. Une commande est plus simple excuter et plus facile mmoriser lorsquelle sexprime sous la forme dun geste ou dun appui (clic). Par exemple, pour dplacer un fichier, il est plus simple de dplacer licne correspondante que dutiliser une fentre de dialogue (figure 2.32).

2.5 Manipulation directe

69

Dconseill

Prfrable

Figure 2.32 La commande est plus simple lorsquun geste suft pour lexcuter.

Les informations affiches doivent tre non ambigus et faciles lire. Laffichage doit permettre dinterprter rapidement le sens des donnes. En rgle gnrale, un graphisme est plus simple comprendre car le traitement est principalement visuel, contrairement linterprtation dun texte qui fait appel des ressources cognitives supplmentaires.

Dconseill

Prfrable

Figure 2.33 Un graphique sinterprte plus rapidement quun texte.

Une reprsentation graphique permet lutilisateur dinterprter rapidement la donne affiche. Elle lui fournit immdiatement une information qualitative, un ordre de grandeur. Lindication est approximative mais elle suffit dans la plupart des cas. Les textes viennent ensuite complter cette premire lecture en apportant des informations quantitatives plus prcises. Les retours garantissent la visibilit sur le fonctionnement de lapplication. La manipulation directe sappuyant principalement sur la reprsentation graphique des objets, il est essentiel de fournir un retour visuel aux actions de lutilisateur. Le retour facilite lapprentissage. Il comble en partie les difficults de

70

2. Le dialogue homme-machine

comprhension rencontres parfois avec ce mode de dialogue. Il peut tre mis en uvre de diffrentes manires : en modifiant lapparence de lobjet, en modifiant la forme du pointeur souris ou en affichant de faon continue lobjet, ou sa silhouette, lorsque lutilisateur le dplace. Par ailleurs, le retour peut galement tre physique. Par exemple, lorsquun clic maintenu est demand, le fait que lutilisateur doive garder le bouton de la souris enfonc lui rappelle quil est entr dans un mode de dialogue spcifique. Cependant, la manipulation directe peut prsenter des difficults dapprentissage pour les utilisateurs dbutants et, au contraire, sembler fastidieuse aux utilisateurs expriments. Faciliter lapprentissage des utilisateurs dbutants. On aidera les utilisateurs dans la phase dapprentissage par un meilleur guidage en affichant des messages dexplication dans la barre dtat de la fentre de lapplication, en fournissant un accs optionnel par menu ou par fentre de dialogue et en rendant linterface sensible la position de la souris sans requrir une action (un clic) de la part de lutilisateur. Offrir un accs rapide aux utilisateurs expriments. linverse, on utilisera les touches de fonction pour rendre plus rapide laccs aux fonctions frquemment utilises par les utilisateurs expriments. Simplifier la slection des donnes. Slectionner les objets la souris devient vite fastidieux lorsquils sont nombreux et loigns. Il est donc recommand de proposer galement une slection selon des critres textuels ou par une commande, comme Slectionner tout par exemple. Faciliter les tches rptitives. Ritrer de nombreuses fois la mme manipulation est lun des inconvnients majeurs de la manipulation directe. Cest pourquoi il est conseill doffrir la possibilit de chaner plusieurs commandes.

2.5 Manipulation directe

71

Amliorer la prcision des saisies. Les manipulations la souris requirent parfois une prcision qui rend linteraction dlicate. Dans ce cas, il convient de faciliter la manuvre en proposant par exemple un effet magntique ou bien, quand cest possible, une saisie au clavier.

Figure 2.34 Choisir une valeur numrique par manipulation directe est parfois une vritable prouesse. La saisie au clavier est plus rapide et plus prcise, mais elle prsente un risque derreur.

2.5.3 Souris
Sur une interface manipulation directe, la souris est le principal outil du dialogue. Elle offre lintrt de permettre un excellent contrle du mouvement du pointeur, mais ncessite cependant un travail de coordination entre la main et la vue qui demande un lger apprentissage. Le principal critre suivre lors la conception du dialogue souris est lhomognit. Le rle des boutons de la souris doit tre constant. Par exemple, la plupart des applications Windows permettent de slectionner par le bouton de gauche et douvrir un menu contextuel relatif lobjet slectionn par le bouton de droite.

Figure 2.35 Dialogue souris Windows.

72

2. Le dialogue homme-machine

Avec des souris trois boutons, des dialogues plus riches, mais aussi plus difficiles apprendre peuvent tre envisags.

Figure 2.36 Dialogue souris 3 boutons.

Cependant, il nest pas ncessaire dutiliser tous les boutons de la souris ; au demeurant, le Macintosh nen utilise quun seul. En effet, la souris peut tre aussi une source derreur. Ne pas dclencher des fonctions importantes (difficilement rversibles) par un simple clic. Il nest pas rare dappuyer involontairement sur un bouton de la souris. Utiliser le survol souris pour guider lutilisateur. Le pointeur souris peut permettre dafficher des informations, sans que lutilisateur nait cliquer, directement au survol souris, cest--dire lorsque la souris passe au-dessus de lobjet. Par exemple, laffichage dune bulle daide ou dun message dans la barre dtat de la fentre va servir aider lutilisateur en fonction de la position de sa souris. Le double-clic permet dactiver rapidement une fonction en court-circuitant des tapes intermdiaires du dialogue. Cependant, il convient dtre vigilant sur le choix de son comportement. Le comportement associ un double-clic doit tre dans la ligne de celui du simple clic. Afin quil soit aisment assimilable, le comportement du double-clic doit tre proche de celui du simple clic. La configuration idale est que la commande dclenche par un double-clic soit celle qui le serait par deux simples clics conscutifs. Par exemple, quand un menu est affich pour le simple clic,

2.6 Temps de rponse

73

le double-clic revient dclencher la commande associe loption par dfaut de ce menu. Aucune fonction ne doit tre dclenche uniquement par un double-clic. Le double-clic nest gnralement pas facile matriser pour les utilisateurs dbutants. Il est donc dconseill dactiver une commande uniquement de cette manire. Elle doit aussi ltre par un moyen moins rapide, mais plus simple, par exemple un bouton. De mme, le clic maintenu nest pas naturel pour un novice. Ces deux modes sont source derreur en cas de stress. Des alternatives doivent tre proposes, par le biais du clavier par exemple.

2.6

TEMPS DE RPONSE
Le temps de rponse, que lon appelle attente lorsquon prend le point de vue de lutilisateur, mesure le temps qui scoule entre lenvoi dune commande par lutilisateur et la rponse du systme informatique. Plus prcisment, le temps qui importe lutilisateur est le temps global de ralisation de la tche. Il diffre de ce que les informaticiens appellent le temps de rponse qui est le temps mis par le systme pour afficher un rsultat. En effet, le temps de ralisation dune tche correspond pour lutilisateur au cumul du temps de rponse du systme, du dlai daffichage, du temps qui lui est ncessaire pour lire, puis comprendre et interprter la rponse, du temps mis pour dcider et mettre en uvre les actions conscutives cette rponse, ainsi quventuellement le temps perdu par erreur et finalement, le temps mis pour corriger ces erreurs. Cest en rduisant ces diffrentes dures que lon diminuera effectivement le temps de rponse aux yeux de lutilisateur. Le temps de rponse influe sur lutilisabilit du logiciel de deux manires. Dune part, cest un facteur de stress. Lanxit de lutilisateur augmente lorsque le temps de rponse sallonge et quaucun affichage ne linforme des traitements en cours. Des tudes ont montr que, dans une conversation humaine, une attente de plus de deux secondes donne linterlocuteur limpression dattendre. Dautre part, le temps de rponse alourdit la charge de travail, car il oblige lutilisateur faire des efforts pour conserver en mmoire les informations ncessaires pour continuer lchange. Dans le cerveau humain, les informations se maintiennent en mmoire court terme pendant une dure de 2 6 secondes. Audel, les mcanismes de mmorisation sont plus complexes et les informations risquent dtre oublies ou remplaces par dautres.

74

2. Le dialogue homme-machine

Lapprciation du temps de rponse est subjective. Elle dpend en particulier du niveau dexpertise de lutilisateur. Ainsi, un dbutant accepte des temps de rponse plus importants lorsquil est assist. Il prfre un systme facile apprendre, mme sil est plus lent. Au contraire, lutilisateur expriment accepte un systme plus complexe, sil est plus rapide. Il importe donc dtablir un compromis entre le temps de rponse du systme et la facilit dapprentissage offerte par le logiciel. Lutilisateur adapte sa stratgie dutilisation aux temps de rponse du systme et la facilit de correction des erreurs. Lorsque le temps de rponse est faible et que les erreurs sont faciles corriger, lutilisateur adopte une stratgie de type essai/erreur. Il rflchit peu et commet des erreurs. Le stress est peu important. Au contraire, lorsque le temps de rponse est important et que les erreurs sont difficiles corriger, le temps de rflexion est plus important. Lutilisateur commet moins derreurs, mais le stress est plus important. Minimiser les variations du temps de rponse. Comme nous venons de le voir, lorsque le temps de rponse est prvisible, lutilisateur y adapte sa stratgie dutilisation. Rendre les sources de variation visibles. Lorsque les sources de variation sont visibles, lutilisateur peut comprendre, et donc prdire, le comportement du systme. Par exemple, il est recommand dafficher le nombre dutilisateurs connects lorsque celui-ci influence le temps de rponse. Le comportement de linterface doit donc rendre compte du temps de rponse prvisible. Quel que soit le temps dattente prvisible, lobjet sur lequel porte laction doit changer de prsentation. Ainsi, lutilisateur peroit immdiatement que son action a t prise en compte par le systme. Ceci vite quil ritre la manipulation, pensant un problme mcanique. Au-del de 2 secondes, il y a un risque de perte dinformation en mmoire court terme. Il est donc recommand dviter que le temps de rponse entre deux tapes intermdiaires dune tche ne dpasse les 2 secondes.

2.6 Temps de rponse

75

Si lattente est estime comprise entre 2 et 6 secondes, une icne dattente doit tre affiche. Licne gnralement utilise pour symboliser lattente est le sablier.

Figure 2.37 Lorsque le traitement est de courte dure, une icne suft pour avertir lutilisateur.

Si lattente est estime suprieure 6 secondes, un message doit prciser lavancement du traitement en cours. Un temps de rponse plus long, suprieur 6 secondes, est acceptable dans la mesure o lopration en cours ne demande pas de mmorisation, condition toutefois davertir lutilisateur par un message. Pour cela, les messages davancement peuvent suivre le schma suivant.

Figure 2.38 Pour un traitement long, il est conseill de fournir lutilisateur des lments la fois quantitatifs et qualitatifs an quil puisse en mesurer lavancement.

La fentre davancement permet lutilisateur destimer le temps dattente et de connatre ltat davancement du traitement par rapport au processus complet. Ce message doit tre rafrachi rgulirement afin de montrer quun traitement est en cours.

76

2. Le dialogue homme-machine

Figure 2.39 Le graphisme et le texte se compltent : la jauge montre lutilisateur quune opration est en cours tandis que le texte prcise lactivit en cours.

Une animation montre lavancement du traitement en cours. Dans le cas des processus longs (plusieurs minutes), un message peut galement prciser le type dactivit en cours. Autoriser lutilisateur interrompre les traitements longs. Afin quil garde le contrle sur les oprations ralises par le logiciel, lutilisateur doit, tout moment, pouvoir interrompre un traitement en cours. Les attentes locales sont prfrables aux attentes globales. En rgle gnrale, deux niveaux dattente sont prendre en compte : soit lattente est globale au poste de travail, soit elle est locale une fentre de lcran. Lorsque lattente est globale, aucune interaction nest possible. Lutilisateur na plus la main . Dans la mesure du possible, cette situation doit tre vite : lattente ne doit pas empcher lutilisateur dinteragir avec le systme. Il est prfrable dopter, lorsque la chose est possible, pour une attente locale o seules les interactions avec la fentre concerne sont interdites, le reste de linterface restant accessible lutilisateur.

77

3
Les erreurs et laide en ligne

TRAITEMENT DES ERREURS ..................................................................................................78 Erreurs dintention ...........................................................................................................78 Erreurs dexcution ..........................................................................................................79 Erreurs perceptives ...........................................................................................................80 Erreurs cognitives .............................................................................................................81 Erreurs motrices ...............................................................................................................82 Prvention des erreurs ......................................................................................................83 Correction des erreurs ......................................................................................................85 Messages derreur .............................................................................................................86 AIDE EN LIGNE .....................................................................................................................90 Diffrentes aides ...............................................................................................................91 Recommandations.............................................................................................................92 LINTERFACE
IDALE ............................................................................................................96

La convivialit dune interface homme-machine rside en grande partie dans les moyens mis en uvre pour prvenir les erreurs de lutilisateur. Quelle survienne suite une action involontaire ou par manque de connaissances, lerreur est perue par lutilisateur comme un chec. Elle accrot sensiblement son stress et peut parfois conduire un rejet du logiciel. Cest gnralement une erreur qui conduit pour la premire fois lutilisateur consulter laide en ligne. Il est donc essentiel de lui accorder une attention particulire, tout en souhaitant que le logiciel soit suffisamment facile utiliser pour que laide ne soit jamais utilise

78

3. Les erreurs et laide en ligne

Par une analyse des diffrents types derreur, ce chapitre explique comment prvenir et corriger les erreurs. Il fournit des recommandations sur la faon de rdiger les messages derreur. Puis il explique comment concevoir laide en ligne de manire ce quelle rponde aux questions de lutilisateur.

3.1

TRAITEMENT DES ERREURS

Les erreurs sont gnralement mal acceptes par lutilisateur car elles perturbent la faon dont il a prvu de mener la tche et rallongent le temps de ralisation. Qui plus est, les erreurs chappent, par nature, lutilisateur qui perd alors le contrle sur le fonctionnement du systme. Minimiser le risque derreur amliore de faon notable lutilisabilit du logiciel. Le traitement des erreurs ncessite dune part, en amont, de prvenir les erreurs par une analyse des causes et dautre part, de faciliter la correction, car il est impossible de les liminer totalement. Cependant, quel que soit le soin apport la conception du logiciel, nul ne pourra tre sr que lutilisateur ne se trompera jamais. Lerreur fait partie de la nature humaine : errare humanum est. On distingue deux types derreurs : les erreurs dintention et les erreurs dexcution. On commet une erreur dintention lorsque la manire de faire est correcte, mais que laction ne permet pas datteindre le but vis, par exemple lutilisateur na pas utilis la commande correcte par incomprhension du sens des commandes ou de lenchanement des oprations. loppos, lorsque lintention est correcte mais que la faon de faire nest pas bonne, cest une erreur dexcution, par exemple lutilisateur a tap par inadvertance sur une touche autre que celle souhaite. Il nest pas possible de diffrencier simplement ces deux types derreurs. Linterface doit donc fournir lutilisateur des moyens de les corriger quel que soit leur type.

3.1.1 Erreurs dintention

Pour viter les erreurs dintention, il importe que lutilisateur comprenne correctement le fonctionnement du systme. En ce sens, les techniques visant faciliter lapprentissage vont tendre diminuer les erreurs dintention. Les recommandations suivantes permettent de prvenir ce type derreur.

3.1 Traitement des erreurs

79

Guider lutilisateur. Fournir une visibilit sur le fonctionnement du systme. Fournir un retour aux actions de lutilisateur. Rendre possible lexploration du logiciel. Fournir une aide en ligne adapte la tche ( Comment faire pour ? ). Lorsque le logiciel est facile apprendre, lutilisateur se construit un modle mental correct de son fonctionnement et commet moins derreur.

3.1.2 Erreurs dexcution

Les erreurs dexcution correspondent un mauvais fonctionnement du processeur humain (voir lannexe A). Elles trouvent leur origine dans chacun des sous-systmes, comme le montre la figure suivante.

Figure 3.1 Les erreurs dexcution trouvent leur origine dans les diffrents sous-systmes du processeur humain.

Une analyse des origines de ces erreurs permet de mieux identifier la manire dy remdier. Dans les paragraphes qui suivent, nous en tudions les principales causes et donnons des recommandations permettant de les prvenir.

80

3. Les erreurs et laide en ligne

3.1.3 Erreurs perceptives

Lerreur perceptive est souvent due une prsentation similaire des objets. En particulier, les confusions sont courantes entre les lettres et les chiffres comme le montre la figure suivante.

Figure 3.2 Couples lettre-chiffre sources derreur de perception.

Utiliser les techniques de mise en vidence. Une mise en vidence inefficace conduit des erreurs. Par exemple, dans la figure suivante, les livres qui nont pas t rendus ne se distinguent pas visuellement des autres.

Dconseill

Figure 3.3 Linformation importante risque de ne pas tre vue car elle nest pas mise en vidence.

Rendre clairement visibles les changements de mode et les tats du systme. Dans le mme ordre dides, les erreurs sont frquentes lorsque ltat courant du systme nest pas suffisamment visible. Ainsi, le mode majuscule, provoqu par lenfoncement de la touche verrouillage des majuscules, est souvent source derreur sur un diteur de texte, car, dans le meilleur des cas, seule une diode du clavier indique ce changement dtat.

3.1 Traitement des erreurs

81

Fournir un feed-back immdiat aux actions de lutilisateur. Le manque de retour est galement lorigine derreurs perceptives. Par exemple, il arrive dappuyer plusieurs fois sur une touche en labsence de retour visuel ou auditif.

3.1.4 Erreurs cognitives

Les erreurs cognitives sont principalement lies des difficults de mmorisation comme devoir se souvenir dune particularit demploi du logiciel (unit, format, syntaxe) ou devoir mmoriser une valeur dune fentre lautre. Diminuer le travail de mmorisation. Dans lexemple suivant, pour vrifier la disponibilit dun ouvrage, lutilisateur doit ressaisir le numro de rfrence dans la seconde fentre. Il risque de se tromper, car le logiciel lui demande de mmoriser la rfrence prcise de louvrage. En fait, dans ce cas, le risque derreur est double car il peut galement se tromper ensuite lors de la saisie de la valeur ; cest alors une erreur motrice.

Dconseill

Figure 3.4 Devoir se souvenir dune valeur dune fentre lautre prsente un risque derreur.

82

3. Les erreurs et laide en ligne

Minimiser le calcul mental. Demander lutilisateur deffectuer lui-mme certains calculs, tels quune conversion dunit par exemple, est source derreur. Lutilisateur ne doit pas avoir calculer des informations qui peuvent ltre par le systme. Fournir des aides mnmoniques. Lorsquil nexiste pas daides mnmoniques ou quelles sont mal adaptes, le risque derreur cognitive est important. Par exemple, dans la fentre suivante [Mayhew 92], la mmorisation des lettres correspondant aux commandes risque dtre dlicate.

Dconseill

Figure 3.5 Les indices employs ici naident pas lutilisateur se souvenir de la commande correspondante, bien au contraire.

Concevoir un mode de dialogue et une prsentation cohrente. Lhomognit facilite la mmorisation. Inversement, des incohrences sont source derreur. Cest le cas lorsque les mmes commandes se retrouvent des positions diffrentes selon le menu ou la fentre. Mettre en jeu la reconnaissance plus que le souvenir. Ce mode de mmorisation est moins sujet erreur. Cest le cas lorsque les commandes sont affiches dans des menus ou des boutons.

3.1.5 Erreurs motrices

Les erreurs motrices sont des erreurs de manipulation. Elles sont gnralement lies aux contraintes temporelles qui portent sur la tche. Plus les actions doivent tre excutes rapidement, plus le risque derreur augmente.

3.1 Traitement des erreurs

83

Agrandir les objets slectionner. Les erreurs motrices ont galement pour origine des difficults de coordination il/main, en particulier lorsque les objets slectionner sont petits. Prvoir les appuis accidentels. Lorsque lutilisateur est dbutant, des appuis involontaires sont courants. Il est donc prfrable de les prvoir autant que possible, par exemple en ne prenant pas en compte lappui sur les touches alphabtiques si la saisie attendue est numrique. viter de changer trop frquemment de moyen dinteraction. Finalement, lorsque les manipulations demandes lutilisateur sont difficiles, les erreurs motrices sont plus nombreuses. Cest le cas par exemple lorsque linteraction demande dalterner diffrents moyens de dialogue : le clavier puis la souris, puis nouveau le clavier. Minimiser les saisies clavier. Rduire les erreurs motrices consiste principalement faciliter les mouvements de la main, or la manipulation du clavier ncessite une certaine dextrit, ce qui nest pas le cas de la souris. Qui plus est, si le clavier doit tre employ, son utilisation sera simplifie en vitant lutilisation des touches dites de modification, telles que Ctrl, Alt ou Shift.

3.1.6 Prvention des erreurs

Les messages de confirmation permettent, lorsquils sont lus, de prvenir les erreurs. Lorsquil y a un risque de perte de donnes ou que lutilisateur active une commande difficilement rversible, un message doit signaler ce fait et demander confirmation. Chaque commande doit tre valide par une action physique de lutilisateur. Par exemple, dans la figure 3.6, la demande de destruction dun fichier doit tre confirme par une action de lutilisateur sur le bouton Effacer. Il est essentiel dviter quune commande importante ne soit dclenche par inattention. Cependant, une fentre de confirmation est parfois perue comme

84

3. Les erreurs et laide en ligne

Figure 3.6 Le message sert prvenir un effacement involontaire.

une gne par les utilisateurs expriments pour lesquels il est prfrable doffrir la possibilit de dsactiver cette protection. Rendre inactives les commandes indisponibles. Le guidage contribue galement la prvention des erreurs par une prsentation distinctive des commandes non autorises. Des erreurs sont vites lorsquon empche lutilisateur dexcuter les actions non valides. Rendre actifs les champs en fonction du contexte. Certains choix vont rendre caduque lutilisation dautres composants de linterface. Afin dviter les erreurs de saisie, il est recommand de ne les activer que lorsque le contexte sy prte. Par exemple, dans la fentre suivante, rien nindique dans quel cas remplir le champ Rduction 3me ge ?

Dconseill

Figure 3.7 Le champ Rduction 3me ge est ambigu : dans quel cas doit-il tre rempli ?

Il existe un risque derreur. Un texte explicatif permet de rsoudre en partie le problme, mais il alourdit la fentre. Qui plus est, le risque derreur existe toujours ; lutilisateur peut saisir une valeur par erreur ou mal comprendre la consigne.

3.1 Traitement des erreurs

85

Prfrable

Figure 3.8 Un texte lve le risque derreur mais il surcharge la fentre.

Une solution plus lgante consiste nafficher le champ Rduction 3me

ge que lorsque la saisie est requise.

Prfrable

Figure 3.9 Le champ ne safche que sil est ncessaire de le remplir.

Cette dernire solution, plus difficile mettre en uvre, prsente lintrt dliminer totalement le risque derreur. Tester pour identifier les erreurs. Les erreurs, dintention en particulier, demeurent difficiles prvoir ; il est essentiel de monter des tests dutilisabilit pour identifier les cas derreur. En gnral, les erreurs les plus frquentes apparaissent ds les premiers tests dutilisabilit.

3.1.7 Correction des erreurs

Du fait de la perte de temps qui en dcoule, les erreurs sont gnralement mal perues par lutilisateur. Afin de perturber le moins possible la planification de la tche, il doit tre inform au plus tt de son erreur. Signaler lerreur au plus tt. Nanmoins, lors dune saisie, le message derreur ne doit pas bloquer lutilisateur. Par ailleurs, la description de lerreur doit tre la plus brve possible et ne pas ncessiter la recherche dinformations complmentaires.

86

3. Les erreurs et laide en ligne

Placer le message l o lutilisateur est cens regarder lorsque lerreur se produit. Le message doit apparatre dans le champ de vision de lutilisateur, cest--dire dans la fentre courante ou prs du champ erron. Fournir la possibilit de modifier facilement les donnes saisies, une fois lerreur signale. Afin de minimiser linterruption cause par lerreur, lutilisateur doit pouvoir modifier rapidement et facilement les donnes errones. Lerreur est facile corriger lorsquon localise rapidement le composant concern, par une mise en vidence adapte, et quil est possible dy accder pour le modifier. Permettre le retour en arrire. La facult de dfaire ou dannuler amliore la performance de lutilisateur, car il travaille plus rapidement, craignant moins les erreurs. Autoriser les interruptions pour les commandes longues. Lactivation involontaire dune commande est un cas derreur frquent, qui devient particulirement gnant lorsque lopration dure longtemps. Cest pourquoi il est recommand de prvoir un moyen dinterrompre les commandes en cours. Permettre laccs laide en ligne. Cependant, laide en ligne est gnralement crite dans une optique de formation et rpond rarement lerreur rencontre de faon immdiate. Ce nest quen dernier ressort que lutilisateur cherche dans laide en ligne, car il sait que la recherche va lui prendre du temps.

3.1.8 Messages derreur

Le logiciel peut rpondre de diffrentes manires une erreur de lutilisateur. Cette rponse doit tre adapte au type derreur. [Mayhew 92] dresse la typologie suivante. Premier cas de figure, le logiciel bloque lutilisateur et lempche de continuer tant quil na pas corrig lerreur. Ce mode de rponse convient aux erreurs graves pour lesquelles il y a un risque de destruction de donnes. Il ne doit tre utilis qu titre exceptionnel, car il nuit au rythme du dialogue.

3.1 Traitement des erreurs

87

Autre type de raction, le logiciel met en garde lutilisateur par un message, voire un signal sonore. Il prvient lutilisateur mais il le laisse continuer. Ce type de rponse est adapt aux erreurs de moindre importance. Le logiciel peut aussi ne rien faire, ne pas rpondre la commande errone. Ce comportement convient aux erreurs sur des commandes manipulation directe pour lesquelles la commande devrait modifier la prsentation de lobjet si elle avait t correctement excute. Cependant, il prsente linconvnient dtre peu explicite. Il est donc prfrable dafficher un message en complment. Finalement, lorsque la chose est possible, le logiciel corrige automatiquement lerreur. Lutilisation de ce mode est relativement limite. Le logiciel peut, par exemple, corriger les erreurs de frappe. Mais cela demeure difficile mettre en uvre. Le message derreur doit prciser la nature du problme et donner les moyens dy remdier. Dans labsolu, le message derreur doit dcrire la cause de lerreur et expliquer lutilisateur la correction effectuer pour revenir une situation correcte. Mais il convient galement dafficher des messages brefs pour quils puissent tre lus rapidement. Un compromis est trouver entre lexhaustivit de laide et la concision du texte. Cependant, il arrive aussi, dans certains cas, que le message derreur mette en vidence une lacune de conception du logiciel, comme le montre lexemple ci-aprs.

Dconseill

Figure 3.10 Ce message est, pour le moins, peu coopratif

Lerreur est un vnement stressant pour lutilisateur qui perd alors le contrle du logiciel et se retrouve en situation imprvue. Il sinterroge sur la faon de corriger lerreur pour reprendre le fil normal de la tche. La formulation du message doit donc tre soigneusement conue afin de laider revenir l o il

88

3. Les erreurs et laide en ligne

en tait, tout en lui apprenant comment viter de commettre une nouvelle fois lerreur. Le message doit tre coopratif. Le message doit permettre lutilisateur de comprendre la nature de lerreur. Il a pour objectif de laider mieux assimiler le fonctionnement du systme.
Erreur : syntaxe incorrecte Erreur : le rpertoire de destination manque Prfrable

Dconseill

Figure 3.11 Des messages coopratifs permettent lutilisateur de comprendre le fonctionnement du logiciel.

Le message doit fournir une description du problme. Une description du problme et de ltat du systme qui en rsulte aide lutilisateur mieux comprendre la cause de son erreur.
Erreur dcriture sur disque Dconseill Disque plein Prfrable

Figure 3.12 Lorsque le message dcrit ltat du systme, il est plus facile comprendre.

viter les sources dambigut. Le libell du message doit tre le plus explicite possible afin dviter les erreurs dinterprtation.
Fichier non trouv Il manque lextension du fichier Prfrable

Dconseill

Figure 3.13 Un message clair, non ambigu, est compris immdiatement.

3.1 Traitement des erreurs

89

Adapter le message au niveau de connaissances de lutilisateur. Lorsque la commande est peu utilise ou que lutilisateur est dbutant, il est prfrable de prciser le Pourquoi , cest--dire la smantique de la commande. Au contraire, sil sagit dune commande frquemment utilise, le Comment , la syntaxe de la commande, suffit.
Erreur dans le nombre de billets Le nombre de billets doit tre infrieur 10, sinon utilisez la commande Billets Groups Prfrable

Dconseill

Figure 3.14 Le message derreur contribue lapprentissage du logiciel.

Ne pas culpabiliser lutilisateur, ni dramatiser. Une erreur sur un logiciel na gnralement rien de grave. Dramatiser ne va pas mettre en vidence lerreur, mais par contre, cela va irriter lutilisateur ! De mme, il est prfrable dviter les mots connotation ngative qui vont noircir inutilement le message, tels que dsastreux, catastrophique, fatal, illgal, voire mauvais ou impossible.
Erreur Fatale : Mauvaise saisie !!! Dconseill Erreur : Valeur non reconnue

Prfrable

Figure 3.15 Un message accusateur ne fait quaccrotre le stress de lutilisateur.

Prfrer une syntaxe homogne. La cohrence de linterface homme-machine est globale. Elle concerne galement le langage employ qui sera ainsi lu plus rapidement.
Inacceptable Impossible reconnatre Traitement avort Dconseill Non accept Non reconnu Traitement non excut Prfrable

Figure 3.16 Une syntaxe homogne facilite la comprhension des messages.

90

3. Les erreurs et laide en ligne

viter lanthropomorphisme. Le logiciel est un outil conu pour assister ltre humain. Le langage utilis doit retranscrire cette notion doutil afin que lutilisateur conserve le sentiment de matriser le logiciel.
Dsol, je ne peux pas accepter cette commande ! Dconseill Commande non accepte

Prfrable

Figure 3.17 Le logiciel reste une machine.

3.2

AIDE EN LIGNE
Laide est demande par les utilisateurs qui la considre utile et pratique. Mais laide en ligne, qui a t conue pour apprendre se servir du logiciel, nest gnralement utilise quen cas de problme et souvent dans un contexte durgence. Dans les faits, elle est peu employe. Au contraire, lutilisateur lui prfre, lorsquelle existe, lassistance tlphonique [Haradji 96]. En effet, laide humaine se montre plus efficace car elle tient compte du contexte dans lequel se trouve lutilisateur, elle sadapte aux actions quil effectue et surtout, elle participe son apprentissage en expliquant le logiciel et en donnant des conseils dutilisation. Ce sont ces trois caractristiques, contextuelle, dynamique et formatrice, qui vont rendre laide en ligne plus facile utiliser. Habituellement, lutilisateur sollicite laide en ligne parce quil ne sait pas comment raliser une tche avec le logiciel. Il se pose la question Comment faire pour ? Cest la requte la plus frquente. Il se sert aussi de laide lorsquil ne comprend pas comment fonctionne le systme. Soit, il ne se souvient pas du rle dun objet ou dune commande, soit il ne comprend pas la dynamique du systme parce quil ne sait pas comment continuer une squence dactions, quil se trouve bloqu par un comportement inattendu du systme ou que le rsultat ne correspond pas ce quil attendait. Pour rpondre efficacement ces diffrents problmes, laide doit respecter deux principes de base : tre en adquation avec le mtier de lutilisateur et sinscrire dans une logique de formation.

3.2 Aide en ligne 91

Structurer laide en sappuyant sur la tche de lutilisateur. Laide en ligne sorganise en fonction de la manire dont lutilisateur se sert du systme dans le cadre de son mtier et non sur la base des fonctionnalits offertes par le systme. Laide doit participer lapprentissage du logiciel. Le comportement du logiciel doit tre dcrit prcisment afin daider lutilisateur dans son apprentissage et lui permettre de se construire un modle correct du fonctionnement du systme. Qui plus est, des lments propres au mtier peuvent complter laide afin de prciser le pourquoi de certaines fonctionnalits. Lutilisateur peut-tre galement invit participer, afin de faciliter la mmorisation par une mise en uvre pratique.

3.2.1 Diffrentes aides

Laide en ligne est mise en uvre de diffrentes manires, chacune adressant les besoins en assistance identifis prcdemment. Les bulles daide rpondent la question Quest-ce que ? . Elles expliquent le rle dun objet de linterface. Il importe que le texte soit court et facile comprendre afin que sa lecture ne perturbe pas lutilisateur dans sa tche. Laide est gnralement accessible par le biais dun manuel en ligne qui rpond lui aussi, mais de faon plus dtaille cette fois, la question Quest-ce que ? . Cependant, la recherche dans ce type daide ncessite une certaine exprience. Elle sadresse des utilisateurs expriments. Les dbutants sy perdent gnralement. Le niveau de dtail est parfois lev et pas toujours pertinent par rapport au problme courant de lutilisateur. Cette aide est statique. Elle ne tient pas compte du contexte dans lequel se trouve lutilisateur. Elle contribue donc assez mal lapprentissage. En gnral, le manuel en ligne intgre une rubrique Comment qui explique la faon de mettre en uvre les procdures pour lesquelles lapplication est couramment utilise. Cette rubrique est trs utilise car elle fournit des rponses aux questions que se pose lutilisateur dans le cadre de sa tche quotidienne. Lassistant (wizard) rpond Comment faire pour ? en guidant lutilisateur dans la ralisation dune tche. Bien que fort utile, il offre peu de visibilit sur le fonctionnement du systme et fait peu appel la participation de lutilisateur.

92

3. Les erreurs et laide en ligne

Figure 3.18 Comment est la rubrique la plus frquemment utilise de laide en ligne, car elle rpond directement aux besoins de lutilisateur.

Il rpond parfaitement un besoin court terme, mais ne permet pas lutilisateur dapprendre et de comprendre le fonctionnement du logiciel. Au contraire, le didacticiel est un vritable outil dautoformation. Il facilite la prise en main et induit une attitude positive de lutilisateur. Mais il est long utiliser et parfois trop gnral en terme de contenu. Il nest donc pas toujours adapt aux problmes spcifiques.

3.2.2 Recommandations
La recherche dans laide en ligne est une tche supplmentaire pour lutilisateur, il importe quelle soit la plus simple possible. Fournir un accs rapide laide en ligne. Cette nouvelle activit, gnralement imprvue, va venir perturber les actions en cours. Elle conduit lutilisateur modifier ses plans. Afin de minimiser cette interruption, laccs laide en ligne doit tre rapide par le biais dun bouton visible en permanence dans la barre de menu de lapplication ou dune touche

3.2 Aide en ligne 93

de fonction, par exemple, la touche F1 facile daccs dans le coin suprieur gauche du clavier. Dcrire lutilisation du systme en sappuyant sur le vocabulaire du mtier de lutilisateur. Lorsque le vocabulaire est le mme, le transfert de connaissances entre le mtier et le logiciel est plus simple et les risques dambigut sont moins nombreux. Permettre lexploration. La rubrique Voir aussi incite lutilisateur explorer laide en ligne et lui permet ainsi dtablir des liens entre les diffrentes commandes. Les titres doivent tre explicites. Ils aident lutilisateur se reprer dans laide en ligne et permettent den structurer le contenu. Illustrer les descriptions avec des exemples. Montrer comment se servir du systme est gnralement plus efficace que de longues explications. Ainsi, un diagramme explique mieux quun texte la navigation dans le logiciel. Par exemple, pour les barres de menu, une vue de lintgralit des commandes accessibles par la barre de menu aide la mmorisation.

Figure 3.19 Une carte des menus facilite la mmorisation.

Utiliser des listes pour organiser les procdures. Un texte structur est plus facile mmoriser. De plus, la numrotation des diffrentes tapes de la procdure en facilite la ralisation lorsque celle-ci se fait en parallle la lecture de laide.

94

3. Les erreurs et laide en ligne

Rdiger clairement. Les rgles nonces ci-aprs visent rdiger des documents clairs et faciles comprendre. Utiliser des phrases courtes et simples, viter les subordonnes et les relatives. Employer la forme active. viter les ngations. Utiliser un vocabulaire connu de lutilisateur. Faire des paragraphes courts. Sparer les paragraphes dune ligne blanche. Faire des lignes de 50-55 caractres ou 30-35 caractres en double colonne. viter les lignes trop courtes (moins de 26 caractres). viter les coupures de mot. Ne pas justifier droite. Ce type de justification augmente de 11 % le temps de lecture si lespacement nest pas rgulier. Espacer les lignes de la hauteur dun caractre, cest--dire en double interligne . titre dexemple, elles ont t appliques dans le texte suivant.

Dconseill

Prfrable

Figure 3.20 Une formulation claire et simple facilite la comprhension.

3.2 Aide en ligne 95

Prsenter les informations dans lordre dans lequel lutilisateur doit les prendre en compte. Lorsque lutilisateur doit prendre une dcision, il convient de lui donner les moyens de le faire immdiatement. Quand le texte ne prsente pas assez tt le choix, lutilisateur a tendance se tromper car il ne le lit pas jusquau bout.
Pour sortir,slectionner Quitter. Attention si vous navez pas sauvegard vos Prfrences, ellesseront perdues lorsque vous aurez slectionn Quitter. Vous devez sauvegarder vos Prfrences avant de quitter lapplication. Sauvegardez vos Prfrences en utilisant le menu Session, puis quittez lapplication en slectionnant Quitter. Prfrable

Dconseill

Figure 3.21 Les procdures sont comprises correctement lorsquelles sont prsentes dans lordre o les dcisions sont prises.

Indiquer le but en premier, puis laction pour raliser ce but. Dans la lecture, lutilisateur est guid par les objectifs. Par exemple, le texte au-dessous risque de ne pas tre lu entirement car le dbut nest pas suffisamment accrocheur.
En slectionnant le menu Prfrences, il est possible de mmoriser les fentres affiches. Dconseill Pour mmoriser les fentres affiches, slectionnez le menu Prfrences.

Prfrable

Figure 3.22 En prsentant lobjectif en premier, il sert daccroche au reste du texte.

chaque tape de la procdure correspond une phrase. La description est plus aise comprendre lorsque le langage utilis est simple et concis.

96

3. Les erreurs et laide en ligne

Utiliser le bouton OK pour confirmer la slection, puis appuyer sur Fermer pour effacer la fentre. Dconseill

Pour confirmer la slection, utilisez le bouton OK. Effacer la fentre en appuyant sur Fermer. Prfrable

Figure 3.23 Lorsque chaque action est exprime dans une seule phrase, le texte est plus simple comprendre.

Ne pas utiliser le futur. Lutilisateur est en train deffectuer la commande considre lorsquil lit le texte. Il convient donc dutiliser le prsent, voire limpratif.
Vous cliquerez sur OK Dconseill Cliquez sur OK Prfrable

Figure 3.24 Le langage utilis doit correspondre au rfrentiel de lutilisateur.

Pour conclure, rappelons que laide en ligne permet lutilisateur de comprendre le fonctionnement du logiciel, mais elle ne le rend pas facile utiliser Laide nen est pas une. Help doesnt [Nielsen 93]. Ce nest pas laide en ligne qui aide lutilisateur ; ce sont les diffrents moyens mis en uvre dans linterface afin de le guider et lui permettre dviter les erreurs. Laide en ligne ne rsout pas les problmes dutilisabilit. Cest par une conception de linterface guide par lutilisation que lon vite les problmes et non par laide en ligne qui a uniquement pour rle dexpliquer le fonctionnement du logiciel.

3.3

LINTERFACE IDALE
La technologie volue rapidement et de nouveaux moyens de dialogue apparaissent tous les jours. Chacun prsente des avantages et des inconvnients, mais aucun nest polyvalent. Ainsi, on a longtemps cru que la reconnaissance vocale serait linterface idale qui allait remplacer le clavier de lordinateur. Cest

3.3 Linterface idale 97

Figure 3.25 La reconnaissance vocale ne remplacera pas le clavier.

dailleurs sur cette hypothse quont t lancs la plupart des programmes de recherche sur le sujet. Maintenant, avec le recul, nous savons que la reconnaissance vocale ne supplantera pas le clavier, en particulier pour le traitement de texte. En effet, un dactylo frappe beaucoup plus vite quil ne parle. Qui plus est, il frappe et parle parfois en mme temps ! Le clavier reste donc pour lui la meilleure interface pour saisir du texte. Par contre, pour les nombreux utilisateurs qui nont pas appris se servir dun clavier, qui ont moins de texte saisir et qui travaillent dans un contexte plus calme, la reconnaissance vocale rend de grands services. Il ny a pas de bonne interface homme-machine, mais une interface adapte son utilisation. Linterface doit tre adapte au profil de lutilisateur, la tche quil veut mener et au contexte dans lequel il le fait. Parfois, une interface peut sembler inutilisable certains alors que dautres, plus expriments, la trouveront parfaitement leur got. Qui plus est, dans ce domaine o il ny a pas de vrit absolue, il convient dtre particulirement vigilant quant lapplication de rgles. Celles-ci permettent de concevoir les premires versions du logiciel et de mieux comprendre les ractions de lutilisateur, mais les rgles ne garantissent pas elles seules lutilisabilit. Pour cela, il convient dexprimenter, sur la base dun prototype, afin de vrifier ladquation du logiciel avec la tche de lutilisateur. Cette approche est dautant plus bnfique que les utilisateurs viss sont nombreux et peu expriments. Cest gnralement le cas des sites web o, contrairement au logiciel, lutilisateur ne peut pas tre aid par ses collgues de travail ; il est seul face lcran, do limportance dune conception vritablement centre sur lutilisation finale, comme nous allons le voir dans les chapitres qui suivent.

99

4
Dfinition et ciblage du site

POURQUOI

FAIRE DES SITES WEB FACILES UTILISER

? ...................................................100

LES AFFRES DE LA CONCEPTION WEB ................................................................................103 Une quipe pluridisciplinaire ...........................................................................................103 Lutilisateur moyen nexiste pas ......................................................................................105 TESTER LERGONOMIE DU SITE ..........................................................................................106 Test de perception ..........................................................................................................106 Test dutilisabilit ...........................................................................................................108 IDENTIFICATION DU CONTENU..........................................................................................109 Ciblage du site ................................................................................................................109 Analyse de la concurrence ..............................................................................................110 Architecture de communication.......................................................................................111 STRUCTURE DU SITE ..........................................................................................................112 Tri par carte...................................................................................................................112 Organisation du contenu ................................................................................................115 LUTILISABILIT
DU SITE AU QUOTIDIEN ..........................................................................117

LERGONOMIE DES INTRANETS ..........................................................................................121 Les enjeux de lintranet ..................................................................................................122 La navigation : principale difficult des intranets .............................................................123 Le moteur de recherche ...................................................................................................125

Internet est loutil de communication du XXIe sicle. Il est le premier moyen de communication qui ait t conu dans lre numrique [Abramatic 99]. Cette nouvelle technologie prsente la caractristique dtre, la base, guide

100

4. Dfinition et ciblage du site

par son utilisation. Le principe mme dInternet est dtre une interface entre les utilisateurs qui vont stocker linformation sur leurs postes et lchanger au travers du rseau. Sur le web, cest lutilisateur qui contrle lusage du logiciel. la base Internet est un outil de communication et de services. Il offre tous la possibilit daccder aux ressources varies hberges sur les nombreux serveurs du rseau. De plus, Internet met linformatique la porte du grand public, cest-dire entre les mains dutilisateurs gnralement peu coutumiers de linformatique. Lutilisabilit est donc primordiale, pour ne pas dire vitale, pour un site web. Ce chapitre prsente la dmarche de dfinition dun site. Aprs avoir introduit les principales difficults de la conception web ainsi que les mthodes de test, il dcrit les premires tapes de la conception dun site : llaboration du contenu et la dfinition de larborescence du site. Nous conclurons sur les spcificits prendre en considration lors de la conception dun site intranet.

4.1

POURQUOI FAIRE DES SITES WEB FACILES UTILISER ?

Internet est une technologie dcentralise, la disposition de tous, offrant un support des applications la fois domestiques : le rseau Internet grand public, et professionnelles : le rseau intranet interne lentreprise ou extranet regroupant un ensemble dentreprises. Les applications web1 touchent un public large, majoritairement novice en informatique. Cependant, et cest paradoxal, linterface ressemble par certains aspects celle des ordinateurs des annes 70 : pas de fentre, une prsentation sous forme de pages et des commandes par boutons. Or linformatique des annes 70 tait rserve des utilisateurs expriments, linverse du web ! De nombreux problmes dutilisabilit rsultent de cette fracture entre la technologie du web et les utilisateurs viss. Le grand public considre Internet comme difficile utiliser [Davis 99]. Le graphique suivant, tir dune tude mene sur les cinq principaux sites dinformation gographique, confirme que lutilisabilit dun site a un impact direct sur sa frquentation [Beta Research 98]. Qui plus est, lanalyse des sites web les plus populaires montre quils prsentent peu de problmes dutilisabilit, en particulier grce des temps de chargement trs courts et une navigation explicite [Nielsen 99].

1. Le terme web est employ dans cet ouvrage pour dsigner Internet en gnral, la fois grand public et professionnel (intranet et extranet).

4.1 Pourquoi faire des sites web faciles utiliser ? 101

Figure 4.1 La frquentation dun site est directement lie son utilisabilit.

Linternaute est souvent un client Ce sentiment de complexit est particulirement gnant pour les sites de e-commerce. En effet, les tudes montrent que la plupart des internautes trouvent les sites commerciaux difficiles utiliser. Dans 42 % des cas, ils prfrent se tourner vers les circuits dachat traditionnels, tandis que 62 % des cyber-acheteurs abandonnent au moins une fois en cours de transaction [Zona 99 cit dans Davis 99]. En particulier, les formulaires en ligne, ncessaires pour accder certains services, dcouragent de nombreux internautes. Une tude conduite par Creative Good montre que 40 % des candidats une offre demploi ne comprennent pas comment postuler au poste propos en ligne [Creative 99]. Sur Internet o le client peut changer de boutique dun simple clic, les problmes dutilisabilit vont avoir un impact direct sur la rentabilit du site. Une autre enqute mene par Creative Good sur des sites de commerce lectronique, pendant lt 1999, estime les pertes lies des difficults dutilisation 6 milliards de dollars, tandis quun gain de 7,9 milliards de dollars aurait pu tre enregistr si les consommateurs ne staient pas perdus dans les sites [Creative 99]. Non seulement les problmes dutilisabilit conduisent une rduction des ventes court terme, mais, et cest plus grave, ils entranent aussi une perte de

102

4. Dfinition et ciblage du site

fidlisation de la clientle, car 40 % des consommateurs ne reviennent pas sur un site o leur premire visite sest solde par un chec [Nielsen 98]. Dans certains cas, il est mme prfrable de fermer le site car il est tellement mauvais quil porte prjudice la rputation de lentreprise [Manning 98]. Au contraire, un site facile utiliser peut gnrer des rsultats consquents. Ainsi en 1998, C. Moore (IBM Internet Operations Manager) dresse un tableau catastrophique : Sur le site web IBM, la fonction la plus populaire est le bouton de recherche, parce que personne narrive naviguer () la seconde fonction la plus populaire est le bouton daide, parce que la fonction de recherche nest pas oprationnelle IBM dcide donc de revoir le design de ses sites sappuyant sur des principes ergonomiques simples tels que lhomognit de prsentation et laccs rapide aux pages les plus frquemment utilises. Le rsultat est immdiat. En mars 1999, dans le mois qui suit le redmarrage, le trafic augmente de 120 % sur le site de commerce lectronique ShopIBM tandis que les ventes grimpent de 400 % ! [Battey 99].

Figure 4.2 Tous les sites IBM suivent la mme prsentation, renforant ainsi limage dune compagnie multinationale et permettant au visiteur de retrouver facilement les rubriques les plus courantes.

4.2 Les affres de la conception web

103

4.2

LES AFFRES DE LA CONCEPTION WEB

Sous une apparente simplicit, la conception dun site cache de nombreuses difficults lies au fait quil sagit dune technologie transverse : plate-forme de convergence entre linformatique, les tlcommunications et laudiovisuel [Abramatic 99]. Le dveloppement web est un domaine au carrefour de la communication, du marketing, de linformatique, de linfographie et de lutilisabilit. Cest un processus aux multiples facettes, faisant appel des comptences varies. Il sappuie sur des quipes pluridisciplinaires o les diffrents mtiers sont reprsents.

Figure 4.3 La cration dun site est un travail dquipe faisant appel des comptences varies.

4.2.1 Une quipe pluridisciplinaire

Concevoir un site web est avant tout un travail dquipe. Cest la conjugaison des talents de chacun des membres de lquipe qui permet dobtenir le meilleur rsultat. Pour cela, les principales disciplines intervenant dans la conception dun site doivent tre reprsentes au sein de lquipe. Sans tre exhaustif, intressonsnous aux cinq comptences principales ncessaires la phase de conception. Intervenant en amont, le responsable communication/marketing dfinit les objectifs de lentreprise au travers du site, la cible vise et les services proposs. Il travaille avec le responsable utilisabilit la dfinition de larchitecture du site. Le responsable utilisabilit intervient tout au long de la vie du site. Il permet lquipe didentifier la tche et le contexte dutilisation du site. Il participe

104

4. Dfinition et ciblage du site

la dfinition du site en construisant larchitecture de communication en relation avec le responsable communication/marketing. Puis il dfinit le protocole de navigation et met en uvre les tests dutilisabilit. Finalement il suivra lutilisation du site et identifiera les axes damlioration une fois le site en service (ses tches sont dtailles dans les sections qui suivent). Le responsable graphique labore la charte du site en validant la cohrence du message graphique auprs de lentit communication/marketing. Il travaille avec le responsable utilisabilit afin que le graphisme propos contribue amliorer lergonomie du site (lisibilit, temps de chargement, etc.). Il labore les images, choisit les couleurs et polices de caractres du site lors de la phase de ralisation. Le responsable rdactionnel de lquipe labore le contenu du site avec les experts du domaine et en collaboration avec le responsable communication/marketing, afin de sassurer la fois de la pertinence du contenu et de la justesse des messages. Le responsable dveloppement est en charge de limplmentation et de la maintenance du site. Il travaille principalement avec les responsables utilisabilit et communication/marketing afin didentifier les solutions techniques permettant de rpondre de la faon la plus simple aux besoins des utilisateurs tout en respectant la ligne de communication du site. Il intgre les visuels raliss par le responsable graphique. La mise en uvre dun site ncessite une forte interaction entre les diffrents acteurs de lquipe de dveloppement, sans compter les itrations avec les utilisateurs finaux. Elle passe en gnral par la mise en place dquipes intgres. Par certains aspects, le dveloppement web ressemble la production cinmatographique [Berkun 02]. Tous deux ncessitent des quipes nombreuses et pluridisciplinaires travaillant dans un temps limit avec la mme volont de crer une uvre commune. Mais, en quoi rside la qualit dun film ? Est-ce le jeu des acteurs, le scnario, la mise en scne, lclairage, la prise de son, les costumes ? Nullement. Aucune de ces composantes nest prpondrante. Une uvre cinmatographique est un tout. Un film russi est un film o chacun des membres de lquipe a pu exprimer son savoir-faire tout en respectant celui des autres. Il en est de mme pour un site web. Mais comment faire pour que les diffrents points de vue des membres de lquipe convergent ? En effet, lors des runions de conception, chacun cherchera invitablement dfendre son mtier : le graphiste privilgiera le ct artistique, linformaticien le ct fonctionnel, le commercial la mise en valeur du produit tandis que le responsable marketing sintressera limage de la marque au travers du site.

4.2 Les affres de la conception web

105

Par quel miracle, ces diffrents points de vue rejoindraient-ils celui de lutilisateur ? Cest ce que nous allons voir dans la suite du chapitre.

4.2.2 Lutilisateur moyen nexiste pas

Nous avons tous connu ces runions piques o chaque membre de lquipe dfend prement son point de vue sans quaucun nemporte ladhsion des autres [Krug 01]. En gnral, personne na vritablement tort ou raison. Dans ce domaine, il nexiste pas de vrit absolue, et donc aucune solution toute faite, ni recette qui permettrait de raliser le meilleur design. On assiste donc des joutes idologiques o chacun y va de son sentiment, de sa croyance , sans quaucun lment factuel ne vienne tayer le propos. Ces discussions striles sont une perte de temps et une source de conflit dans les quipes. Combien en sont sortis fchs que leur point de vue nait pas t retenu ? Et lorsquau final, le chef de projet a tranch pour lune ou lautre des solutions dbattues, combien sen sont sentis frustrs quon ne les ait pas couts ? Mais pourquoi les runions davancement ressemblent-elles plus des dbats politiques qu des runions de projet ? La raison en est simple : nous sommes tous des utilisateurs. De ce fait, nous avons naturellement tendance penser que tous les utilisateurs nous ressemblent et donc quils apprcient le web de la mme faon que nous. Chacun est persuad davoir raison et de dtenir la vrit puisquil est lui-mme un utilisateur. Certains vont jusqu voquer lexistence dun utilisateur moyen ! En effet, partant du principe que les utilisateurs sont des individus comme vous et moi, lutilisateur moyen serait une sorte dtre humain standard, un individu la fois comme vous et moi. Ds lors pour concevoir correctement un site, il suffirait de connatre ce que cet utilisateur aime ou naime pas. Malheureusement, cest un mythe ! Il nexiste pas dutilisateur moyen. Nous sommes tous diffrents et chacune de nos expriences en tant quutilisateur est unique. Dans labsolu, il ny a pas de bon site web. Lutilisabilit du site dpend la fois de lutilisateur et du contexte dans lequel il sen sert. Il nexiste pas de design prt porter , chaque solution est unique et doit tre conue sur-mesure . Cest lobjectif de la dmarche ergonomique de conception que dadapter le site son utilisateur et au contexte dans lequel il est conduit le visiter. Elle consiste dans un premier temps dterminer prcisment le contexte dutilisation, cest--dire cibler le site en dterminant le couple utilisateur-utilisation : Quel est lutilisateur vis ? Que cherche-t-il faire sur le site ?

106

4. Dfinition et ciblage du site

Puis dans un second temps, il sagit de structurer le site selon le point de vue des utilisateurs viss, et non selon celui de lquipe de conception comme cest trop souvent le cas. Finalement, pour couper court aux dbats idologiques qui nuisent lefficacit des runions de conception, il importe de tester le plus rapidement possible avec les utilisateurs afin de pouvoir appuyer les choix de conception sur des faits objectifs issus de lobservation relle des utilisateurs du site. Grce au test utilisateur, on quitte le domaine du subjectif. Le test permet dappuyer les choix sur des lments concrets et objectifs. Il rationalise des runions gnralement houleuses, souvent striles et gnratrices de conflits.

4.3

TESTER LERGONOMIE DU SITE

Par lobservation du comportement des utilisateurs, les tests vont permettre de valider les hypothses de conception. Ils fournissent des donnes concrtes pour appuyer les dcisions et trouver un terrain dentente afin de concilier les diffrents points de vue des membres de lquipe. Mener les tests le plus tt possible dans la conception permet de bnficier rapidement des retours utilisateur et dviter de revenir en arrire. Ds les premires bauches de larborescence du site, il est possible de construire un prototype et de le tester avec un panel dutilisateurs (nous reviendrons sur le prototypage et les tests dutilisabilit dans le chapitre Pratique de lutilisabilit). Les tests sont effectus auprs dun groupe dutilisateurs reprsentatif de la population vise par le site. Entre chaque itration, il est conseill de changer la composition du groupe utilisateur tout en conservant, bien entendu, sa reprsentativit et donc le mme profil dutilisateurs. En effet, lorsque les mmes utilisateurs participent pour la seconde fois un test, leur comportement est gnralement biais par la premire exprience. Selon le niveau dachvement du prototype, deux types de test peuvent tre mis en uvre : test de perception sur les premires maquettes graphiques, test dutilisabilit, lorsque le prototype est plus avanc.

4.3.1 Test de perception

Le test de perception vise valuer la comprhension du site. Rapide, ralisable sur un simple prototype papier, il peut tre mis en uvre ds les premires phases du projet et permet didentifier rapidement les problmes.

4.3 Tester lergonomie du site

107

Le prototype utilis ne ncessite pas un effort de dveloppement important. Il peut tre statique. Une simple image de la page daccueil ou une maquette PowerPoint suffisent. Le test consiste prsenter le prototype lutilisateur et analyser la faon dont il le comprend. Il est prfrable de sappuyer sur une prsentation lcran afin de prendre en compte le rendu des couleurs, mais on peut aussi travailler sur du papier. Sans que lutilisateur agisse sur la maquette, lobservateur lui demande dexpliquer comment il interprte la page. Il identifie ainsi les informations les plus apparentes aux yeux de lutilisateur. Il vrifie que les zones de navigation sont facilement reprables et que le texte des liens est correctement compris. Lors de ce premier test, il est galement possible dvaluer la faon dont lutilisateur interprte les services proposs par le site en lui demandant dimaginer, en saidant du prototype, la faon dont il raliserait une tche typique du site.

Que permet de faire cette page ? Que voit linternaute en premier ? O se trouvent les liens ? Que signient-ils ? quoi servent ces liens ? Quelles informations devrait-on trouver derrire ? Pour une demande type, o doit aller linternaute ? Que pense-t-il trouver ensuite ?

Figure 4.4 Questions poser lors du test de perception.

Le test de perception permet principalement de vrifier que linternaute comprend la faon dutiliser le site et quil interprte correctement le vocabulaire utilis. Il peut tre aussi loccasion de valider la charte graphique auprs des utilisateurs en valuant la faon dont ils peroivent le graphisme propos.

Que ressent linternaute ? Que pense-t-il du graphisme ? Quel thme associe-t-il au graphisme ? Que regarde-t-il en premier ? Quaime-t-il et que naime-t-il pas ? Quelle impression garde-t-il dune entreprise qui afche cette image ?

Figure 4.5 Check-list dvaluation graphique.

108

4. Dfinition et ciblage du site

4.3.2 Test dutilisabilit

Le test dutilisabilit (ou test utilisateur, cette mthode est dcrite en dtail au chapitre 7) permet dobserver directement la faon dont linternaute se sert du site et ainsi didentifier concrtement les vritables problmes quil rencontre en situation dutilisation. Le test consiste observer individuellement des individus appartenant au cur de cible en situation relle dutilisation du site. Leurs missions sont construites partir dun scnario sappuyant sur les objectifs principaux du site et visant vrifier lune des hypothses de conception. Afin de pouvoir placer lutilisateur dans un contexte raliste, le prototype doit tre suffisamment dvelopp pour permettre de raliser une tche du dbut jusqu la fin. Il comporte un ensemble cohrent de pages o une partie des services proposs par le site final ont t mis en uvre (ou simuls). Linternaute est plac en situation dutilisation du site, de prfrence dans une configuration matrielle similaire celle dont il dispose chez lui. La consigne lui est donne de raliser une des tches pour laquelle le site a t conu. De cette manire, on observe concrtement les problmes que lutilisateur rencontre, les erreurs quil commet et les questions quil se pose. Par ailleurs, il est recommand dinciter linternaute verbaliser afin de comprendre la faon dont il interprte le fonctionnement du site. Lobservateur vrifie que linternaute se repre correctement dans le site, quil trouve linformation quil cherche et quil suit le chemin le plus court pour y aller. Le test sert vrifier que les liens sont correctement positionns sur la page l o linternaute les cherche. Lorsque certains liens manquent, le test permet de les identifier. Cest le cas des liens raccourcis qui acclrent la navigation entre certaines pages du site situes dans des rubriques diffrentes. Lobservateur vrifie que les textes sont compris sans ambigut par linternaute, en particulier le libell des liens. Il peut aussi valuer la facilit de mmorisation du site. Pour cela, il vrifie que linternaute sait, de mmoire, o se trouve linformation et quil se souvient de la position et du nom des liens. De cette manire, les problmes dutilisabilit rencontrs par les utilisateurs sont clairement mis en vidence. Lanalyse des causes de chacun dentre eux permet de construire des pistes concrtes damlioration du site. Lutilisabilit du site peut galement tre mesure en sappuyant sur la performance de lutilisateur. Par exemple, pour un site de commerce lectronique, il est possible de vrifier que lutilisateur russi passer commande (efficacit) et de calculer le temps mis pour passer la commande (efficience). Ces donnes objectives permettent de mesurer lutilisabilit du site et dvaluer concrtement lamlioration entre les diffrents prototypes.

4.4 Identification du contenu

109

Linternaute sait-il o il est ? Trouve-t-il l'information qu'il cherche ? Choisit-il le chemin le plus court pour trouver l'information ? Linternaute voit-il les informations importantes ? A-t-il repr o sont les liens ? Les intituls des liens lui permettent-ils de deviner correctement le contenu des pages ? Certains liens manquent-ils linternaute ? Des raccourcis permettraient-ils dacclrer la navigation dans le site ? Linternaute connat-il les liens vers les principales rubriques du site ? Comprend-t-il correctement le contenu des pages ? Linternaute russit-il mmoriser correctement lorganisation du site ?

Figure 4.6 Points vrier lors du test dutilisabilit.

4.4

IDENTIFICATION DU CONTENU
La premire tape de la dfinition dun site consiste laborer son contenu en sappuyant sur les services que recherchent les utilisateurs. Pour cela, on prcise les caractristiques de la population vise ainsi que les services de ce type dj existants. Par des interviews, on identifie lattente des utilisateurs et les questions quils se posent. Ces lments permettent de construire larchitecture de communication qui servira de ligne directrice la construction du site.

4.4.1 Ciblage du site

Comme pour tout dveloppement de produit, il convient dans un premier temps didentifier prcisment le profil de la population vise : tranche dge, catgorie socio-professionnelle, exprience dInternet ainsi que la configuration du matriel utilis : systme dexploitation, navigateur, rsolution dcran, etc. Avec le concours dun chantillon dutilisateurs appartenant au cur de cible, on prcise ensuite les services proposs par le site. Cet aspect fait gnralement lobjet dune enqute par interview individuelle ou par groupe de travail ( focus group) On recueille ainsi lattente et le besoin des utilisateurs : Quels problmes vont-ils chercher rsoudre en allant sur le site ? Quattendent-ils du site ? Dans quel contexte sont-ils amens y aller ? Quels sont, daprs eux, les lacunes des sites existants du mme type, voire des autres mdias offrant ce type de service ?

110

4. Dfinition et ciblage du site

Ces lments fournissent des lments subjectifs sur lattente des utilisateurs. Les interviews permettent de mieux comprendre limage que se font les utilisateurs du service propos et ce quils en attendent. Les focus group servent identifier lunivers symbolique de lutilisateur. Tirant parti de la dynamique du groupe, ils permettent de consolider la ligne de communication de lentreprise au travers de son site. Il est noter que ces mthodes (interviews et focus group) vont servir uniquement recueillir les souhaits de lutilisateur. En aucune manire, elles ne peuvent permettre de prvoir son comportement sur le site [Nielsen 01]. On recueille de cette faon des informations subjectives. Elles pourront tre remises en cause par la suite lorsque lutilisateur est plac en situation dutilisation. En effet, les tests nous montrent que lutilisateur ne fait pas toujours ce quil a annonc, car la situation concrte induit de nouveaux comportements. Or, lutilisabilit du site sappuie sur ce quil fait effectivement et non sur ce quil pensait faire. Cest pourquoi, on accordera plus dimportance un problme qui a t rencontr lors dun test qu celui dont le risque aurait t voqu lors dune interview. Dans un second temps, le ciblage consiste identifier en fonction de la population vise, les objectifs de communication que cherche atteindre lentreprise au travers du site. Ce point est particulirement important pour les sites ddis la communication externe ou interne. Une ligne de communication est labore pour le site. Elle prcise les messages transmettre, les lments persuasifs du message ainsi que la manire dont les textes et le graphisme du site vont transcrire ces messages.

4.4.2 Analyse de la concurrence

En phase de dfinition, il est particulirement utile dtablir le paysage concurrentiel dans lequel le site se positionne, cest--dire identifier les concurrents, le contenu de leur site et la faon dont ils communiquent sur les autres mdias. Lorsque linformation est publique, le nombre de visites enregistres sur les sites concurrents permet de fixer des objectifs prcis du point de vue de la frquentation. Une analyse dtaille en terme de design, de communication et dutilisabilit va servir identifier les points forts et les points faibles des sites concurrents. Lobjectif est bien entendu que le nouveau site remdie aux problmes rencontrs par les internautes tout en conservant les aspects positifs des sites existants. Selon les moyens mis en uvre pour cette phase, des tests dutilisabilit peuvent tre mis en uvre sur les sites concurrents ou, un moindre cot, une simple inspection ergonomique sur les points suivants.

4.4 Identification du contenu

111

Lobjectif du site est-il clair ? Laudience du site peut-elle clairement sidentier ? Le site est-il utile et pertinent pour ce public ? Le site est-il intressant et attirant ? Le site permet-il aux visiteurs de raliser toutes les tches quils veulent accomplir ? Les visiteurs peuvent-ils accomplir facilement ces tches ? Le contenu et lorganisation des informations sont-ils cohrents avec lobjectif du site ? Linformation importante est-elle facile trouver ? Toutes les informations sont-elles claires, faciles comprendre et lire ? Le visiteur sait-il toujours o il est et comment faire pour aller o il veut ? Le graphisme est-il agrable ? Les pages se chargent-elles sufsamment vite ?

Figure 4.7 Check-list dvaluation rapide [IBM 99].

Ces diffrentes analyses vont permettre de dfinir les lments distinctifs du site pour quil soit rellement comptitif. Elles dbouchent sur llaboration de larchitecture de communication.

4.4.3 Architecture de communication

Construire larchitecture du site consiste identifier les demandes, les questions que se pose lutilisateur, et construire les rponses, cest--dire les services rendus par le site, en sassurant que des objectifs de communication sont atteints. Un site fonctionne lorsquil fournit des rponses ses visiteurs et quil transcrit les objectifs de communication de ses concepteurs. Cette faon de faire permet de structurer le site de faon ce que le visiteur trouve rapidement les rponses aux questions quil se pose tout en vhiculant les messages que cherche transmettre lentreprise au travers du site. Considrons, par exemple, un site intranet dont un des objectifs en terme de communication interne est le renforcer lesprit collectif au sein de lentreprise. Lenqute a recueilli des besoins du type Comment se faire rembourser une note de frais ? ou encore Quel modle de document utiliser pour les fax ? . Le site y rpondra par un ensemble de pages dcrivant le rfrentiel des procdures et des documents en vigueur dans lentreprise. La rubrique Rfrentiel

112

4. Dfinition et ciblage du site

Figure 4.8 Pour tre efcace, le site web doit rpondre aux questions de lutilisateur tout en vhiculant les objectifs de communication de ses concepteurs.

prend en compte la fois le besoin des salaris et lobjectif de renforcer lesprit collectif puisque tous utiliseront les mmes mthodes et modles de documents. Sur ce principe, larchitecture de communication est un document qui synthtise cette premire phase de la conception du site en dcrivant les diffrents thmes abords dans le site et en prcisant pour chacun dentre eux la cible vise et lobjectif poursuivi en terme de communication. Il permet de recenser de faon exhaustive les diffrents lments dinformation partir desquels seront construites les pages du site.

4.5

STRUCTURE DU SITE
La dfinition dun site se fait en deux grandes tapes. Tout dabord, le contenu est labor et collect plat comme nous venons de le voir. Puis, les informations sont regroupes et agences afin de faciliter la navigation. cette fin, nous prsentons la mthode du tri par carte qui permet dorganiser le contenu dun site.

4.5.1 Tri par carte

Un site web est facile utiliser lorsque lutilisateur y retrouve aisment les informations quil cherche. Dans cette optique, le tri par carte vise organiser les diffrentes informations du site selon le point de vue des utilisateurs [Robertson 01]. Pour cela, sappuyant sur les lments identifis prcdemment, on rdige une carte pour chaque page du site. La carte dcrit le contenu de la page par un libell : un ou deux mots-cls et une phrase descriptive. On veillera toutefois ne pas induire de regroupement dans le titre ou la description utilise.

4.5 Structure du site 113

Un ensemble de cartes et denveloppes est prsent chaque participant. Il lui est demand de regrouper les cartes qui lui semblent similaires de son point de vue. Il dcrit chaque groupe par une phrase et un nom. Il note cette description sur une enveloppe et y glisse le paquet de cartes correspondant. ventuellement, il peut ensuite rassembler les groupes semblables et crer un groupe de groupes . Le temps pour raliser le tri nest pas limit. Il est recommand de ne pas dpasser les 50 cartes. Au-del, le tri risque dtre fauss par le grand nombre de cartes. Dans ce cas, il est prfrable de travailler dans un premier temps sur les grandes rubriques du site, chaque carte reprsentant un ensemble de pages dun thme donn, puis de structurer lintrieur de chaque thme par une nouvelle srie de tris. Le tri par carte est loccasion de sassurer de la compltude des informations du site. On prvoira des cartes blanches pour que lutilisateur indique les thmes qui lui manquent. Ces nouvelles cartes vont galement permettre de dupliquer une carte afin de la faire apparatre dans diffrents groupes. Linformation

Figure 4.9 La premire version du site du conseil gnral du Territoire de Belfort retait la structure interne de linstitution, chaque comptence disposant dune rubrique. Malheureusement, lhabitant du Territoire de Belfort y trouvait difcilement les informations susceptibles de laider au quotidien.

114

4. Dfinition et ciblage du site

Figure 4.10 Le site a t rorganis dans sa seconde version par la mthode du tri par carte. Les diffrents services que peut rendre le conseil gnral aux familles du Territoire de Belfort y sont mis en vidence.

correspondante devra donc figurer dans plusieurs rubriques du site gnralement par des liens. Le tri permet aussi de vrifier la bonne comprhension des libells des cartes qui deviendront les titres des pages du site. Pour cela, on invite le participant commenter et justifier les regroupements quil fait. Il est galement autoris corriger les libells quil ne comprend pas en proposant une autre formulation directement sur la carte. Le tri par carte est effectu avec un panel dutilisateurs, soit en groupe, soit individuellement. En groupe, le tri prsente lavantage dtre plus rapide raliser et permet dobtenir des rsultats plus riches car il tire partie de la dynamique crative du groupe. Mais certaines personnes peuvent avoir des difficults exprimer leur opinion alors quelles lauraient fait plus facilement si elles avaient t seules. On minimise donc les facteurs susceptibles de biaiser le rsultat lorsque chaque participant est pris individuellement. Les diffrents regroupements obtenus sont ensuite compils en identifiant les associations les plus frquentes, soit la main, soit laide dun outil statistique comme celui propos par IBM [Dong 99].

4.5 Structure du site 115

Cette premire tape permet didentifier le contenu des principales rubriques du site sur la base des regroupements les plus frquemment raliss. Elle garantit que la construction du site se fonde sur la perception des utilisateurs, sur limage quils se font des informations contenues dans le site.

4.5.2 Organisation du contenu

Le tri par carte permet dorganiser les informations du site du point de vue des utilisateurs. Mais rien ne garantit que la navigation dans le site sera simple. En dautres termes, lutilisateur y trouvera linformation, mais le temps de recherche na pas t optimis. Il convient maintenant de raffiner la structure du site afin de faciliter la navigation. Lexprience de [Miller 81] a montr quil tait prfrable dorganiser les menus en largeur, plutt quen profondeur (cf. 2.3.2). Cest galement vrai pour les sites web. La largeur dun site correspond au nombre maximum de sous-rubriques accessibles depuis une rubrique donne ou depuis la page daccueil, tandis que la profondeur est le nombre maximum de rubriques par lesquelles il faut passer avant datteindre une page terminale du site. Lorsque le site est agenc en largueur dabord, lutilisateur comprend plus facilement o il se situe. Il trouve plus rapidement les informations quil cherche. Minimiser la profondeur du site (3-4 niveaux maximum). Plus la profondeur du site est importante, plus les points de choix sont nombreux et donc difficiles mmoriser. En rgle gnrale, au-del du 3 e niveau, le visiteur risque de se perdre car il ne sait plus o il est dans le site. Il est donc prfrable de ne pas dpasser ce niveau dimbrication. Optimiser le nombre ditems par rubrique (8 sous-rubriques maximum) Pour une rubrique donne, la slection est dautant plus facile quelle comporte peu de sous-rubriques. Au-del de 8 options, lutilisateur procde par comparaisons successives pour faire un choix. En limitant la taille de chaque rubrique, le temps de slection est diminu. Lutilisateur effectue plus rapidement son choix entre les diffrentes sous-rubriques.

116

4. Dfinition et ciblage du site

Largeur du site (8 sous-rubriques max.)

Figure 4.11 La navigation est plus rapide lorsque la structure du site facilite le travail de mmorisation et de slection. En rduisant la profondeur, lutilisateur mmorise facilement les rubriques par lesquelles il est pass, tandis quil dtermine plus rapidement son chemin lorsqu chaque intersection, le nombre de choix est limit.

Profondeur du site (3-4 niveaux max.)

Prfrer une arborescence rgulire. Plus larborescence du site est simple, plus elle est facile mmoriser. Lorsque la structure du site prsente une topologie rgulire, sans branche isole ni bifurcation inattendue, lutilisateur se construit aisment une image mentale du site. Il apprend plus facilement sen servir.

Dconseill

Prfrable

Figure 4.12 Une structure rgulire facilite la navigation dans le site car elle est plus simple mmoriser.

4.6 Lutilisabilit du site au quotidien 117

4.6

LUTILISABILIT DU SITE AU QUOTIDIEN

Un projet web est un projet dentreprise. Mettre en place un site, communiquer, tablir une relation commerciale sur le web est un choix stratgique. Au mme titre que la stratgie de lentreprise se construit sur le long terme, le fonctionnement du site doit tre conu dans la dure. Pourtant combien de sites institutionnels sont devenus obsoltes car ils avaient t raliss comme une plaquette commerciale, cest--dire une fois pour toutes ? Un site ne peut pas tre conu comme une prsentation statique. Les internautes attendent une information actualise, mise jour rgulirement. Dfinir le processus de fonctionnement du site. Le processus de fonctionnement du site doit tre mis en place ds la phase de dfinition. Dans les grandes lignes, le principe consiste partir du plan du site et identifier pour chaque rubrique les responsables ditoriaux ainsi que la priodicit de mise jour. Le contenu rdactionnel est ensuite valid par un comit de rdaction avant la publication sur le site Il est dailleurs recommand dimpliquer les responsables ditoriaux des diffrentes rubriques dans la phase de conception du site. Cependant, malgr toute limportance accorde lutilisabilit lors de la phase de conception, elle ncessite encore une attention constante de la part du webmaster une fois le site mis en ligne. Les recommandations qui suivent visent amliorer lutilisabilit du site lorsquil est oprationnel. Suivre les statistiques dutilisation. Les statistiques dutilisation permettent dtablir la topologie de frquentation du site. Ces donnes relles vont servir valider les hypothses faites lors de la phase de conception en terme de navigation. Elles permettent dajuster lorganisation du site afin que les pages les plus frquemment utilises soient les plus faciles atteindre. Les statistiques fournissent galement une mesure relle de la configuration matrielle des utilisateurs (navigateur, rsolution graphique, taille dcran, systme dexploitation) et permettent dadapter le site en consquence. Prvoir les cas derreur. Il est possible de renvoyer lutilisateur vers une page prdfinie lorsquil rencontre un lien bris, suite une rorganisation du site par exemple. Dans ce cas,

118

4. Dfinition et ciblage du site

plutt quun message derreur, il est prfrable daider lutilisateur en lorientant vers la page daccueil ou en lui fournissant une carte du site.

Prfrable

Figure 4.13 Cette page derreur conduit lutilisateur sur un plan du site lui permettant de retrouver rapidement linformation quil cherchait.

Utiliser un rideau de construction. Lorsque le site est en cours de modification, il peut arriver quil ne soit plus accessible. Dans ce cas, il convient den avertir les internautes par une page sp-

4.6 Lutilisabilit du site au quotidien 119

cifique, sinon ils risquent de ne plus revenir, pensant que ladresse est fausse. Pour cela, un rideau de construction permet dexpliquer la raison du problme et de prciser la date laquelle le site sera nouveau accessible.

(a) Dconseill

(b) Prfrable

Figure 4.14 Une page indiquant que le site est momentanment non accessible montre linternaute quil ne sagit pas dune erreur de sa part, mais dun arrt temporaire du serveur. Par contre, ce type de message nest utile que sil apporte effectivement une information, en particulier la date laquelle le service sera de nouveau rtabli (b).

Certains automatismes peuvent aussi tre mis en uvre afin dviter de bloquer lutilisateur lorsque ladresse du site a t modifie. Dans ce cas, il importe cependant de rendre visible lopration ralise par le navigateur afin que lutilisateur comprenne le traitement effectu et en tienne compte par la suite, en mettant jour ses favoris par exemple.

(a) Dconseill

(b) Prfrable

Figure 4.15 Ces deux pages vont guider lutilisateur aprs une modication du site. La premire (a) demande une action supplmentaire pour atteindre la page. Au contraire, la seconde (b) dirige automatiquement linternaute vers la page quil cherchait.

Maintenir les liens externes. Les adresses Internet sont parfois obsoltes. Cest le cas, par exemple, lorsque la page dsigne est dplace ou efface. Il est prfrable de vrifier rgulirement le bon fonctionnement des liens vers les autres sites. Un lien mort dnote un certain laisser-aller dans la gestion du site.

120

4. Dfinition et ciblage du site

Dconseill

Figure 4.16 Le lien bris est un chec et une perte de temps pour linternaute qui se retrouve dans une impasse, oblig revenir en arrire laide du bouton Page prcdente.

Mettre jour rgulirement le site. Aussi utile soit-il, un site, sil ne change pas, nest plus visit. Dailleurs, connaissant par avance son contenu, pourquoi le visiterait-on ? Il est important dactualiser rgulirement les informations du site. Les nouveauts doivent apparatre clairement, si possible ds la page daccueil, afin que le visiteur rgulier puisse en tre inform immdiatement. Inciter au dialogue. Le sentiment des utilisateurs est la meilleure faon de savoir si le contenu du site rpond leur besoin. Inciter les visiteurs crire au responsable ditorial du site permet de mieux connatre ce quils aiment ou naiment pas, les problmes quils rencontrent, et ce quils attendent du site. Ces remarques vont servir amliorer le site, voire concevoir les prochaines versions. Il est galement envisageable de mener des enqutes de satisfaction en ligne. Cependant, ce type denqute permet uniquement de rcolter les opinions dinternautes utilisateurs du site. Elle va servir identifier des axes de fidlisation, mais elle ne permet pas de toucher ceux qui ne vont pas sur site ou qui utilisent dautres mdias. Notons galement quon recueille ainsi des impressions subjectives sur le site. Au mme titre que lors des interviews ou des focus group, ces informations ne peuvent pas tre exploites au pied de la lettre. Elles doivent tre auparavant confrontes aux donnes objectives issues des tests.

4.7 Lergonomie des intranets

121

Rpondre aux utilisateurs. Le dialogue doit stablir dans les deux sens. Les rponses montrent aux utilisateurs que leur point de vue est pris en considration. Ce comportement est gnralement apprci. Il permet dtablir un climat constructif dchanges qui incitera linternaute renouveler lexprience.

4.7

LERGONOMIE DES INTRANETS

Dans les grandes lignes, la conception dun intranet diffre peu de celle dun site Internet. Les rgles suivre sont les mmes. Cependant les enjeux sont diffrents. La plupart des sites Internet ont une vocation marchande. Ils permettent lentreprise dtablir une relation commerciale avec ses clients. Au contraire, les utilisateurs de lintranet sont les propres salaris de lentreprise. Ici lobjectif est avant tout damliorer la productivit interne de lentreprise. Sur lintranet, le design doit avant tout tre fonctionnel. Cest le contenu qui prime. La qualit de linformation et la rapidit laquelle on y accde sont les principaux critres dutilisabilit de lintranet.

Figure 4.17 Pour les intranautes, le contenu importe plus que le graphisme, comme le montre la page ci-dessus qui est la plus consulte de lintranet de cette entreprise.

122

4. Dfinition et ciblage du site

Le graphisme ne doit pas pour autant tre nglig lors de la conception dun intranet, car il joue un rle dterminant dans la mise en valeur des informations. Lagencement de la page, les choix de typographie et de couleur sont galement des lments qui permettent lutilisateur daccder rapidement linformation quil cherche.

4.7.1 Les enjeux de lintranet

Lintranet est un outil de travail collectif, partag et conu par tous les salaris de lentreprise. la base, cest un mdia dchange et de partage. Il permet de mettre en commun des informations avec les autres collaborateurs de lentreprise : documents, modles, connaissances, savoir-faire, informations pratiques, etc. Les salaris se servent de lintranet au quotidien pour y trouver les informations ncessaires leur travail [Germain 04]. Lenjeu de la conception dun intranet est donc de fournir la bonne information le plus rapidement possible. Lobjectif est damliorer la productivit de lentreprise. Il sagit non seulement dun gain en terme de productivit financire, mais aussi sur le plan collectif par la communication et le partage des connaissances. Les salaris sont obligs dutiliser leur intranet. En effet, contrairement au web o linternaute peut quitter un site qui lui semble trop complexe, les intranautes nont pas dautre choix que de rester sur leur intranet. De ce fait, dans la mesure o cest un outil systmatiquement utilis par tous les employs de lentreprise, une amlioration, mme minime lchelle de lindividu, peut avoir un impact global important pour lensemble de lentreprise et donc une rpercussion directe sur les cots de production. Imaginons, par exemple, quun salari utilise en moyenne lintranet 3 fois par semaine raison de 20 minutes chaque jour. Un simple gain de 2 minutes par jour permet de gagner 6 minutes par semaine et par employ. En considrant que le cot moyen dun salari est de 60 000 euros, pour une entreprise de 1 000 personnes, le gain total sera 160 000 euros par an. Cependant, certaines entreprises continuent concevoir lintranet sans prendre en compte son utilisation effective par les salaris. Ainsi, sur lintranet dune socit franaise, se trouvait un formulaire appel Demande de Matriel Informatique qui devait tre utilis, comme son nom lindique, pour toute requte dvolution du parc informatique. La navigation sur le site ntant pas aise, les employs mettaient en moyenne 15 minutes pour retrouver ce formulaire. Or, dans cette entreprise de 4 000 personnes, 550 formulaires de ce type taient remplis chaque mois, soit une perte de 100 000 euros environ par an ! Le plus marquant ici nest pas tant le prjudice financier, mais plutt le gaspillage de temps gnr et le stress qui en dcoule.

4.7 Lergonomie des intranets

123

linverse, Bay Networks, une socit informatique travaillant dans le domaine des rseaux, a dpens 3 millions de dollars pendant 2 ans pour tudier la faon dont ses employs se servent de la base de donnes intranet. partir de cette tude, lorganisation de lintranet a t revue, faisant conomiser 10 millions de dollars par an lentreprise [Fabris 99].

4.7.2 La navigation : principale difficult des intranets

Notre intranet : il est bien, cest une formidable source dinformations. Mais on ne sait pas toujours les retrouver Voici une remarque qui revient souvent lorsque les salaris parlent de leur intranet. En effet, contrairement lInternet o lutilisateur recherche une information prcise, le salari utilise lintranet pour y trouver une quantit plus importante de donnes : celles ncessaires son travail. Les intranets sont donc gnralement plus volumineux que les sites Internet. En moyenne, le site intranet contient environ 50 100 fois plus de pages que son homologue Internet. Faciliter la navigation. Les intranets sont volumineux. De ce fait, la navigation y est difficile. Permettre lintranaute de naviguer facilement doit tre lobjectif premier des concepteurs du site. Lergonomie du systme de navigation sera traite en dtail dans le chapitre suivant La navigation web, nous nous intressons ici aux spcificits des sites intranets. La conception du systme de navigation sappuie sur un principe de base, savoir : permettre lutilisateur de comprendre o il est, par o il est pass et ce quil y a ailleurs. Pour cela le systme de navigation devra indiquer lintranaute o il se situe sur le site en mettant, par exemple, en vidence lintitul de la page courante dans la barre de navigation. noter galement que la structure complexe des intranets tire avantageusement partie de lutilisation du chemin de progression (Breadcrump trail). Cet outil de navigation permet lutilisateur de se situer rapidement dans la structure globale du site et lui indique le chemin quil a parcouru depuis la page daccueil. Dfinir un modle de page unique pour lensemble de lintranet. Dans la mesure o il nexiste gnralement pas de service ddi qui fournirait des outils communs (modles, feuilles de style) aux responsables des rubriques de lintranet. Ce dernier est frquemment compos dune multitude de sites indpendants les uns des autres, chacun suivant sa propre charte graphique, son propre systme de navigation. Du point de vue de lutilisateur, cest un vritable casse-tte.

124

4. Dfinition et ciblage du site

chaque nouvelle rubrique, il doit dcouvrir une nouvelle logique de fonctionnement. Afin de permettre lutilisateur de se reprer facilement entre les rubriques, la conception de lintranet doit sappuyer sur un systme de navigation unique et un schma de page commun lensemble du site. De cette manire, lintranaute retrouve des repres visuels fixes sur chacune des pages de lintranet.

Figure 4.18 Le haut de page o gure, gauche, le logo de lentreprise est commun toutes les pages de lintranet. Elle permet un retour rapide la page daccueil et aux rubriques les plus frquemment utilises ( Nouveauts et Annuaire ). En terme de prsentation, toutes les pages sont similaires, seule la barre de navigation gauche change dune rubrique lautre. Elle permet daccder aux pages internes la rubrique courante (ici Ressources Humaines).

Une organisation cohrente du site permet linternaute de retrouver une disposition similaire dune page lautre. Il a ainsi le sentiment de rester au mme endroit . La prise en main est plus facile. Calquer la structure du site sur lorganisation de lentreprise. Afin de permettre aux salaris de se reprer facilement, il est conseill de structurer le contenu de lintranet en sappuyant sur lorganisation interne de lentreprise. Les salaris connaissent leur entreprise. Ils savent qui fait quoi et o ils sont susceptibles de trouver linformation. Ils sorienteront plus rapidement dans lintranet sil reprend lorganisation de lentreprise.

4.7 Lergonomie des intranets

125

Dans le mme ordre dide, il est conseill de crer des mini-sites ddis aux projets de lentreprise. Les diffrents participants y trouveront les documents et les informations relatifs au projet. Ils partageront et communiqueront leurs rsultats au reste de lentreprise au travers de ces sites. Structurer lintranet en fonction de lorganisation de lentreprise permet aux salaris qui connaissent lentreprise de sy retrouver facilement, mais ce nest pas le cas pour les nouveaux venus : rcents embauchs ou prestataires. Dautres moyens doivent tre offerts pour leur permettre de retrouver les informations, cest le rle du moteur de recherche ou de lindex thmatique.

Figure 4.19 La structure de cet intranet, telle quelle apparat sur la page daccueil (dont une partie a volontairement t masque), reprend lorganisation de lentreprise en Lignes de produits (Business Lines) et Directions. On trouve galement une rubrique ddie chaque site rgional, lentreprise tant rpartie sur toute la France. noter les rubriques de la colonne de droite : Connaissances destines au partage des savoirs et Les outils qui donne un accs direct aux applications informatiques disponibles sur lintranet.

4.7.3 Le moteur de recherche

Le moteur de recherche est frquemment utilis par les intranautes. Ils sen servent dans deux cas. Soit, ils sont perdus dans un intranet mal organis et cherchent une information quils ne trouvent pas par la navigation habituelle (liens, barre

126

4. Dfinition et ciblage du site

de navigation). Soit, ils savent ce quils cherchent et prfrent utiliser le moteur de recherche car il leur permet daccder rapidement et directement la page souhaite, sans passer par des pages juges moins intressantes car en dehors du champ direct de leur recherche. Donner au champ de recherche lapparence dun champ de saisie. Pour que son rle soit immdiatement compris, le champ de recherche doit respecter les standards de linterface homme-machine et prendre lapparence dune bote blanche visuel que lutilisateur associe avec la saisie de texte.

Figure 4.20 An dinciter lutilisateur taper son texte, il est prfrable de laisser le champ de recherche vide. Ainsi dans cet intranet, le mot le plus frquemment recherch tait mots-cl car la plupart des utilisateurs lanaient directement la recherche sans saisir de texte puisque le champ tait dj rempli.

Simplifier les modes de recherche. Plutt que de proposer des critres sophistiqus de recherche (et, ou, etc.), il est prfrable doptimiser la recherche sur quelques mots. En effet, les tudes montrent que les utilisateurs effectuent des recherches sur deux mots en moyenne et quils ne savent pas se servir des fonctionnalits de recherche avance. Les requtes utilisant des oprateurs boolens ncessitent une certaine pratique pour tre utilises efficacement et peu dutilisateurs savent sen servir.

4.7 Lergonomie des intranets

127

Permettre une recherche par sous-domaine Restreindre le champ de recherche certaines parties du site est un bon moyen dviter de noyer lutilisateur sous une multitude de rsultats potentiels. Il convient toutefois dtre vigilant car de nombreux intranautes lancent la recherche sans porter attention cette restriction, ce qui peut-tre source derreurs. Il est donc prfrable de ne pas limiter le champ de recherche en proposant par dfaut une recherche sur tout lintranet , rservant lutilisation de la recherche restreinte des utilisateurs avertis.

Figure 4.21 Ici lutilisateur peut restreindre le champ de recherche en slectionnant la rubrique de lintranet sur laquelle porte la recherche.

Optimiser la recherche. En fait, le moteur de recherche rpond lutilit premire de lintranet savoir permettre aux salaris de trouver les informations ncessaires leur tche. Son rle est donc essentiel : il dtermine en grande partie lutilisabilit de lintranet. Pour que le moteur de recherche fournisse des rponses pertinentes aux utilisateurs, il convient doptimiser les rsultats de la recherche en veillant : Indexer rgulirement lensemble de lintranet afin de disposer quotidiennement dune information rcente et jour. Classer les rsultats selon la manire dont ils rpondent aux critres de recherche de faon afficher ds les premires pages les rsultats les plus pertinents pour lutilisateur.

128

4. Dfinition et ciblage du site

Fournir un titre chaque page de lintranet de faon faciliter la lecture des rsultats de la recherche. Construire une description de la page qui soit vritablement reprsentative de son contenu et des connaissances que les salaris sont susceptibles dy trouver, afin que lutilisateur comprenne le contenu de la page ds la lecture des rsultats. Fournir un index thmatique. Un index thmatique est un inventaire structur des connaissances de lentreprise. On trouve ce type dindex sur la plupart des sites Internet de recherche, comme Yahoo! par exemple. Cest un outil trs efficace. Il montre lutilisateur lensemble du contenu lintranet. Il lui permet dexplorer le site sans avoir connatre la dnomination exacte de ce quil cherche. En dautres termes, cest une faon daller la pche aux informations. Cependant, pour tre vritablement reprsentatif du contenu de lintranet, lindex thmatique doit tre rgulirement mis jour. Non seulement les liens doivent tre vrifis, mais aussi les informations que contient lindex. En particulier, lorsquun nouveau dpartement est cr, lactivit correspondante doit tre introduite dans lindex ainsi que les outils et les mthodes quelle apporte lentreprise.

Figure 4.22 Lindex thmatique permet ici de parcourir lintranet en rafnant progressivement son champ de recherche aux catgories concernes.

Par contre, pour lutilisateur qui sait prcisment ce quil cherche, lindex thmatique est peu rapide utiliser. Il prfrera se servir du moteur de recherche qui lui permet daller directement linformation souhaite.

129

5
La navigation web

CONCEPTION DU SYSTME DE NAVIGATION.....................................................................130 Principes ergonomiques ...................................................................................................130 La rgle des 3 clics ..........................................................................................................135 Les lments du systme de navigation ............................................................................136 BARRE DE NAVIGATION .....................................................................................................138 Menu droulant..............................................................................................................143 Les onglets......................................................................................................................145 Liste de slection.............................................................................................................147 Boutons de navigation ....................................................................................................148 Rollover ..........................................................................................................................150 CHEMIN VRIFIER
DE PROGRESSION .................................................................................................152

LIENS ..................................................................................................................................154
LA NAVIGATION .................................................................................................159

Sur Internet, lactivit principale de lutilisateur consiste naviguer, cest--dire quil se dplace virtuellement dune page lautre, dun site lautre de la toile. Lutilisabilit dun site web rside donc en grande partie dans la qualit de la navigation quil offre [Fleming 98]. Ce chapitre traite de la conception du systme de navigation du site. Il fournit des recommandations pour construire la barre de navigation et prsente les principaux composants de navigation utiliss sur le web, savoir les menus droulants, les onglets et le chemin de progression. Nous conclurons en examinant les liens hypertextuels qui constituent le composant de base de la navigation web.

130

5. La navigation web

5.1

CONCEPTION DU SYSTME DE NAVIGATION

Au contraire du monde dans lequel nous voluons tous les jours, la toile ne nous fournit pas ces repres qui nous servent habituellement nous orienter dans l'espace. Sur le web, nous navons aucune notion dchelle. Arrivant sur lune des pages dun site, nous ne pouvons pas imaginer le nombre total de pages de ce site. Il nous est donc difficile de savoir sil en reste encore beaucoup dautres qui pourraient nous intresser. Se reprer dans un site est parfois dlicat car tout y est plat . Impossible de nous aider des quatre directions (droite, gauche, haut, bas) pour nous diriger. Les pages que nous visitons se situent les unes ct des autres sans que nous puissions les positionner sur un mme rfrentiel. Contrairement au monde rel o nous dcouvrons progressivement les lieux que nous visitons, Internet nous fait voyager instantanment. Nous arrivons sur une page directement, sans savoir o elle se situe par rapport au reste du site. Sur le web, il est difficile de se localiser, cest--dire de se construire une image de lespace environnant. De ce fait, des lacunes dans la conception du systme de navigation sont gnralement lorigine de deux dsagrments frquents sur le web : se perdre et attendre. En effet, les navigateurs internet noffrent aucune vue globale de lensemble du chemin parcouru. Linternaute ne peut compter que sur le site lui-mme pour laider sorienter. Lorsque la navigation est peu ergonomique, il se perd frquemment. Dautre part, lorsque la navigation est difficile, lutilisateur doit ouvrir de nombreuses pages. Lattente entre chaque page rallonge invitablement la dure globale de la tche. Louverture dune nouvelle page ncessite le chargement des lments qui la composent et autant de connexions au serveur. Selon le dbit du rseau, ces traitements peuvent prendre un certain temps et parfois conduire linternaute abandonner.

5.1.1 Principes ergonomiques

Lorsquil visite un site, lobjectif de lutilisateur nest pas de naviguer. Il se sert dInternet dans le but de trouver une information. La navigation est uniquement un moyen, pas une fin en soi. Pour lutilisateur, la navigation doit tre la plus simple possible car cest une activit secondaire par rapport son objectif premier. Pour cela, la conception

5.1 Conception du systme de navigation 131

du systme de navigation devra sinspirer de notre faon de nous orienter dans le monde rel, cest--dire permettre linternaute de savoir sur chaque page : o il est, par o il est pass et ce quil y a ailleurs. Indiquer o est l'utilisateur. Il existe principalement deux moyens pour montrer lutilisateur o il se trouve dans le site. Changer la prsentation de la page courante dans la barre de navigation permet de signaler o se situe cette page par rapport aux autres rubriques du site. Donner la page un titre cohrent avec le libell du lien rappelle lutilisateur la manire dont il a ouvert cette page et renforce sa comprhension de lorganisation du site.

Figure 5.1 Lutilisateur vient de slectionner la rubrique support . Le bouton support de la barre de navigation change de couleur et la page qui safche porte le titre support , montrant ainsi lutilisateur o il se trouve. noter que le libell support se retrouve galement au-dessus de la barre de navigation secondaire, zone frquemment parcourue des yeux, facilitant ainsi le reprage.

Indiquer par o est pass lutilisateur. Le moyen le plus simple pour aider lutilisateur se reprer est de lui montrer les pages par lesquelles il est dj pass en changeant la couleur des liens. Les

132

5. La navigation web

tests nous montrent que ce comportement est maintenant bien compris par les internautes qui savent que lorsquune page a t visite, le lien correspondant change de couleur. Sur certains sites, on trouve galement un chemin de progression ( breadcrumb trail) montrant linternaute le trajet quil a parcouru depuis la page daccueil. Cet outil permet lutilisateur de se reprer tout en rendant explicite lorganisation du site (nous y reviendrons section 5.3).

Figure 5.2 Le chemin de progression est un moyen efcace pour indiquer linternaute par o il est pass. Il permet de comprendre facilement o se situe la page courante par rapport la page daccueil.

Fournir une vue globale du contenu du site. Comme pour toute interface homme-machine, la navigation est plus facile lorsque lutilisateur dispose dune vue globale . Cette vue densemble est fournie par la barre la navigation qui donne accs aux diffrentes rubriques du site (figure 5.3). Elle permet linternaute destimer la taille de lensemble du site et didentifier les autres rubriques susceptibles de lintresser. Agencer les rubriques dans l'ordre o elles sont utilises. Lorganisation de la barre de navigation sapparente celle dun menu. Les rubriques y sont places selon la faon dont lutilisateur en a besoin (cf. figure 5.4), selon la frquence de visite de la rubrique et selon son importance. Lagencement de la barre de navigation rsulte de la combinaison de ces critres. Elle donne lieu des tests dutilisabilit afin de vrifier les hypothses sur lordre et la frquence dutilisation des rubriques. Permettre une navigation directe pour les utilisateurs expriments. Un site internet sadresse en gnral une population varie. Le protocole de navigation doit donc tre suffisamment souple pour prendre en compte diffrents profils dutilisateurs, du dbutant linternaute expriment. Le premier apprciera dtre guid dans sa dcouverte. Il prendra le temps dexplorer les diffrentes pages, se construisant ainsi une reprsentation mentale de larborescence du site. Au contraire, linternaute expriment prfre accder

5.1 Conception du systme de navigation 133

Figure 5.3 La barre de navigation procure linternaute une vue globale du contenu du site. Elle montre les diffrentes rubriques lui permettant ainsi dvaluer la taille du site. Notons que sur ce site, une seconde zone de navigation en haut de page donne un accs direct aux rubriques les plus frquemment visites.

Figure 5.4 Ce site propose des outils pour dvelopper des services sur le web. Son architecture sappuie sur les diffrentes tapes de la construction dun site. Les rubriques sont ainsi prsentes dans lordre o linternaute en a besoin. Chacune correspond aux tches raliser lors du dveloppement dun service en ligne.

134

5. La navigation web

rapidement aux informations quil pense trouver sur le site sans passer par les pages intermdiaires. Pour ce dernier, un moteur de recherche permet datteindre directement certaines pages en fonction de leur contenu.

Figure 5.5 Le moteur de recherche permet des utilisateurs rguliers du site (qui savent donc ce qui sy trouve) daccder directement aux pages quils cherchent.

Cependant, il arrive trop souvent que le moteur de recherche soit vu comme la boue de sauvetage dun site trop riche et mal organis. En fait, cest gnralement linverse ! Un moteur de recherche fournit des rsultats pertinents condition dindexer soigneusement toutes les pages du site. Dans le cas contraire, lutilisateur est rapidement noy sous les rponses du moteur. Un moteur de recherche ne facilite la navigation que lorsquon sait ce quon cherche . Pour vritablement aider linternaute retrouver une information sur le site, une carte du site est gnralement plus efficace car elle permet de comprendre lorganisation globale du site.

Figure 5.6 Lorsque la taille ou le caractre dynamique du site ne lui sont pas rdhibitoires, la carte du site est un moyen simple pour aider linternaute retrouver une information. Elle lui permet galement de se faire une image de lensemble des pages du site.

5.1 Conception du systme de navigation 135

Ne pas demander l'internaute de connatre le fonctionnement du navigateur. Un navigateur internet (Internet Explorer ou Mozilla par exemple) est un logiciel permettant de naviguer sur le web. Pour linternaute, se servir du navigateur est une tche secondaire par rapport son objectif principal qui est de trouver une information sur la toile. De mme que nous navons pas besoin de connatre le mtier dimprimeur pour lire un livre, lutilisateur ne doit pas tre informaticien pour se servir dun site. Un site doit se suffire lui-mme en terme de navigation. Il doit pouvoir tre parcouru uniquement par ses propres liens. Il ne doit pas sappuyer sur des fonctionnalits du navigateur dont lutilisateur ignore parfois mme lexistence, comme par exemple le bouton Page prcdente .

Figure 5.7 Cette page est une impasse . Lutilisateur ne peut sen sortir quavec le bouton Page prcdente , sinon il ferme la fentre !

5.1.2 La rgle des 3 clics

Dans la premire dition de cet ouvrage, jai donn la recommandation suivante : Les principales informations doivent tre accessibles le plus rapidement possible (moins de 3 clics) . Effectivement, compter le nombre de clics est un moyen simple pour sassurer que la navigation est efficace. Mais les tests utilisateurs nous montrent que la complexit nest pas une chose aussi facilement quantifiable. Il arrive que linternaute parcoure facilement un site dans lequel il doit passer par de nombreuses pages, tandis quau contraire il

136

5. La navigation web

reste bloqu sur une page car il ne comprend pas sur quel lien cliquer pour passer ltape suivante. Limiter la complexit de chaque clic. La difficult de navigation ne rside pas proprement parler dans le nombre de clics effectuer, mais plutt dans la charge cognitive induite par chaque clic. Moins linternaute se pose de questions avant de cliquer, plus la navigation est fluide [Krug 01].

Dconseill

Figure 5.8 Sur ce site de location de voiture, il ne reste plus quun clic faire pour passer ltape suivante. Mais que choisir : le meilleur tarif, le tarif Corporate ngoci ou le code tarif RQ ?

5.1.3 Les lments du systme de navigation

Malgr des diffrences de graphisme dun site lautre, la navigation web se standardise pour le plus grand bien de linternaute qui sy retrouve ainsi plus facilement. Une majorit de sites ont adopt un systme de navigation sappuyant les lments du schma indiqu figure 5.9 [Krug 01]. Le logo du site est gnralement plac en haut gauche. Il a une position dominante par rapport au reste de la page. Effectivement, le logo reprsente le site et au-del, lentreprise laquelle appartient ce site. Il englobe donc naturellement lensemble des pages. Les concepteurs web ont pris lhabitude dassocier au logo un lien vers la page daccueil. Cest logique et cohrent avec le rle englobant du logo. Mais les tests nous montrent que peu dutilisateurs connaissent ce lien, seuls les internautes

5.1 Conception du systme de navigation 137

Figure 5.9 Schma standard de navigation.

avertis sen servent. Il est donc prfrable dindiquer galement le retour vers la page daccueil par un lien dans la barre de navigation. En haut droite apparaissent des utilitaires. Ce sont des lments transversaux au reste du site qui ne trouvent pas leur place dans l'arborescence des rubriques car ils doivent tre accessibles tout moment par l'utilisateur. Les utilitaires sont par exemple : laide en ligne, le moteur de recherche, les conditions de livraison, le suivi de la commande, laccs au panier (ou caddie), les contacts, etc. La barre de navigation horizontale permet une navigation primaire, cest--dire laccs au premier niveau du site. Linternaute atteint par cette zone les principales rubriques. Chaque page du site possde galement une zone de navigation appele navigation secondaire. Cette zone de navigation permet de se dplacer lintrieur dune mme rubrique. Selon les sites, elle saffiche soit horizontalement sous la barre de navigation primaire, soit verticalement gauche de la page.

Figure 5.10 Les lments standard du systme de navigation se retrouvent sur ce site. Ici, la barre de navigation primaire, reprsente par des onglets, ouvre une zone de navigation secondaire horizontale qui permet daccder directement aux pages.

138

5. La navigation web

5.2

BARRE DE NAVIGATION
Apparaissant sur toutes les pages du site au mme endroit et avec la mme prsentation, la barre de navigation montre linternaute quil reste sur le mme site. On parle de navigation persistante. Elle permet un accs direct aux principales rubriques du site et un retour rapide la page d'accueil.

Figure 5.11 Barre de navigation.

Afficher une barre de navigation sur toutes les pages du site. lment principal de la cohsion du site, la barre de navigation doit se rpter sur toutes les pages. Elle permet linternaute de se reprer en lui indiquant la page courante par un artifice graphique. Cadrer la barre de navigation en haut gauche de la page. Place en haut gauche de la page, la barre de navigation est toujours apparente quelle que soit la taille de la fentre. En effet, lorsquon redimensionne une fentre, le coin suprieur gauche reste visible. De cette manire, la barre de navigation demeure accessible quelle que soit la taille de lcran. De plus, cet emplacement confre la barre de navigation une position dominante sur le contenu de la page. Rpter la zone de navigation en bas de page lorsque la page est longue. Lutilisateur considre quune page est longue lorsquil doit se servir des barres de dfilement pour la lire compltement. On peut estimer que cest le cas ds que la page dpasse deux crans de haut. Il est alors conseill de rpter la zone de navigation en bas de page. Linternaute gagne du temps. Il peut accder directement aux autres rubriques du site sans devoir remonter en haut de page. Prvoir une zone de navigation contextuelle. Les zones de navigation contextuelle sont des espaces indpendants de la barre de navigation persistante qui conduisent vers des pages traitant de thmes

5.2 Barre de navigation

139

Figure 5.12 Lorsque la page est longue, une zone de navigation en bas de page vite lutilisateur de remonter pour atteindre les autres sections du site.

connexes la page courante. Elles sont spcifiques de la page affiche et dpendent parfois du profil de lutilisateur (dtermin partir de ses prcdents parcours sur le site). Lobjectif est de permettre linternaute dexplorer le site en fonction de ses propres sujets dintrt, voire de linciter dcouvrir de nouvelles sections. Cette navigation est gnralement apprcie des internautes car elle semble moins dirige et plus intuitive que la navigation impose par la barre de navigation. Elle permet dapprofondir les thmes traits dans la page courante et daborder des sujets annexes.

Figure 5.13 Cette page est lentre du rayon Ordinateurs de bureau de ce site. Les zones Actualits et Magazine droite offrent une navigation contextuelle. Elles fournissent linternaute des liens vers dautres pages traitant de ce produit, lui permettant de complter sa connaissance du sujet et dafner ses critres dachat.

140

5. La navigation web

Ne pas multiplier les zones de navigation. Afin doffrir un accs plus souple, les concepteurs web sont parfois tents de rpter les boutons, dupliquant ainsi les zones de navigation. Cependant, des liens redondants ne font quaugmenter la complexit de la page. Les entres multiples sont source derreur. Elles conduisent gnralement linternaute visiter deux fois la mme page. Il voit les diffrents boutons comme des objets diffrents. Il pense donc quil sagit de pages distinctes. Lors des tests, on observe mme certains internautes cliquant sur les deux liens pour sassurer quils conduisent vers la mme page [Nielsen 02].

Dconseill

Figure 5.14 Ce site comporte deux barres de navigation : lune horizontale, lautre verticale. Les mmes liens apparaissent dans les deux zones. Mais conduisent-ils vers les mmes pages ? Une seule zone de navigation aurait vit cette question inutile.

viter les barres de navigation gomtrie variable . Une barre de navigation est dite gomtrie variable lorsquelle change de prsentation selon la page affiche. Par exemple, certains sites nindiquent pas la page courante dans la barre de navigation. Effectivement, pourquoi laisser un lien vers la page qui est actuellement affiche ? Jamais lutilisateur ne chercherait

5.2 Barre de navigation

141

aller un endroit o il est dj. Et pourtant, il le fait ! Les tests nous montrent que linternaute clique parfois une seconde fois sur le bouton de la page courante afin de vrifier quil est bien l o il souhaitait aller.

(1) Slection de la rubrique Bons de rduction

Figure 5.15 Lutilisateur a choisi de visiter la page Bons de rduction (1). Mais il est gnralement surpris lorsquil arrive sur la page en question (2) voir gure page suivante.

142

5. La navigation web

(2) Affichage de la page Bons de rduction

Figure 5.15 Lutilisateur ne retrouve plus les repres de dpart : le haut de la page nest plus le mme, le logo de la barre de navigation a chang et surtout, il a perdu le lien sur lequel il vient de cliquer. Une mme prsentation de la barre de navigation sur lensemble du site aurait vit ce problme.

Si le site ne lui fournit pas des repres stables pour sorienter, linternaute se perd. La barre de navigation constitue une zone de rfrence sur laquelle il sappuie tandis que le reste de la page change en fonction du contenu. Sa prsentation doit tre constante sur lensemble des pages du site.

5.2 Barre de navigation

143

5.2.1 Menu droulant

Le menu droulant a t invent par les concepteurs web pour reproduire la mtaphore de la barre de menus logicielle. Il sagit de faire apparatre, lorsque la souris est au-dessus dune rubrique, une zone rectangulaire, un menu, contenant des liens vers les sous-rubriques.

Figure 5.16 Menu droulant.

Le principal intrt des menus droulants est le gain de place, puisque seule la barre de navigation est affiche en permanence. Ils prsentent galement lavantage doffrir un accs rapide aux sous-rubriques. Toutefois, les menus droulants ne permettent pas linternaute de se construire une vue globale de lensemble du site. La comparaison entre les diffrentes rubriques est difficile car un seul menu est visible un instant donn. Les familiers du web apprcient ces menus qui leur permettent de balayer rapidement lensemble du contenu du site. Par contre, les internautes dbutants sont parfois rebuts par les difficults de manipulation quils rencontrent. viter les sous-menus. Les menus web sont plus sensibles que les menus logiciels. Lorsque la souris quitte le menu, il sefface automatiquement. Quand lutilisateur est peu habitu la souris, on observe des disparitions intempestives du menu. Ce phnomne est amplifi si le menu comporte des sous-menus. Le mouvement de la souris doit tre encore plus prcis. Souvent les utilisateurs sy reprennent plusieurs fois pour slectionner un item.

144

5. La navigation web

Dconseill

Figure 5.17 La slection dun item du sous-menu est dlicate car lutilisateur ne peut pas latteindre directement. Pour viter que le menu ne sefface, il doit effectuer un coude, alors que la ligne droite semble plus naturelle.

Prfrable

Figure 5.18 An de remdier aux problmes de manipulation, le site propose datteindre galement les rubriques par des pages de liens.

5.2 Barre de navigation

145

Prvoir un second mode d'accs. Il arrive que les tests nous montrent des utilisateurs exasprs par la prcision requise pour utiliser les menus. Afin de rendre le site accessible tous, des pages sommaire offrent un accs plus classique aux rubriques par une liste de liens (voir figure 5.18).

5.2.2 Les onglets

Populariss par le site amazon.com, les onglets sont maintenant un standard de la navigation web. Occupant le haut de lcran, lutilisateur les identifie ds louverture de la page. Leur fonctionnement est compris facilement, probablement parce quil sagit de la mtaphore dun objet que nous avons tous utilis : les intercalaires. Le seul inconvnient notable de ce composant est quil nest pas possible de limbriquer. Les onglets ne sont efficaces que pour 2 niveaux de profondeur. Audel, ils doivent tre complts par une navigation secondaire.

Figure 5.19 Barre de navigation onglets.

Les onglets doivent tre dessins correctement. Le graphisme de la barre donglets prcise le fonctionnement de ce composant aux yeux de linternaute en sappuyant sur deux lments visuels : longlet slectionn est mis en vidence et il englobe la page courante. Lorsque ces indices sont absents, lutilisateur pense quil sagit de boutons.

146

5. La navigation web

Dconseill

Figure 5.20 Linternaute a ouvert la page en cliquant sur longlet Produits . Malheureusement, rien ne permet de visualiser laction qui vient dtre ralise. Bien quelle ressemble une barre donglets, cette barre de navigation nen offre pas les avantages.

Prslectionner un onglet ds la page d'accueil. La meilleure faon de montrer quoi servent les onglets est de les utiliser ds la page daccueil. En voyant longlet Accueil slectionn sur la page dentre du site, lutilisateur comprend que les onglets servent naviguer entre les rubriques du site.

Figure 5.21 Longlet Accueil est slectionn ds lentre sur le site an dexpliquer comment fonctionne la barre donglets.

5.2 Barre de navigation

147

5.2.3 Liste de slection

Dun fonctionnement similaire au menu droulant, la liste de slection est parfois employe pour la navigation. En fait, il sagit dune utilisation dtourne de ce composant qui avait t initialement conu pour les formulaires (nous y reviendrons chapitre 6). Certains sites proposent nanmoins une liste de slection pour naviguer entre les rubriques. Son principal intrt est doccuper peu de place et donc de laisser de lespace pour le contenu de la page proprement dit. La liste de slection est gnralement apprcie des utilisateurs familiers de linformatique qui retrouvent un comportement semblable celui du logiciel. Dans la mesure du possible, ne pas utiliser une liste de slection pour la navigation. La liste de slection est avant tout destine faciliter la saisie dans les formulaires. Une utilisation diffrente risque dtre mal comprise. Lorsque la place manque, la liste pourra toutefois tre employe pour permettre une navigation alternative la navigation principale dans le site. Mais elle ne doit pas tre le seul moyen de navigation du site. Pour naviguer, linternaute est plus habitu aux menus droulants qui prennent galement peu de place. Associer un bouton la liste de slection. Afin que lutilisateur garde le contrle de la navigation dans le site, il convient de distinguer deux tapes : la slection dune rubrique et louverture de la page. La premire se fait au travers de la liste, la seconde par un bouton plac ct. De cette manire, la nouvelle page nest ouverte quaprs confirmation explicite de linternaute.

148

5. La navigation web

(a) Dconseill

(b) Prfrable

Figure 5.22 La liste (a) afche la page ds quelle est slectionne, ne laissant gure le choix lutilisateur lorsquil sest tromp. Au contraire, la liste (b) demande linternaute de cliquer pour valider son choix, lui permettant ainsi de corriger ventuellement son erreur. On regrettera cependant que le bouton de validation ne soit pas mis plus en valeur.

5.2.4 Boutons de navigation

Les boutons de navigation sont des composants graphiques utiliss comme liens dans la barre de navigation. viter demployer des icnes sans texte explicatif. Lors de la conception dun site web, la question se pose frquemment de savoir sil est prfrable dutiliser du texte ou des icnes en guise de boutons. Les deux solutions prsentent des avantages. Les icnes permettent de gagner de la place lcran. Les textes sont gnralement plus faciles comprendre. En gnral, les visiteurs rguliers prfrent les icnes. Revenant frquemment sur le site, ils finissent par retenir leur signification. Ils apprcient la concision des visuels et la place ainsi gagne au profit du contenu de la page. En revanche, les visiteurs qui viennent sur le site pour la premire fois ont peu de chance de comprendre immdiatement la signification des icnes. Pour eux, des liens textuels sont plus faciles interprter.

5.2 Barre de navigation

149

Dconseill

Figure 5.23 An de gagner de la place lcran, les icnes sont parfois utilises dans les barres de navigation comme ici gauche et droite. Mais sans texte associ, leur signication est difcile deviner.

Un texte est gnralement moins ambigu quune icne. Mais le texte prendra plus de place lcran. Un compromis consiste indiquer dans le graphisme le libell du bouton, bnficiant ainsi la fois de lesthtique du visuel et de la lisibilit du texte.

Figure 5.24 La combinaison du graphisme et du texte vite les ambiguts.

Sur certains sites, un bulle daide apparat pour expliquer la signification des visuels (attribut alt). Mais, cela ne rsout pas le problme. En effet, les tests nous montrent que les utilisateurs ne russissent gnralement pas faire safficher la bulle daide. En effet, il faut pour cela que la souris soit immobilise pendant presque une seconde au-dessus de limage (700 ms en Windows). Cest beaucoup trop pour quelquun qui ne sait pas ce qui va se produire. En gnral, les bulles daide ne sont pas vues par les internautes. Dailleurs, elles nont pas t conues pour cela. Cette fonctionnalit existe pour permettre aux personnes malvoyantes de lire les images en se servant dun logiciel de synthse vocale (nous reviendrons sur ce point dans le chapitre suivant).

150

5. La navigation web

viter les boutons Suivant ou Prcdent. Du point de vue de lutilisateur, ce qui compte cest le contenu de la page et non la manire de latteindre. Peu importe quil sagisse de la page suivante ou de la page prcdente dans larborescence du site. Le libell du bouton de navigation doit tre conu de manire ce que linternaute puisse deviner le contenu de la page. Rappelons que les tests permettent de vrifier ce point qui conditionne en grande partie lefficacit de la navigation dans le site.

5.2.5 Rollover
Le rollover est un artifice graphique qui consiste changer la reprsentation dun visuel lorsque lutilisateur passe la souris au-dessus. Ce comportement est gnralement employ dans les barres de navigation. Le rollover sert mettre en vidence les boutons de navigation. Le rollover permet de fournir un retour aux actions de lutilisateur en mettant en vidence le bouton quil dsigne. Cet artifice graphique donne de linteractivit la page, chose gnralement apprcie des internautes.

Prfrable

Figure 5.25 La barre de navigation utilise ici le rollover pour augmenter la taille des caractres, rendant ainsi le bouton plus visible.

viter les textes cachs. Le rollover est aussi employ pour afficher un texte en fonction de lobjet dsign par linternaute. Cette technique prsente lintrt de gagner de la place,

5.2 Barre de navigation

151

les textes occupant toujours la mme zone sur la page. Cependant, ce comportement doit tre employ avec prcaution.

Dconseill

Figure 5.26 Sur ce site, un rollover est utilis pour dcrire le contenu des rubriques. Mais ce comportement passe gnralement inaperu car lorsque le texte safche, la zone dattention de lutilisateur est focalise sur le pointeur souris, cest--dire nettement en dessous.

En effet, rien nindique lutilisateur quune information est susceptible dapparatre lorsquil dplace la souris. Qui plus est, il ne sait pas o elle apparatra. Il y a donc de fortes chances pour quil ne la voie pas.

152

5. La navigation web

5.3

CHEMIN DE PROGRESSION (OU FIL DARIANE)

Lide de base du chemin de progression (breadcrumb trail en anglais, qui se traduit littralement par chemin de miettes de pain ) est de montrer le parcours effectu par linternaute. Plus exactement, le chemin de progression indique les rubriques qui sparent la page daccueil de la page courante.

Figure 5.27 Chemin de progression.

Occupant une ligne de texte, le chemin de progression offre lintrt de prendre trs peu de place sur la page. En gnral, les utilisateurs comprennent rapidement son rle dindicateur de position dans le site. Par contre, ils ne voient pas immdiatement que le chemin de progression peut aussi leur servir revenir en arrire. Sa principale utilisation est de permettre de se reprer dans le site. En montrant une partie de la structure du site, il joue en quelque sorte le rle dune carte routire, qui nindiquerait toutefois que les carrefours. Il contribue ainsi une meilleure comprhension du site. Le chemin de progression trouve sa raison dtre lorsque le contenu du site est volumineux. Il est employ dans la plupart des rpertoires du web. Placer le chemin de progression en haut de page Le chemin de progression est une aide la navigation : il indique le chemin parcouru et permet de revenir rapidement en arrire. Il a donc un rle annexe par rapport au reste du systme de navigation. Il est donc prfrable de le placer en hauteur, au mme niveau que les utilitaires, afin quil ninterfre pas avec les autres lments de navigation. La meilleure position tant le coin suprieur gauche de la page, au-dessus du logo, o il se dmarque clairement du contenu du site.

Figure 5.28 Le chemin de progression est plus explicite lorsquil est plac en haut de page.

5.3 Chemin de progression (ou fil dAriane)

153

Utiliser > entre les niveaux. La prsentation du chemin de progression sest standardise. La plupart des sites emploient maintenant le signe > entre chaque rubrique. Un signe diffrent demande lutilisateur un effort dinterprtation supplmentaire, sans compter le risque dune mauvaise comprhension.

Dconseill

Figure 5.29 Ce site a choisi une prsentation non conventionnelle pour son chemin de progression. Il risque de ne pas tre compris par tous.

Indiquer le titre de la page courante dans le chemin de progression. Dans un souci dconomie, certains sites confondent le chemin de progression avec le titre de la page. Cela dsoriente gnralement lutilisateur. En effet, pour que le reprage soit efficace, les deux lments que sont le titre et le chemin de progression doivent apparatre distinctement. Cest la redondance entre les deux qui permet linternaute de se reprer.

Dconseill

Figure 5.30 Lorsque le titre de la page napparat pas dans le chemin de progression, ce dernier ne permet plus de se reprer dans le site.

Le chemin de progression agit comme une sorte de plan sur lequel lutilisateur situe la page courante quil reconnat par son titre. Lorsque les deux sont mlangs, il est perdu.

154

5. La navigation web

5.4

LIENS
Le lien est le composant de base de la navigation web. Il permet linternaute de se dplacer dans le site au mme titre que les menus dune interface logicielle. Cest le premier lment, et peut-tre le seul, dont il faut savoir se servir pour utiliser le web. Ne pas changer la couleur et le comportement par dfaut des liens. On observe, lors des tests, que les internautes sappuient sur le changement de couleur des liens pour faire le tri entre les pages quils connaissent et celles qui leur restent dcouvrir. Le changement de couleur vite de tourner en rond en repassant sur des pages qui ont dj t ouvertes.

Dconseill

Figure 5.31 Probablement pour des raisons esthtiques, ce site ne distingue les liens ni par leur couleur, ni par leur prsentation. Pour deviner o sont les liens, linternaute doit explorer la page la souris.

5.4 Liens

155

viter les liens trop courts. La Loi de Fitts nous dit que le temps pour acqurir une cible est fonction de la distance et de la taille de cette cible [Fitts 54]. Ce principe sapplique galement au web : plus le lien est petit et loign du pointeur souris, plus linternaute met de temps cliquer dessus car il demande une slection minutieuse [Berkun 00].

Dconseill

Prfrable

Figure 5.32 Plus le lien est petit, plus il est difcile slectionner.

Les liens doivent donc tre suffisamment grands pour tre faciles slectionner. Attention toutefois ce que le soulignement ne nuise pas la lisibilit du texte. Il est dconseill de mettre un lien sur une phrase complte. Par ailleurs, un lien est plus facile atteindre lorsquil est en priphrie de l'cran car alors le mouvement de la souris est contraint par les bords. Cette observation incite positionner les liens en bordure de page. Placer le lien la fin d'une phrase ou du paragraphe. Lorsque les liens apparaissent dans le texte de la page, la slection et laffichage de la page correspondante interrompt le fil de la lecture. Il est donc prfrable que la lecture soit suspendue lorsque lutilisateur slectionne le lien et ouvre la nouvelle page. Le texte du lien doit permettre de deviner le contenu de la page. Le libell des liens est un lment dterminant pour une navigation efficace. Le texte doit tre explicite et sans ambigut pour viter de faire fausse route. Il doit permettre linternaute de prvoir, avant de cliquer, o il va arriver. Autant que possible, ce texte doit correspondre avec le titre de la page vise. Pour cela, les liens doivent tre conus en fonction de l'information qu'ils vont permettre de trouver et de lobjectif de lutilisateur sur le site. Rappelons que la comprhension du libell des liens peut tre vrifie trs tt lors de la conception du site en menant un test de perception (voir section 4.6.1).

156

5. La navigation web

Figure 5.33 Un tudiant intress par les modalits dentre dans cette cole hsite entre les rubriques Devenir Ingnieur et Intgrer qui correspondent pour lui la mme nalit. Des libells diffrents, voire plus de dtails sur le contenu de chaque rubrique, permettent de lever lambigut.

Placer les liens sur les mots-cls. Il est prfrable de placer les liens sur des termes dcrivant le contenu de la page que linternaute va atteindre, plutt que de le guider explicitement en lui indiquant laction raliser.
Pour accder au site du W3C : cliquer ici Dconseill Une excellente source dinformation : le site du W3C Prfrable

Figure 5.34 Un guidage trop explicite rend la lecture fastidieuse.

5.4 Liens

157

Ne pas rpter des liens similaires sur une mme page. Les tests nous montrent que la duplication dun mme lien incite gnralement linternaute visiter deux fois la page, pensant que les deux liens conduisent des pages diffrentes [Nielsen 02]. Ces rptitions rendent la navigation fastidieuse. Il est donc conseill de nindiquer le lien qu la premire occurrence du mot. Nanmoins, dans le cas des pages longues, il peut tre utile de rpter le lien en bas de page. Dans ce cas, on vrifiera lors des tests si cela ne conduit pas lutilisateur ouvrir deux fois la page en question.

Figure 5.35 Les deux liens de cette page conduisent au mme site, mais rien ne lindique. Invitablement, linternaute se demande lequel choisir. Un seul lien, ou le mme intitul, aurait vit ce problme.

Les liens doivent tre cohrents sur tout le site. La navigation est simple lorsque les indicateurs sont homognes. Pour cela, il convient de veiller ce que les liens libells de la mme manire conduisent vers la mme page et, inversement, quune mme page soit toujours dsigne de la mme manire. Prvenir linternaute lorsquun lien conduit vers un document volumineux. Lorsque le lien dsigne un fichier, par exemple un excutable ou un document, il convient de prciser le type, la taille ainsi que le temps dattente prvisible, afin que linternaute dcide sil est utile douvrir ce fichier. Pour les images, un affichage en miniature et un lien vers limage grand format est un bon compromis. Il prsente lavantage de donner au visiteur une premire ide de limage et de lui laisser la possibilit de lafficher en haute rsolution sil le souhaite.

158

5. La navigation web

Figure 5.36 Cette zone de tlchargement est relativement complte puisquelle prcise non seulement les caractristiques du logiciel concern (version, type de licence et plate-forme), mais aussi la taille du chier et une estimation du temps de tlchargement. Cependant, linternaute ne connat pas ici le type du chier quil va recevoir, lobligeant attendre la n du tlchargement pour savoir sil dispose du logiciel ncessaire pour le lire. Notons que ce site accorde visiblement une importance aux retours dutilisation en montrant le nombre de tlchargements effectus, en archivant les commentaires des utilisateurs et en donnant la possibilit de chronomtrer le tlchargement an de contrler les performances du fournisseur daccs.

viter dafficher les liens externes dans une nouvelle fentre. Les liens sont dits externes lorsquils conduisent vers un autre site. Certains concepteurs web affichent le nouveau site dans une seconde fentre. Mais ces nouvelles fentres sont gnralement juges envahissantes par les internautes qui les associent aux fentres publicitaires (pop-up) qui apparaissent sur certains sites. Qui plus est, laffichage de la nouvelle fentre brise lhistorique du parcours. Linternaute se retrouve bloqu, ne pouvant plus revenir en arrire, chose quil napprcie gnralement pas [Nielsen 99]. Pour ces raisons, il est prfrable dafficher le nouveau site dans la mme fentre, laissant linternaute averti la possibilit douvrir le lien dans une nouvelle fentre sil le souhaite.

5.5 Vrifier la navigation 159

5.5

VRIFIER LA NAVIGATION
Il existe un test trs simple qui permet de vrifier la conception du systme de navigation. Steve Krug lappelle le test du coffre [Krug 01]. Il consiste montrer diffrents utilisateurs, reprsentatifs de la population vise, une des pages du site et leur poser les questions suivantes.

De quel site s'agit-il ? Quelles sont les rubriques du site ? De quelle page s'agit-il ? O se situe la page par rapport au reste du site ? Sous quelle rubrique ? Que peut faire lutilisateur depuis cette page ?

Figure 5.37 Check-list de test du systme de navigation.

Le test est reproduit sur un ensemble de pages significatives du site. Il sert vrifier les trois exigences qui ont t identifies au dbut du chapitre, savoir que le systme de navigation permet : de se construire une vue globale du site, de savoir se reprer dans le site et de comprendre les rubriques environnantes.

161

6
La page web

ORGANISATION VISUELLE..................................................................................................162 Structuration de linformation .........................................................................................166 Longueur de la page .......................................................................................................168 Construction de la page ..................................................................................................171 PAGE DACCUEIL ................................................................................................................174 GRAPHISME ........................................................................................................................178 Images ............................................................................................................................181 Animations.....................................................................................................................184 Format des images ..........................................................................................................186 Palette web-safe et profondeur graphique ........................................................................188 LE
TEXTE.............................................................................................................................189

Lcriture web ................................................................................................................192 Liste puces...................................................................................................................195 Lisibilit des caractres ....................................................................................................196 FORMULAIRES .....................................................................................................................199 Liste de slection.............................................................................................................201 UN
NOUVEAU MDIA DE CRATION .................................................................................203

Au contraire des logiciels dont la prsentation a tendance se standardiser, voire suniformiser, le web laisse aux concepteurs une grande libert. Rares sont les sites qui se ressemblent. Cest dailleurs ce qui fait lattrait de la toile. Le fonctionnement du systme de navigation laissant peu de place linnovation, les diffrences sexpriment principalement dans le graphisme et le rdactionnel, cest--dire au niveau de la page en elle-mme.

162

6. La page web

Ce chapitre adresse ltape finale de la conception dun site, celle de la cration des pages proprement dites. Nous abordons la disposition des lments sur la page, la conception de la page daccueil, les aspects graphiques spcifiques du web, la rdaction du contenu ainsi que la ralisation des formulaires.

6.1

ORGANISATION VISUELLE
Quil sagisse du plafond de la chapelle Sixtine, de la une du Monde ou de la page daccueil de Yahoo!, le systme visuel humain procde de la mme manire pour interprter et comprendre une image.

A. Formatage du texte 1. Le paragraphe 2. Les titres 3. La section 4. Lindentation B. Liste 1. Liste numrote 2. Liste puce 3. Liste de dfinition 4. Liste complexe C. Lien hypertexte 1. Lancre 2. Lien interne la page 3. Lien externe 4. Lien de messagerie

A. Formatage du texte 1. Le paragraphe 2. Les titres 3. La section 4. Lindentation B. Liste 1. Liste 2. Liste 3. Liste 4. Liste

A. FORMATAGE DU TEXTE 1. Le paragraphe 2. Les titres 3. La section 4. Lindentation B. LISTE 1. Liste 2. Liste 3. Liste 4. Liste

numrote puce de dfinition complexe

numrote puce de dfinition complexe

C. Lien hypertexte 1. Lancre 2. Lien interne 3. Lien externe 4. Lien de messagerie

C. LIEN HYPERTEXTE 1. Lancre 2. Lien interne 3. Lien externe 4. Lien de messagerie

La liste est plat . Les lettres et les numros ne suffisent pas montrer lorganisation des donnes.

Les groupes apparaissent. Les lments dune mme section ont t rapprochs (loi de proximit). Les sous-rubriques sont alignes (loi de bonne continuit).

Une mme typographie est employe pour les trois ttes de chapitre (loi de similitude). Elles ressortent, permettant une lecture rapide de la liste.

Figure 6.1 Les lois de la perception visuelle permettent de mettre en vidence la structure de linformation et ainsi den faciliter la comprhension (daprs [Cohen 00]).

Au dbut du sicle dernier, les processus cognitifs de la vision ont t tudis dans le cadre dune thorie plus large appele Thorie de la Forme (Gestalttheorie). Partant du principe que le systme visuel peroit le tout avant ses parties, les thoriciens de la forme, Wertheimer, Khler et Koffka (1935), ont mis en vidence un ensemble de lois qui rgissent le fonctionnement perceptif chez ltre humain.

6.1 Organisation visuelle

163

Nous retiendrons ici les 3 principales : la loi de proximit, la loi de similitude et la loi de bonne continuit (pour plus de dtail, voir [Cohen 00 et Casanova 01]). La loi de proximit conduit la vision regrouper les objets qui sont proches les uns des autres. La loi de similitude incite lil runir des entits qui se ressemblent par la forme, la couleur ou la taille. La loi de bonne continuit conduit la vision rassembler des lments qui partagent le mme alignement. Appliques au web, les lois de la perception visuelle vont guider lorganisation de la page et permettre linternaute de comprendre plus efficacement le contenu.

Figure 6.2 Sur cette page, lil reconnat immdiatement quatre ouvrages (loi de proximit) dont il peut rapidement identier la couverture, le titre, le thme ainsi que le prix (loi de similitude). Lorganisation visuelle permet une lecture partielle de la page, laissant linternaute ltrer les informations qui lintressent (les prix ou les titres, par exemple).

164

6. La page web

Regrouper visuellement les informations semblables. Ce qui se ressemble, fonctionne de la mme manire. Selon la loi de similitude, lil attribue une mme signification aux donnes prsentes de la mme manire. Une typographie semblable (mme police de caractres ou mme couleur) permet donc de montrer les ressemblances entre des informations situes des emplacements diffrents sur la page. Second principe de regroupement, la loi de proximit consiste rassembler les objets semblables sur les mmes secteurs. Ces espaces sont mis en vidence par rapport au reste de la page en les dlimitant par un trait, un espacement ou une mme couleur darrire-plan. O linternaute regarde-t-il ? Quelles sont les emplacements quil voit en premier ? Ces questions reviennent souvent lors de la conception dun site. En fait, il nexiste pas de parcours standard de la page web. La lecture de la page varie selon le contenu, les visuels utiliss et leur rsonance chez lutilisateur. Par contre, les tests mettent en vidence des modes de lecture rcurrents [Gaillard 02]. En particulier, il apparat que le centre de la page est vu en premier. Lorsque la page saffiche, cest au centre que linternaute cherche les informations qui lintressent. Ensuite, son regard se porte en priphrie gauche ou droite. Puis, linternaute explore la partie haute de lcran o il cherche la barre de navigation.

Figure 6.3 Les tests montrent que les utilisateurs lisent la page selon lordre indiqu ci-dessus. Le pourcentage correspond la proportion dinternautes ayant parcouru des yeux au moins une fois la zone [Ipsos 01]. Lanalyse des mouvements oculaires conrme les observations : le centre de la page est vu en premier.

6.1 Organisation visuelle

165

Ces observations sont confirmes par lenregistrement des mouvements oculaires. Une tude quantitative mene auprs dun panel de 200 internautes a mis en vidence des parcours oculaires semblables [Ipsos 01], comme le montre la figure 6.3. Mettre les informations importantes au centre, en haut de la page. Pour capter lattention de linternaute, linformation importante doit tre vue en premier, donc apparatre au centre, et tre lue en premier ; pour cela elle doit tre affiche en haut de la page. Autre intrt de cet emplacement, le haut de page reste visible quelle que soit la taille de la fentre (figure 6.4).

Figure 6.4 La vocation du site apparat immdiatement lorsque linternaute arrive sur la page daccueil. Au centre, le moteur de recherche puis lannuaire rpondent aux principales demandes de lutilisateur de ce portail. Ensuite, dans la seconde zone de lecture gauche, linternaute trouve laccs la messagerie lectronique et aux autres rubriques du site. Seul inconvnient, la barre de navigation, perdue tout en haut de la page, risque de passer inaperue la premire lecture.

166

6. La page web

Adopter un trac rgulateur homogne pour toutes les pages du site. Une organisation cohrente du site permet linternaute de retrouver une disposition similaire dune page lautre. Il a ainsi le sentiment de rester au mme endroit . La prise en main est plus facile. Les concepteurs web utilisent gnralement un schma de page type qui leur sert de base pour lensemble du site.

6.1.1 Structuration de linformation

Lorganisation de la page vise rendre perceptible la structure des informations qui la composent. Lobjectif est de montrer les liens qui existent entre les diffrents lments de la page, de crer une hirarchie visuelle vidente [Krug 01]. Plus llment est important, plus il doit se voir. Cest une rgle de bon sens quil nest pas inutile de rappeler : les informations importantes doivent tre mises en vidence. Pour cela, diffrents artifices graphiques sont la disposition des concepteurs : la taille, la graisse des caractres (paisseur du trait), la couleur de lobjet en lui-mme, voire aussi la couleur de larrire-plan. Lenrobage, espace vide autour de llment, est galement un moyen de mettre en vidence un texte ou un visuel. Par ailleurs, lemplacement joue aussi : plus lobjet est en haut sur la page, plus il est visible. Limbrication visuelle permet de hirarchiser linformation. Limbrication visuelle est un procd graphique qui vise donner un rle dominant certains lments de la page. Le moyen le plus simple consiste placer linformation de niveau suprieur au-dessus du reste. Cest que nous pratiquons en crivant les titres au-dessus des paragraphes. On renforce limbrication visuelle en plaant les lments de niveau infrieur en retrait (indentation), voire prcds par des puces. Les graphistes web se servent galement de botes (zones dlimites par une fine bordure) pour hirarchiser les diffrentes informations de la page (figure 6.5). Le titre doit dcrire explicitement le contenu de la page ou du paragraphe. Le titre des pages est un lment essentiel de lutilisabilit dun site. Son rle est double. Il doit la fois permettre linternaute didentifier rapidement le

6.1 Organisation visuelle

167

Figure 6.5 Limbrication visuelle fait ressortir les diffrentes zones de la page et permet de distinguer la vocation des principales rubriques du site.

contenu de la page et laider vrifier quil est bien arriv sur la page quil souhaitait atteindre. Le titre est un repre visuel important. Il doit donc tre vu ds louverture de la page. Pour cela, il est prfrable de le placer en haut gauche afin quil soit lu en premier. Une prsentation graphique spcifique permet de le distinguer du texte de la page. Pour quil guide la navigation dans le site, le titre de page doit tre cohrent avec le libell du lien qui a servi ouvrir cette page. Il est galement conseill, dans un souci de cohrence, de veiller ce que le titre de la page se retrouve galement dans la barre de titre de la fentre du navigateur. Ce principe sapplique galement aux titres de paragraphe. Lorsque lutilisateur parcourt la page, les titres lui servent localiser la section contenant les informations quil cherche. Le titre doit donc indiquer explicitement le contenu du paragraphe correspondant.

168

6. La page web

Ne pas mettre de liens sur les titres. En terme de navigation, les titres et les liens ont un rle signaltique diffrent. Le titre est statique : il indique o lon est. Le lien est dynamique : il indique o lon va. Un fonctionnement hybride o le titre serait aussi un lien complexifie inutilement la navigation.

6.1.2 Longueur de la page

Quand il parcourt un site, linternaute sarrte la premire information qui lintresse. Il na gnralement le temps ni dexplorer compltement les pages et ni de deviner ce qui est cach en bas de lcran. Il est donc prfrable que la page soit la plus courte possible. Une page courte facilite la lecture. Au contraire, une page longue a tendance dsorienter lutilisateur. [Levine 96] a observ que les internautes perdent le contexte ds que la page dpasse 4 crans. Chaque page doit tenir dans un cran, voire deux crans au maximum. Lorsque la page est trop longue, il faut la dcouper. Mais dcouper linairement, en rajoutant un bouton Page suivante en bas de chaque section, ne fait que ralentir la lecture. En effet, louverture dune page casse le rythme et demande lutilisateur de garder en mmoire le contenu de la page prcdente. Qui plus est, lorsquun texte est dcoup en diffrentes sections, il nest plus possible de limprimer en entier. Pour rduire efficacement la taille de la page, il faut revoir la structure du contenu et permettre une vritable navigation hypertextuelle entre les sections, chacune constituant un tout indpendant et apportant un complment dinformation au reste du texte. Le texte initial doit donc tre amnag afin de diviser linformation en blocs cohrents. Les rubriques dtaillant un point particulier deviennent des pages indpendantes accessibles par un lien depuis le corps principal du texte. Notons toutefois que linternaute ne rechigne pas utiliser les barres de dfilement, ou la molette de sa souris, lorsque le contenu de la page lintresse rellement. Il est donc parfois envisageable de dpasser la limite des deux crans lorsquil sagit dun texte destin tre lu, un article par exemple. Dans ce cas, linternaute apprciera galement de pouvoir imprimer le texte complet en une fois.

6.1 Organisation visuelle

169

Figure 6.6 Cette page fait environ deux crans de haut. Lors des tests, la plupart des utilisateurs se sont arrts la premire moiti et ne se sont pas servi des boutons du bas. Deux solutions sont envisageables pour remdier ce problme : soit remonter les boutons (cest ce qui a t fait), soit dcouper en plusieurs tapes, obligeant lutilisateur charger une nouvelle page chaque fois [Levine 96].

170

6. La page web

viter les pages trop courtes. Bien entendu, il ne faut pas tomber dans un minimalisme caricatural o les pages du site ne comporteraient que quelques phrases. Louverture dune nouvelle page interrompt la lecture et oblige lutilisateur attendre un rafrachissement de lcran. Cette interruption doit tre justifie par linformation fournie en retour. Limiter la navigation lintrieur dune mme page. Lorsque la longueur de la page dpasse la hauteur de lcran, les concepteurs web proposent parfois une zone de navigation locale qui permet daccder directement aux sections de la page, vitant ainsi dutiliser les barres de dfilement. Ce composant semble tre un moyen de faciliter la navigation dans les pages longues, mais il pose dautres problmes.

Dconseill

Figure 6.7 Sur cette page daccueil, les liens semblent permettre daccder aux rubriques du site. Il nen est rien ; ils conduisent vers des sections de la mme page. Ce type de lien na pas un comportement habituel, ce qui perturbe les utilisateurs.

6.1 Organisation visuelle

171

En effet, les utilisateurs sont gnralement drouts par ces liens, dits locaux, car ils ont lhabitude douvrir une nouvelle page quand ils cliquent sur un lien. Ici, le lien les ramne sur la mme page. Le comportement nest plus le mme, bien que le dclencheur soit le mme : un lien. Il en rsulte une certaine confusion [Nielsen 00]. Permettre un retour rapide en haut de page. Les barres de dfilement, ou la molette de la souris, servent parcourir verticalement la page. Mais le pas de dplacement est gnralement faible afin de permettre la lecture tout en descendant dans la page. Cette lenteur est difficilement acceptable lorsquil sagit datteindre le haut de la page. Pour cela, un bouton ddi est prfrable. Cest probablement le seul cas o lutilisation dun lien interne la page est conseille.

6.1.3 Construction de la page

Au cours de la ralisation dun site web, chaque tape influence lutilisabilit finale. Les recommandations qui suivent visent amliorer lergonomie de la page lors du dveloppement HTML proprement dit. Allger la page autant que possible. Ltre humain naime pas attendre et encore moins linternaute car il se sert dInternet pour gagner du temps. Lorsque la page napparat pas suffisamment vite, il zappe et passe sur un autre site. Une tude mene aux tats-Unis montre que dans la plupart des cas, linternaute nattend pas plus de 8 secondes [Chen 00]. En consquence, les sites les plus visits sont ceux dont les pages se chargent le plus vite [Nielsen 99]. Actuellement, une majorit dutilisateurs se connectent Internet par une ligne haut dbit : 94 % en France (janvier 2008). Qui plus est, cette proportion va en augmentant puisque la quasi-totalit des nouveaux abonnements sont des abonnements au haut dbit. De ce fait, le poids de la page nest plus une contrainte aussi forte quelle ltait il y a quelques annes. Toutefois, lorsquune partie des visiteurs du site se servent dune connexion bas dbit, il faut garder lesprit que le dbit de chargement dune page web avec un modem standard est denviron 4 Ko/s. Dans ce cas, sachant que lutilisateur a limpression dattendre partir de deux secondes, seules les pages de moins de 8 Ko offriront une navigation suffisamment fluide. Heureusement, les navigateurs affichent les pages progressivement mesure que les donnes arrivent sur le poste de lutilisateur. Ainsi, linternaute peut commencer lire la page avant quelle ne soit compltement charge.

172

6. La page web

Figure 6.8 La page daccueil de Google fait 16 Ko en tout. Sans les images, elle tient sur 5 Ko. Elle apparat en moins de 2 secondes, cest--dire avant mme que lutilisateur ait limpression dattendre. Cette rapidit de chargement a contribu au succs de ce moteur de recherche.

Concevoir la page pour quelle soit lisible en 800 600. Bien quelles ne soient pas stricto sensu reprsentatives de la population mondiale des utilisateurs dInternet, les statistiques fournies par le site w3schools.com montrent une forte majorit dcrans configurs en 800 600 ou plus (94 %). Aucun cran en rsolution 640 480 nest recens, tandis quil ne reste que 8 % des internautes qui se servent dune rsolution 800 600.
Rsolution dcran 1024 768 pixels, ou suprieure 800 600 pixels 640 480 pixels Autre (ex. webTV : 544 372) 86 % 8% 0% 6%

Figure 6.9 Les statistiques du site W3schools.com (janvier 2008) montrent quune majorit dinternautes (94 %) utilisent une rsolution graphique de 800 600 pixels ou plus. Ces chiffres ne sont pas prendre la lettre car ils ne concernent quun ensemble spcique de sites amricains. Nanmoins, ils demeurent signicatifs de la tendance actuelle.

6.1 Organisation visuelle

173

Une proportion non ngligeable dinternautes utilisent toujours des crans 800 600 (8 %). Il est donc prfrable de concevoir dans cette rsolution. En effet, une page calibre en 800 600 sera visible dans une rsolution suprieure, tandis que linverse nest pas vrai. Nanmoins, chaque site attire son propre public. Les seules statistiques considrer sont celles des visiteurs effectifs du site lorsquil est en ligne. Pour rsoudre le problme de la rsolution dcran, la plupart des concepteurs web adoptent maintenant un design fluide en ajustant automatiquement la taille de la page celle de la fentre. Cette technique permet de rendre le contenu de la page visible quelle que soit la rsolution dcran utilise.

Dconseill

Figure 6.10 En 800 600, linternaute ne distingue que la partie suprieure de la page. Pour commander, il devra chercher avec les barres de dlement le prix de larticle et le bouton Ajouter au panier . Ce problme dagencement de la page ralentit le processus dachat.

174

6. La page web

La page doit tre lisible sans utiliser les barres de dfilement horizontal. Lutilisation dune barre de dfilement horizontale interfre avec le processus de lecture et gne fortement linterprtation de la page. Il est essentiel de concevoir la page de manire ce quelle soit entirement visible et permette une lecture continue lorsquelle est affiche en plein cran. En rgle gnrale, viter les cadres. Il y a quelques annes, les cadres, appels frames dans le langage HTML, taient considrs comme le principal problme dutilisabilit du web [Nielsen 96]. En effet, moins dun codage rigoureux et astreignant, les cadres posent des difficults aux internautes. La navigation nest pas toujours cohrente car le bouton Page prcdente ne fonctionne pas correctement. Il est difficile dimprimer la totalit de la page : seul le cadre actif est imprim et non toute la fentre. Finalement, les favoris conduisent lutilisateur sur lentre du site (la page contenant la balise <frameset>) et non sur la page quil avait cru marquer. Le principal intrt des cadres est de garantir un agencement homogne des pages et une visibilit permanente de la zone de navigation. En rendant le contenu du site plus modulaire, il en facilite la maintenance. Cest pourquoi ils peuvent tre employs lorsque les utilisateurs sont familiers des outils informatiques et que le contenu est susceptible dtre souvent modifi. En particulier, cette technique savre utile pour naviguer dans une documentation en ligne.

6.2

PAGE DACCUEIL
La page daccueil est vue par tous les visiteurs du site. Pour certains dentre eux, cest parfois la seule page quils verront. la lecture de la page daccueil, linternaute se construit une premire impression du site. Son rle est donc stratgique. Cest en quelque sorte une vitrine : elle prsente le contenu tout en donnant lutilisateur les moyens de pousser plus loin la visite. Entre du site, la page daccueil doit tre informative avant toute chose. Sa mission est difficile : montrer les services proposs et donner linternaute les rudiments pour se servir du site. Trois lments y apparaissent : lidentit du site, des informations utiles et les fondements de la navigation.

6.2 Page daccueil

175

Dconseill

Figure 6.11 Quelle est la vocation de ce site ? Pensez-vous y trouver des meubles ?

Indiquer explicitement la vocation du site. Lobjectif principal de la page daccueil est dexprimer la vocation du site : quoi sert le site ? Quels services propose-t-il ? Pour communiquer ce message, les concepteurs sappuient sur deux lments qui se retrouvent sur la plupart des pages daccueil : un slogan et une phrase de bienvenue. Le slogan apparat gnralement ct du logo. Il fournit en quelques mots une courte description du site. Le slogan doit tre suffisamment explicite pour permettre linternaute de comprendre rapidement lobjectif du site. La phrase de bienvenue est plus longue. Elle trouve sa place au centre de la page daccueil de manire tre vue en premier. Elle dcrit en deux ou trois lignes les principaux services du site.

Dconseill

Prfrable

Figure 6.12 Le slogan du site useit.com, usable information technology , est trop gnral : qui sintresserait des systmes dinformation qui ne seraient pas utilisables ? Au contraire, la mission de Usable Web apparat clairement : un annuaire de 1 317 liens sur lutilisabilit.

176

6. La page web

La page daccueil doit permettre de comprendre le site. Au travers de la page daccueil, linternaute cherche savoir si le site rpond son attente. Steve Krug nous dit quil se pose quatre questions quand il arrive sur un site : Quest-ce que cest ? Que puis-je faire ici ? Quest-ce quils ont mis ici ? Pourquoi dois-je tre l ? [Krug 01]. La premire page doit permettre de trouver la rponse ces questions. Pour cela, elle fournit lutilisateur une vue globale du site en prcisant le contenu, lorganisation gnrale et le rle des principales rubriques. La check-list ci-aprs permet de vrifier le contenu de la page daccueil.

Quels services rend le site ? Que peut-il offrir lutilisateur ? Comment fonctionne le site ? Pourquoi ce site ? Quel est son objectif ? Que contient-il ? qui sadresse le site ? Qui en est responsable ? Qui contacter ?

Figure 6.13 Check-list de page daccueil.

Informer ds la page daccueil. Afin de montrer lutilisateur lintrt du site, la page daccueil doit fournir des informations concrtes et actualises rpondant immdiatement aux questions que se posent les visiteurs, sans pour autant les obliger rentrer dans le site. Fournir les repres de navigation depuis la page daccueil. Second objectif de la page daccueil : expliquer lutilisateur comment naviguer dans le site. Pour cela, la prsentation et le libell des rubriques doivent tre semblables ceux utiliss dans le reste du site. De cette manire, lutilisateur peut gnraliser ce quil apprend sur la page daccueil lensemble du site. Les visuels doivent rendre explicites les lments de navigation dans la page daccueil (voir figure 6.15). Lorsque la consultation procde par tape, les diffrentes phases doivent tre explicites, par exemple : 1) Sinscrire, 2) Slectionner, 3) Commander. Rappelons que le test de perception permet de vrifier rapidement la comprhension de la page daccueil sur la base de simples maquettes graphiques (voir section 4.6.1).

6.2 Page daccueil

177

Figure 6.14 Ds lentre sur ce site, linternaute trouve la rponse des questions, comme : Quelles sont les dernires nouvelles ? Quy a-t-il ce soir la tl ? La page daccueil lui fournit linformation directement sans lobliger entrer dans le site, laissant prjuger dun contenu de qualit similaire lintrieur.

Dconseill

Figure 6.15 Lorsque les entres ne sont pas explicites, linternaute ne sait pas par o commencer. Sur ce site, les utilisateurs cliquent gnralement sur les visuels reprsentant des gouttes deau car ils se dtachent nettement du reste de limage. Malheureusement, ce ne sont pas des liens ! Les entres sont en fait les zones rectangulaires qui apparaissent sous le titre

178

6. La page web

viter les crans dintroduction et les tunnels. Les crans dintroduction (splash screens), pire encore, les tunnels composs de plusieurs crans, ralentissent inutilement laccs au site. Dailleurs, les concepteurs sont conscients du peu dintrt de ces crations puisquils prvoient gnralement un bouton pour sauter lintro ! Le plus irritant avec un cran dintroduction nest pas tellement la perte de temps, mais plutt la frustration quil engendre lorsque le contenu du site ne correspond pas ce quon attendait. Allger la page daccueil. Afin de rduire lattente, les pages du site doivent se charger rapidement, plus forte raison la page daccueil qui montre ainsi immdiatement lutilisateur quil est arriv sur le site voulu.

6.3

GRAPHISME
Le graphisme est une composante essentielle de la russite dun site Internet. Ici, plus que dans le logiciel, lesthtique est importante. Elle contribue directement la satisfaction du visiteur. [Schenkmann 00] a montr que le graphisme dun site permet de gagner la prfrence des internautes. En ce sens, cest un lment captif qui va jouer un rle dterminant dans ladhsion et la fidlisation des visiteurs. Qui plus est, le graphisme peut renforcer de manire sensible les messages vhiculs par le texte, voire mme jouer le rle dun catalyseur en aidant le visiteur mieux comprendre certaines parties. Le graphisme est un vecteur de communication important. ce titre, il doit tre abord ds la phase de dfinition, conjointement avec llaboration de larchitecture de communication du site ; certains messages sont transmis principalement sous forme graphique tandis que dautres devront tre complts par les visuels adapts. Dfinir une charte graphique cohrente pour lensemble du site. La charte graphique contribue construire le climat du site. Elle dfinit un style homogne pour les pages, permettant linternaute de retrouver les mmes repres visuels sur lensemble du site. laborer une charte graphique consiste dfinir des modles pour les diffrentes pages du site : laccueil, les ttes de rubrique et les pages intrieures. Le modle prcise le graphisme utilis pour chaque secteur de la page : navigation principale, navigation secondaire, titre, zone de texte, etc.

6.3 Graphisme

179

Dconseill

Figure 6.16 Lorsque le graphisme nest pas cohrent avec la mission du site, la perception est fausse. Ici, les internautes la recherche dun emploi sont gnralement surpris par les visuels bon enfant qui sont utiliss. tel point que certains hsitent dposer leur CV pensant quil sagit dun site amateur.

Sappuyer sur une feuille de style pour construire le graphisme du site. Les feuilles de style (Cascading Style Sheets) permettent de dfinir un style cohrent en particulier pour les lments textuels : polices de caractres, couleurs, marges, etc. On veillera bien entendu rduire la charge perceptive en limitant le nombre de couleurs et de polices utilises (voir les recommandations donnes ce sujet section 1.2). Afin de changer facilement le style sans pour autant modifier le code des pages, il est prfrable dattacher la feuille de style au fichier HTML, plutt que de linclure dans len-tte. Utilises de cette manire, les feuilles de style facilitent la maintenance du site. En outre, lors du prototypage, elles permettent une modification rapide de lapparence globale du site.

180

6. La page web

Limiter le bruit visuel. Les images contribuent lesthtique du site, mais elles conditionnent aussi le temps de chargement. En contrepartie de lapport visuel de limage, lutilisateur doit attendre avant de voir la page dans son ensemble. Chaque lment graphique doit donc pouvoir justifier sa prsence sur la page. Ils sont employs soit pour hirarchiser les informations (mettre en vidence), soit pour appuyer les messages du site. Si ce nest pas le cas, le graphisme surcharge inutilement la page. En limitant les images inutiles, qui crent du bruit visuel, les informations sont plus lisibles, la page est lue plus rapidement. Veiller la lisibilit du texte. Un fond imag ou color contribue sensiblement construire latmosphre dun site. Cependant, la couleur du fond influence la lisibilit du texte. Une image trop contraste ou une couleur mal adapte peuvent rendre la page illisible. Il convient donc de sassurer que le contraste entre larrire-plan et le texte ne nuit pas la lisibilit. Notons que les fonds sombres sont particulirement dconseills car non seulement ils rduisent la lisibilit [Schenkmann 97], mais ils posent aussi des problmes dimpression. En effet, ils obligent employer des couleurs claires pour le texte. De ce fait, larrire-plan de la page ne simprimant pas par dfaut, le texte apparatra en clair sur une feuille blanche, cest--dire quasiment invisible !

Dconseill

Figure 6.17 Sur ce site, le texte en haut droite apparat peine. Le libell de la rubrique passe inaperu.

6.3 Graphisme

181

6.3.1 Images
Un problme rcurrent, rencontr par tous les internautes, est celui du temps de rponse. Attendre que la page se charge est probablement lexprience la plus stressante du web. Ce phnomne, amplifi par le faible dbit du rseau, conduit gnralement lutilisateur changer de site. Or, le temps de chargement dune page dpend en grande partie du poids des images qui la composent. Minimiser le poids des images. Lorsque les visiteurs du site se connectent par une liaison haut dbit, il est recommand de ne pas dpasser 5 Ko par image et 25 Ko pour lensemble des images dune page. Pour les images JPEG, il est possible de rduire le poids de limage en diminuant sa qualit, mais cest au dtriment du rendu de limage. Dautres techniques sont prfrables afin de ne pas compromettre lesthtique. Nous les abordons ci-aprs. Privilgier la qualit de limage par rapport sa taille. Le poids dune image dpend plus de la surface quelle occupe que du nombre de couleurs quelle utilise. Il est donc prfrable dafficher une petite image de bonne qualit plutt quune grande image de faible rsolution. Les tests nous montrent que les internautes napprcient pas les images dgrades. Le pitre rendu de ces dernires est ressenti comme un dfaut de professionnalisme, voire un manque de respect par rapport lutilisateur.

Figure 6.18 Dans cette bibliothque dimages en ligne, toutes les photos sont afches en miniature. Malgr la taille, limage est de qualit sufsante pour quon en distingue les dtails avant de la tlcharger. Pour ce faire, un bouton indique son poids, permettant linternaute destimer le temps de tlchargement. Son type (JPEG ou GIF) est indiqu en transparence dans le fond de la fentre mais il est peu visible. noter les liens droite qui signalent des images de mme type, incitant lutilisateur explorer la bibliothque en fonction de ses thmes dintrt.

182

6. La page web

Acclrer le chargement des images. Diffrentes techniques de codage peuvent tre employes pour acclrer le chargement des images. En particulier, il est recommand de prciser la taille de limage dans le code afin que le navigateur ne la recalcule pas lors du chargement de la page (attributs width et height de la balise <img>). Il est envisageable de prcharger lavance certaines images pour que le visiteur nattende pas leur chargement lorsquelles sont utilises dans un rollover par exemple. Il est aussi conseill de mettre les grandes images en bas de page. Elles seront ainsi charges la fin, pendant que linternaute lit le haut de la page. Finalement, il est prfrable de rutiliser la mme image car elle reste ainsi en mmoire cache une fois charge. Ces mthodes vont rendre la navigation plus fluide, les pages saffichant plus rapidement. Afficher progressivement les images. Certains formats de compression affichent limage au fur et mesure de son chargement. Lattente semble ainsi moins longue. Les formats GIF entrelac ou JPEG permettent un affichage progressif soit de haut en bas (JPEG standard), soit par une amlioration continue de la qualit de limage (JPEG progressif). Utiliser lattribut alt pour dcrire les images. Le texte alternatif, utilis dans lattribut alt de la balise <img>, saffiche avant que le chargement de limage ne commence, voire lorsque linternaute utilise un navigateur textuel (Lynx par exemple). Cet attribut est reconnu par les logiciels de lecture dcran utiliss par les malvoyants. Lattribut alt doit permettre de comprendre limage sans la voir. Pour cela, il dcrit le contenu de limage ou sa fonction lorsquelle est employe pour la navigation dans le site. Par exemple, le texte alternatif dune icne reprsentant une enveloppe sera Envoyer par mail plutt que Enveloppe (pour plus de dtails sur les techniques HTML permettant laccessibilit aux utilisateurs dficients visuels, voir [Garcia 02]).

Figure 6.19 Lattribut alt sert afcher un texte dcrivant limage pour permettre lutilisation de la page par les malvoyants.

6.3 Graphisme

183

Rendre visible les zones actives de limage. Les images cliquables, appeles aussi ImageMaps, sont des images sur lesquelles ont t dfinies des zones actives que lutilisateur peut slectionner. Ces zones sont gnralement des liens vers dautres pages, mais elles peuvent aussi avoir dautres utilisations, comme servir de slecteur par exemple. Contrairement aux liens qui sont souligns, les zones actives ne sont pas signales. Linternaute doit donc balayer avec sa souris toute limage pour deviner leurs positions. Une solution ce problme consiste utiliser des visuels donnant lillusion dun relief. Lutilisateur retrouve ainsi lapparence dun bouton. Il en dduit que le comportement est similaire. Toutefois, ce composant ne doit pas tre le seul moyen de navigation de la page. En effet, les navigateurs textuels, utiliss en particulier par les internautes malvoyants, naffichent pas les images. Dans ce cas, un second accs par des liens textuels doit tre prvu.

Prfrable

Figure 6.20 Ce site utilise une image cliquable (ImageMap) comme barre de navigation. Les zones actives, de forme rectangulaire, apparaissent distinctement, vitant linternaute une exploration inutile de limage.

Les images cliquables peuvent tre employes pour faciliter la slection. La slection au travers dune liste ou dune srie de boutons (cases cocher, boutons radio) est gnralement fastidieuse pour lutilisateur. Elle ncessite une certaine dextrit et, du fait quelle sappuie sur une reprsentation textuelle, elle demande un effort dinterprtation. Lorsquil est possible de reprsenter graphiquement les diffrents choix, une image cliquable facilite la manipulation.

184

6. La page web

Figure 6.21 Plutt que de demander linternaute de choisir au travers dune liste, ce site lui propose de slectionner directement la rgion qui lintresse sur la carte. La manipulation est plus simple et donc plus rapide. Notons quun accs classique par une liste de slection est galement propos pour les utilisateurs de navigateurs textuels.

6.3.2 Animations
Lune des innovations dInternet est de transmettre non seulement des images fixes, mais aussi des animations. Les plus interactives sont construites sur la base dune technologie du type Flash qui permet de crer des squences animes partir dimages vectorielles. Les animations ouvrent la voie dune nouvelle dimension artistique et crative. Il faut lavouer, les rsultats sont surprenants et gnralement attrayants. Parce quils sappuient sur une technique spcifique, ces composants graphiques ncessitent linstallation de modules additionnels (plug-ins) sur le navigateur. Ils sont gnralement fournis dans la configuration de base. Mais lorsquelle devient obsolte, linternaute doit installer lui-mme la nouvelle version du module. Or, il ne sait pas forcment comment faire et il na pas toujours le temps, ni lenvie de le faire. Force est de constater que seule une petite proportion dinternautes veillent disposer des dernires versions des modules dextension. Lorsque le site est dvelopp en Flash, ou toute autre technique faisant appel des modules spcifiques sur le poste de lutilisateur, les concepteurs web doivent avoir lesprit quils se privent ainsi dune partie des internautes. Ce nest pas le cas pour les sites dvelopps en HTML standard.

6.3 Graphisme

185

Utiliser les animations avec parcimonie. Les tests montrent que les animations ont tendance agacer les internautes. Dans lune des premires versions du site Disney, Jared Spool a observ que les utilisateurs cachaient les GIF anims avec la main pour pouvoir lire le texte de la page [Spool 98]. En effet, lil est attir les mouvements, en particulier la priphrie du champ de vision. Lanimation va perturber la lecture en attirant inutilement lattention de linternaute. Prvoir la possibilit de stopper lanimation. Le bouton Arrter du navigateur ne fonctionne plus lorsquune animation est en cours. Si le concepteur ne la pas prvu, il nest pas possible de stopper lanimation ou de lacclrer. Linternaute na dautre choix que dattendre ou de changer de site Pour viter quil choisisse la seconde option, le concepteur doit donner lutilisateur le contrle de lanimation, en particulier la possibilit de larrter. ce titre, les animations en boucle, comme la plupart des GIF anims , sont fortement dconseilles. Les animations sont utiles pour expliquer des processus dynamiques. L o une explication textuelle serait longue et probablement indigeste, un schma permet de comprendre un processus complexe [Bnard 01]. Grce aux techniques danimation, le schma devient dynamique et interactif. Il laisse lutilisateur la possibilit dexplorer le fonctionnement, voire de jouer sur certains paramtres, lui donnant loccasion dapprendre par lui-mme. On trouve ainsi des utilisations intressantes de Flash des fins pdagogiques (voir par exemple, la rubrique Science Anime sur le site du CEA : http://www.cea.fr/fr/pedagogie /science.htm). Les composants Flash facilitent parfois des slections complexes. Certaines applications en ligne demandent lutilisateur de faire un choix parmi de nombreux critres. Des sites de commerce en ligne permettent ainsi de personnaliser les articles au moment de lachat, offrant linternaute la possibilit de configurer le produit selon ses besoins. Linterface classique pour ce type dapplication consiste en une srie de listes ou de boutons de slection. Mais linteraction est longue et fastidieuse. En outre,

186

6. La page web

en cas derreur, le seul recours de lutilisateur est parfois de tout reprendre zro. Pour les slections complexes, un composant spcifique du type Flash peut rendre le dialogue plus simple en offrant une meilleure interactivit linterface [Veen 02].

Figure 6.22 Sur ce site, un composant Flash permet de congurer une cuisine quipe en fonction des diffrents coloris offerts par la marque. Linternaute ajuste les couleurs au travers des diffrents slecteurs graphiques. Le rendu apparat immdiatement dans limage centrale. Il peut ainsi revenir rapidement sur ses choix et trouver de faon itrative la palette de coloris qui lui convient le mieux.

6.3.3 Format des images

Les images sont transmises sur le rseau Internet sous forme compresse. Pour cela, les deux formats les plus courants sont le GIF (Graphics Interchange Format) et le JPEG (Joint Photographic Experts Group). Ils utilisent des algorithmes de compression diffrents dont la qualit dpend principalement du type dimage.

6.3 Graphisme

187

Le format GIF convient aux graphiques. Le format GIF utilise une technique de compression adapte aux images contenant des blocs de couleurs semblables, cest--dire des visuels de type graphique : des dessins ou des icnes. Cependant, il est limit 256 couleurs. Les autres couleurs de limage sont cres par dithering. Ce procd consiste donner limpression de la couleur manquante par une combinaison de couleurs proches.

Image GIF brute

Image GIF avec dithering

Figure 6.23 Le dithering cre les couleurs manquantes dans une image GIF.

Tant que limage ne dpasse pas les 256 couleurs, ce qui est gnralement le cas pour les graphiques, le GIF offre un rendu fidle. Du fait quelle utilise moins de couleurs, limage GIF est moins volumineuse, donc plus rapide charger quune image JPEG. Par contre, au-dessus de 256 couleurs, le GIF est dconseill car il dgrade limage. Il est noter que ce format permet de donner limpression dune image non rectangulaire en utilisant une couleur dite transparente . Il facilite ainsi lintgration dans la page. Un autre format, le PNG (Portable Network Graphics), a t invent plus rcemment pour remplacer le GIF. Conu pour le web, le PNG prsente lintrt de traiter jusqu 65 536 couleurs (16 bits) et doffrir plusieurs niveaux de transparence. Il compresse lgrement mieux que le GIF (de 5 25 % selon les cas). Cependant, comme le GIF, il savre insuffisant pour les images photographiques. noter galement que certaines couleurs PNG ne sont pas correctement rendues par Internet Explorer, limitant de ce fait son utilisation. Le format JPEG est prfrable pour les photographies. Cr pour la photographie, le JPEG permet de compresser des images ayant des dtails fins et de grandes variations de couleurs. Ce format prend en charge jusqu 16 millions de couleurs diffrentes.

188

6. La page web

Bien entendu, la diffrence de rendu de limage nest sensible que lorsque limage JPEG est affiche sur 16 millions de couleurs. Pour des crans faible profondeur graphique (256 couleurs), le format GIF donne des rsultats similaires au JPEG et il est moins volumineux.

6.3.4 Palette web-safe et profondeur graphique

Une palette de 216 couleurs, dite web-safe, tait employe pour garantir un rendu similaire des couleurs quels que soient le navigateur et le systme dexploitation, lorsquune partie des ordinateurs taient configurs en 256 couleurs. Actuellement, les ordinateurs de ce type sont rares (2 %) et il nest plus ncessaire de se servir de cette palette de couleur. Pour information, les couleurs web-safe sont des couleurs dont la valeur hexadcimale est une combinaison des paires 00, 33, 66, 99, CC ou FF. Par exemple, le rouge #FF0033, le vert #33FF66 et le jaune #FFFF33 sont web-safe. Lorsque le navigateur affiche une couleur non web-safe en 256 couleurs, il procde par dithering. Le rendu nest donc pas exactement celui de limage initiale. Avec une profondeur de 65 536 couleurs, quelques problmes peuvent encore survenir lorsque la couleur ne fait pas partie de la palette web-safe. Mais cest plus rare et donc moins sensible lil. Par contre, avec une profondeur de 16 millions de couleurs, il nest plus ncessaire de se servir de la palette web-safe ; toutes les couleurs sont restitues fidlement. Pour des applications grand public, utiliser la palette web-safe. Les statistiques fournies par le site w3schools.com, bien que partielles, nous donnent une ide de la tendance en termes de configuration des navigateurs. Elles montrent que seuls 2 % des navigateurs utilisent encore 256 couleurs.
Profondeur de couleurs 16 millions (24 bits par pixel) 65 536 (16 bits par pixel) 256 ou moins (8 bits par pixel) 90 % 8% 2%

Figure 6.24 Les statistiques du site W3schools.com (janvier 2008) montrent que 2 % des internautes se servent dun navigateur en 256 couleurs.

6.4 Le texte

189

Rappelons que les vritables statistiques prendre en compte sont celles des utilisateurs du site que lon conoit. Si ces statistiques montrent que la plupart des utilisateurs sont quips dcrans fonctionnant avec plus de 256 couleurs (ex. population utilisant du matriel recycl), il faut continuer employer la palette web-safe.

6.4

LE TEXTE
Une page web ne peut pas tre crite comme un texte papier. En effet, les internautes se servent dInternet pour gagner du temps. Ils ne lisent pas la page, ils la balayent en diagonale la recherche de ce qui les intresse [Nielsen 97]. Qui plus est, la lecture sur cran est difficile. Elle est plus lente que sur papier. Le contenu de la page doit donc tre rdig de manire diffrente. Faire ressortir les lments cls du texte. La typographie des messages importants doit accrocher lil. Sur une page web, deux techniques sont particulirement efficaces : mettre en gras et utiliser les puces. La graisse des caractres permet de faire ressortir un mot dans une phrase. Les listes puces vont servir mettre en vidence une srie de points cls. ventuellement, la couleur peut aussi tre utilise pour signaler certains mots. Cependant, du fait quelle apporte une connotation smantique supplmentaire, elle risque dtre moins bien comprise, voire dinterfrer avec la charte graphique du site. Comme toute technique de mise en vidence, il convient demployer la graisse avec parcimonie, sinon elle perd son efficacit. Il est donc conseill de ne pas mettre en gras plus de deux ou trois mots dans une mme phrase, voire dans un mme paragraphe. Ils forment ainsi un tout dans le champ visuel : lil les lit ensemble. Au contraire, plus de trois mots en gras dans une phrase ralentissent la lecture.

190

6. La page web

Figure 6.25 Les Alertboxes du site de J. Nielsen sont un bon exemple dcriture web. Chacun commence par un rsum synthtisant les points forts de larticle. Les ides cls sont mises en vidence en gras. La structure du texte sappuie sur les titres et des listes puces. Notons galement les libells des liens qui expriment clairement la page vers laquelle ils pointent ; ici users scan dirige linternaute vers larticle intitul Why Web Users Scan Instead of Read.

Le texte du lien doit tre cohrent avec le titre de la page. Le texte des liens est systmatiquement lu car linternaute y cherche des lments lui permettant de se diriger dans le site. la lecture du lien, lutilisateur doit pouvoir deviner le contenu de la page. Le mieux est dutiliser directement le titre de la page comme texte du lien. Les liens doivent pointer vers des lments complmentaires. Le lien doit tre conu comme un moyen daccder des informations complmentaires au contenu de la page. Lide est de mettre en avant les conclusions et de fournir des liens vers les dtails.

6.4 Le texte

191

Figure 6.26 Le texte du lien utilis prcdemment (users scan) se retrouve dans le titre de la page. Elle vient en complment dun article plus complet sur le sujet (How Users Read on the Web) comme il est indiqu explicitement sous le titre. La navigation web se prte bien ce type de cheminement o linternaute explore librement le site en fonction de ses thmes dintrt. Notons galement le style journalistique employ ici : linformation principale de larticle (79 % des internautes survolent la page plus quils ne la lisent) apparat en premire ligne.

Justifier les textes gauche. La lecture est plus simple lorsque le texte est justifi gauche, car lil retrouve rapidement le dbut de la ligne. Ne pas souligner les textes. Cette rgle peut sembler vidente. Mais elle mrite toutefois dtre rappele car on rencontre encore souvent ce problme. En effet, le soulignement est utilis sur le papier pour mettre en vidence certains mots. Par contre sur une page web, cet artifice typographique a une autre signification : il signale un lien. Il ne faut pas souligner du texte dans une page web. Du point de vue de lutilisateur, cest un peu comme si on cherchait lui tendre en pige ; lui faisant prendre pour un lien ce qui nen est pas (voir figure 6.27). La lecture sur cran nest pas facile. En outre, elle ne permet pas dannoter le texte au fur et mesure, contrairement au papier. Dans de nombreux cas, linternaute prfre imprimer la page pour la lire. Pour les rubriques destines tre lues, des descriptifs techniques par exemple, il est conseill de prvoir une version imprimable.

192

6. La page web

Dconseill

Figure 6.27 En haut de cette page, le soulignement sert mettre en vidence le message. Mais linternaute croit quil sagit dun lien conduisant vers une page permettant de dclencher laction propose ( demander une recherche dantriorit ). Il clique dessus. En vain, rien ne se passe : ce nest que du texte !

Permettre lutilisateur dimprimer le texte. La prsentation lcran tant gnralement diffrente de celle sur papier, il est recommand de tester au pralable limpression des pages, en particulier lorsquil sagit dune information importante, voire contractuelle, comme un bon de commande par exemple.

6.4.1 Lcriture web

Un cran est plus difficile lire que du papier. Lobjectif nest donc pas de faire de la littrature, mais daller rapidement linformation importante, pour que linternaute trouve directement la rponse aux questions quil se pose. La structure classique introduction, dveloppement, conclusion est oublier ; dautres techniques rdactionnelles doivent aussi tre exploites afin de tirer parti des avantages de la navigation hypertextuelle. Aller lessentiel : tre concis. En liminant le superflu, la lecture est plus rapide. Seules les informations pertinentes sont prsentes. Linternaute perd moins de temps. On considre habituellement quun texte sur cran doit compter deux fois moins de mots que sur papier [Nielsen 98].

6.4 Le texte

193

Rdiger simplement. Le texte est plus facile comprendre lorsquil est rdig clairement, avec des phrases simples : affirmatives, la forme active et sans subordonnes. Les rgles de rdaction nonces section 3.2.2 sont applicables la page web ; rappelons les principales : dvelopper une ide par paragraphe, faire des paragraphes courts (de 10 lignes au maximum) et rduire le nombre de paragraphes par page (3 ou 4 au maximum). tre objectif : noncer des faits, du concret. Il est recommand dviter le langage marketing : pour que le visiteur reste, il faut gagner sa confiance. [Nielsen 98] dconseille galement demployer des termes trop sophistiqus. Les utilisateurs balayent les pages rapidement et risquent de ne pas saisir les nuances. En particulier les mtaphores peuvent tre mal interprtes par les internautes qui les comprennent parfois au premier degr. Commencer par la conclusion. Un texte pour le web doit tre crit lenvers . Pour que lutilisateur accde directement linformation importante, le texte commence par la conclusion. Il donne ensuite les lments qui ont permis daboutir cette conclusion. Cest le principe de la pyramide inverse [Nielsen 96]. Lobjectif est le mme que celui de lcriture journalistique : fournir linformation le plus rapidement possible. Structurer laccs aux informations. Dans le mme ordre ide, linformation est prsente de manire structure : les points principaux dans un premier temps, les dtails ensuite si lutilisateur les demande. De cette manire, linternaute accde rapidement linformation utile, puis il continue la lecture des points pour lesquels il souhaite des complments. Le contenu de chaque page doit tre auto-suffisant. Lorsque linternaute arrive sur lune des pages dun site, il na pas ncessairement parcouru les autres. Chaque page doit donc constituer un ensemble dinformations cohrentes pouvant tre lues indpendamment du reste. Lorsque des informations complmentaires sont ncessaires, la page fournit des liens permettant linternaute dacqurir les connaissances qui lui manquent.

194

6. La page web

Figure 6.28 Les informations sont prsentes en deux temps : un rsum dabord, les dtails ensuite.

La check-list suivante permet de vrifier que toutes les informations ncessaires la comprhension apparaissent bien dans la page (elle porte le nom mnmonique de QQOQCP : initiales des six questions).

Qui a crit la page ? qui sadresse-t-elle ? Que contient la page ? O ? Information de lieu, si ncessaire. Quand ? Date de mise jour ou autre information de temps, si ncessaire. Comment ? Comment fonctionne la page ? (ex. Mode demploi dun service en ligne). Pourquoi ? Quel est lobjectif de la page ?

Figure 6.29 Check-list de vrication du contenu dune page.

Publier des informations utiles. Plutt que de publier des pages vides ou incompltes, il est prfrable de ne rien publier du tout. Il vaut mieux attendre que le contenu du site puisse apporter quelque chose lutilisateur plutt que dafficher du contenu qui ne lui sera daucune utilit. Surtout ne pas prciser quune page est en construction : linternaute sen aperoit tout seul !

6.4 Le texte

195

Rappelons que la Netiquette, la charte des rgles dusage du web, traite tout particulirement de lapport du contenu de la page pour la communaut des internautes [Rinaldi 98].

6.4.2 Liste puces

La liste puces permet de structurer le texte. Le discours en est plus clair, plus facile comprendre. Les informations tant mieux hirarchises, elles sont galement plus simples mmoriser.

Figure 6.30 La liste puces guide linternaute dans sa lecture et structure le contenu de la page.

Lutilisation des listes va permettre dacclrer la lecture de la page, lil tant attir par les puces qui jouent, en quelque sorte, le rle de balises guidant les mouvements oculaires. Utiliser les listes puces bon escient. Comme tout artifice typographique, une utilisation systmatique nuit son efficacit. La liste puces nest utile que lorsque linformation peut tre prsente sous forme dune srie ditems semblables. Si ce nest pas le cas, de simples paragraphes suffisent (voir figure 6.31). La liste structure dautant mieux le contenu quelle est simple. Au-del de 2 niveaux (primaire et secondaire), elle devient complexe et difficile interprter.

196

6. La page web

Dconseill

Figure 6.31 Ici, les puces ne servent qu titre dcoratif pour introduire chaque paragraphe. Elles napportent rien et surchargent inutilement la page.

Utiliser le mme ensemble de graphiques pour les puces. Lutilisation dun mme assortiment de puces contribue la cohrence graphique de lensemble du site. Par ailleurs, le chargement de la page est acclr, puisquune fois la premire liste affiche, limage de la puce reste dans la mmoire cache du navigateur et na donc pas tre recharge.

6.4.3 Lisibilit des caractres

Sur une page web, la police de caractres permet de distinguer les principaux lments textuels : les titres, le corps du texte et les tiquettes des boutons de navigation. En terme de lisibilit, les recommandations nonces section 1.2.2 sappliquent galement aux caractres web. Rappelons en particulier quil importe de limiter le nombre de polices utilises. En effet, un grand nombre de polices rend la page difficile comprendre et confre au site une image dsordonne. Cependant la page web prsentant la particularit dadapter sa prsentation au type de poste utilisateur, certains points spcifiques ce mdia doivent galement tre pris en compte.

6.4 Le texte

197

Autoriser lutilisateur changer la taille de la police de caractres. La plupart des navigateurs permettent linternaute dadapter la taille de la police de caractres la rsolution de son cran et ses facults visuelles. Mais pour ce faire, la police utilise dans la page doit tre modifiable, cest--dire dfinie en relatif par rapport la police par dfaut (ex. size=-1). Par contre, si la police est dfinie en absolu (ex. size=2), lutilisateur ne peut plus la modifier. En fait, linternaute change trs rarement la taille des caractres. Seuls les utilisateurs avertis connaissent cette commande. Cest pourquoi, la police par dfaut tant gnralement juge trop grande , les concepteurs web choisissent une police plus petite, par exemple Verdana en taille 2 ou Arial en 1. Le choix de la police est dlicat car la taille des caractres dpend aussi du type de police utilis. Des polices de typographie semblable telles que Arial et Verdana noccupent pas la page de la mme manire, comme le montre la figure suivante.

Arial taille 3

Verdana taille 3

Figure 6.32 Verdana prend plus de place que Arial bien que la taille des deux textes ait t spcie de faon identique (size=3).

Qui plus est, la taille dune police de caractres nest pas rendue de manire semblable sur toutes les plates-formes. Elle devient mme illisible dans certains cas, comme le montre lexemple suivant tir de [Mulder 98].

Arial gras taille 1 sur PC

Arial gras taille 1 sur Macintosh

Figure 6.33 La taille des caractres change selon la plate-forme. Parfois, un site conu sur PC est illisible sur Macintosh, obligeant linternaute systmatiquement augmenter la taille du texte.

198

6. La page web

La notion mme de taille, telle quelle est code en HTML, nest pas interprte de la mme manire sur toutes les plates-formes. Les caractres apparaissent gnralement plus gros sur PC que sur Macintosh [Mulder 98].

PC

Macintosh

Figure 6.34 Pour un mme navigateur, les tailles ne sont pas rendues de la mme manire selon la plate-forme.

Seule la feuille de style permet de matriser prcisment la taille des caractres. La mthode la plus frquemment utilise consiste dfinir la taille en pixels. De cette faon, le rendu est strictement similaire dun poste lautre. Mais cette technique prsente linconvnient de ne plus autoriser lutilisateur modifier la taille. Il est aussi possible de dfinir les polices en relatif par rapport la taille par dfaut (taille en em). Toutefois, cette seconde mthode est plus difficile mettre au point.

PC

Macintosh

Figure 6.35 La seule manire dobtenir un rendu identique sur toutes les plates-formes, quel que soit le navigateur, est de dnir la taille du caractre en pixels laide dune feuille de style, mais alors la taille est xe

Utiliser les valeurs par dfaut pour le texte. Il est prfrable de laisser lutilisateur contrler la taille des caractres du texte de la page afin quil puisse adapter la zone de lecture ses prfrences et ses capacits visuelles. En utilisant une feuille de style, il est possible de dfinir une taille par dfaut qui soit lisible pour la majorit des utilisateurs (11 pixels), tout en permettant de modifier cette hauteur de caractre pour amliorer le confort

6.5 Formulaires

199

de lecture. Pour cela, il faut dfinir la taille de la police de manire proportionnelle par rapport celle du navigateur (pour plus dtails, voir www.blog-and-blues.org). Une taille plus petite est acceptable pour les boutons de navigation. Du fait de leur position fixe, rcurrente sur tout le site, et afin de gagner de la place lcran, il est envisageable dutiliser un texte de plus petite taille pour les boutons de navigation. ventuellement, une taille en absolu (en pixels) peut tre dfinie afin de garantir une mise en page stable.

6.5

FORMULAIRES
Les formulaires font peur linternaute qui les voit parfois comme une sorte dpreuve. En effet, jusqu prsent, sur les autres pages du site, il tait consommateur dinformation ; ici il devient fournisseur. Dune certaine manire, il prend plus de risques. Lenjeu est important car le passage du formulaire lui permet gnralement de concrtiser une srie doprations qui, pour linstant, taient restes virtuelles. Cest typiquement le cas lorsquil sagit de fournir les renseignements finalisant un achat en ligne. Face au formulaire, il y a peu de marge derreur. Sur les autres pages du site, lutilisateur pouvait facilement revenir en arrire. Ici, il se lance dans un processus long o il est plus difficile de corriger les erreurs. Finalement, contrairement au reste du site o il se sert de la souris, il doit maintenant utiliser le clavier ; dispositif dont il na pas toujours la matrise et avec lequel les erreurs sont plus frquentes. La page de formulaire demande lutilisateur une attention et une dextrit inhabituelle par rapport au reste du site. Cest gnralement une source de stress. Les recommandations sur les champs de saisie (voir sections 2.2.5) sappliquent galement aux formulaires web, en particulier celles visant faciliter la tche de saisie. Proposer par dfaut la valeur la plus courante. Guider lutilisateur dans la saisie. Les deux points suivants mritent galement une attention particulire, car ils sont lis aux spcificits du mdia web.

200

6. La page web

Limiter les saisies au strict ncessaire. Lors dun achat en ligne, on recense une proportion importante dabandons au moment du remplissage des formulaires de paiement [Fuchs 03]. Effectivement, remplir un formulaire est une opration dlicate. Plus le formulaire est court et plus lutilisateur comprend la ncessit de fournir les informations demandes, plus il a de chance de mener la tche jusquau bout. Sinon, il risque fort dabandonner et de quitter le site. Indiquer les entres obligatoires. Une manire de rduire la charge de saisie est dindiquer explicitement les donnes requises, cest--dire celles dont labsence va gnrer une erreur et donc une perte de temps. Lastrisque est le signe le plus frquemment employ pour signaler les champs dont la saisie est obligatoire. Les internautes reconnaissent maintenant cette convention. Il est toutefois prudent den rappeler la signification sur la page afin dtre facilement compris des internautes dbutants.

Figure 6.36 Pour quun formulaire puisse effectivement permettre de recueillir les commentaires des visiteurs du site, il doit tre sufsamment simple pour que la saisie se fasse rapidement.

6.5 Formulaires

201

Liste de slection La liste de slection facilite la saisie en proposant lutilisateur de choisir parmi les diffrentes valeurs possibles. Linternaute retrouve ainsi un comportement quil connat du logiciel. La liste prend peu de place et permet de prsenter de nombreuses options. Pour gagner de lespace sur la page, cest effectivement un composant trs pratique. Mais, de ce fait, elle est gnralement utilise pour cacher de longues listes particulirement difficiles manipuler Quoi quil en soit, cest un moyen efficace pour guider lutilisateur dans la saisie. Il lui suffit de reconnatre la valeur souhaite, il na pas besoin de se souvenir de lintitul exact. Ne pas utiliser une liste de slection pour une information connue de linternaute. La manipulation des listes de slection est dlicate, surtout lorsque la liste est longue et quil faut se servir de la barre de dfilement. Les listes de slection sont gnralement sources derreur. En particulier, il arrive frquemment que lutilisateur change la valeur de la liste sans sen apercevoir, en voulant descendre dans la page avec la molette de la souris. Ce type derreur a t observ de nombreuses reprises. Cest pourquoi, lorsque linformation est connue de lutilisateur (par exemple, son anne de naissance), il est prfrable demployer un champ de saisie plutt quune liste de slection. Qui plus est, les intituls des listes ne sont pas toujours explicites. Les tests nous montrent que linternaute pense parfois que le champ a dj t rempli. Lintitul par dfaut doit donc tre suffisamment clair pour que lutilisateur comprenne laction attendue. Prsenter les items selon la logique de lutilisateur. La recherche dans la liste est rendue difficile par les barres de dfilement. Elle prend gnralement du temps. Pour tre efficace, lutilisateur doit comprendre rapidement la faon dont la liste est organise. Faute de mieux, il est conseill de classer les items par ordre alphabtique. Dans ce cas, linternaute trouve rapidement ce quil cherche condition quil en connaisse lintitul. Dans le cas contraire, le parcours systmatique de la liste est fastidieux.

202

6. La page web

Figure 6.37 Sur ce site, les chanes de tlvision sont classes selon leur notorit. Les stations les plus connues apparaissent en haut de la liste ce qui facilite leur slection. Mais pour les autres, la recherche se complique car il nest pas possible de saider de lordre alphabtique.

Prfrer les boutons aux listes de slection. Les cases cocher et les boutons radio permettent galement la slection. Ces composants sont simples manipuler et prsentent lavantage de rendre visibles les diffrentes options possibles. Par contre, ils occupent plus de place quune liste. Cependant, lorsque lespace disponible sur la page le permet, ils peuvent remplacer efficacement une liste de slection

Figure 6.38 Au lieu de raliser ce slecteur laide dune liste de slection comme cest le cas frquemment, ce site propose des cases cocher. Linteraction est plus rapide. Une case Toutes rgions aurait cependant vit davoir slectionner les items un par un.

6.6 Un nouveau mdia de cration 203

6.6

UN NOUVEAU MDIA DE CRATION

Dans les trois derniers chapitres sur les sites web, nous avons adopt le point de vue de lutilisabilit. Mais ces considrations nous ont fait oublier que le web est aussi un mdia et ce titre, un outil de cration [Cloninger 00]. Il existe aussi des sites qui ne cherchent pas tre utilisables avant tout. Leur objectif est plutt de transmettre une atmosphre, une motion. Avec Internet, un courant artistique est en train de se construire. Ces uvres sont, non seulement visuelles et sonores, mais aussi interactives. Ici, le spectateur nest pas passif ; il peut interagir avec le travail de lartiste. Cette dimension assez peu exploite jusqu prsent dans le domaine artistique est le moteur dun mouvement cratif dun autre type, combinant la fois graphisme, musique et animation, qui est en train de gagner sa place au ct des arts traditionnels. Un exemple reprsentatif de ce courant est le site www.gazing-into-raindrops.com qui invite le visiteur jouer avec la palette interactive de formes et de couleurs propose par Youngjae You, le crateur du site.

Figure 6.39 Le site Gazing into Raindrops cherche transmettre plus quune information : une motion.

204

6. La page web

Figure 6.40 Une des pages du site Gazing into Raindrops.

205

7
Mthodes de conception des interfaces

QUEL

BNFICE

? ................................................................................................................206

CONCEPTION

ORIENTE UTILISATEUR ..............................................................................208

ANALYSE ............................................................................................................................210 Enqute / interviews utilisateur .......................................................................................210 Focus group....................................................................................................................214 CONCEPTION ......................................................................................................................217 Personas .........................................................................................................................217 Tri par carte...................................................................................................................221 Maquettage / prototypage ...............................................................................................223 VALUATION ERGONOMIQUE ............................................................................................229 Audit ergonomique .........................................................................................................229 Test utilisateur ...............................................................................................................232 DERNIERS
CONSEILS ...........................................................................................................241

La facilit dutilisation, la convivialit, le naturel sont des qualits importantes lorsque nous nous servons dun logiciel. Elles vont nous permettre de nous concentrer sur la tche proprement dite et non sur la manire de la raliser. Lorsque le logiciel est simple utiliser, nous nous intressons au Quoi faire ? et non Comment le faire ? Notre performance en est meilleure. Les entreprises y sont dsormais attentives lorsquelles dcident dacqurir un logiciel qui doit tre utilis grande chelle. En effet, lutilisabilit dtermine

206

7. Mthodes de conception des interfaces

non seulement la productivit, mais aussi le temps et le budget des programmes de formation. Pour cette raison, lutilisabilit est reconnue par les quipes commerciales comme lun des critres de choix du client. Dailleurs, nest-ce pas ce qui a permis au Macintosh dApple de tenir la drage haute aux PC pendant de longues annes ? Aprs avoir expos lintrt commercial de la dmarche de conception oriente utilisateur, ce chapitre prsente la faon dont cette mthode sintgre dans le processus de dveloppement dune application informatique. Il dcrit les principales mthodes employes au cours des trois phases de la dmarche : analyse, conception et valuation. Ces mthodes permettent didentifier les problmes dergonomie dun logiciel ou dun site web et ainsi damliorer progressivement lutilisabilit de linterface.

7.1

QUEL BNFICE ?
Dans le cadre dun projet informatique, les mthodes de conception ergonomique permettent de rduire les cots de dveloppement. En effet, en impliquant lutilisateur final ds la phase de conception du logiciel, lquipe projet peut rapidement consolider avec le client sa comprhension du besoin. Sachant quen moyenne 70 % 80 % des cots sont engags au dbut du projet, lenjeu est important. Une meilleure connaissance de lutilisation effective du logiciel et de lattente des utilisateurs permet dviter les retours en arrire, et donc les surcots, dus une mauvaise comprhension du cahier des charges. Qui plus est, il a galement t relev que linterface homme-machine faisait lobjet denviron un tiers des points abords lors des runions davancement au cours du projet [Nielsen 93]. En effet, pour le client, la qualit de linterface est un critre de choix. Plus le produit est facile utiliser, plus il est apprci des consommateurs. Cest un facteur de confiance dans la marque et donc un vecteur de fidlisation. Pour le grand public, des marques telles que Nokia, Philips ou Sony intgrent depuis de nombreuses annes la dmarche ergonomique dans la conception de leurs produits. En faisant participer lutilisateur la conception et lvaluation de linterface lors des phases de prototypage, la dmarche ergonomique constitue un processus de rduction des risques. Son impact sur le cot global du projet est dautant plus important que la plupart des applications sont dsormais interactives. Linterface occupe une part importante du code dvelopp ; en moyenne 48 % voire 80 % pour les applications internet.

7.1 Quel bnfice ?

207

Pour les applications informatiques employes en entreprise, lintrt est double. Dune part, la dmarche est source dun gain de productivit pour les utilisateurs finaux, car linterface sera plus rapide utiliser, plus simple apprendre et minimisera le risque derreur. Dautre part, elle permet aux quipes informatiques de rduire les cots de maintenance corrective gnrs par un manque dimplication des utilisateurs finaux dans les phases de dfinition de lapplication. Bien entendu, la dmarche de conception oriente utilisateur a galement un cot. Il est valu environ 6 % du budget global du projet [Nielsen 93]. Cet investissement est relativement faible au regard de limportance des enjeux que sont la qualit du produit et la satisfaction du client. Pour une ligne de produit logiciel, la dmarche ergonomique est un vecteur de rutilisation. Elle permet de mettre en place un cycle damliorations sappuyant sur un ensemble de composants de base dont lutilisabilit est affine au fil des versions du produit
Recueillir les retours dutilisation

Dvelopper une nouvelle version du produit

Enrichir les rgles de design

Faire voluer la base de composants rutilisables

Figure 7.1 La pratique de lutilisabilit est un vecteur de rutilisation.

Un document, gnralement appel guide de style, ou charte ergonomique, dfinit les principes ergonomiques suivis par le logiciel ainsi que le design graphique de son interface. Ces principes, issus de prcdents projets et de considrations ergonomiques gnrales, orientent les spcifications des composants logiciels. Pour chaque projet, linterface homme-machine du systme est construite laide de ces composants de base. Puis, en fonction des retours dutilisation, le guide de style est mis jour, et ainsi de suite.

208

7. Mthodes de conception des interfaces

Russites commerciales Comme la plupart des mthodes visant amliorer la qualit dun produit, il est difficile destimer prcisment le gain apport par la pratique de lutilisabilit. Cependant, quelques russites commerciales ont permis de mesurer la rpercussion de lapproche sur les rsultats financiers de lentreprise [Hendrick 97]. Lune des premires entreprises adopter cette mthode a t Thomson Multimdia. En 1988, le design ergonomique des tlcommandes leur offre un vritable avantage concurrentiel ; plusieurs millions en ont t vendus. En 1994, le systme de rglage du dcodeur satellite DSS, conu galement en relation troite avec les utilisateurs, a largement dpass les prvisions de ventes. Une amlioration, mme minime, de lutilisabilit peut tre lorigine dune conomie considrable lchelle de lentreprise lorsque le logiciel est utilis par de nombreux employs. Ainsi, Ameritech, une compagnie amricaine de tlphone, a revu les crans de saisie utiliss par ses assistants de direction, rduisant de 600 ms le temps moyen pour traiter un appel. Il en rsulte, pour lensemble de la compagnie, un gain de 2,94 millions de dollars par an. Lutilisabilit est aussi un lment de marketing. Ainsi en 1994, la seconde version de la base de donnes Vax Rally corrige 20 des 75 problmes dutilisabilit identifis sur la premire version. Cette nouvelle mouture du produit a enregistr un gain de 80 % sur les bnfices. Ce rsultat tait suprieur de plus de 66 % aux prvisions de ventes. Ces exemples montrent les deux principaux bnfices de la pratique de lutilisabilit pour une entreprise : une meilleure productivit et une plus forte attractivit du produit. Mais des problmes dutilisabilit ont aussi t la source de catastrophes humaines. Ainsi, labsence daffichage des units sur un cadran de descente a t lun des lments lorigine de la catastrophe de lAirbus du Mont Sainte-Odile en 1992. De mme, il a t montr que laccident de la centrale nuclaire de Three-Mile Island (Pennsylvanie, 1979) tait li une conception du poste de contrle qui ne prenait pas en compte la dimension humaine dans le processus de supervision [Daniellou 86, Maddox 99].

7.2

CONCEPTION ORIENTE UTILISATEUR

La dmarche de conception oriente utilisateur consiste mettre en place un processus itratif sappuyant sur lanalyse de lexprience utilisateur, cest--dire le comportement et les retours des utilisateurs lorsquils se servent rellement de lapplication

7.2 Conception oriente utilisateur

209

Analyse

Conception

valuation

Figure 7.2 Les trois phases de la dmarche de conception oriente utilisateur.

On distingue habituellement trois phases dans la dmarche : 1/ Phase danalyse Cette premire tape vise prciser les attentes et le besoin des utilisateurs finaux. Elle permet de prendre connaissance de la tche relle des utilisateurs et danalyser le contexte dans lequel ils effectuent, ou vont effectuer, cette tche. La phase danalyse permet de prciser lutilit recherche par les utilisateurs de lapplication. 2/ Phase de conception Sur la base des lments recueillis dans la phase danalyse, une premire maquette de linterface est conue. Cette maquette rsulte, dune part de lanalyse de la tche des utilisateurs et des spcificits du contexte de travail, et dautre part des principes dergonomie des interfaces (prsents dans les chapitres prcdents) ainsi que des standards dinterface du domaine. Cette premire maquette voluera ensuite en fonction des retours de la phase dvaluation. Comme nous le verrons plus bas, il sagit dans un premier temps dune bauche de linterface qui sera complte et raffine chaque itration. 3/ Phase dvaluation La phase dvaluation consiste mesurer lutilisabilit de lapplication. Pour cela, diffrentes mthodes peuvent tre mises en uvre. La principale mthode, le test utilisateur, consiste placer lutilisateur en situation dutilisation relle du produit et observer les difficults rencontres. Lvaluation permet didentifier les points amliorer sur la maquette et donc de prparer la version suivante qui sera nouveau teste et ainsi de suite. Lexprience montre que deux trois itrations suffisent en gnral pour finaliser la conception de linterface. Nous prsentons ci-aprs les principales mthodes qui peuvent tre mises en uvre pendant les diffrentes tapes de la dmarche de conception oriente utilisateur. Pour une description dtaille de ces mthodes, le lecteur pourra consulter lexcellent ouvrage de Thierry Baccino, Catherine Bellino et Teresa Colombi : Mesure de lutilisabilit des Interfaces [Baccino 05], ainsi que celui dAlan Cooper et Robert Reimann : About Face 2.0 [Cooper 03] pour la mthode des personas.

210

7. Mthodes de conception des interfaces

Quil sagisse de concevoir linterface dun logiciel ou dun site web, la dmarche et les mthodes sont similaires. Pour un logiciel, la phase danalyse permet didentifier les fonctionnalits mettre en uvre, tandis quelle sert prciser les services attendus pour un site web. Dans chaque cas, la phase danalyse vise dfinir lutilit du produit. Ltape de conception permet ensuite de construire la structure de menus et le dcoupage en fentre du logiciel, ou bien larborescence de pages du site web. Dans les deux cas, les mthodes de maquettage permettent de raffiner progressivement la fidlit du prototype et damliorer progressivement linterface par itrations successives.

7.3

ANALYSE
Les mthodes prsentes ci-aprs sont les plus frquemment utilises pour prciser les attentes des utilisateurs. Lenqute ou linterview utilisateur consiste questionner individuellement un panel reprsentatif de la population vise par lapplication. Au contraire, le focus group est une mthode danimation qui prsente lintrt de sappuyer sur la dynamique dun groupe dutilisateurs pour identifier limage collective du produit.

7.3.1 Enqute / interviews utilisateur

Lenqute utilisateur vise recueillir les besoins et les attentes des utilisateurs vis--vis du produit : les fonctionnalits qui leur seraient utiles, les services attendus, etc. Lenqute est conduite sous forme dinterviews, cest--dire dentretien individuel en face face . Elle permet dtablir les principes directeurs qui vont guider la conception de linterface. Le contenu de linterview proprement dit, les questions poses, dpend troitement de lobjectif poursuivi. Au dmarrage du projet, on sintresse aux attentes des utilisateurs, leurs souhaits, aux informations quils aimeraient trouver sur le site. Puis, lorsque la dfinition des besoins est plus avance, linterview peut se focaliser sur des questions plus prcises en termes dusage. Elle peut galement permettre de recueillir les retours des utilisateurs sur une maquette lorsque celle-ci a t ralise Linterview est une mthode danalyse qualitative. Les donnes recueillies sont subjectives car elles sappuient sur lopinion de lutilisateur et non sur ce quil fait rellement. Il serait donc illusoire de vouloir en tirer des donnes chiffres, mais il permet didentifier les tendances et surtout de prioriser les besoins des utilisateurs.

7.3 Analyse

211

Panel utilisateur Les utilisateurs qui participeront aux entretiens doivent tre reprsentatifs de la population vise. Selon le domaine, les critres prendre en compte sont lge, le genre, lexprience mtier, la catgorie socioprofessionnelle (CSP), voire dautres critres spcifiques selon le projet. Un panel dune dizaine de personnes environ permet gnralement de recueillir des donnes qualitatives suffisamment reprsentatives. Toutefois, lorsquil existe des profils dutilisateur nettement diffrents, une proportion dutilisateur de chaque profil est ncessaire, par exemple, pour un site marchand, le panel est gnralement constitu de cinq utilisateurs connaissant le site et de cinq autres ne le connaissant pas. Protocole et logistique Les participants sont interviews individuellement. Pour les applications professionnelles, en particulier les intranets ou les systmes dinformation, il peut tre intressant de conduire les interviews directement sur le lieu de travail de lutilisateur afin de mieux comprendre le contexte dans lequel lapplication est utilise. Toutefois, disposer dun local calme et isol permet de mener linterview sans perturbation extrieure. Lorsque lactivit des utilisateurs est importante, par exemple pour une application de support tlphonique, il est prfrable de scinder linterview en deux tapes : dune part des observations directement sur le lieu de travail avec un questionnement minimal, dautre part des interviews proprement dit lextrieur de lespace de travail. En phase danalyse, linterview est mene selon un mode semi-directif afin de privilgier un certain degr de libert dans les rponses et de permettre une dmarche exploratoire. Lenquteur pose donc des questions ouvertes en veillant ne pas influencer le participant par son attitude, ses intonations o la manire dont la question est formule. Afin de ne pas biaiser linterview, il est important que lenquteur ne soit pas impliqu dans le projet. Lentretien permet de recueillir des donnes subjectives, linterviewer doit donc veiller ne pas influencer le participant par ses ractions. Lentretien ne doit pas tre un change de points de vue, une discussion entre le participant et lenquteur. Ce dernier ne doit pas faire part de son opinion. Il doit rester le plus neutre possible afin de ne pas influencer les rponses. Son rle consiste poser les questions et relancer le participant afin de recueillir les informations les plus compltes possible. Il veillera reformuler les rponses afin de vrifier quil a correctement compris le point de vue de lutilisateur. Selon les objectifs de linterview, certaines questions peuvent tre poses selon une approche directive afin dobtenir des rponses plus prcises vis--vis de certains lments de linterface par exemple ( Aviez-vous remarqu ceci ?

212

7. Mthodes de conception des interfaces

en montrant llment en question). Au contraire, pour dautres points, on laissera lutilisateur sexprimer plus librement en adoptant une dmarche non directive, par exemple : Quavez-vous apprci sur ce site ? Afin de pouvoir reproduire les diffrentes interviews dans les mmes conditions et sassurer que lensemble des points identifis a t balay lors de linterview, il est conseill de construire une grille de questions o sont nots les diffrents points abords lors de linterview. Idalement, les interviews ne devraient pas durer plus de 45 minutes car audel la qualit des changes diminue. Toutefois, lexprience montre que les interviews durent gnralement plus dune heure. En termes de matriel, le seul outil employ lors de linterview est un magntophone car il permet de se consacrer uniquement lentretien et de ne pas se soucier de la prise de notes qui monopolise une partie de lattention de lenquteur. Lenregistrement offre lavantage de garder une trace de lensemble de lentretien. Toutefois lanalyse de lensemble des enregistrements, la rcoute complte, prend du temps. Il est souvent plus rapide de prendre des notes succinctes et de consulter uniquement certaines parties de lenregistrement afin de vrifier ou complter certains points Analyse de la tche Pour un site web, les interviews permettent de prciser lattente des utilisateurs, limage quils se font de lentreprise et des services quelle propose. Pour une application logicielle, les questions se concentrent gnralement sur les fonctionnalits attendues et sur la faon dont les utilisateurs effectuent lactivit pour laquelle le logiciel est dvelopp. La mthode employe pour cela est celle dite de lanalyse de la tche [Sebillotte 94]. On procde pour cela en deux tapes. Tout dabord, des interviews permettent didentifier la tche prvue ; ce qui doit tre fait. Cette premire analyse est ensuite consolide par lobservation des utilisateurs sur leur lieu de travail afin de pouvoir modliser lactivit effectivement ralise. En recoupant les informations issues des interviews et celles observes lors de lutilisation effective de lapplication, il est possible de construire un modle de la tche identifiant les buts de lutilisateur et la manire dont il les atteint, ainsi que les informations qui lui sont ncessaires pour cela. Les observations permettent galement didentifier la faon dont lutilisateur traite les cas exceptionnels, voire les urgences dans le cas des applications risque . De plus, lorsque le logiciel vient en remplacement dun autre, il est intressant de profiter de ce premier contact avec les utilisateurs pour collecter leur point de vue sur le systme quils utilisent actuellement.

7.3 Analyse

213

Dans le cadre du dveloppement logiciel, lanalyse de la tche permet de structurer linterface homme-machine. Le dcoupage en fentres drive en grande partie de larchitecture de la tche et de la faon dont lutilisateur mne les diffrentes sous-tches. La connaissance des informations ncessaires la ralisation de chaque tche permet de dfinir le contenu de chaque fentre. Analyse de la situation de travail et choix de conception Lors des interviews utilisateurs, diffrents lments lis au contexte dutilisation de lapplication vont tre recueillis afin dajuster le logiciel la population cible. En particulier, on sintressera aux connaissances informatiques de lutilisateur et son exprience du domaine applicatif, afin de dterminer le type de guidage que devra offrir le logiciel. Les caractristiques de la tche ralise avec le logiciel entrent galement en ligne de compte : Quelle est la frquence et la dure dutilisation du logiciel ? La tche est-elle structure ? Une formation est-elle prvue ? Ces diffrents lments vont contraindre la conception de linterface hommemachine et permettre de choisir le mode de dialogue le mieux adapt la situation de travail. Si le logiciel est utilis de faon occasionnelle, on favorisera la facilit dapprentissage en donnant un accs aux commandes par des menus droulants. Au contraire, si les contraintes temporelles sont fortes, on privilgiera la rapidit dexcution en utilisant des touches de fonction. De cette manire, il est possible de justifier les choix de conception sur la base des lments recueillis lors des interviews. Lanalyse de la situation de travail aide la conception de linterface hommemachine. Ainsi, la question se pose frquemment de savoir sil convient de privilgier la rapidit dutilisation ou la facilit dapprentissage ? Le tableau 7.1 donne des lments de dcision [Mayhew 92]. Mthode des incidents critiques Afin de se focaliser sur les points faibles et les points forts de lapplication existante, il est intressant de questionner les utilisateurs sur les incidents quils ont rencontrs lorsquils se sont servis du logiciel ou du site. Cette mthode dite des incidents critiques prsente lintrt didentifier les aspects du logiciel qui ont t source derreur, tout comme dailleurs les points jugs positifs par les utilisateurs. La dmarche consiste demander aux utilisateurs de dcrire une situation o ils se souviennent avoir rencontr des problmes. Faisant appel la mmoire des utilisateurs, la mthode des incidents critiques permet de se focaliser sur les problmes, et les avantages, ressentis comme tels par les utilisateurs.

214

7. Mthodes de conception des interfaces

Tableau 7.1 Le choix de privilgier la rapidit dutilisation o la facilit dapprentissage sappuie sur les caractristiques de la situation de travail de lutilisateur. Caractristique de la situation de travail Apprentissage approfondi Aucun apprentissage pralable Utilisation frquente de longue dure Utilisation de courte dure ou peu frquente Utilisation obligatoire Utilisation choisie Tche importante (donc motivation forte et apprentissage approfondi) Tche peu importante (ou motivation faible) Contrainte de conception Rapidit dutilisation Facilit dapprentissage Rapidit dutilisation Facilit dapprentissage et de mmorisation Rapidit dutilisation Facilit dapprentissage et de mmorisation Puissance, rapidit dutilisation Facilit dapprentissage et de mmorisation

Lintrt de cette mthode est de sappuyer ainsi sur la description des faits rels vcus par les utilisateurs. Toutefois dans la mesure o elle sappuie principalement sur la faon dont les utilisateurs se souviennent des vnements, elle peut tre source derreur ou de mauvaise interprtation Cest pourquoi, il est utile de disposer lors de lentretien dune version du logiciel ou du site afin de pouvoir demander lutilisateur interview de simuler la situation quil relate. Des enregistrements dcran seront alors utiles pour garder une trace des problmes voqus. La dmarche des incidents critiques permet de recueillir la fois les points ngatifs quil faudra corriger et les points positifs quil faudra au contraire maintenir et renforcer le cas chant.

7.3.2 Focus group

Le focus group est une mthode denqute qui vise recueillir lopinion des utilisateurs sur un produit ou un concept. Cette mthode employe en marketing sapplique facilement aux produits informatiques. Elle permet de mieux comprendre les motivations des utilisateurs et limage quils se font du produit. Contrairement aux autres mthodes prsentes, elle se pratique avec un groupe de participants : utilisateurs ou futurs utilisateurs de lapplication. Le focus group

7.3 Analyse

215

permet uniquement de recueillir des lments subjectifs, et non des donnes objectives sur lusage de lapplication comme le test utilisateur, par exemple. Les points abords lors dun focus group dpendent des objectifs dfinis au pralable avec lquipe projet, et des informations quelle souhaite recueillir. En fonction de ces objectifs, la trame du focus group est dfinie sur la base des diffrents thmes (cinq ou six en gnral) qui seront abords lors de la sance. Chaque thme identifi fait lobjet soit dune discussion de groupe, soit dune activit spcifique. Par exemple, pour identifier les motivations des utilisateurs ou les faire ragir sur un nouveau design, on procdera par questionnement. Par contre, sil sagit de concevoir une nouvelle interface, il peut tre intressant de demander aux participants de raliser en petit groupe une maquette de linterface idale quils prsenteront ensuite aux autres personnes. Plusieurs focus groups peuvent tre conduits afin dobtenir diffrents points de vue et de complter au fur et mesure les rsultats obtenus. Il est recommand de sappuyer sur les rsultats des focus groups prcdents pour enrichir le contenu de la sance de travail et viter de revenir sur des thmes dj abords. Le panel utilisateur doit rpondre aux caractristiques du cur de cible. Si les mmes thmes sont abords dune sance lautre, il est prfrable de mixer de manire quilibre diffrents profils dans chaque groupe. Toutefois, selon les objectifs, il peut aussi tre intressant de construire des focus groups autour dun mme profil, qui sera, par exemple, le seul tre intress par la partie du site traite lors de la sance. Ou bien, si la question est de dterminer les motivations de chaque segment de la cible venir visiter le site, il est galement prfrable de construire des groupes par segment. En rgle gnrale, on conseille de ne pas dpasser sept utilisateurs par focus group. Au-del certains utilisateurs, plus timides, risquent de ne pas sexprimer. Animation du focus group Un focus group se droule en trois temps : une phase dintroduction o lanimateur prsente les objectifs de la sance, une phase de ralisation pendant laquelle sont abords les diffrents thmes identifis et une phase de clture qui permet de faire une synthse. Dans un premier temps, il est dusage dinitier le focus group par une animation destine briser la glace afin de renforcer la cohsion du groupe et donc stimuler les interactions ultrieures. Lobjectif de ce premier exercice est de permettre aux participants de faire connaissance afin de sexprimer ensuite plus facilement. On veillera toutefois ne pas consacrer trop de temps lactivit brise-glace . ventuellement, il est possible de se servir dun des thmes du focus

216

7. Mthodes de conception des interfaces

group, par exemple : Racontez-nous votre exprience avec le site ou lapplication ? . Au dbut de la sance, on prcise galement les rgles du jeu . Lobjectif est de permettre chacun de sexprimer : pas de censure , laisser parler les autres , coutez , chacun parle son tour , tout ce qui est dit est a priori intressant , etc. Il peut tre intressant de noter ces rgles sur un paper-board visible de tous afin ventuellement de pouvoir sy rfrer en cours de sance. Notons dailleurs que la constitution de cet ensemble de rgles est aussi un bon moyen de briser la glace. On veillera ensuite proposer des exercices de difficult croissante en commenant par des consignes simples, voire des associations dides, puis en se focalisant sur certains thmes spcifiques du produit au fur et mesure de lavancement de la sance. Le produit sur lequel porte le focus group est prsent progressivement et les questions se font plus prcises. En principe, il est prfrable de se limiter deux heures de focus group, mais il arrive souvent que la sance dure plus longtemps. Le rle de lanimateur consiste relancer le dbat, reformuler les rponses et recadrer lorsque le groupe sloigne de la consigne. Il veillera ce que chacun puisse sexprimer. Il pourra ventuellement relater des lments issus des groupes prcdents pour relancer le dbat. Comme pour les autres mthodes proposes ici, lanimateur reste le plus neutre possible vis--vis des opinions mises afin de ne pas influencer les participants. la fin de chaque activit, il veillera synthtiser les rsultats. Il peut dailleurs se faire aider par le groupe pour cela. Lors de la phase de clture, les diffrents rsultats sont repris et prsents aux participants. Il est clairement demand aux participants de valider les diffrents rsultats afin de disposer dun matriel tangible. Cette dernire tape prend gnralement un certain temps, car de nouveaux points peuvent tre voqus la lumire de lensemble du travail ralis, ou bien certaines rserves faire lobjet de discussions dans le groupe. Des paper-boards dans la salle permettent lanimateur de synthtiser, au vu de tous, les diffrentes opinions qui ont t mises. Ces supports pourront galement servir, lors dun travail en groupe, illustrer ou proposer des schmas dinterface. Afin de pouvoir analyser les rsultats du focus group, il est utile denregistrer le droulement de la sance. De plus lanimateur tant trs occup conduire les dbats, on prvoit habituellement une seconde personne qui va jouer le rle de secrtaire de sance et noter les ractions des participants.

7.4 Conception 217

Le focus group : un outil de crativit. Le focus group est particulirement intressant en phase danalyse pour initier la conception dune interface ou dun nouveau site car il permet de mieux comprendre limage perue du produit. Il permet didentifier les motivations, les prfrences, les attentes et les priorits des utilisateurs viss. Les ides nouvelles, mises lors du focus group, peuvent tre discutes et approfondies en commun, ce qui nest pas le cas lors dun entretien individuel. Cette mthode peut galement tre utilise en phase dvaluation afin de recueillir les ractions des utilisateurs sur une maquette de linterface, mais dans ce cas, elle ne sera pas aussi efficace quun test utilisateur car il ne sappuie pas sur la mise en situation relle des utilisateurs.

7.4

CONCEPTION
Trois mthodes sont gnralement employes dans la phase de conception pour laborer les spcifications de linterface qui serviront ensuite de base au dveloppement de lapplication. Les personas fournissent des archtypes dutilisateur qui vont guider la conception dtaille de linterface. Le tri par carte permet dorganiser le contenu de lapplication. Tandis que le maquettage vise construire linterface de manire itrative.

7.4.1 Personas
La mthode des personas permet de construire des archtypes des utilisateurs de lapplication la manire des personnages dun film ou dune pice de thtre, auxquels les concepteurs pourront se rfrer lors du design de linterface. Cette mthode unique couvre la fois les phases danalyse et de conception. La mthode des personas peut sembler surprenante car, comme nous lavons voqu au chapitre 4, il nexiste pas dutilisateur moyen et il serait illusoire de vouloir se mettre la place de lutilisateur, et pourtant cest ce que semble proposer la mthode des personas. Cest dailleurs la raison pour laquelle elle est souvent mal comprise. En fait, les personas sont construits sur la base dune tude prcise des objectifs et des motivations de la population vise par lapplication. Cette tude ethnographique va permettre dlaborer plusieurs archtypes dutilisateurs appels personas. Les personas ne correspondent pas des profils dutilisateur ou une

218

7. Mthodes de conception des interfaces

segmentation marketing, ils rsultent de la synthse des donnes collectes dans une phase de recherche initiale. Les personas constituent donc une modlisation fiable des utilisateurs finaux car ils sappuient sur des donnes concrtes issues dune tude prcise de la population cible. Construire les personas partir de donnes comportementales concrtes. La construction des personas se fait en deux tapes : dans un premier temps, une srie dinterviews auprs dun panel dutilisateurs vise collecter un ensemble de donnes constitutives des futurs personas, cest la phase dite de recherche [Cooper 03], puis une seconde tape dagrgation de ces donnes permet de construire les personas proprement dits. La phase de recherche consiste conduire des entretiens auprs dun panel de six huit utilisateurs du cur de cible. Les entretiens sont conduits selon la mthode de lenqute contextuelle [Baccino 05]. Linterviewer se place en position dapprenti et cherche comprendre comment lutilisateur ralise la tche sur lapplication considre. Il alterne des observations afin de recueillir des informations sur le contexte dans lequel la tche est ralise, avec des questions par lesquelles il cherche identifier les objectifs et les motivations de lutilisateur. Chaque interview dure 1 2 heures et se droule sur le lieu de travail de lutilisateur. Dans le cadre de cette mthode, linterview vise dcouvrir les objectifs et les motivations des utilisateurs de lapplication. Les donnes ethnographiques ainsi recueillies serviront ensuite construire les personas. Afin dorienter les entretiens, on formule dans un premier temps une hypothse sur le profil des utilisateurs de lapplication, et par l mme sur les personas (persona hypothesis [Cooper 03]). La phase de recherche est construite de manire recueillir des donnes par rapport cet ensemble de caractristiques. Les caractristiques des utilisateurs sont variables selon lapplication, mais elles recouvrent en gnral les points suivants : Le type dutilisateur : ge, genre, profession, catgorie socioprofessionnelle, etc. Leurs besoins ou leur motivation vis--vis de lapplication. Les critres de choix. La faon de se servir de lapplication. Lexpertise du domaine. Lhypothse du persona est labore en relation avec les quipes marketing sur la base de la segmentation de la population cible et des spcificits de lapplication. Dans cette tape, il est important didentifier des caractristiques claire-

7.4 Conception 219

ment distinctes pour lesquelles il est possible de dfinir une chelle de valeurs selon les utilisateurs. Cet ensemble de caractristiques va servir de ligne directrice aux interviews. Lobjectif est, au final, de pouvoir positionner chacune des personnes interviewes au regard des diffrentes caractristiques tudies. Une fois la phase de recherche termine, la construction de personas proprement dit peut commencer. Il convient, dans un premier temps, de vrifier que lhypothse des personas est valide au regard des donnes rcoltes. Si des lments comportementaux nouveaux ou bien des caractristiques spcifiques des utilisateurs sont apparus au cours des interviews, lensemble des caractristiques initiales est modifi et des interviews complmentaires doivent ventuellement tre effectues afin dobtenir les donnes manquantes. Les personas sont un modle comportemental de lutilisateur final. Cest pourquoi, les variables comportementales doivent tre isoles des autres variables analyses lors des interviews, en particulier les variables dmographiques (ge, exprience du domaine, lieu dhabitation, etc.). Pour une application informatique, une vingtaine de variables comportementales sont gnralement rcoltes [Cooper 03]. Le profil de chaque personne interviewe est ensuite positionn au regard des variables comportementales. Par exemple, pour un site de commerce en ligne, trois variables comportementales ont t identifies dans le choix des internautes : les fonctionnalits offertes par le produit, la rputation de la marque et le prix de larticle. Les diffrentes personnes interviewes sont donc positionnes sur trois axes selon limportance de leurs critres de choix respectifs. Le tableau ainsi construit fait apparatre des groupes dutilisateurs prsentant des comportements similaires. Un ensemble de personnes prsentant des ressemblances sur six huit variables diffrentes constitue la base dun persona. Dcrire les personas comme des tres humains. Il reste ensuite synthtiser les personas identifis par une fiche sur laquelle sont dcrites les principales variables comportementales qui les caractrisent. Les objectifs des personas au regard de lapplication, tels quils ont t recueillis lors de lentretien, sont galement prciss sur cette fiche. ce stade, A. Cooper insiste sur limportance de donner un nom aux personas, afin de les humaniser et ainsi dattirer lempathie de lquipe projet. Pour illustrer et concrtiser le persona, une histoire dune ou deux pages est rdige afin de dcrire, en langage simple, la faon dont le persona se sert du produit. Cette description sappuie sur des lments concrets issus des interviews.

220

7. Mthodes de conception des interfaces

Pour construire un persona raliste, il est essentiel de sappuyer sur des faits rels et de ne rien inventer. partir des caractristiques comportementales de chaque persona, des objectifs dutilisation sont identifis. Ces objectifs sont un lment dterminant du caractre du persona et donc de son attitude vis--vis de linterface. En effet, linterface sera facile utiliser ds lors quelle rpond aux objectifs de lutilisateur. titre dexemple, pour un site de commerce en ligne, lobjectif principal du persona peut tre de trouver le produit qui propose le plus de fonctionnalit, tandis quun autre recherchera le produit le moins cher. Les diffrents personas identifis sont ensuite prioriss afin didentifier le persona primaire qui va tre celui pour lequel linterface est conue, les autres personas sont qualifis de secondaires. Le persona primaire doit tre compltement satisfait par linterface propose sans pour autant que cela soit en contradiction avec les attentes des autres personas. Au contraire, les personas secondaires se satisferont de linterface bien quelle ne rponde pas exactement leur attente. Par exemple, pour un systme de navigation GPS, deux personas ont t identifis : Le conducteur fru de technologie qui lutilisera galement pour couter des MP3. Le livreur professionnel, internaute occasionnel, qui sen sert pour son travail. Le persona primaire est ici le livreur car si linterface est adapte son profil, elle sera galement utilisable par le conducteur technophile, tandis que linverse nest pas vrai. Il ne peut y avoir quun seul persona primaire par produit. Si ce nest pas le cas, il faudra prvoir diffrentes interfaces adaptes chaque persona. Le persona primaire va donc tre la cible principale du processus de conception. Le persona sert dutilisateur de rfrence tout au long du projet. Une fois construits, les personas servent de rfrence lquipe projet tout au long de la conception de linterface. Appliquer la mthode des personas permet de changer la vision de lquipe projet. Le but du projet nest plus de dfinir une interface qui permette daccder un ensemble de fonctionnalits techniques, mais au contraire, de permettre une personne (le persona) de se servir de ces fonctionnalits dans le cadre de sa vie de tous les jours. chaque tape de la conception, les membres de lquipe pourront se rfrer aux personas pour vrifier

7.4 Conception 221

leurs hypothses. Les personas permettent lquipe dvaluer linterface ralise en se mettant leur place, en adoptant leur profil comportemental, et en analysant la faon dont ils percevraient et utiliseraient linterface.

7.4.2 Tri par carte

Le tri par carte est une mthode conue pour construire larchitecture de linformation dune application informatique : arborescence des rubriques dun site web, structure des menus ou organisation des fonctionnalits dun logiciel. Lapplication de cette mthode aux sites internet a t prsente au chapitre 4. Le tri par carte est mis en uvre au dbut de la phase de conception car il permet de construire la structure de base sur laquelle sappuie linterface la fois en termes dorganisation et de terminologie. lidentique des autres mthodes prsentes dans ce chapitre, les utilisateurs qui participent aux sances de tri par carte doivent constituer un panel reprsentatif du cur de cible selon des critres propres lapplication, gnralement de nature dmographique : ge, catgorie socioprofessionnelle, exprience du domaine, etc. Tri individuel ou collectif Le tri par carte peut tre conduit individuellement, le participant est seul avec lanimateur, ou en groupe, plusieurs utilisateurs participent la sance sous la conduite dun ergonome. Des tris individuels fournissent des rsultats plus riches et plus prcis quun tri collectif qui peut tre biais par leffet de groupe. Cependant, en veillant ce que tous les participants sexpriment naturellement, les rsultats dun tri en groupe sont quasiment similaires ceux obtenus par une srie de tris individuels. Lintrt de mener le tri en groupe est daboutir des rsultats plus rapidement car les sessions sont moins nombreuses. En individuel, huit dix sessions de tri sont habituellement ralises lorsque le panel utilisateur prsente des profils relativement homognes. En choisissant la mthode du tri collectif avec le mme panel, deux trois sessions suffiront. Notons que pour une sance de tri collectif, il est prfrable que le groupe ne dpasse pas cinq participants car au-del il est difficile tous de participer. Prparation du tri par carte Comme son nom lindique, le tri par carte requiert un ensemble de cartes reprsentant les informations organiser. Chaque carte, de la taille dune grande carte de visite environ, symbolise une information prsente dans le site ou un module fonctionnel du logiciel.

222

7. Mthodes de conception des interfaces

Le titre de la carte est compos dun ou deux mots-cls dsignant linformation. En se limitant un ou deux mots-cls, le titre sera plus rapide lire et plus simple comprendre. Par ailleurs, sa taille tant limite, il pourra tre plus facilement utilis dans les menus de navigation du site ou du logiciel. Sous le titre, une ou deux phrases dcrivent plus en dtail linformation en question. Ce texte descriptif doit tre rdig avec soin afin de ne pas induire de regroupement lorsquil est lu par les participants. ventuellement, dans certains cas, il peut tre intressant daccompagner le texte dune image, par exemple celle du produit concern lorsquil sagit dun site de commerce. Protocole Un tri par carte est ralis en trois tapes : validation des libells, groupement et dnomination des groupes. Aprs avoir prsent les objectifs de la sance, lanimateur distribue alatoirement les cartes sur la table. Il est parfois pratique de disposer les cartes en pile, en particulier lorsque le nombre de cartes est important. Dans un premier temps, il est demand aux participants de relire chacune des cartes et de vrifier que le titre qui leur a t attribu leur parat cohrent avec le contenu tel quil est prsent dans le texte descriptif situ en dessous. Si ce nest pas le cas, les participants peuvent modifier le titre de la carte en employant un libell qui leur semble mieux adapt. Seconde tape, lanimateur demande aux participants de regrouper les cartes qui se ressemblent . Il leur demande de construire des familles . Des cartes vierges sont laisses disposition afin quventuellement certains contenus puissent figurer dans plusieurs groupes. Dans ce cas, au moment de la conception de linterface, une navigation transversale sera propose entre les rubriques. Finalement, les participants donnent un nom chacun des groupes quils viennent de construire. ventuellement, ils peuvent galement dcider de regrouper certains groupes pour former un groupe de groupes auquel il donne galement un nom. Au cours de la sance, lanimateur reste le plus neutre possible et incite les sujets verbaliser : Pourquoi avez-vous mis ces cartes ici ? En quoi se ressemblentelles ? . Les rponses des utilisateurs vont lui permettre de mieux comprendre le modle mental quils se construisent de lapplication. Lanalyse des rsultats du tri par carte consiste identifier les regroupements les plus frquents effectus par les utilisateurs. Pour cela, des logiciels permettent de raliser un traitement statistique partir des diffrentes arborescences issues des sances de tri. Cependant le tri par carte est une mthode qualitative ralise sur un petit nombre dutilisateurs. Le rsultat du tri ne peut donc pas sappuyer

7.4 Conception 223

uniquement sur une analyse statistique. Les logiciels danalyse doivent aider lorganisation des informations, mais larchitecture rsultant du tri doit galement sappuyer sur les observations ralises lors des sances de tri. Cest pourquoi il est important dassister directement aux sances de tri. La mthode que nous venons de prsenter prcdemment est appele tri ouvert ou tri montant car il part du contenu pour constituer des groupes. Le tri peut tre conduit de manire inverse, en proposant une arborescence prdfinie, au sein de laquelle les participants doivent placer les cartes prsentes. Cette seconde mthode de tri est appele tri ferm . Elle est gnralement employe pour valider une arborescence issue dun tri ouvert . Il est intressant de combiner les techniques de tri ouvert et de tri ferm pour trier progressivement un grand nombre de cartes. En effet, il est difficile de conduire une sance de tri avec plus de 100 cartes. Dans ce cas, il est prfrable de procder par tapes en construisant a priori des groupes de premier niveau qui seront valids par un tri ferm, puis en conduisant des tris ouverts pour chacun des groupes, de manire limiter le nombre de cartes traiter chaque fois. Le tri par carte est une garantie de trouvabilit . Le tri par carte est la mthode la plus efficace pour construire une organisation du contenu de lapplication dans laquelle lutilisateur retrouve facilement les informations quil cherche. Certains auteurs qualifient cette caractristique de trouvabilit (traduction littrale de langlais : findability). Les tests que nous avons conduits sur des sites construits partir dun tri par carte, confirment cette qualit de la mthode. Les sites ainsi raliss sont particulirement bien compris des utilisateurs et trs peu de problmes de navigation sont observs. Lintrt du tri par carte nest pas seulement didentifier la manire dont les utilisateurs vont organiser le contenu informatif de lapplication. Sappuyant uniquement sur une reprsentation textuelle de linterface, il permet aussi de se focaliser directement sur la reprsentation mentale que les utilisateurs se font de lapplication. De ce fait, le tri par carte est un excellent moyen pour dfinir le langage de linterface. Il garantit que linterface parle le langage de lutilisateur et permet ainsi de faciliter notablement lutilisation de lapplication.

7.4.3 Maquettage / prototypage

Le maquettage / prototypage consiste concevoir des versions intermdiaires de linterface avant de finaliser les spcifications qui serviront de base au dveloppement du produit final. Chaque version intermdiaire est value du point de

224

7. Mthodes de conception des interfaces

vue ergonomique en sappuyant sur les diffrentes mthodes prsentes dans ce chapitre. Le maquettage / prototypage sinscrit dans une dmarche conception itrative de linterface. Il vise amliorer progressivement linterface en sappuyant sur lanalyse du comportement des utilisateurs finaux lorsquils se servent de lapplication. Dans le domaine des interfaces, les termes de maquette et de prototype sont indiffremment employs pour dsigner des versions prliminaires de linterface. La distinction entre les deux est lie leur degr de prennit. La maquette est une version jetable de linterface, tandis que le prototype a t dvelopp sur la mme base logicielle que le produit final. Le prototype est la premire version du logiciel tandis que la maquette est gnralement statique et na pas t conue avec des outils de dveloppement. Conduire le prototypage sans impacter sur les dlais de dveloppement. Les quipes de dveloppement sont gnralement peu disposes mettre en uvre une phase de prototypage pour concevoir linterface, car elles craignent de devoir en attendre la fin pour dmarrer effectivement le dveloppement, rallongeant dautant le planning du projet. Cette crainte est amplifie par le fait que la conception de linterface est gnralement aborde tardivement. Des itrations trop longues lors du prototypage risquent dimpacter la date de livraison de lapplication cest--dire la date finale du projet. Il est essentiel de pouvoir intgrer la phase de prototypage le plus tt possible dans le planning du projet sans quelle constitue un point de blocage par rapport aux autres tches. Le prototypage doit tre conduit en parallle du reste du projet et ne pas tre considr comme une tche part. Pour ce faire, il est possible de jouer sur la fidlit de la maquette, cest--dire sa ressemblance par rapport linterface finale en termes dinteractivit et de graphisme. Les premires maquettes, conues au dbut du projet, sont statiques (aucun degr dinteractivit) et pures. Puis, progressivement, au fur et mesure des itrations, la maquette se rapproche de linterface finale la fois en termes dinteraction et de graphisme. Au dbut du projet, le premier prototype de linterface est une maquette fil de fer (wireframe) prsentant les principaux lments textuels de linterface : libells des boutons, contenu des fentres, libells des rubriques de la barre de navigation pour un site web. Lagencement de lcran est dfini, mais le graphisme na pas t travaill. La maquette est gnralement en noir et blanc.

7.4 Conception 225

Figure 7.3 Une maquette l de fer prsente, de manire pure, lensemble du contenu de linterface. Elle peut servir de support un test utilisateur an de valider la comprhension et la visibilit de diffrentes zones de lcran.

Cette premire maquette nautorise aucune interaction. Cest une maquette statique, parfois ralise directement sur papier. Ce type de maquette prsente lintrt de pouvoir tre construite rapidement et de servir de support une premire phase dvaluation avec les utilisateurs. Une maquette statique permet de vrifier la comprhension des libells utiliss, lagencement des crans et la lisibilit de chaque zone de linterface. Lors de litration suivante, la maquette pourra prsenter un graphisme plus proche du produit final ou bien des capacits dinteraction plus riches. Au fur et mesure du dveloppement, de nouvelles fonctionnalits sont intgres dans un prototype qui sert de base des tests utilisateurs. Jouant sur les deux dimensions : graphisme et interaction, la fidlit de la maquette augmente chaque itration permettant de raliser des tests de plus en plus ralistes. Degrs de prototypage [Nielsen 93] distingue deux degrs de prototypage selon le niveau dinteractivit offert par le prototype : Le prototype horizontal correspond uniquement la partie graphique de linterface, cest une maquette statique.

226

7. Mthodes de conception des interfaces

Le prototype vertical met en uvre certaines des fonctionnalits de lapplication afin que lutilisateur puisse raliser compltement une tche significative de lapplication. Le prototype horizontal prsente la surface de linterface. Les fonctionnalits de lapplication ne sont pas implmentes, seuls les lments de linterface sont prsents : boutons, menus, champs de saisie, etc.

Figure 7.4 Les prototypes sont construits au fur et mesure du dveloppement. Tout dabord, un prototype horizontal, en fait la partie visible de lapplication, permet de vrier que linterface est facile comprendre (test de perception). Ensuite, un prototype vertical, sur lequel certaines fonctionnalits ont t implmentes, est test en situation dutilisation (test utilisateur). [Nielsen 93]

Les versions suivantes du prototype sont du type vertical . Un prototype vertical correspond la mise en uvre dun ensemble cohrent de fonctionnalits, certaines dentre elles pouvant tre simules par programme afin que lutilisateur puisse drouler un scnario dutilisation typique du logiciel. Les prototypes verticaux sont conus en parallle du dveloppement et intgrent progressivement les nouvelles fonctionnalits de lapplication. Ils servent de support des tests utilisateurs qui permettent damliorer graduellement linterface. Sur la base des rsultats du test, des solutions sont labores et mises en uvre dans la version suivante du prototype qui va faire lobjet dune nouvelle srie de tests, et ainsi de suite. En rgle gnrale, les problmes dutilisabilit diminuant chaque itration, trois phases de prototypage permettent de lever la plupart des problmes.

7.4 Conception 227

Zoning et pistes graphiques Pour un site web, une premire forme de maquette statique consiste dfinir le zoning des crans, cest--dire le dcoupage des pages du site. Pour chaque type de page (page daccueil, page intrieure, chapeau de rubrique, etc.) le concepteur identifie les diffrentes zones de la page. Il prcise le rle et le contenu de chaque zone, positionne les zones sur page et dfinit leur taille relative ainsi que leur importance visuelle. Le zoning sert de base au travail du graphiste. Ce dernier habille les diffrentes zones de lcran ainsi dfinies en fonction de lidentit visuelle du produit. Des maquettes peuvent tre ensuite directement ralises partir des images cres par le graphiste. Des liens sont placs sur certaines parties de limage afin de permettre de naviguer entre les crans et donc de vrifier lergonomie du systme de navigation propos.

Figure 7.5 Une maquette ralise partir des pistes graphiques permet de valider la navigation dans linterface et la comprhension des intituls des principales rubriques (ici le portail intranet de la Caisse centrale de rassurance conu selon une dmarche ergonomique).

228

7. Mthodes de conception des interfaces

Story-board Les story-boards constituent une forme de maquettage intermdiaire entre le prototype statique et le prototype dynamique, ou fonctionnel. Un story-board est une srie dcrans statiques reprsentant exactement les diffrents tats de linterface dans le cadre dune utilisation donne. Diffrents story-boards sont gnralement conus pour modliser linterface sur la base des scnarios dutilisation typique de lapplication. Maquettage papier Le maquettage papier est probablement la technique la moins coteuse et la plus rapide pour raliser un prototype. Cependant, elle est peu utilise car linterface est juge trop loigne du produit final. Toutefois, des tests sur des maquettes papier peuvent permettre didentifier un bon nombre des problmes dutilisabilit de la future application et de valider efficacement le langage de linterface. Qui plus est, les utilisateurs seront plus enclins critiquer une maquette papier, qui leur semble avoir demand moins de travail, quun prototype raliste, proche du produit final. De mme, comme lindique [Baccino 05], les quipes de dveloppement seront moins portes modifier un prototype finalis dans lequel elles ont investi un effort de travail notable. Au contraire, elles nhsiteront pas modifier un prototype papier qui na rien cot. Cest pourquoi, le prototypage papier est considr par de nombreux auteurs comme lune des mthodes de maquettage les plus rentables. Toutefois, le maquettage papier a ses limites, en particulier le fait que la maquette ne soit pas lchelle de linterface finale, cest--dire quelle ne tienne pas compte de la taille relle de lcran, peut poser des problmes au moment du dveloppement. Pour fournir une base solide aux quipes de dveloppement, qui puisse servir de spcification de linterface finale, il faudra construire une maquette raliste lchelle exacte du produit final. De plus, lors des tests, le ralisme de la maquette est essentiel car il permet lutilisateur de mieux sapproprier lapplication. Cest pourquoi, dans la mesure du possible, il est prfrable dviter du faux texte (lorem ipsum, etc.) au profit du vritable contenu de linterface. La maquette sert de rfrence tous les acteurs du projet. Le maquettage / prototypage est la mthode de base pour la conception des interfaces. La maquette prsente lintrt de matrialiser linterface et par l mme le logiciel ou le site web. Elle va servir de rfrence aux diffrents acteurs du projet qui, par ce biais, vont saccorder sur un langage commun [Baccino 05].

7.5 valuation ergonomique

229

La maquette peut galement servir la promotion commerciale du produit et tre utilise des fins de dmonstration par les quipes commerciales avant le lancement officiel du produit.

7.5

VALUATION ERGONOMIQUE
Les mthodes dvaluation vont permettre de mesurer lergonomie de lapplication afin didentifier les points amliorer en particulier entre deux itrations de la maquette. Nous prsentons ici les deux mthodes les plus frquemment employes : laudit ergonomique qui consiste analyser linterface au regard dun ensemble de critres ergonomiques reconnus et le test utilisateur o lutilisateur est plac en situation raliste dutilisation afin didentifier les difficults quil rencontre.

7.5.1 Audit ergonomique

Laudit ergonomique consiste valuer les points forts et les points faibles dune interface au regard des rgles dergonomie. Il permet de mettre en exergue rapidement les difficults que rencontrera lutilisateur du produit, ainsi que les facilits offertes par lapplication en termes dergonomie. Laudit peut tre ralis diffrentes phases du projet. Lorsquil sagit de la refonte dune application existante, laudit est gnralement la premire tape, voire llment dclencheur, du projet. Pour la cration dune nouvelle application, laudit permet dvaluer les premires maquettes ralises. Laudit peut porter sur le produit fini ou sur une maquette de linterface. Il est parfois intressant dintroduire une phase daudit ergonomique chaque tape cl du projet, par exemple pour un site web, la livraison des pistes graphiques puis pour celles des story-boards et finalement la livraison de la maquette du site. Sur des projets denvergure, laudit est parfois intgr la phase de recette des modules de lapplication. Il permet de valider que lergonomie de chaque partie de lapplication est cohrente avec celle de lensemble du systme. Contrairement aux autres mthodes prsentes ici, laudit ergonomique ne fait pas appel aux utilisateurs finaux. Il est ralis directement par un ou plusieurs experts en ergonomie qui sappuient sur leur exprience et sur les principes dergonomie des interfaces pour valuer lutilisabilit de lapplication. Le temps de prparation tant moins important, cette mthode permet dobtenir rapidement des rsultats. Par contre, elle se prive des retours concrets issus de lexprience relle des utilisateurs finaux. En effet, certains problmes,

230

7. Mthodes de conception des interfaces

lis au contexte dutilisation de lapplication ou la tche ralise par les utilisateurs, sont plus difficiles reprer par une analyse de lextrieur . Pour pallier aux limites du mode opratoire et la subjectivit de lvaluateur, il est prconis que plusieurs experts conduisent laudit (trois cinq selon [Baccino 05]), puis confrontent leurs analyses. Toutefois, ce type dvaluation croise est gnralement difficilement compatible avec le budget allou la phase daudit. Cest pourquoi laudit est plus frquemment conduit par une seule personne et revu ensuite par un autre expert du domaine. ventuellement, il peut tre intressant pour des applications professionnelles en particulier que laudit soit revu par un expert du domaine applicatif qui apportera un clairage mtier sur les points identifis lors de laudit. Laudit ergonomique consiste passer en revue chacun des lments de linterface afin de vrifier quils respectent un ensemble de rgles et de principes dergonomie. Il existe des grilles gnriques dvaluation ergonomique, telle que celle dveloppe luniversit de Purdue [Lin 97] ou celle propose par [Scapin 86], voire la grille construite sur la base de la norme ISO 9241 [Gediga 99]. Toutefois la plupart du temps, lvaluateur construit sa propre grille en prenant en compte la fois les critres ergonomiques, les spcificits de lapplication et le profil de lutilisateur. Ainsi, des grilles spcifiques ont t dveloppes dans le domaine de la navigation arienne [Cardosi 96]. Le dnominateur commun toutes les grilles dinspection est lensemble des critres ergonomiques prsent en annexe [Scapin et Bastien 97].

Figure 7.6 Lors dune valuation par inspection, chaque lment de linterface est analys au regard dune grille de critres ergonomiques.

Une grille simplifie, du type de celle prsente ci-aprs, inspire de [Nielsen 93], peut galement tre employe.

7.5 valuation ergonomique

231

Le dialogue est-il simple ? Le langage utilis est-il celui de lutilisateur ? Le travail de mmorisation est-il minimal ? La prsentation et le dialogue sont-ils cohrents ? Les retours sont-ils visibles ? Les sorties sont-elles explicites ? Existe-t-il des raccourcis ? Les messages derreur sont-ils explicites ? Les erreurs sont-elles vites ? Existe-t-il une aide ? Le logiciel est-il document ?

Figure 7.7 Cette grille dinspection simplie, inspire de [Nielsen 93], permet didentier les principaux problmes dutilisabilit.

Protocole La mthode consiste examiner linterface en suivant les parcours prvisibles de lutilisateur sur lapplication. Aprs avoir recueilli des informations sur le profil et les objectifs des utilisateurs de lapplication. Lvaluateur veille raliser le plus prcisment possible les tches demandes lutilisateur en intgrant au mieux les diffrentes contraintes lies cette tche. Pour chaque problme identifi, lvaluateur sappuie sur les rgles ergonomiques pour en dduire les consquences du point de vue de lutilisateur. Les rsultats de laudit sont ensuite prioriss au regard de leur impact pour lutilisateur final. Un problme est qualifi de bloquant lorsquil empche lutilisateur de raliser la tche ou quil le contraint abandonner. Il est gnant lorsquil est source dune perte de temps et simplement ennuyant, ou mineur, sil sagit dun lment de confort qui na pas dincidence sur la tche proprement dite. Dautres facteurs doivent galement tre pris en compte dans la priorit que lon accorde aux diffrents problmes, en particulier la frquence du dfaut : une difficult qui napparat quune seule fois est moins gnante que si elle apparat sur toutes les fentres de lapplication. Lobjectif de laudit est didentifier les problmes et danalyser leur nature. ce stade, il ne sagit pas de proposer des solutions. ventuellement, des recommandations gnrales pourront tre fournies, mais elles devront tre confrontes lapprciation des utilisateurs et aux choix techniques du projet. Gnralement, la recherche de solutions est initie lors de la prsentation des rsultats de laudit.

232

7. Mthodes de conception des interfaces

Laudit : premire tape dune dmarche ergonomique. Laudit ergonomique est frquemment le point de dmarrage dune dmarche de conception oriente utilisateur. Il permet didentifier les problmes dutilisabilit et leur associer des niveaux de gravit. Laudit fournit des lments tangibles pour prioriser les diffrentes phases de conception de linterface. Il permet de dgrossir le travail de conception en identifiant les points cls de lapplication en termes dergonomie. Il ne remplace pas un test utilisateur, mais lui permet dtre plus efficace, car mieux prpar.

7.5.2 Test utilisateur

Le test utilisateur, appel aussi test dutilisabilit , [Nielsen 93] est la mthode la plus efficace pour valuer lergonomie dune application. Il permet dobserver directement la faon dont lutilisateur se sert dune application et ainsi identifier concrtement les vritables difficults quil rencontre. Il fournit un moyen oprationnel pour rpondre concrtement aux questions qui se posent lors de la conception de linterface. Le test utilisateur est parfois ralis au dmarrage du projet en particulier dans le cadre de la refonte dune application. Toutefois, il est plus efficace de conduire le test sur une maquette intermdiaire afin dobtenir des retours sur les choix de conception qui ont t effectus. Des tests sur des maquettes papier non finalises (voir prcdemment) permettent de valider rapidement certaines parties de linterface. Il nest pas ncessaire de disposer de la version finale de lapplication pour conduire un test utilisateur. La nature des tests et des scnarios dvaluation dpend du niveau dinteractivit de la maquette. Sur une maquette statique, le test, dit de perception , portera sur la comprhension et la visibilit des zones de lcran. Ensuite, une maquette semi-fonctionnelle permet de conduire plusieurs scnarios prdfinis et donc de valider la navigation dans linterface. Finalement, une maquette fonctionnelle, prsentant une partie significative des fonctionnalits de lapplication, offre une plus grande libert de navigation lutilisateur et permet une exploration libre du logiciel ou du site. Protocole La qualit dun test utilisateur dpend en grande partie de la rigueur avec laquelle le protocole de test est labor. En apparence, un test utilisateur peut sembler simple construire : il suffit de demander aux utilisateurs de se servir du produit comme ils le feraient sils taient seuls et de leur demander ce quils en pensent ... Toutefois, en procdant de cette manire, il y a de fortes chances que lon obtienne

7.5 valuation ergonomique

233

des rsultats htrognes sur lesquels il ne sera pas possible de sappuyer pour identifier concrtement la manire damliorer linterface. Cest pourquoi, il est essentiel de construire un protocole de test prcis afin de pouvoir gnraliser les rsultats lensemble de la population vise et minimiser les risques dans les dveloppements qui vont tre planifis suite au test. Un protocole de test rigoureux ncessite : Une dfinition claire des objectifs du test et des hypothses qui en dcoulent. Lidentification des mesures permettant de vrifier ces hypothses. Ces mesures seront ralises dans le cadre dun scnario qui place lutilisateur en situation cologique. La participation dun panel dutilisateurs suffisamment reprsentatif de la population vise la fois en nombre et en profil. La mthode du test est directement drive des mthodes dexprimentation scientifiques. Elle vise mettre en uvre un protocole permettant de prendre des mesures objectives qui vont servir valider une ou plusieurs hypothses nonces initialement. La norme [ISO 9241-11] dfinit lutilisabilit de la manire suivante. Un systme est utilisable lorsquil permet lutilisateur de raliser sa tche avec efficacit, efficience et satisfaction dans le contexte dutilisation spcifi. En dautres termes, on considre quune application est utilisable lorsque lutilisateur peut raliser sa tche (efficacit), quil consomme un minimum de ressources pour le faire (efficience) et que le systme est agrable utiliser (satisfaction). Tester lutilisabilit consiste donc valider ces trois critres : Les objectifs viss par lutilisateur sont atteints (efficacit). Les ressources ncessaires pour atteindre ces objectifs (efficience) sont minimales (pour cela on mesure gnralement le temps mis pour raliser la tche). Le systme est agrable utiliser (satisfaction).

234

7. Mthodes de conception des interfaces

Objectifs du test

quipe projet

Scnario

Ralisation de la maquette

Panel utilisateur

Recrutement des utilisateurs

Script

Test

Utilisateurs

Rsultats

quipe projet

Figure 7.8 Les tapes du test utilisateur.

Objectifs et hypothses Dans un premier temps, les objectifs du test sont dfinis avec lquipe projet en fonction de la nature de linterface, du type de tche demande et des questions souleves par lquipe en charge de la conception. Pour chaque objectif, lvaluateur identifie une ou plusieurs hypothses associes. Gnralement, lhypothse consiste supposer que linterface qui va tre teste rpond correctement lobjectif. Ensuite, il identifie et prpare les mesures qui vont permettre de vrifier cette hypothse. Les mesures sont des questions ou des actions ralises par lutilisateur. Selon la rponse ces questions ou selon la russite de laction identifie, lhypothse est valide ou non. Sur une application, les mesures gnralement ralises concernent : la russite de la tche, le temps de ralisation de la tche, le nombre derreur, le nombre de clics, etc.

7.5 valuation ergonomique

235

Exemple : Test dun logiciel pour centre dappel Objectif : valuer lutilisabilit de la fentre principale de lapplication. Hypothse : La fentre principale permet de raliser les taches les plus frquentes du tlconseiller. Mesures : Russite des tches de changement dadresse et de vrification du fonctionnement de lappareil du client (ces deux tches ont t identifies comme les plus frquentes). Temps de ralisation des deux tches. Satisfaction des utilisateurs (note sur une chelle de 1 5).

Figure 7.9 Dnition des objectifs, hypothses et mesures correspondantes.

Scnario Le test consiste placer lutilisateur dans une situation dite cologique , la plus proche possible de lutilisation relle de lapplication. Les fonctionnalits ne sont donc pas testes individuellement comme cest le cas lors de la recette fonctionnelle dun logiciel, lutilisateur doit se servir de linterface dans le cadre dune tche relle. Il sagit donc de construire un scnario dutilisation qui permette de vrifier les hypothses identifies prcdemment. Ce scnario correspond gnralement une tche typique de lutilisateur. Il intgrera galement des lments spcifiques afin de vrifier certains points cls de linterface. Le scnario de test prcise les fonctionnalits attendues sur le prototype, en particulier les lments qui devront tre simuls dans la maquette afin den augmenter le ralisme ou bien de placer lutilisateur dans certaines conditions dutilisation particulire. Panel utilisateur En fonction des objectifs du test et des scnarios, une population dutilisateur cible est identifie. Le panel utilisateur participant au test doit tre globalement reprsentatif de la population cible. En gnral, il sagit des utilisateurs finaux de lapplication, mais il peut tre intressant dintgrer galement dans le panel des personnes qui ne connaissent pas lapplication (ils apporteront le point de vue des novices), voire des utilisateurs dun produit concurrent. [Nielsen 00] a montr que des tests mens avec cinq utilisateurs permettent de lever au moins 80 % des problmes dutilisabilit. En effet, il sagit dune

236

7. Mthodes de conception des interfaces

Exemple : Test dun logiciel pour centre dappel Scnario Traitement dun appel : Un client appelle pour indiquer un changement dadresse et des problmes techniques. Le tlconseiller doit afficher la fiche client, effectuer le changement dadresse, vrifier les rfrences du matriel et effectuer des tests de connexion. Fonctionnalits attendues du prototype : Fentre 'Fiche client' affichant un profil client cohrent avec rfrence du matriel ainsi quune liste dappels dans les mois prcdents. Fentre de changement dadresse. Simulation des tests de connexion.

Figure 7.10 Scnario de test.

Figure 7.11 Il suft de cinq utilisateurs pour dceler la plupart des problmes dutilisabilit [Nielsen 00].

valuation qualitative et les problmes dutilisabilit viennent du logiciel et non des utilisateurs. Toutefois, certaines tudes rcentes indiquent que cinq utilisateurs ne suffisent pas toujours pour obtenir une couverture significative de lapplication, il est prfrable de prvoir 10 20 utilisateurs par test [Baccino 05]. Pour ma part, je conseille de conduire les tests avec diffrents profils et cinq utilisateurs par profil. Dans ces conditions, des tests avec 12 16 utilisateurs permettent dobtenir des rsultats significatifs gnralisables lensemble de la population.

7.5 valuation ergonomique

237

Exemple : Test dun logiciel pour centre dappel Lenqute mene auprs des utilisateurs montre que ce sont en majorit des femmes, utilisant frquemment Internet, ayant moins dun an dexprience dans ce mtier Panel utilisateur (8 participants) : 6 femmes, 2 hommes se servent frquemment du web 6 ont moins dun an dexprience

Figure 7.12 Exemple : constitution du panel utilisateur.

Script Afin de conduire le test dans les mmes conditions avec tous les participants, un script va servir de guide lanimateur. Le script lui sert aussi de support de notes. Il dfinit prcisment la manire de conduire le test pour chaque participant. Le script prcise galement les artifices employs par lanimateur pour placer lutilisateur dans une situation raliste, comme des documents factices associs aux scnarios par exemple. Le script indique les consignes et les tches qui sont demandes au participant ainsi que les mesures raliser pour vrifier les hypothses initiales. Le script indique en particulier les questions poses aux participants (mesures subjectives) ainsi que les autres mesures effectues : russite de la tche, nombre derreurs, temps de saisie, etc. Il doit permettre lobservateur de noter les rponses et les donnes rcoltes directement. ventuellement, certaines valeurs chiffres

Exemple : Test dun logiciel pour centre dappel Consigne : Un client vous appelle : Bonjour, je mappelle P. Durand. Jai dmnag et je voulais vous donner ma nouvelle adresse. Ah oui, jai aussi des problmes de dconnexion quand je me connecte Telerama.com Observations : Lutilisateur russit-il trouver la fiche du client ? : Oui/Non Temps pour afficher la fiche client : Russit-il modifier ladresse ? : Oui/Non Temps pour modifier ladresse : Difficults rencontres par lutilisateur :

Figure 7.13 Script de test.

238

7. Mthodes de conception des interfaces

pourront tre saisies ultrieurement en visionnant le test si un enregistrement a t effectu. Pr-test Il est utile de conduire un test pilote ou pr-test qui va servir vrifier la cohrence et la faisabilit du protocole de test, ainsi que le bon fonctionnement du matriel (ordinateur, prototype, logiciel denregistrement, etc.). Le pr-test permet dvaluer le temps moyen mis par lutilisateur pour raliser le test. Gnralement, le pr-test est effectu avec une personne de lquipe projet, qui connat donc lapplication. Dans ce cas, il est prfrable de doubler le temps mis pour raliser le test afin destimer celui que mettra effectivement un utilisateur dcouvrant lapplication. Notons, quil arrive aussi que le premier test, avec un vritable utilisateur, serve parfois de pr-test et quil faille ajuster les consignes suite cette premire exprience. Conduire le test Le test est conduit dans un contexte le plus proche possible de lutilisation relle du logiciel. Sil sagit dune application professionnelle, le test est ralis, dans la mesure du possible, sur le lieu de travail des utilisateurs. Toutefois, pour un site web, les tests sont rarement raliss au domicile des internautes. Pour des raisons pratiques, il est plus simple de conduire le test dans un local ddi. Qui plus est, les salles de test disposent gnralement dune pice attenante spare par une glace sans tain depuis laquelle les membres de lquipe projet peuvent assister au test. Dans ce cas, il convient de prciser aux participants quils sont susceptibles dtre observs. Par contre, il est dconseill de chercher conduire le test depuis cette pice. Il est prfrable que lobservateur se tienne ct du participant, lgrement en retrait, afin dtablir une relation de confiance qui favorisera les changes et lobservation. Le test vise valuer le logiciel, pas lutilisateur. Il arrive, lors du test, que lutilisateur nose pas dire quil ne russit pas se servir du logiciel. Il prfre cacher ses difficults, rendant caduques les rsultats du test. Cest pourquoi il est important de mettre en confiance lutilisateur au dbut de la sance en lui rappelant que sil ne russit pas se servir de lapplication, cest quelle a t mal conue. Lobjectif du test est didentifier les problmes dutilisabilit et non de mesurer la capacit de lutilisateur se servir de lapplication.

7.5 valuation ergonomique

239

Laisser lutilisateur se tromper. Le principal intrt du test est dobserver lutilisateur dans le contexte rel dutilisation. Il est donc essentiel de ne pas laider, sauf bien entendu en cas dimpasse. En effet, afin didentifier clairement les problmes, il faut le laisser se dbrouiller comme il le fera quand il sera seul face au produit. Par contre, une fois la source de lerreur identifie, afin de mettre nouveau en confiance lutilisateur, il convient de le tranquilliser en lui indiquant que lerreur vient du produit et non de lui. Lobservateur doit rester le plus neutre possible afin de ne pas influencer les rponses et les actions de lutilisateur. Il ne doit pas donner son point de vue, ni le laisser paratre. Lobservateur doit au contraire sappliquer comprendre le point de vue de lutilisateur. Demander lutilisateur de verbaliser. Pendant le test, afin de comprendre le comportement de lutilisateur, lanimateur doit linciter verbaliser. Il pose des questions qui vont conduire le participant liciter ses processus mentaux : Que voulez-vous faire ? (objectifs) Comment faites-vous cela ? (mode opratoire) Que fait le logiciel ? Quattendiez-vous que le logiciel fasse ? (rponse attendue) Pourquoi a-t-il fait cela ? Que veut dire ce message ? (comprhension) Pour chaque participant, lanimateur conduit le test en suivant le script. Il note les erreurs commises, les incomprhensions, les impasses, tout vnement qui montre une difficult dans lutilisation du logiciel. Ces diffrentes observations peuvent faire lobjet, une fois le test termin, dune analyse chaud avec lutilisateur afin de mieux comprendre les causes des problmes. Des solutions originales naissent parfois de ces changes. Dure du test Les tests durent 1h00 1h30 environ, selon le type dapplication. Au-del, lattention du participant, tout comme celle de lanimateur, diminue et les changes sont de moindre qualit. Une mme sance comporte gnralement plusieurs scnarios. Chaque scnario dure entre 15 et 30 minutes. Le premier scnario correspond une consigne simple qui permet lutilisateur dapprhender le logiciel et de se mettre en confiance. Les consignes suivantes sont gnralement plus complexes.

240

7. Mthodes de conception des interfaces

Tester la comprhension Pour vrifier la comprhension dune page dun site web ou dune fentre dun logiciel, il est intressant de conduire au cours du test des tests locaux de perception (ce test est dcrit de faon plus dtaille section 4.6.1). Lorsquil arrive sur la page ou la fentre en question, lutilisateur ne doit plus utiliser la souris et lobservateur lui demande dexpliquer comment il interprte lcran : ce que signifient les libells, les boutons, les liens, ce qui va se passer quand il va cliquer, etc.

Que permet de faire cette fentre ? O se trouvent les boutons / les menus ? Que signient-ils ? quoi servent-ils ? Que va-t-il se passer quand on clique sur ce bouton ? Quand on slectionne ce menu ? Pour une tche type, comment faire ?

Figure 7.14 Questions poser lors du test de perception

Ces questions permettent de vrifier si les libells sont correctement compris et si les zones importantes de lcran sont suffisamment mises en vidence aux yeux de lutilisateur. Rsultats du test Les diffrentes sances de test sont ensuite analyses. ventuellement, lanalyse peut sappuyer sur des enregistrements vido. Les diffrentes mesures prvues dans le protocole sont finalises et les rsultats des diffrents tests peuvent tre compars. Sur la base des mesures qui ont t ralises, il est donc possible de valider les hypothses initiales en sappuyant sur des donnes objectives (mesure dun temps, russite ou non dune tche, etc.) ou subjectives (rponses des questions). Le test permet ainsi de rpondre concrtement aux questions souleves initialement lors de la phase de prparation. Lanalyse du comportement des utilisateurs permet de comprendre la cause de difficults rencontres par les utilisateurs et de proposer des solutions pour les rsoudre. Par ailleurs, le test peut galement permettre didentifier dautres pistes damlioration de linterface qui ne faisaient pas lobjet de ltude initiale mais qui sont apparues en plaant lutilisateur en situation. Comme toute dmarche participative, le test est loccasion de recueillir les besoins et les attentes des utilisateurs vis--vis de lapplication. Les retours licits

7.6 Derniers conseils 241

Exemple : Test dun logiciel pour centre dappel Utilisabilit de la fentre principale de lapplication : La fentre principale ne permet pas de raliser facilement certaines tches. Seuls 2 participants ont russi lancer le test de connexion. Cause : Le libell du menu Ouvrir serveur FTP na pas t compris. Recommandation : Changer le libell par Tester la connexion .

Figure 7.15 Les rsultats du test.

en situation de test sont beaucoup plus pertinents que ceux qui seraient issus dune simple dmonstration de lapplication car ils sappuient sur des lments factuels et objectifs.

7.6

DERNIERS CONSEILS
Nous venons de le voir, la conception dune interface homme-machine ou dun site web ne se rsume pas lapplication de rgles dergonomie, cest aussi un processus de dveloppement sappuyant sur des itrations spcification-valuation. Cependant les quelques maximes suivantes permettront dviter de nombreux cueils [Nielsen 93]. Lenfer est pav de bonnes intentions. En tant que concepteur, il nous est difficile davoir le mme point de vue que lutilisateur. Cest en voulant bien faire, quon en fait trop et que les plus grosses erreurs sont commises. Lutilisateur a toujours raison. Lutilisateur connat le domaine et le contexte oprationnel dans lequel il se servira du logiciel. Ses souhaits sont gnralement justifis car ils rpondent des besoins oprationnels.

242

7. Mthodes de conception des interfaces

Lutilisateur na pas toujours raison. Pourtant dans certains cas, ce que lutilisateur pense tre bon pour lui, nest pas ce qui lui permettra dtre plus performant. Un test dutilisabilit permet gnralement de lui montrer la bonne voie. Lutilisateur nest pas le dveloppeur. Dans un projet, il est important que chacun fasse selon ses comptences ; cest aux quipes de dveloppement de prendre les dcisions informatiques et non aux utilisateurs. Le dveloppeur nest pas lutilisateur. Lquipe de dveloppement ne connat pas suffisamment le domaine applicatif et la tche pour se mettre la place de lutilisateur. Lorsque le concepteur pense la place de lutilisateur, il a de fortes chances de se tromper. Le PDG nest pas lutilisateur. Le PDG, bien quil soit client, nutilise gnralement pas le logiciel. Son point de vue na donc pas le mme poids que celui de lutilisateur final. Le mieux est lennemi du bien. En voulant bien faire, on a tendance en faire trop, offrir beaucoup plus de fonctionnalits que lutilisateur nen a rellement besoin. Cette profusion rend le logiciel complexe et difficile utiliser. Il est prfrable de faire simple et pertinent. Le dtail est essentiel. Un dtail nest jamais ngliger en termes dutilisabilit, car ce sont souvent de petits dtails, se rptant chaque utilisation du logiciel, qui empoisonnent la vie de lutilisateur. Laide nen est pas une. Lutilisateur se sert de laide parce quil ne comprend pas le fonctionnement du logiciel. Pour vritablement aider lutilisateur, il faut quil puisse se servir du logiciel sans utiliser laide.

243

Conclusion
En guise de conclusion, voici, telle que la raconte [Norman 98], lhistoire dune des plus brillantes russites techniques du dbut du sicle : le phonographe.

Le phonographe de Thomas Edison (1877).

En 1877, Thomas Edison invente le phonographe. Il est persuad que nous allons entrer dans lre du zro papier. Les gens utiliseront son invention pour senregistrer et ainsi ne plus tre contraints par les difficults de lorthographe. Il dcide donc de fabriquer des machines dicter. Or, lire un document est plus rapide qucouter un enregistrement. Cest aussi plus pratique : la lecture se fait son propre rythme, il est possible de souligner les passages cls, etc. Qui plus est, dicter peut tre une perturbation dans un bureau. Qu cela ne tienne, Edison est convaincu que les utilisateurs sadapteront son invention ! Pour obtenir la meilleure qualit denregistrement, il utilise des cylindres de cire. Sur le plan technique, cest une prouesse. Mais la cire est fragile, les cylindres sont encombrants, dlicats fabriquer, tiqueter et leur dure denregistrement est rapidement limite par la longueur du cylindre Une dizaine dannes plus tard, le bilan commercial est catastrophique : les phonographes cylindre ne se vendent pas.

244

Conclusion

De son ct, mile Berliner cre en 1890 la Victor Talking Machine Company. Il produit des disques prenregistrs et la machine pour les couter : le gramophone. Le gramophone deviendra le Victrola en 1907, un terme qui dsignera pendant plus de 50 ans les tourne-disques, Outre-Atlantique. Effectivement, les disques Victor se vendent beaucoup mieux que les phonographes dEdison, tout simplement parce que les consommateurs veulent avant tout couter de la musique. Voyant cela, Thomas Edison se lance lui-aussi dans la fabrication de disques en 1913. Ce qui importe cest la qualit du son, pense-t-il, obnubil par la performance technique. Aussi dcide-t-il denregistrer des artistes peu connus, donc moins coteux, dont il ne mentionne mme pas le nom sur ses disques ! Mais le public veut connatre celui dont il entend la voix. Une musique ce nest pas seulement une partition, cest aussi un tre humain, un chanteur ou un musicien qui donne une motion partager. Lorsque Edison la compris, il tait trop tard. Tous les grands artistes enregistraient dj chez Victor, et exclusivement chez Victor Thomas Edison ne gagnera pas un sou avec son invention, tandis que Victor Talking Machine Company deviendra plus tard RCA qui est encore lun des leaders du domaine. Le phonographe dEdison nous a appris que ce nest pas tant la prouesse technique qui fait le succs dun produit, mais bien son utilisabilit et le fait quil rponde un besoin social. Veillons ne pas commettre la mme erreur dans le domaine du linformatique.

245

Annexes

246

A. Ltre humain en situation de travail

A
Ltre humain en situation de travail
Sont prsents ici les principaux rsultats concernant ltude de lindividu en situation de travail. Ces travaux constituent le fondement thorique des recommandations qui ont t nonces dans le livre.

A.1

MODLE DU PROCESSEUR HUMAIN

Les principaux travaux dans le domaine de lergonomie du logiciel sappuient sur le modle du processeur humain [Card 83]. Cette modlisation est particulirement adapte la conception des interfaces homme-machine car elle reprsente ltre humain en phase de traitement des connaissances, ce qui est le propre de lutilisation dun logiciel (figure A.1). Le modle du processeur humain vise reprsenter ltre humain par analogie avec lordinateur. Il dcrit lindividu comme un systme prenant en entre des donnes, les stimuli perceptifs, effectuant des traitements et produisant des sorties, les actions motrices. Chaque opration est ralise par un systme indpendant. Ainsi, il est possible dtablir un parallle entre le modle du processeur humain et un systme informatique (figure A.2). Dans un premier temps, le systme perceptif traite les informations reues du monde extrieur. Les stimuli sont mmoriss dans les registres sensoriels sous forme analogique. ce stade, chaque sens est trait de manire indpendante. Le systme cognitif intgre les informations stockes dans les diffrents registres sensoriels et ralise les oprations, dites cognitives, de traitement des connaissances en

A.1 Modle du processeur humain 247

Figure A.1 Modle du processeur humain [Card 83].

Figure A.2 Un parallle peut tre fait entre le fonctionnement du processeur humain et celui dun logiciel.

248

A. Ltre humain en situation de travail

dclenchant, au besoin, la recherche dinformations en mmoire. Finalement, le systme moteur se charge de transcrire laction dcide par le sous-systme cognitif en stimuli musculaires.

Figure A.3 Architecture du processeur humain.

Cette dcomposition met en vidence deux types de mmoires : la mmoire court terme, o ont lieu les oprations cognitives, qui joue le rle de mmoire de travail, et la mmoire long terme qui sert au stockage des connaissances. La mmoire court terme est la pice matresse du processeur humain. Les oprations de traitement des connaissances y sont ralises, en particulier les processus de raisonnement, lapprentissage et la communication par le langage. Lunit de traitement de la mmoire court terme est appele le mnme. Un mnme est une quantit dinformation connue, familire traite par la mmoire court terme et caractrise par son unit. Un mnme peut correspondre un schma de pense plus ou moins complexe selon lindividu. Ainsi, la suite 42 78 35 peut tre faite de 6 mnnes ( 4 , 2 , 7 , 8 , 3 et 5 ) pour lenfant qui dbute la lecture, de 3 mnnes ( 42 , 78 et 35 ) ds lors quil a acquit la connaissance des nombres ou dun seul ( 42 78 35 ) sil sagit dun numro de tlphone, par exemple. Bien que le contenu smantique de chaque mnme varie dun individu lautre, la capacit de la mmoire court terme est une caractristique commune tous les tres humains : elle est de 7 2 mnmes. Ce rsultat nonc par [Miller 56] a t valid par de nombreuses expriences. Cependant, certains travaux rcents ont mis en vidence le fait quon ne se rappelle avec prcision que de 3 ou 4 mnmes et quil nest possible de se souvenir

A.2 Thorie de laction

249

de plus dinformations que lorsquelles ont un lien avec les prcdentes [Broadbent 75]. Ainsi, lorsque lon demande un individu de verbaliser rapidement un grand nombre de concepts connus, par exemple des villes ou des instruments de cuisine, il a tendance les regrouper par 2 ou 3.

Figure A.4 Structure de la mmoire court terme [Broadbent 75].

Ces diffrents lments tendent montrer que la mmoire court terme pourrait tre modlise comme 3 registres, chaque registre pouvant contenir 2 3 mnmes relis entre eux. La capacit de stockage de la mmoire court terme est relativement faible : 7 2, voire 3 ou 4 mnmes. Cest pourquoi, lors de la conception dune interface, il convient de minimiser le nombre de donnes que lutilisateur doit prendre en compte, en privilgiant la qualit de linformation la quantit.

A.2

THORIE DE LACTION
La thorie de laction, labore par D.A. Norman, fournit un cadre thorique permettant de mesurer la complexit dutilisation dune interface homme-machine [Norman 86]. Elle part du principe que toute action est un cycle itratif en deux temps ; tout dabord lutilisateur excute une commande, puis il value la modification engendre par la commande par rapport au but quil visait (figure A.5). Une premire phase consiste dcliner le but de lutilisateur en un plan. Celui-ci va donner lieu une srie dactions. Chaque action est excute physiquement. Ltat du monde en est modifi. Lutilisateur peroit cette modification. Il linterprte en fonction des connaissances dont il dispose. Finalement, il compare le rsultat avec le but quil stait fix (figure A.6). titre dexemple, la figure A.7 illustre le cycle de laction dans le cas o lutilisateur chercherait tancher sa soif .

250

A. Ltre humain en situation de travail

Figure A.5 Les deux tapes de la thorie de laction.

Figure A.6 Dcomposition du cycle action-valuation.

On distingue deux strates dans le cycle de laction. Lune correspond aux processus lis la comprhension du systme : laboration du plan permettant datteindre le but et valuation du rsultat (Que faire ?). Lautre regroupe les processus lis la manipulation proprement dite du logiciel : excution de laction et perception (Comment le faire ?). Lpaisseur de ces strates est reprsentative de la complexit dutilisation, do la notion de distance pour mesurer la complexit associe chacune des tapes du cycle de laction [Hutchins 86].

A.3 Tche et activit 251

Figure A.7 Exemple de cycle action-valuation.

Au niveau conceptuel, la distance smantique symbolise la distance entre le but vis par lutilisateur et les actions/objets de linterface. Elle tmoigne de la complexit de comprhension du systme. Elle mesure la quantit de ressources ncessaires aux processus cognitifs lis la comprhension du systme pour choisir les commandes afin de raliser une tche et dterminer si le but a t atteint en fonction de ltat du systme. Sur le plan de la ralisation, la distance articulatoire figure la distance entre laction et sa reprsentation physique. Elle atteste de la complexit dutilisation du systme. Elle mesure la quantit de ressources ncessaires aux processus cognitifs et moteurs lis la manipulation du systme pour raliser une commande et percevoir ltat du systme. La rduction des distances smantiques et articulatoires contribue diminuer les ressources ncessaires aux processus cognitifs/moteurs de comprhension et de manipulation du systme, cest--dire les ressources ncessaires la tche dutilisation du systme. En dautres termes, rduire les distances facilite lutilisation du logiciel. Lexemple typique de la rduction des distances est linterface manipulation directe (voir section 2.5).

A.3

TCHE ET ACTIVIT
La tche est lobjectif que cherche atteindre lutilisateur ; le rsultat quil souhaite obtenir. Par exemple, lorsque je me sers dun logiciel de traitement de texte, ma tche consiste communiquer en rdigeant un document.

252

A. Ltre humain en situation de travail

Afin de raliser une tche, ltre humain la dcompose en problmes simples. Il dcline le but principal en sous-buts, puis en actions lmentaires, de faon hirarchique.

Figure A.8 Planication hirarchique de la tche.

Les informations ncessaires pour mener une tche sont associes en mmoire cette tche. Tant que lobjectif initial na pas t atteint, les informations relatives la tche sont actives. Par contre, une fois le but atteint, elles sont gnralement oublies. Ce phnomne est prendre en compte lors de la conception du dialogue homme-machine. Ainsi, il a t observ que les utilisateurs des premiers distributeurs de billets de banque oubliaient leur carte bancaire dans la machine. En effet, ces distributeurs ne rendaient la carte quaprs les billets. Or, le but de lutilisateur tait dobtenir des billets ; une fois ceux-ci en main, il oubliait la carte bancaire, qui navait t quun moyen datteindre ce but. Depuis, les distributeurs rendent la carte bancaire avant les billets et plus aucune carte nest perdue. Cependant, un mme but, un mme objectif de tche, peut tre atteint de diverses manires selon le contexte. Par exemple, je ne my prendrais pas de la mme manire pour communiquer par crit selon que je dispose dun traitement de texte et de beaucoup de temps ou, au contraire, que je nai quune feuille de papier et 5 minutes devant moi. Pour raliser une tche selon les moyens qui lui sont attribus et dans des conditions donnes, lutilisateur dploie une activit. Lactivit est aussi appele la tche effective , tandis que la tche est la tche prvue ou prescrite . En dautres termes, la tche dsigne ce qui doit tre fait, tandis que lactivit reprsente ce qui est fait. La diffrence entre tche et activit est essentielle. En effet, lors de la conception dun logiciel, on part dinformations sur la tche (le cahier des charges)

A.3 Tche et activit 253

et non sur lactivit. Or, cest dans un contexte dactivit que sera utilis le logiciel. Cest pourquoi il est important de mettre en situation lutilisateur et de lobserver afin de comprendre son activit ; cest le rle des tests dutilisabilit. Pour que linterface homme-machine puisse tre adapte lactivit des utilisateurs, il convient de prendre en compte les diverses stratgies dutilisation quils peuvent mettre en uvre selon le contexte dutilisation en offrant une flexibilit dans les moyens de dialogue. Par exemple, la commande dimpression peut tre dclenche soit par une fentre de dialogue permettant de choisir la plage dimpression et le nombre de copies, soit directement, mais sans configuration possible, par un bouton. Ainsi, lorsque jai le temps, jutilise la fentre de dialogue et je bnficie dun paramtrage fin, mais si je suis press, je ne me sers que du bouton. Par ailleurs, un logiciel est un outil complexe qui fait appel des comptences spcifiques pour tre utilis. La ralisation dune tche informatise demande en fait de mener deux tches en parallle : dune part la tche mtier cest--dire lobjectif que lutilisateur cherche atteindre vis--vis du monde extrieur, dautre part la tche systme qui consiste se servir du logiciel proprement dit. Cette dernire rend la tche globalement plus difficile sans pour autant faciliter la ralisation de la tche mtier qui est lobjectif premier de lutilisateur. Par exemple, lorsque lon utilise un logiciel de conception assiste par ordinateur, la tche mtier consiste concevoir une pice mcanique, tandis que la tche systme correspond lemploi du logiciel et de lordinateur. Pour quun systme informatique soit facile utiliser, la tche systme ne doit pas perturber la ralisation de la tche mtier. Linterface homme-machine doit tre la plus transparente possible : la tche systme rduite au minimum. La prpondrance de la tche systme sur la tche mtier a souvent t un facteur de refus du logiciel. Inversement, lorsque la tche systme est aise, le logiciel est mieux accept. Cest pourquoi le Macintosh, avec une reprsentation graphique et la mtaphore du bureau, a eu un tel succs, par rapport au PC qui, lpoque, proposait une interface textuelle.

254

B. Critres ergonomiques

B
Critres ergonomiques

Les critres ergonomiques constituent une typologie des proprits dune interface homme-machine qui vont conditionner son utilisabilit. Les critres prsents dans ce chapitre sont issus des travaux de J.-C. Bastien [Bastien 93] et repris dans la norme AFNOR Z67-133-1. Il y a un relatif consensus des chercheurs du domaine sur cet ensemble de critres. Ils se retrouvent galement dans la grille dvaluation de luniversit de Purdue [Lin 97] et dans les rgles dvaluation heuristique de J. Nielsen [Nielsen 93]. Les critres sont employs de deux manires. Ils permettent dvaluer lutilisabilit dun logiciel et servent de guide lors de la conception des interfaces homme-machine. Nous les prsentons ici en donnant dune part une dfinition du critre, utile lvaluation, et dautre part des recommandations illustrant la faon de le mettre en uvre en phase de conception.

B.1

COMPATIBILIT
La compatibilit est la capacit du logiciel sintgrer dans lactivit relle des utilisateurs. Ce critre mesure ladquation du logiciel avec lenvironnement de travail dans lequel il est utilis. Lobjectif est de rduire le transfert de connaissances ncessaire pour passer du mtier au logiciel. La logique dutilisation du systme doit correspondre la logique de lutilisateur. La compatibilit consiste prendre en compte tous les niveaux de la conception de linterface homme-machine, le contexte rel dutilisation. Lorsque le

B.1 Compatibilit 255

logiciel est adapt son usage, lutilisateur sen sert plus facilement car il rpond mieux aux exigences du terrain. Parler le langage de lutilisateur. Prsenter les informations de faon cohrente par rapport aux autres supports de travail. Laccs aux commandes doit tre compatible avec la tche de lutilisateur.
Tableau B. Les critres ergonomiques sont les principales rgles suivre pour que le logiciel ou le site web soit utilisable. Critres Compatibilit Guidage Description Adquation du logiciel ou du site vis--vis de son utilisateur. Employer le vocabulaire mtier. Moyens permettant de sorienter dans lutilisation du logiciel ou du site. Inciter lutilisateur effectuer des actions spcifiques. Regrouper visuellement les informations de mme type. Fournir un retour aux actions utilisateur et rendre visible le fonctionnement du systme. Faciliter la perception des informations. Uniformit de la logique dutilisation et de reprsentation. Concevoir un fonctionnement cohrent et un graphisme homogne. Varit des procdures permettant datteindre un mme objectif. Offrir lutilisateur diffrentes manires de raliser la mme tche. Matrise des traitements raliss par le systme. Ne dclencher que les commandes explicitement demandes par lutilisateur. Permettre lutilisateur de toujours garder la main . Protection contre les erreurs et correction. Prvenir et dtecter rapidement les erreurs. Prsenter des messages derreur pertinents et permettre une correction facile des erreurs. Rduction des activits de perception et de mmorisation. Limiter le travail de lecture, la saisie et le nombre dtapes ncessaires laccomplissement dune tche.

Homognit Flexibilit Contrle utilisateur

Traitement des erreurs

Charge mentale

Considrons, par exemple, un logiciel destin un grant de magasin dont la tche peut tre modlise comme sur la figure B.1 :

256

B. Critres ergonomiques

Figure B.1 Pour cet exemple, supposons que la tche de gestion du magasin se dcompose en trois sous-tches : tablir le bilan des ventes, Vrier les commandes et Contrler les stocks. Chacune dentre elles donne lieu aux trois mme oprations : dition, Impression ou Envoi.

Laccs aux commandes du logiciel se fait depuis une barre de menu. Deux prsentations sont envisageables. Lorsque la disposition des menus est compatible avec la tche, lutilisateur accde plus rapidement aux commandes.

Dconseill (a) Organisation fonctionnelle

Prfrable (b) Organisation selon la tche

Figure B.2 Compatibilit : la barre de menu (a) tire parti de la similarit fonctionnelle entre les commandes, mais elle oblige lutilisateur ouvrir un nouveau menu pour chaque opration. Au contraire, lorganisation (b) calque sur la tche permet de retrouver toutes les commandes relatives une sous-tche dans un mme menu. Cette dernire obit au critre de compatibilit.

Figure B.3 Cette caricature montre un problme typique de compatibilit d une mauvaise connaissance de lenvironnement de travail de lutilisateur.

B.2 Guidage 257

B.2

GUIDAGE
Le critre de guidage regroupe lensemble des moyens mis en uvre pour assister lutilisateur dans lemploi du logiciel, cest--dire lui faire connatre ltat du systme et lui permettre dtablir des liens de causalit entre ses propres actions et ltat rsultant. Lobjectif est de faciliter lutilisation du systme et son apprentissage. En effet, le guidage rend le logiciel plus convivial car lutilisateur comprend mieux ce que lon attend de lui : il hsite moins. Lapprentissage est facilit car le fonctionnement du systme apparat clairement. On considre habituellement deux types de guidage. Le guidage explicite correspond aux diffrents messages mis par le systme afin dinformer lutilisateur sur son fonctionnement, par exemple des textes explicatifs. Le guidage implicite regroupe les diffrents artifices de prsentation qui sont employs pour guider lutilisateur, comme le fait de griser les commandes inactives par exemple. Ce critre est dcompos en quatre sous-critres [Bastien 93] prsents ciaprs.

B.2.1 Incitation
Le critre incitation runit les diffrents moyens visant conduire lutilisateur effectuer des actions spcifiques. Lincitation consiste aider lutilisateur dans son interaction avec le logiciel en lui fournissant les lments ncessaires pour lutiliser correctement. Il vite des apprentissages fastidieux et rduit le risque derreur. Griser les commandes non disponibles. Fournir la liste des saisies attendues. Donner le format de saisie des donnes.

B.2.2 Groupement/Distinction
Quand il dcouvre pour la premire fois un outil, ltre humain applique le principe de similarit : Ce qui se ressemble, fonctionne de la mme manire . Lutilisateur comprend plus facilement le fonctionnement du logiciel lorsque les informations de mme type sont regroupes, et inversement, que les donnes distinctes apparaissent sous une forme diffrente. Le groupement sappuie sur deux attributs graphiques : le format de prsentation de la donne (couleur, forme, syntaxe, etc.) et sa position lcran. Lorsque

258

B. Critres ergonomiques

Figure B.4 Guidage par incitation : les indications guident la saisie en prcisant de faon explicite la syntaxe de chaque champ de la fentre.

les informations se rapprochent lcran, soit par leur graphisme, soit par leur position, lutilisateur fait lhypothse quelles fonctionnent de la mme manire. Regrouper les informations de mme type par le format ou par la position. Distinguer les informations diffrentes.

Figure B.5 Guidage par groupement : chaque menu prsente lutilisateur un ensemble cohrent de commandes, facilitant ainsi la mmorisation et lapprentissage du logiciel.

B.2.3 Retour utilisateur

Le critre de retour utilisateur runit les diffrents comportements de linterface homme-machine visant montrer le fonctionnement du systme, en signalant ce que fait le logiciel et en fournissant un retour aux actions utilisateur. Ce critre contribue accrotre la confiance dans le systme. Lorsque le logiciel fournit des retours, lutilisateur tablit le lien entre les actions quil effectue et ltat rsultant. Il comprend mieux le fonctionnement et laccepte plus facilement.

B.3 Homognit 259

Le logiciel doit rpondre aux actions de lutilisateur par un changement de prsentation de linterface. Indiquer les modes de fonctionnement du systme. Signaler les traitements longs par un message dattente. Toujours faire apparatre les saisies utilisateur. Rendre visible les traitements raliss par le logiciel.

Figure B.6 Guidage par retour utilisateur : la modication du pointeur souris montre quun traitement est en cours.

B.2.4 Lisibilit
Dans la mesure o elle facilite la perception des informations, la lisibilit contribue aussi au guidage. Lorsque la lecture est facile, lutilisateur comprend mieux le fonctionnement du logiciel. Utiliser une police droite. Employer des lettres sombres sur un fond clair.

B.3

HOMOGNIT
Le critre homognit concerne la cohrence globale de linterface hommemachine. Lobjectif est de respecter une logique dutilisation constante, tant au niveau de la faon dexcuter les commandes que de la reprsentation des donnes : le graphisme, la position des informations, le vocabulaire et le format des donnes doivent tre cohrents dune fentre lautre. Lhomognit rend le systme stable, donc prvisible aux yeux de lutilisateur. Le temps de recherche de linformation est diminu. Le logiciel est plus facile apprendre : ce qui est appris dans un cas peut tre gnralis lensemble du logiciel.

260

B. Critres ergonomiques

Les fentres doivent suivre le mme schma dagencement. La smantique des boutons de la souris doit tre constante. Le mme vocabulaire doit tre utilis pour lensemble du logiciel.

Agenda
Organiser son emploi du temps Liste des rendez-vous Recherche dune adresse (a) Dconseill

Agenda
Organiser son planning Visualiser les rendez-vous Chercher une adresse (b) Prfrable

Figure B.7 Homognit : la lecture est plus facile lorsque les commandes suivent la mme syntaxe. Cest le cas du menu (b) o les items sont tous construits en verbe + nom.

B.4

FLEXIBILIT
La flexibilit est la capacit de linterface homme-machine sadapter diffrents contextes dutilisation. En effet, un logiciel est destin tre utilis par diffrentes personnes qui ne sen serviront pas de la mme manire selon leurs connaissances, selon les particularits de leur tche et selon leurs habitudes de travail. Lorsque lutilisateur peut choisir la faon de faire qui lui convient le mieux, le logiciel est plus facile utiliser. La mise en uvre de ce critre consiste fournir plusieurs moyens pour raliser la mme tche. Bien entendu, il convient que les diffrents moyens proposs soient effectivement complmentaires et quils soient adapts diffrents contextes. Lobjectif est que lutilisateur choisisse le moyen qui lui convient le mieux selon les conditions dans lesquelles il doit mener sa tche. Permettre dactiver les commandes la fois au clavier et la souris. Permettre lutilisateur de paramtrer le logiciel selon ses prfrences. Fournir un moyen rapide pour accder aux commandes des menus. Un exemple typique dapplication de ce critre consiste doubler laccs aux commandes des menus par des raccourcis clavier. Ainsi, les utilisateurs dbutants bnficient du guidage fourni par le menu, tandis que les utilisateurs expriments profitent, une fois appris, de la rapidit du raccourci clavier.

B.5 Contrle utilisateur 261

B.5

CONTRLE UTILISATEUR
Le critre de contrle utilisateur concerne le degr de matrise de lutilisateur sur les traitements raliss par le systme. Lobjectif est que lutilisateur comprenne mieux le fonctionnement du systme. Le contrle utilisateur vise rendre lutilisateur autonome dans son interaction avec le logiciel en lui donnant la matrise du processus. Lapprentissage en est facilit. Les erreurs sont moins nombreuses, la performance est donc meilleure. De ce fait, le logiciel est mieux accept par lutilisateur. [Bastien 93] distingue deux niveaux de contrle. Le premier (actions explicites) concerne le fait que seules les oprations demandes par lutilisateur sont ralises par le systme. Le second (contrle utilisateur) dnote le degr de matrise de lutilisateur sur les traitements effectus, lobjectif tant que lutilisateur ait toujours le contrle sur le logiciel. Valider explicitement les commandes importantes ou difficilement rversibles. Offrir la possibilit dinterrompre les traitements longs. Autoriser les retours en arrire.

Figure B.8 Contrle utilisateur : le bouton Dfaire (Undo) autorise lutilisateur revenir sur ltat prcdant lexcution de la dernire commande. Ce bouton permet dviter des erreurs et minimise le stress.

B.6

TRAITEMENT DES ERREURS

Le traitement des erreurs regroupe les diffrents moyens visant protger lutilisateur des erreurs et lui permettre de les corriger. Lobjectif est de minimiser les interruptions dues aux erreurs. viter les erreurs. Permettre une correction aise des erreurs. Faciliter lexploration et lapprentissage du systme.

262

B. Critres ergonomiques

B.6.1 Protection contre les erreurs

Le critre de protection contre les erreurs concerne les techniques visant viter les erreurs. Il consiste dune part guider lutilisateur pour viter quil commette lerreur (cest en fait du guidage ), dautre part dtecter les erreurs et alerter lutilisateur. Griser les commandes non disponibles. Fournir la liste des valeurs possibles. Dtecter les erreurs au plus tt. Minimiser les saisies clavier. Prvenir les risques de perte de donnes.

Figure B.9 Traitement des erreurs : un message de demande de conrmation peut permettre de protger lutilisateur contre la destruction involontaire dune donne importante. Notons toutefois quil ne suft pas dun message pour protger efcacement des erreurs. Dautres moyens doivent galement tre mis en uvre, en particulier le guidage qui contribue une meilleure comprhension du logiciel.

B.6.2 Correction des erreurs

Le critre de correction des erreurs tend ddramatiser lerreur aux yeux de lutilisateur. Lorsquil peut facilement corriger ses erreurs, il perd moins de temps. Lerreur devient moins grave. Pour que la correction de lerreur soit aise, deux exigences doivent tre prises en compte. Dune part, le message derreur doit indiquer la nature de lerreur et les moyens de la corriger. Dautre part, la correction doit tre possible, cest--dire que lutilisateur doit pouvoir accder la donne errone.

B.7 Charge mentale 263

Placer le message derreur l o lutilisateur est sens regarder. Mettre en vidence le champ erron. Afficher des messages derreur explicites, brefs, non rprobateurs et autosuffisants.

Figure B.10 Pour tre efcace, un message derreur doit pouvoir tre compris rapidement par lutilisateur. Ce nest pas toujours le cas

B.7

CHARGE MENTALE
Le critre charge mentale (appel aussi concision) regroupe lensemble des moyens visant rduire la charge perceptive et mnsique de lutilisateur. Lobjectif est dallouer le maximum de ressources au systme cognitif (voir section A.1) et dviter les erreurs en rduisant les stimuli. Il vise diminuer le nombre dinformations que lutilisateur doit prendre en compte et simplifier les actions quil doit raliser. Nafficher que les informations pertinentes. Rduire le nombre dactions lmentaires pour atteindre un objectif donn. Mettre en uvre ce critre consiste concevoir un dialogue simple, cest--dire limiter le travail de lecture, de saisie et les tapes ncessaires laccomplissement de la tche. Minimiser les saisies. viter les textes trop verbeux. Ne pas demander de saisir des informations qui peuvent tre calcules par le systme. viter lutilisateur davoir se souvenir dinformations dune fentre lautre.

264

B. Critres ergonomiques

(a) Dconseill

(b) Prfrable

Figure B.11 Charge mentale : Lorsque les informations sont afches de faon en faciliter lexploitation, elles sont plus simples comprendre car elles rpondent directement au besoin de lutilisateur. Cest le cas du graphique (b), plus rapide interprter que le tableau (a).

B.8

CHECK-LIST DVALUATION ERGONOMIQUE

La check-list ci-aprs permet de vrifier que les critres ergonomiques [Bastien 93] sont correctement pris en compte. Cest une manire dvaluer rapidement lutilisabilit dun logiciel. Cette check-list est gnrale. Elle demande tre adapte en fonction de lapplication valuer (pour un site web, voir lannexe C).

Compatibilit

Le logiciel correspond-il au contexte dutilisation ? Est-il adapt au profil des utilisateurs viss ? (Par exemple, les utilisateurs
ont-ils une exprience bureautique ?) Le langage de linterface est-il celui employ par les utilisateurs ? Les informations sont-elles prsentes de manire cohrente par rapport aux autres supports de travail ? Laccs aux commandes est-il adapt au contexte de ralisation de la tche ?

Guidage

Lutilisateur est-il assist dans la faon de se servir du logiciel ? (Par

exemple, le logiciel fournit-il le format de saisie des donnes, une liste de valeurs possibles, etc. ?) Les informations de mme type sont-elles regroupes ? Distingue-t-on les donnes diffrentes ?

B.8 Check-list dvaluation ergonomique 265

Le systme fournit-il un retour aux actions de lutilisateur ? Les modes de fonctionnement du systme sont-ils visibles ? Les oprations ralises par le systme sont-elles connues de lutilisateur ? Les informations sont-elles correctement lisibles ? Une aide en ligne est-elle propose ? La documentation est-elle claire ?

Homognit

Lagencement des fentres est-il semblable (trac rgulateur) ? Les couleurs, les icnes et les polices de caractres sont-elles utilises de
faon cohrente ? Les formats de prsentation des donnes sont-ils constants ? Un vocabulaire uniforme est-il utilis dans lensemble des fentres ? Le fonctionnement de la souris est-il cohrent ?

Flexibilit

Diffrents moyens sont-ils proposs lutilisateur pour dclencher les

mmes commandes ? Les commandes sont-elles galement accessibles au clavier ? Une alternative rapide est-elle propose lutilisation des menus (par exemple des raccourcis clavier) ? Lutilisateur peut-il paramtrer le logiciel selon les prfrences ?

Contrle utilisateur

Les commandes sont-elles toujours explicitement actives par lutilisateur ? Lutilisateur peut-il quitter, abandonner facilement, interrompre un traitement en cours ? Est-il possible de revenir en arrire ?

Traitement des erreurs

Est-il possible dexplorer le logiciel ? Le systme offre-t-il des moyens pour viter les erreurs (bouton gris, liste
des valeurs possibles) ? Lutilisateur est-il prvenu rapidement de son erreur ? Lutilisation du clavier est-elle minimale ? Existe-t-il un moyen de rcuprer des donnes dtruites ? La cause de lerreur est-elle aisment identifiable ? Les erreurs peuvent-elles tre facilement corriges ? Les messages sont-ils visibles ? Les messages sont-ils explicites ?

266

B. Critres ergonomiques

Charge mentale

Laffichage demande-t-il un effort de perception ? Laffichage rpond-il la demande de lutilisateur ? Les activits de mmorisation sont-elles rduites au minimum ? Le texte des fentres est-il concis ? Les saisies sont-elles rduites au minimum ? Le nombre dtapes pour raliser une procdure est-il faible ? Existe-t-il des raccourcis ?

267

C
Check-list de conception dun site web
Cette check-list fait la synthse des diffrentes recommandations nonces dans les chapitres traitant des sites Internet. Elle sert daide-mmoire et permet de vrifier, chaque tape de la conception, si les critres dutilisabilit ont bien t pris en compte. Bien entendu, il sagit l dune approche a priori. Elle permet seulement didentifier des problmes potentiels, mais elle ne vaut pas un vritable test dutilisabilit. Afin de pouvoir servir au plus grand nombre, cette check-list est volontairement gnrale. Pour lappliquer efficacement, il est prfrable de ladapter aux spcificits du site concevoir.

Dfinition et ciblage

Quel sont les objectifs du site ? Quels sont les principaux messages transmettre au travers du site ? Comment allez-vous persuader les internautes de la pertinence de ces
messages ? qui sadresse le site ? Quel est le profil des utilisateurs (catgorie socioprofessionnelle, habitude de lordinateur) ? Sil existe plusieurs cibles, quelle est la cible principale ? Quelles questions se pose lutilisateur lorsquil va sur le site ? Quels problmes cherche-t-il rsoudre ? Quelle est son attente ? Dans quel contexte va-t-il se poser ces questions ?

268

C. Check-list de conception dun site web

Peut-on dfinir un scnario dutilisation typique ? Des sites concurrents, ou du mme type, ont-ils t valus ? Que pensent les utilisateurs de ces sites, voire des autres mdias offrant
ce type de service ? Une stratgie de lancement du site a-t-elle t labore ? Le processus de mise jour du site est-il dfini ? Qui va entretenir le site ? Des moyens ont-ils t mis en uvre pour recueillir des retours dutilisation ? Les outils permettant dtablir les statistiques dutilisation ont-ils t choisis ?

Structure

Larborescence du site est-elle rgulire ? Le site est-il organis en largeur dabord (8 sous-rubriques maximum par
niveau) ? La profondeur est-elle minimale (3 ou 4 niveaux maximum) ? Les rubriques rpondent-elles aux questions de lutilisateur ? Les rubriques regroupent-elles des informations de mme type ?

Navigation

Linternaute a-t-il le moyen de savoir o il est dans le site ? Visualise-t-il la position de la page courante par rapport au reste du site ? Dispose-t-il en permanence dune vue globale des diffrentes rubriques
du site ?

Lordre dans lequel sont prsentes les rubriques est-il cohrent avec la
faon dont lutilisateur les consulte ?

Linternaute peut-il naviguer uniquement partir des liens fournis dans

les pages du site ?

Les choix proposs lutilisateur sont-ils suffisamment explicites pour

tre effectus rapidement ?

Composants de navigation

Une zone de navigation persistante apparat-elle lidentique sur toutes

les pages du site ? Est-elle visible quelle que soit la taille de la fentre ? La page courante est-elle mise en vidence dans la barre de navigation ? Lorsque la page dpasse la taille de lcran, la zone de navigation est-elle rpte en bas de page ? Une navigation contextuelle est-elle propose ? Un alternative est-elle propose aux menus droulants ? Le graphisme des onglets est-il explicite ?

269

Un onglet est-il slectionn sur la page daccueil ? Si une liste de slection est utilise pour la navigation, un bouton lui
est-il associ ?

Un texte explique-t-il le rle des boutons graphiques ? Certains boutons font-ils rfrence au fonctionnement du navigateur
Liens
(suivant, prcdent) ? Si un texte est associ un rollover, est-il correctement visible ? Le chemin de progression apparat-il clairement sur la page ? La prsentation du chemin de progression respecte-t-elle le standard ? La page courante est-elle indique dans le chemin de progression ?

Le comportement des liens est-il standard ? Les liens sont-ils suffisamment grands pour tre faciles slectionner ? Le soulignement surcharge-t-il la page ? La lecture est-t-elle interrompue par lutilisation des liens ? Le texte des liens est-il facile comprendre ? Le texte des liens reflte-t-il les concepts importants de la page ? Le mme lien est-il rpt sur la page ? Le libell des liens est-il cohrent ? La mme page est-elle toujours indique par un lien de mme nom ? Le texte du lien correspond-il avec le titre de la page ? Linternaute est-il prvenu lorsquun lien le conduit vers un document volumineux ? Les liens vers dautres sites restent-ils dans la mme fentre ?

Organisation de la page

Le trac des pages est-il homogne ? Les informations semblables sont-elles prsentes de la mme manire
sur la page ?

Les informations importantes apparaissent-elles au centre ? Les informations importantes sont-elles mises en vidence ? La prsentation de la page reflte-t-elle la faon dont les informations
sont structures ? Les titres refltent-ils le contenu des pages ou des paragraphes ? Les pages dpassent-elles la taille de lcran ? Le contenu de la page est-il suffisant ? La navigation lintrieur de la mme page se limite-t-elle au retour en haut de page? Les pages se chargent-elles suffisamment vite ?

270

C. Check-list de conception dun site web

La page est-elle lisible en 800 600 ? Lutilisateur peut-il lire la page sans se servir des barres de dfilement Des jeux de cadres ont-ils t employs ? Si oui, est-ce justifi ?
Page daccueil
horizontal ?

La page daccueil permet-elle linternaute de comprendre la vocation

du site, didentifier son contenu et les services proposs ? Des lments dinformation sont-ils fournis sur la page daccueil ? Laudience du site peut-elle sidentifier ds la page daccueil ? Lutilisateur comprend-t-il la navigation dans le site depuis la page daccueil ? Des crans dintroduction sont-ils employs avant darriver sur ce site ? La page daccueil est-elle suffisamment lgre pour safficher en moins de 10 secondes ? Un mode daccs rapide aux pages intrieures est-il prvu pour les utilisateurs expriments (moteur de recherche) ?

Graphisme

Texte

Lensemble du site suit-il une charte graphique cohrente ? Une feuille de style a-t-elle t dfinie pour le site ? A-t-on limit le bruit visuel ? Le choix des images est-il justifi ? Les textes sont-ils lisibles ? Le chargement des images a-t-il t optimis ? Laffichage est-il progressif ? La qualit graphique de limage est-elle suffisante ? Une description alternative a-t-elle t dfinie pour les images (attribut alt) ? Dans le cas dune image cliquable, les zones actives sont-elles visibles ? Lemploi des animations est-il justifi ? Linternaute a-t-il la possibilit de stopper ou de sauter lanimation ? Un texte doit-il tre lu sur la mme page que lanimation ? Lutilisation dun composant spcifique (par exemple Flash ou Java) estelle justifie ? Le format utilis est-il adapt au type dimage (GIF ou JPEG) ? La palette de couleurs est-elle web-safe ? Sinon, est-ce justifi ?

Linformation importante apparat-elle en haut de page ? Les lments importants du texte ressortent-ils lorsquon balaye la page
des yeux ?

271

Les titres aident-ils lutilisateur sorienter dans la lecture de la page ? Les liens permettent-ils daccder des informations complmentaires au
texte courant ? Les textes sont-ils justifis gauche ? Certains textes sont-ils souligns ? Linternaute peut-il imprimer le texte ? Le vocabulaire employ est-il comprhensible par lutilisateur ? La page est-elle rdige dans un style concis ? Le langage utilis est-il simple et objectif ? Le texte commence-t-il par la conclusion ? Laccs aux informations est-il hirarchis ? Le contenu de la page peut-il tre compris sans lire le reste du site ? Les informations publies sont-elles pertinentes ? Des listes puces sont-elles employes pour structurer le texte ? Un mme ensemble de graphiques est-il utilis pour toutes les puces du site ? Le choix des polices est-il justifi ? Linternaute peut-il modifier la taille de la police de caractres ? Le texte est-il lisible sans effort ?

Formulaires

Le formulaire propose-t-il par dfaut les valeurs les plus courantes pour Le site fournit-il linternaute les informations ncessaires pour remplir
les champs ? Les saisies sont-elles rduites au minimum ? Les entres obligatoires sont-elles clairement indiques ? Les items des listes sont-ils affichs dans un ordre logique pour lutilisateur ? Des boutons ont-ils t prfrs aux listes de slection ? les champs ?

Lectures complmentaires 273

Bibliographie
LECTURES COMPLMENTAIRES
En comparaison des nombreux ouvrages techniques traitant des mthodes et des outils de dveloppement, il y a assez peu de livres sur la conception ergonomique des interfaces utilisateur. Les ouvrages suivants vous apporteront un autre clairage sur ce domaine. Baccino Th., Bellino C. et Colombi T., Mesure de lutilisabilit des interfaces, LavoisierHerms, 2005. Ouvrage de rfrence, il dcrit de manire prcise et dtaille les diffrentes mthodes dvaluation ergonomique. Pour chaque mthode, une fiche prsente le protocole mettre en place, le matriel utiliser, ainsi que tous les dtails pratiques de mise en uvre. Principalement destin un public professionnel, cet ouvrage constitue un tat de lart prcis des principales mthodes exprimentales employes en ergonomie. Une lecture conseille tous ceux qui souhaitent conduire des valuations ergonomiques. Tidwell J., Designing Interfaces, OReilly 2006. Cest un ouvrage pratique destin aux concepteurs dinterfaces. Il prsente des design patterns cest--dire des schmas dinterface rpondant des problmatiques de conception et dresse un inventaire exhaustif de bonnes pratiques en matire de conception dinterface. Dans chaque cas, Jenifer Tidwell dcrit lutilisation la mieux approprie de llment dinterface, illustrant son propos par de nombreux exemples de logiciels et de sites web. Steve Krug, Zro prise de tte : Quelques rgles simples et un zeste de bon sens pour concevoir des sites web intuitifs et efficaces , Dunod, 2001. Ne vous fiez pas son titre racoleur, ni ses illustrations de BD : Zro prise de tte est un excellent ouvrage pour apprendre lergonomie web. Avec le souci daller rapidement lessentiel, Steve Krug nous explique, dans un langage clair et imag, comment concevoir des sites web. Sappuyant sur des exemples vcus, il donne des conseils pratiques pour mener des tests dutilisabilit et intgrer la pratique de lutilisabilit dans la conception dun service en ligne.

274

Bibliographie

Hardy J.-M., Palermo G., Russir son site web en 60 fiches, 2e dition, Dunod, 2008. Destine principalement aux chefs de projet web, la check-list de 60 points cls labore par Jean-Marc Hardy couvre lensemble des lments qui concourent la qualit dun site web. Partant du principe quun site de qualit est un site utilisable, elle est principalement oriente sur la perception du site du point de vue des internautes. La check-list couvre la fois les aspects techniques de ralisation du site, lergonomie, le design graphique, le contenu et les aspects marketing. Chaque point est dtaill par des recommandations, des tudes de cas, ainsi que de nombreuses rfrences. Cooper A. et Reimann R., About Face : The Essentials of User Interface Design, John Wiley, 2007. About Face prsente la mthode des personas invente par Alan Cooper. Cette mthode danalyse et de conception est dcrite en dtail dans la premire partie du livre. Louvrage volumineux (650 p. env.) comporte galement de nombreuses recommandations sur la conception des interfaces principalement dans le domaine du logiciel, mais aussi pour les applications web. La dernire dition (3) traite galement des technologies Ajax ainsi que des interfaces de type Ipod. On regrettera toutefois le nombre relativement restreint dillustrations comparativement aux autres ouvrages de ce type. Nielsen J., Usability Engineering, Academic Press, 1993. Usability Engineering, que jai traduit par la pratique de lutilisabilit , introduit lapproche de dveloppement itratif centre utilisateur. Jakob Nielsen y prsente les mthodes pour conduire les phases de prototypage et les tests dutilisabilit lors de la conception dun logiciel. Nielsen J., Conception de sites Web, Lart de la simplicit, Campus Press, 2000. Louvrage de Jakob Nielsen sur la conception web reprend la plupart des thmes abords sur son site www.useit.com. Cependant la diffrence du site, les diffrents aspects de la conception internet y sont ici illustrs par une profusion dexemples et de critiques de sites web. Scapin D. L. et Bastien J. M. C., Ergonomic criteria for evaluating the ergonomic quality of interactive systems , Behaviour & Information Technology, vol. 16, 1997. Dans cet article, Dominique L. Scapin et J. M. Christian Bastien exposent les critres ergonomiques. Chacun dentre eux est dfini prcisment, des justifications ainsi que des exemples de recommandations sont galement fournis afin de mieux apprhender le jeu complet des critres. Shneiderman B., Designing the User Interface, Addison-Wesley, 1998. Cet ouvrage, plus gnraliste, est probablement lun des mieux russis sur le sujet. Ben Shneiderman y aborde les diffrents aspects de linteraction homme-machine aussi bien sous langle de lutilisabilit que sous celui des techniques de dveloppement et de la recherche. Il existe galement diffrents documents normatifs sur lergonomie du logiciel. Les normes ISO 9241 et AFNOR Z 67 fournissent des recommandations sur la concep-

Ouvrages cits dans le texte

275

tion des interfaces homme-machine, tandis que la norme ISO 13407 relve plus de la mthodologie. ISO 9241, Exigences ergonomiques pour travail de bureau avec terminaux crans de visualisation (TEV), ISO, 1992. Norme Z67-110, Ergonomie et conception du dialogue homme-ordinateur, AFNOR, 1988. Norme Z67-133-1, valuation des produits logiciels : dfinition des critres ergonomiques de conception et dvaluation des interfaces utilisateurs, AFNOR, 1991. ISO 13407, Processus de conception centrs sur lindividu pour les systmes interactifs, ISO, 1997.

OUVRAGES CITS DANS LE TEXTE

Avant-propos
Mayhew D.J., Principles and guidelines in software user interface design, Prentice-Hall, 1992. Nielsen J., Usability Engineering, Academic Press, 1993.

Chapitre 1 Lcran
Andre A.D. et Wickens C.D., When Users Want Whats Not Best for Them , Ergonomics in Design, octobre 1995. Anshel J., Visual Ergonomics in the Workplace, Taylor & Francis (eds), 1998. Camacho M.J., Steiner B.A., Berson B.L., Icons vs. alphanumerics in pilot-vehicles interfaces , Proceedings of the Human Factors and Ergonomics Society Annual Meeting, 1990. Chapman W.W., The visual interface: Color & Location Coding in a non-linear visual display , Proceedings of the World Conference on Educational Multimedia and Hypermedia, Orlando, Association for the Advancement of Computing in Education, 1993. Chincholle D., Menu J.-P., valuation photocolorimtrique des palettes de couleurs proposes pour les futurs crans de contrle arien, Rapport technique 94-21, IMASSA/CERMA, 1994. Chincholle D., Menu J.-P., PA.T.R.I.C.I.A. : La palette de couleurs ergonomique propose pour les futurs crans de contrle arien, Rapport technique 95-27, IMASSA/CERMA, 1995. Dribr M., La couleur, coll. Que sais-je ? , Presses Universitaires de France, 1964. Drevermann H. et Travis D., Visualization using colour : visual presentation of events in particle physics , Behaviour & Information Technology, vol. 17, n 1, 1998. Galitz O.W., Human factors in office automation, Altlanta Life Office Management Association, 1980. ISO 9241, Exigences ergonomiques pour travail de bureau avec terminaux crans de visualisation (TEV), Norme internationale, 1992.

276

Bibliographie

Mayhew D.J., Principles and guidelines in software user interface design, Prentice-Hall, 1992. Norme X35-101, Principes ergonomiques de signalisation applicables aux postes de travail, AFNOR, 1978. Reynolds L., Colour for air traffic control displays , Displays, vol. 15, n 4, 1994. Reynolds L. et Metcalfe C., The Interim NATS Standard for the Use of Colour on Air Traffic Control Display, CS Report 9213, National Air Traffic Services,

Civil Aviation Authority, juillet 1992.

Sears A., Layout Appropriateness: Guiding interface design with simple task descriptions , Ph.D. Dissertation, University of Maryland Computer Science Department 1993. Solomon S.S. et King J.G., Fire Truck Visibility , Ergonomics in Design, vol. 5, n 2, avril 1997. Tullis T.S., Screen Design , Handbook of Human-Computer Interaction, Martin Helander (ed.), North Holland, 1988. Wiedenbeck S., The use of icons and labels in an end-user application program: an empirical study of learning and retention , Behaviour & Information Technology, vol. 18, n 2, 1999.

Chapitre 2 Dialogue homme-machine

Brown C.M.L., Human-Computer Interface Design Guidelines, Ablex, 1988. Fowler S.L., Stanwick V.R., The GUI Style Guide, Academic Press, 1995. Frohlich D.M., The history and future of direct manipulation , Behaviour & Information Technology, vol. 12, n 6, 1993. Galitz O.W., Human factors in office automation, Altlanta Life Office Management Association, 1980. Hutchins L.E., Hollan J.D., Norman D.A., Direct Manipulation Interfaces , User centered system design, Norman & Draper (eds.), Lawrence Erlbaum Associates, 1986. Mayhew D.J., Principles and guidelines in software user interface design, Prentice-Hall, 1992. Miller P.D., The Depth/Breadth Tradeoff in Hierarchical Computer Menus , Proceedings of the Human Factors Society Annual Meeting, 1981. Microsoft, Microsoft Inductive User Interface Guidelines, MSDN Library, Microsoft Corporation, 2001. Norman D.A., Cognitive engineering , User centered system design, Norman & Draper (eds.), Lawrence Erlbaum Associates, 1986. Shneiderman B., Designing the User Interface, Addison-Wesley, 1998. Tullis T.S., Screen Design , Handbook of Human-Computer Interaction, Martin Helander (ed.), North Holland, 1988.

Chapitre 3 Les erreurs et laide en ligne

Fowler S.L., Stanwick V.R., The GUI Style Guide, Academic Press, 1995.

Ouvrages cits dans le texte

277

Galitz O.W., Human factors in office automation, Altlanta Life Office Management Association, 1980. Haradji Y., Cadet P., Faveaux L., Concevoir des aides informatiques interactives et contextuelles , Actes de la confrence ErgoIA, 1996. Mayhew D.J., Principles and guidelines in software user interface design, Prentice-Hall, 1992. Nielsen J., Usability Engineering, Academic Press, 1993.

Chapitre 4 Dfinition et ciblage du site

Abramatic J.-F., Mission de dveloppement technique de lInternet, Rapport INRIA, 1999. Battey J., IBMs redesign results in a kinder, simpler Web site , InfoWord, 19 avril 1999. Bnard V., Comment choisir les contenus de votre site web ? La mthode ActionsDclencheurs , Veblog.com, 2001 (www.veblog.com). Berkun S., Leadership in collaboration: film making and interaction design, UIWeb.com, janvier 2002. Beta Research Inc., Web Site Usability, Usefulness, and Visit Frequency, Report No.: BRI-TR-150998, 1998. Bevan N., Usability Issues in Web Site Design, Proceedings of UPA98, 1998. Chen C.Y., Lindsay G., How to Lose a Customer in a Matter of Seconds , Fortune, vol. 141, n 12, 12 juin 2000. (www.fortune.com). Creative Good, Holiday 99 E-Commerce, Research report, 1999. Creative Good, E-recruiting : Online Strategies in the War for the Talent, Research report, 1999. Davis Z., White Paper One: Building a Great Customer Experience to Develop Brand, Increase Loyalty and Grow Revenues, ZD Studios, 1999 (www.zdinternetinc.com). Dong J., Martin S., Waldo P., A User Input and Analysis Tool for Information Architecture, IBM Austin Ease of Use, 1999 (www-3.ibm.com/ibm/easy). Fabris P., You Think Tomaytoes, I Think Tomahtoes , CIO Web Business Magazine, 1er avril 1999. Gaillard F., Comment adapter votre contenu aux besoins et usages rels des utilisateurs ? , Lettre Axance n 55, 2002 (www.axance.com) Germain M., Conduite du projet intranet, Economica, 2004. IBM, Web Design guidelines , IBM Company, 1999 (www-3.ibm.com/ibm/easy). Krug S., Zro prise de tte Quelques rgles simples et un zeste de bon sens pour concevoir des sites web intuitifs et efficaces, Dunod, 2001. Manning H. et al., Why Most Web Sites Fail, Interactive Technology Series, Forrester Research: 1998. Miller P.D., The Depth/Breadth Tradeoff in Hierarchical Computer Menus , Proceedings of the Human Factors Society Annual Meeting, 1981. Nielsen J., Usability Engineering, Academic Press, 1993. Nielsen J., Failure of Corporate Website, Jakob Nielsens Alertbox, 1998. Nielsen J., Cost of User Testing a Website, Jakob Nielsens Alertbox, 1998.

278

Bibliographie

Nielsen J., Who Commits The Top Ten Mistakes of Web Design?, Jakob Nielsens Alertbox, 1999. Nielsen J., First Rule of Usability? Dont Listen to Users, Jakob Nielsens Alertbox, 2001. Pilverdier S.-L., Gaillard F., Etude des principales difficults rencontres par les acheteurs en ligne, Atelier BNP-Paribas, Axance, 2001. Robertson J., Information design using card sorting, Intranet design series, Step Two Designs, 2001 (www.steptwo.com.au). Sonderegger P. et al., Why most B-To-B Sites Fail, Forrester Research Report, 1999. Zona Research, Zona Researchs Online Shopping Report, 1999.

Chapitre 5 La navigation web

Bnard V., Barres de navigation : Faut-il les jeter, veblog.com, 2001 (www.veblog.com). Berkun S., Fittss UI Law Applied to the Web, UIWeb.com, mai 2000. IBM, Web Design guidelines , IBM Company, 1999 (www-3.ibm.com/ibm/easy). Fitts P. M., The information capacity of the human motor system in controlling the amplitude of movement , Journal of Experimental Psychology, 47, 1954. Fleming J., Koman R., Web Navigation: Designing the User Experience, OReilly & Associates, 1998 Krug S., Zro prise de tte : Quelques rgles simples et un zeste de bon sens pour concevoir des sites web intuitifs et efficaces, Dunod, 2001. Levine R., Sun Guide to Web Style, Sun Microsystems, 1996. Nielsen J., The Top Ten New Mistakes of Web Design, Jakob Nielsens Alertbox, 1999. Nielsen J., Drop-Down Menus: Use Sparingly, Jakob Nielsens Alertbox, 2000. Nielsen J., Reduce Redundancy : Decrease Duplicated Design Decisions, Jakob Nielsens Alertbox, 2002.

Chapitre 6 La page web

Bnard V., Design : Faut-il brler Flash ?, veblog.com, 2001 (www.veblog.com). Casanova X. et Cohen J., Lcran efficace : une approche cognitive des objets graphiques , Documentaliste, Sciences de linformation, vol. 38, n 5-6, 2001. Chen C.Y., Lindsay G., How to Lose a Customer in a Matter of Seconds , Fortune, vol. 141, n 12, 12 juin 2000 (www.fortune.com). Cloninger C., Usability Experts are from Mars, Graphic Designers are from Venus , A List Apart, 2000 (www.alistapart.com). Cohen J., Lcran efficace : Trois lois fondamentales de la perception visuelle , Documentaliste, Sciences de linformation, vol. 37, n 3-4, 2000. Fuchs F., Ergonomie et efficacit , E-business: guide de rfrence 2003, Electronic Business Group (ed.), 2003. Gaillard F., Reneault D., Les premires secondes de lexprience utilisateur , Les cahiers de lentreprise-mdia, n 1, www.lamine.com, 2002.

Ouvrages cits dans le texte

279

Garcia D., Ernu J., Da Silva M., Rendre les sites Internet et intranet accessibles et faciles utiliser, livre blanc de Visual Friendly, Visual Friendly, 2002 (www.visualfriendly.com). IBM, Web Design guidelines , IBM Company, 1999 (www-3.ibm.com/ibm/easy). Ipsos Mediangles, Web Tracking Eye, juin 2001. Krug S., Zro prise de tte : Quelques rgles simples et un zeste de bon sens pour concevoir des sites web intuitifs et efficaces, Dunod, 2001. Levine R., Sun Guide to Web Style, Sun Microsystems, 1996. Macromedia, Manuel dutilisation de Dreamweaver 3, Macromedia Inc., 1999. Mulder S., Text Size Control with CSS, Webmonkey: The Web Developers Resource , 1998 (hotwired.lycos.com/webmonkey). Nielsen J., Why Frames Suck (Most of the Time), Jakob Nielsens Alertbox, 1996. Nielsen J., Inverted Pyramids in Cyberspace, Jakob Nielsens Alertbox, 1996. Nielsen J., How Users Read on the Web, Jakob Nielsens Alertbox, 1997. Nielsen J., Schemenaur P.J., Fox J. Writing for the Web, Sun Microsystems, 1998 (www.sun.com). Nielsen J., Who Commits The Top Ten Mistakes of Web Design?, Jakob Nielsens Alertbox, 1999. Nielsen J., Conception de sites Web, Lart de la simplicit, Campus Press, 2000. Rinaldi A.H., The Net: User Guidelines and Netiquette, Florida Atlantic University, 1998 (www.fau.edu/netiquette/net/index.html). Schenkmann B.N., T. Fukuda, Aesthetic, Web Pages and Eye Movements, TRITANA-D9711 CID-22 CID/NADA, Stockholm Royal Institute of Technology, 1997. Schenkmann B.N., Jnsson F.U., Aesthetics and Preferences of Web Pages , Behaviour & Information Technology, vol. 19, n 5, 2000. Spool J.M. et al., Web Site Usability : A Designers Guide, Series in Interactive Technologies, Morgan Kaufmann, 1998. Veen J., Faucet Facets: A few best practices for designing multifaceted navigation systems , Adaptive Path, 2002 (www.adaptivepath.com). W3schools, Browser Statistics, W3schools.com, dcembre 2004. (www.w3schools .com/browsers).

Chapitre 7 Mthodes de conception des interfaces

Andre A.D. et Segal L.D., The Users Perspective , Ergonomics in Design, vol. 6, n 3, July 1998. Baccino T., Bellino C., Colombi T., Mesure de lutilisabilit des interfaces, Lavoisier, 2005. Cardosi K., Human Factors in the Design and Evaluation of Air Traffic Control Systems and Air Traffic Control Electronic Checklist, US Department of Transportation, Federal Aviation Administration, Volpe National Transportation Systems Center, 1996. Cooper A., About Face 2.0 : The essentials of interaction design, Wiley Publishing, 2003.

280

Bibliographie

Daniellou F., Loprateur, la vanne, lcran : lergonomie des salles de contrle, ditions de lANACT, 1986. Gediga G., Hamborg K.C., Dntsch H., The IsoMetrics Usability Inventory : An Operationalisation of ISO 9241-10 , Behaviour & Information Technology, 1999. Hendrick H.W., Good Ergonomics is Good Economics , Ergonomics in Design, vol. 5, n 2, April 1997. Lin H.X., Choong Y.-Y., Salvendy G., Purdue University, A proposed index of usability : a method for comparing the relative usability of different software systems , Behaviour & Information Technology, vol. 16, no. 4/5, 1997. Lund A.M., Expert Ratings of Usability Maxims , Ergonomics in Design, vol. 5, n 3, July 1997. Maddox M.E. et Muto W.H., Three Mile Island : The Human Side , Ergonomics in Design, vol. 7, n 2, April 1999. Mayhew D.J., Principles and guidelines in software user interface design, Prentice-Hall, 1992. Meyer J. et Seagull F.J., Where Human Factors Meets Marketing , Ergonomics in Design, vol. 4, n 3, July 1996. Monk A., Wright P., Haber J., Davenport L., Improving your human-computer interface : A practical technique, Prentice-Hall, 1993. Nielsen J., Usability Engineering, Academic Press, 1993. Nielsen J., Why You Only Need to Test With 5 Users, Alertbox Useit.com, mars 2000. Scapin D.L. et Bastien J.M.C. Ergonomic criteria for evaluating the ergonomic quality of interactive systems , Behaviour & Information Technology, vol. 16, 1997. Scapin D., Guide ergonomique de conception des interfaces homme-machine, Rapport INRIA n 77, 1986. Sebillotte S., Mthodologie pratique danalyse de la tche en vue de lextraction de caractristiques pertinentes pour la conception dinterfaces, INRIA, Rapport technique n 163, 1994.

Conclusion
Norman D.A., The Invisible Computer, MIT Press, 1998.

Annexe A Ltre humain en situation de travail

Broadbent D.E., The magic number seven after fifteen years , Studies in Long Term Memory, A. Kennedy & A. Wilkes (eds.), Wiley, 1975. Card S.K., The Model of Human Processor: A model of making engineering calculations of human performance , Proceedings of the Human Factors Society 25th annual meeting, 1981. Card S.K., Moran T.P., Newell A., The psychology of human-computer interaction, Lawrence Erlbaum Associates, 1983. Flors C., La mmoire, coll. Que sais-je ? , n 350, 1972.

Ouvrages cits dans le texte

281

Hutchins L.E., Hollan J.D., Norman D.A., Direct Manipulation Interfaces , User centered system design, Norman & Draper (eds.), Lawrence Erlbaum Associates, 1986. Miller G.A., The magic number seven, plus or minus two , Psychological Review n 63, 1956. Norman D.A., Cognitive engineering , User centered system design, Norman & Draper (eds.), Lawrence Erlbaum Associates, 1986.

Annexe B Critres ergonomiques

Bastien C., Scapin D., Critres ergonomiques pour lvaluation dinterfaces utilisateurs, Rapport technique n 156, INRIA Rocquencourt, 1993. Darnell M.J., Bad Designs, http://www.baddesigns.com, 1999. Gediga G., Hamborg K.C., Dntsch H., The IsoMetrics Usability Inventory: An Operationalisation of ISO 9241-10 , Behaviour & Information Technology, 1999. Lin H.X., Choong Y.Y., Salvendy G., Purdue University, A proposed index of usability: a method for comparing the relative usability of different software systems , Behaviour & Information Technology, vol. 16, n 4/5, 1997. Norme Z67-110, Ergonomie et conception du dialogue homme-ordinateur, AFNOR, 1988. Norme Z67-133-1, valuation des produits logiciels : Dfinition des critres ergonomiques de conception et dvaluation des interfaces utilisateurs, AFNOR, 1991. Scapin D., Guide ergonomique de conception des interfaces homme-machine, Rapport INRIA n 77, 1986. Scapin D. et Bastien C., Ergonomic criteria for evaluating the ergonomic quality of interactive systems , Behaviour & Information Technology, vol. 16, 1997.

Webographie

283

Webographie
Le web nest pas seulement un domaine dtude, cest aussi une source dinformation pour les concepteurs. Vous trouverez ci-aprs un inventaire, non exhaustif, des principaux sites et blogs qui existent, au moment o jcris ces lignes, et fournissent des ressources utiles la pratique de lutilisabilit. Notez que cette liste est maintenue jour et actualise sur le site www.usabilis.com. ACM SIGCHI Lorsquon cherche une information sur les interfaces hommemachine, le meilleur point de dpart est, mon avis, le site de lACM Special Interest Group on Computer-Human Interaction (SIGCHI) qui comporte une multitude de liens vers des sites traitant aussi bien de la conception que du dveloppement des interfaces. http://www.acm.org/sigchi Adaptive Path Cabinet de conseil en ergonomie web, propose une lettre de diffusion traitant de la conception des sites et de la pratique de lutilisabilit. Sur le site, plusieurs tudes de cas montrent lapport de lergonomie au design dun site. http://www.adaptivepath.com AskTog Le site de Bruce Tognazzini, vanglisateur en interface utilisateur pendant 14 ans chez Apple, comporte de nombreux articles sur lutilisabilit et fournit des conseils sur la conception des interfaces homme-machine. http://www.asktog.com Baddesigns.com Le site de Michael J. Darnell recense des problmes dutilisabilit sur les objets de la vie de tous les jours. Bien quil sorte du cadre du logiciel, on y trouve une profusion dexemples montrant limportance de la dimension ergonomique dans la conception des produits de consommation. http://www.baddesigns.com Cortexte Sur son site, lentreprise Cortexte Communications propose aux responsables de publication et aux concepteurs web des ressources pour faciliter lapprentissage des procds de rdaction web : synthse des thories, rpertoire, lettre dinformation, conseil de la semaine, etc. http://www.cortexte.com

284 Ergonomie du logiciel et design web

Design for Lucy Lucy est la fois une personne unique et le symbole de lvolution de lhumanit. Lesprit de Design for Lucy, cest de considrer que chaque outil [...] doit tre conu en pensant dabord la personne qui va lutiliser. Cest ainsi que Frdric Fuchs prsente son site qui fournit des recommandations pour concevoir des sites web efficaces ainsi que plusieurs exemples de pages conues selon une approche ergonomique. http://www.designforlucy.com Ergolab Amlie Boucher propose sur le site Ergolab des ressources en ergonomie web et logiciel. Les articles, chroniques de livres et liens prsents abordent des thmatiques lies la conception centre utilisateur, lutilisabilit, laccessibilit et larchitecture de linformation. Les articles sont rpartis selon quatre thmatiques : questions existentielles, principes, lments dinterface et pratiques. http://www.ergolab.net Ergologique Ce site vise sensibiliser les concepteurs et techniciens multimdia la ncessit de rflchir sur lutilisabilit de linterface. Il propose des conseils vulgariss de conception ergonomique et des actualits quotidiennes autour de lergonomie et du multimdia. http://www.ergologique.com Ergonomie du web Alain Robillard-Bastien expose sur ce site des notions fondamentales sur la conception ergonomique de site web et sur lergonomie en gnral. Il y prsente en dtail une mthode de dveloppement orient utilisateur de site web. http://www.ergoweb.ca Fast Consulting Le site de lagence Fast Consulting fournit des recommandations pour la conception des interfaces sous forme dun guide de style indiquant pour chaque lment le meilleur contexte dutilisation ainsi que des conseils de conception. Il traite principalement des interfaces logicielles, et comporte galement une rubrique sur les applications web. http://fast-consulting.com HCI Index Hans de Graaff a rassembl sur son site un nombre impressionnant de liens vers les multiples aspects de linteraction homme-machine. http://degraaff.org/hci/ Ilatoofo Cest un site dont la vocation est daider les responsables de sites amliorer leurs sites en montrant les erreurs des sites professionnels. Un site visiter si vous cherchez ce quil ne faut surtout pas faire ! http://www.ilatoofo.com Human Factors International Le site Human Factors International comporte, entre autres, une synthse, illustre dexemples, des principales rgles dergonomie

Webographie

285

suivre lors de la conception des interfaces homme-machine. http://www.humanfactors.com Industrial USability Reporting Ce site cr linstigation de lInstitut amricain des normes (US National Institute of Standards and Technology, NIST) vise promouvoir la pratique de lutilisabilit en normalisant les tests dutilisabilit afin de partager les rsultats entre associations de consommateurs. http://zing.ncsl.nist.gov/iusr Information & Design Ce site prsente les principales mthodes employes en ergonomie informatique dans les phases danalyse, conception et valuation. http://www.infodesign.com.au Interaction Ce site est un portail francophone sur les interfaces hommemachine et lergonomie du logiciel. http://www.multimania.com/interaction Journal of Usability Studies Cr linitiative de lassociation des professionnels de lutilisabilit (UPA), le Journal of Usability Studies prsente des rsultats dtudes en ergonomie des interfaces (web, logiciel, tlphone, etc.). http:// www.upassoc.org/upa_publications/jus Maadmob Maadmob est une agence de conseil australienne spcialise dans la stratgie web et le design de site internet. Le blog de lagence comporte de nombreux articles sur larchitecture de linformation et les mthodes de tri par cartes. On trouvera en particulier un comparatif des diffrents outils de tri par carte. http://maadmob.com.au Microsoft Usability Lab Sur le site du laboratoire dutilisabilit de Microsoft se trouvent la plupart des articles et guides de styles qui ont t publis par les chercheurs. Il est galement possible de sinscrire comme cobaye pour des tests ! http://www.microsoft.com/usability QualityStreet Cest lun des rares blogs sur lergonomie informatique. Conu par Jean-Claude Grosjean, ergonome spcialis dans les mthodes et les processus de dveloppement logiciel, le blog prsente les mthodes Agiles, la dmarche ergonomique et traite galement de gestion de projet, qualit et accessibilit. http://www.qualitystreet.fr Recipe for a Successful Website Nathan Shedroff nous explique, par une recette de cuisine , comment faire un bon site. http://www.nathan.com/thoughts/recipe SELF Le site de la Socit dergonomie en langue franaise prsente lassociation et fournit des renseignements utiles sur lergonomie et le mtier dergonome. http://www.ergonomie-self.org

286 Ergonomie du logiciel et design web

STC Usability Web Site Le groupe dintrt sur lutilisabilit de la STC (Society for Technical Communication) a rassembl sur ce site une profusion de ressources sur la pratique de lutilisabilit. http://www.stcsig.org/usability Step Two Designs Step Two Designs est une agence de conseil spcialise dans la gestion de la connaissance (knowledge management). Plusieurs articles didactiques sur la problmatique du savoir dans lentreprise, la gestion du contenu et les intranets sont disponibles sur le site. http://www.steptwo.com.au Temesis La qualit est un domaine troitement li celui de lutilisabilit. Le blog de Temesis est un des rares blog ddi la qualit des sites web. On y trouvera de nombreux articles. http://blog.temesis.com UI Patterns UI Patterns est une bibliothque de schmas de conception (design patterns) destins rpondre des problmatiques de conception spcifique pour des sites ou des applications web. Pour chaque problmatique, un exemple est fourni ainsi quune fiche explicative prcisant lusage du modle. http://ui-patterns.com UPA Le site de lUPA (Usability ProfessionalsAssociation) est une mine de ressources sur la dmarche centre utilisateur. La mthode et les bnfices de la dmarche y sont prsents en dtail. On trouve galement sur le site de nombreuses ressources pour mettre en place une dmarche ergonomique. http://www.upassoc.org Usabilis Usabilis est lagence de conseil que jai fond. La rubrique Ressources du site dcrit les principales mthodes de conception oriente utilisateur. On y trouvera galement des articles sur lergonomie applique la conception des applications informatiques. http://www.usabilis.com Usability Body of Knowledge Usability Body of Knowledge est un site collaboratif (wiki) visant prsenter les diffrents aspects du mtier dergonome. Les principales mthodes de la dmarche y sont dcrites. http://www.usabilitybok.org Usability First Le site de lagence de conception de site web Diamond Bullet introduit la pratique de lutilisabilit et prsente des ressources sur le sujet. http://www.usabilityfirst.com Usability.gov Ce site, conu linitiative du National Cancer Institute (NCI), prsente une liste impressionnante de ressources sur la pratique de lutilisabilit. Il comporte en particulier un recueil de recommandations pour la conception de sites web dans lequel chaque rgle est pondre par deux critres : son importance dans la russite du

Webographie

287

site (Relative Importance) et la force des preuves venant appuyer cette recommandation (Strength of Evidence). Ces lments vont faciliter les choix de conception et les compromis invitables lors du dveloppement du site. http://usability.gov Usability Institute Le Usability Institute propose non seulement plusieurs livres blancs et articles sur lutilisabilit, mais aussi une bibliothque de composants gnriques pour des applications web, comportant une feuille de style, des icnes et des boutons. On trouve aussi sur le site un modle dexigences ergonomiques inclure dans les appels doffres. http://www.usabilityinstitute.com Usable Web Usable Web, maintenu par Keith Instone, comporte une multitude de liens sur la pratique de lutilisabilit, en particulier sur la conception des sites web. http://www.usableweb.com Useit.com Le site de Jakob Nielsen est probablement le plus connu dans le domaine de lutilisabilit. Il publie rgulirement une lettre, appele alertbox, o il fait part de ses rflexions sur lutilisabilit des sites web et des technologies associes. http://www.useit.com User Interface Engineering Le site User Interface Engineering contient plusieurs livres blancs sur la problmatique de lergonomie lors de la conception dun service en ligne. Il publie une lettre dinformation sur lutilisabilit des technologies web. http://www.uie.com UX matters UX matters est un blog qui regroupe de nombreux articles sur la conception des interfaces et les mthodes de dveloppement orientes utilisateur. Il couvre largement le domaine depuis les technologies utilises, les mthodes, le management, lorganisation, ainsi que les ressources (livres, confrences, etc.). http://www.uxmatters.com Veblog Bien quil ne soit plus maintenu depuis 2003, le site de Vincent Bnard fourmille de conseils pratiques sur la conception des sites web et les technologies Internet en gnral. http://www.veblog.com Web Content Accessibility Guidelines 1.0 Le consortium W3C (World Wide Web Consortium) a dit sur ce site des recommandations pour rendre les pages accessibles aux personnes handicapes (accessibilit). http://www.w3.org/tr/wai-webcontent Welie.com Le blog de Martijn van Welie fournit une bibliothque dtaille de schmas de conception (design patterns). Des recommandations accompagnent chaque modle ainsi que des exemples dinterfaces. Le site prsente prin-

288 Ergonomie du logiciel et design web

cipalement des exemples pour le web mais certains schmas peuvent tre rutiliss pour des interfaces logicielles. http://www.welie.com Guides de style pour la conception des interfaces La plupart des systmes dexploitation proposent une documentation en ligne de linterface homme-machine. Ces sites, gnralement volumineux, sont appels guides de style . Ils fournissent les rgles et les principes dergonomie respecter pour concevoir des interfaces homognes et ergonomiques. Apple Human Interface Guidelines http://developer.apple.com/documentation/UserExperience Windows Vista User Experience Guidelines http://msdn2.microsoft.com/en-us/library/aa511258.aspx GNOME Human Interface Guidelines 2.0 (Linux) http://library.gnome.org/devel/hig-book/stable Java Look and Feel Design Guidelines Ce guide de style a galement t publi sous forme papier : Java Look and Feel Design Guidelines, Addison-Wesley Professional, 2001 http://java.sun.com/products/jlf iPhone Human Interface Guidelines for Web Applications http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG

Index

289

Index
A
Abrviations 28 Accessibilit 182 Activit 252 Aide contextuelle 50 en ligne 90 ALT 149, 182 Analyse de la tche 212 Animations 184 Arborescence 116 Architecture de communication 111 Attente voir Temps de rponse Audit ergonomique 229 Avancement 75 Charge mentale 263 Charte graphique 178 Check-list 267 Chemin de progression 152 Ciblage 109 Clavier 65 Clic maintenu 73 Clignotement 21 Compatibilit 254 Composant de slection 53, 202 Conception des interfaces 205 oriente utilisateur 208 Contrle utilisateur 261 Couleur 6, 27 codage couleur 9 Critres ergonomiques 254

B
Barre de navigation 138 Bnfice 206 Bouton 52 de navigation 148 de slection voir Composant de slection radio voir Composant de slection

D
Daltonisme 8 Dialogue homme-machine 37 organisation 38 souris 71 Distinction 257 Double-clic 72

E C
Cadres 174 Carte du site 134 Case cocher voir Composant de slection Champ de saisie 54, 199 E-business 101 cran agencement 1 couleur de fond 11 criture web 192 Encadrement 26, 164

290

Ergonomie du logiciel et design web

Enqute utilisateur 210 Erreur 404 117 Erreurs 77, 261 cognitives 81 correction des erreurs 85 dexcution 79 dintention 78 messages derreur 86 motrices 82 perceptives 80 prvention des erreurs 83 valuation ergonomique 229, 264 valuation par inspection 229 grille dvaluation 230 test dutilisabilit 232 Explorateur 40

Images 181 cliquables 183 format 186 Incitation 257 Index thmatique 128 Interface homme-machine 1 Interview 109 Interviews utilisateur 210 Intranet 121 Moteur de recherche 125 Structure du site 124 Inversion vido 22

J
Jauge 76

F
Feed-Back 258 Fentres de dialogue 44 multi-fentrage 41 Feuille de style 179, 198 Flash 184 Flexibilit 260 Focus group 109, 214 Forme 24 Formulaires web 199 Frames 174

L
Langage de linterface 27 criture web 192 Libell des commandes 28 Liens 154, 190 locaux 170 Liste puces 195 de slection 147, 201 voir Composant de slection

M
Manipulation directe 65 Maquettage 223 papier 228 Mmoire court terme 248 Mmorisation 81 Menu 58 contextuel 62 droulant 59, 143 Messages 29 derreur 86 voir Erreurs Mthode des incidents critiques 213 Mise en vidence 20 Modle du Processeur Humain 246 Moteur de recherche 125, 134

G
Graisse 22 Graphisme interface homme-machine 6 site internet 178 Groupement 25, 164, 257 Guidage 257

H
Hirarchie visuelle 166 Homognit 259

I
Icnes 15

Index

291

N
Navigation interface homme-machine 38 intranet 123 site internet 115, 129

O
Onglets 51, 145

P
Page agencement 162 daccueil 174 longueur de la page 168 Palette web-safe 188 Parcours visuel 2, 164 Personas 217 Pistes graphiques 227 Poids de la page 171 Polices de caractres 14, 23, 196 lisibilit 16, 196, 259 Pop-up menu voir Menu contextuel Positionnement 3 Prvention des erreurs 83 Profondeur de couleurs 188 Prototypage 223 Proximit voir Groupement Puces 25, 195 Pyramide inverse 193

contenu 109 graphisme 178 navigation 129 organisation visuelle 162 rdactionnel 189 structure 112 tests 106 vie du site 117 Situation de travail 213 Slogan 175 Son 26 Soulignement 24 Souris 71 Sous-menu 143 Statistiques 117 Story-boards 228

T
Tche 39, 212, 251 Taille 23 Tlchargement 157 Temps de rponse 73 Test dutilisabilit 108 de perception 106, 240 utilisateur 232 Texte voir Langage de linterface Thorie de laction 67, 249 Thorie de la forme 162 Touches de fonction 64 Trac rgulateur 3 Tri par carte 112, 221 Trouvabilit 223

R
Reconnaissance vocale 96 Regroupement voir Groupement Rsolution dcran 172 Retour utilisateur 258 Russites commerciales 208 Rollover 150

U
Utilisabilit bnfice 100, 122 dfinition viii russites commerciales 208 Web 99 Utilisateur moyen 105

S
Sablier 75 Sensibilit de lil 7 Site internet 99 ciblage 109

V
Vue globale 40, 132

292

Ergonomie du logiciel et design web

W
Web-safe 188 Wireframe 224 Zoning 227

INFOPRO

TYPE DOUVRAGE L'ESSENTIEL SE FORMER RETOURS D'EXPRIENCE

MANAGEMENT DES SYSTMES D'INFORMATION

Jean-Franois Nogier

APPLICATIONS MTIERS TUDES, DVELOPPEMENT, INTGRATION

ERGONOMIE DU LOGICIEL ET DESIGN WEB

Le manuel des interfaces utilisateur
Cet ouvrage sadresse toutes les personnes impliques dans la conception et le dveloppement de logiciels ou de sites Internet, en particulier celles en charge des spcifications et de linterface homme-machine, mais aussi les chefs de projet, les chefs de produit et les commerciaux. Aussi performant soit-il, aucun logiciel ou aucun site web ne connatra le succs sil nest pas galement facile utiliser. Lutilisabilit est devenue une des cls de la russite commerciale dans le monde de linformatique. Dlibrment pragmatique, cet ouvrage fait la synthse des tudes menes dans le domaine de lergonomie du logiciel et des sites Internet. Du choix des couleurs et des polices de caractres lorganisation des composants de linterface, de la conception du systme de navigation dun site Internet aux spcificits graphiques dune page web, il propose des mthodes et donne des conseils pratiques pour rendre le dialogue homme-machine le plus simple et le plus efficace possible. Vritable guide de conception, louvrage comporte plusieurs check-lists qui permettront aux quipes de dveloppement dappliquer facilement les principes ergonomiques. Retrouvez toutes les sources et les supplments de louvrage sur le Web.

EXPLOITATION ET ADMINISTRATION RSEAUX & TLCOMS

4 e dition

JEAN-FRANOIS NOGIER Docteur ingnieur en informatique, il a men lessentiel de sa carrire dans le domaine des interfaces homme-machine chez IBM et Thales. Fondateur de lagence de conseil Usabilis (www.usabilis.com), il accompagne les entreprises dans la conception des produits web et logiciel. Il enseigne lergonomie du logiciel luniversit Paris Dauphine, lINT et Suplec.

ISBN 978-2-10-053749-5

www.dunod.com