Vous êtes sur la page 1sur 310

DVELOPPEMENT

ERGONOMIE
DU LOGICIEL
ET DESIGN WEB
TUDES

Le manuel des interfaces utilisateur

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 v

Table des matires

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

Chapitre 1 Lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Agencement de lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Graphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.1 Couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.2 Polices de caractres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2.3 Icnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.2.4 Techniques de mise en vidence . . . . . . . . . . . . . . . . . . . . . . 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 Multi-fentrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.2.2 Fentres de dialogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.2.3 Boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
2.2.4 Composants de slection . . . . . . . . . . . . . . . . . . . . . . . . . . 53
2.2.5 Champs de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
2.3 Menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
2.3.1 Avantages et inconvnients . . . . . . . . . . . . . . . . . . . . . . . . 59
vi Ergonomie du logiciel et design web

2.3.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
2.3.3 Menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
2.4 Touches de fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.4.1 Avantages et inconvnients . . . . . . . . . . . . . . . . . . . . . . . . 64
2.4.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.5 Manipulation directe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.5.1 Avantages et inconvnients . . . . . . . . . . . . . . . . . . . . . . . . 66
2.5.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.5.3 Souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.6 Temps de rponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Chapitre 3 Les erreurs et laide en ligne . . . . . . . . . . . . . . . . . . . . 77


3.1 Traitement des erreurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
3.1.1 Erreurs dintention . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
3.1.2 Erreurs dexcution . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
3.1.3 Erreurs perceptives . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
3.1.4 Erreurs cognitives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
3.1.5 Erreurs motrices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
3.1.6 Prvention des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . 83
3.1.7 Correction des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . 85
3.1.8 Messages derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
3.2 Aide en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
3.2.1 Diffrentes aides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
3.2.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
3.3 Linterface idale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Chapitre 4 Dfinition et ciblage du site. . . . . . . . . . . . . . . . . . . . . 99


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 Identification 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 Menu droulant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
5.2.2 Les onglets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
5.2.3 Liste de slection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
5.2.4 Boutons de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
5.2.5 Rollover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
5.3 Chemin de progression (ou fil dAriane). . . . . . . . . . . . . . . . . . . . 152
5.4 Liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
5.5 Vrifier 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 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
6.3.2 Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
6.3.3 Format des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
6.3.4 Palette web-safe et profondeur graphique . . . . . . . . . . . . . . . . . 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 bnfice ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Modle du processeur humain . . . . . . . . . . . . . . . . . . . . . . . . 246
A.2 Thorie de laction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
A.3 Tche et activit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

B Critres ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254


B.1 Compatibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
B.2 Guidage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
B.3 Homognit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
B.4 Flexibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
B.5 Contrle utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
B.6 Traitement des erreurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
B.7 Charge mentale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
B.8 Check-list dvaluation ergonomique. . . . . . . . . . . . . . . . . . . . . 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 quoti-
dienne ; 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 tou-
jours 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 per-
sonne donne pour raliser la tche pour laquelle il a t conu. La notion duti-
lisabilit 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 linforma-
tique , 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 ergo-
nomes 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 utilisa-
bilit .
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, luti-
lisabilit est une condition majeure de russite du projet. Le retard dans le dve-
loppement 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 budg-
taires, 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 inten-
tions 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 logi-
ciel. 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 peu-
vent 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. Sui-
vre ces recommandations permet dviter les principaux cueils afin de se con-
centrer sur les particularits du logiciel dvelopp.

Audience
Ce livre fait la synthse des rgles issues des diffrentes tudes et exprimenta-
tions menes au cours des dernires annes dans le domaine de lergonomie du
logiciel. Il donne des conseils pratiques et prsente des mthodes afin de conce-
voir 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 homme-
machine 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 sp-
cifications 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 gra-


phisme de linterface, les polices de caractres et les textes. Le dialogue homme-
machine 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 navi-
gation 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 sappu-
yant 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 dvelop-
pement dun logiciel, en particulier les tests utilisateur et le maquettage/proto-
typage. 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 dva-
luation.
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 scien-
tifique 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 linfor-
mation. 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 Paris-
Dauphine, 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 luti-
lisateur 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

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. Fina-
lement, 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.
2 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 sup-
port 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 slec-
tive, 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 vi-
dence une information [Chapman 93]. En effet, plus la charge de travail aug-
mente, 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 3

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 caractris-
tiques standard de visibilit et daccessibilit des zones de lcran.

La position des informations doit tre cohrente.

Un positionnement cohrent des objets de linterface contribue lhomog-


nit 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).
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 Office 95.
1.1 Agencement de lcran 5

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 doi-
vent 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 afin 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.
6 1. Lcran

Regrouper les informations.

Le regroupement sert de base lagencement des diffrents objets de linter-


face. 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 com-
position 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 homme-
machine. 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 homo-
gne, 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 7

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 exprimen-
tations 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.
8 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 pr-
caution car elles posent des problmes de lisibilit pour le texte.

Utiliser la couleur et un autre moyen de mise en vidence pour afficher une infor-
mation 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 ngli-
geable dhommes (8 %), mais quon le rencontre moins frquemment dans la
population fminine (0,4 %). Il est donc prfrable de ne pas sappuyer unique-
ment 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 ga-
lement 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 9

Codage couleur
Le codage couleur, appel aussi code des couleurs, consiste associer chaque cou-
leur de linterface une signification prcise et uniforme pour lensemble de lappli-
cation. 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. Inver-
sement, 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 sou-
venir, 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.

Signalisation Cartographie
Finance Chimie Cartographie
routire routire

Rouge Perte Chaud Interdiction Nationale

Vert Secours Fort Touristique

Jaune Avertissement Dsert Dpartementale

Bleu Froid Obligation Mer

Noir Gain

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 pr-
cisment 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 agres-
sivit linterface. Il est gnralement source de fatigue visuelle lors dune utili-
sation 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 habituel-
lement 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 appa-
raissent 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 dis-
tinctes aux yeux de lutilisateur. La couleur ne doit pas entraner de confusion ou
retarder la comprhension dune information. Pour le vrifier, il suffit de deman-
der 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 nom-
breux 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. Identifier les objets ou les donnes afficher.


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 seule-
ment 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 chroma-
mtre, 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 signa-
ltique 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 dharmo-


nisation 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. Linterprta-
tion 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 figure 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 facili-
tent 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 consi-
dre 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 Contrainte de lisibilit


Hauteur minimale du caractre (h) h > 2,8 mm pour d = 50 cm
en fonction de la distance de lecture (d) h > 3,5 mm pour d = 60 cm
h > 4 mm pour d = 70 cm
paisseur du trait (e) h/12 < e < h/6
Largeur du caractre (l) 0,7 h < l < 0,9 h
Espacement entre caractres (esp) esp > e
Espacement entre lignes (E) h < E < 1,5 h
Matrice de points 7 x 9 pixels minimum
Type de police Police droite de prfrence
Italique 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 asso-
cie 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 gn-
ralement 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 : Modifier 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 duti-
lisabilit 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 signification 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 ludi-
que au logiciel qui, de ce fait, semble plus facile utiliser. Toutefois, les expri-
mentations 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 Description Exemple

Ressemblance Licne reprsente une image de lobjet.

Descriptif Licne reprsente laction et lobjet sur lequel elle


porte, voire lobjet avant et aprs lexcution de la
commande.

Exemple Licne dcrit une utilisation typique de lobjet.

Caricature Licne reprsente une caractristique remarquable


de la commande.

Analogie Licne reprsente des liens smantiques


avec lobjet : soit lobjet fonctionne de manire
semblable (mtonymie), soit il sagit dun
glissement de sens (mtaphore).

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 pic-
togrammes 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 dif-
ficile 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 difficile 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 laffichage des icnes permet lutilisateur de gagner
de la place lcran en affichant 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 rap-
prochement, 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 dis-
perser 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, linter-


face 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 uti-
liss. 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 correspon-


dant ou laction de lutilisateur.

La mise en vidence reflte ltat dun objet. Il convient cependant que luti-
lisateur 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 correcte-
ment les techniques visant mettre en vidence un objet lcran.

Clignotement
Le systme visuel humain est particulirement sensible aux mouvements, en par-
ticulier 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 vi-


dence 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 lincon-


vnient 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 gra-
phique 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 homme-
machine. 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 maxi-


mum) 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 affi-


che 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 interpr-
tation (a). Une fois les informations correctement regroupes, la signification 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 luti-
lisateur 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 particu-


lier 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 alar-


mes 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 compr-
hension 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. Cepen-
dant, 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 linter-
face 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 mmori-


sation. 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 Mot Abrviation

Troncature Rotation Rotat.

Premires lettres du mot Rotation Rot.

Effacement des voyelles Rotation Rttn

Initiales du mot Rotation vers la droite RD

Premires lettres et initiales Rotation vers la droite RotD

Effacement des voyelles et troncature Rotation 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 luti-
lisateur 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 25 pages imprimes.


dimpression, 25 pages du
document XXX ont t imprimes.

(a) Dconseill (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

Utilisateur expriment
Valeur Nb billet errone. Erreur : Nb billet doit
tre infrieur 10.

Dconseill 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 Sauvegardez votre session


avant de sauvegarder votre avant de quitter.
session.

Dconseill Prfrable

Figure 1.31 La forme affirmative 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 Pour afficher la grille des


est affiche aprs avoir programmes, slectionnez la
slectionn la chane TV. chane TV correspondante.

Dconseill 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. Saisissez votre code puis


Appuyez sur Validation.
Dconseill
Prfrable

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 coh-
rent 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 affiche
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 voca-
bulaire utilis dans linterface doit tre dfini et mis jour au cours du projet.

Pour afficher les chanes, Pour afficher les chanes TV,


slectionner la page Chanes slectionner Chanes
Pour visualiser les Pour visualiser les
programmes des stations TV, programmes TV,
activer Programmes slectionner Programmes

Dconseill 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 Action attendue

Saisissez votre code Saisie clavier

Appuyez sur "Enter" Appui sur une touche

Tapez "Enter" Appui ou saisie ?

Il convient galement dtre homogne avec le reste du graphisme de linter-


face, en particulier avec celui des touches du clavier (figure 1.39).
36 1. Lcran

Appuyez sur la touche Appuyez sur la touche


"Backspace" " BkSp"

Dconseill 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 Pour afficher laide,


laide et sur F5 pour Appuyer sur F1
rafrachir limage Pour rafrachir limage,
Appuyer sur F5

Dconseill Prfrable

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 com-
posants. Puis les trois autres modes de dialogue sont abords : les menus, les tou-
ches 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 lutili-
sateur dexplorer facilement le logiciel pour quil puisse y trouver les fonctionna-
lits 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 dialo-
gue 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 luti-
lisateur.
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 nces-


saire 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, vrifier 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 reve-


nir 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 homme-
machine est le guidage.

Guider lutilisateur pour faciliter la navigation.

La navigation dans un logiciel est une mtaphore pour dsigner le chemine-


ment 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 par-
couru en prsentant les diffrents choix quil a effectus. Cette technique est
frquemment utilise dans les applications web (chemin de progression).

Figure 2.3 En affichant 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 fichiers (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 recouvre-
ment. Le tuilage est une organisation fixe des fentres sans possibilit de dplace-
ment. 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 propre-


ment dite. Plus elle sera simple, plus linterface semblera facile utiliser. Les
diffrentes commandes lies au multi-fentrage, cest--dire lactivation, louver-
ture, 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 lutili-


sateur 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 dorganisa-


tion 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 claire-
ment 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 tou-
tefois 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 cha-


cune dentre elles. Pour la mme quantit dinformation, lorsque le nombre de
fentres diminue, le contenu de chacune dentre elles augmente. Elles devien-
nent 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 pr-
sente lintrt dtre facile comprendre. En effet, le fonctionnement du logiciel
transparat au travers de la fentre. Des textes ou des graphiques peuvent expli-
quer 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 four-
nit 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 contien-
nent. 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 impor-
tant 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 dafficher 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 com-
posants 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 dutili-
sabilit 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


artifices 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 lec-
ture. 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 cel-


les 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 dafficher 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 affich
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 per-
mettent 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 lappli-
cation.

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. Lutilisa-
tion 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 exprimen-


ts. 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 lappa-
rence 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 prf-
rable 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 bou-
tons, 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 Visibilit Commandes Place Utilisateur
sur la zone constante frquentes rduite dbutant
de travail

Bouton X X X

Menu contextuel X X X

Menu droulant X X
2.2 Conception des fentres 53

La principale diffrence entre le menu (voir 2.3) et le bouton est son carac-
tre phmre ; il napparat que sur action de lutilisateur et disparat ds slec-
tion 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 slec-
tion.

Tableau 2.2 Choix des composants de slection.

Les choix
Jusqu Jusqu Place Plus de
peuvent
5-6 choix 10-12 choix rduite 12 choix
changer
Bouton de slection X
Liste de slection X X X
Liste X X

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 comprhensi-


bilit 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 dfilement 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 slec-


tion 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 sensi-
blement le risque derreur.
Finalement, lors de la conception dune interface homme-machine, la ques-
tion 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 difficile 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 paral-
laxe 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 ocu-
laires 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 justifica-
tion 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 com-


mandes. Il peut prendre deux formes. Sil apparat au-dessus de lobjet de linter-
face 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 com-
mandes disponibles un moment donn. Si certaines dentre elles ne sont pas
autorises, elles apparaissent inactives, en gris, dans le menu. Le fonctionne-
ment 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 com-
mande prennent du temps et ncessitent une certaine prcision. De plus, le dia-
logue 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 pos-
sible 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 problma-
tique 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 pos-
sde 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 fr-
quente sur un menu. Il faut absolument viter que ce voisin ne soit destructeur
par erreur. Cest pourquoi les commandes Effacer ou Quitter seront syst-
matiquement 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 com-


mandes 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 laffichage
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 direc-
tement 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 con-
trle 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 tou-
ches soit explicite et quaucune combinaison de plusieurs touches (appui simul-
tan) 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 applica-
tions 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 retrou-


vent 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 interrup-


teur, 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 comman-
des 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 corres-
pondants lcran.

Lorsque les touches contrlent des composants de lcran, il est recommand


que leurs positions respectives soient homothtiques, afin den faciliter lappren-
tissage.

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 com-
mande 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 com-
mande. 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 mani-
pulation 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 mini-
miser 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 permet-
tront 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 affiches
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 suffit 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 plu-
part 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 gra-


phique des objets, il est essentiel de fournir un retour visuel aux actions de luti-
lisateur. 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 modi-
fiant la forme du pointeur souris ou en affichant de faon continue lobjet, ou
sa silhouette, lorsque lutilisateur le dplace. Par ailleurs, le retour peut ga-
lement 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 dappren-
tissage 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 gui-


dage 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 dia-
logue 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 nom-
breux 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 pos-
sibilit de chaner plusieurs commandes.
2.5 Manipulation directe 71

Amliorer la prcision des saisies.

Les manipulations la souris requirent parfois une prcision qui rend linte-
raction 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 dia-
logue. 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 lhomo-
gnit.

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 dif-
ficiles 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 luti-
lisateur 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 com-
mande 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 luti-
lisateur 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 quventuel-
lement le temps perdu par erreur et finalement, le temps mis pour corriger ces
erreurs. Cest en rduisant ces diffrentes dures que lon diminuera effective-
ment 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 luti-
lisateur faire des efforts pour conserver en mmoire les informations ncessaires
pour continuer lchange. Dans le cerveau humain, les informations se main-
tiennent en mmoire court terme pendant une dure de 2 6 secondes. Au-
del, 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 appren-
dre, mme sil est plus lent. Au contraire, lutilisateur expriment accepte un
systme plus complexe, sil est plus rapide. Il importe donc dtablir un compro-
mis 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 com-
met 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 suffit pour avertir lutilisateur.

Si lattente est estime suprieure 6 secondes, un message doit prciser lavan-


cement 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 davance-
ment 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 afin 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, lutili-
sateur 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 pr-
frable 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 per-
ue 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 logi-
ciel. 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 dex-
cution. On commet une erreur dintention lorsque la manire de faire est cor-
recte, 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. Linter-
face 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 cor-
rectement 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 pro-
cesseur 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 visuel-
lement 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, lutilisa-


teur 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 doi-
vent 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 coordina-
tion 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 linte-
raction 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 mouve-


ments 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 modi-
fication, 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 prsen-


tation 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 saffiche 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 gn-
ral, 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 lutili-
sateur. 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 pour-
quoi 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 for-
mation 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 con-
trle 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

Dconseill Prfrable

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 luti-


lisateur mieux comprendre la cause de son erreur.

Erreur dcriture sur disque Disque plein

Dconseill 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

Dconseill Prfrable

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 Le nombre de billets doit tre


nombre de billets infrieur 10, sinon utilisez
la commande Billets Groups

Dconseill Prfrable

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 : Erreur : Valeur non reconnue


Mauvaise saisie !!!

Dconseill 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 ga-


lement le langage employ qui sera ainsi lu plus rapidement.

Inacceptable Non accept


Impossible reconnatre Non reconnu
Traitement avort Traitement non excut

Dconseill 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 Commande non accepte


accepter cette commande !

Dconseill 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 gn-
ralement 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 tlphoni-
que [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 logi-
ciel 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 sins-
crire 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 lutili-


sateur 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 ga-
lement 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 gnra-
lement. 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 cou-
ramment 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 luti-


lisateur.

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 navi-
gation dans le logiciel. Par exemple, pour les barres de menu, une vue de lint-
gralit 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. Vous devez sauvegarder


Attention si vous navez pas vos Prfrences avant de quitter
sauvegard vos Prfrences, lapplication.
ellesseront perdues lorsque Sauvegardez vos Prfrences
vous aurez slectionn Quitter. en utilisant le menu Session,
puis quittez lapplication
en slectionnant Quitter.

Dconseill Prfrable

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 Pour mmoriser les fentres


Prfrences, il est possible affiches, slectionnez
de mmoriser les fentres le menu Prfrences.
affiches.

Dconseill 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 Pour confirmer la slection,


confirmer la slection, utilisez le bouton OK.
puis appuyer sur Fermer Effacer la fentre
pour effacer la fentre. en appuyant sur Fermer.

Dconseill 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 Cliquez sur OK

Dconseill Prfrable

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

Pour conclure, rappelons que laide en ligne permet lutilisateur de com-


prendre 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 per-
mettre dviter les erreurs. Laide en ligne ne rsout pas les problmes dutilisabi-
lit. 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 apparais-


sent 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 sup-
plantera pas le clavier, en particulier pour le traitement de texte. En effet, un dac-
tylo 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 par-
faitement 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 permet-
tent 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 nom-
breux et peu expriments. Cest gnralement le cas des sites web o, contraire-
ment 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 linforma-
tique. Lutilisabilit est donc primordiale, pour ne pas dire vitale, pour un site web.
Ce chapitre prsente la dmarche de dfinition dun site. Aprs avoir intro-
duit 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 regrou-
pant un ensemble dentreprises. Les applications web1 touchent un public large,
majoritairement novice en informatique. Cependant, et cest paradoxal, linter-
face 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 lutilisa-
bilit 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-com-
merce. 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 aban-
donnent au moins une fois en cours de transaction [Zona 99 cit dans Davis 99].
En particulier, les formulaires en ligne, ncessaires pour accder certains ser-
vices, 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 pro-
blmes 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 dif-
ficults 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 pro-
cessus 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, intressons-
nous aux cinq comptences principales ncessaires la phase de conception.
Intervenant en amont, le responsable communication/marketing dfinit les objec-
tifs 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 navi-
gation 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 main-


tenance 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 respec-
tant la ligne de communication du site. Il intgre les visuels raliss par le respon-
sable 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 utilisa-
teurs finaux. Elle passe en gnral par la mise en place dquipes intgres.

Par certains aspects, le dveloppement web ressemble la production cin-


matographique [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 gra-
phiste privilgiera le ct artistique, linformaticien le ct fonctionnel, le com-
mercial la mise en valeur du produit tandis que le responsable marketing sintres-
sera 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 lutili-
sateur ? 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 leffica-
cit 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 ru-
nions 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 diff-
rents 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 pre-
mires 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 repr-
sentativit et donc le mme profil dutilisateurs. En effet, lorsque les mmes utili-
sateurs participent pour la seconde fois un test, leur comportement est gnrale-
ment 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 luti-
lisateur 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 signifient-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 com-


prend la faon dutiliser le site et quil interprte correctement le vocabulaire
utilis. Il peut tre aussi loccasion de valider la charte graphique auprs des utili-
sateurs 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 affiche 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 ser-
vices 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 linter-
naute, en particulier le libell des liens. Il peut aussi valuer la facilit de mmo-
risation 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 per-
met de construire des pistes concrtes damlioration du site.
Lutilisabilit du site peut galement tre mesure en sappuyant sur la per-
formance 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 vrifier 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 commu-
nication 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 utilisa-
teurs du service propos et ce quils en attendent. Les focus group servent iden-
tifier 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 uni-
quement 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, luti-
lisabilit 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 popu-
lation 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 concur-
rentiel 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 frquen-
tation.
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 sidentifier ?
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 suffisamment 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 proc-
dures et des documents en vigueur dans lentreprise. La rubrique Rfrentiel
112 4. Dfinition et ciblage du site

Figure 4.8 Pour tre efficace, 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 syn-
thtise 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 cons-
truites 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 infor-
mations 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 infor-
mations quil cherche. Dans cette optique, le tri par carte vise organiser les dif-
frentes 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


refltait la structure interne de linstitution, chaque comptence disposant dune rubrique.
Malheureusement, lhabitant du Territoire de Belfort y trouvait difficilement les informa-
tions 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 ra-
liser et permet dobtenir des rsultats plus riches car il tire partie de la dynamique
crative du groupe. Mais certaines personnes peuvent avoir des difficults expri-
mer 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 rapi-
dement 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 nom-
breux 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.)

(3-4 niveaux max.)


Profondeur du site
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.

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 bifur-
cation 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 fonction-
nement 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 prio-
dicit 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 dif-


frentes 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 web-
master 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 lorga-
nisation 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 ren-
contre 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 blo-
quer lutilisateur lorsque ladresse du site a t modifie. Dans ce cas, il importe
cependant de rendre visible lopration ralise par le navigateur afin que luti-
lisateur 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 modification 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 prc-
dente.

Mettre jour rgulirement le site.

Aussi utile soit-il, un site, sil ne change pas, nest plus visit. Dailleurs, con-
naissant par avance son contenu, pourquoi le visiterait-on ? Il est important
dactualiser rgulirement les informations du site. Les nouveauts doivent appa-
ratre 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 dinter-
nautes 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 uti-
lisateurs 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 diff-
rents. 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 nces-
saires 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 lentre-
prise. 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 lindi-
vidu, 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 per-
sonnes, 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 Infor-
matique 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 cha-
pitre 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 avantageuse-
ment 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 indpen-
dants les uns des autres, chacun suivant sa propre charte graphique, son propre sys-
tme 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 fonction-


nement.

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 figure, 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 dis-


position 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 struc-


turer le contenu de lintranet en sappuyant sur lorganisation interne de lentre-
prise. 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 Afin 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 mon-
trent 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 uti-
lises 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 utili-
sateurs, il convient doptimiser les rsultats de la recherche en veillant :
Indexer rgulirement lensemble de lintranet afin de disposer quotidien-
nement 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 lentre-


prise. 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 parti-
culier, 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 raffinant 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 DE PROGRESSION .................................................................................................152

LIENS ..................................................................................................................................154
VRIFIER 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 prin-
cipaux 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 fr-
quemment.
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 rap-
pelle lutilisateur la manire dont il a ouvert cette page et renforce sa compr-
hension 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 saffiche 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 (bread-
crumb 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 efficace 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 four-
nie 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 gn-
ralement 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 rdhi-
bitoires, la carte du site est un moyen simple pour aider linternaute retrouver une infor-
mation. 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 logi-


ciel 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 fonc-
tionnalits 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 stan-
dardise pour le plus grand bien de linternaute qui sy retrouve ainsi plus facile-
ment. 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 domi-
nante 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 navi-
gation 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 pr-
sentation, 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 appa-


rente 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 direc-
tement 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 navi-
gation. 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 permet-
tant de complter sa connaissance du sujet et daffiner 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 figure 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 cons-


truire 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 mou-


vement 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 Afin 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, probable-
ment 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. Au-
del, 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 compo-


sant 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 . Malheu-
reusement, 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


afin 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 par-
fois 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 for-
mulaires. Une utilisation diffrente risque dtre mal comprise.
Lorsque la place manque, la liste pourra toutefois tre employe pour permet-
tre 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 con-


vient 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) affiche 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 Afin 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 signification est difficile 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 linter-
naute 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 linterac-
tivit 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 compor-
tement 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 saffiche, 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 appa-
ratra. 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 imm-
diatement 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 mon-
trant 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 linter-
naute 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 difficile 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 laffi-


chage de la page correspondante interrompt le fil de la lecture. Il est donc pr-
frable 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 finalit. 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 : Une excellente source dinformation :


cliquer ici le site du W3C

Dconseill 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 lutili-
sateur 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 fichier et une estimation du temps de
tlchargement. Cependant, linternaute ne connat pas ici le type du fichier quil va
recevoir, lobligeant attendre la fin 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 afin 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 nou-
velle 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 fonc-
tionnement 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 cra-


tion 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 A. Formatage du texte A. FORMATAGE DU TEXTE


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

La liste est plat . Les groupes apparaissent. Une mme typographie


Les lettres et les numros Les lments dune mme est employe pour les
ne suffisent pas montrer section ont t rapprochs trois ttes de chapitre
lorganisation des (loi de proximit). (loi de similitude).
donnes. Les sous-rubriques sont Elles ressortent, permettant
alignes (loi de bonne une lecture rapide
continuit). 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 thori-
ciens 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 res-
semblent 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 lorganisa-


tion 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 identifier la couverture, le titre, le thme ainsi que
le prix (loi de similitude). Lorganisation visuelle permet une lecture partielle de la
page, laissant linternaute filtrer 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 simi-


litude, lil attribue une mme signification aux donnes prsentes de la mme
manire. Une typographie semblable (mme police de caractres ou mme cou-
leur) 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 confirme
les observations : le centre de la page est vu en premier.
6.1 Organisation visuelle 165

Ces observations sont confirmes par lenregistrement des mouvements ocu-


laires. 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 diff-
rents 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 infor-
mations importantes doivent tre mises en vidence. Pour cela, diffrents arti-
fices 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 sou-
haitait 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 lutilisa-
teur 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 luti-
lisateur. [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 limpri-
mer 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 dinfor-
mation 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 prin-
cipal 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 nou-
velle page interrompt la lecture et oblige lutilisateur attendre un rafra-
chissement 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 direc-
tement 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 con-
fusion [Nielsen 00].

Permettre un retour rapide en haut de page.

Les barres de dfilement, ou la molette de la souris, servent parcourir ver-


ticalement la page. Mais le pas de dplacement est gnralement faible afin de
permettre la lecture tout en descendant dans la page. Cette lenteur est diffici-
lement 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 mon-


diale 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 86 %

800 600 pixels 8%

640 480 pixels 0%

Autre (ex. webTV : 544 372) 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
spcifique de sites amricains. Nanmoins, ils demeurent significatifs 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 dfilement 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 infor-
matiques 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, linter-
naute 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 ques-
tions 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 navi-


guer 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 diff-
rentes phases doivent tre explicites, par exemple : 1) Sinscrire, 2) Slec-
tionner, 3) Commander.
Rappelons que le test de perception permet de vrifier rapidement la compr-
hension 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 com-
poss 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 directe-
ment 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 larchitec-
ture 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, cou-
leurs, 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 modi-
fication 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, lutilisa-
teur 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 sur-
charge 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 illisi-
ble. 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 seu-
lement ils rduisent la lisibilit [Schenkmann 97], mais ils posent aussi des pro-
blmes 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 dgra-
des. Le pitre rendu de ces dernires est ressenti comme un dfaut de profes-
sionnalisme, voire un manque de respect par rapport lutilisateur.

Figure 6.18 Dans cette bibliothque dimages en ligne, toutes les photos sont
affiches en miniature. Malgr la taille, limage est de qualit suffisante 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 char-
gement 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 rapi-
dement.

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 logi-
ciels 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 afficher 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 signa-
les. Linternaute doit donc balayer avec sa souris toute limage pour deviner leurs
positions. Une solution ce problme consiste utiliser des visuels donnant lillu-
sion 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 naviga-
tion. 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 graphi-
quement 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 utili-
sateurs 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 luti-
lisateur le contrle de lanimation, en particulier la possibilit de larrter. ce
titre, les animations en boucle, comme la plupart des GIF anims , sont forte-
ment 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 configurer 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 immdia-
tement 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 con-
tenant 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 cou-
leurs 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 lint-
gration dans la page.
Un autre format, le PNG (Portable Network Graphics), a t invent plus rcem-
ment 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 ga-
lement 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 nces-
saire de se servir de cette palette de couleur.
Pour information, les couleurs web-safe sont des couleurs dont la valeur hexa-
dcimale 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 pro-
cde par dithering. Le rendu nest donc pas exactement celui de limage initiale.
Avec une profondeur de 65 536 couleurs, quelques problmes peuvent encore sur-
venir 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) 90 %

65 536 (16 bits par pixel) 8%

256 ou moins (8 bits par pixel) 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 inter-
nautes 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. ven-
tuellement, la couleur peut aussi tre utilise pour signaler certains mots. Cepen-
dant, 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 ralen-
tissent 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 l-


ments 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 compl-
mentaires 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 uti-
lis 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 permet-
tant 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 struc-
ture 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 ter-
mes trop sophistiqus. Les utilisateurs balayent les pages rapidement et risquent
de ne pas saisir les nuances. En particulier les mtaphores peuvent tre mal inter-
prtes 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 con-
clusion. Il donne ensuite les lments qui ont permis daboutir cette conclu-
sion. 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 nces-


saires la comprhension apparaissent bien dans la page (elle porte le nom mn-
monique 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 vrification 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 ga-
lement 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 prsen-
te 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 gra-


phique 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 sappli-
quent 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 ga-
lement 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 spcifie 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 gn-
ralement 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 tech-
nique 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 dfinir la taille du caractre en pixels laide dune feuille
de style, mais alors la taille est fixe

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 consom-
mateur dinformation ; ici il devient fournisseur. Dune certaine manire, il prend
plus de risques. Lenjeu est important car le passage du formulaire lui permet gn-
ralement 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) sappli-
quent 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 daban-
donner 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 commen-
taires des visiteurs du site, il doit tre suffisamment 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 pra-
tique. 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 reprsen-
tatif 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 con-
centrer 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 prin-
cipales 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 luti-
lisateur final ds la phase de conception du logiciel, lquipe projet peut rapi-
dement 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 informa-
tiques 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 Enrichir
version les rgles de design
du produit

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 gra-
phique de son interface. Ces principes, issus de prcdents projets et de consi-
drations 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 Multi-
mdia. 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 tl-
phone, 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 luti-
lisabilit pour une entreprise : une meilleure productivit et une plus forte attrac-
tivit 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 utilisa-
teurs 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 duti-
lisation 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 diden-
tifier 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 progres-
sivement 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 ques-
tionner individuellement un panel reprsentatif de la population vise par lappli-
cation. 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 indi-
viduel 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 troi-
tement 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 profes-
sionnelles, en particulier les intranets ou les systmes dinformation, il peut tre
intressant de conduire les interviews directement sur le lieu de travail de luti-
lisateur 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 propre-
ment 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 au-
del la qualit des changes diminue. Toutefois, lexprience montre que les inter-
views durent gnralement plus dune heure.
En termes de matriel, le seul outil employ lors de linterview est un magn-
tophone 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 fonc-
tionnalits 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 excep-
tionnels, 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 struc-


turer linterface homme-machine. Le dcoupage en fentres drive en grande
partie de larchitecture de la tche et de la faon dont lutilisateur mne les dif-
frentes 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 duti-
lisation du logiciel ? La tche est-elle structure ? Une formation est-elle prvue ?
Ces diffrents lments vont contraindre la conception de linterface homme-
machine 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 dappren-
tissage 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 homme-
machine. Ainsi, la question se pose frquemment de savoir sil convient de privi-
lgier 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 exis-
tante, 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 Contrainte de conception

Apprentissage approfondi Rapidit dutilisation

Aucun apprentissage pralable Facilit dapprentissage

Utilisation frquente de longue dure Rapidit dutilisation

Utilisation de courte dure ou peu frquente Facilit dapprentissage


et de mmorisation

Utilisation obligatoire Rapidit dutilisation

Utilisation choisie Facilit dapprentissage


et de mmorisation

Tche importante (donc motivation forte Puissance, rapidit dutilisation


et apprentissage approfondi)

Tche peu importante (ou motivation faible) 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 princi-
palement 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 main-
tenir et renforcer le cas chant.

7.3.2 Focus group

Le focus group est une mthode denqute qui vise recueillir lopinion des uti-
lisateurs sur un produit ou un concept. Cette mthode employe en marketing
sapplique facilement aux produits informatiques. Elle permet de mieux com-
prendre 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 dif-
frents 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 lanima-
teur 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 anima-
tion 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 lapplica-


tion ? .
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 com-
menant par des consignes simples, voire des associations dides, puis en se foca-
lisant 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 progressive-
ment 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 tan-
gible. Cette dernire tape prend gnralement un certain temps, car de nou-
veaux 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 ga-
lement 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 dvelop-
pement de lapplication.
Les personas fournissent des archtypes dutilisateur qui vont guider la con-
ception 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 ethno-
graphique 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 cons-
truire 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 informa-
tions 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 luti-
lisateur. 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 hypo-
thse 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 lappli-
cation. 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 propre-
ment dit peut commencer. Il convient, dans un premier temps, de vrifier que
lhypothse des personas est valide au regard des donnes rcoltes. Si des l-
ments 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 pour-
quoi, 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 comportemen-
tales sont gnralement rcoltes [Cooper 03]. Le profil de chaque personne inter-
viewe est ensuite positionn au regard des variables comportementales.
Par exemple, pour un site de commerce en ligne, trois variables comporte-
mentales 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 dif-
frentes personnes interviewes sont donc positionnes sur trois axes selon limpor-
tance 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 ressem-
blances 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 carac-
tre 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 ana-
lysant 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 linfor-
mation dune application informatique : arborescence des rubriques dun site web,
structure des menus ou organisation des fonctionnalits dun logiciel. Lappli-
cation 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 repr-
sentatif 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. Cepen-
dant, 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 repr-
sentant 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 linforma-


tion. 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 faci-
lement 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 alatoi-
rement 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 ressemblent-
elles ? . 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 pr-
dfinie, 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 dvelop-
pement 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 lappli-
cation.
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 gn-
ralement 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 fil de fer prsente, de manire pure,


lensemble du contenu de linterface. Elle peut servir de support un test utilisateur
afin 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 lappli-


cation afin que lutilisateur puisse raliser compltement une tche signi-
ficative de lapplication.
Le prototype horizontal prsente la surface de linterface. Les fonction-
nalits 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
vrifier 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 fonction-
nalits, 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 dvelop-
pement 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 lapplica-


tion 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 appli-
cation, 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 dergo-
nomie 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 utili-


sateurs, sont plus difficiles reprer par une analyse de lextrieur .

Pour pallier aux limites du mode opratoire et la subjectivit de lvalua-


teur, 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 per-
sonne 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 linter-


face afin de vrifier quils respectent un ensemble de rgles et de principes dergo-
nomie. 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 simplifie, inspire de [Nielsen 93],


permet didentifier 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 ergono-
miques 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 recom-
mandations gnrales pourront tre fournies, mais elles devront tre confrontes
lapprciation des utilisateurs et aux choix techniques du projet. Gn-
ralement, 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 dutilisa-
bilit 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 fina-
lises (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 dinter-
activit 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 fonc-
tionnelle, 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 pro-
tocole 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 (satis-
faction). 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 asso-


cies. 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, lhypo-
thse 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 tl-
conseiller.
Mesures :
Russite des tches de changement dadresse et de vrification du fonction-
nement 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 Dfinition 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 per-
mette 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 repr-
sentatif 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 suffit 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 hypo-
thses 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 dutili-
sabilit 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, lanima-


teur 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 sc-
nario dure entre 15 et 30 minutes. Le premier scnario correspond une consigne
simple qui permet lutilisateur dapprhender le logiciel et de se mettre en con-
fiance. 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 percep-
tion (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 lobser-
vateur 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 signifient-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 initia-
lement 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 dam-
lioration 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 pro-
cessus 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 Com-
pany. 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 phono-
graphes 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 per-
formance 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 enre-
gistraient 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 tech-
nique 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 recom-
mandations 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 particuli-
rement adapte la conception des interfaces homme-machine car elle repr-
sente 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 sys-
tme cognitif intgre les informations stockes dans les diffrents registres senso-
riels 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 rap-
pelle 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 [Broad-
bent 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 per-
mettant 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 modi-
fication 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 phy-
siquement. Ltat du monde en est modifi. Lutilisateur peroit cette modifica-
tion. 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 pro-
cessus lis la comprhension du systme : laboration du plan permettant
datteindre le but et valuation du rsultat (Que faire ?). Lautre regroupe les pro-
cessus 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 com-
plexit 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 lutili-
sation 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 Planification 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 rela-
tives la tche sont actives. Par contre, une fois le but atteint, elles sont gn-
ralement 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 distri-
buteurs 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 luti-
lisateur 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 con-


ception 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 logi-
ciel. 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 utili-
sateurs, 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 pos-
sible, 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 con-
sensus 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 lutili-
sabilit 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 connais-
sances 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 con-
ception 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 Description

Compatibilit Adquation du logiciel ou du site vis--vis de son utilisateur.


Employer le vocabulaire mtier.

Guidage 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.

Homognit Uniformit de la logique dutilisation et de reprsentation.


Concevoir un fonctionnement cohrent et un graphisme homogne.

Flexibilit Varit des procdures permettant datteindre un mme objectif.


Offrir lutilisateur diffrentes manires de raliser la mme tche.

Contrle Matrise des traitements raliss par le systme.


utilisateur Ne dclencher que les commandes explicitement demandes par
lutilisateur.
Permettre lutilisateur de toujours garder la main .

Traitement Protection contre les erreurs et correction.


des erreurs Prvenir et dtecter rapidement les erreurs.
Prsenter des messages derreur pertinents et permettre une correction
facile des erreurs.

Charge Rduction des activits de perception et de mmorisation.


mentale Limiter le travail de lecture, la saisie et le nombre dtapes ncessaires
laccomplissement dune tche.

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, Vrifier 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 sys-
tme 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 fonctionne-
ment du systme apparat clairement.
On considre habituellement deux types de guidage. Le guidage explicite cor-
respond 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 ci-
aprs.

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 prin-
cipe de similarit : Ce qui se ressemble, fonctionne de la mme manire . Luti-
lisateur 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 prsenta-
tion 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 facile-
ment.
B.3 Homognit 259

Le logiciel doit rpondre aux actions de lutilisateur par un changement de prsen-


tation 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 modification 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 contri-


bue 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 homme-


machine. 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 Agenda
Organiser son emploi du temps Organiser son planning
Liste des rendez-vous Visualiser les rendez-vous
Recherche dune adresse Chercher une adresse

(a) Dconseill (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 interac-
tion 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 expli-
cites) concerne le fait que seules les oprations demandes par lutilisateur sont
ralises par le systme. Le second (contrle utilisateur) dnote le degr de ma-
trise 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 lutili-
sateur 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 confirmation peut


permettre de protger lutilisateur contre la destruction involontaire dune donne
importante. Notons toutefois quil ne suffit pas dun message pour protger efficace-
ment 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 luti-
lisateur. 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 efficace, 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 dvi-
ter 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 affiches 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 luti-
lisabilit 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 trai-
tement 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 duti-
lisabilit.
Afin de pouvoir servir au plus grand nombre, cette check-list est volontaire-
ment 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 socio-
professionnelle, habitude de lordinateur) ?
Sil existe plusieurs cibles, quelle est la cible principale ?
Quelles questions se pose lutilisateur lorsquil va sur le site ? Quels pro-
blmes 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 dutilisa-
tion ?
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
(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 ?

Liens
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 indi-
que 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
horizontal ?
Des jeux de cadres ont-ils t employs ? Si oui, est-ce justifi ?
Page daccueil
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 utili-
sateurs expriments (moteur de recherche) ?

Graphisme
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) est-
elle 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 ?

Texte
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
les champs ?
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 ?
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 inter-
faces utilisateur. Les ouvrages suivants vous apporteront un autre clairage sur ce
domaine.
Baccino Th., Bellino C. et Colombi T., Mesure de lutilisabilit des interfaces, Lavoisier-
Herms, 2005.
Ouvrage de rfrence, il dcrit de manire prcise et dtaille les diffrentes mtho-
des dvaluation ergonomique. Pour chaque mthode, une fiche prsente le proto-
cole mettre en place, le matriel utiliser, ainsi que tous les dtails pratiques de
mise en uvre. Principalement destin un public professionnel, cet ouvrage cons-
titue un tat de lart prcis des principales mthodes exprimentales employes en
ergonomie. Une lecture conseille tous ceux qui souhaitent conduire des valua-
tions 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 problma-
tiques de conception et dresse un inventaire exhaustif de bonnes pratiques en
matire de conception dinterface. Dans chaque cas, Jenifer Tidwell dcrit lutilisa-
tion la mieux approprie de llment dinterface, illustrant son propos par de nom-
breux 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 con-
ception 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 inter-
nautes. 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 ga-
lement 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 cri-
tres 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 dveloppe-
ment 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-vehi-
cles 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 pro-
poses 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 tra-
vail, 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 Tech-
nology, 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 Actions-
Dclencheurs , 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 , For-
tune, 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 Archi-
tecture, IBM Austin Ease of Use, 1999 (www-3.ibm.com/ibm/easy).
Fabris P., You Think Tomaytoes, I Think Tomahtoes , CIO Web Business Maga-
zine, 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, Forres-
ter 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 ache-
teurs 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 , For-
tune, 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.visualfrien-
dly.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, TRITA-
NA-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 Tech-
nologies, 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, Rap-
port 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 cal-
culations 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 homme-
machine, 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 four-
nit des conseils sur la conception des interfaces homme-machine.
http://www.asktog.com

Baddesigns.com Le site de Michael J. Darnell recense des problmes dutilisa-


bilit 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 dinfor-
mation, 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 lvo-
lution 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 th-
matiques 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 fon-
damentales 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 recommanda-
tions 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 ga-
lement 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 am-
liorer 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 homme-
machine 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 trou-
vera 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 proces-
sus 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 dis-
ponibles 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 res-
sources 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 nombreu-
ses 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 recommanda-
tion (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 multi-
tude 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 asso-
cies.
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 mana-
gement, 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 four-
mille 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 acces-
sibles 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 accompa-
gnent 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 Charge mentale 263


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

B D
Barre de navigation 138 Daltonisme 8
Bnfice 206 Dialogue
Bouton 52 homme-machine 37
de navigation 148 organisation 38
de slection souris 71
voir Composant de slection Distinction 257
radio Double-clic 72
voir Composant de slection
E
C
E-business 101
Cadres 174 cran
Carte du site 134 agencement 1
Case cocher couleur de fond 11
voir Composant de slection criture web 192
Champ de saisie 54, 199 Encadrement 26, 164
290 Ergonomie du logiciel et design web

Enqute utilisateur 210 Images 181


Erreur 404 117 cliquables 183
Erreurs 77, 261 format 186
cognitives 81 Incitation 257
correction des erreurs 85 Index thmatique 128
dexcution 79 Interface homme-machine 1
dintention 78 Interview 109
messages derreur 86
Interviews utilisateur 210
motrices 82
Intranet 121
perceptives 80
Moteur de recherche 125
prvention des erreurs 83
valuation ergonomique 229, 264 Structure du site 124
valuation par inspection 229 Inversion vido 22
grille dvaluation 230
test dutilisabilit 232 J
Explorateur 40 Jauge 76

F L
Feed-Back 258 Langage de linterface 27
Fentres criture web 192
de dialogue 44 Libell des commandes 28
multi-fentrage 41 Liens 154, 190
Feuille de style 179, 198
locaux 170
Flash 184
Liste
Flexibilit 260
puces 195
Focus group 109, 214
Forme 24 de slection 147, 201
Formulaires web 199 voir Composant de slection
Frames 174
M
G Manipulation directe 65
Graisse 22 Maquettage 223
Graphisme papier 228
interface homme-machine 6 Mmoire court terme 248
site internet 178 Mmorisation 81
Groupement 25, 164, 257 Menu 58
Guidage 257 contextuel 62
droulant 59, 143
H Messages 29
derreur 86
Hirarchie visuelle 166
voir Erreurs
Homognit 259
Mthode des incidents critiques 213
Mise en vidence 20
I
Modle du Processeur Humain 246
Icnes 15 Moteur de recherche 125, 134
Index 291

N contenu 109
graphisme 178
Navigation
navigation 129
interface homme-machine 38
organisation visuelle 162
intranet 123
rdactionnel 189
site internet 115, 129
structure 112
O tests 106
vie du site 117
Onglets 51, 145 Situation de travail 213
P Slogan 175
Son 26
Page Soulignement 24
agencement 162 Souris 71
daccueil 174 Sous-menu 143
longueur de la page 168 Statistiques 117
Palette web-safe 188 Story-boards 228
Parcours visuel 2, 164
Personas 217 T
Pistes graphiques 227
Poids de la page 171 Tche 39, 212, 251
Polices de caractres 14, 23, 196 Taille 23
lisibilit 16, 196, 259 Tlchargement 157
Pop-up menu Temps de rponse 73
voir Menu contextuel Test
Positionnement 3 dutilisabilit 108
Prvention des erreurs 83 de perception 106, 240
Profondeur de couleurs 188 utilisateur 232
Prototypage 223 Texte
Proximit voir Langage de linterface
voir Groupement Thorie de laction 67, 249
Puces 25, 195 Thorie de la forme 162
Pyramide inverse 193 Touches de fonction 64
Trac rgulateur 3
R
Tri par carte 112, 221
Reconnaissance vocale 96 Trouvabilit 223
Regroupement
voir Groupement U
Rsolution dcran 172
Utilisabilit
Retour utilisateur 258
Russites commerciales 208 bnfice 100, 122
Rollover 150 dfinition viii
russites commerciales 208
S Web 99
Utilisateur moyen 105
Sablier 75
Sensibilit de lil 7
V
Site internet 99
ciblage 109 Vue globale 40, 132
292 Ergonomie du logiciel et design web

W Z
Web-safe 188 Zoning 227
Wireframe 224
INFOPRO L'ESSENTIEL
TYPE DOUVRAGE

SE FORMER
RETOURS
D'EXPRIENCE

MANAGEMENT DES SYSTMES


D'INFORMATION
Jean-Franois Nogier APPLICATIONS
MTIERS

TUDES, DVELOPPEMENT,
INTGRATION

EXPLOITATION
ERGONOMIE DU LOGICIEL ET ADMINISTRATION

RSEAUX

ET DESIGN WEB & TLCOMS

Le manuel des interfaces utilisateur 4 e dition

Cet ouvrage sadresse toutes les personnes impliques dans la JEAN-FRANOIS NOGIER
Docteur ingnieur
conception et le dveloppement de logiciels ou de sites Internet, en informatique,
en particulier celles en charge des spcifications et de linterface il a men lessentiel
de sa carrire dans le
homme-machine, mais aussi les chefs de projet, les chefs de produit domaine des interfaces
et les commerciaux. homme-machine
chez IBM et Thales.
Aussi performant soit-il, aucun logiciel ou aucun site web ne Fondateur de lagence
de conseil Usabilis
connatra le succs sil nest pas galement facile utiliser. (www.usabilis.com),
Lutilisabilit est devenue une des cls de la russite commerciale il accompagne
les entreprises
dans le monde de linformatique. dans la conception
Dlibrment pragmatique, cet ouvrage fait la synthse des tudes des produits web et logiciel.
Il enseigne lergonomie
menes dans le domaine de lergonomie du logiciel et des sites du logiciel luniversit
Internet. Du choix des couleurs et des polices de caractres Paris Dauphine, lINT
et Suplec.
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.

ISBN 978-2-10-053749-5 www.dunod.com

Vous aimerez peut-être aussi