Ergonomie Des Interfaces

JEAN-FRANOIS NOGIER
THIERRY BOUILLOT
JULES LECLERC
Ergonomie
des
interfaces
Guide pratique
pour la conception
des applications
web, logicielles,
mobiles et tactiles
5e dition
978-2-10-059492-4
Table des matires
Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XI
Chapitre 1 Concevoir des interfaces ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 Les enjeux de la conception ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.1 Du besoin lusage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.2 Les bnfices de lergonomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.3 Quelques russites commerciales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Ergonomie du web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.1 Pourquoi faire des sites web faciles utiliser ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.2 Linternaute est gnralement le client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2.3 Concevoir un site web pour ses utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Ergonomie des intranets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3.1 Les enjeux de lintranet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.2 La navigation : principale difficult des intranets . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.4 Ergonomie tactile et mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4.1 Concevoir pour de petits crans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4.2 Linteractivit au bout des doigts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.5 Cas pratique : Dovadis, un logiciel de gestion immobilire intuitif. . . . . . . . . . . . 13
VI Ergonomie des interfaces
Chapitre 2 Organiser linformation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.1 Identifier le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.1.1 Cibler les attentes des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.1.2 Transmettre linformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.1.3 Architecture de communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.2 Architecture de linformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.2.1 Organiser selon la tche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.2.2 Organiser selon le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3 Agencer pour interagir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.3.1 Organiser lespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.3.2 Le regard de lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.3.3 Parcours visuel dune page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.3.4 Accessibilit des lments de linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.3.5 Zones de manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.3.6 Les dimensions de lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.3.7 Longueur des pages web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.3.8 Poids des pages web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.3.9 Multi-fentrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.4 Concevoir la page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.5 Cas pratique : K-dcole, comment le maquettage permet de rpondre des
enjeux fonctionnels et mtiers complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Chapitre 3 Construire la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.1 Principes ergonomiques de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.2 Concevoir le systme de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.2.1 Barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.2.2 Navigation contextuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
3.2.3 Navigation web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.2.4 Navigation sur smartphone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.2.5 Processus par tape : exemple de la descente dachat . . . . . . . . . . . . . . . . . . . . . . . 63
3.3 Naviguer autrement dans une interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.3.1 Moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.3.2 Plan de site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Table des matires VII
3.4 Les lments du systme de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

3.4.1 Le fil dAriane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
3.4.2 Les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3.4.3 Les menus droulants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
3.4.4 Les boutons de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
3.4.5 Les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
3.5 Vrifier la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
3.6 Cas pratique : Cte-dOr Tourisme une application web conviviale pour
collecter les informations touristiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Chapitre 4 Crer linteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

4.1 Interagir avec linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
4.1.1 Clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
4.1.2 Manipulation directe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
4.1.3 Souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
4.1.4 Interaction tactile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
4.2 Les lments dinteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.2.1 Boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.2.2 Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
4.2.3 lments de slection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
4.2.4 Champs de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
4.3 Temps de rponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
4.3.1 Lattente pour lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
4.3.2 Minimiser lattente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
4.4 Cas pratique : charte ergonomique et refonte graphique du progiciel SAB . . . . 128
Chapitre 5 Communiquer avec lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

5.1 Le langage de linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
5.1.1 Libell des commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
5.1.2 Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
5.1.3 Lcriture web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
5.2 Internationalisation des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
5.2.1 La page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
5.2.2 Choisir sa langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
VIII Ergonomie des interfaces
5.2.3 Traduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

5.2.4 Localiser linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
5.2.5 Polices de caractres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
5.2.6 Spcificits culturelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
5.2.7 Mthodologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
5.3 Traitement des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
5.3.1 Types derreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
5.3.2 Messages derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
5.3.3 Prvention des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
5.3.4 Correction des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
5.4 Aide et assistance lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
5.4.1 Diffrentes aides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
5.4.2 Lutilisabilit de laide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
5.4.3 Rdiger une aide efficace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
5.5 Cas pratique : BCA Expertise, impliquer les utilisateurs pour garantir la qualit
de lexpertise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Chapitre 6 Prsenter linformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

6.1 Perception des informations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
6.1.1 Les lois de la perception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
6.1.2 Hirarchie visuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
6.2 Techniques de mise en vidence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
6.2.1 Clignotement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
6.2.2 Couleur de fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
6.2.3 Graisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
6.2.4 Taille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
6.2.5 Police de caractres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
6.2.6 Soulignement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
6.2.7 Forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
6.2.8 Proximit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
6.2.9 Encadrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
6.3 La couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
6.3.1 Composantes de la couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
6.3.2 Codage couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Table des matires IX
6.3.3 Choix des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

6.3.4 Mthode de choix des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
6.4 Les icnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
6.4.1 Construction des icnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
6.4.2 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
6.5 Le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
6.5.1 Liste puces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
6.5.2 Polices de caractres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
6.6 Prsentation des produits pour le-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
6.6.1 La page produit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
6.6.2 La zone Panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
6.6.3 La page Panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
6.7 Cas pratique : une dmarche ergonomique pour concevoir un nouveau terminal
de vente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Chapitre 7 Mthodes de conception des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

7.1 Conception oriente utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
7.2 Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
7.3 Conception. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
7.4 valuation ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
7.5 Derniers conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
X Ergonomie des interfaces
A NNEXES
Annexe A Ltre humain en situation de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Annexe B Critres ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Annexe C Check-list de conception dun site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Rfrences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
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 quo-
tidienne ; au bureau, dans la rue, mais aussi dans nos foyers o lordinateur a
trouv 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 de sa box avant denregistrer son mission favorite ? Qui na jamais
ressenti ce sentiment de frustration de ne pas pouvoir utiliser pleinement un objet
faute de savoir comment sen servir ? En dautres termes, nul doute que ces machines
nous sont utiles, mais elles ne sont pas toujours facilement utilisables...
En fait, lusage dun instrument se caractrise selon deux axes : son utilit et son
utilisabilit1 .
1. Utilisabilit est une traduction littrale de usability qui est le terme employ par les ergonomes
anglo-saxons. Usability aurait aussi pu tre traduit par ergonomie , mais ce mot a un sens plus
large. Lergonomie est une science qui a pour objet ltude du travail humain, tandis que lutilisabilit
est une caractristique de lobjet lui-mme. Cest donc par abus de langage que nous emploierons
parfois dans cet ouvrage le terme ergonomie la place de utilisabilit .
XII Ergonomie des interfaces
Lutilit est la capacit de lobjet servir la ralisation dune activit humaine,

tandis que lutilisabilit reprsente la facilit demploi de cet objet.
Considrons, par exemple, deux objets ddis une utilisation similaire : la
combinaison de plonge et le scaphandre. Ils relvent de la mme utilit : permettre
de se dplacer sous leau. Cependant, le scaphandre, du fait de son poids et de la
connexion permanente avec la source dair, est dune utilisabilit moindre que la
combinaison qui offre une plus grande autonomie. Les plongeurs lont vite compris :
depuis que la combinaison de plonge a t invente, le scaphandre nest quasiment
plus utilis... Linstrument dont lutilisabilit est la meilleure a t choisi.
Lutilisabilit est la capacit de lobjet tre facilement utilis par une personne
donne pour raliser la tche pour laquelle il a t conu. La notion dutilisabilit
englobe la fois la performance de ralisation de la tche, la satisfaction que procure
lutilisation de lobjet et la facilit avec laquelle on apprend sen servir.
Cette qualit concerne tout type dinstrument destin aider ltre humain. Nous
nous intressons ici son application loutil informatique, cest--dire le logiciel.
Les enjeux de lergonomie

Lorsquun logiciel est employ des fins professionnelles, son utilisabilit est essen-
tielle 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
Apple de tenir le haut du march chez tous les allergiques linformatique , tandis
qu linverse, Linux comblait les informaticiens par sa puissance et sa concision ?
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 termes de fonctionnalits et de performances lorsquil sait loutil
agrable utiliser et quil ne perdra pas de temps apprendre sen servir.
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
Avant-propos XIII
du dveloppement logiciel, lenfer est pav de bonnes intentions et malgr toute

lattention quon y porte, jamais la premire version ne sera satisfaisante. Plutt que
de chercher faire bien du premier coup, il est prfrable de raliser rapidement
une maquette et de la faire tester par les utilisateurs. Chaque nouvelle maquette va
senrichir des amliorations demandes par les utilisateurs. Un prototype va merger
et les utilisateurs vont progressivement tre en mesure de raliser des tches de plus
en plus complexes pour lesquelles le logiciel est conu.
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 qui vont servir de point de
dpart au dveloppement du premier prototype. Suivre ces recommandations permet
dviter les principaux cueils afin de se concentrer sur les particularits du logiciel
dvelopp.
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 de lapplication. Ces recommandations permettent
dorienter les choix de conception en sappuyant sur les exprimentations menes
dans le domaine. Il reste ensuite valider le design de linterface en situation relle :
cest le rle des tests utilisateur.
Audience
Cet ouvrage est un guide pratique de conception des interfaces. Il donne les rgles
et les principes ergonomiques prendre en compte chaque tape de la dfinition
de linterface utilisateur, quil sagisse dun logiciel, dune application web, dun site
internet, dune application mobile ou tactile.
Ce livre sadresse toutes les personnes impliques dans la conception et le
dveloppement dinterfaces, en particulier celles en charge des spcifications et de
linterface homme-machine, mais aussi les chefs de projet et les responsables marketing.
Dans la mesure o ces interfaces se rencontrent et sutilisent au quotidien, ce livre
concerne autant les applications logicielles que les sites web, utiliss aussi bien
au bureau, chez soi ou en mobilit. 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.
Dans la mesure o lutilisabilit nat de la relation qui stablit entre le logiciel
et son utilisateur, nous nous intresserons principalement la conception des inter-
faces 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.
XIV Ergonomie des interfaces
La cinquime dition de louvrage

Depuis 10 ans, cet ouvrage a t lu, relu, exploit et utilis par de nombreux
chefs de projet, dveloppeurs et concepteurs dinterface. En 10 ans, les interfaces
et linformatique en gnral ont beaucoup volu. Nous ne pouvions plus rduire la
conception des interfaces aux logiciels et au web. Dsormais, les interfaces se dclinent
galement sur dautres dispositifs, en particulier les smartphones et les tablettes tactiles.
Les dix ans de louvrage correspondent peu prs aux dix ans dUsabilis. Dix annes
au cours desquelles nous avons mis en uvre les recommandations et les mthodes de
ce livre. Ces expriences partages sur des projets varis nous ont montr limportance
et la richesse des regards croiss et du mlange de comptences pour concevoir une
interface russie. Nous avons donc dcid dcrire cette cinquime dition trois afin
que chacun puisse apporter sa propre sensibilit louvrage.
Pour cette dition, nous ne pouvions plus conserver cette dichotomie logiciel/web
qui ne correspondait plus la ralit du terrain. Cest pourquoi, nous avons choisi une
prsentation transversale du processus de conception, indpendamment des dispositifs
qui supportent les interfaces.
Les premires ditions de louvrage ont t construites partir du support des
formations Usabilis et des cours de Jean-Franois Nogier. La cinquime dition sest
enrichie de lexprience acquise lors de nos interventions auprs des quipes de
dveloppement et des diteurs de logiciel. Il tait donc naturel dintroduire galement
des exemples concrets dapplications pour lesquelles nous avons mis en uvre la
dmarche ergonomique. Nous remercions nos clients qui ont accept de dvoiler ainsi
une partie de leurs secrets de fabrique .
Organisation du livre
Lorganisation de cette cinquime dition sest naturellement construite en sappuyant
sur les diffrentes tapes du processus de conception orient utilisateur, qui fournit
une base commune et invariante quelle que soit linterface crer.
Cette approche prsente galement lintrt de rpondre chapitre par chapitre aux
questions que se posent les concepteurs dinterface au fur et mesure de la ralisation :
Le premier chapitre, Concevoir des interfaces ergonomiques, introduit la
dmarche de conception ergonomique et les enjeux relatifs la diversit des
interfaces actuelles et venir.
Dans le deuxime chapitre, Organiser linformation, nous abordons la question
de la dfinition du contenu informationnel et celle de lorganisation des
informations lcran.
Dans le troisime chapitre, Construire la navigation, nous prsentons les
mthodes pour concevoir la navigation ainsi que les lments de linterface
qui permettent de raliser le systme de navigation.
Le quatrime chapitre, Crer linteraction, regroupe les recommandations
ergonomiques concernant les moyens dinteraction (clavier, souris, doigt) et les
lments dinteraction affichs lcran, de manire descendre plus en dtail
dans la dfinition de linterface.
Avant-propos XV
Le cinquime chapitre, Communiquer avec lutilisateur, traite du langage de

linterface, cest--dire la manire dont lapplication informatique dialogue avec
lutilisateur (libells, messages). Nous abordons galement dans ce chapitre le
traitement des erreurs et laide en ligne.
Le sixime chapitre, Prsenter linformation, fournit les recommandations pour
habiller graphiquement les crans : choix des couleurs, techniques de mise en
vidence, choix des polices de caractres.
Le septime et dernier chapitre, Mthodes de conception des interfaces, dcrit
les diffrentes mthodes permettant de prendre en compte lergonomie au
cours du dveloppement dun logiciel, en particulier les tests utilisateur et le
maquettage/prototypage. Ce chapitre sadresse aux chefs de projet dsireux
de suivre un processus de conception orient utilisateur . Il intressera
galement les personnes en charge de lvaluation dun logiciel car il prsente
diffrentes mthodes dvaluation.
En annexe, on trouvera une prsentation des travaux majeurs en psychologie
cognitive sur lesquels sappuie lergonomie du logiciel, en particulier le modle
du processeur humain et la notion de critres ergonomiques. Deux check-lists
se trouvent la fin de louvrage. La premire permet dvaluer rapidement la
qualit ergonomique dun logiciel. La seconde, ddie aux applications web, sert
vrifier que les critres dutilisabilit sont pris en compte lors de la conception
dun site internet.
Enfin, 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 et des ressources en ligne pour la
conception dinterfaces.
Supplments en ligne
Retrouvez des complments de louvrage sur le blog des auteurs : Usaddict, Ressources
sur lergonomie des interfaces (www.ergonomie-interface.com).
XVI Ergonomie des interfaces
Les auteurs
Jean-Franois Nogier
Ce livre est le fruit du parcours professionnel de Jean-Franois Nogier. Tout
dabord au centre scientifique IBM France, il a men des recherches sur la com-
munication entre lhomme et la machine, sintressant la faon dont lordinateur
aurait pu produire des textes semblables ceux dun tre humain. Ensuite Thales
(ex-Thomson-CSF), il a 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, il a particip la
conception des sites intranet et conduit les programmes internes lis aux technologies
web.
En 2002, Jean-Franois Nogier fonde Usabilis, une socit de conseil en ergonomie,
spcialise dans la conception des interfaces. Depuis 10 ans, Usabilis accompagne les
matrises douvrage dans la conception des services en ligne et des produits logiciels.
Thierry Bouillot
Passionn par la rencontre de la psychologie cognitive et le monde multimdia,
Thierry Bouillot sest associ naturellement cet ouvrage. Form la recherche fon-
damentale en psychologie cognitive, il a dabord tudi les mcanismes de lattention
en laboratoire universitaire Angers, Bruxelles et Toulouse. Lors de son doctorat, il
participe la mise au point de mthodes dvaluation pour lISO au LAB pour PSA
Peugeot Citron.
Thierry a rejoint Usabilis en qualit de consultant en ergonomie informatique,
spcialiste de la conception dinterfaces et de lexprience utilisateur ; il est galement
charg de lditorial et de lanimation du blog Usaddict, lergonomie des interfaces.
Jules Leclerc
Designer dinteraction, Jules Leclerc est issu dun parcours dans la conception
de produits innovants et dinterfaces graphiques. Form lcole de design Nantes
Atlantique, sa priorit est de concevoir une exprience utilisateur de qualit.
Jules Leclerc privilgie une dmarche centre sur lusage dans les diffrents projets
sur lesquels il est intervenu. Il dbute son parcours professionnel dans la socit Violet
pour laquelle il travaille sur linteraction du lapin Nabaztag. Il intgre ensuite une
agence de communication dans laquelle il est responsable de la partie numrique.
Aujourdhui consultant chez Usabilis, il intervient sur la conception de logiciels, sites
web, applications mobiles ou interfaces TV ainsi que sur leur design graphique.
Avant-propos XVII
Remerciements
Louvrage est issu du manuel des formations que Jean-Franois Nogier dispense
luniversit Paris-Dauphine, Suplec, et lInstitut national des tlcommunications.
Nous remercions les lves, les stagiaires et les responsables des formations.
Cet ouvrage est aussi le fruit dchanges et de discussions sur la pratique de
lutilisabilit. Nos remerciements vont tous ceux qui placent le respect de luti-
lisateur comme une exigence professionnelle. Merci Nathalie Brardier, Hlne
Billet, Sophie Raedersdorf, Jolle Cohen, Jolle Coutaz, Genevive Jomier, Laetitia
Giannettini, Marit Milon, Ccile Montarnal, Gilles Ambone, Marc Badran, rige
Baudoin, Vincent Bnard, Jean-Philippe Bourdarie, Simon Dupont-Gellert, Jrme
Ernu, Frdric Fuchs, Sylvain Fustier, Michel Germain, Frdric Gaillard, Pierre
Gosselin, Pedro Hernndez, Antoine Israel, Valry Ly, 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.
Nous remercions tout particulirement Pierre Gosselin et Valery Ly pour leur
support dans la ralisation de cette nouvelle dition.
XVIII Ergonomie des interfaces
Cest ma "bible" au travail !
En tant que conceptrice multimdia, jutilise le manuel des interfaces utilisateurs pour
appuyer mes prconisations auprs des diffrentes personnes constituant lquipe dun
projet (chef de produit, chef de projet, directeur artistique...). Je suis effectivement
conduite argumenter certains choix auprs des quipes marketing ou technique. Mon
rle tant de prouver quun site web facile utiliser est une cl de la russite commerciale
(message drlement compliqu faire passer car pour certains la simplicit quivaut
un manque dattractivit ! Pourquoi faire simple quand on peut faire compliqu...).
Je fais rfrence surtout aux chapitres concernant la navigation web et la page web. Les
illustrations et les recommandations maident expliquer clairement les conseils que je
peux donner.
Jutilise souvent lindex du manuel pour effectuer une recherche rapide et je minspire
volontiers de la check-list pour poser des questions en runion. Enfin, la synthse des
critres ergonomiques (tableau) est un outil indispensable pour ne pas oublier lutilisateur
(et pour se familiariser avec les noms barbares des critres !).
Aude FRAISSE
Conceptrice multimdia sur le portail Orange.fr
1
Concevoir des interfaces
ergonomiques
Le monde est complexe tout comme les activits que nous ralisons. Mais nous ne devons pas
pour autant vivre en constante frustration. Non. Tout lintrt de la conception centre
utilisateur est dapprivoiser la complexit, de faire en sorte que ce qui semble tre un outil
compliqu, devienne adapt au besoin, comprhensible, pratique et agrable utiliser.
Don Norman1, Interactions Journal, 2008.
1.1 Les enjeux de la conception ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Ergonomie du web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Ergonomie des intranets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4 Ergonomie tactile et mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.5 Cas pratique : Dovadis, un logiciel de gestion immobilire intuitif . . . . . . . . . . . . . . . . . . . . 13
1.1 LES ENJEUX DE LA CONCEPTION ERGONOMIQUE

1.1.1 Du besoin lusage
Lutilisation dun logiciel, dun site web ou de toute autre interface informatique
repose sur des besoins et des attentes. Quil sagisse de trouver une information sur
internet, de poser des congs sur un intranet ou dacheter un billet sur une borne
interactive, le principe reste le mme : lutilisateur veut atteindre un but. Linteraction
1. Don Norman est un professeur mrite en sciences cognitives de luniversit de Californie. Il est
le cofondateur, avec Jakob Nielsen, du Nielsen Norman Group.
2 Chapitre 1. Concevoir des interfaces ergonomiques
avec linterface va conditionner lefficacit avec laquelle il atteint ce but et donc la

qualit de lexprience de lutilisateur.
Lobjectif de lutilisateur est certes daboutir un rsultat bien particulier mais il
souhaite surtout satisfaire un ensemble dexigences propres pour y accder. Plus linter-
face parat facile utiliser, plus elle est apprcie des utilisateurs. Et quand il sagit dun
produit interactif , cela devient un facteur de satisfaction et de confiance envers
la marque qui en est lorigine. Pour le grand public, des marques telles que Nokia,
Apple ou Sony intgrent depuis de nombreuses annes la dmarche ergonomique dans
la conception de leurs produits. De cette confiance nait videmment la popularit
mais aussi la fidlit des clients.
Car tout client rel ou potentiel, est dabord un utilisateur. Concevoir un produit
rpondant aux besoins et aux exigences des utilisateurs permet de partir dans la bonne
direction. Mais cest en faisant participer lutilisateur tout au long de la conception et
de lvaluation de linterface que la dmarche ergonomique prend tout son sens.
1.1.2 Les bnfices de lergonomie

Linterface occupe une part importante du code dvelopp ; en moyenne 48 %,
voire 80 % pour les applications web. Par ailleurs, cest un sujet de proccupation
rcurrent pour les concepteurs de produits informatiques ; il a t relev que linterface
homme-machine faisait lobjet denviron un tiers des points abords lors des runions
davancement [Nielsen 93].
Dans le cadre dun projet informatique, les mthodes de conception ergonomique
permettent de rduire les cots de dveloppement. En effet, en impliquant lutilisateur
final ds la phase de conception du logiciel, lquipe projet peut rapidement consolider
avec le client sa comprhension du besoin. Sachant quen moyenne 70 % 80 % des
cots sont engags au dbut du projet, lenjeu est important.
Nos clients voquent gnralement, pour des applications SI, des gains denviron
30 % obtenus en mettant en uvre une dmarche ergonomique ds la phase de
spcification. Ce gain correspond directement une rduction des cots de mainte-
nance corrective. En effet, lorsque les utilisateurs sont impliqus dans la phase de
spcification au dmarrage du projet, il y a moins de raisons pour quils demandent
des modifications par la suite, plus forte raison lorsque des maquettes ont permis de
tester la viabilit oprationnelle de lapplication.
Pour les applications informatiques employes en entreprise, lintrt est donc
double. Dune part, la dmarche est source dun gain de productivit pour les
utilisateurs finaux, car linterface sera plus rapide utiliser, plus simple apprendre et
minimisera le risque derreur. Dautre part, elle permet aux quipes informatiques de
rduire les cots de maintenance corrective.
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.
1.1 Les enjeux de la conception ergonomique 3
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.
Figure 1.1 La pratique de lutilisabilit est un vecteur de rutilisation.
Un document, gnralement appel guide de style, ou charte ergonomique, dfinit

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

Comme la plupart des mthodes visant amliorer la qualit dun produit, il est
difficile destimer prcisment le gain apport par les dmarches ergonomiques.
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 tlphone, a

revu les crans de saisie utiliss par ses assistants de direction, rduisant de 600 ms le
temps moyen pour traiter un appel. Il en rsulte, pour lensemble de la compagnie, un
gain de 2,94 millions de dollars par an.
En 2008, les responsables du site Breastcancer.org constatent que leurs utilisateurs
passent au moins 15 minutes pour senregistrer, gnralement avec beaucoup de
difficults car ils reoivent au moins 15 requtes de support par semaine. Suite
une srie de tests utilisateur, ils rduisent de moiti la dure denregistrement, et font
ainsi baisser de 69 % le cot du support.
Souhaitant amliorer la qualit de sa relation client, Staples, spcialiste amricain
des fournitures de bureau, dcide de refondre son site selon une dmarche ergonomique
(enqute utilisateur, audit ergonomique et tests utilisateur). Grce au nouveau site, il
augmente de 67 % la fidlit de ses clients. La frquentation du site augmente de 80 %,
lui procurant une augmentation de 491 % des revenus au troisime trimestre 2000.
En 2005, le webmaster du site de lAmerican Heart Association constate une baisse
des dons en ligne alors que le nombre de visiteurs entrant dans la section donation
est important. Il conduit des tests utilisateur, modifie lagencement des pages et le
parcours vers le bouton de don en ligne. Les dons augmentent de 60 % suite cette
refonte.
Ces exemples montrent les principaux bnfices de la dmarche ergonomique :
une meilleure rentabilit et une plus forte attractivit du produit.
1.2 ERGONOMIE DU WEB

Un projet web est un projet dentreprise. Mettre en place un site, communiquer,
tablir une relation commerciale sur le web est un choix stratgique. Au mme titre
que la stratgie de lentreprise se construit sur le long terme, le fonctionnement du
site doit tre conu dans la dure.
1.2.1 Pourquoi faire des sites web faciles utiliser ?

Internet est une technologie dcentralise, la disposition de tous, offrant un
support des applications la fois domestiques : le rseau Internet grand public,
et professionnelles : le rseau intranet interne lentreprise ou extranet regroupant
un ensemble dentreprises.
Pour autant, les applications web1 touchent un public large, majoritairement
novice en informatique. De nombreux problmes dutilisabilit rsultent de cette
fracture entre la technologie du web et les utilisateurs viss.
1. Le terme web est employ dans cet ouvrage pour dsigner Internet en gnral, la fois grand
public et professionnel (intranet et extranet).
1.2 Ergonomie du web 5
1.2.2 Linternaute est gnralement le client

Sur Internet o le client peut changer de boutique dun simple clic, lergonomie a un
impact direct sur la rentabilit du site. Alors que le web est peupl de sites proposant
des services similaires, linternaute prfrera choisir le site le plus simple. Ainsi en
1998, C. Moore (IBM Internet Operations Manager) dresse un tableau catastrophique
du site 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].
1.2.3 Concevoir un site web pour ses utilisateurs

Un site ne peut pas tre conu comme une plaquette commerciale, cest--dire une
fois pour toutes . Les internautes attendent une information actualise, mise jour
rgulirement.
Dfinir le processus de fonctionnement du site.
Le processus de fonctionnement du site doit tre mis en place ds la phase de

dfinition. Dans les grandes lignes, le principe consiste partir du plan du site et
identifier pour chaque rubrique les responsables ditoriaux ainsi que la priodicit de
mise jour. Il est dailleurs recommand dimpliquer les responsables ditoriaux des
diffrentes rubriques dans la phase de conception du site.
Connatre son public et inciter au dialogue.
Un site web sadresse toujours un public, au mme titre que les informations quil
propose, les produits et les services quil prsente. De ce fait, connatre ses utilisateurs
est la meilleure faon de savoir si le contenu du site rpond leur besoin.
Inciter les visiteurs partager leur impression sur le site et son contenu, permet de
mieux connatre ce quils aiment ou naiment pas, les problmes quils rencontrent, et
ce quils attendent du site. Ces remarques changes avec le responsable ditorial ou
dans le cadre de rseaux sociaux, vont servir amliorer le site, voire concevoir les
prochaines versions.
Rpondre aux utilisateurs.
Le dialogue doit stablir dans les deux sens. Les rponses montrent aux utilisateurs
que leur point de vue est pris en considration. Ce comportement est gnralement
apprci. Il permet dtablir un climat constructif dchanges et de confiance qui

incitera linternaute renouveler lexprience.
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.
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 termes de navigation et de typologie de contenu. Elles permettent
dajuster lorganisation du site afin que les pages les plus frquemment utilises soient
les plus faciles atteindre. Les statistiques fournissent galement une mesure relle
de la configuration matrielle des visiteurs (navigateur, rsolution graphique, taille
dcran, systme dexploitation) et permettent dadapter le site aux supports utiliss
(crans dordinateur, smartphone, tablette PC).
Prvoir les cas derreur.
Figure 1.2 Cette page derreur conduit lutilisateur sur une page prsentant lorganisation du
contenu du site lui permettant de retrouver rapidement linformation quil cherchait.
1.3 Ergonomie des intranets 7
Suite une rorganisation du site ou une saisie errone de ladresse de la page,

il est possible de renvoyer lutilisateur vers une page prdfinie lorsquil rencontre un
lien bris (i.e. page 404). Dans ce cas, plutt quun message derreur, il est prfrable
daider lutilisateur en lorientant vers la page daccueil ou en lui proposant de trouver
ce quil cherche laide des grandes rubriques dtailles du site et du moteur de
recherche.
Mettre jour rgulirement le site, maintenir les liens externes.
Aussi utile soit-il, un site, sil ne change pas, nest plus visit. Dailleurs, connaissant
par avance son contenu, pourquoi le visiterait-on ? Il est important dactualiser
rgulirement les informations du site. Les nouveauts doivent apparatre clairement,
si possible ds la page daccueil, afin que le visiteur rgulier puisse en tre inform
immdiatement. De mme, il est prfrable de vrifier rgulirement le bon fonction-
nement des liens vers les autres sites. Un lien mort dnote un certain laisser-aller
dans la gestion du site.
1.3 ERGONOMIE DES INTRANETS
Dans les grandes lignes, la conception dun intranet ne diffre pas de celle dun site
internet. Les rgles suivre sont les mmes. Cependant les enjeux sont diffrents. La
plupart des sites internet ont une vocation marchande. Ils permettent lentreprise
dtablir une relation commerciale avec ses clients. Au contraire, les utilisateurs de
lintranet sont les propres salaris de lentreprise.
Ici lobjectif est non seulement un gain en termes de productivit financire, mais
aussi sur le plan collectif par la communication et le partage des connaissances.
Laudience est souvent diversifie. Un intranet sadresse tous les profils de salaris,
quils soient laise ou non avec linformatique. Il est donc indispensable au moment
de la conception dun intranet de pouvoir sappuyer sur panel relativement large
dutilisateurs reprsentatifs.
Sur lintranet, le design doit avant tout tre fonctionnel. Cest le contenu qui
prime. La qualit de linformation et avec rapidit laquelle on y accde sont les
principaux critres dutilisabilit de lintranet.
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. Un
intranet au look soign montre aux intranautes que ce site leur est ddi, et quils ne
sont pas ngligs. Lagencement de la page, les choix de typographie et de couleur
sont galement des lments qui permettent lutilisateur daccder rapidement
linformation quil cherche.
Figure 1.3 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.
1.3.1 Les enjeux de lintranet

Lintranet est un outil de travail collectif, partag et conu par tous les salaris de
lentreprise. la base, cest un mdia dchange et de partage. Il permet de mettre en
commun des informations avec les autres collaborateurs de lentreprise : documents,
modles, connaissances, savoir-faire, informations pratiques, etc.
Les salaris se servent de lintranet au quotidien pour y trouver les informations
ncessaires leur travail [Germain 04]. 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. Imaginons, par exemple, quun salari utilise en
moyenne lintranet 3 fois par semaine raison de 20 minutes chaque jour. Un simple
gain de 2 minutes par jour permet de gagner 6 minutes par semaine et par employ. En
considrant que le cot moyen dun salari est de 60 000 euros, pour une entreprise
de 1 000 personnes, le gain total sera 160 000 euros par an.
Cependant, certaines entreprises continuent concevoir lintranet sans prendre
en compte son utilisation effective par les salaris. Ainsi, sur lintranet dune socit
franaise, se trouvait un formulaire appel Demande de Matriel Informatique
qui devait tre utilis, comme son nom lindique, pour toute requte dvolution du
parc informatique. La navigation sur le site ntant pas aise, les employs mettaient
en moyenne 15 minutes pour retrouver ce formulaire. Or, dans cette entreprise de
4 000 personnes, 550 formulaires de ce type taient remplis chaque mois, soit une
perte de 100 000 euros environ par an ! Le plus marquant ici nest pas tant le prjudice
financier, mais plutt le gaspillage de temps gnr et le stress qui en dcoule.
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,
1.3 Ergonomie des intranets 9
lorganisation de lintranet a t revue, faisant conomiser 10 millions de dollars par

an lentreprise [Fabris 99].
1.3.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 et la recherche dinformations.
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 un prochain chapitre.
Calquer la structure du site sur lorganisation de lentreprise.
Afin de permettre aux salaris de se reprer facilement, il est conseill de structurer

le contenu de lintranet en sappuyant sur lorganisation interne de lentreprise. Les
salaris connaissent leur entreprise. Ils savent qui fait quoi et o ils sont susceptibles
de trouver linformation. Ils sorienteront plus rapidement dans lintranet sil reprend
lorganisation de lentreprise. Pour les nouveaux venus (e.g. rcents embauchs ou
prestataires), dautres moyens doivent tre offerts pour leur permettre de retrouver les
informations : moteur de recherche, index thmatique.
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.
Dfinir un modle de page unique pour lensemble de lintranet.
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.
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.
Figure 1.4 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 donnent un accs direct
aux applications informatiques disponibles sur lintranet.
1.4 ERGONOMIE TACTILE ET MOBILE

Depuis quelques annes, les interactions tactiles se sont multiplies dans notre quo-
tidien, offrant de nouvelles opportunits daccs et de manipulation de linformation :
borne interactive, smartphone, baladeur MP3, tablette, appareils lectromnagers, etc.
Principalement utiliss sur les appareils nomades, les crans tactiles stimulent nos
exigences en manire dinteractivit et de facilit dutilisation.
1.4.1 Concevoir pour de petits crans

Les crans tactiles sont souvent de petites tailles, certes en raison de leur cot, mais
surtout du fait de lusage qui leur est destin : le smartphone propose de multiples
applications mais doit rester un tlphone et pouvoir se glisser dans une poche.
Les tablettes offrent davantage despace aux contenus, favorisant le confort de la
consultation et des moments dinteractivit plus longs.
La conception dune interface tactile est contraignante car lespace est plus
restreint pour prsenter du contenu et le valoriser graphiquement. Toutefois, cette
contrainte de place est compense par des contenus systmatiquement interactifs : le
pointage au doigt permet dafficher des informations plus riches partir par exemple
dun simple titre, dune photo ou du rsum dun article. Les liens entre les contenus
1.4 Ergonomie tactile et mobile 11
se matrialisent par des zones cliquables et non plus par des liens souligns comme sur
le web.
Le principal attrait du tactile rside dans le fait quil ny a pas dintermdiaire
physique entre linterface, son contenu et loutil de slection. Ici lutilisateur agit
directement sur linterface, il ne doit pas se servir dune souris pour utiliser lapplication.
Il peut agir directement avec ses doigts, certes plus volumineux que le pointeur dune
souris. Linterface tactile prsente une vritable manipulation directe .
Bien sr, la modalit tactile introduit galement une autre manire dinteragir avec
les informations affiches. Tout contenu est en soi manipulable indpendamment des
autres contenus composant linterface, de sorte quune photo ou une vido peuvent
sagrandir sur tout lcran en tapant deux fois dessus ou en ltirant avec deux doigts
(cf. les gestes au chapitre 3).
La dimension de lcran introduit galement des diffrences dans lagencement
du contenu informationnel par rapport un cran classique dordinateur. Pour un
smartphone par exemple, les informations sont avant tout prsentes en une mme
colonne pour faciliter la lecture et la slection au doigt, quelle que soit lorientation
de lcran. La navigation dans les crans est immanquablement verticale, obligeant
lutilisateur faire dfiler le contenu. Avec un cran plus grand, la lisibilit de
linformation reste primordiale mais lespace disponible permet dagencer le contenu
avec plus de libert. Le nombre de colonnes peut varier facilement, y compris en
reprenant des mises en forme et des dispositions dj connues des utilisateurs sur
dautres supports. Les journaux et magazines en ligne reprennent souvent dailleurs
des mises en page qui ont fait leur preuve en version papier.
Figure 1.5 Sur tablette, linformation est prsente en reprenant les principes dagencement
de la version papier, linteractivit tactile en plus.
1.4.2 Linteractivit au bout des doigts

Les interfaces interactives nont pas seulement investi le champ de la mobilit, elles
ont galement permis de simplifier leur usage en proposant une relation plus directe
avec lutilisateur : linteraction tactile.
Les premires interfaces mobiles taient contraintes par lutilisation dun curseur se
dplaant dobjet en objet ou avec les touches du clavier numrique. Toute interaction
passait ncessairement par un intermdiaire supplmentaire entre lutilisateur et
linterface.
Lavnement de la modalit tactile a boulevers la relation avec lappareil interactif
et son contenu. Lutilisateur ne se contente pas de consulter un cran, il le manipule,
tout comme les informations qui y sont affiches. Les crans successifs peuvent se
feuilleter comme les pages dun livre, le dplacement dun objet virtuel seffectue
directement avec le doigt comme on le ferait avec un objet rel.
Figure 1.6 Contrairement une version WAP, un site ou une application web pour
smartphone tactile propose une information moins dense en privilgiant la qualit graphique et
linteractivit des contenus.
Linteraction tactile implique toutefois dautres rgles. Le doigt, ce pointeur

surdimensionn, nest pas aussi prcis quun pointeur de souris ou mme lindispensable
stylet des premiers PDA. Toute information est invitablement cache au moment o
le doigt la slectionne. Ceci implique alors que tout objet graphique et cliquable doit
1.5 Cas pratique : Dovadis, un logiciel de gestion immobilire intuitif 13
non seulement tre de dimension suffisante pour faciliter sa slection mais galement
renvoyer lutilisateur une confirmation explicite (un feedback) de son action sur
linterface (e.g. vibration lappui, agrandissement de la zone clique au-dessus du
bout du doigt). Les espacements sont tout autant ncessaires pour le confort du
pointage afin dviter un appui sur un objet diffrent de la cible digitale initiale. On
constate dailleurs davantage derreurs dutilisation en tactile quavec la souris.
Figure 1.7 Le test utilisateur permet dobserver directement les ractions de lutilisateur
et de les enregistrer des fins danalyses
(ici test dune application tactile sur tablette).
1.5 CAS PRATIQUE : DOVADIS, UN LOGICIEL DE

GESTION IMMOBILIRE INTUITIF
1.5.1 La gestion immobilire : une activit varie et diverse
La gestion immobilire est un domaine complexe faisant appel des comptences la
fois comptables, lgales, juridiques et commerciales.
Ladministrateur de biens doit savoir grer les coproprits et les locations dont il a
la charge, tout en restant disponible aux demandes de ses clients. Il est frquemment
interrompu dans ses activits : appels tlphoniques, visites etc.
Il est donc essentiel quil puisse sappuyer sur un outil convivial pour le guider dans
son activit quotidienne.
Qui plus est, le turnover est gnralement frquent au sein des agences, le logiciel
de gestion doit donc pouvoir tre pris en main rapidement afin que les nouveaux
salaris soient immdiatement oprationnels.
1.5.2 Une premire version peu intuitive

Une premire version du logiciel Dovadis avait t ralise en 2009. Lensemble
des fonctionnalits proposes rpondaient aux besoins des utilisateurs finaux : pr-
lvements automatiques, gestion des APL, bibliothque de documents prdfinis,
regroupements et clatements des mandats, etc. Cependant dans le cadre dun
alpha-test, linterface sest avre peu intuitive et visuellement trop charge. Bien
que fonctionnellement performant, le logiciel tait mal peru par les utilisateurs. Ce
handicap tait un frein important au lancement commercial du produit.
Figure 1.8 La premire version de linterface du logiciel Dovadis
Le manque de guidage, des libells peu explicites et un graphisme aux couleurs

trop vives donnent cette premire version limage dun logiciel complexe.
Cest pourquoi, Loginspace a dcid de refondre linterface de son application en
sappuyant sur des bases ergonomiques solides.
1.5.3 Des groupes de travail regroupant les diffrents mtiers

Afin de pouvoir intgrer la fois les contraintes du mtier de la gestion immobilire
et les contraintes techniques du produit, puisquil sagit ici dune refonte ne modifiant
que la couche IHM du logiciel tout en conservant les mmes fonctionnalits, nous
avons conduit des ateliers de conception avec une quipe mixte compose des
commerciaux, en relation avec les agents immobiliers, et des responsables de lquipe
de dveloppement.
Figure 1.9 Maquette papier de linterface ralise lors des premiers groupes de travail
Dans un premier temps, le groupe de travail a labor des maquettes papier

laide de post-it pour figurer les zones dynamiques de lcran. Cette technique, appele
aussi paper prototyping , permet davancer rapidement et de manire conviviale.
Sappuyant sur la maquette papier, nous avons ensuite construit une maquette fil
de fer interactive de linterface. Ce type de maquette permet de montrer concr-
tement comment sera utilis le logiciel dans le cadre de diffrents scnarios mtiers
typiques. Lquipe produit a pu ainsi valider dans un contexte raliste linterface qui
sera ensuite propose aux utilisateurs.
Dans le cadre dune refonte comme celle-ci, lintrt de la dmarche ergonomique
est de pouvoir valider la conception des crans, la fois sur le plan du mtier et sur le
plan technique, rapidement, et sans quaucun dveloppement nait t initi.
Figure 1.10 Maquette fil de fer interactive montre lquipe produit
1.5.4 Un design pur privilgiant le contenu mtier

lissue de la phase de maquettage, lquipe produit Loginspace a dfini lagencement
et le contenu des principaux crans de la nouvelle application. Le design graphique
sest attach combiner la lisibilit de linterface, la simplicit, tout en mettant en
exergue les lments de guidage qui vont faciliter lapprentissage et rassurer lutilisateur.
Les utilisateurs travaillant plusieurs heures par jour sur le logiciel, il convenait de
raliser un style graphique qui minimise la fatigue visuelle.
Lensemble est clair et lger, linterface est pure privilgiant le contenu informatif,
plutt que les artifices graphiques.
Figure 1.11 Design graphique de linterface finale
1.5.5 Lergonomie juge plus importante que les fonctionnalits

Le logiciel a t install dans les premires agences en 2010. Lergonomie a t
immdiatement apprcie et adopte par les utilisateurs. Elle est dailleurs juge plus
importante que les fonctionnalits, par certains clients, car elle leur permet de rduire
le temps pass sur les activits administratives au profit dune meilleure relation avec
la clientle. Dans le cadre dune phase de bta-test, il a pu tre valid que les temps
de formations pouvaient tre rduits de 30 % du fait de lefficacit de lergonomie de
linterface.
Nous avions une double contrainte : satisfaire des petits clients, et des clients tels que
des groupes immobiliers, aux attentes trs diffrentes, avec un produit unique.
La dmarche ergonomique nous a permis de prendre conscience de limportance de

runir les commerciaux, les dveloppeurs, les formateurs, les hotliners autour dune
mme table pour mieux prendre en compte les habitudes de nos clients. Lors de ces
runions, lergonome nous a permis davancer la fois sur la prsentation et la clart
de nos crans, mais aussi sur les scnarios de navigation et lintuitivit. Des pistes nous
ont t proposes et expliques, nous avons intgr de nouveaux rflexes dans notre
approche du dveloppement, et nous sommes partis sur de nouvelles bases avec des
mthodes de travail plus efficaces.
Nous sommes particulirement satisfaits de cette dmarche, combinant ergonomie et

design, et qui aura un impact significatif sur nos ventes.
Pascal GIVON
Directeur Loginspace
2
Organiser linformation
La faon dont les fonctionnalits sont organises dtermine quand et o seront prsentes les
informations et les fonctions dont lutilisateur a besoin. Cette organisation est le point dterminant
de lutilisabilit dun systme interactif. Elle devrait reflter la squence dtapes la plus efficiente
pour que lutilisateur puisse accomplir ses objectifs les plus attendus ou les plus frquents.
Deborah J. Mayhew1 , Principles and guidelines in software user interface design,
Prentice-Hall, 1992
2.1 Identifier le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.2 Architecture de linformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3 Agencer pour interagir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.4 Concevoir la page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.5 Cas pratique : K-dcole, comment le maquettage permet de rpondre des enjeux 47
fonctionnels et mtiers complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1 IDENTIFIER LE CONTENU

La conception centre utilisateur dune application logicielle ou dun site web
consiste laborer son contenu en sappuyant sur les fonctions et les services que
recherchent les utilisateurs. La premire tape permet de prciser les caractristiques de
la population vise ainsi que les moyens dont elle dispose pour atteindre ses objectifs.
1. Deborah J. Mayhew est consultante, auteur et professeur en Usability Engineering depuis 1981.
Elle est reconnue en tant que pionnire pour les tests utilisateurs web et logiciel, ainsi que dans le
design dinterfaces utilisateur.
20 Chapitre 2. Organiser linformation
Ensuite, des interviews nous aident mieux comprendre lattente des utilisateurs
et les questions quils se posent. Ces lments servent construire larchitecture de
linformation qui servira de plan directeur lorganisation du contenu de lapplication.
2.1.1 Cibler les attentes des utilisateurs

Afin de pouvoir adapter linterface aux utilisateurs et au contexte dutilisation, il
convient dans un premier temps didentifier prcisment le profil de la population
vise : tranche dge, catgorie socio-professionnelle, exprience de linformatique
et/ou de linternet, conditions environnementales ainsi que la configuration du
matriel utilis (type dinterface, systme dexploitation, navigateur le cas chant,
rsolution dcran, etc).
Avec le concours dun chantillon dutilisateurs appartenant au cur de cible,
on prcise les services et les tches proposs par le produit. Cette premire tape
de la conception 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 ? Quattendent-ils de
lapplication ou du site web ? Dans quel contexte sont-ils amens lutiliser ou y aller ?
Quelles sont, daprs eux, les lacunes des applications ou sites existants du mme type,
voire des autres mdias offrant ce type de service ?
Ces lments fournissent des lments subjectifs sur lattente des utilisateurs. Les
interviews permettent de mieux comprendre limage que se font les utilisateurs du
service propos et ce quils en attendent. Les focus group servent identifier lunivers
symbolique de lutilisateur. Tirant parti de la dynamique du groupe, ils permettent de
consolider la ligne de communication de lentreprise au travers de son produit.
Il est noter que ces mthodes (interviews et focus group) vont servir uniquement
recueillir les souhaits de lutilisateur. En aucune manire, elles ne peuvent permettre
de prvoir son comportement avec le produit [Nielsen 01]. On recueille de cette
faon des informations subjectives. Elles pourront tre remises en cause par la suite
lorsque lutilisateur est plac en situation dutilisation. En effet, les tests nous montrent
que lutilisateur ne fait pas toujours ce quil a annonc, car la situation concrte
induit de nouveaux comportements. Or, lutilisabilit dun produit sappuie sur ce
que lutilisateur 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.
2.1.2 Transmettre linformation

Pour un site web ou un intranet, le ciblage consiste galement identifier en fonction
de la population vise, les objectifs de communication que cherche atteindre
lentreprise au travers de son site. Une ligne de communication 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.
2.1 Identifier le contenu 21
En phase de dfinition, il est galement particulirement utile dtablir le paysage

concurrentiel dans lequel le site se positionne, cest--dire identifier les concurrents, le
contenu quils proposent et la faon dont ils communiquent sur diffrents mdias.
Une analyse dtaille (benchmark) en termes 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.
Check-list dvaluation rapide

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 ?
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.
2.1.3 Architecture de communication

Construire larchitecture de communication dune application consiste dans un
premier temps identifier les besoins et les questions que se pose lutilisateur. Il sagit
alors de construire les rponses, cest--dire les services rendus par lapplication, en
sassurant que des objectifs de communication sont atteints.
Une interface fonctionne lorsquelle fournit des rponses ses utilisateurs et quelle
transcrit les objectifs de communication de ses concepteurs.
Considrons, par exemple, un site intranet dont lun des objectifs en termes
de communication interne est de renforcer lesprit collectif au sein de lentreprise.
Lenqute a recueilli des besoins du type Comment se faire rembourser une note
de frais ? ou encore Quel modle de document utiliser pour les fax ? . Le site y
rpondra par un ensemble de pages dcrivant le rfrentiel des procdures et des

documents en vigueur dans lentreprise. La rubrique Rfrentiel 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.
Figure 2.1 Pour tre efficace, le site web doit rpondre aux questions de lutilisateur
tout en vhiculant les objectifs de communication de ses concepteurs.
Sur ce principe, larchitecture de communication est un document qui synthtise

cette premire phase de la conception de lapplication en dcrivant les diffrents
thmes abords et en prcisant pour chacun dentre eux la cible vise et lobjectif
poursuivi en termes de communication. Il permet de recenser de faon exhaustive
les diffrents lments dinformation partir desquels seront construits les crans, les
fentres de lapplication ou les pages du site.
2.2 ARCHITECTURE DE LINFORMATION

Larchitecture de linformation dsigne cette tape de la conception o le contenu
de linterface est structur et hirarchis en diffrents groupes dinformation qui
deviendront ensuite des fentres ou des pages selon le support. Dans un premier temps,
le contenu a t labor et collect plat . Lobjectif de cette seconde phase est de
regrouper les informations afin de faciliter la navigation.
Larchitecture de linformation se construit principalement selon deux stratgies
complmentaires : organisation selon lusage (la tche) et organisation selon la nature
des informations (le contenu).
2.2.1 Organiser selon la tche

Afin de minimiser leffort dapprentissage, la logique dutilisation du logiciel doit
correspondre la logique de lutilisateur. Les informations doivent tre prsentes de
manire directement exploitable pour lutilisateur et organises en fonction de ses
attentes.
un niveau global, le dcoupage en pages sappuie sur lanalyse de lactivit
de lusager. Le contenu de chaque page se dfinit en identifiant les informations
ncessaires lutilisateur pour mener lactivit laquelle est ddie cette page.
2.2 Architecture de linformation 23
Organiser linterface selon la tche des utilisateurs.
Le modle de la tche fournit larchitecture de base de linterface. Gnralement

construit lissue de lobservation des utilisateurs finaux en situation relle, ou bien
labor partir du cahier des charges fonctionnel de lapplication, le modle de la
tche reprsente la manire dont lutilisateur dcompose son activit en tches et
sous-tches. Afin que linteraction soit fluide et semble logique pour lutilisateur, cette
dcomposition doit se retrouver dans linterface.
Considrons, par exemple, un logiciel de gestion de magasin.
Figure 2.2 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 page de lapplication (voir figure suivante) permet de traiter lune des
trois sous-tches identifies, la fois en termes de contenu (donnes) et dactions
(commandes).
Construire le contenu de chaque cran de manire apporter linformation ncessaire

pour raliser la tche correspondante.
Chaque fentre ou page de lapplication doit permettre lutilisateur de raliser une

tche donne. Il convient donc dy placer les informations ncessaires pour raliser
cette tche.
Ddier chaque zone de linterface une tche spcifique.
Afin que lutilisateur puisse calquer sa faon de se servir de linterface sur la manire
dont il ralise habituellement la tche, il doit pouvoir retrouver chaque niveau les
diffrentes tapes qui composent son activit. Chaque zone de linterface doit donc
rpondre un sous-objectif de lobjectif gnral auquel est ddi lcran.
Figure 2.3 Chaque onglet de lapplication est ddi une sous-tche.

Ils prsentent les donnes qui vont permettre lutilisateur de prendre une dcision et de raliser
les actions en consquence.
Figure 2.4 Cette page du site est ddie une tche prcise : le choix du billet. Elle permet
linternaute datteindre son objectif en deux tapes : rechercher puis slectionner le billet
Hirarchiser les zones de linterface du gnral au particulier.
Une organisation du gnral au particulier facilite la comprhension de linterface,

car les lments se placent naturellement dans leur contexte.
Ce principe dorganisation se retrouve dans lExplorateur Windows. Larborescence
de fichiers, prsente dans la partie gauche de lExplorateur, fournit une vue globale
sur les donnes et indique le chemin parcouru pour atteindre le rpertoire slectionn.
La partie droite prsente le contenu du rpertoire, tandis quen dessous saffiche une
description dtaille de lobjet slectionn.
Figure 2.5 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.
Positionner les lments de linterface pour quils soient utiliss dans le sens de lecture.
La saisie est plus rapide, plus intuitive, lorsque les zones dinteraction se suivent
dans le sens de la lecture. Le parcours de linterface est plus fluide et les mouvements
oculaires sont plus naturels.
Prsenter les commandes et les donnes dans lordre dutilisation.
Les commandes doivent apparatre au moment o lutilisateur en a besoin, dans

un ordre cohrent par rapport la faon dont elles sont utilises pour accomplir la
tche. De mme, la logique de prsentation des donnes doit tre similaire celle
habituellement utilise sur les autres supports dont se sert lutilisateur.
Figure 2.6 Sur cette interface de recherche pour un systme documentaire, chaque zone de
lcran est ddie une tche spcifique : 1) Recherche : Lutilisateur saisit les critres de
recherche, 2) Affinage : Il prcise ses critres de recherche, 3) Rsultats : Lutilisateur visualise les
diffrents documents rpondant aux critres choisis, 4) Dtails : Il visualise prcisment le
document slectionn. Lensemble de linteraction se droule de haut en bas et de gauche droite,
cest--dire dans le sens de la lecture.
2.2.2 Organiser selon le contenu

Une seconde stratgie pour construire larchitecture de linformation consiste
sappuyer sur le contenu des informations prsentes dans linterface. Cette approche
est gnralement mise en uvre pour laborer larborescence dun site web. Les
regroupements sont construits en impliquant les utilisateurs laide de la mthode

dite du tri par carte (prsente en dtail au chapitre 7).
Cette mthode consiste demander aux utilisateurs de regrouper eux-mmes les
informations. Les regroupements obtenus servent ensuite de base la dfinition de
larborescence du site. De cette manire, lorganisation propose correspond la faon
dont les utilisateurs se reprsentent ces informations. Cette mthode garantit que la
navigation dans le site ou dans le logiciel se fonde sur la perception des utilisateurs,
sur limage quils se font du contenu de lapplication.
Toutefois, le tri par carte permet dorganiser les informations du point de vue des
utilisateurs, mais il ne garantit pas que la navigation soit simple. Pour que lutilisateur
trouve facilement les informations quil cherche, le systme de navigation doit tre
conu de manire le guider correctement et faciliter le processus de dcision
inhrent aux diffrents choix qui se prsentent lorsquil se dplace dans lapplication.
Lexprience de Miller a montr quil tait prfrable dorganiser les menus en
largeur, plutt quen profondeur [Miller 81]. Ce rsultat se vrifie aussi bien pour un
logiciel que pour un site 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 largeur dabord, lutilisateur comprend
plus facilement o il se situe. Il trouve plus rapidement les informations quil cherche.
Minimiser la profondeur du site (3-4 niveaux maximum).
Plus la profondeur du site est importante, plus les points de choix sont nombreux et
donc difficiles mmoriser. En rgle gnrale, au-del du 3e niveau, le visiteur risque
de se perdre car il ne sait plus o il est. 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 huit options, lutilisateur doit procder 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.
Prfrer une arborescence rgulire.
Plus larborescence du site est simple, plus elle est facile mmoriser. Lorsque la
structure du site prsente une topologie rgulire, sans branche isole ni bifurcation
inattendue, lutilisateur se construit aisment une image mentale du site. Il apprend
plus facilement sen servir.
Figure 2.7 La mthode du tri par carte consiste organiser larchitecture de linformation
du point de vue des utilisateurs partir des informations prsentes dans lapplication.
Figure 2.8 En rduisant la profondeur, lutilisateur mmorise facilement les rubriques

par lesquelles il est pass, tandis quil dtermine plus rapidement son chemin si le nombre de
choix est limit chaque intersection.
Figure 2.9 Une structure rgulire facilite la navigation dans le site

car elle est plus simple mmoriser.
Nous reviendrons sur la conception du systme de navigation proprement dit dans

le chapitre suivant.
2.3 AGENCER POUR INTERAGIR

Les types dinterface, leurs dimensions et leurs modes dinteraction se sont fortement
diversifis : site internet, logiciel, application web, smartphone, tablette, etc. Cepen-
dant, quel que soit le support, la manire dagencer les informations est toujours guide
par le mme principe : faciliter la manire dont lutilisateur interagit avec linterface.
2.3.1 Organiser lespace
Rendre cohrente la position des informations sur linterface.
Un positionnement cohrent des objets contribue lhomognit de linterface.

Pour cela, on utilise des gabarits dcran. Les gabarits dcran prcisent lagencement
des contenus et des commandes pour les diffrents types de fentre ou de pages de
lapplication.
Figure 2.10 Le gabarit permet dhomogniser les diffrentes fentres de lapplication

et ainsi den faciliter lapprentissage.
Des gabarits cohrents sur lensemble de lapplication permettent dharmoniser

lensemble de linterface. Lutilisateur lit et mmorise les informations plus facilement
car il sait o les trouver.
Qui plus est, les gabarits sont un facteur dhomognit pour une ligne de produit
logiciel. Ils renforcent le sentiment de confiance et la fidlisation des clients envers la
marque.
2.3 Agencer pour interagir 31
Figure 2.11 Les gabarits dcran confrent aux diffrents logiciels un air de famille :
ici la gamme Adobe avec Photoshop et Illustrator.
Adopter des gabarits homognes pour toutes les pages du site.
Figure 2.12 Une prsentation cohrente des pages dun site web facilite son apprentissage
car linternaute retrouve sur chaque page des lments de navigation similaires.
Une organisation cohrente pour un site web permet galement 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.
2.3.2 Le regard de lutilisateur

Lutilisateur ne regarde pas toujours lcran de la mme manire. On distingue deux
grandes stratgies dexploration visuelle. Lorsquil dcouvre pour la premire fois
une interface, lutilisateur explore laffichage en adoptant un balayage visuel en
Z. Ce rflexe vaut pour une interface nouvelle mais galement pour un affichage
charg en informations. Le regard part du coin suprieur gauche de limage, parcourt
systmatiquement la zone centrale et se termine dans le coin infrieur droit.
Figure 2.13 Lorsquil dcouvre pour la premire fois un cran,

lutilisateur le parcourt en Z.
Par contre, lorsque lutilisateur connat dj le logiciel ou le site, celui-ci effectue

plutt une exploration slective. Il focalise son regard certains endroits susceptibles
de contenir les informations pertinentes recherches plutt que dexplorer lensemble
de lcran. Avec lhabitude, ou lexpertise, des comportements visuels se renforcent et
le regard se dplace parfois plus vite, par anticipation, que lcran ou la page web ne
se rafrachit pas immdiatement.
Bien sr, le regard est galement attir par certains contenus et leur mise en
forme. Les images (photo, logo, visage) suscitent davantage les focalisations du regard
que les textes moins que ces derniers soient mis en vidence et se dtachent du
reste de linterface (grande taille, police de caractre, graisse). De la mme manire,
lagencement des informations et leur regroupement favorisent une exploration
visuelle en guidant le regard entre les diffrentes zones de linterface.
2.3.3 Parcours visuel dune page web

Il nexiste pas de parcours standard dune page web car il varie selon le contenu,
les visuels utiliss et leur rsonance chez lutilisateur. Toutefois, les tests mettent en
vidence des modes de lecture rcurrents [Gaillard 02]. En particulier, il apparat que
le centre de la page est souvent 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. Enfin, linternaute explore la partie haute
de lcran o il cherche la barre de navigation.
Figure 2.14 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.
Ces observations sont confirmes par lenregistrement des mouvements oculaires

(eye tracking). Une tude quantitative mene auprs dun panel de 200 internautes a
mis en vidence des parcours oculaires semblables [Ipsos 01].
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. Elle doit aussi 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.
2.3.4 Accessibilit des lments de linterface

Afin dorganiser linterface, il convient non seulement de prendre en compte la
visibilit des diffrents composants, mais aussi leur accessibilit laide de la souris ou
des doigts si lcran est tactile.
Pour une interface utilise la souris, les lments placs dans les coins sont
difficiles atteindre car le mouvement est plus contraint que lorsquils sont au centre
de lcran.
Figure 2.15 Selon leur position et les contraintes du mouvement

de la souris sur un cran dordinateur, les diffrents emplacements ne sont pas quivalents.
Pour les crans tactiles, laccessibilit des objets est la fois relative la taille de
lcran et lutilisation dune ou deux mains.
Pour un smartphone par exemple, lutilisation dune seule main (majoritairement
le pouce droit) est souvent privilgie. De ce fait, laccs aux informations situes
aux extrmits suprieures et notamment gauche est contraignant. Au contraire, les
lments situs en bas droite et autour de laxe de mouvement du pouce (en haut
droite et en bas gauche) sont plus accessibles sur un smartphone.
Pour un cran plus grand comme une tablette ou un Smartphone en mode paysage,
linteraction deux mains est plus aise. Dans ce cas, les objets placs en bas et autour
des coins sont plus facilement accessibles.
Figure 2.16 Laccessibilit des emplacements sur un cran tactile est directement lie
la taille de lcran lui-mme et lutilisation dune ou deux mains.
Veiller ce que la main ou le doigt ne masque pas les informations affiches.
Lutilisation du doigt comme moyen de pointage introduit une contrainte par-

ticulire puisque le doigt lui-mme, voire la main pour les tablettes tactiles, peut
masquer tout ou partie de linterface. Il est donc recommand de veiller ce que les
lments tactiles soient disposs de telle sorte que les interactions tactiles puissent
tre effectues sans nuire la visibilit de lcran.
Figure 2.17 Sur la version tactile du site LeParisien.fr, la barre de navigation gauche conduit
lutilisateur droitier masquer lcran lorsquil choisit un nouvel article. Au contraire, sur
LExpansion.com, la barre de navigation en bas de page permet de changer facilement de page
tout en conservant une visibilit sur le centre de la tablette.
Figure 2.18 Sur lapplication de gauche, le doigt masque le graphique lorsque lutilisateur
slectionne lindice afficher. Au contraire droite, la slection se fait sous le graphique,
sans obstruer la visibilit de lcran.
2.3.5 Zones de manipulation

La plupart des interfaces homme-machine se composent de zones de contenus,
de panels ou de fentres, cest--dire que lcran est dcoup en plusieurs espaces
interdpendants : titre, barre de menus, zone de contenu, boutons de commande.
Chaque zone regroupe un ensemble dobjets qui vont servir doutils au dialogue entre
lutilisateur et lapplication.
Sur une interface, les zones de manipulation sont des espaces de lcran sujets
de nombreuses slections la souris ou au doigt, par exemple une barre de
menu, une palette doutils ou un ruban comme sur Microsoft Office. Lorsquelles
saffichent, lutilisateur commence par les lire. Les commandes importantes doivent
donc apparatre en premier, dans le sens de la lecture.
Organiser les zones de manipulation dans le sens de la lecture et en fonction de la frquence

dutilisation.
Sur un cran dordinateur, les commandes le plus souvent utilises sont places en
haut et gauche, tandis que sur cran tactile elles sont centres en bas pour faciliter
leur accs aux doigts.
Figure 2.19 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 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 pour une souris par exemple, le dplacement soit
limit.
Regrouper les informations.
Le regroupement sert de base lagencement des diffrents objets de linterface. Il

permet de rapprocher les informations qui, du point de vue de lutilisateur, sont lies
entre elles. En particulier, toutes les donnes ncessaires laccomplissement dune

mme tche sont rassembles dans le mme espace : cest le principe de la composition
des fentres.
Figure 2.20 Le ruban Office a t conu sur le principe du regroupement des fonctionnalits
(functional chunking). Chaque onglet rpond un objectif qui se dcompose en plusieurs groupes
de commandes correspondant eux-mmes des sous-objectifs.
2.3.6 Les dimensions de lcran

Lagencement dune interface est contraint la fois par la manire dont elle est lue, et
par la taille de lcran dans lequel elle saffiche.
Concevoir la page pour quelle soit lisible en 1 024 768 pour un ordinateur et en
320 x 480 pour les Smartphones
Bien quelles ne soient pas exactement reprsentatives de lensemble de la

population mondiale des utilisateurs dInternet, les statistiques fournies par le site
w3schools.com montrent que la quasi-totalit des crans sont configurs en 1 024 768
ou plus (99 %). Les rsolutions infrieures disparaissent pour les ordinateurs alors
quelles augmentent pour les terminaux nomades.
Bien entendu, chaque site attire son propre public. Les seules statistiques
considrer sont celles des visiteurs effectifs du site lorsquil est en ligne.
Figure 2.21 Les statistiques du site W3schools.com montrent quune grande majorit
dinternautes utilisent une rsolution graphique de 1024 768 pixels ou plus.
Lvolution vers des rsolutions dcran plus importantes est trs nette.
La zone visible des pages dun site web doit galement prendre en compte laffichage
des barres de menu, favoris, adresse, etc. Ces lments du navigateur vont rduire
la zone daffichage de la page. La partie de la page qui sera visible quelle que soit la
configuration dcran de linternaute est appele Safe Zone. Au regard des informations
fournies par loutil Google browser size, elle correspond 950 500 pixels pour 90 %
des internautes.
Figure 2.22 Loutil Google browser size est un visualisateur de la taille de la fentre employe
par les utilisateurs de Google. Il nous montre ici que seulement 50 % des internautes vont voir le
bouton Add to Cart sans utiliser les barres de dfilement.
Pour rsoudre le problme de la rsolution dcran, certains concepteurs web

adoptent un agencement fluide en ajustant automatiquement la taille de la page
celle de la fentre. Cette technique permet de rendre visible le contenu de la page
quelle que soit la rsolution dcran utilise. Un agencement fluide est utilis sur
les versions mobiles dun site web car les rsolutions varient dun modle lautre.
Dans tous les cas, il est prfrable de dfinir des rsolutions minimales et maximales
afin de garantir le confort de lecture.
2.3.7 Longueur des pages web

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

proposent parfois une zone de navigation locale qui permet daccder directement
aux sections de la page, vitant ainsi dutiliser les barres de dfilement. Ce composant
semble tre un moyen de faciliter la navigation dans les pages longues la manire
dun sommaire dynamique, mais il pose dautres problmes.
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 amne un autre endroit sur la mme page. Le comportement nest plus le mme,
bien que llment dclencheur soit le mme : un lien. Il peut en rsulter une certaine
confusion [Nielsen 00].
Permettre un retour rapide en haut de page.
Les barres de dfilement, ou la molette de la souris, servent parcourir verticale-

ment la page. Mais le pas de dplacement est gnralement faible afin de permettre
la lecture tout en descendant dans la page. Cette lenteur est difficilement acceptable
lorsquil sagit datteindre le haut de la page. Pour cela, un bouton ddi est prfrable.
Cest probablement le seul cas o lutilisation dun lien interne la page est conseille.
2.3.8 Poids des pages web

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. En 2000 une tude mene aux tats-Unis [Chen 00]
montrait quune majorit dinternautes nattendait pas plus de 8 secondes. Une
tude plus rcente montre que ce dlai peut descendre 4 secondes [PhoCus-
Wright/Akamai 2010]. La conclusion reste encore la mme : les sites les plus visits
sont ceux dont les pages se chargent le plus vite [Nielsen 99].
Figure 2.23 Dans cette rubrique, les liens semblent permettre daccder aux sous-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.
Allger la page autant que possible.
Malgr une rduction progressive de la fracture numrique , il convient de

toujours prendre en compte le poids des pages. Ceci vaut autant pour les connexions
limites en dbit que pour les connexions nomades (ex. : smartphones, tablette) dont
les vitesses de connexion ne sont pas encore quivalentes lADSL et qui ptissent
des changements dmetteur en mobilit.
Lutilisation de composants dynamiques se gnralise dans les pages web. Les
technologies Ajax, en particulier, permettent de faciliter le chargement des pages en
ne rafrachissant quune partie du contenu plutt que lensemble de la page.
2.3.9 Multi-fentrage
Deux modes daffichage des fentres sont possibles : par tuilage ou par recouvrement.
Le tuilage est une organisation fixe des fentres sans possibilit de dplacement. Le
multi-fentrage par recouvrement, permet lutilisateur de dplacer les fentres les

unes par rapport aux autres.
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.
Faciliter laccs et la comprhension des commandes de multi-fentrage.
La gestion des fentres relve de la tche dutilisation de linterface proprement

dite. Plus elle sera simple, plus linterface semblera facile utiliser. Les diffrentes
commandes lies au multi-fentrage, cest--dire lactivation, louverture, la fermeture,
la rduction et le dplacement des fentres, doivent tre la fois faciles utiliser et
faciles apprendre.
Le multi-fentrage par recouvrement pose toutefois 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.
Utiliser le tuilage pour les utilisateurs occasionnels, lorsque les sorties sont prvisibles et
que lcran est suffisamment grand.
Imposer un arrangement fixe des fentres est une perte de flexibilit, mais rend
linterface simple utiliser et facile apprendre. Il convient aux utilisateurs novices
en informatique connaissant mal la manipulation des fentres. Il est toutefois recom-
mand 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.
Minimiser la quantit dinformations mmoriser dune zone lautre.
Afin de rduire le travail de mmorisation, il est prfrable que toutes les informa-
tions relatives une tche soient places dans une mme zone. Ce regroupement des
informations favorise leur association pour une meilleure mmorisation.
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 dor-

ganiser lui-mme son espace de travail. Il est particulirement apprci des utilisateurs
2.4 Concevoir la page daccueil 43
expriments qui matrisent les outils informatiques. En fait, le multifentrage ne

prsente un gain de performance que pour les utilisateurs expriments qui nont plus
deffort dapprentissage faire.
Autoriser la mmorisation dun arrangement de fentres.
Bien entendu, pouvoir organiser son gr larrangement des fentres ne prsente

un vritable intrt que dans la mesure o cette opration na pas tre rpte
chaque nouvelle session.
2.4 CONCEVOIR LA PAGE DACCUEIL

La page daccueil est vue par tous les visiteurs du site. Pour certains dentre eux, cest
parfois la seule page quils verront. la lecture de la page daccueil, linternaute se
construit une premire impression du site. Son rle est donc stratgique. Cest en
quelque sorte une vitrine : elle prsente le contenu tout en donnant lutilisateur les
moyens de pousser plus loin la visite.
Entre du site, la page daccueil doit tre informative avant toute chose. Sa mission
est difficile : montrer les services proposs et donner linternaute les rudiments pour
se servir du site. Trois lments y apparaissent :
lidentit du site,
les informations utiles,
les fondements de la navigation.
Figure 2.24 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.
Rpondre aux questions de linternaute dans la page daccueil.
Au travers de la page daccueil, linternaute cherche savoir si le site rpond son

attente. Sappuyant sur les tests utilisateurs quil a conduits, Steve Krug nous explique
que les utilisateurs se posent gnralement quatre questions lorsquils arrivent 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 page daccueil 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.
Check-list de 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 ?
Fournir les repres de navigation depuis la page daccueil.
Second objectif de la page daccueil : expliquer lutilisateur comment naviguer

dans le site. Pour cela, la prsentation et le libell des rubriques doivent tre semblables
ceux utiliss dans le reste du site. De cette manire, lutilisateur peut gnraliser ce
quil apprend sur la page daccueil lensemble du site.
viter les crans dintroduction et les tunnels.
Les crans dintroduction (splash screens), ou les tunnels composs de plusieurs

crans, ralentissent inutilement laccs au site. Les concepteurs sont conscients de leur
faible intrt 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.
2.4 Concevoir la page daccueil 45
Figure 2.25 Ds lentre sur le site, linternaute trouve la rponse sa question :

Quy a-t-il ce soir la tl ?
Figure 2.26 Au contraire, lorsque les entres ne sont pas explicites, linternaute ne sait pas par
o commencer. Sur ce site, lentre cliquable est en fait le logo situ en haut gauche de lcran,
alors que lil est principalement attir par limage centrale, puis le texte situ dessous.
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.
Pour une application, concevoir la page daccueil comme un tableau de bord.
Sur un logiciel, la page daccueil fournit une vue de synthse sur les donnes
applicatives. Elle donne lutilisateur une vision globale de son activit et lui permet
de prioriser ses tches.
Figure 2.27 Sur ce logiciel de gestion immobilire, Dovadis de Loginspace prsent au

paragraphe 1.5, la page daccueil permet lutilisateur dorganiser sa journe de travail.
K-dcole, comment le maquettage permet de rpondre des enjeux... 47
2.5 CAS PRATIQUE : K-DCOLE, COMMENT LE

MAQUETTAGE PERMET DE RPONDRE DES
ENJEUX FONCTIONNELS ET MTIERS COMPLEXES
2.5.1 Un environnement de travail ddi lenseignement
K-dcole est un Espace Numrique de Travail (ENT) pour les collges et les lyces,
dvelopp par la socit Kosmos. Il sagit dun progiciel de gestion de contenu et de
portails ddis au monde ducatif.
Cet espace numrique permet la cration simple et rapide despaces pour les classes,
les enseignants, les disciplines, les projets pdagogiques, les clubs, etc. Chaque espace
peut disposer dun blog, dun forum, dun agenda, dun chat et dun porte-documents.
Les enseignants et les lves, travers ces espaces, deviennent les principaux produc-
teurs de contenus.
K-dcole propose un cahier de textes numrique : lenseignant peut y prparer
ses cours, organiser ses activits pdagogiques, les lves peuvent y dposer leurs
devoirs, accder aux ressources pdagogiques, des forums contextuels pour des
questions-rponses avec lenseignant.
Pour les chefs dtablissements et les quipes de direction, K-dcole est un
espace de diffusion dinformations cibles (enseignants, personnels administratifs et
techniques, parents, etc.). Il offre laccs des outils mtiers, annuaires, emploi du
temps, agendas personnels et de groupe.
Kosmos fait appel nous courant 2010 pour rorganiser et amliorer les interfaces
de son application qui sont trs riches fonctionnellement.
2.5.2 Sappuyer sur larchitecture de linformation pour concevoir la

navigation
K-dcole est un portail multi-utilisateurs ouvert des profils varis : les enseignants,
le personnel de ltablissement, les lves et les parents dlves. Il sert doutil de
communication et despace dchange pour des usages varis : prparation des cours,
remise des devoirs, cahier de texte, agendas, etc. Les multiples facettes de loutil
rendent son architecture complexe. La cohrence du systme de navigation est donc
rapidement apparue comme un lment cl de la refonte de lapplication.
Nous avons donc conduit plusieurs groupes de travail avec lquipe produit et les
experts oprationnels afin de redfinir larchitecture de linformation de lapplication.
Cette premire tape a permis dtablir les fondations de la refonte de linterface.
Figure 2.28 Architecture de linformation de lapplication
2.5.3 Maquetter linterface pour tester les modes de navigation

Nous appuyant sur cette nouvelle architecture, nous avons ralis avec lquipe projet
diffrentes maquettes qui nous ont permis dvaluer plusieurs systmes de navigation
possibles en nous appuyant sur des scnarios dusage typiques de cette application :
le professeur publie son cahier de texte aprs un cours, ltudiant remet un devoir, le
parent dlve consulte les rsultats de son enfant, etc.
Lutilisation des maquettes interactives permet de vrifier concrtement lenchane-
ment des actions ainsi que le feedback de linterface. chaque tape, lquipe produit
a pu valider la pertinence du contenu au regard des besoins des utilisateurs ainsi que
la faisabilit technique des modes de navigation proposs.
2.5.4 Valider auprs des utilisateurs grce une maquette haute-fidlit

Finalement les maquettes ont t habilles graphiquement par le designer de Kosmos
afin de pouvoir prsenter des maquettes trs proches du rsultat final. On parle dans
ce cas de maquettage haute-fidlit . Ces maquettes ont permis de mettre en valeur
lergonomie et la facilit de prise en main du produit K-dcole.
Les maquettes haute-fidlit ont t montres des groupes dutilisateurs, acteurs
de lenseignement au sein des lyces et des collges, afin dvaluer en situation
lutilisabilit relle de lapplication.
2.5 K-dcole, comment le maquettage permet de rpondre des enjeux... 49
Figure 2.29 Maquette interactive noir et blanc construite lissue des groupes de travail
2.5.5 Une charte ergonomique pour guider les futurs dveloppements

Sur la base des retours utilisateurs, les maquettes ont permis de valider un ensemble
de rgles dergonomie qui constitue maintenant la charte ergonomique Kosmos. Cette
charte est le document de rfrence des quipes R&D en charge du dveloppement
des nouveaux modules de K-dcole.
Ds lors que lapplication est complexe et que les usages sont multiples, la dmarche
de maquettage permet dessayer et de tester diffrentes alternatives de conception
rapidement sans avoir se lancer dans des dveloppements longs et coteux. Cette
dmarche permet de limiter les risques dans la phase de spcification et dinitier les
dveloppements sur une base solide.
K-dcole sera dploy terme auprs de plus dun million dutilisateurs dans
lenseignement secondaire.
Figure 2.30 Maquette haute-fidlit de lapplication finale
La dmarche ergonomique conduite avec Usabilis a install lergonomie au cur

de notre conception logicielle. Ceci a eu pour consquence de modifier une approche
historique trs plat vers une approche plus en profondeur o les fonctionnalits
simples et les plus importantes sont directement proposes et accessibles en 1 seul clic
alors que les fonctionnalits les plus avances sont places en second plan.
Jean Planet
Prsident Kosmos
3
Construire la navigation
Sur le Web, lutilisabilit est une question de survie.

Si un site est difficile utiliser, les gens partent. Si la page daccueil ne parvient pas noncer
clairement ce quelle est cense proposer et ce que les utilisateurs peuvent faire sur le site, les gens
partent. Si les utilisateurs se perdent sur un site Web, ils partent. Si les informations dun site
Web sont difficiles lire ou ne rpondent pas aux questions des utilisateurs cibles, ils partent.
Jakob Nielsen1 , Useit.com Alertbox, 2003.
3.1 Principes ergonomiques de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

3.2 Concevoir le systme de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.3 Naviguer autrement dans une interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.4 Les lments du systme de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
3.5 Vrifier la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
3.6 Cas pratique : Cte-dOr Tourisme une application web conviviale pour collecter les 85
informations touristiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. Jakob Nielsen est expert dans le domaine de lergonomie informatique et de lutilisabilit des sites
web. Il est titulaire dun doctorat en interaction homme-machine, obtenu luniversit technique
du Danemark. Jakob Nielsen est linventeur de la mthode dingnierie de lutilisabilit : Usability
Engineering.
52 Chapitre 3. Construire la navigation
3.1 PRINCIPES ERGONOMIQUES DE NAVIGATION

Contrairement au monde rel o nous dcouvrons progressivement les lieux que nous
visitons, une interface prsente les informations plat . Pour explorer ce monde
virtuel, les lments affichs lcran font office de panneaux indicateurs pour se
diriger. Mais il nous est difficile de savoir sil reste encore beaucoup de chemin pour
atteindre notre but, car notre vision est limite un seul cran.
Cette particularit est lorigine de deux dsagrments frquents sur une interface :
se perdre et attendre.
Sur le web par exemple, les navigateurs noffrent aucune vue globale de lensemble
du chemin parcouru. Linternaute ne peut compter que sur le site lui-mme pour laider
sorienter. Lorsque la navigation est peu ergonomique, il se perd frquemment.
Lorsque la navigation est difficile, lutilisateur doit ouvrir de nombreuses pages
ou crans. Lattente entre chaque page rallonge invitablement la dure globale de
sa tche. Louverture dune nouvelle page ncessite le chargement des lments qui
la composent et autant de connexions au serveur. Selon le dbit du rseau et la
puissance de calcul de lordinateur, ces traitements peuvent sterniser et parfois
conduire linternaute abandonner.
Lorsquil utilise une application logicielle ou quil visite un site, lobjectif de
lutilisateur nest pas de naviguer. Il se sert de lapplication dans le but de trouver
une information, de rsoudre un problme ou de consulter des donnes. La navigation
nest pas une fin en soi, cest uniquement un moyen pour atteindre un objectif.
Guider lutilisateur pour faciliter la navigation.
La navigation est une mtaphore pour dsigner le cheminement au sein de linter-

face. Quand la navigation est complexe, les choix sont nombreux, la mmoire court
terme de lutilisateur est rapidement sature. Il est ncessaire de laider sorienter.
Pour lutilisateur, la navigation doit tre la plus simple possible car cest une activit
secondaire par rapport son objectif premier. Pour cela, la conception du systme
de navigation devra sinspirer de notre faon de nous orienter dans le monde rel,
cest--dire permettre lutilisateur de savoir sur chaque cran : o il est, par o il est
pass et ce quil y a ailleurs.
Indiquer o est lutilisateur.
Il existe principalement deux moyens pour montrer lutilisateur o il se trouve

et en particulier sur le web. La premire consiste changer la prsentation de la page
courante dans la barre de navigation, ce qui permet de signaler o se situe cette page
par rapport aux autres rubriques du site. La seconde est de donner la page un titre
cohrent avec le libell du lien sur lequel il vient de cliquer, ceci afin de rappeler au
visiteur ce quil vient de faire et de renforcer sa comprhension de lorganisation du
site ou du logiciel.
3.1 Principes ergonomiques de navigation 53
Indiquer par o est pass lutilisateur.
Souvent, le moyen le plus simple pour aider lutilisateur se reprer est de lui
montrer le chemin par lequel il est dj pass en changeant par exemple la couleur
des liens, en modifiant le graphisme du bouton prcdemment cliqu, etc.
Sur les sites web, on trouve galement un fil dAriane montrant linternaute
le trajet quil a parcouru depuis la page daccueil. Cet lment dinterface permet
lutilisateur de se reprer tout en rendant explicite lorganisation du site. Il est toutefois
peu utilis dans les applications logicielles car la profondeur de navigation est moindre.
Figure 3.1 Le fil dAriane 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 fournie par la
barre la navigation qui donne accs aux diffrentes rubriques du site. Elle permet
linternaute destimer la taille de lensemble du site et didentifier les autres rubriques
susceptibles de lintresser.
Figure 3.2 La barre de navigation procure linternaute une vue plat de chaque
rubrique comprenant des sous-rubriques par thme.
Veiller la cohrence du systme de navigation.
Chacun des lments du systme de navigation constitue un indicateur qui permet

lutilisateur de se reprer et de savoir o il se trouve dans linterface. Un systme de
navigation fonctionne partir du moment o il est cohrent, cest--dire que le mme
libell se retrouve dans la barre de navigation, dans le fil dAriane et comme titre de
la page courante.
Figure 3.3 La cohrence du systme de navigation permet lutilisateur de comprendre

clairement o il est. Ici, le titre de la page courante (Notre histoire) se retrouve lidentique dans la
barre de navigation et dans le fil dAriane.
Agencer les rubriques dans lordre 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, 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.
Selon le niveau dexprience et dexigence, les utilisateurs nont pas tous la mme
apprhension dune interface. Le protocole de navigation, cest--dire les moyens mis
disposition des utilisateurs, doit donc tre suffisamment souple pour prendre en
compte diffrents profils dutilisateurs, du dbutant lexpert.
Le dbutant, utilisateur occasionnel, apprciera dtre guid dans sa dcouverte.
Il prendra le temps dexplorer les diffrentes rubriques, se construisant ainsi une
reprsentation mentale de larborescence des fonctionnalits de lapplication ou des
thmes du site.
Au contraire, lexpert, utilisateur frquent, prfrera accder rapidement aux
informations quil pense trouver sans passer par des sous-menus, des fentres ou des
pages intermdiaires. Pour ce dernier, un moteur de recherche permet datteindre
directement certaines informations ou fonctionnalits par leur libell.
Ne pas demander linternaute de connatre le fonctionnement du navigateur.
Un site doit se suffire lui-mme en termes de navigation. Il doit pouvoir tre par-
couru uniquement par ses propres liens. Il ne doit pas sappuyer sur des fonctionnalits
3.1 Principes ergonomiques de navigation 55
du navigateur dont lutilisateur ignore parfois mme lexistence, comme par exemple
le bouton Rafrachir .
Laisser linitiative du dialogue lutilisateur.
En rgle gnrale, le dialogue homme-machine ne doit pas tre directif. Lutilisateur

doit pouvoir mener le dialogue sa guise. En particulier, il convient dviter les
impasses, cest--dire permettre de revenir en arrire (Dfaire, Annuler), dabandonner
le dialogue ou dinterrompre un traitement en cours. Nanmoins, le dialogue peut
parfois tre plus directif lorsque lactivit de lutilisateur est frquemment interrompue
ou que la tche se fait en squences rptitives.
viter les impasses.
Linterface doit guider lutilisateur et le conduire vers son objectif de la manire la

plus fluide possible. tout moment, des boutons ou des liens doivent lui indiquer le
chemin suivre. En aucune manire, il ne doit tre bloqu , sans aucun lment
dinteraction lui montrant comment poursuivre son parcours.
Figure 3.4 Cette page est une impasse . Lutilisateur nest pas guid
pour continuer ses achats sur le site.
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 linter-
naute 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].
Figure 3.5 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.
3.2 CONCEVOIR LE SYSTME DE NAVIGATION

3.2.1 Barre de navigation
Dans une application logicielle, la barre de menus permet un accs pratique et
thmatique aux fonctionnalits disponibles. Elle fournit lutilisateur un point de
repre stable sur lensemble des crans de lapplication.
Afficher une barre de navigation sur tous les crans de lapplication.

3.2 Concevoir le systme de navigation 57
Sur le web, la barre de navigation apparat sur toutes les pages du site au mme
endroit et avec la mme prsentation. La barre de navigation montre linternaute
quil reste sur le mme site. Elle permet un accs direct aux principales rubriques du
site et un retour rapide la page daccueil. Ce type de systme de navigation est appel
navigation persistante.
Figure 3.6 Barre de navigation.
Cadrer la barre de navigation en haut gauche de la page.
Place en haut gauche de la page, la barre de navigation est toujours apparente

quelle que soit la taille de la fentre. En effet, lorsquon redimensionne une fentre, le
coin suprieur gauche reste visible. De cette manire, la barre de navigation demeure
accessible quelle que soit la taille de lcran. Par ailleurs, cet emplacement confre
la barre de navigation une position dominante sur le contenu de la page.
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 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.
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.
Figure 3.7 Lutilisateur a choisi de visiter la page Divertissements ,

mais il est surpris lorsquil arrive sur la page en question.
Figure 3.8 Affichage de la page Divertissements . Lutilisateur ne retrouve plus les repres
de dpart : le haut de la page et sa barre de navigation ne sont plus les mmes, 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.
3.2.2 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 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).
Proposer une zone de navigation contextuelle.
Lobjectif est de permettre linternaute dexplorer le site en fonction de ses propres

sujets dintrt, voire de linciter dcouvrir de nouvelles sections. Elles peuvent tre
places pour cela, soit en dessous du corps de la page soit sur le ct.
Figure 3.9 Cette page est lentre du rayon Informatique et logiciels de ce site. Les zones
Accessoires Informatiques au centre et Meilleures ventes droite offrent une navigation
contextuelle. Elles compltent le thme central de la page.
Cette navigation est gnralement apprcie des internautes car elle semble moins
dirige et plus intuitive que la navigation impose par la barre de navigation. Elle
permet dapprofondir les thmes traits dans la page courante et daborder des sujets
annexes.
3.2.3 Navigation web

Malgr des diffrences de graphisme dun site lautre, la navigation web se standardise
pour le plus grand bien de linternaute qui sy retrouve plus facilement. Une majorit
de sites ont adopt un systme de navigation sappuyant sur les lments du schma
suivant.
Figure 3.10 Gabarit standard de navigation.
Le logo du site est plac en haut gauche. Il a une position dominante par rapport
au reste de la page. Effectivement, le logo reprsente le site et au-del, lentreprise
laquelle appartient ce site. Il englobe donc naturellement lensemble des pages.
Les concepteurs web ont pris lhabitude dassocier au logo un lien vers la page
daccueil. Cest logique et cohrent avec le rle englobant du logo. Mais les tests nous
montrent que peu dutilisateurs connaissent ce lien, seuls les internautes 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 larborescence des rubriques car
ils doivent tre accessibles tout moment par lutilisateur. 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.
Deux types dutilitaires sont distinguer. Les utilitaires importants (ex. panier,
compte client, recherche) sont affichs droite en haut de page, tandis que les autres
sont placs dans le bas de page (footer). Il sagit par exemple, des mentions lgales, du
plan du site ou du contact presse.
La barre de navigation horizontale permet une navigation primaire, cest--dire

laccs au premier niveau du site. Linternaute atteint par cette zone les principales
rubriques.
Chaque page du site possde galement une zone de navigation appele navigation
secondaire. Cette zone de navigation permet de se dplacer lintrieur dune mme
rubrique. Selon les sites, elle saffiche soit horizontalement sous la barre de navigation
primaire, soit verticalement gauche de la page.
Figure 3.11 Ici, la barre de navigation primaire, reprsente par des onglets, ouvre une zone
de navigation secondaire horizontale (en bleu) qui permet daccder directement aux pages.
La rgle des 3 clics

La premire dition de louvrage recommande : 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 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].
3.2.4 Navigation sur smartphone

Les tablettes tactiles offrent une relle libert pour disposer les contenus et favoriser
linteractivit avec les deux mains. Au contraire, les smartphone, du fait de leur
moindre taille dcran favorisent plutt laffichage uniquement de contenus interactifs
pour naviguer, en plus ou non dune barre de navigation.
En gnral, les sites web et les applications pour smartphone proposent une prsenta-
tion des menus sous la forme dune liste unique pouvant ventuellement tre dfile
verticalement. Chaque menu est prsent sur toute la largeur de lcran, facilitant ainsi la
slection. La navigation dans les menus et sous-menus seffectue par slection successive,
avec ou sans effet de transition de gauche droite ou de haut en bas.
Figure 3.12 Les menus sont affichs sur toute la largeur et la navigation semble seffectuer de
gauche droite (Menu Mothers Day vers son contenu).
Sur smartphone, afficher la barre de navigation de prfrence en bas de lcran.
La barre de navigation dune application tactile est gnralement affiche soit en

haut soit en bas de lcran, afin de faciliter son accessibilit. Le positionnement en
bas est privilgier pour des changements rapides de menus avec le pouce de la main
tenant le smartphone.
Limiter la barre de navigation 5 boutons sur smartphone.
Pour une application tactile, la dimension du doigt contraint le nombre et la

disposition des boutons. Jusqu cinq boutons sont gnralement admis sur smartphone.
Ils permettent de concentrer pour chacun deux, soit une icne seule et explicite, soit
un libell court, soit les deux. Au-del de cinq boutons, le pointage au doigt demande
une prcision peu confortable et laffichage dun libell nest pas suffisamment lisible.
Ce nombre est dfini en priorit pour un affichage en mode portrait, car les boutons
pourront tre simplement allongs et affins en mode paysage.
Privilgier une barre de navigation scrollable pour plus de 5 items.
Lorsque le nombre de points dentre dans la navigation dpasse la largeur lisible

de lcran, plusieurs possibilits daccs sont possibles. Toutefois, lutilisateur doit tre
en mesure de les reprer facilement. Il peut sagir dun bouton de menu unique en
haut de lcran ou en complment des quatre autres boutons de la barre de navigation,
ou encore une barre horizontale scrollable que lutilisateur peut faire dfiler dun
ct ou de lautre.
Figure 3.13 Diffrentes barres de navigation tendues sur smartphone.
Un menu gnral a lavantage, que ce soit pour un site web ou une application,
de regrouper lensemble de la navigation sous la forme dune liste droulante. Dans
ce cas, la longueur et donc le nombre dentres seront limits par la hauteur visible
lcran pour un smartphone orient en mode portrait.
Lorsque le nombre de boutons ne peut tre rduit 5, il peut tre judicieux que
lun des boutons permettent daccder des menus supplmentaires afin dy relguer
des niveaux de navigation et des fonctions de moindre importance.
Finalement, la barre de navigation horizontale scrollable compose de plus de
cinq boutons est une alternative intressante. Elle permet daccder aux boutons non
visibles, et moins prioritaires par dfilement au doigt.
3.2.5 Processus par tape : exemple de la descente dachat

La descente dachat, appele aussi check-out, dsigne les dernires tapes du processus
dachat. la fin de lachat sur un site de e-commerce, elle permet au client de prciser
ses adresses de livraison, de facturation et de fournir les informations de paiement.
Ce type de navigation est appel processus par tape , car lactivit de lutili-
sateur est dcompose en diffrentes tapes indpendantes, la manire des Wizard
que lon trouve dans le logiciel. Les recommandations nonces ici pour les sites de
e-commerce peuvent tre transcrites dautres types de processus par tapes.
Concevoir un processus par tape pour les tches complexes ralises peu frquemment
ou pour lesquelles lutilisateur peut tre interrompu.
La navigation en tapes est particulirement utile lorsque lon demande lutilisa-

teur de raliser une activit complexe, pour laquelle il a besoin dtre guid soit parce
quil ne la ralise quoccasionnellement, soit parce que cette tche est susceptible
dtre frquemment interrompue.
Ordonner les tapes selon lattente des utilisateurs.
Sur un site de e-commerce, la descente dachat se dcompose en plusieurs tapes,

chaque tape correspond un objectif prcis et simple pour linternaute :
1. Options de cadeau : emballage ou message personnalis.
2. Choix de la mthode dexpdition et donc de livraison.
3. Choix de ladresse de livraison.
4. Choix de ladresse de facturation (si elle est diffrente).
5. Choix du mode de paiement puis saisie des informations de la carte bancaire
sil sagit dun paiement lectronique.
Simplifier la descente dachat.
La descente est une tape importante du processus dachat au cours de laquelle

il est demand lutilisateur de saisir de nombreuses informations. Qui plus est,
ces informations sont importantes car elles conditionnent la russite de lachat.
Toutefois, la descente dachat est gnralement perue comme une charge de travail
supplmentaire pour linternaute qui na pas fournir habituellement autant de dtails
lorsquil effectue un achat dans le monde physique.
Toute distraction lors du processus dachat est un risque que linternaute aban-
donne. Il convient donc dviter les liens transversaux, les publicits, les accroches
pour des ventes complmentaires, etc. bref, tout lment qui risque de dtourner le
client de son chemin vers la page de paiement.
Cest pourquoi, il est prfrable de proposer des liens de cross-selling (ventes lies
ou additionnelles) sur les pages produit, voire ventuellement sur la page Panier, et
non pendant la descente dachat. tel point que certains sites, Amazon par exemple,
prfrent enfermer le client dans un tunnel de commande sans aucun lien vers le
reste du site.
Montrer lutilisateur ltape courante.
Un indicateur graphique doit guider lutilisateur tout au long du processus et mettre

en vidence ltape courante par rapport au reste du processus dachat. De manire
prsenter de manire explicite le processus, il est galement conseill de numroter les
tapes et de titrer clairement chacune delles. Par ailleurs, afin que lutilisateur garde
le contrle de sa navigation, il est recommand de permettre linternaute de revenir
aux tapes prcdentes.
Figure 3.14 Les diffrentes tapes de la descente dachat

apparaissent clairement aux yeux du client
Mettre en vidence laction principale.
chaque tape, un bouton permet davancer vers ltape suivante. Ce bouton doit
tre mis en vidence de manire vidente aux yeux de linternaute. Cest un lment
fort de guidage.
Figure 3.15 Sur Amazon, ce bouton permet de passer

dune tape de la descente dachat lautre.
La descente dachat doit tre courte.
Lutilisation dinternet est motive par un gain de temps, linternaute apprciera

donc que cette tape terminale de lachat, relativement fastidieuse car elle ncessite
de nombreuses saisies, soit la plus courte possible. Par ailleurs, plus la descente est
courte, moins lutilisateur se sent pig ou retenu.
Inversement, une descente dachat trop rapide peut veiller la mfiance de
linternaute ainsi quun sentiment de perte de contrle, le processus tant trop rapide.
La descente dachat ne doit pas tre trop courte.
Il est noter galement que certaines cultures ne sattendent pas ce quun

processus dachat soit court et facile. linverse des occidentaux, les Japonais, par
exemple, accordent plus dimportance au processus de commande (tape fortes
consquences). Au Japon, un processus trop court peut avoir un effet contreproductif.
Ne pas imposer la cration dun compte client.
En effet, dans le monde rel, nous ne devons pas dcliner notre identit pour
acheter un produit, pourquoi le rendre obligatoire sur internet ? Permettre au client
dacheter directement simplifie le processus dachat et rduit les tapes de saisie perues
ngativement par la plupart des utilisateurs. Par ailleurs, cela rduit galement les
risques derreur et donc de traitement post-commande.
La cration dun compte peut tre propose au client afin de lui permettre de
gagner du temps sur ses prochaines commandes, daccder lhistorique de ses achats,
voire de profiter des avantages du programme de fidlisation.
Notons que lorsque lutilisateur nest pas enregistr, il nest pas possible de
connatre la zone de livraison, il est alors recommand de faire apparatre des frais de
port gnriques (Par ex. XX pour la France mtropolitaine ) plutt que ne pas les
afficher.
Introduire une tape de validation avant le paiement.
Les tapes de validation vont contribuer renforcer le sentiment de contrle de

lutilisateur sur le processus dachat. Elles sont indispensables. chaque tape cl
du processus, une demande de validation permet dviter les erreurs et de gagner la
confiance de linternaute.
En particulier, la fin de la descente dachat, une page de validation doit afficher
les diffrents paramtres de lachat (articles choisis, adresses de livraison et facturation,
etc.) et permettre de les modifier.
Permettre la modification du panier.
Afin que linternaute garde le contrle du contenu de son panier, il est prfrable
quil puisse modifier tout moment les articles quil a choisis en particulier au moment
de ltape de validation du panier.
Indiquer clairement ce que va payer le client.
Les cots cachs seront trs mal perus par le client qui perd confiance dans un
site qui ne lui facture pas le montant affich.
Cest pourquoi les frais de port devront tre indiqus au plus tt. noter toutefois
que dans le domaine du luxe, cette notion est moins marque car le cot de livraison
est gnralement faible en comparaison de celui du produit.
Mettre en confiance linternaute au moment de lachat.
La dernire tape doit afficher exactement les informations de paiement (port,

frais annexes, etc.) avant de valider lachat. En effet, lutilisateur doit matriser tous
les paramtres de son achat afin de se dcider. Il est galement conseill dindiquer les
modalits de retour au moment de lachat afin de gagner la confiance de lutilisateur.
De mme, dans un souci de transparence, qui est un vecteur de confiance,
lconomie ou la rduction obtenue sera galement indique au moment de lachat.
Montrer linternaute que le site est sr.

Figure 3.16 Arriv ltape de validation du panier, linternaute peut modifier les articles ainsi
que les adresses de livraison et de facturation.
Lindicateur de scurit du navigateur nest pas toujours suffisant car peu dinter-
nautes comprennent quil signifie que la connexion est scurise. Lajout de logos (de
banques notamment) ou de textes explicatifs renforce la confiance de lutilisateur. En
particulier, un lien des informations dtailles sur le paiement scuris peut galement
permettre de mettre en confiance certains internautes. Laffichage dun numro de
tlphone, voire dune adresse physique ou dun numro officiel (RCS ou Siret pour
une entreprise) peut galement rassurer les utilisateurs.
Figure 3.17 Les logos bancaires vont contribuer gagner la confiance des cyberacheteurs
Clore la descente dachat par une tape de confirmation.
la fin de la descente dachat, une dernire tape dite de confirmation permet

de fournir linternaute un retour sur la commande quil vient deffectuer. Cette page
de confirmation lui indique un numro de commande ou toute autre rfrence qui lui
permettra ventuellement de dialoguer avec le Service Client.
Cette page doit pouvoir tre imprime et tlcharge. Il est conseill denvoyer
galement un e-mail de confirmation avec un rcapitulatif de la commande. Cette der-
nire confirmation transmise directement linternaute est gnralement considre
comme le vritable lment de confirmation de la commande.
Si possible, on permettra linternaute dannuler sa commande directement sur
cette page de confirmation.
3.3 NAVIGUER AUTREMENT DANS UNE INTERFACE

Les barres de navigation et autres systmes de navigation prsents prcdemment
proposent une exploration guide de linterface. Ce type de navigation est adapt la
majorit des scnarios dutilisation. Toutefois dautres scnarios sont envisageables car
les utilisateurs et les contextes dutilisation peuvent tre diffrents. Dans ce cas, afin
de sadapter diffrents types dusage, linterface propose des systmes de navigation
alternatifs.
3.3.1 Moteur de recherche

Le moteur de recherche est loutil idal pour trouver une information prcise. Que ce
soit dans un site web et mme un logiciel. Les utilisateurs sen servent principalement
dans deux cas. Soit, ils ne trouvent pas linformation rapidement par la navigation
habituelle (liens, barre de navigation) car lorganisation des informations ne leur parle
pas. Soit, ils savent ce quils cherchent et prfrent utiliser le moteur de recherche
car il leur permet daccder rapidement et directement linformation souhaite, sans
passer par une exploration du site.
Figure 3.18 Le moteur de recherche permet des utilisateurs rguliers du site

(qui savent ce qui sy trouve) daccder directement aux pages quils cherchent.
Donner au champ de recherche lapparence dun champ de saisie.

3.3 Naviguer autrement dans une interface 69
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 3.19 Afin dinciter lutilisateur taper son texte, il est prfrable de laisser le champ de
recherche vide. Ainsi dans cet intranet, le mot le plus recherch tait mot-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 ou suggrer des

oprateurs boolens (et, ou, etc.) peu connus du grand public, il est prfrable
doptimiser la recherche sur quelques mots. En effet, les tudes montrent que la
majorit des utilisateurs effectuent des recherches sur deux mots en moyenne et quils
ne savent pas se servir des fonctionnalits de recherche avance.
Permettre une recherche par sous-domaine.
Figure 3.20 Ici lutilisateur peut restreindre le champ de recherche

en slectionnant la rubrique sur laquelle porte la recherche.
Restreindre le champ de recherche certaines parties du site est un bon moyen

dviter de noyer lutilisateur sous une multitude de rsultats non pertinents pour
une part. Il convient toutefois dtre vigilant car de nombreux utilisateurs 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 le site par exemple, rservant lutilisation de la recherche
restreinte des utilisateurs avertis.
Optimiser la recherche.
Pour que le moteur de recherche fournisse des rponses pertinentes aux utilisateurs,
il convient doptimiser les rsultats de la recherche en veillant :
Indexer rgulirement lensemble des pages du site ou de la documentation
de lapplication logicielle afin de disposer quotidiennement dune information
rcente et jour.
Classer les rsultats selon la manire dont ils rpondent aux critres de recherche
de faon afficher ds les premires pages les rsultats les plus pertinents pour
lutilisateur.
Fournir un titre chaque rsultat et une description courte afin de faciliter la
lecture des rsultats de la recherche et leur comprhension.
Il arrive trop souvent que le moteur de recherche soit vu comme la boue de

sauvetage dun site trop riche et mal organis. En fait, cest gnralement linverse !
Un moteur de recherche fournit des rsultats pertinents condition dindexer soi-
gneusement 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.
Recherche thmatique
Un index thmatique est un inventaire structur des connaissances que lon peut
trouver sur un intranet, une documentation daide pour un logiciel ou pour assister
lutilisateur dans sa dmarche de recherche de mots-cls.
Fournir un index thmatique pour explorer un ensemble dinformations.
Lindex thmatique permet lutilisateur dexplorer les informations disponibles

sans avoir connatre la dnomination exacte de ce quil cherche. En dautres termes,
cest une faon daller la pche aux informations.
Bien entendu, cet index doit tre rgulirement mis jour. Non seulement les liens
doivent tre vrifis, mais aussi les informations que contient lindex. En particulier,
lorsquun nouveau thme est cr, les nouvelles informations quil contient doivent
tre catgorises et mises en avant par rapport aux moins rcentes.
Par contre, pour lutilisateur qui sait prcisment ce quil cherche, lindex thma-
tique est peu rapide utiliser. Il prfrera se servir du moteur de recherche qui lui
permet daller directement linformation souhaite.
3.3 Naviguer autrement dans une interface 71
Figure 3.21 Lindex thmatique permet ici de parcourir lintranet en raffinant progressivement
son champ de recherche aux catgories concernes.
3.3.2 Plan de site

Pour aider linternaute retrouver une information sur le site, une carte du site est
galement efficace car elle permet de comprendre lorganisation globale du site. Elle
est la fois un index thmatique et une vue globale plat de larchitecture du site. La
carte est galement apprcie pour sa lecture rapide par les dficients visuels qui ainsi
nont pas slalomer dans les diffrents menus droulants.
Figure 3.22 La carte du site est un moyen simple pour aider linternaute retrouver une
information, car elle fournit une vue globale du site.
noter que des visites trop frquentes cette page peuvent galement tre
synonyme dune architecture de linformation mal organise pour un site web. En effet,
si la navigation propose ne correspond pas aux attentes des utilisateurs, ils seront
susceptibles de chercher dautres modes de navigation avant peut-tre dabandonner.
3.4 LES LMENTS DU SYSTME DE NAVIGATION

3.4.1 Le fil dAriane
Lide de base du fil dAriane (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 fil dAriane indique les rubriques qui sparent la page daccueil de
la page courante.
Figure 3.23 Fil dAriane.
Occupant une ligne de texte, le fil dAriane offre lintrt de prendre trs peu de
place sur la page. Bien que discret, la majorit des utilisateurs comprennent son rle
dindicateur de position dans le site. Par contre, ils ne voient pas immdiatement que
le fil dAriane peut aussi leur servir revenir en arrire.
Placer le fil dAriane sous la barre de navigation au-dessus du titre de la page.
Le fil dAriane 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
de la page. Il est donc prfrable de le placer en hauteur, au-dessus de la page.
Utiliser > entre les niveaux.
La prsentation du fil dAriane sest standardise. La plupart des sites emploient

le signe > entre chaque rubrique. Un signe diffrent demande lutilisateur
un effort dinterprtation supplmentaire, sans compter le risque dune mauvaise
comprhension.
Indiquer le titre de la page courante dans le fil dAriane.
Dans un souci dconomie, certains sites confondent le fil dAriane avec le titre de
la page. Cela dsoriente gnralement lutilisateur.
3.4 Les lments du systme de navigation 73
Figure 3.24 Ce site a choisi une prsentation non conventionnelle pour son fil dAriane.
Il risque de ne pas tre compris par certains internautes.
En effet, pour que le reprage soit efficace, les deux lments que sont le titre et le
fil dAriane doivent apparatre distinctement. Cest la redondance entre les deux qui
permet linternaute de se reprer.
Figure 3.25 Lorsque le titre de la page napparat pas

dans le fil dAriane, ce dernier ne permet plus de se reprer dans le site.
Le fil dAriane 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.
3.4.2 Les onglets

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

Figure 3.26 Barre de navigation onglets.
Le graphisme de la barre donglets prcise le fonctionnement de ce composant aux

yeux de linternaute en sappuyant sur deux lments visuels : longlet slectionn
est mis en vidence et il englobe la page courante. Lorsque ces indices sont absents,
lutilisateur pense quil sagit de boutons.
Figure 3.27 Linternaute a ouvert la page en cliquant sur longlet Mobile . Mais, rien ne lui
indique o il est dsormais. Bien quelle ressemble une barre donglets, cette barre de navigation
nen offre pas les avantages.
Prslectionner un onglet ds la page daccueil.
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.
Ne pas employer des onglets pour un processus par tapes.
Lintrt dun systme donglets est de permettre un accs asynchrone au contenu

des diffrents onglets. Lutilisateur dcide lui-mme du choix des onglets quil souhaite
consulter. Lorsque la tche doit tre ralise dans un ordre prcis avec diffrentes
tapes intermdiaires, il est prfrable demployer une autre mtaphore. Nous revien-
drons sur ce point un peu plus bas.
Figure 3.28 Longlet Accueil est slectionn ds lentre sur le site

afin dexpliquer comment fonctionne la barre donglets.
Figure 3.29 Dans ce logiciel de emailing un systme donglets est utilis pour reprsenter les
diffrentes tapes du processus. Une telle mtaphore est source derreur car les onglets sont
habituellement accessibles indpendamment les uns des autres.
3.4.3 Les menus droulants

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 en faisant apparatre au clic ou au survol de la
souris, une zone rectangulaire, un menu, contenant des liens vers les sous-rubriques.
Le menu classique
Utilis galement sur le web, il nest quune reproduction parfois malheureuse de la
barre de menus logicielle. Car les menus droulants ne permettent pas linternaute
de se construire une vue globale de lensemble du site. La comparaison entre les
diffrentes rubriques est difficile car un seul menu est visible un instant donn. Seuls
les familiers du web apprcient ces menus qui leur permettent de balayer rapidement
lensemble du contenu du site.
viter les sous-menus.
Les menus droulants sur le web sont souvent plus sensibles que sur les applications
logicielles. Lorsque la souris quitte le menu, il sefface automatiquement. Quand
lutilisateur est peu habitu la souris, on observe des disparitions intempestives
du menu. Et ce phnomne est amplifi si le menu comporte des sous-menus. Le
mouvement de la souris doit tre encore plus prcis. Souvent les utilisateurs sy
reprennent plusieurs fois pour slectionner un item.
Figure 3.30 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 angle droit, alors
que la ligne droite semble plus naturelle.
Prvoir un second mode daccs.

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 comme
illustr ci-dessous.
Figure 3.31 Afin de remdier aux problmes de manipulation,

le site propose datteindre galement les rubriques par des pages de liens.
Le mga-menu
Les mga-menus sont apparus ces dernires annes sur le web. Lorsquils sont ouverts,
ils sapproprient une part importante de lcran afin de prsenter lensemble des sous-
menus.
Contrairement au menu droulant classique, le mga-menu prsente les sous-
menus quil comprend sous forme de colonnes et de groupes dinformations. Il permet
ainsi dafficher un grand nombre de liens vers les deuxime et troisime niveaux,
tout en prsentant des illustrations facilitant le reprage des diffrents groupes de
sous-menus.
Principalement utilis par les sites e-commerces, le mga-menu est devenu la
solution idale pour prsenter dans une mme fentre, la diversit des offres, plutt
que de recourir de multiples menus dans une barre de navigation souvent dj
charge.
Limiter le mga-menu 500 pixels de haut.
Le mga menu ne doit pas dpasser la ligne des 500 px de manire tre facilement
lisible pour tous les utilisateurs quelle que soit la rsolution de leur cran.
Figure 3.32 Mga-menu
Prfrer laffichage du mga menu au clic plutt quau survol souris.
Lorsque le mga-menu souvre au clic, il est plus facile utiliser et ne se ferme

pas si lutilisateur dplace le pointeur hors de la zone active (principe de contrle
utilisateur ).
Regrouper les sous-rubriques sans charger visuellement le mga-menu.
De manire guider la lecture, les sous-menus sont regroups sous un titre ou un

pictogramme. Seuls les lments visuels contribuant au guidage doivent tre conservs,
plus forte raison si le menu contient beaucoup de liens. En gnral, les zones de
merchandising dans les menus de navigation sont proscrire, car elles sapparentent
des bannires publicitaires.
3.4.4 Les boutons de navigation

Les boutons de navigation sont les composants graphiques utiliss comme liens dans
la barre de navigation.
Prfrer du texte pour les boutons de navigation utiliss peu frquemment.

En gnral, les utilisateurs rguliers dune application prfrent les icnes. Pour
un site web, les visiteurs frquents finissent par retenir la signification des icnes
et apprcient la concision des visuels autant que 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 seront plus faciles interprter.
Figure 3.33 Afin de gagner de la place lcran, les icnes sont parfois utilises dans les barres
de navigation comme ici gauche. Mais sans texte associ, leur signification est difficile deviner.
viter demployer des icnes sans texte explicatif.
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.
Sur certains sites et logiciels, une bulle daide ou tooltip apparat pour expliquer
la signification des visuels (attribut alt en html) au survol de la souris. 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.
Figure 3.34 La combinaison du graphisme et du texte vite les ambiguts.
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.
3.4.5 Les 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.
viter les liens trop courts.
La Loi de Fitts nous dit que le temps pour atteindre une cible est fonction de la distance
et de la taille de cette cible [Fitts 54]. Ce principe sapplique galement au web : plus
le lien est petit et loign du pointeur souris, plus linternaute met de temps cliquer
dessus car il demande une slection minutieuse [Berkun 00].
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 lcran
car alors le mouvement de la souris est contraint par les bords. Cette observation
incite positionner les liens en bordure de page.
Figure 3.35 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.
Figure 3.36 Plus le lien est petit, plus il est difficile slectionner.
Limiter les liens sur les interfaces tactiles.
La surface de slection dun lien est faible. Sur une interface tactile, la slection
dun lien ncessite donc plus de prcision quavec une souris. Dans ce cas, il est
conseill de rduire le nombre de liens et surtout de maximiser les espaces entre les
liens pour viter toute erreur de slection.
Placer le lien la fin dune phrase ou du paragraphe.
Lorsque les liens apparaissent dans le texte de la page, la slection et laffichage

de la page correspondante interrompt le fil de la lecture. Il est donc prfrable que
la lecture soit suspendue lorsque lutilisateur slectionne le lien et ouvre la nouvelle
page.
Le texte du lien doit permettre de deviner le contenu de la page.
Le libell des liens est un lment dterminant pour une navigation efficace. Le
texte doit tre explicite et sans ambigut pour viter de faire fausse route. Il doit
permettre linternaute de prvoir, avant de cliquer, o il va arriver. Autant que

possible, ce texte doit correspondre avec le titre de la page vise.
Pour cela, les liens doivent tre conus en fonction de linformation quils 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 chapitre 2).
Figure 3.37 Un utilisateur intress par la consultation de livres numriques hsite entre les
rubriques livres en lignes , collections et catalogue 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.
Figure 3.38 Un guidage trop explicite rend la lecture fastidieuse.
Ne pas rpter des liens similaires sur une mme page.

Les tests nous montrent que la duplication dun mme lien incite gnralement
linternaute visiter deux fois la page, pensant que les deux liens conduisent des
pages diffrentes [Nielsen 02]. Ces rptitions rendent la navigation fastidieuse.
Il est donc conseill de nindiquer le lien qu la premire occurrence du mot.
Nanmoins, dans le cas des pages longues, il peut tre utile de rpter le lien en bas de
page. Dans ce cas, on vrifiera lors des tests si cela ne conduit pas lutilisateur ouvrir
deux fois de suite la page en question.
Figure 3.39 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.
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 ou onglet. 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 un nouvel onglet sil le souhaite. Une
petite icne peut accompagner le lien externe afin de le distinguer dun lien interne.
Figure 3.40 Cette zone de tlchargement est bien dtaille puisquelle prcise non seulement
les caractristiques du logiciel concern (version, type de licence et plate-forme), mais aussi la taille
du fichier. Cependant, linternaute ne connat pas ici le type du fichier quil va recevoir ni le temps
ncessaire son tlchargement, lobligeant attendre la fin du tlchargement pour le savoir.
3.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 ou
du logiciel et leur poser les questions suivantes.
Check-list de test du systme de navigation

De quel site sagit-il ?
Quelles sont les rubriques du site ?
De quelle page sagit-il ?
O se situe la page par rapport au reste du site ? Sous quelle rubrique ?
Que peut faire lutilisateur depuis cette page ?
Le test est reproduit sur un ensemble significatif de pages du site ou dcrans de

lapplication logicielle. Il sert vrifier les trois exigences du systme de navigation,
savoir : construire une vue globale, savoir se reprer et permettre de comprendre les
rubriques environnantes.
Cas pratique, Cte-dOr Tourisme une application web conviviale... 85
3.6 CAS PRATIQUE : CTE-DOR TOURISME UNE

APPLICATION WEB CONVIVIALE POUR COLLECTER
LES INFORMATIONS TOURISTIQUES
3.6.1 Une base de donne unique pour un usage multiple
Cte-dOr Tourisme est lagence de dveloppement touristique de la Cte-dOr.
Afin de mener bien ses missions, Cte-dOr Tourisme a constitu une base de
donnes dpartementale, regroupant les diffrentes informations relatives aux offres
touristiques, en vue dalimenter ses principaux supports de communication, tels que
les ditions puis les sites internet.
Lapplication permet aux diffrents prestataires touristiques de Cte-dOr de
renseigner leurs offres et ainsi dalimenter le rseau de sites partenaires laide dune
technologie de syndication de contenus. Par ailleurs, lapplication est galement
utilise par Cte-dOr Tourisme pour grer des informations autres que celles destines
la consommation touristique. Les contacts administratifs, la diffusion de la docu-
mentation, les clients particuliers, les agences de voyages, lobservatoire touristique,
la valorisation paysagre sont dsormais grs par le mme portail.
Cet outil est au cur du mtier de Cte-dOr Tourisme et de lensemble de son
organisation interne. La base de donnes dpartementale est donc particulirement
stratgique, tant en ce qui concerne les contenus que sa structure, son fonctionnement
et son ergonomie.
Ayant la vocation de recueillir des informations auprs des nombreux prestataires
touristiques, cette application sadresse un public vari, et rarement technophile, de
la TPE (restauration, thtre), lassociation (organisation festivit) aux particuliers
(location saisonnire).
3.6.2 Une application rpondant aux fonctionnalits mais difficilement

utilisable
Cependant, aprs deux ans dexploitation et lajout de nombreuses fonctionnalits,
force a t de constater que lapplication tait particulirement difficile utiliser,
plus forte raison pour un usage ponctuel, une ou deux fois par an, lorsquil sagit de
modifier les horaires ou les tarifs dune manifestation touristique par exemple.
Afin de rendre lapplication plus simple et moins contraignante pour ses parte-
naires, Cte-dOr Tourisme nous a demand de laccompagner dans la refonte de
lergonomie.
Figure 3.41 Premire version de linterface de lapplication
3.6.3 Des maquettes interactives valides par les utilisateurs finaux

Suite un audit de lapplication, nous avons conduit une srie dateliers de maquettage
avec la matrise douvrage du projet, le responsable des dveloppements et des
reprsentants des utilisateurs.
Figure 3.42 Maquette fil de fer ralise lissue des ateliers de maquettage
3.6 Cas pratique, Cte-dOr Tourisme une application web conviviale... 87
Les maquettes interactives que nous avons ralises ont permis de valider concrte-
ment les diffrentes tapes du processus de collecte des informations relatives aux offres
touristiques. Chaque tape du processus a t analyse par lensemble de lquipe afin
de sassurer que les informations demandes taient utiles la diffusion de loffre sur
le rseau Cte-dOr et quelles pouvaient facilement tre fournies par les prestataires
touristiques.
Le vocabulaire utilis sur chaque page de lapplication a t galement vrifi et
valid par les utilisateurs. Des messages de guidage ont t rajouts lorsquil y avait un
risque dambigut.
3.6.4 Un design rassurant et convivial

Nos designers ont ensuite habill graphiquement les diffrentes pages conues dans
la phase de maquettage. Lobjectif principal de ce nouveau design a t dinspirer
confiance aux utilisateurs en proposant des tonalits rassurantes, mais aussi conviviales
et sobres.
Figure 3.43 Design graphique final de lapplication
Le bandeau marron orang procure une atmosphre rassurante et chaude

lensemble de lcran. Lespace de travail est marqu par un gris fonctionnel qui
sinscrit sur le fond blanc de la page, renforant ainsi le sentiment de solidit et de
sobrit.
Les arrondis et les dgrads fournissent du relief, tandis que les ombrages lgers
apportent une texture et de la modernit linterface. Le bleu du bouton de
validation tonifie lcran. Ces lments contribuent conjointement la convivialit

de linterface.
3.6.5 Le rsultat : des donnes touristiques prcises et exactes

Depuis 2011, lapplication est utilise sur lensemble du dpartement de la Cote dOr
par 4 000 prestataires. Elle permet de grer plus de 11 000 offres touristiques qui sont
ensuite diffuses sur les nombreux supports dinformation et de communication du
dpartement.
La prise en main est maintenant immdiate, rendant beaucoup plus facile la mise
jour. Cette nouvelle interface permet dsormais Cte-dOr Tourisme de garantir
lensemble de ses partenaires des donnes prcises et exactes pour lensemble de ses
prestations touristiques.
Laudit ergonomique a t une tape indispensable la refonte de lapplication. Il

nous a permis davoir un avis extrieur, ncessaire pour prendre le recul suffisant dans la
conception des interfaces.
De plus, lexpertise ergonomique sest rvle indispensable afin de justifier les choix de
conception auprs de nos partenaires institutionnels.
Isabelle COROND
Directrice adjointe Cte-dOr Tourisme
4
Crer linteraction
Quun utilisateur nait pas attendre inutilement est un principe de conception vident et bien
attentionn. Il est aussi vident quil ne faut pas presser lutilisateur. Le principe le plus gnral
tant que les utilisateurs doivent donner le ton linteraction.
Jef Raskin1 , The Humane Interface : New Directions for Designing Interactive Systems,
Addison-Wesley Professional, 2000.
4.1 Interagir avec linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

4.2 Les lments dinteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.3 Temps de rponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
4.4 Cas pratique : charte ergonomique et refonte graphique du progiciel SAB . . . . . . . . . . . 128
4.1 INTERAGIR AVEC LINTERFACE

Lorsquil se sert dune application interactive, lutilisateur dialogue avec un systme
informatique pour obtenir une rponse, rsoudre un problme ou prendre une dcision.
Cest ce que nous appelons linteraction, cest--dire les moyens mis disposition par
linterface pour permettre lutilisateur et au systme dchanger des informations. La
qualit de linteraction est lenjeu majeur de toute conception dinterface. Elle garantit
lefficience de la tche ralise : latteinte effective du rsultat avec facilit et rapidit.
Linteraction se dcline en deux modalits : la saisie des donnes et la manipulation
des informations affiches.
1. Jef Raskin est spcialiste de linteraction homme-machine. Il a conu pour Apple linterface du
premier Mac OS. Jef Raskin est linventeur du drag and drop (glisser-dposer).
90 Chapitre 4. Crer linteraction
Concernant la saisie, le clavier est le dispositif le plus utilis et il ne semble pas

trouver dautres alternatives plus efficaces.
La manipulation des informations, quant elle, est effectue laide dune souris
pour les ordinateurs ou du doigt pour les interfaces tactiles. Ces deux modes de dialogue
permettent une manipulation directe de linformation affiche, cest--dire que laction
de lutilisateur seffectue sur linterface comme sur des objets rels du monde physique.
4.1.1 Clavier
Saisir des informations sur une interface sest toujours effectu avec un clavier,
et sans doute encore pour longtemps. La reconnaissance vocale permet de ne pas
utiliser doutil intermdiaire avec linterface mais son utilisation est contrainte par
lenvironnement sonore et surtout par une manire de parler particulire ncessitant
une certaine concentration bien diffrente de llocution naturelle.
Lutilisation dun clavier est souvent considre comme contraignante par une
majorit dutilisateurs. Cest pourquoi son usage doit tre limit pour les utilisateurs
occasionnels et les saisies textuelles particulires (ex. : la saisie dinformations dans
un formulaire).
La saisie au clavier peut toutefois tre facilite par une interface proposant des
alternatives interactives telles que les listes droulantes sur lesquelles nous reviendrons
dans les prochains chapitres, ou la saisie assiste.
Deux types dassistance la saisie sont distinguer. Le premier, la correction
automatique, consiste corriger au cours de la frappe au clavier les saisies mal
orthographies par lutilisateur. Le second, appel autocompltion, permet de suggrer
lutilisateur la suite dun ou plusieurs mots quil vient de saisir. Les navigateurs web
permettent par exemple de suggrer des mots dj entrs et mmoriss, de la mme
manire que les moteurs de recherche proposent des associations de mots pouvant
affiner les rsultats attendus par lutilisateur.
Raccourcis clavier
Lutilisation de boutons et de menus est parfois fastidieuse car lutilisateur doit cliquer
plusieurs fois pour dclencher une commande. Cette manipulation est dautant plus
contraignante lorsque lopration est frquemment ritre.
Permettre un accs rapide et direct aux commandes frquentes par des raccourcis clavier.
Des raccourcis clavier, cest--dire lappui simultan sur plusieurs touches, per-
mettent de rendre linteraction plus rapide.
Cependant, les raccourcis clavier sont difficiles apprendre, cest pourquoi il
est conseill de limiter leur usage un petit nombre de fonctionnalits et de ne
proposer que des raccourcis dj connus par lutilisateur. Dans la mesure du possible,
on privilgiera les raccourcis standard que lon rencontre sur dautres applications
4.1 Interagir avec linterface 91
logicielles, par exemple : copier (ctrl + C), coller (ctrl + V), ou enregistrer (ctrl
+ S).
Afficher les raccourcis clavier.
Pour faciliter lapprentissage, il est judicieux dindiquer le raccourci clavier au plus

prs de la commande. Dans un menu par exemple, chaque raccourci pourra tre affich
ct du libell de la commande. Pour un bouton, une bulle daide pourra safficher
au survol indiquant le raccourci clavier.
Figure 4.1 Laffichage du raccourci permet lutilisateur

dapprendre progressivement sen servir.
4.1.2 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, puis
il slectionne la commande. De ce fait, il est facile mmoriser et facile apprendre.
Les erreurs sont moins nombreuses quau clavier. 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 de linterface.
Ce mode de dialogue sappuie sur la mtaphore du monde physique qui veut
que lutilisateur se serve de linterface 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 de souris ou un appui du doigt sur lcran. Tout
comme dans le monde rel, il est possible de faire et de dfaire de la mme manire ;
laction lmentaire est gnralement rversible car chaque commande dispose de son
inverse , gnralement accessible de la mme manire (ex. : annuler).
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. 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.
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 de linterface par le biais de deux distances : la distance
smantique, entre le but vis par lutilisateur et les objets de linterface, et la distance
articulatoire, entre laction et sa reprsentation physique [Norman 86, Hutchins
86]. Sappuyant sur cette dcomposition, lobjectif, lorsquon conoit une interface
manipulation directe, est de rduire ces distances afin de minimiser les processus
cognitifs et moteurs pour la comprhension et linteraction avec le systme.
Rduire la distance smantique

La rduction des distances smantiques minimise les ressources cognitives ncessaires
la comprhension du systme. Les informations et actions attendues ou adaptes au
contexte doivent tre mises en avant linverse de celles qui sont moins frquentes
ou inadaptes la situation.
Adapter les fonctionnalits aux intentions de lutilisateur.
Linterface 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.
Prsenter les rsultats sous une forme directement exploitable.

Afin de faciliter la comprhension de linterface, il convient de veiller ce que les

informations soient prsentes de manire ce quelles rpondent aux questions que
se pose lutilisateur.
Figure 4.2 Le systme est plus facile comprendre si les donnes affiches
peuvent tre exploites directement.
Imaginons que lutilisateur consulte le logiciel de la figure 4.2 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.
Cet exemple nous montre que la rduction des distances smantiques ncessite
une parfaite connaissance de lactivit de lutilisateur.
Rduire la distance articulatoire

La rduction des distances articulatoires minimise les ressources perceptives et
motrices lies lutilisation de linterface. 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 vers le dossier cible que
dutiliser une fentre de dialogue dtaillant ce dplacement.
Figure 4.3 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 principale-
ment visuel, contrairement linterprtation dun texte qui fait appel des ressources
cognitives supplmentaires.
Figure 4.4 Un graphique sinterprte plus rapidement quun texte.
Une reprsentation graphique permet lutilisateur dinterprter rapidement la

donne affiche. Elle lui fournit immdiatement une information qualitative, un
ordre de grandeur. Lindication est approximative mais elle suffit dans la plupart des
cas. Les textes viennent ensuite complter cette premire lecture en apportant des
informations quantitatives plus prcises.
Accompagner lutilisateur dans linteraction

La manipulation directe sappuyant principalement sur la reprsentation graphique des
objets, il est essentiel de fournir un retour aux actions de lutilisateur. Ce retour facilite
lapprentissage et comble en partie les difficults de comprhension rencontres parfois
avec ce mode de dialogue.
Les retours garantissent la visibilit sur le fonctionnement de lapplication.

Le retour du systme vers lutilisateur est un enjeu majeur dans la russite

de linteraction homme-machine. Il sagit pour lutilisateur de lui garantir que la
commande quil a initie est bien celle reue et enregistre par le systme.
Les retours peuvent tre mis en uvre de diffrentes manires : en modifiant
lapparence de lobjet, en modifiant la forme du pointeur souris ou en affichant un
message confirmant explicitement laction ralise. Pour un dplacement dobjet, il
est prfrable que lobjet en question reste affich sans modification dapparence ou
sous forme de silhouette, et suive le pointeur de lutilisateur jusqu ce que lobjet ait
atteint sa destination.
Le retour peut galement tre physique. Par exemple, lorsquun clic maintenu
est demand, le fait que lutilisateur doive garder le bouton de la souris enfonc lui
rappelle quil est entr dans un mode de dialogue spcifique.
Avec les interfaces tactiles, le retour peut aussi tre haptique, cest--dire sous la
forme dune sensation physique daction sur le doigt telle quune vibration courte.
Figure 4.5 Choisir un intervalle par manipulation directe permet dviter lerreur classique qui
consiste saisir une borne minimum suprieure la borne maximum. Ici un retour est propos en
affichant la valeur slectionne au-dessus du curseur.
En outre, lutilisation de signaux sonores peut tre associe aux actions de

lutilisateur sur linterface. Les sons peuvent intervenir soit lappui sur une commande
(ex. : touches sonores dun clavier numrique de tlphone), soit tre initis par le
systme pour notifier dun changement dtat (ex. : e-mail reu).
Restreindre lutilisation des alarmes sonores un usage prcis et offrir la possibilit de

rgler le niveau sonore.
Pour tre efficace sans agacer lutilisateur, voire lembarrasser vis--vis des autres
occupants de la pice, un tel mode de mise en vidence doit tre employ avec
parcimonie, sadapter lenvironnement sonore et pouvoir tre paramtr.
Limiter le nombre de sons diffrents (moins de 5).

Choisir des sons distincts en timbre et tonalit.
Afin de faciliter la mmorisation et de minimiser leffet perturbant des alarmes

sonores, il est prfrable de minimiser le nombre de sons distincts.
Apprentissage de la manipulation directe

Cependant, la manipulation directe peut prsenter des difficults dapprentissage
pour les utilisateurs dbutants et, au contraire, sembler fastidieuse aux utilisateurs
expriments.
Faciliter lapprentissage des utilisateurs dbutants.
On aidera les utilisateurs dans la phase dapprentissage par un meilleur guidage en

affichant des messages dexplication dans la barre dtat de la fentre de lapplication,
en fournissant un accs optionnel par un menu ou par une fentre de dialogue et en
rendant linterface sensible la position de la souris sans requrir une action (un clic)
de la part de lutilisateur.
Offrir un accs rapide aux utilisateurs expriments.
linverse, on utilisera les raccourcis clavier pour rendre plus rapide laccs aux
fonctions frquemment utilises par les utilisateurs expriments.
Simplifier la slection des donnes et faciliter les tches rptitives.
Slectionner les objets la souris devient vite fastidieux lorsquils sont nombreux
et loigns. Il est donc recommand de proposer galement une slection selon des
critres textuels ou par une commande, comme Slectionner tout par exemple.
4.1.3 Souris
Pour interagir avec une interface dordinateur, la souris est loutil de dialogue le plus
souvent utilis. Elle offre lintrt de permettre un excellent contrle du mouvement
du pointeur, mais la souris demande un effort de coordination entre la main et la vue
qui ncessite un apprentissage les premiers temps.
Le principal critre suivre lors la conception du dialogue souris est lhomognit.
Le rle des boutons de la souris doit tre constant.
Par exemple, la plupart des applications Windows permettent de slectionner par

le bouton de gauche et douvrir un menu contextuel relatif lobjet slectionn par le
bouton de droite.
Ne pas dclencher des fonctions importantes (difficilement rversibles) par un simple clic.
Il nest pas rare dappuyer involontairement sur un bouton de la souris. Une

notification de lappui sur une commande non rversible peut tre prfrable pour
viter ce type daction involontaire.
Figure 4.6 Dialogue souris Windows.
Amliorer la prcision des saisies.
Les manipulations la souris requirent parfois une prcision qui rend linteraction
dlicate. Dans ce cas, il convient de faciliter la manuvre en proposant par exemple
un effet magntique ou bien, quand cela est possible, une saisie au clavier.
Figure 4.7 Slectionner une valeur numrique par manipulation directe est parfois dlicat.
Au contraire, la saisie clavier est plus rapide et plus prcise. Les champs droite offrent donc une
alternative pour les utilisateurs expriments qui connaissent la valeur saisir.
Double-clic
Le double-clic permet de dclencher une action associe un objet particulier en
court-circuitant certaines tapes intermdiaires. Cependant, il convient dtre
vigilant sur le choix de son comportement.
Le comportement associ un double-clic doit tre dans la ligne de celui du simple clic.
Afin quil soit aisment assimilable, le comportement du double-clic doit tre

proche de celui du simple clic. La configuration idale est que la commande dclenche
par un double-clic soit celle qui le serait par deux simples clics conscutifs. Par exemple,
quand un menu est affich pour le simple clic, 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
sources derreur en cas de stress. Des alternatives doivent tre proposes, par le biais
du clavier par exemple.
Rollover
Le rollover, ou survol, est un artifice graphique qui consiste changer la reprsentation
dun visuel lorsque lutilisateur passe la souris au-dessus. Ce comportement est
gnralement employ pour notifier lutilisateur quune interaction est possible cet
emplacement (ex. : accs une information dtaille).
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 lobjet quil dsigne. Cet artifice graphique donne de linteractivit
linterface, que ce soit pour une application logicielle ou un site web.
Figure 4.8 Le rollover sert ici mettre en vidence le produit survol, afficher un court rsum
et donner accs au dtail du produit.
Utiliser le survol souris pour guider lutilisateur.
Le pointeur souris permet galement dafficher des informations complmentaires

lobjet survol. Par exemple, laffichage dune bulle daide prsentant une information
contextuelle pour aider lutilisateur sans quil ne doive effectuer daction spcifique
(clic).
Figure 4.9 Sur ce site, un rollover est utilis pour dcrire le contenu des rubriques. Mais ce
comportement passe gnralement inaperu car lorsque le texte saffiche en haut droite, la zone
dattention de lutilisateur est focalise sur le pointeur souris, cest--dire nettement en dessous.
Toutefois, comme lillustre la figure prcdente, il est prfrable de positionner

linformation contextuelle au plus prs de la zone activant le rollover de manire ce
que lutilisateur sen aperoive immdiatement.
4.1.4 Interaction tactile

Dj utilises sur de petits crans tels que pour les photocopieurs, les interactions
tactiles sont apparues depuis quelques annes. Larrive des smartphones dabord
stylet puis sans a grandement favoris son accs au grand public.
Nous lavons voqu prcdemment, les interfaces tactiles offrent des possibilits de
manipulation directe des objets affichs sur un cran. Cette manipulation dlments
virtuels est une mtaphore de la manire dont nous agissons avec les objets rels du
monde physique.
Limiter la dure des manipulations tactiles.
Lapprentissage de ce type dinteraction est rapide. Toutefois, la prcision des gestes

effectus avec les doigts peut tre assez soutenue, et peu rpandue pour dautres tches
de notre quotidien si ce nest par exemple lutilisation dun instrument de musique.
Alors que la main profite du poignet pour se reposer tout en manipulant une souris
ou un clavier, celle de lutilisateur tactile ne dispose daucun support. Lorsque la

manipulation est longue, la fatigue impacte autant la prcision du geste que le confort
dutilisation de lappareil.
Le pointage au doigt
Comme nous lavons remarqu au chapitre 2, lagencement des informations affecte
linteraction tactile. Un objet loign ncessite invitablement un mouvement du
doigt plus important. Pour un smartphone, les lments actifs de linterface doivent
tre facilement accessibles avec le pouce.
Dimensionner les objets de manire les rendre facilement slectionnables au doigt.
La slection dun lment dune interface tactile semble plus naturelle quavec une
souris. Toutefois, la largeur du pointeur (le doigt) tant plus consquente, llment
devra tre suffisamment grand pour que lutilisateur contrle visuellement la slection
dfaut dune sensation physique : lenfoncement du bouton de la souris.
En dessous de 10mm pour une tablette et 8mm pour un smartphone, un objet
interactif ncessite une prcision du geste contraignante pour lutilisateur, notamment
si des lments adjacents sont galement cliquables.
Figure 4.10 Dimensions conseilles des boutons pour une interface tactile
Les gestes
La manipulation directe au doigt offre potentiellement une multiplicit de modes
dinteraction.
En effet, grce aux surfaces multitouch, linteraction tactile ne se limite plus un
seul doigt. Il est possible de former des gestes que linterface peut interprter comme
des commandes spcifiques.
Limiter les gestes aux standards du multitouch
Les gestes proposs par les interfaces tactiles constituent un nouveau langage,
parfois loign de la gestuelle avec des objets rels. De ce fait, un apprentissage est
ncessaire pour les utiliser. Mis part certains gestes devenus des standards, comme
lcartement des doigts pour zoomer, le nombre de gestes effectivement connus des
utilisateurs reste pour linstant relativement faible.
Figure 4.11 Les gestes utiliss proposs par Apple constituent aujourdhui une rfrence en
matire dinteraction tactile un ou plusieurs doigts. Il nen demeure pas moins que tous ne sont
pas connus des utilisateurs.
Distinguer les commandes importantes par un geste demandant une certaine dextrit.
Afin dviter de dclencher une commande importante inconsciemment, les

actions importantes se distinguent des autres par un geste spcifique exigeant concen-
tration et prcision. Elles ne se limitent pas un simple appui. Par exemple, sur
liPhone, il faut glisser pour dverrouiller le tlphone ou rpondre un appel. De
cette manire une hirarchie est tablie entre les commandes simples dclenches par
un appui et les commandes importantes qui ncessitent un geste plus rflchi.
Demander confirmation des gestes dclenchant une opration difficilement rversible.

Figure 4.12 Lorsque la sonnerie de lalarme se dclenche, deux actions sont proposes
lutilisateur : soit, le rappel par un simple appui, soit larrt de lalarme, mais dans ce cas le geste
(glisser) est plus prcis.
En rgle gnrale, pour prvenir lutilisateur des erreurs, les commandes difficile-
ment rversibles doivent tre confirmes. plus forte raison, lorsquil sagit dune
commande dclenche par un simple geste. En effet, le dfaire (undo) nest pas
disponible sur tous les smartphones. Lorsquil existe son utilisation est limite
certaines fonctionnalits et peu connue des utilisateurs, cest le cas sur liPhone o
secouer son tlphone permet dannuler une saisie.
La confirmation des commandes peut galement se faire, comme sur une interface
logicielle, en proposant une fentre de confirmation. Le principe tant de proposer
une squence dinteraction plus longue pour une commande sur laquelle il sera difficile
de revenir par la suite.
Proposer des raccourcis gestuels pour les utilisateurs avertis.
Certains gestes peuvent tre proposs comme des raccourcis dune squence plus
longue. Cest le cas, par exemple, de la suppression dun item dune liste qui peut
tre dclenche par un glisser au-dessus de litem. De cette manire le geste
permet dviter une srie dappuis simples qui peut tre fastidieuse pour un utilisateur
expriment.
Cependant, dans ce cas, la confirmation doit apparatre dans la prolongation du
geste de manire demander un lger effort de concentration supplmentaire pour
protger lutilisateur de lerreur sans trop le gner.
Figure 4.13 Une bote de dialogue demande la confirmation de leffacement du contact,

dernire tape avant une suppression dfinitive.
Figure 4.14 La suppression dun item de la liste se fait en deux temps : tout dabord glisser de
gauche droite, puis appuyer sur le bouton Supprimer
4.2 LES LMENTS DINTERACTION

Les lments dinteraction sont les objets de linterface sur lesquels lutilisateur
interagit. Trois types dlments dinteraction sont distinguer :
Les lments de commande, boutons et menus, permettent de dclencher un
traitement applicatif.
Les lments de slection, bouton radio, case cocher et liste, permettent
lutilisateur dindiquer ces choix.
Les lments de saisie, champ de saisie et bote de texte, servent rentrer des
donnes textuelles.
4.2.1 Boutons
Un bouton sert dclencher une commande. Il est visible en permanence, il est donc
accessible immdiatement par un seul clic de souris ou un appui au doigt. Il prend
lapparence grise lorsquil est inactif. Son principal intrt est de permettre un accs
rapide aux commandes.
Figure 4.15 Bouton.
Employer des boutons pour les commandes frquemment utilises.
Le gain en rapidit qui rsulte de lutilisation dun bouton 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 lutilisa-

teur et lui permettre de prvoir les rsultats de son action. Il est prfrable de prciser
explicitement ce que fait le bouton, par exemple Imprimer ou Ouvrir plutt que
demployer un terme gnrique qui nest gnralement pas lu, comme Ok ou Valider.
En outre, les libells seront plus volontiers des verbes linfinitif, accompagns
ventuellement de substantif, afin que ces boutons de commande soient compris
comme dclencheurs daction.
Prfrer les boutons pour les interfaces tactiles.
Du fait de sa simplicit de manipulation il suffit dappuyer pour dclencher la

commande les boutons seront utiliss en priorit sur les interfaces tactiles.
Ordonner les boutons selon le systme dexploitation des postes utilisateur.

4.2 Les lments dinteraction 105
Lordre des boutons dpend du systme dexploitation. Sur Windows, la commande

qui engage le moins lutilisateur (Annuler) est place droite, la commande daction
vient ensuite sa gauche. Sur Mac OS, les boutons sont aligns par ordre dimportance
de la droite vers la gauche. Dans ce cas, la commande daction se trouve donc
lextrmit droite. Au contraire, sur Gnome (Linux), laction positive est droite
et laction ngative gauche. Malgr ces diffrences, des rgles communes peuvent
tre identifies :
Aligner droite les boutons de la fentre.

Mettre le focus sur laction la plus frquente.
Isoler gauche les boutons agissant sur lensemble de la fentre.
Figure 4.16 Agencement des boutons selon les systmes dexploitation
Toute action doit pouvoir tre annule.

Afin de prvenir les erreurs et donner lutilisateur la matrise du fonctionnement

de lapplication, il doit pouvoir revenir en arrire tout moment. En aucune manire
lapplication ne doit conduire lutilisateur sur une impasse lobligeant se servir du
bouton page prcdente ou fermer la fentre. ct de chaque bouton daction,
un bouton dannulation doit donc tre propos.
4.2.2 Menus
Le rle dun menu est de prsenter, de manire groupe, un ensemble de commandes.
Il peut prendre deux formes. Sil apparat au-dessus de lobjet de linterface qui vient
dtre slectionn, cest un menu contextuel. Lorsquil est appel depuis la barre de
menu de la fentre, cest un menu droulant.
Figure 4.17 Les menus.
Menu droulant
En termes dutilisabilit, les menus droulants offrent diffrents avantages. Dune
part, ils sont faciles comprendre. Ils prsentent au mme niveau lensemble des
commandes disponibles un moment donn. Si certaines dentre elles ne sont pas
autorises, elles apparaissent inactives, en gris, dans le menu. Le fonctionnement de
lapplication 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. La mmorisation est facilite car lutilisateur garde sous les
yeux lensemble des en-ttes du menu. Par ailleurs, le comportement des menus
droulants permet de les passer rapidement en revue. Lutilisateur peut ainsi explorer
les diffrentes fonctionnalits proposes.
Toutefois, linconvnient du menu est son manque de rapidit. En effet, louverture
du menu, le dplacement de la souris, puis la slection de la commande prennent du
temps et ncessitent une certaine prcision. De plus, le dialogue est ici contrl par
le systme, puisque lutilisateur ne peut choisir que dans lensemble de commandes
proposes par le menu. Par ailleurs, les menus sont 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.
Le principal intrt des menus droulants est de faciliter lapprentissage du logiciel.
Ils remplissent parfaitement ce rle lorsque la tche est bien structure. Dans ce cas, il
est possible dassocier aux diffrentes activits de lutilisateur un menu ou une partie
dun menu.
Ajuster la structure des menus lactivit de lutilisateur.
Le menu guide lemploi du systme. Lutilisateur se repre facilement lorsque

le fonctionnement du logiciel, reprsent au travers de larborescence de menus,
concide avec son activit. De cette manire, chaque menu fournit une rponse la
problmatique de chaque opration.
Minimiser la taille des menus.
Il est conseill de ne pas dpasser 10 choix par menu lorsque les utilisateurs sont
dbutants. Le menu peut tre plus long pour des utilisateurs expriments, jusqu
20 lments sils sont simples et quils peuvent tre groups. Au-del de ces valeurs, il
convient de crer des sous-menus ou dautres menus. Enfin, pour faciliter la slection
dun item dans la liste affiche, il est souvent judicieux de regrouper les items par thme.
Chaque groupe offre un ensemble dactions possibles aux consquences proches.
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 difficilement rversible sont distinctement spares des autres et
places en bas du menu.
Slectionner litem voisin de celui quon voulait choisir est une erreur frquente
sur un menu. Il faut absolument viter que ce voisin ne soit destructeur par erreur.
Cest pourquoi les commandes Effacer ou Quitter seront systmatiquement spares
du reste du menu par un trait.
Les commandes non disponibles saffichent en gris dans le menu.
Lutilisateur comprend mieux le fonctionnement du systme lorsque les commandes

non disponibles saffichent dans une couleur diffrente des autres. Il identifie et mmo-
rise 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 alors rduite, offrant de cette manire un gain en rapidit. Par
contre, lemplacement des items dans la liste peuvent varier en fonction de ltat du
systme, ce qui peut engendrer galement des erreurs de slection.
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 un moyen de guidage qui concourt faciliter lapprentissage.
Figure 4.18 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.
Menu contextuel
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. Il saffiche
classiquement en cliquant sur le bouton de droite de la souris (Windows) ou par une
combinaison Ctrl et clic chez Apple.
Figure 4.19 Le menu contextuel saffiche aprs slection et clic droit.

Dans Microsoft Office, la partie haute du menu saffiche seule lorsque la souris est dplace en
haut droite aprs slection. On retrouve ici une interaction gestuelle, mais la souris.
La commande dclenche par le biais du menu contextuel sapplique lobjet

slectionn. Cest le principe de la manipulation directe : lutilisateur agit directement
sur lobjet quil slectionne.
Utiliser un menu contextuel pour les commandes rapides et frquentes ncessitant de

maintenir lattention sur la zone de travail.
Lintrt du menu contextuel est de minimiser les actions utilisateur et les

dplacements de la souris. Il prsente ct de lobjet slectionn la liste des actions
possibles. Activer une commande par le menu contextuel vite de dplacer le pointeur
lautre bout de lcran pour ouvrir un menu droulant ou pour cliquer sur un bouton.
Lutilisateur conserve lobjet dans son champ de vision et maintient son attention sur
la zone de travail.
Le menu contextuel est un bon moyen dconomiser de la place dans un cran
charg. Cependant, dans la plupart des cas, rien nindique lutilisateur quun clic
droit lui permettra douvrir un menu contextuel.
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. bouton daction, menu droulant).
Afficher les menus contextuels tactiles au-dessus du point dappui.
Contrairement au pointeur de la souris, le doigt masque lcran des interfaces

tactiles. Dans la mesure du possible, le menu contextuel doit donc safficher au-dessus
du point dappui.
Figure 4.20 Au moment o il appuie sur la zone du haut, lutilisateur ne voit pas le menu
contextuel ("Coller") car il est cach par son doigt.
Menu en ruban
Apparu dans la suite Microsoft Office 2007, le menu en ruban (ribbon), permet
dafficher des listes de commandes regroupes par thme ou contexte dutilisation.
Chaque groupe de commandes est accessible sous un onglet. Le ruban offre lavantage
de rendre rapidement accessible un nombre consquent de commandes sous forme de
boutons ou de listes droulantes, en profitant dune hauteur suffisante pour des icnes
explicites accompagns ventuellement dun libell.
Figure 4.21 Le ruban fournit un accs rapide un grand nombre de commandes.
Les lments dinteraction sont prsents dans le ruban sous une taille diffrente en
fonction de leur frquence dutilisation. Les icnes les plus grandes, les plus facilement
accessibles, correspondent aux commandes les plus frquentes.
Privilgier le ruban pour des applications utilises frquemment.
Contrairement aux menus droulants, le ruban ncessite un certain apprentissage

des icnes et de lorganisation des onglets. Nanmoins, une fois passe cette phase
dapprentissage, le gain en efficacit est sensible car les commandes sont disponibles
immdiatement et beaucoup plus rapidement quavec des menus droulants. Afin de tirer
un vritable bnfice du ruban, il est donc ncessaire dutiliser frquemment lapplication.
Regrouper les commandes du ruban en fonction de la tche de lutilisateur.
Un menu en ruban permet de retrouver rapidement la commande souhaite

condition quil ait t conu en cohrence avec la tche des utilisateurs. Pour cela, un
travail darchitecture de linformation doit permettre de construire les regroupements
en sappuyant sur les fonctionnalits de lapplication et en conduisant des sances de
tri par carte afin de valider lorganisation auprs des utilisateurs finaux.
Adapter le contenu du ruban en fonction de sa taille.
Le ruban est un lment de commande gomtrie variable . Lorsquil est rduit,

seules les commandes les plus importantes apparaissent. Lobjectif est de toujours
permettre un accs direct aux commandes les plus importantes, bien que la taille de la
fentre soit rduite.
Le dimensionnement du ruban doit garantir un accs rapide aux commandes les plus
frquentes.
En fait, chaque groupe de composants dispose de plusieurs formes daffichage de

taille diffrente (quatre au total). Lorsque la taille du ruban diminue, les groupes
contenant des commandes moins frquentes (ou moins connues) diminuent plus
rapidement que les groupes dont les commandes sont utilises plus frquemment.
Figure 4.22 Le contenu du ruban sadapte la taille de la fentre de manire toujours

fournir un accs rapide aux commandes importantes.
Dans un groupe de commandes, la taille de licne est proportionnelle limportance

de la fonction. Les icnes les plus grandes (32 32 pixels) correspondent aux commandes
les plus frquentes, tandis que les autres commandes sont prsentes par des icnes plus
petites (16 16 pixels). Les petites icnes sont accompagnes dun libell affich droite.
Ce libell sefface lorsque le ruban est rduit. Toutefois, les commandes les plus connues
(ou les plus frquentes) perdent leurs libells avant les autres.
Ce sont ces comportements qui rendent le ruban Office facile utiliser. Le gain en
rapidit dont bnficient les utilisateurs rguliers dOffice nest pas uniquement la cons-
quence dun changement de prsentation, mais bien le rsultat dun ensemble dinteractions
cohrent visant acclrer laccs aux commandes les plus frquemment utilises.
Lors de la conception dune interface, la question se pose frquemment de savoir sil
convient de choisir un menu ou un bouton. La figure suivante fournit des critres de choix.
Figure 4.23 Critres de choix entre un bouton et un menu.

La principale diffrence entre le menu et le bouton est son caractre phmre ;

il napparat que sur action de lutilisateur et disparat ds slection dun item. Les
menus sont donc particulirement utiles lorsque lcran est charg.
4.2.3 lments de slection

Diffrents lments vont permettre de choisir parmi un ensemble de donnes : les
boutons de slection, que lon appelle boutons radio ou case cocher, la liste
droulante et la liste simple.
Figure 4.24 Le nombre de choix possibles et la place libre lcran

sont les principaux critres de choix dun composant de slection.
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.
Cases cocher et boutons radio
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.
Prfrer les boutons aux listes droulantes.
Lorsque le nombre ditems de la liste est faible, il est prfrable de les afficher
directement, avec des cases cocher ou des boutons radio. Lorsque la liste dpasse les
3-4 items ou que la place est limite, la liste droulante est mieux approprie.
En outre, lutilisation de boutons est une manire efficace de faciliter la slection
dun item. Tous les items tant visibles, lutilisateur conomise un clic et surtout gagne
en prcision, car litem slectionner est statique.
Liste droulante
La liste droulante permet de guider lutilisateur dans la saisie.
La liste droulante facilite la saisie en proposant lutilisateur de choisir parmi les

diffrentes valeurs possibles. 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. Grce la liste droulante, il nest plus ncessaire de saisir au clavier,
il suffit de slectionner la valeur souhaite. En limitant la frappe, ce composant rduit
le risque derreur.
La liste prend peu de place et permet de prsenter de nombreuses options. Pour
gagner de lespace sur une page, cest un composant trs pratique. De ce fait, elle
est parfois utilise pour cacher de longues listes particulirement difficiles
manipuler...
Employer une liste droulante lorsque la place est rduite et les choix peu frquents.
La liste droulante peut contenir de nombreux choix. Mais ils sont dun accs
moins direct que les boutons de slection (deux clics au lieu dun seul). Cependant, la
liste prsente lavantage doccuper moins de place lcran.
Utiliser la liste droulante lorsque lensemble des choix possibles est variable.
Ce composant dinterface est particulirement utile lorsque le contenu de la liste

est variable, cest--dire quil peut voluer au cours de lutilisation de lapplication. En
effet, la liste droulante occupera toujours la mme place lcran quel que soit son
contenu.
Ne pas utiliser une liste droulante pour une information connue de lutilisateur.
La manipulation des listes droulantes 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 droulante.
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.
Organiser les items par ordre alphabtique ou 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. Par dfaut, il est toujours conseill de classer les items
par ordre alphabtique. Cest lordre le plus attendu dans une liste ditems. Toutefois,
la signification des items peut induire un ordre logique diffrent : (ex. : Trs frquent,
Frquent, Peu frquent). En outre, il peut tre judicieux de mixer ces deux approches
pour limiter le parcours fastidieux dune longue liste, notamment en proposant dabord
les items les plus frquents ou les plus attendus, puis une liste alphabtique.
Figure 4.25 Sur cette liste, les devises les plus courantes sont proposes en premier, puis une
liste complte des devises par ordre alphabtique est prsente en dessous.
La figure 4.26 rsume les diffrents critres de choix dun composant de slection.
Figure 4.26 Choix des composants de slection.
4.2.4 Champs de saisie

Frquemment utiliss sur le web, les formulaires font peur linternaute qui les voit
parfois comme une sorte dpreuve. En effet, jusqu prsent, sur les autres pages du
site, il tait consommateur dinformation ; ici il devient fournisseur. Dune certaine
manire, il prend plus de risques. Lenjeu est important car le passage du formulaire lui
permet gnralement de concrtiser une srie doprations qui, pour linstant, taient
restes virtuelles. Cest typiquement le cas lorsquil sagit de fournir les renseignements
finalisant un achat en ligne.
Face au formulaire, il y a peu de marge derreur. Sur les autres pages du site,
linternaute 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.
Proposer par dfaut la valeur la plus courante.

Guider lutilisateur dans la saisie.
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. 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 chances de
mener la tche jusquau bout. Sinon, il risque fort dabandonner et de quitter le site.
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 4.27 Champs de saisie.
Choisir les libells les plus courts possible.
Le texte de ltiquette est gnralement un compromis entre la comprhensibilit

du mot et sa longueur.
Donner une longueur approprie aux champs
La longueur du champ de saisie guide lutilisateur sur le type de donne attendue.

Par ailleurs, elle doit aussi permettre une relecture aise de la saisie sans devoir se
servir des flches du clavier pour faire dfiler le contenu.
Prsenter les champs de saisie de faon cohrente par rapport aux autres supports de
travail.
Lutilisateur commet moins derreurs lorsquil retrouve sur linterface un arrange-

ment qui lui est familier.
Figure 4.28 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, surtout sil sagit dune interface
tactile. 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 4.29 Lhistorique et lautocompltion vitent de ritrer les saisies.

Prvenir des erreurs de saisie.
Les saisies au clavier sont sources 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.
Figure 4.30 Les champs sont contrls au fur et mesure de la saisie
Expliciter la nature de lerreur.
Afin de faciliter la correction, un texte court proximit de la zone derreur doit

permettre lutilisateur de comprendre la nature de lerreur et lui donner les moyens
de la corriger facilement.
Il est prfrable de contrler les erreurs en deux temps. Tout dabord, un premier
contrle de surface permet de vrifier le contenu des champs au fur et mesure de la
saisie. Ensuite, un second contrle est effectu globalement sur lensemble des champs
lorsque le contenu a t transmis lapplication.
Ne pas bloquer lutilisateur.
Tant que la saisie na pas t valide, il est prfrable dindiquer lerreur par un
changement de prsentation et un message ct de llment concern, tout en
laissant lutilisateur continuer sa saisie. De cette manire, lutilisateur garde le contrle
de linteraction et peut revenir corriger lerreur ensuite.
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 4.31 Des erreurs sont vites lorsque lutilisateur choisit

lui-mme les units.
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 4.32 Les indications guident lutilisateur dans la saisie.
Prfrer un slecteur ddi pour les saisies complexes.
Il est toujours prfrable de rduire la saisie au strict ncessaire. Cest pourquoi,

lorsque la saisie est complexe, il est recommand de proposer une interaction par
slection plutt quune saisie de caractres. Par exemple, un calendrier permet de
saisir une date par simple slection, rduisant ainsi le risque derreur.
Figure 4.33 Le calendrier facilite la saisie des dates
Saisies obligatoires et facultatives
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.
Indiquer galement les saisies facultatives.
Prciser galement les champs facultatifs de ceux qui sont obligatoires aide
lutilisateur comprendre le fonctionnement de lapplication et lui vite des erreurs.
Afin dviter des saisies inutiles, notons toutefois quil est prfrable de rduire le
nombre de champs optionnels.
Dans la mesure du possible, ne prsenter que des champs obligatoires.
Dans un souci defficacit, il est prfrable de concevoir des formulaires o tous

les champs sont obligatoires. Dans ce cas, seules les informations vritablement
importantes sont demandes lutilisateur. Il nest plus ncessaire de prciser les
champs obligatoires, une indication en dbut de formulaire spcifiant que tous les
champs sont requis est suffisante.
Figure 4.34 Pour quun formulaire puisse effectivement permettre de recueillir les
commentaires des visiteurs du site, il doit tre suffisamment simple pour que la saisie se fasse
rapidement.
Alignement des zones de saisie

Lors de la conception dune interface homme-machine, la question se pose frquem-
ment de savoir comment aligner les libells et les zones de saisie. Il existe trois types
dalignements, chacun ayant ses avantages et ses inconvnients.
De prfrence, afficher les lments du formulaire sous les libells.
Lalignement vertical est celui qui minimise les risques derreur puisque les lments
de saisie saffichent directement en dessous de leur libell, dans le sens de la lecture.
Lorsque la place est suffisante, cet agencement doit tre prfr en particulier pour des
saisies occasionnelles.
Sur les interfaces tactiles, cet alignement permet de ne pas masquer le libell avec
le doigt ou lorsque le systme zoome automatiquement sur le champ remplir.
noter galement que ce type dagencement facilite de faon notable la traduction
de linterface puisque la taille des libells est peu contrainte.
Figure 4.35 Alignement vertical.
Lorsque lespace vertical est limit, prfrer lalignement droite.
Mis part son esthtique, cest lagencement le plus efficace en termes de saisie. Il
est recommand pour une application professionnelle o gnralement lutilisateur ne
lit pas les libells car il les connat. Par contre, il pourra relire rapidement les donnes
une fois sa saisie effectue car elles apparaissent ici directement les unes au-dessus des
autres.
Figure 4.36 Alignement droite.
Lorsque les libells des champs sont aligns gauche, la distance entre les libells
et la zone de saisie correspondante peut tre consquente. Les mouvements oculaires
sont importants. Des erreurs de parallaxe sont craindre.
Cette prsentation rend la lecture des libells plus facile (aligns gauche dans
le sens de la lecture), mais lassociation est moins claire entre libell et champ. Sil
est possible duniformiser la taille des libells, lalignement gauche de lensemble
facilitera la lecture ainsi que la saisie. Dans ce cas, la distance tant rduite, les risques
de confusion sont moindres.
Figure 4.37 Alignement gauche.
Saisie clavier
Acclrer la saisie clavier.
Dans la mesure du possible, linterface doit optimiser autant que possible la

saisie clavier qui, pour la plupart des utilisateurs, est une activit consommatrice
en ressources. Pour cela, lorsquune fentre contenant une zone de saisie saffiche, il
est prfrable de positionner directement le curseur dans le premier champ saisir.
De mme la fin de la saisie, la validation du formulaire doit pouvoir se faire
directement en appuyant sur la touche Entre , sans obliger lutilisateur valider
en cliquant sur un bouton.
Faire correspondre le dplacement par tabulation avec lordre des champs.
Beaucoup dutilisateurs interagissent avec un formulaire par le biais de la tabulation

(touche ). Le parcours des champs de saisie avec la touche de tabulation doit donc
correspondre lordre de saisie des champs, ainsi quau sens de lecture de la fentre.
Hirarchie des actions

Dans une zone de dialogue, toutes les actions ne sont pas gales, par exemple : modifier,
annuler ou revenir en arrire sont des actions secondaires, tandis que sauvegarder,
continuer ou valider sont des actions primaires qui permettent de raliser une tape
de la tche.
Mettre en vidence les actions primaires.
Les actions primaires sont directement responsables de la compltion du formulaire.

Elles conduisent lutilisateur vers son objectif et le guide dans les diffrentes tapes de
sa tche. La prsentation visuelle de ces actions doit reflter leur importance.
Aligner les actions primaires dans le sens de linteraction.

Figure 4.38 Sur cette page de la descente dachat, laction primaire (Continuer) est mise en
vidence, tandis que les actions secondaires (Modifier, Supprimer, Mettre jour) apparaissent en
retrait.
Afin doptimiser le processus de saisie, les boutons daction principaux sont

positionns dans le sens de saisie, cest--dire dans le sens de lecture de linterface.
Figure 4.39 Le bouton Je minscris est llment terminal de la squence de saisie.

Il saffiche dans lalignement des champs de saisie.
4.3 Temps de rponse 125
4.3 TEMPS DE RPONSE

4.3.1 Lattente pour lutilisateur
Le temps de rponse, que lon appelle attente lorsquon prend le point de vue
de lutilisateur, mesure le temps qui scoule entre lenvoi dune commande par
lutilisateur et la rponse du systme informatique.
Plus prcisment, le temps qui importe lutilisateur est le temps global de
ralisation de la tche. Il diffre de ce que les informaticiens appellent le temps de
rponse qui est le temps mis par le systme pour afficher un rsultat. En effet, le temps
de ralisation dune tche correspond pour lutilisateur un cumul du temps :
Le temps de rponse du systme.
Le dlai daffichage.
Le temps qui lui est ncessaire pour lire, puis comprendre et interprter la
rponse.
Le temps mis pour dcider et mettre en uvre les actions conscutives cette
rponse
ventuellement le temps perdu par erreur.
Le temps mis pour corriger ces erreurs.
Cest en rduisant ces diffrentes dures que lon diminuera effectivement le temps
de rponse aux yeux de lutilisateur.
Le temps de rponse influe sur lutilisabilit du logiciel de deux manires. Dune
part, cest un facteur de stress. Lanxit de lutilisateur augmente lorsque le temps
de rponse sallonge et quaucun affichage ne linforme des traitements en cours. Des
tudes ont montr que, dans une conversation humaine, une attente de plus de deux
secondes donne linterlocuteur limpression dattendre.
Dautre part, le temps de rponse alourdit la charge de travail, car il oblige
lutilisateur faire des efforts pour conserver en mmoire les informations ncessaires
pour continuer lchange. Dans le cerveau humain, les informations se maintiennent
en mmoire court terme pendant une dure de 2 6 secondes. Au-del, les
mcanismes de mmorisation sont plus complexes et les informations risquent dtre
oublies ou remplaces par dautres.
Lapprciation du temps de rponse est subjective. Elle dpend en particulier du
niveau dexpertise de lutilisateur. Ainsi, un dbutant accepte des temps de rponse
plus importants lorsquil est assist. Il prfre un systme facile apprendre, mme sil
est plus lent. Au contraire, lutilisateur expriment accepte un systme plus complexe,
sil est plus rapide. Il importe donc dtablir un compromis entre le temps de rponse
du systme et la facilit dapprentissage offerte par le logiciel.
Lutilisateur adapte sa stratgie dutilisation aux temps de rponse du systme et
la facilit de correction des erreurs. Lorsque le temps de rponse est faible et que les
erreurs sont faciles corriger, lutilisateur adopte une stratgie de type essai/erreur. Il
rflchit peu et commet des erreurs. Le stress est peu important. Au contraire, lorsque
le temps de rponse est important et que les erreurs sont difficiles corriger, le temps
de rflexion est plus important. Lutilisateur commet moins derreurs, mais le stress est
plus important.
4.3.2 Minimiser lattente

Comme nous venons de le voir, lorsque le temps de rponse est prvisible, lutilisateur
adapte sa stratgie dutilisation.
Minimiser les variations du temps de rponse.

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.
Si lattente est estime comprise entre 2 et 6 secondes, une icne dattente doit tre
affiche.
Figure 4.40 Lorsque le traitement est de courte dure,

une icne anime suffit pour avertir lutilisateur.
Si lattente est estime suprieure 6 secondes, un message doit prciser lavancement du

traitement en cours.
4.3 Temps de rponse 127
Un temps de rponse plus long, suprieur 6 secondes, est acceptable dans la

mesure o lopration en cours ne demande pas de mmorisation, condition toutefois
davertir lutilisateur par un message. Pour cela, les messages davancement peuvent
suivre le schma de la figure 4.41.
Figure 4.41 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.
Une animation montre lavancement du traitement en cours. Dans le cas des processus
longs (plusieurs minutes), un message peut galement prciser le type dactivit en
cours.
Autoriser lutilisateur interrompre les traitements longs.
Afin quil garde le contrle sur les oprations ralises par le logiciel, lutilisateur
doit, tout moment, pouvoir interrompre un traitement en cours.
Les attentes locales sont prfrables aux attentes globales.
En rgle gnrale, deux niveaux dattente sont prendre en compte : soit lattente
est globale au poste de travail, soit elle est locale une fentre de lcran. Lorsque
lattente est globale, aucune interaction nest possible. Lutilisateur na plus la main .
Dans la mesure du possible, cette situation doit tre vite : lattente ne doit pas
empcher lutilisateur dinteragir avec le systme. Il est prfrable dopter, lorsque la
chose est possible, pour une attente locale o seules les interactions avec la fentre
concerne sont interdites, le reste de linterface restant accessible lutilisateur.
4.4 CAS PRATIQUE : CHARTE ERGONOMIQUE

ET REFONTE GRAPHIQUE DU PROGICIEL SAB
4.4.1 Une dmarche ergonomique pour garantir la qualit
Le progiciel SAB est une solution informatique intgre ddie au domaine bancaire.
Il adresse principalement les secteurs de la banque de dtail et de la banque prive ainsi
que celui de la conservation des titres. Les diffrents modules constitutifs du produit
SAB permettent doffrir diffrentes solutions mtier aux tablissements financiers, tels
que le crdit aux particuliers ou aux entreprises, les paiements bancaires, la gestion
des titres, le e-banking, la comptabilit ainsi que le reporting bancaire et analytique.
Courant 2010, une nouvelle version du poste bancaire destine aux utilisateurs
front-office a t mise en uvre. Dans le cadre de la conception de ce nouveau
poste de travail, SAB a souhait fournir aux quipes de dveloppement une charte
ergonomique afin de guider et homogniser lensemble des dveloppements pour
sassurer de la cohrence des diffrentes interfaces.
Afin de laccompagner sur ce projet, SAB nous a demand de lassister dans la
rdaction de la charte ergonomique et dans la dfinition dune charte graphique
globale pour les diffrents modules du progiciel.
4.4.2 Prciser les rgles dergonomie

Une quipe a t constitue afin de rdiger une charte ergonomique et valider que
le fait cette charte soit bien respecte dans les diffrents projets contribuant la
ralisation de la nouvelle version du produit.
La premire version de la charte ergonomique fournissait des principes gnraux
que nous avons prciss en fonction des exigences mtiers et des contraintes du produit
en collaboration avec lquipe SAB.
lissue de cette phase dchange, la charte ergonomique fournissait un ensemble
de recommandations sur les rgles suivre pour concevoir les crans ainsi que des
agencements types pour les fonctionnalits les plus frquemment employes dans le
logiciel.
Nous avons complt cette premire version, principalement ergonomique, en
construisant une charte graphique pour le progiciel, garantissant ainsi une cohrence
forte de lensemble.
4.4.3 Refondre le graphisme de linterface

Le design de linterface prcdente navait pas t travaill graphiquement. Bien que
les fonctionnalits du produit soient fortement apprcies par les clients, linterface
ntait pas suffisamment labore et en rapport avec les meilleures pratiques de
prsentation.
4.4 Cas pratique : charte ergonomique et refonte graphique du progiciel SAB 129
Figure 4.42 Linterface du produit SAB avant lintervention ergonomique
4.4.4 Un design moderne et sobre

Il tait donc important de rnover cette interface pour rpondre aux exigences
dergonomie actuelles, tout en respectant les qualits qui font la force du progiciel
SAB : productivit et simplicit dutilisation.
La piste graphique choisie par SAB met en avant laspect modulaire des applica-
tions. Les zones de travail et de navigation sont poses sur un fond dgrad pour les
faire ressortir et les diffrencier. Cette mise en forme de type conteneurs favorise
la mmorisation de lemplacement des fonctions lcran.
Les diffrents blocs sont traits avec un lger effet de relief pour les prsenter
en avant-plan tout en minimisant la charge visuelle. Une variation de gris donne la
tonalit globale de lcran, le vert est la couleur tonique qui vient rehausser lensemble.
Elle est utilise pour mettre en vidence les lments cls de la page : titre et sous-titres,
bouton principal, tape courante, etc.
Figure 4.43 La nouvelle interface du progiciel
4.4.5 Une utilisation dans le monde entier

La mise en uvre de la nouvelle charte ergonomique a permis de renforcer lattrait
du produit en contribuant lharmonisation des interfaces, la fois en termes de
graphisme et dergonomie.
Lapplication de la charte a permis de gagner du temps lors des dveloppements, ds
la phase de conception car les quipes disposent de patterns rpondant aux diffrentes
problmatiques de prsentation, puis en phase dimplmentation en sappuyant sur des
composants techniques qui aident la construction des pages en conformit avec la
charte. Finalement la nouvelle ergonomie et le nouveau graphisme ont t accueillis
trs positivement par les quipes de dveloppement et les utilisateurs.
Le progiciel SAB est utilis par des tablissements bancaires dans le monde entier.
Au total, ce sont 15 000 utilisateurs qui se servent quotidiennement des applications
SAB.
4.4 Cas pratique : charte ergonomique et refonte graphique du progiciel SAB 131
Prcdemment lintervention ergonomique nous avions dgag les grandes

problmatiques de prsentation et de navigation traiter. Nous souhaitions pour apporter
les meilleures rponses ces problmatiques bnficier dune expertise. Par ailleurs
nous considrions que la dclinaison dune charte graphique relevait dune comptence
mtier ddie.
Nous avons t sduits par lapproche ergonomique. Nous avons pu en commun ajuster
la dmarche propose au regard de nos attentes.
La prsentation des valeurs qui caractrisent lentreprise et ses produits ont fait lobjet de
propositions de pistes graphiques. Lapplication du visuel retenu sur quelques-unes de
nos transactions majeures a confirm la pertinence des propositions labores.
Les contraintes de prsentation et de navigation ont t ensuite revues dans le dtail
pour apporter des solutions rpondant aux meilleures pratiques. Le retour dexprience
apport par les consultants a permis nos quipes de capitaliser sur les bonnes pratiques
et dtre en capacit de justifier les choix retenus.
Ces travaux ont permis de dgager la charte graphique et ergonomique. Celle-ci
est devenue la rfrence pour nos outils de maquettage et notre framework de
dveloppement.
Le rsultat obtenu est totalement satisfaisant, il est un des lments majeurs de la
nouvelle version du progiciel SAB Advanced Technology.
Olivier GASCOIN
Chef de produit SAB
5
Communiquer
avec lutilisateur
Le langage de lordinateur ne doit pas seulement exprimer les tches de lutilisateur et rpondre
ses questions, il doit galement tre en harmonie avec les processus humains de mmorisation et
de comprhension.
1
Ben Schneiderman , Designing the User Interface, Addison-Wesley, 2002.
5.1 Le langage de linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

5.2 Internationalisation des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
5.3 Traitement des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
5.4 Aide et assistance lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
5.5 Cas pratique : BCA Expertise, impliquer les utilisateurs pour garantir la qualit de 175
lexpertise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1 LE LANGAGE DE LINTERFACE

Le langage de linterface homme-machine constitue la base mme du dialogue entre
lutilisateur et lapplication. Des textes simples, non ambigus, facilitent lapprentissage
et la mmorisation. Ils en garantissent une comprhension correcte.
1. Ben Shneiderman est professeur au dpartement des sciences informatiques, directeur fondateur
du laboratoire dinteraction Homme-Machine, et membre de linstitut pour les tudes informatiques
avances, luniversit du Maryland, College Park.
134 Chapitre 5. Communiquer avec lutilisateur
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. La comprhension est plus rapide.
Figure 5.1 Dconseill Pour la plupart des utilisateurs, ce texte est incomprhensible
car il emploie un vocabulaire trop spcialis.
5.1.1 Libell des commandes

Un texte est plus explicite quune icne pour dsigner une commande. Cependant, il
prend gnralement plus de place lcran et prsente linconvnient dtre dpendant
de la langue.
Un seul et unique libell pour chaque commande.
Le nom utilis pour chacune des commandes et chacun des lments de linterface
doit tre cohrent sur 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 de lapplication. Cest pourquoi on utilisera de prfrence des verbes
linfinitif pour dsigner les commandes, voire un verbe suivi dun substantif sil est
ncessaire dtre plus prcis. Au contraire, on emploiera des substantifs pour nommer
les tats et les objets de linterface.
viter les verbes la forme nominale.
Lutilisation dun verbe la forme nominale induit une confusion entre action
et tat. Par exemple, la commande Affichage va-t-elle dclencher un processus
daffichage (action) ou prsenter les paramtres courants daffichage (tat) ?
viter les abrviations.
Les abrviations sont source dambigut et ncessitent un effort de mmorisation.

Dans la mesure du possible, il est prfrable demployer les mots complets moins
quil ne sagisse dune abrviation familire lutilisateur.
5.1 Le langage de linterface 135
Cependant, lorsquon ne peut pas faire autrement, il convient dadopter une rgle
de construction simple et homogne pour les abrviations. La figure 5.2 prsente
diffrentes techniques dabrviation. Il est recommand de terminer labrviation par
un point afin de montrer que le mot a t coup.
Figure 5.2 Rgles de construction des abrviations.
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.
5.1.2 Messages
Les messages permettent au systme de communiquer explicitement avec lutilisateur
soit pour le questionner afin de dterminer les actions venir, soit pour expliquer un
fonctionnement.
Dfinir le rle et le contenu des diffrents types de messages de faon homogne.
Afin de garantir la cohrence de linterface, il convient de mettre en place une

typologie claire des diffrents types de messages : message derreur, message de demande
de confirmation, message dinformation, etc. et dassocier chacun dentre eux un
gabarit de fentre ainsi quun contenu type.
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.
Un message dont la forme ne correspond pas au contenu sme le doute dans lesprit
de lutilisateur, comme le montre la figure 5.3.
Figure 5.3 Lorsque la prsentation (ici licne) ne correspond pas au contenu, le message est
ambigu.
Rdaction des messages

La rdaction du message doit suivre diffrentes rgles visant faciliter la comprhen-
sion et viter les ambiguts.
Figure 5.4 Ce message inutile, et long, a sem le doute chez de nombreux utilisateurs avant
dtre retir du logiciel.
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. Le contenu du message doit donc tre rduit
lessentiel, cest--dire aux seules informations pertinentes pour lutilisateur.
Figure 5.5 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.
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 5.6 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.
Figure 5.7 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.
Figure 5.8 La forme active est moins ambigu.
Produire des messages constructifs et non critiques.
Les messages doivent permettre lutilisateur de comprendre son erreur.
Figure 5.9 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.
Figure 5.10 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.
Respecter lordre dans lequel les actions doivent tre excutes.

Figure 5.11 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 ?
Lordre dans lequel les actions sont exprimes dans le message doit tre cohrent
avec la faon dont elles doivent tre ralises sur lapplication.
Figure 5.12 Dconseill Ce message, o les actions raliser sont prsentes dans lordre
inverse dexcution, a t source de nombreuses erreurs.
la lecture du message prcdent, lutilisateur est tent dinsrer le CD-ROM et

cliquer sur OK, alors quil lui est demand de 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.
Figure 5.13 Prfrable 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.
Adopter un vocabulaire homogne.

La cohrence des termes utiliss sur linterface facilite sa comprhension et son

apprentissage. Afin dtre plus explicite, il est prfrable dutiliser toujours les mmes
termes quitte rpter certains mots. Pour cela, un glossaire du vocabulaire utilis
dans linterface doit tre dfini et mis jour au cours du projet.
Figure 5.14 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 la figure 5.15.
Figure 5.15 Le dernier message est ambigu car il ne prcise pas laction attendue par le logiciel.
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 la figure 5.16.
Figure 5.16 Une typographie adapte facilite la lecture des messages.

5.1.3 Lcriture web

Les internautes se servent du web pour gagner du temps. Ils ne lisent pas les pages
mot mot, ils les 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.
Les points cls dune rdaction efficace

Lobjectif de la rdaction sur le web nest pas de faire de la littrature, mais de prsenter
rapidement linformation importante, pour que linternaute trouve directement la
rponse aux questions quil se pose. La structure classique introduction, dveloppe-
ment, 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 habituel-
lement quun texte sur cran doit compter deux fois moins de mots que sur papier
[Nielsen 98].
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
base dune rdaction simple sont applicables la page web : dvelopper une ide par
paragraphe, faire des paragraphes courts (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. Il est dconseill demployer des termes trop sophistiqus. Les
utilisateurs balayent les pages rapidement et risquent de ne pas saisir les nuances. En
particulier les mtaphores peuvent tre mal interprtes par les internautes qui les
comprennent parfois au premier degr.
Commencer par la conclusion.
Un texte pour le web doit tre crit lenvers . Pour que lutilisateur accde
directement linformation importante, le texte commence par la conclusion. Il donne
ensuite les lments qui ont permis daboutir cette conclusion. Cest le principe
de la pyramide inverse [Nielsen 96]. Lobjectif est le mme que celui de lcriture
journalistique : fournir linformation importante le plus rapidement possible.
Structurer laccs aux informations.
Dans le mme ordre dide, 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.
Figure 5.17 Les informations sont prsentes en deux temps :

un rsum dabord, les dtails ensuite.
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 !
Principe de la pyramide inverse
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 contenu de
la page et laider vrifier quil est bien arriv sur la page quil souhaitait atteindre. 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.
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.
Ce principe sapplique galement aux titres de paragraphe (sous-titres). Lorsque
lutilisateur parcourt la page, les sous-titres lui servent localiser la section contenant
les informations quil cherche. Le sous-titre doit donc indiquer explicitement le
contenu du paragraphe correspondant.
Faire ressortir les lments cls du texte.
La typographie des messages importants doit accrocher lil. Sur une page web,
deux techniques sont particulirement efficaces : mettre en gras et utiliser les puces.
La graisse des caractres permet de faire ressortir un mot dans une phrase. Les listes
puces vont servir mettre en vidence une srie de points cls. ventuellement, la
couleur peut aussi tre utilise pour signaler certains mots. Cependant, du fait quelle
apporte une connotation smantique supplmentaire, elle risque dtre moins bien
comprise.
Figure 5.18 Les articles du site de J. Nielsen (useit.com) sont dexcellents exemples dcriture
web. Chacun commence par un rsum synthtisant les points forts de larticle, ici linformation
principale (79 % des internautes survolent la page plus quils ne la lisent) apparat en 1re ligne. 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 indiquent la page vers laquelle ils pointent ; ici
Inverted pyramid dirige linternaute vers larticle intitul Inverted pyramids in cyberspace.
Le texte du lien doit tre cohrent avec le titre de la page.
Le texte des liens est systmatiquement lu car linternaute y cherche des lments
lui permettant de se diriger dans le site. la lecture du lien, lutilisateur doit pouvoir
deviner le contenu de la page. Le mieux est dutiliser directement le titre de la page
comme texte du lien afin de rassurer lutilisateur sur lendroit o il va arriver
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.
Figure 5.19 La navigation web se prte bien ce type de cheminement o linternaute

explore librement le site en fonction de ses thmes dintrt. Ainsi, dans cet article intitul Touch
Gesture Reference Guide, linternaute possde un accs dautres ressources directement lies.
Justifier les textes gauche.
La lecture est plus simple lorsque le texte est justifi gauche, car lil retrouve
rapidement le dbut de la ligne.
Ne pas souligner les textes.
Cette rgle peut sembler vidente. Mais elle mrite toutefois dtre rappele car
on rencontre encore souvent ce problme. En effet, le soulignement est utilis sur le
papier pour mettre en vidence certains mots. Par contre sur une page web, cet artifice
typographique a une autre signification : il signale un lien.
Il ne faut pas souligner du texte dans une page web. Du point de vue de lutilisateur,
cest un peu comme si on cherchait lui tendre en pige ; lui faisant prendre pour un
lien ce qui nen est pas.
Figure 5.20 En haut de cette page, le soulignement sert mettre en vidence le message.
Mais linternaute croit quil sagit dun lien conduisant vers une page permettant de dclencher
laction propose ( demander une recherche dantriorit ). Il clique dessus. En vain, rien ne se
passe : ce nest que du texte !
Permettre lutilisateur dimprimer le texte.
La 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.
La prsentation lcran tant gnralement diffrente de celle sur papier, il est
recommand de dfinir au pralable lapparence des pages imprimes, en particulier
lorsquil sagit dune information importante, voire contractuelle, comme un bon de
commande par exemple.
Vrifier lefficacit rdactionnelle

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

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 ?
5.2 INTERNATIONALISATION DES INTERFACES

Lorsque la vocation dune application est internationale, se pose la question de la
localisation , cest--dire la manire de traduire linterface pour quelle soit compr-
hensible sans ambigut par un utilisateur tranger. Cest une problmatique laquelle
sont confronts la plupart des sites web qui visent une audience internationale.
5.2.1 La page daccueil

Comme nous lavons vu prcdemment, la page dentre sur un site web doit permettre
linternaute de comprendre la vocation de ce site. La page daccueil doit donc
sadresser au visiteur dans sa langue.
Diriger linternaute vers la page daccueil qui est dans sa langue.
son arrive sur le site, linternaute doit tre automatiquement dirig vers
la version du site correspondant sa localisation gographique ou la langue du
navigateur quil utilise.
Dans la mesure du possible, le processus de dtection ci-dessous doit tre mis en
uvre :
Si la zone gographique, dtecte par le biais de ladresse IP, correspond la
langue du navigateur de lutilisateur, linternaute est redirig automatiquement
vers la version du site pour ce pays/langue.
Si la zone gographique dtecte ne correspond pas la langue du navigateur,
le site affiche une fentre de slection de la langue. En effet, il peut sagir, par
exemple, dun touriste coren qui se sert de son ordinateur Paris.
Finalement, lorsque la position gographique ne peut pas tre dtecte ou
quune ambigit existe (ex: en Belgique, entre le franais et le flamand), il est
5.2 Internationalisation des interfaces 147
prfrable de demander linternaute de choisir la version du site quil prfre

utiliser.
Figure 5.21 Exemple de redirection vers la version nationale : avant de rediriger linternaute
tranger vers la page de son pays, ce site lui demande de prciser le pays de livraison ainsi que la
devise afin que les informations soient affiches en consquence.
Laisser linternaute choisir sa page nationale
Lorsquil nest pas ncessaire de redirigerautomatiquementlinternaute,il est prfrable

de le laisser choisir lui-mme la version du site quil souhaite visiter. Dans ce cas, les
paramtres prcdents (localisation de ladresse IP et langue du navigateur) sont utiliss
pour inciter lutilisateur visiter la version du site correspondante.
Figure 5.22 Le site Amazon.com propose lutilisateur situ en France daccder Amazon.fr.
Notons que le message plac ici en haut de page peut tre identifi par certains internautes
comme une publicit (phnomne du banner blindness).
5.2.2 Choisir sa langue
Permettre lutilisateur de changer facilement de langue.
Sur un site international, lutilisateur doit facilement pouvoir passer dune version
(langue) du site une autre et ce sur toutes les pages car il peut tre arriv sur le site
par une page trangre, suite une requte un moteur de recherche. Cest pourquoi,
le changement de langue/version se trouve en gnral dans la partie suprieure droite
de la page, dans la zone Utilitaires .
Figure 5.23 Le changement de langue est plac en haut droite de la page. Il est accessible
depuis toutes les pages du site.
Employer la langue cible ou un drapeau pour le lien vers la version/langue correspondant.
Par exemple, sur la version anglaise, le lien vers la version franaise sintitulera
franais et non french . Dautre part, lorsque de nombreuses langues sont
disponibles, le drapeau facilite la slection (guidage visuel).
5.2.3 Traduction
La traduction du contenu est une tape incontournable de la conception dun site
international. La qualit de cette traduction est essentielle car elle va garantir la
bonne comprhension du site par ses visiteurs trangers.
Il est prfrable de ne pas traduire plutt que de prendre le risque dune mauvaise
traduction.
Une traduction approximative, comportant des fautes dorthographe ou de gram-

maire, induit une mfiance chez les internautes. Le site nest pas pris au srieux,
certains visiteurs se posent la question de sa lgitimit ( est-ce le vrai site ou une
copie ? ).
Figure 5.24 Sur ce site (www.samsung.com), de trs nombreuses langues sont disponibles, la
page de slection de la langue utilise des drapeaux pour guider linternaute.
Il est prfrable dopter pour des textes courts et simples de manire faciliter la
traduction, ainsi que les mises jour du contenu. Par ailleurs, le vocabulaire spcifique,
jargon technique , est viter afin de ne pas compliquer inutilement la traduction.
Sur un site de e-commerce, il faudra veiller tout particulirement la bonne
comprhension des libells darticles. Les ambiguts peuvent tre leves en faisant
valider le catalogue par des utilisateurs locaux. En effet, dans une mme langue, les
mots ne signifient pas toujours la mme chose selon le pays (voir figure 5.25).
Employer les units locales.
De manire viter que lutilisateur ait convertir les informations affiches, les
units utilises, en particulier pour la fiche produit dun site de e-commerce, doivent
tre celles employes usuellement dans le pays en question. Les principaux lments
convertir sont :
les longueurs, les poids, les tempratures et les monnaies ;
les codes postaux, le format des numros de tlphone ;
la taille des vtements ;
les chiffres (1,000 signifie mille aux tats-Unis et un (1) en France).
Figure 5.25 Au Royaume-Uni ( gauche) et aux tats-Unis ( droite),

le mot Vest ne dsigne pas le mme produit.
Conserver la mme architecture pour les diffrentes langues du site.
Lorsque la vocation du site est la mme pour diffrents pays, il est prfrable de
traduire lintgralit du contenu du site plutt quuniquement certaines parties. Dans
ce cas, larchitecture de linformation et le contenu des pages doit tre le plus proche
possible dune version une autre, afin de renforcer le sentiment dune offre globale
cohrente et internationale.
Ne pas utiliser de texte dans les images.
Afin de faciliter la traduction de linterface, il est prfrable de dissocier le texte

des images de manire pouvoir modifier le texte sans avoir changer les images.
5.2.4 Localiser linterface

Cependant, le site peut aussi prsenter des spcificits selon le pays de linternaute,
particulirement en ce qui concerne la livraison.
Informer au plus tt lutilisateur sur les services offerts pour son pays.
Lorsque lutilisateur ne peut pas bnficier de tous les services proposs du fait de
sa localisation, il doit en tre inform au plus tt. En effet, il serait particulirement
frustrant de ne dcouvrir qu la fin du processus dachat quil nest pas possible dtre
livr chez soi.
Inversement, informer linternaute tranger que son pays est bien couvert par
le service de livraison, est un lment qui contribue le rassurer et le mettre en
confiance.
Adapter le contenu du site la localisation de linternaute.

Figure 5.26 Ds la page daccueil, ce site rassure linternaute franais en linformant

quil pourra bien tre livr (message en haut de page, en jaune).
Connaissant le pays de linternaute, le site peut proposer des promotions cibles.

Dans certains cas, les produits peuvent changer en fonction de la culture ou de la
lgislation du pays. Par exemple, McDonalds propose des hamburgers diffrents selon
les pays.
De mme, lordre des produits peut tre modifi de manire mettre en avant les
articles susceptibles dintresser les internautes du pays.
Le site doit tre en rgle avec la lgislation des pays. Aux tats-Unis, par exemple,
il est autoris dinscrire par dfaut un internaute des messages publicitaires, tandis
quau contraire, en Europe, la case cocher permettant de sinscrire la newsletter doit
tre dcoche par dfaut.
La localisation de lutilisateur permet aussi dadapter le contenu du site la
lgislation locale : interdiction de certains produits, exclusivits dexploitation sur les
pays, etc.
Figure 5.27 Sur ce site, les internautes franais ne peuvent pas visualiser certaines vidos
car lexploitation est pour linstant rserve aux tats-Unis.
Sur la page produit dun site de e-commerce, prciser les conditions de livraison pour le
pays concern.
Lutilisateur doit tre inform, au plus tt, avant de placer le produit dans son panier,
des conditions particulires concernant son pays, en particulier, lorsque certains
produits ne sont pas disponibles pour certaines destinations.
Figure 5.28 Sur cette fiche produit, il est indiqu que le produit est en stock mais quil ne
pourra pas tre expdi ladresse de lutilisateur.
De mme, afin de permettre lacheteur tranger dvaluer le cot de son achat,

le site prcisera les tarifs de livraison en fonction des informations relatives la
localisation de lutilisateur. Ces donnes peuvent tre dtectes automatiquement
partir de ladresse IP ou bien demandes explicitement lutilisateur (adresse de
livraison, voire au minimum : le pays et le code postal).
Concevoir un formulaire pour chaque pays.
Les informations postales et la syntaxe de ladresse diffrent dun pays lautre. Afin
dviter des erreurs de livraison, il est donc prfrable de concevoir des formulaires
spcifiques chaque pays.
Les informations constituant ladresse varient selon le pays :
En France, le numro prcde le nom de la rue, tandis quen Belgique, il le suit.
Au Royaume Uni, le code postal suit le nom de la province, tandis quen France,
il prcde le nom de la ville.
Aux tats-Unis, ladresse comporte le nom de ltat. En Suisse, le nom du
canton est indiqu. Mais ce nest pas le cas dans tous les pays.
De mme, le nom de famille nest pas toujours obligatoire. Dans certains pays
(Islande et certaines parties de lInde) il ny a pas de nom de famille.
Figure 5.29 Pour prciser le cot et les modalits de livraison, le site Apple Store demande
lutilisateur de saisir son code postal.
Figure 5.30 Ici le formulaire propose linternaute de saisir ltat ou la rgion (si appropri),
puis le code postal, avant le nom du pays. Ces informations ne sont pas appropries pour la France.
Proposer la saisie des dates selon les habitudes du pays.
Les dates ne sont pas prsentes de la mme manire dun pays lautre. De
mme, la semaine ne commence pas le mme jour selon les pays. En France, on
considre gnralement que le lundi est le premier jour de la semaine, tandis que cest
le dimanche aux tats-Unis.
Afficher les horaires en fonction de la localisation de linternaute.
Selon le pays, on utilisera un affichage de lheure sur 24 heures ou bien par demi-
journe : AM/PM.
Figure 5.31 Sur la version amricaine du site dAmerican Airlines (en haut) la semaine
commence Sunday tandis que sur la version franaise elle dbute le lundi .
Dans certains cas, il peut tre intressant de distinguer le fuseau horaire utilis
pour afficher lheure, mais les indications GMT ne sont pas universellement connues.
Dans ce cas, il est conseill de prsenter lhoraire en fonction de la localisation, par
exemple 10h pour Paris et 17h pour Soul .
5.2.5 Polices de caractres
Adapter lagencement de la page au sens de lecture
De manire gnrale, le positionnement des lments de linterface doit suivre le

sens de lecture. De ce fait, la page sera conue pour tre lue de gauche droite dans
une langue utilisant lalphabet latin, tandis qu linverse, elle sera conue de droite
gauche en arabe ou hbreu.
Linterface est simplement inverse entre les deux types de langue, on parle deffet
miroir. Pour un site web en arabe ou en hbreu, le logo se retrouve dans le coin
suprieur droit, le menu de navigation est cal sur le bord droit de la page et les textes
commencent droite.
Figure 5.32 Linterface est agence dans le sens de la lecture,

ici la mme page en franais et en hbreu.
La taille du texte doit prendre en compte les caractres de lcriture utilise.
La taille du texte permettant de garantir une bonne lisibilit des informations

affiches dpend du type de caractres utiliss. En loccurrence, les caractres japonais
ou chinois ncessitent une hauteur plus importante que des caractres latins pour tre
lus sans effort.
Utiliser lcriture du pays.
Lorsquil existe plusieurs formes dcriture pour une mme langue, on privilgiera
lcriture la plus courante pour les utilisateurs viss par le produit. Le japonais
en particulier permet diffrents scripts dcritures. Nanmoins, les scripts les plus
frquemment utiliss sur les interfaces sont le Kanji et le Katakana.
Figure 5.33 Les sites japonais prsentent diffrents types dcriture : principalement le Kanji
et le Katakana, mais aussi des libells en caractres latins
En rgle gnrale, lcriture horizontale est prfre sur les interfaces.
Certaines langues, comme le japonais ou le chinois, permettent galement une

criture verticale du texte. Toutefois, elle est peu utilise sur les interfaces et elle
ncessite de reconcevoir entirement lagencement de lcran lors de la traduction.
Souligner un texte en japonais peut tre cause dincomprhension.

En japonais ou en chinois, la ligne de soulignement peut gner la comprhension

des caractres, voire induire une mauvaise interprtation. Dans ce cas, il est prfrable
de distinguer les liens par la couleur ou bien de les surligner.
Figure 5.34 Sur cette interface, les liens souligns peuvent poser des problmes
dinterprtation
Choisir le mode de mise en vidence en fonction de la langue.
Pour certaines critures, comme le japonais, le chinois ou le coren, il nest pas

possible dutiliser les modalits visuelles habituellement employes en latin, tel que
litalique ou le gras. Dans ce cas, il faut jouer sur la couleur ou sur les encadrements
pour mettre en vidence certaines parties de linterface.
5.2.6 Spcificits culturelles
Certaines images peuvent tre interprtes diffremment selon les cultures.
La connotation dune mme image peut tre radicalement diffrente dun pays
lautre. Il est donc conseill de choisir avec prcaution les images utiliser et de tester
leur interprtation auprs des utilisateurs dans les pays viss.
Figure 5.35 Une main avec la paume visible est mal perue dans certains pays dAsie
Les icnes de linterface doivent sappuyer sur une symbolique universelle.
Afin de faciliter linterprtation des icnes par les utilisateurs de tous les pays,
il est prfrable dviter les symboles avec une forte connotation locale. Le respect
dune symbolique standard prsente sur dautres interfaces et sur les systmes
dexploitation les plus courants facilite linterprtation des icnes.
Figure 5.36 Les utilisateurs asiatiques ou europens ne reconnaissent pas immdiatement

licne courrier , alors quun amricain y voit tout de suite une bote aux lettres
Prendre en compte la manire dont les couleurs sont interprtes.
La symbolique associe aux couleurs est variable dun pays lautre. Pour certains
produits, il faut adapter linterface en fonction du pays.
Par exemple, le rouge, couleur de la joie en Asie, est associ au mariage, tandis que
cest la couleur du danger en Occident. Au contraire le blanc voque gnralement le
mariage en Occident, mais cest la couleur du deuil en Asie.
5.2.7 Mthodologie
Concevoir la version internationale dune interface, ce nest pas seulement traduire le
texte et agencer linterface en fonction du sens dcriture. Une dmarche mthodolo-
gique doit permettre de sassurer que lapplication sera effectivement utilisable dans le
pays vis en fonction des contraintes culturelles locales.
Conduire une tude terrain en collaboration avec des intervenants locaux.
Dans un premier temps, une analyse in-situ des utilisateurs dans les diffrents pays
permet de mieux cibler linterface et de comprendre plus prcisment les contraintes
spcifiques du pays.
5.3 Traitement des erreurs 159
Figure 5.37 Aux tats-Unis ( gauche) et en Chine ( droite) la couleur symbolisant le mariage
nest pas la mme.
Afin dviter de biaiser les rsultats par des difficults dinterprtation de la langue
ou des incomprhensions culturelles, il est prfrable de conduire ce type dtude avec
des intervenants locaux.
Mener des tests utilisateur dans les diffrents pays.
Pour valuer linterface auprs des utilisateurs trangers, il est recommand de

conduire des tests dans les principaux pays prsentant un march stratgique. Ces tests
permettront dadapter les versions internationales aux populations vises.
De mme que pour ltude terrain, il est prfrable que les tests soient conduits et
prpars par une personne locale. Linterview et lanalyse par des personnes pratiquant
nativement la langue permettent de dceler plus efficacement les incomprhensions
et autres difficults lies lergonomie de linterface.
5.3 TRAITEMENT DES ERREURS

5.3.1 Types derreurs
Les erreurs sont gnralement mal acceptes par lutilisateur car elles perturbent la
faon dont il a prvu de mener la tche et rallongent le temps de ralisation. Qui plus
est, les erreurs chappent, par nature, lutilisateur qui perd alors le contrle sur le
fonctionnement du systme.
Minimiser le risque derreur amliore de faon notable lutilisabilit du logiciel. Le
traitement des erreurs ncessite dune part, en amont, de prvenir les erreurs par une
analyse des causes et dautre part, de faciliter la correction, car il est impossible de les
liminer totalement.
Cependant, quel que soit le soin apport la conception du logiciel, nul ne

pourra tre sr que lutilisateur ne se trompera jamais. Lerreur fait partie de la nature
humaine (errare humanum est).
On distingue deux types derreurs : les erreurs dintention et les erreurs dex-
cution. On commet une erreur dintention lorsque la manire de faire est correcte,
mais que laction ne permet pas datteindre le but vis, par exemple lutilisateur na
pas utilis la commande correcte par incomprhension du sens des commandes ou de
lenchanement des oprations. loppos, lorsque lintention est correcte mais que
la faon de faire nest pas bonne, cest une erreur dexcution, par exemple lutilisateur
a tap par inadvertance sur une touche autre que celle souhaite.
Il nest pas possible de diffrencier simplement ces deux types derreurs. Linterface
doit donc fournir lutilisateur des moyens de les corriger quel que soit leur type.
Pour viter les erreurs dintention, il importe que lutilisateur comprenne correc-
tement 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 derreurs.
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 derreurs.
Les erreurs dexcution correspondent un mauvais fonctionnement du proces-
seur humain [Card 81]. Elles trouvent leurs origines dans chacun des sous-systmes :
perceptif, cognitif et moteur.
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.
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 5.38.
Figure 5.38 Couples lettre-chiffre sources derreur de perception.
Utiliser les techniques de mise en vidence.

Une mise en vidence inefficace conduit des erreurs. Par exemple, dans la figure
suivante, les livres qui nont pas t rendus ne se distinguent pas visuellement des
autres.
Figure 5.39 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.
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.
Erreurs cognitives
Les erreurs cognitives sont lies des difficults de traitement de linformation,
autrement dit de comprhension et de mmorisation, comme devoir interprter un
message relatif lemploi 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 dune vido, lutilisateur doit
ressaisir le numro de rfrence dans la seconde fentre. Il risque de se tromper, car le
logiciel lui demande de mmoriser la rfrence prcise.
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.
Figure 5.40 Devoir se souvenir dune valeur dune fentre lautre

prsente un risque derreur.
Minimiser le calcul mental.
Demander lutilisateur deffectuer lui-mme certains calculs, tels quune conver-

sion dunit par exemple, est source derreurs. 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.
Figure 5.41 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

sources 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.
Erreurs motrices
Les erreurs motrices sont des erreurs de manipulation. Elles sont gnralement lies
aux contraintes temporelles qui portent sur la tche. Plus les actions doivent tre
excutes rapidement, plus le risque derreur augmente.
Agrandir les objets slectionner.
Les erreurs motrices ont galement pour origine des difficults de coordination
il/main, en particulier lorsque les objets slectionner sont petits.
Prvoir les appuis accidentels.
Lorsque lutilisateur est dbutant, des appuis involontaires sont courants. Il est
donc prfrable de les prvoir autant que possible, par exemple en ne prenant pas en
compte lappui sur les touches alphabtiques si la saisie attendue est numrique.
De la mme manire, il est conseill de mettre en vidence le bouton daction
le plus probable (ex. : Valider plutt que Annuler) sil est effectivement dans la
continuit de laction. Toutefois, il est galement prfrable de lassocier un dialogue
de confirmation lorsque laction slectionne est difficilement rversible (ex. : tes-
vous sr de vouloir supprimer ce document ?).
viter de changer trop frquemment de moyen dinteraction.
Finalement, lorsque les manipulations demandes lutilisateur sont difficiles, les

erreurs motrices sont plus nombreuses. Cest le cas par exemple lorsque linteraction
demande dalterner diffrents moyens de dialogue : le clavier puis la souris, puis
nouveau le clavier.
Minimiser les saisies clavier.

Rduire les erreurs motrices consiste principalement faciliter les mouvements de

la main, or la manipulation du clavier ncessite une certaine dextrit, ce qui nest
pas le cas de la souris. Qui plus est, si le clavier doit tre employ, son utilisation sera
simplifie en vitant lutilisation des touches dites de modification, telles que Ctrl,
Alt ou Shift.
Homogniser les squences de manipulation
Le principe dhomognit, cest--dire la cohrence globale dans la prsentation

des contenus et dans la logique dutilisation, permet galement de faciliter les inter-
actions de lutilisateur avec linterface. En effet, il est prfrable que les commandes
soient toujours ordonnes de la mme manire et au mme emplacement, de manire
viter des erreurs de slection.
Pour cette raison, lorsque certaines commandes ne sont pas applicables, il est
prfrable de les rendre inactives mais prsentes sur linterface, plutt que de les retirer
en rordonnant lensemble, crant ainsi une incohrence par rapport la prsentation
habituelle.
5.3.2 Messages derreur

Linterface peut rpondre de diffrentes manires une erreur de lutilisateur. Cette
rponse doit tre adapte au type derreur.
Premier cas de figure, linterface bloque lutilisateur et lempche de continuer tant
quil na pas corrig lerreur. Cest le cas des fentres modales, qui empchent de
revenir sur lcran en arrire-plan. Ce mode de rponse convient aux erreurs graves
pour lesquelles il y a un risque daction dfinitive telle quune destruction de donnes.
Il ne doit tre utilis qu titre exceptionnel, car il nuit au rythme du dialogue.
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 cela 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 la figure 5.42.
Figure 5.42 Ce message est, pour le moins, peu coopratif...
Lerreur est un vnement stressant pour lutilisateur qui perd alors le contrle du
logiciel et se retrouve en situation imprvue. Il sinterroge sur la faon de corriger
lerreur pour reprendre le fil normal de la tche. La formulation du message doit
donc tre soigneusement conue afin de laider revenir l o il 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.
Figure 5.43 Des messages coopratifs permettent lutilisateur

de comprendre le fonctionnement du logiciel.
Le message doit fournir une description du problme.
Une description du problme et de ltat du systme qui en rsulte aide lutilisateur

mieux comprendre la cause de son erreur.
Figure 5.44 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.
Figure 5.45 Un message clair, non ambigu, est compris immdiatement.
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.
Figure 5.46 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 !
Figure 5.47 Un message accusateur ne fait quaccrotre le stress de 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.
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.
Figure 5.48 Le logiciel reste une machine.
5.3.3 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 suivante, la demande de suppression dun fichier doit tre
confirme par une action de lutilisateur sur le bouton Supprimer.
Il est essentiel dviter quune commande importante ne soit dclenche par
inattention. Cependant, une fentre de confirmation est parfois perue comme une
gne par les utilisateurs expriments pour lesquels il est prfrable doffrir la possibilit
de dsactiver cette protection.
Rendre inactives les commandes indisponibles.

Figure 5.49 Le message sert prvenir un effacement involontaire.
Le guidage contribue galement la prvention des erreurs par une prsentation

distinctive des commandes non autorises. Des erreurs sont vites lorsquon empche
lutilisateur dexcuter les actions non valides.
Rendre actifs les champs en fonction du contexte.
Certains choix vont rendre caduque lutilisation dautres composants de linterface.

Afin dviter les erreurs de saisie, il est recommand de ne les activer que lorsque le
contexte sy prte. Par exemple, dans la fentre suivante, rien nindique dans quel cas
remplir le champ Rduction 3me ge ?
Figure 5.50 Le champ Rduction 3me ge est ambigu : dans quel cas doit-il tre rempli ? Un
texte lve le risque derreur mais il surcharge la fentre
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.
La solution consiste nafficher le champ Rduction 3me ge que dans le cas o
la saisie est requise. Le risque derreur est limin puisque la saisie ne sera possible que
lorsque la valeur du champ Age est suprieure 70.
Figure 5.51 Le champ ne saffiche que sil est ncessaire de le remplir.
Tester pour identifier les erreurs.
Les erreurs, dintention en particulier, demeurent difficiles prvoir ; il est essentiel

deffectuer des tests dutilisabilit pour les identifier avant la mise en production de
lapplication. En gnral, les erreurs les plus frquentes apparaissent ds les premiers
tests dutilisabilit.
5.3.4 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. Nous reviendrons sur ce point dans le chapitre
suivant propos des formulaires.
Signaler lerreur au plus tt.
Nanmoins, lors dune saisie, le message derreur ne doit pas bloquer lutilisateur.
Par ailleurs, la description de lerreur doit tre la plus brve possible et ne pas ncessiter
la recherche dinformations complmentaires.
Placer le message l o lutilisateur est cens regarder lorsque lerreur se produit.
Le message doit apparatre dans le champ de vision de lutilisateur, cest--dire

dans la fentre courante ou prs du champ erron.
Fournir la possibilit de modifier facilement les donnes saisies, une fois lerreur signale.
Afin de minimiser linterruption cause par lerreur, lutilisateur doit pouvoir

modifier rapidement et facilement les donnes errones. Lerreur est facile corriger
lorsquon localise rapidement le composant concern, par une mise en vidence

adapte, et quil est possible dy accder pour le modifier.
Permettre le retour en arrire.
La facult de dfaire ou dannuler amliore la performance de lutilisateur, car il

travaille plus rapidement, craignant moins les erreurs.
Autoriser les interruptions pour les commandes longues.
Lactivation involontaire dune commande est un cas derreur frquent, qui devient
particulirement gnant lorsque lopration dure longtemps. Cest pourquoi, il est
recommand de prvoir un moyen dinterrompre les commandes en cours.
5.4 AIDE ET ASSISTANCE LUTILISATEUR

Laide est souvent demande par les utilisateurs qui la considrent comme utile et
pratique. Elle nest gnralement utilise quen cas de problme et souvent dans un
contexte durgence. Dans les faits, elle est peu employe. Car elle est gnralement
crite dans une optique de formation et rpond rarement lerreur rencontre de
faon immdiate.
Permettre laccs laide en ligne.
Pour rpondre efficacement aux diffrents problmes que peut rencontrer lutilisa-
teur, laide doit respecter deux principes de base : tre en adquation avec le mtier de
lutilisateur et sinscrire dans une logique de formation.
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. Il est indispensable que laide rponde au contexte de la tche en cours.
Laide doit participer lapprentissage du logiciel.
Le comportement du logiciel doit tre dcrit prcisment afin daider lutilisateur

dans son apprentissage et lui permettre de se construire un modle correct du
Qui plus est, des lments propres au mtier peuvent complter laide afin de
prciser le pourquoi de certaines fonctionnalits. Lutilisateur peut tre galement
invit participer, afin de faciliter la mmorisation par une mise en uvre pratique.
5.4 Aide et assistance lutilisateur 171
5.4.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, aux questions Quest-ce que ?
et Comment faire pour ? . Cependant, lexploration dans ce type daide ncessite
dtre elle-mme guide pour que lutilisateur trouve rapidement les mots-cls lui
permettant de cibler les solutions proposes. Elle doit tre suffisamment dtaille pour
que lutilisateur puisse y retrouver le mme contexte que la tche quil est en train de
raliser.
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 termes de contenu. Il nest donc pas toujours adapt aux
problmes spcifiques.
On voit depuis quelque temps une aide directe par un conseiller dans une fentre de
discussion. Lavantage de ce type daide est de personnaliser la rponse pour lutilisateur,
sans quil ait la chercher lui-mme. Nanmoins, quand ce mode de communication
est disponible, il faut que lchange avec le conseiller dbute rapidement.
5.4.2 Lutilisabilit de laide

La recherche dans laide en ligne est une tche supplmentaire pour lutilisateur, il
importe quelle soit la plus simple possible. Elle doit aussi minimiser linterruption de
la tche en cours solutionner car laccs laide modifie la continuit de lactivit
de lutilisateur.
Fournir un accs rapide laide en ligne.
Afin de rduire 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 de fonction, par exemple, la touche F1, facile daccs dans le coin
suprieur gauche du clavier.
Dcrire lutilisation du systme en sappuyant sur le vocabulaire du mtier de lutilisateur.
Lorsque le vocabulaire est le mme, le transfert de connaissances entre le mtier

et le logiciel est plus simple et les risques dambigut sont moins nombreux.
Permettre lexploration.
La rubrique Voir aussi incite lutilisateur explorer laide en ligne et lui permet
ainsi dtablir des liens entre les diffrentes commandes.
Les titres doivent tre explicites.
Ils aident lutilisateur se reprer dans laide en ligne et permettent den structurer
le contenu.
Illustrer les descriptions avec des exemples.
Montrer comment se servir du systme est gnralement plus efficace que de

longues explications. Ainsi, un diagramme explique mieux quun texte la navigation
dans le logiciel. Par exemple, pour les barres de menu, une vue de lintgralit des
commandes accessibles par la barre de menu aide la mmorisation.
Figure 5.52 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.
5.4.3 Rdiger une aide efficace

Les rgles de rdaction, nonces ci-aprs, visent rdiger des documents clairs et
faciles comprendre.
Rgles de rdaction simple

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 80 caractres.
5.4 Aide et assistance lutilisateur 173
viter les lignes trop courtes (moins de 26 caractres).

viter les coupures de mot.
Ne pas justifier droite. Ce type de justification augmente le temps de lecture si
lespacement nest pas rgulier.
Espacer les lignes de la hauteur dun caractre, cest--dire en double interligne .
titre dexemple, ces rgles ont t appliques dans le texte suivant.
Figure 5.53 Une formulation claire et simple facilite la comprhension.
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. Si le texte ne prsente pas assez tt le choix, lutilisateur
risque de se tromper car il ne le lit pas la phrase jusquau bout.
Figure 5.54 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.
Figure 5.55 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.
Figure 5.56 Lorsque chaque action est exprime dans une seule phrase,
le texte est plus simple comprendre.
Pour conclure, rappelons que laide en ligne permet lutilisateur de comprendre

le fonctionnement du logiciel, mais elle ne le rend pas facile utiliser...
Laide nen est pas une.
Help doesnt [Nielsen 93]. Ce nest pas laide en ligne qui aide lutilisateur, ce sont
les diffrents moyens mis en uvre dans linterface afin de le guider et lui permettre
dviter les erreurs. Laide en ligne ne rsout pas les problmes dutilisabilit. Cest par
une conception de linterface guide par lutilisation que lon vite les problmes et
non par laide en ligne qui a uniquement pour rle dexpliquer le fonctionnement du
logiciel.
5.5 Cas pratique : BCA Expertise, impliquer les utilisateurs pour garantir la qualit de lexpertise 175
5.5 CAS PRATIQUE : BCA EXPERTISE, IMPLIQUER LES

UTILISATEURS POUR GARANTIR LA QUALIT DE
LEXPERTISE
5.5.1 Automatiser lanalyse des devis de rparation
BCA Expertise est le leader de lexpertise automobile sur lensemble du territoire
franais. Ses principaux clients sont les groupes dassurance : Axa, Covea AIS (MAAF,
MMA, GMF), Generali, Pacifica (Crdit Agricole), Groupama-GAN et Aviva.
BCA Expertise ralise des oprations dexpertise via la photo expertise depuis
1995. Dans ce cadre, lexpert BCA sollicite du rparateur lenvoi dun dossier EAD
constitu de photos du vhicule et dun devis de la rparation. Le devis propos par le
rparateur tait ensuite vrifi manuellement par un expert BCA Expertise.
En 2010, BCA Expertise a conu un systme base de rgles mtier permettant
danalyser automatiquement les devis afin de faciliter la tche de lexpert. Lobjectif
est de permettre lexpert de traiter les dossiers plus prcisment et plus efficacement.
Dans le cadre de ce projet, BCA Expertise nous demande de laccompagner dans la
5.5.2 Une maquette interactive pour visualiser concrtement le rendu final

Cette nouvelle application est au cur du systme dinformation BCA Expertise. Son
rle est essentiel ; la lecture du devis, lexpert dcide de valider le chiffrage et donne
accord la socit dassurances de rgler le rparateur sur ces bases. Lergonomie de
linterface ne doit donc pas permettre la moindre ambigut sur linterprtation des
informations affiches.
Suite un premier audit de lapplication existante, nous avons conu de manire
itrative les crans en collaboration avec les utilisateurs finaux venant des diffrentes
agences BCA Expertise.
La maquette interactive que nous avons ralise a permis de valider les diff-
rents cas de figure envisageables lors de lanalyse dun devis rparateur. Les experts
prsents dans le groupe de travail ont chang avec lquipe de matrise douvrage
sur les fonctionnalits proposes. Ils ont vrifi que les informations affiches leur
permettaient effectivement de prendre rapidement une dcision. Ces changes ont
permis doptimiser les crans, voire, dans certains cas, damender les spcifications
fonctionnelles.
Figure 5.57 Maquette fil de fer ralise lors des ateliers de travail
5.5.3 Des crans conus pour faciliter lanalyse par lexpert

La tonalit bleu clair choisie pour habiller linterface vise transcrire une atmosphre
de calme afin de conforter lexpert dans son analyse. Les couleurs pastel vont, elles
aussi, concourir rendre lensemble la fois doux et convivial.
Le systme donglets ainsi que la zone dactions principales (en bas) se dtachent
par un fond bleu plus profond. Les boutons dactions secondaires sont traits galement
en bleu de manire se distinguer rapidement. Les zones de travail, en bleu lger,
sont poses sur un arrire-plan blanc, contribuant structurer lensemble. Le design
graphique reflte un sentiment de modernit et de professionnalisme.
5.5 Cas pratique : BCA Expertise, impliquer les utilisateurs pour garantir la qualit de lexpertise 177
Figure 5.58 Design graphique de lapplication
5.5.4 Deux fois moins de temps pour traiter un dossier

Le nouveau systme sera oprationnel en 2012. Il sera utilis par les gestionnaires et
les experts BCA Expertise, soit environ 1 000 personnes rparties sur lensemble du
territoire franais.
Lapplication doit permettre de traiter environ 50 000 rapports dexpertise par an.
Les premires estimations montrent un gain de 50 % dans le temps de traitement dun
dossier. Cette application permettra donc BCA Expertise de doubler sa capacit de
traitement.
Les besoins et contraintes des clients internes (utilisateurs) sont au cur de nos
proccupations dans la conception de nos outils.
La dmarche ergonomique est clairement btie sur le recensement des besoins

fonctionnels et utilisateurs. Une fois ces besoins dfinis, nous travaillons alors au
maquettage en plusieurs tapes. Dabord un maquettage fil de fer, lapplication est
alors prsente dans sa plus simple dfinition afin de valider les fonctionnalits. Une fois
cette maquette valide, une figuration plus design est dfinie et de nouveau soumise
la validation des utilisateurs. Une fois les remarques prises en compte, loutil est valid et
la mise en uvre peut tre enclenche.
Les outils sont au cur de notre quotidien et il est important, pour le bien-tre des
utilisateurs, que les interfaces soient conviviales, attractives et interactives. La dmarche
ergonomique nous a apport une aide prcieuse et les consultants ont fait preuve dune
grande adaptabilit et ractivit face aux exigences de nos utilisateurs.
Gildas VILLEDIEU
Responsable Dpartement Matrise dOuvrage BCA Expertise
6
Prsenter linformation
Un design est intuitif quand les gens savent clairement ce quils peuvent faire et quils nont pas
suivre une formation pour y arriver... Lorsque la conception nest pas intuitive, notre attention
sloigne de ce que nous essayons dobtenir, pour comprendre comment linterface va nous
permettre dobtenir ce que nous voulons.
Jared Spool1 , What Makes a Design Seem Intuitive, 2009.
6.1 Perception des informations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

6.2 Techniques de mise en vidence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
6.3 La couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
6.4 Les icnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
6.5 Le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
6.6 Prsentation des produits pour le-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
6.7 Cas pratique : une dmarche ergonomique pour concevoir un nouveau terminal de vente 208
6.1 PERCEPTION DES INFORMATIONS

6.1.1 Les lois de la perception
Au dbut du XXe sicle, les processus cognitifs de la vision ont t tudis dans le
cadre dune thorie plus large appele Thorie de la Forme (Gestalttheorie). Partant
du principe que le systme visuel peroit le tout avant ses parties, les thoriciens de
1. Jared M. Spool est le fondateur dUser Interface Engineering (UIE). Il est expert en conception des
interfaces utilisateur et spcialiste des techniques de maquettage de basse fidlit.
180 Chapitre 6. Prsenter linformation
la forme, Wertheimer, Khler et Koffka (1935), ont mis en vidence un ensemble de

lois qui rgissent le fonctionnement perceptif chez ltre humain.
Ces lois de la perception nous fournissent des rgles pour agencer le contenu de
linterface, ce qui va conditionner sa lisibilit et sa comprhension pour lutilisateur.
Nous retiendrons ici les trois principales lois : la loi de proximit, la loi de similitude
et la loi de bonne continuit (voir aussi [Cohen 00 et Casanova 01]).
Figure 6.1 Les lois de la perception visuelle permettent de mettre en vidence la structure de
linformation et ainsi den faciliter la comprhension
Regrouper visuellement les informations semblables.
La loi de proximit conduit la vision regrouper les objets qui sont proches les
uns des autres. Des zones sont mises en vidence par rapport au reste de la page en les
dlimitant par un trait, un espacement ou une mme couleur darrire-plan.
La loi de similitude incite lil runir des entits qui se ressemblent par la forme,
la couleur ou la taille. On attribue une mme signification aux donnes prsentes de
la mme manire. Une typographie semblable (mme police de caractres ou mme
couleur) permet de montrer des ressemblances entre des informations situes des
emplacements diffrents sur linterface.
La loi de bonne continuit conduit la vision rassembler des lments qui
partagent le mme alignement.
6.1 Perception des informations 181
Appliques au web, les lois de la perception visuelle vont guider lorganisation de

la page et permettre linternaute de comprendre plus efficacement le contenu.
Figure 6.2 Lil reconnat ici huit produits (loi de proximit) dont il peut rapidement identifier
la couverture, le titre, le type ainsi que le prix (loi de similitude). Lorganisation visuelle permet une
lecture rapide, laissant linternaute filtrer les informations qui lintressent (les prix ou les titres, par
exemple).
6.1.2 Hirarchie visuelle

Sur le web comme sur le logiciel, lorganisation de linterface vise rendre perceptible
la structure des informations qui la composent. Lobjectif est de montrer les liens qui
existent entre les diffrents lments afin de crer une hirarchie visuelle vidente
[Krug 01].
Plus llment est important, plus il doit se voir.
Cest une rgle de bon sens quil nest pas inutile de rappeler : les informations
importantes doivent tre mises en vidence. Pour cela, diffrents artifices graphiques
sont la disposition des concepteurs : la taille, la graisse des caractres (paisseur
du trait), la couleur de lobjet en lui-mme, voire aussi la couleur de larrire-plan.
Naturellement, lemplacement joue aussi : plus lobjet est en haut et au centre de 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 pour des documents
textuels en crivant le titre au-dessus du paragraphe.
Figure 6.3 Limbrication visuelle fait ressortir les diffrentes zones de la page
et permet de distinguer la vocation des diffrentes parties de linterface.
6.2 TECHNIQUES DE MISE EN VIDENCE

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

maximum).
La signification des diffrents modes en sera plus facile mmoriser, linterface sera
plus facile apprendre.
6.2 Techniques de mise en vidence 183
Ne pas utiliser simultanment plusieurs moyens de mise en vidence sur le mme objet.
Lefficacit dune mise en vidence nest pas lie au nombre de moyens utiliss.
Qui plus est, la mise en vidence ne doit pas rentrer en conflit avec les autres artifices
graphiques utiliss sur linterface.
La mise en vidence dun objet ne doit pas affecter la perception de son tat.
En particulier, linversion de la couleur de fond et de la couleur de texte (inverse

vido) prsente linconvnient de modifier la couleur de base de lobjet. Linformation
associe cette couleur est alors perdue.
La mise en vidence dun objet doit sarrter ds la disparition de ltat correspondant ou

laction de lutilisateur.
La mise en vidence reflte ltat dun objet. Il convient cependant que lutilisateur
garde le contrle sur ce mode de prsentation. La possibilit doit lui tre offerte
dacquitter lvnement, signifiant quil la pris en compte.
Nous prsentons ci-aprs les diffrentes rgles suivre pour utiliser correctement
les techniques visant mettre en vidence un objet lcran.
6.2.1 Clignotement
Le systme visuel humain est particulirement sensible aux mouvements, en particulier
les cellules situes dans la zone priphrique de la rtine. Si lil fixe lcran et quun
objet bouge ou clignote dans une autre partie de lcran situe dans le champ visuel,
le cerveau dtecte le mouvement et incite le regard se tourner vers cette source
visuelle. En contrepartie, si plusieurs objets clignotent ou se dplacent, lil soblige
ne fixer que ceux qui ont un intrt pour lui. Il filtre les donnes traiter. Dans
ce cas, le mouvement nattire plus le regard. Cest pourquoi le clignotement doit rester
une exception. Il ne peut sappliquer qu un petit nombre dlments de lcran, de
prfrence proches les uns des autres.
Le clignotement sert attirer lattention sur un objet en priphrie du champ de vision.
Il sagit probablement du moyen de mise en vidence le plus efficace. Il convient

cependant de lutiliser avec parcimonie car il distrait lattention de lutilisateur et
provoque une fatigue visuelle. Il est donc prfrable demployer une frquence lente
(2 5 Hz) avec une dure daffichage suprieure celle deffacement.
Dans la mesure o le clignotement nuit la lisibilit, il est viter pour les textes.
Toutefois, lorsquil nest pas possible de faire autrement, un moyen de prserver la
lisibilit est de mettre en uvre un clignotement par changement de couleur, et non
par effacement temporaire.
Offrir la possibilit darrter le clignotement.
Dans la mesure o il est particulirement attractif, ce mode de mise en vidence

est aussi relativement dsagrable. Lutilisateur doit donc pouvoir le contrler.
6.2.2 Couleur de fond
Figure 6.4 Le changement de la couleur du fond met en vidence le texte.
Modifier la couleur de fond permet de faire ressortir une chane de caractres.
Ce mode de mise en vidence est assez efficace. Il prsente cependant linconv-

nient de rduire la lisibilit du texte en rduisant le contraste, en particulier lorsquun
fond sombre est employ. Il est donc viter pour des textes longs.
6.2.3 Graisse
La graisse permet de mettre en vidence une chane de caractres dans un texte.
Ce mode de mise en vidence est moins efficace que linversion vido pour une
utilisation similaire. Toutefois, il dnature beaucoup moins lapparence graphique du
texte. Il est souvent utilis dans les pages web, o il est trs efficace.
Comme toute technique de mise en vidence, il convient demployer la graisse
avec parcimonie, sinon elle perd son efficacit. Il est donc conseill de ne pas mettre en
gras plus de deux ou trois mots dans une mme phrase, voire dans un mme paragraphe.
Ils forment ainsi un tout dans le champ visuel : lil les lit ensemble. Au contraire,
plus de trois mots en gras dans une phrase ralentissent la lecture.
Figure 6.5 Le texte est mis en vidence par une graisse plus paisse.
6.2.4 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.
Figure 6.6 La taille permet de comparer rapidement les donnes du schma.
Il convient nanmoins de limiter le nombre de tailles possibles (5 au maximum)

afin quelles demeurent faciles diffrencier.
6.2.5 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 suivante, le texte de laide se distingue par
une police italique.
Figure 6.7 La police de caractre sert ici distinguer le rle jou

par chacun des textes de linterface.
6.2.6 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 pour reprsenter
les liens.
6.2.7 Forme
La forme permet didentifier rapidement le type dinformation.
La forme prsente lintrt de prvenir lutilisateur sur le type de donne affiche

avant quil ne la lise effectivement. Afin de faciliter la comprhension de ce codage,
il convient de dfinir des rgles pour lensemble de lapplication en associant une
forme prcise chaque type dinformation. En outre, linformation associe la forme
plutt qu la couleur uniquement, permet une comprhension moins ambigu pour
les daltoniens.
Figure 6.8 La forme est un moyen de mise en vidence assez riche

car elle apporte une connotation additionnelle.
6.2.8 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. Lutilisation de puces ou la constitution
de paragraphes distincts permettent cet effet de proximit.
Figure 6.9 Les puces servent non seulement mettre en vidence les informations
importantes mais aussi structurer la prsentation.
Figure 6.10 Des rapprochements mal adapts conduisent une mauvaise interprtation (a).
Une fois les informations correctement regroupes, la signification de la fentre apparat plus
clairement (b).
6.2.9 Encadrement
Lencadrement sert regrouper les donnes et focaliser le regard.
Lencadrement est utile pour renforcer la mise en vidence par proximit.
Figure 6.11 Lencadrement permet dassocier diffrentes donnes.
6.3 LA COULEUR
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. Qui plus est, le
graphisme de linterface vhicule les valeurs du produit, son identit visuelle.
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.
Choisir des couleurs rparties tout au long du spectre visible.
Lorsque la couleur est porteuse de sens, il est essentiel que lutilisateur puisse la
reconnatre, cest--dire la nommer sans ambigut. Pour cela, les exprimentations
ont montr que lorsque les couleurs sont rparties de faon homogne le long du
spectre visible, elles sont plus faciles distinguer les unes des autres.
Par ailleurs, il a galement t montr que les couleurs satures se reconnaissent
plus facilement que les autres. Cependant, ces couleurs sont manier avec prcaution
car elles posent des problmes de lisibilit pour le texte.
Utiliser la couleur et un autre moyen de mise en vidence pour afficher une information
importante.
Une couleur nest pas perue exactement de la mme manire par tout le monde.
Rappelons, ce sujet, que le daltonisme touche une proportion non ngligeable
6.3 La couleur 189
dhommes (8 %), tandis quon le rencontre moins frquemment dans la population

fminine (0,4 %). Il est donc prfrable de ne pas sappuyer uniquement sur la couleur
pour la mise en vidence.
Figure 6.12 La perception des couleurs est variable selon le type de daltonisme. Toutefois la
deuteranopie est le cas le plus frquent, cest--dire une confusion du vert et du rouge.
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.
6.3.1 Composantes de la couleur

Le codage Teinte, Saturation, Intensit (ou HSV pour Hue, Saturation and Value) reflte
la manire dont la couleur est perue par ltre humain. Il est pratique pour rgler les
couleurs de linterface :
Lindice de teinte correspond la longueur donde principale. Elle dtermine ce
que lon appelle couramment la couleur.
Le niveau de saturation reprsente la largeur de la bande de longueurs donde
occupe par la couleur : son spectre. La couleur est dite sature lorsque la
bande est troite. Au contraire, lorsque la bande est plus large, on parle de
couleur dsature : ce sont les pastels. La saturation minimale est obtenue
par un mlange quilibr de toutes les longueurs dondes. La couleur est dite
achromatique : cest le gris.
Finalement, lintensit est le degr de rflexion de la couleur, la faon dont

elle rflchit la lumire. Cette caractristique est galement appele clart. Elle
correspond un niveau de gris : de blanc noir.
Figure 6.13 Loutil Contrast Analyzer permet de mesurer le contraste entre la couleur du texte
et la couleur du fond de manire garantir la lisibilit des informations.
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.
6.3.2 Codage couleur

Le codage couleur, appel aussi code des couleurs, consiste associer chaque couleur
de linterface une signification prcise et uniforme pour lensemble de lapplication.
Dans une interface homme-machine, la couleur peut tre utilise de diverses
manires. Son principal intrt est de pouvoir ajouter de linformation un objet
sans en modifier la forme : la couleur permet dindiquer un tat. Elle sert galement
regrouper les informations de mme nature en les affichant de la mme couleur,
voire en utilisant des dgrads pour tablir une relation entre ces objets. Inversement,
la couleur va servir mettre en vidence lcran certains composants colors de
manire distinctive.
Il importe toutefois de minimiser la charge perceptive pour des raisons esthtiques
et defficacit du codage.
Minimiser le nombre de couleurs (7 2).

6.3 La couleur 191
Pour tre efficace, le codage couleur doit tre simple. Dans la mesure o chaque
couleur est porteuse dun sens, un trop grand nombre de couleurs conduit un codage
complexe difficile assimiler par lutilisateur. partir de 10 couleurs, la limite de la
mmoire court terme est atteinte et lon doit faire appel au souvenir, cest--dire la
mmoire long terme, pour se remmorer la signification des couleurs1.
Pour un objet donn, le nombre de couleurs utilises doit tre nettement infrieur au
nombre dlments qui le composent.
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.
Face une interface comportant de nombreuses zones de couleur diffrentes, le
travail de perception est plus difficile, on parle de surcharge visuelle. Qui plus est,
lorsque linterface est charge, lutilisateur peroit mal la hirarchie visuelle entre les
lments car aucune information nest vritablement mise en avant.
Figure 6.14 Sur ce site, la hirarchie visuelle ne fonctionne pas car linterface est trop charge
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 dj
1. Les notions de mmoire court terme et de mmoire long terme sont prsentes en annexe.
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 la figure 6.15.
Figure 6.15 Certains domaines utilisent un code des couleurs auquel il convient dtre vigilant
lors de la conception du logiciel.
En termes 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. Il faut particulirement redoubler de vigilance sur
ce point pour les sites vise internationale.
6.3.3 Choix des couleurs

Une fois le type de couleur choisi, le choix de la couleur consiste ajuster prcisment
chacune de ses composantes en teinte, saturation et intensit. Cette tche est un
compromis entre les rgles qui suivent.
Pour les grandes surfaces, utiliser des couleurs peu satures.

6.3 La couleur 193
Lemploi dune couleur vive sur une grande surface confre une certaine agressivit
linterface. Il est source de fatigue visuelle lors dune utilisation prolonge du logiciel.
Au contraire, les couleurs peu satures, pastel, sont plus reposantes.
Le choix de la couleur de fond dcran est dterminant pour le rendu visuel de
lensemble de linterface.
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. En effet, il facilite la
perception des diffrentes formes de codage utilises habituellement par les logiciels
(couleur, clignotement, etc.). Le gris garantit le fonctionnement dun grand nombre de
contrastes par rapport au fond de lcran. Les donnes affiches sur du gris apparaissent
beaucoup plus nettement que si un fond color est utilis. Dans une ambiance
lumineuse standard, 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. Une interface fond gris est bien
adapte pour une application professionnelle sur laquelle lutilisateur travaille de
nombreuses heures.
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.
Cest pourquoi, une interface fond gris est gnralement rehausse par des toniques
plus vives et plus chaudes.
Dans les autres cas, on prfrera un fond blanc gnralement mieux apprci des
utilisateurs.
6.3.4 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.
Il est essentiel de tester les couleurs de visu, car le rendu dpend non seulement du
type dcran utilis, mais aussi des conditions dclairement de la pice.
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 fatigues visuelles et nuisent, pour certaines dentre elles, la lisibilit,
en particulier le rouge et le bleu satur. Rappelons quil est aussi possible de jouer sur
la clart de la couleur pour faire ressortir lobjet.
6.4 LES 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.
Le principal intrt dune icne est probablement le fait dtre indpendante de
la langue. Il convient toutefois dtre vigilant la connotation culturelle associe
certains graphismes. Par exemple, un franais ne verra pas ncessairement une bote
aux lettres dans licne de la figure 6.16.
Figure 6.16 Cette icne est ambigu car, part les Amricains, rares sont ceux qui y voient
une bote aux lettres.
Il est donc indispensable de sassurer de la bonne comprhension des icnes avant

le dploiement dune application logicielle ou dun site web. Si linterprtation est
immdiate, les utilisateurs, mme peu frquents, ne seront pas freins par les icnes
proposes.
Une icne est susceptible de contenir plus dinformations que du texte sur une
mme surface. De plus, licne est interprte plus rapidement que du texte. Elle nest
gnralement pas lue, mais plutt reconnue, ce qui peut tre source derreur lorsque la
charge de travail est importante.
Lutilisation des icnes prsente des inconvnients, en particulier sur le plan de
lapprentissage du logiciel. Le problme le plus frquemment rencontr est celui de la
comprhension de licne. Par exemple, quelle est la signification de licne suivante ?
Figure 6.17 Que veut dire cette icne ? Modifier la couleur, Copier le format ou Effacer ?
Depuis les premires interfaces, de Xerox puis dApple, les utilisateurs prfrent
les interfaces icnes [Wiedenbeck 99]. Probablement parce quelles donnent un
aspect ludique lapplication qui, de ce fait, semble plus facile utiliser.
6.4 Les icnes 195
6.4.1 Construction des icnes

Diffrentes rgles, prsentes figure 6.18, vont permettre de construire des icnes. Le
plus souvent, la construction de licne sappuie sur une combinaison de ces rgles, le
principe directeur tant de minimiser leffort dinterprtation.
Figure 6.18 Rgles de construction des icnes.
Le lien entre licne et son rfrent doit tre le plus direct possible.
Pour faciliter la comprhension des icnes, il est prfrable dutiliser des picto-
grammes concrets et familiers, comme le montre lexemple suivant.
Figure 6.19 Reconnaissez-vous une horloge sur licne de gauche ?

Un graphisme familier facilite linterprtation de licne.
La clart de licne dpend de la rgle de construction employe. En gnral,

les icnes descriptives sont les plus faciles comprendre car elles illustrent le
fonctionnement de la commande. Au contraire, linterprtation est plus difficile pour
les icnes arbitraires . Plus le graphisme de licne est abstrait, plus il est difficile
interprter.
Figure 6.20 Difficult dinterprtation des icnes. Ici pour couper .
6.4.2 Recommandations
Dans la mesure du possible, utiliser des icnes standards.
Afin de faciliter la comprhension des icnes, il est prfrable de choisir des icnes
standards, cest--dire dont le graphisme est dj connu des utilisateurs notamment au
travers dautres applications.
Utiliser des icnes pour les objets et les commandes frquemment employs.
Lapprentissage des icnes est facilit par le fait que lutilisateur les utilise frquem-
ment.
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.
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].
6.5 Le texte 197
Figure 6.21 Laisser le choix de laffichage des icnes permet lutilisateur

de gagner de la place lcran en affichant uniquement les icnes.
6.5 LE TEXTE
6.5.1 Liste puces
La liste puces permet de structurer le texte. Le discours en est plus clair, plus facile
comprendre. Les informations tant mieux hirarchises, elles sont galement plus
simples mmoriser.
Figure 6.22 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.

Figure 6.23 Ici, les puces napportent rien la comprhension du texte

et surchargent inutilement la page.
Comme tout artifice typographique, une utilisation systmatique nuit son

efficacit. La liste puces nest utile que lorsque linformation peut tre prsente sous
forme dune srie ditems semblables. Si ce nest pas le cas, de simples paragraphes
suffisent.
viter les listes de plus de deux niveaux.
La liste structure dautant mieux le contenu quelle est simple. Au-del de

2 niveaux (primaire et secondaire), elle devient complexe et difficile interprter.
6.5.2 Polices de caractres

La police des caractres joue un rle important dans le design de linterface homme-
machine. Cependant, sa porte est moindre que la couleur car il est plus difficile de
diffrencier deux polices de caractres que deux couleurs.
Ne pas utiliser plus de 3 polices de caractres.
Lutilisation dun trop grand nombre de polices rend lcran confus ; la signaltique
de la typographie perd son efficacit. Inversement, un faible nombre de polices facilite
la mmorisation du codage utilis.
Le choix dune police de caractres sappuie sur deux critres : le rle de la police
doit tre clair pour lutilisateur et les caractres doivent tre lisibles sans effort.
Associer une police de caractres chaque type dobjet de linterface.

6.5 Le texte 199
Une utilisation cohrente des polices de caractres est un vecteur dharmonisation

de lapplication. la manire du codage couleur, il convient donc de dfinir une
utilisation prcise des polices de caractre.
Les textes doivent tre affichs en minuscules, la premire lettre tant en majuscule.
Un texte en casse mixte est lu plus rapidement : un gain de 13 % a t observ

par rapport au temps mis pour lire le mme texte en majuscules. En effet, les lettres
minuscules sont moins ambigus que les lettres majuscules. Linterprtation est donc
facilite et les risques de confusion sont minimiss.
Figure 6.24 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. Un gain de 13 % a t observ lorsquon recherche un mot dans un
texte et quil y apparat en majuscule.
En conclusion, les minuscules facilitent la lecture, tandis que les majuscules
facilitent la recherche.
Utiliser une police droite.
Les polices droites, sans srif, par exemple Arial, Helvetica ou Verdana, ne
comportent pas dempattement et prsentent une graisse dpaisseur constante sur
tout le caractre. Ces lettres simples au dessin homogne et contrast facilitent la
lecture des lments textuels lcran. 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. Toutefois, en environ-
nement sombre (ex : conduite de nuit), il est prfrable de proposer une interface
contraste ngatif lettres claires sur fond sombre, afin de limiter lblouissement
d lcran et permettre une accommodation rapide avec le manque de luminosit
environnant.
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 gnralement recommand dutiliser environ 80 caractres
par ligne.
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, comme le
prsente la figure 6.25.
Figure 6.25 Exigences de lisibilit des polices de caractres [ISO 9241-3].
Afin dappliquer ces rgles, on sappuiera sur une distance moyenne de lecture
lcran de 60 15 cm. Par ailleurs, la distance minimale gnralement considre est
de 40 cm, en de, la fatigue visuelle est trop importante [ISO 9241-5].
Utiliser une police de caractres dau moins 11 pixels de haut.
Dun ordinateur un autre, dun cran un autre, les dimensions des lettres
peuvent varier. Un texte dune hauteur minimale de 11 pixels garantit une bonne
lisibilit des caractres pour une majorit dutilisateurs.
6.6 Prsentation des produits pour le-commerce 201
Une taille plus petite est acceptable pour les boutons de navigation.
Du fait de leur position fixe, rcurrente sur toute linterface, et afin de gagner de
la place lcran, il est envisageable dutiliser un texte de plus petite taille pour les
boutons de navigation. Ce peut galement tre le cas pour les informations lgales ou
contractuelles dont lutilit pour la majorit des tches de lutilisateur est en gnral
assez faible.
6.6 PRSENTATION DES PRODUITS POUR

LE-COMMERCE
Sur un site de e-commerce, la prsentation des diffrents produits est importante car
elle conditionne lacte dachat. Nous dtaillons ci-dessous les diffrentes rgles suivre
pour concevoir la page produit dun site de e-commerce.
6.6.1 La page produit

Diffrentes tudes statistiques conduites sur les sites de e-commerce montrent que
la page de prsentation du produit est celle sur laquelle linternaute passe le plus
de son temps. Sur cette page, il dcide, ou non, dacheter le produit prsent. La
conception de la page produit est donc essentielle car elle dtermine en grande partie
la performance dun site de e-commerce.
Afficher graduellement les renseignements sur le produit.
Les informations principales doivent tre directement visibles louverture de la

page produit : description du produit, prix, disponibilit, etc. Afin de ne pas alourdir
visuellement la page, les informations secondaires : valuations clients, donnes
techniques, etc. sont accessibles dans un second temps par un lien plus de dtails .
Inciter lajout au panier par un call to action fort.
Le bouton dajout au panier doit apparatre de manire vidente, proximit du

visuel produit et dans la zone visible de lcran (idalement moins de 500 pixels du
haut de la page). Il ne faut surtout pas que linternaute doive faire dfiler lcran pour
trouver le bouton dachat.
Personnaliser la rdaction de la description du produit.
Donner une identit rdactionnelle aux descriptions des produits permet de se

dmarquer des sites concurrents. Cest ici que le site exprime sa vritable plus-value :
conseils, avantages-inconvnients, etc. Recopier la fiche constructeur donne lin-

ternaute limpression quil pourrait aussi bien acheter le mme produit sur un autre
site. Par ailleurs, en termes de rfrencement, si la description est la mme sur tous les
sites, le niveau (ranking) de la page sera plus faible.
Indiquer en dtail les informations de livraison.
Une fois sa dcision prise, lobjectif de linternaute est de se faire livrer larticle.
Afin de le rassurer, la page produit doit afficher clairement la disponibilit de larticle
(stock) ainsi que les dlais et tarifs de livraison.
Figure 6.26 Cette page produit est un bon exemple dquilibre visuel et de hirarchie de
linformation. Les lments importants sont rapidement visibles (prix, ajout au panier) et les
lments complmentaires sont prsents pour rpondre graduellement au besoin dinformation
(composition et soins, envoi, remboursement, guide des tailles)
Veiller spcifier exactement larticle choisi.

Linternaute doit gnralement fournir des informations complmentaires qui vont

permettre de prciser larticle quil souhaite (ex. : la taille ou la couleur dun vtement).
Ces informations doivent tre saisies avant de pouvoir ajouter au panier . Afin de
fluidifier le processus dachat, cette nouvelle interaction doit tre indique de manire
explicite. Deux solutions sont envisageables :
Griser le bouton dajout au panier, expliciter au survol quil faut remplir
certains champs et mettre en vidence les champs en question. Toutefois, cette
solution risque premire vue de faire penser que lajout au panier nest pas
possible car le bouton est dans ltat indisponible.
Figure 6.27 Au survol du bouton Ajouter au panier , un message rappelle linternaute

quil doit pralablement slectionner la pointure.
Laisser la fois la possibilit de cliquer et de remplir les champs. Puis, si

les champs nont pas t remplis au moment de lajout au panier, demander
linternaute de les remplir par une pop-in qui saffiche aprs le clic. Cette
seconde solution est prfrable.
Figure 6.28 La pop-in qui saffiche aprs le clic sur Ajouter au panier permet de rappeler
linternaute quil a oubli de prciser la taille de T-shirt souhait, sans linterrompre dans le
processus dachat.
viter de slectionner des valeurs par dfaut sur la page produit.

En rgle gnrale, il est prfrable que le client choisisse lui-mme les caract-
ristiques de larticle quil achte. Il vaut mieux ne pas slectionner par dfaut une
information qui peut tre ensuite modifie par lutilisateur. En effet, qui voudrait une
paire de chaussure taille 38 sil chausse du 45 ?
6.6.2 La zone Panier

La zone Panier permet lutilisateur daccder au contenu de son panier. Sur un site
de e-commerce, elle est accessible sur toutes les pages. En effet, cette zone va servir
afficher le contenu dtaill du panier pour ensuite effectuer la descente dachat
qui conduira au paiement. Elle doit donc tre visible immdiatement et comprise sans
quivoque.
La zone Panier est habituellement en haut droite de linterface.
Du fait de son rle transverse par rapport au reste du contenu du site, en particulier
par rapport au catalogue de produits, cette zone est considre comme un utilitaire
et se place en haut et droite de linterface.
La zone Panier doit indiquer au minimum le nombre de produits et le prix.
Selon le type de site et notamment le panier moyen, la zone Panier comporte

plus ou moins dinformation. Au minimum, le nombre de produits slectionns doit
apparatre. Le prix doit galement tre indiqu. Bien entendu, dans la mesure o
ladresse de livraison nest pas connue, il sagit dun prix hors livraison .
Lorsque le panier moyen comporte beaucoup de produits (dans lalimentation par
exemple), la zone Panier devient une sorte de mini-panier permettant de modifier
directement certains articles.
Figure 6.29 Sur ce supermarch en ligne, la zone Panier prsente lensemble des produits
achets et permet den modifier la quantit directement.
Confirmer lajout au panier (retour utilisateur).

Linterface doit confirmer lajout au panier afin de rassurer le client et lui viter
de ritrer inutilement lopration. Le retour peut tre ralis par une pop-up de
confirmation ou par lanimation de la zone Panier.
La pop-up de confirmation est plus explicite et ncessite une validation claire de la
part de linternaute pour la fermer. Ce mode de confirmation est prfrer lorsque les
achats sont peu nombreux. Au contraire, lorsque le panier moyen comporte beaucoup
darticles, on choisira plutt un changement de prsentation de la zone concerne.
Figure 6.30 Sur pixmania.com, une pop-up de confirmation saffiche quand un produit est
ajout au panier afin de valider mon panier ou continuer mes achats
Figure 6.31 Sur ce site, la zone Panier sagrandit pour confirmer lajout dun nouvel article.
Inciter le client dmarrer la descente dachat.
Lobjectif est de conduire lutilisateur initier le processus dachat qui le conduira

au paiement proprement dit. Toutefois, cette incitation doit tre cohrente avec le
panier moyen attendu.
Si le nombre darticles du panier moyen est faible, il est envisageable dafficher
directement la page Panier chaque achat, puis dinciter linternaute passer la
commande ou bien revenir au magasin .
Au contraire, si le panier moyen est volumineux (en nombre darticles, sites
dalimentation par exemple), un bouton terminer la commande saffiche dans
la zone Panier accessible sur toutes les pages du site. Dans ce cas, lincitation est moins
forte. Lutilisateur dcide lui-mme du moment o ses achats sont termins.
6.6.3 La page Panier

La page Panier est un rcapitulatif des diffrents articles slectionns par le client. Elle
lui permet de vrifier globalement lensemble de sa commande. Lobjectif est ici de le
rassurer sur le contenu de son panier et lui permettre ventuellement de le modifier.
Limiter le nombre de liens et dinteractions possibles.
Cette tape du parcours dachat est essentielle car cest ici que commence la
descente dachat qui va conduire le client au paiement. Plus quailleurs, il convient
donc de ne pas perdre lutilisateur et de limiter les alternatives de navigation.
Sur cette page, le client sattend :
Terminer sa commande
Modifier son panier
Continuer ses achats
ventuellement, il peut tre intressant de proposer ce stade des produits

complmentaires (cross-selling) si cela naffecte pas la clart de la page.
Afficher immdiatement les mises jour du panier.
Lorsque linternaute modifie un article sur la page panier (par exemple, un

changement de quantit), le rsultat sur le montant final de la commande doit
safficher immdiatement. Le bouton recalculer est gnralement mal compris
par les utilisateurs et donc source derreur.
viter limpasse du panier vide.

Figure 6.32 La page panier de Jules.fr est un bon exemple de panier clair, sans surcharge
visuelle.
Si le panier est vide, la page panier ne doit pas tre vide. Au contraire, elle doit
inciter le client retourner faire des achats sur le site. Dans ce cas, la page panier
explique que le panier ne contient aucun produit et offre des solutions de sortie :
arborescence du catalogue, produits consults, etc.
Figure 6.33 Lorsque le panier est vide, le site Threadless propose deux boutons
pour accder facilement au catalogue de produits.
6.7 CAS PRATIQUE : UNE DMARCHE ERGONOMIQUE

POUR CONCEVOIR UN NOUVEAU TERMINAL DE
VENTE
6.7.1 Un nouvel outil pour un nouveau mtier
Depuis quelques annes, le mtier du buraliste volue. Un magasin de dtail, bureau
de tabac ou marchand de journaux, nest plus simplement un lieu pour acheter des
produits sur tagre : cigarettes, presse, jeux, etc. Le commerant peut dsormais
vendre des produits dmatrialiss : cartes tlphoniques, timbres amendes, etc.
voire mme des prestations de services : places de spectacle, transfert dargent
ltranger, etc. Il se positionne comme un commerce de proximit dun nouveau type.
Ce changement profond a conduit Altadis Distribution France concevoir un
outil novateur destin accompagner les buralistes dans la mutation de leur mtier.
Afin de limiter les risques dans la phase dinnovation et de sassurer dune
adquation du nouvel outil avec la ralit quotidienne du mtier des buralistes, Altadis
Distribution France a souhait mettre en uvre une dmarche ergonomique pour
concevoir et spcifier son nouveau terminal de vente.
6.7.2 Une conception centre sur lusage

Nous avons tout dabord conduit une tude auprs dun panel reprsentatif de
dtaillants. Cette tude nous a permis dapprhender prcisment les contraintes
ergonomiques lies aux spcificits du mtier et aux diffrents profils utilisateurs.
Figure 6.34 Une analyse de la tche quotidienne des buralistes a permis de construire
linterface sur des bases concrtes
6.7 Cas pratique : une dmarche ergonomique pour concevoir un nouveau terminal de vente 209
6.7.3 Des ateliers de co-cration avec les quipes marketing

Sappuyant sur lexpression de besoin et lanalyse terrain effectue prcdemment,
nous avons conu des maquettes de linterface du nouveau terminal de vente. Des
ateliers de travail avec les quipes marketing et commerciales ont permis daffiner
progressivement lergonomie des maquettes pour optimiser les manipulations quoti-
diennes du buraliste.
Figure 6.35 Maquette fil de fer interactive ralise lissue des ateliers
6.7.4 Un design pur et novateur

Sur la base des maquettes, nous avons ralis les crans des nouveaux terminaux de
vente. Deux principes ont guid la conception de cette nouvelle interface : Intuitivit
et Productivit.
6.7.5 Une utilisation quotidienne intensive

Au final, le nouveau terminal de vente, qui a t lanc dbut 2011, sera utilis par
plus de 10 000 dtaillants dans toute la France. Il permet de raliser plusieurs millions
de transactions par jour. Les premiers tests pilotes conduits fin 2010 ont montr un
gain de productivit denviron 30 % et lambition de slargir dautres commerces de
proximit.
Figure 6.36 Interface de lapplication finale
Dans un secteur trs concurrentiel, notre analyse tait que dans le cadre de la
redfinition de notre produit, une rponse fonctionnelle seule ntait pas suffisante et,
quune ergonomie, un design soign et donnant envie nous fournirait un avantage
concurrentiel apprciable.
La collaboration avec une quipe ergonome-designer, dans le cadre dun dveloppement

Agile a t particulirement fluide, les exigences mtier ayant t enrichies au fil de
leau des exigences ergonomiques.
Le produit a t accueilli trs positivement par les buralistes, ravis de dcouvrir quils
peuvent prendre la main sur leur nouveau terminal en moins dun quart dheure !
Franois-Xavier TREUILLE
Responsable Marketing Altadis Distribution France
7
Mthodes de conception
des interfaces
Le seul vritable changement que nous pouvons faire au processus de dveloppement est de
concevoir compltement les produits interactifs avant de commencer toute programmation.
Alan Cooper1, About Face 2.0, juillet 2003.
7.1 Conception oriente utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

7.2 Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
7.3 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
7.4 valuation ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
7.5 Derniers conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
7.1 CONCEPTION ORIENTE UTILISATEUR

7.1.1 Les tapes de la conception
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.
1. Alan Cooper est linventeur du Visual Basic. Il est expert en conception logiciel oriente
utilisateur et concepteur de la mthode des Personas.
212 Chapitre 7. Mthodes de conception des interfaces
Figure 7.1 Les trois phases de la dmarche de conception oriente utilisateur.
On distingue habituellement trois phases dans la dmarche :

1. Phase danalyse
Cette premire tape vise prciser les attentes et le besoin des utilisateurs
finaux. Elle permet de prendre connaissance de la tche relle des utilisateurs et
danalyser le contexte dans lequel ils effectuent, ou vont effectuer, cette tche.
La phase danalyse permet de prciser lutilit recherche par les utilisateurs de
lapplication.
2. Phase de conception
Sur la base des lments recueillis dans la phase danalyse, une premire
maquette de linterface est conue. Cette maquette rsulte, dune part de
lanalyse de la tche des utilisateurs et des spcificits du contexte de travail,
et dautre part des principes dergonomie des interfaces (prsents dans les
chapitres prcdents) ainsi que des standards dinterface du domaine.
Cette premire maquette voluera ensuite en fonction des retours de la phase
dvaluation. Comme nous le verrons plus bas, il sagit dans un premier temps
dune bauche de linterface qui sera complte et raffine chaque itration.
3. Phase dvaluation
La phase dvaluation consiste mesurer lutilisabilit de lapplication. Pour
cela, diffrentes mthodes peuvent tre mises en uvre. La principale mthode,
le test utilisateur, consiste placer lutilisateur en situation dutilisation relle
du produit et observer les difficults rencontres.
Lvaluation permet didentifier les points amliorer sur la maquette et donc
de prparer la version suivante qui sera nouveau teste et ainsi de suite.
Lexprience montre que deux trois itrations suffisent en gnral pour
finaliser la conception de linterface.
Nous prsentons ci-aprs les principales mthodes qui peuvent tre mises en uvre
pendant les diffrentes tapes de la dmarche de conception oriente utilisateur.
Pour une description dtaille de ces mthodes, le lecteur pourra consulter lex-
cellent 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.
7.1 Conception oriente utilisateur 213
Quil sagisse de concevoir linterface dun logiciel, dun site web, dune application
tactile ou smartphone, la dmarche et les mthodes sont similaires. Pour un logiciel,
la phase danalyse permet didentifier les fonctionnalits mettre en uvre, tandis
quelle sert prciser les services attendus pour un site web. Dans chaque cas, la phase
danalyse vise dfinir lutilit du produit.
Ltape de conception permet ensuite de construire la structure de menus et le
dcoupage en fentres du logiciel, ou bien larborescence de pages du site web. Dans les
deux cas, les mthodes de maquettage permettent de raffiner progressivement la fidlit
du prototype et damliorer progressivement linterface par itrations successives.
7.1.2 Les affres de la conception web

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

est un travail dquipe faisant appel des comptences varies.
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.
7.1.3 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].
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 ou de meilleur logiciel. 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 ?
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, il importe de tester le plus rapidement possible avec les utilisateurs afin
de pouvoir appuyer les choix de conception sur des faits objectifs issus de lobservation
relle des utilisateurs du site.
Grce au test utilisateur, on quitte le domaine du subjectif. Le test permet
dappuyer les choix sur des lments concrets et objectifs. Il rationalise des runions
gnralement houleuses, souvent striles et gnratrices de conflits.
7.2 ANALYSE
Les mthodes prsentes ci-aprs sont les plus frquemment utilises pour prciser les
attentes des utilisateurs. Lenqute ou linterview utilisateur consiste questionner
individuellement un panel reprsentatif de la population vise par lapplication.
Au contraire, le focus group est une mthode danimation qui prsente lintrt de
7.2 Analyse 215
sappuyer sur la dynamique dun groupe dutilisateurs pour identifier limage collective
du produit. La modlisation de la tche permet, comme son nom lindique, de
construire une reprsentation de la manire dont lutilisateur ralise la tche pour
laquelle est conue lapplication, ce modle servira ensuite de support la conception
du systme de navigation.
7.2.1 Enqute/interviews utilisateur

Lenqute utilisateur vise recueillir les besoins et les attentes des utilisateurs vis--vis
du produit : les fonctionnalits qui leur seraient utiles, les services attendus, etc.
Lenqute est conduite sous forme dinterviews, cest--dire dentretien individuel
en face face . Elle permet dtablir les principes directeurs qui vont guider la
conception de linterface.
Le contenu de linterview proprement dit, les questions poses, dpendent troi-
tement de lobjectif poursuivi. Au dmarrage du projet, on sintresse aux attentes
des utilisateurs, leurs souhaits, aux informations quils aimeraient trouver sur lcran.
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.
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 profession-
nelles, en particulier les intranets ou les systmes dinformation, il peut tre intressant
de conduire les interviews directement sur le lieu de travail de lutilisateur afin
de mieux comprendre le contexte dans lequel lapplication est utilise. Toutefois,
disposer dun local calme et isol est prfrable car il permet de mener linterview sans
perturbation extrieure. Lorsque lactivit des utilisateurs est importante, par exemple
pour une application de support tlphonique, il est prfrable de scinder linterview
en deux tapes : dune part des observations directement sur le lieu de travail avec un
questionnement minimal, dautre part des interviews proprement dit lextrieur de
lespace de travail.
En phase danalyse, linterview est mene selon un mode semi-directif afin de
privilgier un certain degr de libert dans les rponses et de permettre une dmarche
exploratoire. Lenquteur pose donc des questions ouvertes en veillant ne pas
influencer le participant par son attitude, ses intonations o la manire dont la
question est formule.
Afin de ne pas biaiser linterview, il est important que lenquteur ne soit pas
impliqu dans le projet. Lentretien 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 ? 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 interviews
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
7.2.2 Focus group

Le focus group est une mthode denqute qui vise recueillir lopinion des utilisateurs
sur un produit ou un concept. Elle permet de mieux comprendre les motivations des
utilisateurs et limage quils se font du produit. Contrairement aux autres mthodes
prsentes, elle se pratique avec un groupe de participants : utilisateurs ou futurs
7.2 Analyse 217
utilisateurs de lapplication. Le focus group permet uniquement de recueillir des

lments subjectifs, et non des donnes objectives sur lusage de lapplication comme
le test utilisateur, par exemple.
Les points abords lors dun focus group dpendent des objectifs dfinis au pralable
avec lquipe projet, et des informations quelle souhaite recueillir. En fonction de ces
objectifs, la trame du focus group est dfinie sur la base des diffrents thmes (cinq ou
six en gnral) qui seront abords lors de la sance.
Chaque thme identifi fait lobjet soit dune discussion de groupe, soit dune
activit spcifique. Par exemple, pour identifier les motivations des utilisateurs ou les
faire ragir sur un nouveau design, on procdera par questionnement. Par contre, sil
sagit de concevoir une nouvelle interface, il peut tre intressant de demander aux
participants de raliser en petits groupes une maquette de linterface idale quils
prsenteront ensuite aux autres personnes.
Plusieurs focus groups peuvent tre conduits afin dobtenir diffrents points de vue
et de complter au fur et mesure les rsultats obtenus. Il est recommand de sappuyer
sur les rsultats des focus groups prcdents pour enrichir le contenu de la sance de
travail et viter de revenir sur des thmes dj abords.
Le panel utilisateur doit rpondre aux caractristiques du cur de cible. Si les
mmes thmes sont abords dune sance lautre, il est prfrable de mixer de
manire quilibre diffrents profils dans chaque groupe. Toutefois, selon les objectifs,
il peut aussi tre intressant de construire des focus groups autour dun mme profil,
qui sera, par exemple, le seul tre intress par la partie du site traite lors de la
sance. Ou bien, si la question est de dterminer les motivations de chaque segment
de la cible venir visiter le site, il est galement prfrable de construire des groupes
par segment.
En rgle gnrale, on conseille de ne pas dpasser sept utilisateurs par focus group.
Au-del certains utilisateurs, plus timides, risquent de ne pas sexprimer.
Animation du focus group

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

Analyse de la tche
Pour un site web, les interviews permettent de prciser lattente des utilisateurs, limage
quils se font de lentreprise et des services quelle propose. Pour une application
logicielle, les questions se concentrent gnralement sur les fonctionnalits attendues
et sur la faon dont les utilisateurs effectuent lactivit pour laquelle le logiciel est
dvelopp. La mthode employe pour cela est celle dite de lanalyse de la tche .
On procde pour cela en deux tapes. Tout dabord, des interviews permettent
didentifier la tche prvue ; ce qui doit tre fait. Cette premire analyse est ensuite
consolide par lobservation des utilisateurs sur leur lieu de travail afin de pouvoir
modliser lactivit effectivement ralise.
En recoupant les informations issues des interviews et celles observes lors de
lutilisation effective de lapplication, il est possible de construire un modle de
la tche identifiant les buts de lutilisateur et la manire dont il les atteint, ainsi
que les informations qui lui sont ncessaires pour cela. Les observations permettent
galement didentifier la faon dont lutilisateur traite les cas exceptionnels, voire les
urgences dans le cas des applications risque . De plus, lorsque le logiciel vient en
remplacement dun autre, il est intressant de profiter de ce premier contact avec les
utilisateurs pour collecter leur point de vue sur le systme quils utilisent actuellement.
Dans le cadre du dveloppement logiciel, lanalyse de la tche permet de structurer
linterface homme-machine. Le dcoupage en fentres drive en grande partie de
larchitecture de la tche et de la faon dont lutilisateur mne les diffrentes sous-
tches. La connaissance des informations ncessaires la ralisation de chaque tche
permet de dfinir le contenu de chaque fentre.
Analyse de la situation de travail et choix de conception

Lors des interviews utilisateurs, diffrents lments lis au contexte dutilisation de
lapplication vont tre recueillis afin dajuster le logiciel la population cible. En
particulier, on sintressera aux connaissances informatiques de lutilisateur et son
exprience du domaine applicatif, afin de dterminer le type de guidage que devra
offrir le logiciel. Les caractristiques de la tche ralise avec le logiciel entrent
galement en ligne de compte : Quelle est la frquence et la dure dutilisation du logiciel ?
La tche est-elle structure ? Une formation est-elle prvue ? Ces diffrents lments vont
contraindre la conception de linterface 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 privilgier
la rapidit dutilisation ou la facilit dapprentissage. La figure 7.3 donne des lments

de dcision.
Figure 7.3 Le choix de privilgier la rapidit dutilisation ou la facilit dapprentissage sappuie

sur les caractristiques de la situation de travail de lutilisateur.
Mthode des incidents critiques

Afin de se focaliser sur les points faibles et les points forts de lapplication existante,
il est intressant de questionner les utilisateurs sur les incidents quils ont rencontrs
lorsquils se sont servis du logiciel ou du site.
Cette mthode dite des incidents critiques prsente lintrt didentifier les
aspects du logiciel qui ont t source derreur, tout comme dailleurs les points jugs
positifs par les utilisateurs.
La dmarche consiste demander aux utilisateurs de dcrire une situation o ils se
souviennent avoir rencontr des problmes. Faisant appel la mmoire des utilisateurs,
la mthode des incidents critiques permet de se focaliser sur les problmes, et les
avantages, ressentis comme tels par les utilisateurs.
Lintrt de cette mthode est de sappuyer ainsi sur la description des faits rels
vcus par les utilisateurs. Toutefois dans la mesure o elle sappuie principalement
sur la faon dont les utilisateurs se souviennent des vnements, elle peut tre source
derreur ou de mauvaise interprtation.
Cest pourquoi, il est utile de disposer lors de lentretien dune version du logiciel
ou du site afin de pouvoir demander lutilisateur interview de simuler la situation
7.3 Conception 221
quil relate. Des enregistrements dcran seront alors utiles pour garder une trace des
problmes voqus.
La dmarche des incidents critiques permet de recueillir la fois les points
ngatifs quil faudra corriger et les points positifs quil faudra au contraire maintenir et
renforcer le cas chant.
7.3 CONCEPTION
Trois mthodes sont gnralement employes dans la phase de conception pour
laborer les spcifications de linterface qui serviront ensuite de base au dveloppement
de lapplication.
Les personas fournissent des archtypes dutilisateur qui vont guider la conception
dtaille de linterface. Le tri par carte permet dorganiser le contenu de lapplication.
Tandis que le maquettage vise construire linterface de manire itrative.
7.3.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-dessus, il nexiste pas dutilisateur moyen et il serait illusoire de vouloir se mettre la
place de lutilisateur, et pourtant cest ce que semble proposer la mthode des personas.
Cest dailleurs la raison pour laquelle elle est souvent mal comprise.
En fait, les personas sont construits sur la base dune tude prcise des objectifs et
des motivations de la population vise par lapplication. Cette tude ethnographique
va permettre dlaborer plusieurs archtypes dutilisateurs appels personas. Les perso-
nas ne correspondent pas des profils dutilisateur ou une segmentation marketing,
ils rsultent de la synthse des donnes collectes dans une phase de recherche initiale.
Les personas constituent donc une modlisation fiable des utilisateurs finaux car ils
sappuient sur des donnes concrtes issues dune tude prcise de la population cible.
Construire les personas partir de donnes comportementales concrtes.
La construction des personas se fait en deux tapes : dans un premier temps,

une srie dinterviews auprs dun panel dutilisateurs vise collecter un ensemble
de donnes constitutives des futurs personas, cest la phase dite de recherche
[Cooper 03], puis une seconde tape dagrgation de ces donnes permet de construire
les personas proprement dits.
La phase de recherche consiste conduire des entretiens auprs dun panel de six
huit utilisateurs du cur de cible. Les entretiens sont conduits selon la mthode de
lenqute contextuelle [Baccino 05]. Linterviewer se place en position dapprenti

et cherche comprendre comment lutilisateur ralise la tche sur lapplication
considre. Il alterne des observations afin de recueillir des informations sur le
contexte dans lequel la tche est ralise, avec des questions par lesquelles il cherche
identifier les objectifs et les motivations de lutilisateur.
Chaque interview dure 1 2 heures et se droule sur le lieu de travail de lutilisateur.
Dans le cadre de cette mthode, linterview vise dcouvrir les objectifs et les
motivations des utilisateurs de lapplication. Les donnes ethnographiques ainsi
recueillies serviront ensuite construire les personas.
Afin dorienter les entretiens, on formule dans un premier temps une hypothse
sur le profil des utilisateurs de lapplication, et par l mme sur les personas (persona
hypothesis [Cooper 03]). La phase de recherche est construite de manire recueillir
des donnes par rapport cet ensemble de caractristiques.
Les caractristiques des utilisateurs sont variables selon lapplication, mais elles
recouvrent en gnral les points suivants :
Le type dutilisateur : ge, genre, profession, catgorie socio-professionnelle, etc.
Leurs besoins ou leur motivation vis--vis de lapplication.
Les critres de choix.
La faon de se servir de lapplication.
Lexpertise du domaine.
Lhypothse du persona est labore en relation avec les quipes marketing sur la
base de la segmentation de la population cible et des spcificits de lapplication. Dans
cette tape, il est important didentifier des caractristiques clairement distinctes pour
lesquelles il est possible de dfinir une chelle de valeurs selon les utilisateurs.
Cet ensemble de caractristiques va servir de ligne directrice aux interviews.
Lobjectif est, au final, de pouvoir positionner chacune des personnes interviewes au
regard des diffrentes caractristiques tudies.
Une fois la phase de recherche termine, la construction de personas proprement
dite peut commencer. Il convient, dans un premier temps, de vrifier que lhypothse
des personas est valide au regard des donnes rcoltes. Si des lments comportemen-
taux nouveaux ou bien des caractristiques spcifiques des utilisateurs sont apparus
au cours des interviews, lensemble des caractristiques initiales est modifi et des
interviews complmentaires doivent ventuellement tre effectues afin dobtenir les
donnes manquantes.
Les personas sont un modle comportemental de lutilisateur final. Cest pourquoi,
les variables comportementales doivent tre isoles des autres variables analyses
lors des interviews, en particulier les variables dmographiques (ge, exprience du
domaine, lieu dhabitation, etc.).
Pour une application informatique, une vingtaine de variables comportementales
sont gnralement rcoltes [Cooper 03]. Le profil de chaque personne interviewe
est ensuite positionn au regard des variables comportementales.
7.3 Conception 223
Par exemple, pour un site de commerce en ligne, trois variables comportementales

ont t identifies dans le choix des internautes : les fonctionnalits offertes par le
produit, la rputation de la marque et le prix de larticle. Les diffrentes personnes
interviewes sont donc positionnes sur trois axes selon limportance de leurs critres
de choix respectifs.
Le tableau ainsi construit fait apparatre des groupes dutilisateurs prsentant des
comportements similaires. Un ensemble de personnes prsentant des ressemblances
sur six huit variables diffrentes constitue la base dun persona.
Dcrire les personas comme des tres humains.
Il reste ensuite synthtiser les personas identifis par une fiche sur laquelle sont
dcrites les principales variables comportementales qui les caractrisent. Les objectifs
des personas au regard de lapplication, tels quils ont t recueillis lors de lentretien,
sont galement prciss sur cette fiche. ce stade, A. Cooper insiste sur limportance
de donner un nom aux personas, afin de les humaniser et ainsi dattirer lempathie de
lquipe projet.
Pour illustrer et concrtiser le persona, une histoire dune ou deux pages est rdige
afin de dcrire, en langage simple, la faon dont le persona se sert du produit. Cette
description sappuie sur des lments concrets issus des interviews. Pour construire un
persona raliste, il est essentiel de sappuyer sur des faits rels et de ne rien inventer.
partir des caractristiques comportementales de chaque persona, des objectifs
dutilisation sont identifis. Ces objectifs sont un lment dterminant du caractre
du persona et donc de son attitude vis--vis de linterface. En effet, linterface sera
facile utiliser ds lors quelle rpond aux objectifs de lutilisateur.
titre dexemple, pour un site de commerce en ligne, lobjectif principal du
persona peut tre de trouver le produit qui propose le plus de fonctionnalit, tandis
quun autre recherchera le produit le moins cher.
Les diffrents personas identifis sont ensuite prioriss afin didentifier le persona
primaire qui va tre celui pour lequel linterface est conue, les autres personas sont
qualifis de secondaires.
Le persona primaire doit tre compltement satisfait par linterface propose sans
pour autant que cela soit en contradiction avec les attentes des autres personas. Au
contraire, les personas secondaires se satisferont de linterface bien quelle ne rponde
pas exactement leur attente.
Par exemple, pour un systme de navigation GPS, deux personas ont t identifis :
Le conducteur fru de technologie qui lutilisera galement pour couter des
MP3.
Le livreur professionnel, internaute occasionnel, qui sen sert pour son travail.
Le persona primaire est ici le livreur, car si linterface est adapte son profil, elle
sera galement utilisable par le conducteur technophile, tandis que linverse nest pas
vrai.
Il ne peut y avoir quun seul persona primaire par produit. Si ce nest pas le cas, il
faudra prvoir diffrentes interfaces adaptes chaque persona. Le persona primaire
va donc tre la cible principale du processus de conception.
Le persona sert dutilisateur de rfrence tout au long du projet.
Une fois construits, les personas servent de rfrence lquipe projet tout au long
de la conception de linterface. Appliquer la mthode des personas permet de changer
la vision de lquipe projet. Le but du projet nest plus de dfinir une interface qui
permette daccder un ensemble de fonctionnalits techniques, mais au contraire,
de permettre une personne (le persona) de se servir de ces fonctionnalits dans le
cadre de sa vie de tous les jours. chaque tape de la conception, les membres de
lquipe pourront se rfrer aux personas pour vrifier leurs hypothses. Les personas
permettent lquipe dvaluer linterface ralise en se mettant leur place, en
adoptant leur profil comportemental, et en analysant la faon dont ils percevraient et
utiliseraient linterface.
7.3.2 Tri par carte

Le tri par carte est une mthode conue pour construire larchitecture de linformation
dune application informatique : arborescence des rubriques dun site web, structure
des menus ou organisation des fonctionnalits dun logiciel.
Le tri par carte est mis en uvre au dbut de la phase de conception car il permet
de construire la structure de base sur laquelle sappuie linterface la fois en termes
dorganisation et de terminologie.
lidentique des autres mthodes prsentes dans ce chapitre, les utilisateurs
qui participent aux sances de tri par carte doivent constituer un panel reprsentatif
du cur de cible selon des critres propres lapplication, gnralement de nature
dmographique : ge, catgorie socioprofessionnelle, exprience du domaine, etc.
Tri individuel ou collectif

Le tri par carte peut tre conduit individuellement, le participant est seul avec
lanimateur, ou en groupe, plusieurs utilisateurs participent la sance sous la conduite
dun ergonome. Des tris individuels fournissent des rsultats plus riches et plus prcis
quun tri collectif qui peut tre biais par leffet de groupe. Cependant, en veillant
ce que tous les participants sexpriment naturellement, les rsultats dun tri en groupe
sont quasiment similaires ceux obtenus par une srie de tris individuels. Lintrt
de mener le tri en groupe est daboutir des rsultats plus rapidement car les sessions
sont moins nombreuses.
En individuel, huit dix sessions de tri sont habituellement ralises lorsque
le panel utilisateur prsente des profils relativement homognes. En choisissant la
mthode du tri collectif avec le mme panel, deux trois sessions suffiront. Notons
que pour une sance de tri collectif, il est prfrable que le groupe ne dpasse pas cinq
participants car au-del il est difficile tous de participer.
7.3 Conception 225
Prparation du tri par carte

Comme son nom lindique, le tri par carte requiert un ensemble de cartes reprsentant
les informations organiser. Chaque carte, de la taille dune grande carte de visite
environ, symbolise une information prsente dans le site ou un module fonctionnel
du logiciel.
Le titre de la carte est compos dun ou deux mots-cls dsignant linformation.
En se limitant un ou deux mots-cls, le titre sera plus rapide lire et plus simple
comprendre. Par ailleurs, sa taille tant limite, il pourra tre plus facilement utilis
dans les menus de navigation du site ou du logiciel.
Sous le titre, une ou deux phrases dcrivent plus en dtail linformation en question.
Ce texte descriptif doit tre rdig avec soin afin de ne pas induire de regroupement
lorsquil est lu par les participants. ventuellement, dans certains cas, il peut tre
intressant daccompagner le texte dune image, par exemple celle du produit concern
lorsquil sagit dun site de commerce.
Protocole
Un tri par carte est ralis en trois tapes : validation des libells, groupement et
dnomination des groupes.
Aprs avoir prsent les objectifs de la sance, lanimateur distribue alatoirement
les cartes sur la table. Il est parfois pratique de disposer les cartes en pile, en particulier
lorsque le nombre de cartes est important.
Dans un premier temps, il est demand aux participants de relire chacune des
cartes et de vrifier que le titre qui leur a t attribu leur parat cohrent avec le
contenu tel quil est prsent dans le texte descriptif situ en dessous. Si ce nest pas
le cas, les participants peuvent modifier le titre de la carte en employant un libell qui
leur semble mieux adapt.
Seconde tape, lanimateur demande aux participants de regrouper les cartes qui
se ressemblent . Il leur demande de construire des familles . Des cartes vierges sont
laisses disposition afin quventuellement certains contenus puissent tre dupliqus
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 ils donnent 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 uniquement sur une analyse
statistique. Les logiciels danalyse doivent aider lorganisation des informations, mais
larchitecture rsultant du tri doit galement sappuyer sur les observations ralises
lors des sances de tri. Cest pourquoi il est important dassister directement aux
sances de tri.
La mthode que nous venons de prsenter prcdemment est appele tri ouvert
ou tri montant car il part du contenu pour constituer des groupes. Le tri peut tre
conduit de manire inverse, en proposant une arborescence prdfinie, au sein de
laquelle les participants doivent placer les cartes prsentes. Cette seconde mthode
de tri est appele tri ferm . Elle est gnralement employe pour valider une
arborescence issue dun tri ouvert .
Il est intressant de combiner les techniques de tri ouvert et de tri ferm pour trier
progressivement un grand nombre de cartes. En effet, il est difficile de conduire une
sance de tri avec plus de 100 cartes. Dans ce cas, il est prfrable de procder par
tapes en construisant a priori des groupes de premier niveau qui seront valids par un
tri ferm, puis en conduisant des tris ouverts pour chacun des groupes, de manire
limiter le nombre de cartes traiter chaque fois.
Le tri par carte est une garantie de trouvabilit .
Le tri par carte est la mthode la plus efficace pour construire une organisation du
contenu de lapplication dans laquelle lutilisateur retrouve facilement les informations
quil cherche. Certains auteurs qualifient cette caractristique de trouvabilit
(traduction littrale de langlais : findability). Les tests que nous avons conduits sur des
sites construits partir dun tri par carte confirment cette qualit de la mthode. Les
sites ainsi raliss sont particulirement bien compris des utilisateurs et trs peu de
problmes de navigation sont observs.
Lintrt du tri par carte nest pas seulement didentifier la manire dont les utilisa-
teurs 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.
Exemple : la 1re version du site du conseil gnral du Territoire de Belfort
(figure 7.4) refltait la structure interne de linstitution, chaque comptence disposant
dune rubrique. Malheureusement, lusager y trouvait difficilement les informations
susceptibles de laider au quotidien. Le site a t rorganis dans sa 2nde version
(figure 7.5) par la mthode du tri par carte (prestation commune Axance-Usabilis).
Les diffrents services que peut rendre le conseil gnral aux familles du Territoire de
Belfort (le cur de cible) y sont mis en vidence.
7.3 Conception 227
Figure 7.4 La 1re version du site du conseil gnral du Territoire de Belfort refltait la structure
interne de linstitution, chaque comptence disposant dune rubrique.
Figure 7.5 Le site a t rorganis par la mthode du tri par carte.

Les diffrents services sont mis en vidence.
7.3.3 Maquettage/prototypage
Le maquettage/prototypage consiste concevoir des versions intermdiaires de lin-
terface avant de finaliser les spcifications qui serviront de base au dveloppement du
produit final. Chaque version intermdiaire est value du point de vue ergonomique
en sappuyant sur les diffrentes mthodes prsentes dans ce chapitre.
Le maquettage/prototypage sinscrit dans une dmarche conception itrative de
linterface. Il vise amliorer progressivement linterface en sappuyant sur lanalyse
du comportement des utilisateurs finaux lorsquils se servent de lapplication.
Dans le domaine des interfaces, les termes de maquette et de prototype sont
indiffremment employs pour dsigner des versions prliminaires de linterface. La
distinction entre les deux est lie leur degr de prennit. La maquette est une
version jetable de linterface, tandis que le prototype a t dvelopp sur la mme
base logicielle que le produit final. Le prototype est la premire version du logiciel
tandis que la maquette est gnralement statique et na pas t conue avec des outils
de dveloppement.
Conduire le prototypage sans impacter sur les dlais de dveloppement.
Les quipes de dveloppement sont gnralement peu disposes mettre en uvre

une phase de prototypage pour concevoir linterface, car elles craignent de devoir en
attendre la fin pour dmarrer effectivement le dveloppement, rallongeant dautant le
planning du projet.
Cette crainte est amplifie par le fait que la conception de linterface est gnrale-
ment 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.3 Conception 229
Figure 7.6 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. Ici la maquette du logiciel Prcovision ralise pour
Agrosud.
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
On distingue deux degrs de prototypage selon le niveau dinteractivit offert par le
prototype [Nielsen 93] :
Le prototype horizontal correspond uniquement la partie graphique de
linterface, cest une maquette statique.
Le prototype vertical met en uvre certaines des fonctionnalits de lapplication
afin que lutilisateur puisse raliser compltement une tche significative de
lapplication.
Le prototype horizontal prsente la surface de linterface. Les fonctionnalits de

lapplication ne sont pas implmentes, seuls les lments de linterface sont prsents :
boutons, menus, champs de saisie, etc.
Figure 7.7 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).
Les versions suivantes du prototype sont du type vertical . Un prototype vertical

correspond la mise en uvre dun ensemble cohrent de fonctionnalits, certaines
dentre elles pouvant tre simules par programme afin que lutilisateur puisse drouler
un scnario dutilisation typique du logiciel.
Les prototypes verticaux sont conus en parallle du dveloppement et intgrent
progressivement les nouvelles fonctionnalits de lapplication. Ils servent de support
des tests utilisateurs qui permettent damliorer graduellement linterface.
Sur la base des rsultats du test, des solutions sont labores et mises en uvre
dans la version suivante du prototype qui va faire lobjet dune nouvelle srie de tests,
et ainsi de suite. En rgle gnrale, les problmes dutilisabilit diminuant chaque
itration, trois phases de prototypage permettent de lever la plupart des problmes.
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.
7.3 Conception 231
Figure 7.8 Une maquette ralise partir des pistes graphiques permet de valider la
navigation dans linterface et la comprhension des intituls des principales rubriques (design final
du logiciel Prcovision ralis pour Agrosud).
Story-board
Les story-boards constituent une forme de maquettage intermdiaire entre le proto-
type 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 Thierry Baccino, les quipes de dvelop-
pement seront moins portes modifier un prototype finalis dans lequel elles ont
investi un effort de travail notable [Baccino 05]. 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, 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 inter-

faces. 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.
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.4 VALUATION ERGONOMIQUE

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

Laudit ergonomique consiste valuer les points forts et les points faibles dune
interface au regard des rgles dergonomie. Il permet de mettre en exergue rapidement
les difficults que rencontrera lutilisateur du produit, ainsi que les facilits offertes par
lapplication en termes dergonomie.
Laudit peut tre ralis diffrentes phases du projet. Lorsquil sagit de la refonte
dune application existante, laudit est gnralement la premire tape, voire llment
dclencheur, du projet. Pour la cration dune nouvelle application, laudit permet
dvaluer les premires maquettes ralises.
7.4 valuation ergonomique 233
Laudit peut porter sur le produit fini ou sur une maquette de linterface. Il est
parfois intressant dintroduire une phase daudit ergonomique chaque tape cl du
projet, par exemple pour un site web, la livraison des pistes graphiques puis pour
celles des story-boards et finalement la livraison de la maquette du site. Sur des
projets denvergure, laudit est parfois intgr la phase de recette des modules de
lapplication. Il permet de valider que lergonomie de chaque partie de lapplication
est cohrente avec celle de lensemble du systme.
Contrairement aux autres mthodes prsentes ici, laudit ergonomique ne fait
pas appel aux utilisateurs finaux. Il est ralis directement par un ou plusieurs experts
en ergonomie qui sappuient sur leur exprience et sur les principes dergonomie des
interfaces pour valuer lutilisabilit de lapplication.
Le temps de prparation tant moins important, cette mthode permet dobtenir
rapidement des rsultats. Par contre, elle se prive des retours concrets issus de
lexprience relle des utilisateurs finaux. En effet, certains problmes, lis au contexte
dutilisation de lapplication ou la tche ralise par les utilisateurs, sont plus difficiles
reprer par une analyse de lextrieur .
Pour pallier les limites du mode opratoire et la subjectivit de lvaluateur, il est
prconis que plusieurs experts conduisent laudit (trois cinq selon [Baccino 05]),
puis confrontent leurs analyses. Toutefois, ce type dvaluation croise est gnrale-
ment difficilement compatible avec le budget allou la phase daudit. Cest pourquoi
laudit est plus frquemment conduit par une seule personne et revu ensuite par un
autre expert du domaine. ventuellement, il peut tre intressant pour des applications
professionnelles en particulier que laudit soit revu par un expert du domaine applicatif
qui apportera un clairage mtier sur les points identifis lors de laudit.
Laudit ergonomique consiste passer en revue chacun des lments de linterface
afin de vrifier quils respectent un ensemble de rgles et de principes dergonomie. Il
existe des grilles gnriques dvaluation ergonomique, telle que la grille construite
sur la base de la norme ISO 9241 [Gediga 99].
Figure 7.9 Lors dune valuation par inspection, chaque lment de linterface
est analys au regard dune grille de critres ergonomiques.
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. Le dnominateur commun toutes les grilles dinspection est lensemble

des critres ergonomiques prsent en annexe [Scapin et Bastien 97].
Grille dinspection simplifie

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 ?
Une grille simplifie, du type de celle prsente dans lencart peut galement tre
employe [Nielsen 93].Elle 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 ergonomiques
pour en dduire les consquences du point de vue de lutilisateur. Les rsultats de
laudit sont ensuite prioriss au regard de leur impact pour lutilisateur final.
Un problme est qualifi de bloquant lorsquil empche lutilisateur de raliser la
tche ou quil le contraint abandonner. Il est gnant lorsquil est source dune perte
de temps et simplement ennuyant, ou mineur, sil sagit dun lment de confort qui
na pas dincidence sur la tche proprement dite. Dautres facteurs doivent galement
tre pris en compte dans la priorit que lon accorde aux diffrents problmes, en
particulier la frquence du dfaut : une difficult qui napparat quune seule fois est
moins gnante que si elle apparat sur toutes les fentres de lapplication.
Lobjectif de laudit est didentifier les problmes et danalyser leur nature. ce
stade, il ne sagit pas de proposer des solutions. ventuellement, des recommandations
gnrales pourront tre fournies, mais elles devront tre confrontes lapprciation
des utilisateurs et aux choix techniques du projet. Gnralement, la recherche de
solutions est initie lors de la prsentation des rsultats de laudit.
Laudit : premire tape dune dmarche ergonomique.

Laudit ergonomique est frquemment le point de dmarrage dune dmarche de

conception oriente utilisateur. Il permet didentifier les problmes dutilisabilit
et leur associer des niveaux de gravit. Laudit fournit des lments tangibles pour
prioriser les diffrentes phases de conception de linterface. Il permet de dgrossir
le travail de conception en identifiant les points cls de lapplication en termes
dergonomie. Il ne remplace pas un test utilisateur, mais lui permet dtre plus efficace,
car mieux prpar.
7.4.2 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.
Le prototype utilis ne ncessite pas un effort de dveloppement important. Il peut
tre statique. Une simple image de la page daccueil ou une maquette PowerPoint
suffisent.
Le test consiste prsenter le prototype lutilisateur et analyser la faon dont
il le comprend. Il est prfrable de sappuyer sur une prsentation lcran afin de
prendre en compte le rendu des couleurs, mais on peut aussi travailler sur du papier.
Sans que lutilisateur agisse sur la maquette, lobservateur lui demande dexpliquer
comment il interprte la page. Il identifie ainsi les informations les plus apparentes aux
yeux de lutilisateur. Il vrifie que les zones de navigation sont facilement reprables
et que le texte des liens est correctement compris.
Lors de ce premier test, il est galement possible dvaluer la faon dont lutilisateur
interprte les services proposs par le site en lui demandant dimaginer, en saidant du
prototype, la faon dont il raliserait une tche typique du site.
Questions poser lors du test de perception

Que permet de faire cette page ?
Que voit lutilisateur en premier ?
O se trouvent les liens et les boutons ?
Que signifient-ils ?
quoi servent ces boutons ?
Que va-t-il se passer quand on clique dessus ?
Pour une demande type, o doit aller lutilisateur ? Que pense-t-il trouver ensuite ?
Le test de perception permet principalement de vrifier que linternaute comprend

la faon dutiliser le site et quil interprte correctement le vocabulaire utilis. Il peut
tre aussi loccasion de valider la charte graphique auprs des utilisateurs en valuant
la faon dont ils peroivent le graphisme propos.
Check-list dvaluation graphique

Que ressent lutilisateur ?
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 ?
7.4.3 Test utilisateur

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

Une dfinition claire des objectifs du test et des hypothses qui en dcoulent.
Lidentification des mesures permettant de vrifier ces hypothses. Ces mesures
seront ralises dans le cadre dun scnario qui place lutilisateur en situation
cologique.
La participation dun panel dutilisateurs suffisamment reprsentatif de la
population vise la fois en nombre et en profil.
La mthode du test est directement drive des mthodes dexprimentation

scientifiques. Elle vise mettre en uvre un protocole permettant de prendre des
mesures objectives qui vont servir valider une ou plusieurs hypothses nonces
initialement.
La norme [ISO 9241-11] dfinit lutilisabilit de la manire suivante.
Un systme est utilisable lorsquil permet lutilisateur de raliser sa tche avec efficacit,
efficience et satisfaction dans le contexte dutilisation spcifi.
En dautres termes, on considre quune application est utilisable lorsque lutili-

sateur peut raliser sa tche (efficacit), quil consomme un minimum de ressources
pour le faire (efficience) et que le systme est agrable utiliser (satisfaction). Tester
lutilisabilit consiste donc valider ces trois critres :
Les objectifs viss par lutilisateur sont atteints (efficacit).
Les ressources ncessaires pour atteindre ces objectifs (efficience) sont mini-
males (pour cela on mesure gnralement le temps mis pour raliser la tche).
Le systme est agrable utiliser (satisfaction).
Objectifs et hypothses
Dans un premier temps, les objectifs du test sont dfinis avec lquipe projet en
fonction de la nature de linterface, du type de tche demande et des questions
souleves par lquipe en charge de la conception.
Pour chaque objectif, lvaluateur identifie une ou plusieurs hypothses associes.
Gnralement, lhypothse consiste supposer que linterface qui va tre teste rpond
correctement lobjectif.
Ensuite, il identifie et prpare les mesures qui vont permettre de vrifier cette hypo-
thse. Les mesures sont des questions ou des actions ralises par lutilisateur. Selon
la rponse ces questions ou selon la russite de laction identifie, lhypothse est
valide ou non. Sur une application, les mesures gnralement ralises concernent :
la russite de la tche, le temps de ralisation de la tche, le nombre derreur, le
nombre de clics, etc.
Figure 7.10 Les tapes du test utilisateur.
Figure 7.11 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 permette de vrifier les hypothses
identifies prcdemment. Ce scnario correspond gnralement une tche typique
de lutilisateur. Il intgrera galement des lments spcifiques afin de vrifier certains
points cls de linterface.
Le scnario de test prcise les fonctionnalits attendues sur le prototype, en
particulier les lments qui devront tre simuls dans la maquette afin den augmenter
le ralisme ou bien de placer lutilisateur dans certaines conditions dutilisation
particulire.
Figure 7.12 Scnario de test.
Panel utilisateur
En fonction des objectifs du test et des scnarios, une population dutilisateur cible est
identifie. Le panel utilisateur participant au test doit tre globalement reprsentatif
de la population cible. En gnral, il sagit des utilisateurs finaux de lapplication,
mais il peut tre intressant dintgrer galement dans le panel des personnes qui ne
connaissent pas lapplication (ils apporteront le point de vue des novices), voire des
utilisateurs dun produit concurrent.
J. Nielsen a montr que des tests mens avec cinq utilisateurs permettent de lever
au moins 80 % des problmes dutilisabilit [Nielsen 00]. En effet, il sagit dune
valuation qualitative et les problmes dutilisabilit viennent du logiciel et non des
utilisateurs.
Figure 7.13 Il suffit de cinq utilisateurs [par profil] pour dceler la plupart des problmes
dutilisabilit [Nielsen 00].
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 notre part, nous conseillons
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.
Figure 7.14 Exemple : constitution du panel utilisateur.
Script
Afin de conduire le test dans les mmes conditions avec tous les participants, un script
va servir de guide lanimateur. Le script lui sert aussi de support de notes. Il dfinit
prcisment la manire de conduire le test pour chaque participant. Le script prcise
galement les artifices employs par lanimateur pour placer lutilisateur dans une
situation raliste, comme des documents factices associs aux scnarios par exemple.
Le script indique les consignes et les tches qui sont demandes au participant ainsi
que les mesures raliser pour vrifier les hypothses initiales.
Le script indique en particulier les questions poses aux participants (mesures

subjectives) ainsi que les autres mesures effectues : russite de la tche, nombre
derreurs, temps de saisie, etc. Il doit permettre lobservateur de noter les rponses et
les donnes rcoltes directement.
Figure 7.15 Script de test.
ventuellement, certaines valeurs chiffres 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 une application grand
public, les tests sont rarement raliss au domicile des utilisateurs. 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 permettant aux membres de lquipe projet dassister au test.
Dans ce cas, il convient de prciser aux participants quils sont susceptibles dtre
observs. Par contre, il est dconseill de chercher conduire le test depuis cette pice.
Il est prfrable que lobservateur se tienne ct du participant, lgrement en retrait,
afin dtablir une relation de confiance qui favorisera les changes et lobservation.
Le test vise valuer le logiciel, pas lutilisateur.
Il arrive, lors du test, que lutilisateur nose pas dire quil ne russit pas se servir
du logiciel. Il prfre cacher ses difficults, rendant caduques les rsultats du test. Cest
pourquoi il est important de mettre en confiance lutilisateur au dbut de la sance en
lui rappelant que sil ne russit pas se servir de lapplication, cest quelle a t mal
conue. Lobjectif du test est didentifier les problmes dutilisabilit et non de mesurer
la capacit de lutilisateur se servir de lapplication.
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 lapplication. 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 de lapplication et non de lui.
Lobservateur doit rester le plus neutre possible afin de ne pas influencer les rponses
et les actions de lutilisateur. Il ne doit pas donner son point de vue, ni le laisser
paratre. Lobservateur doit au contraire sappliquer comprendre le point de vue de
lutilisateur.
Demander lutilisateur de verbaliser.
Pendant le test, afin de comprendre le comportement de lutilisateur, lanimateur

doit linciter verbaliser. Il pose des questions qui vont conduire le participant
liciter ses processus mentaux :
Que voulez-vous faire ? (objectifs)
Comment faites-vous cela ? (mode opratoire)
Que fait le logiciel ? Quattendiez-vous que le logiciel fasse ? (rponse attendue)
Pourquoi a-t-il fait cela ? Que veut dire ce message ? (comprhension)
Pour chaque participant, lanimateur conduit le test en suivant le script. Il note

les erreurs commises, les incomprhensions, les impasses, tout vnement qui montre
une difficult dans lutilisation du logiciel.
Ces diffrentes observations peuvent faire lobjet, une fois le test termin, dune
analyse chaud avec lutilisateur afin de mieux comprendre les causes des
problmes. Des solutions originales naissent parfois de ces changes.
Dure du test
Les tests durent 1 h 00 1 h 30 environ, selon le type dapplication. Au-del,
lattention du participant, tout comme celle de lanimateur, diminue et les changes
sont de moindre qualit.
Une mme sance comporte gnralement plusieurs scnarios. Chaque scnario
dure entre 15 et 30 minutes. Le premier scnario correspond une consigne simple
qui permet lutilisateur dapprhender le logiciel et de se mettre en confiance. Les
consignes suivantes sont gnralement plus complexes.
Tester la comprhension
Pour vrifier la comprhension dune page dun site web ou dune application, il est
intressant de conduire au cours du test des tests locaux de perception. Lorsquil arrive
sur la page ou la fentre en question, lutilisateur ne doit plus utiliser la souris et
lobservateur lui demande dexpliquer comment il interprte lcran : ce que signifient
les libells, les boutons, les liens, ce qui va se passer quand il va cliquer, etc.
Check-list de questions poser lors du test de perception

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 ?
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.
Tester la navigation
Lobservateur vrifie que linternaute se repre correctement dans lapplication, quil
trouve linformation quil cherche et quil suit le chemin le plus court pour y aller.
Le test sert vrifier que les boutons sont correctement positionns sur la page l
o lutilisateur les cherche. Lorsque certains boutons manquent, le test permet de les
identifier. Cest le cas des raccourcis qui acclrent la navigation entre certaines
pages de lapplication.
Lobservateur vrifie que les textes sont compris sans ambigut par linternaute,
en particulier le libell des boutons ou des liens. Il peut aussi valuer la facilit de
mmorisation de lapplication. 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.
Points vrifier lors du test dutilisabilit

Lutilisateur sait-il o il est ?
Trouve-t-il linformation quil cherche ?
Choisit-il le chemin le plus court pour trouver linformation ?
Lutilisateur voit-il les informations importantes ?
A-t-il repr o sont les boutons/liens ?
Les intituls des boutons/liens lui permettent-ils de deviner correctement le contenu
des pages ?
Certains boutons/liens manquent-ils lutilisateur ?
Des raccourcis permettraient-ils dacclrer la navigation ?
Lutilisateur connat-il les boutons/liens vers les principales pages ?
Comprend-t-il correctement le contenu des pages ?
Lutilisateur russit-il mmoriser correctement lorganisation du site ou de lapplica-
tion ?
De cette manire, les problmes dutilisabilit rencontrs par les utilisateurs sont
clairement mis en vidence. Lanalyse des causes de chacun dentre eux permet de
construire des pistes concrtes damlioration de lapplication.
Rsultats du test
Les diffrentes sances de test sont ensuite analyses. Lanalyse sappuie gnralement
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 et de proposer des solutions
pour les rsoudre.
Par ailleurs, le test peut galement permettre didentifier dautres pistes damliora-
tion 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 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.5 Derniers conseils 245
Figure 7.16 Les rsultats du test.
7.5 DERNIERS CONSEILS

Nous venons de le voir, la conception dune interface homme-machine ou dun site
web ne se rsume pas lapplication de rgles dergonomie, cest aussi un processus de
dveloppement sappuyant sur des itrations spcification-valuation. Cependant les
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.
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.
7.5 Derniers conseils 247
Jutilise les conseils et astuces prsents dans le livre Ergonomie des interfaces dans
mon travail quotidien de consultant E-Commerce.
Louvrage ma appris que lergonomie ce nest pas seulement du bon sens. Il ma

permis dacqurir les bases de lergonomie et dcouvrir la notion dutilisabilit que jai pu
appliquer aux interfaces des sites de vente en ligne pour lesquels jinterviens.
La problmatique ergonomique se pose pour toute interface mais elle peut coter trs
cher si celle-ci nest pas adapte, surtout pour un site E-Commerce !
Dans mon contexte, cest principalement le chapitre traitant de la navigation web qui ma
le plus apport dont jutilise toujours les fondements, plusieurs annes aprs lavoir lu.
Kevin CASTELAIN
Consultant e-commerce.
Ingnieur, spcialiste des interfaces homme-machine, jai travaill sur diffrents types de
systmes avec diffrents langages et diffrentes contraintes. Le fil conducteur a toujours
t pour moi de rpondre au mieux aux besoins des utilisateurs.
De ma propre exprience, il nest pas toujours vident pour un dveloppeur - mme
spcialis en ergonomie - danalyser au plus prs les besoins des utilisateurs. Lune
des principales raisons est que celui qui achte (la prestation informatique) nest pas
forcment celui qui utilise et celui qui vend nest pas forcment celui qui ralise. Par
ailleurs, lutilisation de mthodes agiles ou participatives, qui permettent dimpliquer les
utilisateurs finaux, est parfois proscrite.
Au final lutilisateur ne se manifeste, dans la plupart des cas quune fois le produit livr.
Il est donc essentiel, sans utilisateur "sous la main", davoir ce que lon pourrait appeler
"une conscience ergonomique".
Le plus sage est de respecter des critres ergonomiques (qui ont fait leur preuve). La
littrature est assez dense sur le sujet (me viennent lesprit les critres de Bastien/Scapin
ou encore les heuristiques de Nielsen).
Jai choisi "Ergonomie des interfaces" car il prsente de manire complte et illustre
la plupart des recommandations ergonomiques quil est ncessaire davoir lesprit. Je
peux donc my rfrer volont. Je sais galement quil me sera utile dans une utilisation
plus pousse de mthodes ergonomiques. Cest un point dentre la fois accessible et
complet.
Olivier COSQUER
Ingnieur tudes et Dveloppement, Spcialiste IHM.
Conclusion
En guise de conclusion, voici, telle que la raconte Dan Norman [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.
250 Ergonomie des interfaces
De son ct, mile Berliner cre en 1890 la Victor Talking Machine Company. Il
produit des disques prenregistrs et la machine pour les couter : le gramophone. Le
gramophone deviendra le Victrola en 1907, un terme qui dsignera pendant plus de
50 ans les tourne-disques, Outre-Atlantique.
Effectivement, les disques Victor se vendent beaucoup mieux que les phonographes
dEdison, tout simplement parce que les consommateurs veulent avant tout couter
de la musique.
Voyant cela, Thomas Edison se lance lui-aussi dans la fabrication de disques en
1913. Ce qui importe cest la qualit du son, pense-t-il, obnubil par la performance
technique. Aussi dcide-t-il denregistrer des artistes peu connus, donc moins coteux,
dont il ne mentionne mme pas le nom sur ses disques !
Mais le public veut connatre celui dont il entend la voix. Une musique ce nest
pas seulement une partition, cest aussi un tre humain, un chanteur ou un musicien
qui donne une motion partager.
Lorsque Edison la compris, il tait trop tard. Tous les grands artistes enregistraient
dj chez Victor, et exclusivement chez Victor...
Thomas Edison ne gagnera pas un sou avec son invention, tandis que Victor
Talking Machine Company deviendra plus tard RCA qui est encore lun des leaders
du domaine.
Le phonographe dEdison nous a appris que ce nest pas tant la prouesse technique
qui fait le succs dun produit, mais bien son utilisabilit et le fait quil rponde un
besoin social.
ANNEXES
A
Ltre humain
en situation de travail
Sont prsents ici les principaux rsultats concernant ltude de lindividu en situation
de travail.
Ces travaux constituent le fondement thorique des recommandations qui ont t
nonces dans le livre.
A.1 MODLE DU PROCESSEUR HUMAIN
Les principaux travaux dans le domaine de lergonomie du logiciel sappuient sur le

modle du processeur humain [Card 83], lui-mme sinspirant de travaux en psychologie
cognitive [Broadbent, 1958 ; Newell & Simon, 1972].
Cette modlisation est particulirement adapte la conception des interfaces
homme-machine car elle reprsente ltre humain en phase de traitement des
connaissances, ce qui est le propre de lutilisation dun logiciel (figure A.1).
Le modle du processeur humain vise reprsenter ltre humain par analogie avec
lordinateur. Il dcrit lindividu comme un systme prenant en entre des donnes,
les stimuli perceptifs, effectuant des traitements et produisant des sorties, les actions
motrices.
Chaque opration est ralise par un systme indpendant. Ainsi, il est possible
dtablir un parallle entre le modle du processeur humain et un systme informatique
(figure A.2).
254 Annexe A. Ltre humain en situation de travail
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.
Dans un premier temps, le systme perceptif traite les informations reues du

monde extrieur. Les stimuli sont mmoriss dans les registres sensoriels sous forme
analogique. ce stade, chaque sens est trait de manire indpendante. Le systme
cognitif intgre les informations stockes dans les diffrents registres sensoriels et
ralise les oprations, dites cognitives, de traitement des connaissances en dclenchant,
A.1 Modle du processeur humain 255
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 acquis la connaissance
des nombres ou dun seul ( 42 78 35 ) sil sagit dun numro de tlphone, par
exemple.
Bien que le contenu smantique de chaque mnme varie dun individu lautre, la
capacit de la mmoire court terme est une caractristique commune tous les tres
humains : elle est de 7 2 mnmes.
Ce rsultat nonc par [Miller 56] a t valid par de nombreuses expriences.
Cependant, certains travaux rcents ont mis en vidence le fait quon ne se rappelle
avec prcision que de 3 ou 4 mnmes [Cowan, 2001] et quil nest possible de se
souvenir de plus dinformations que lorsquelles ont un lien avec les prcdentes
[Broadbent 75]. Ainsi, lorsque lon demande un individu de verbaliser rapidement
un grand nombre de concepts connus, par exemple des villes ou des instruments de
cuisine, il a tendance les regrouper par 2 ou 3.
Figure A.4 Structure de la mmoire court terme [Broadbent 75].
Ces diffrents lments tendent montrer que la mmoire court terme pourrait
tre modlise comme 3 registres, chaque registre pouvant contenir 2 3 mnmes
relis entre eux.
La capacit de stockage de la mmoire court terme est relativement faible : 7
2, voire 3 ou 4 mnmes [Baddeley, 1991]. Cest pourquoi, lors de la conception dune
interface, il convient de minimiser le nombre de donnes que lutilisateur doit prendre
en compte, en privilgiant la qualit de linformation la quantit.
A.2 THORIE DE LACTION
La thorie de laction, labore par D.A. Norman, fournit un cadre thorique

permettant de mesurer la complexit dutilisation dune interface homme-machine
[Norman 86]. Elle part du principe que toute action est un cycle itratif en deux
temps ; tout dabord lutilisateur excute une commande, puis il value la modification
engendre par la commande par rapport au but quil visait (figure A.5).
Figure A.5 Les deux tapes de la thorie de laction.

A.2 Thorie de laction 257
Une premire phase consiste dcliner le but de lutilisateur en un plan. Celui-ci

va donner lieu une srie dactions. Chaque action est excute physiquement. Ltat
du monde en est modifi. Lutilisateur peroit cette modification. Il linterprte en
fonction des connaissances dont il dispose. Finalement, il compare le rsultat avec le
but quil stait fix (figure A.6).
Figure A.6 Dcomposition du cycle action-valuation.
titre dexemple, la figure A.7 illustre le cycle de laction dans le cas o lutilisateur
chercherait tancher sa soif .
Figure A.7 Exemple de cycle action-valuation.

On distingue deux strates dans le cycle de laction. Lune correspond aux processus
lis la comprhension du systme : laboration du plan permettant datteindre
le but et valuation du rsultat (Que faire ?). Lautre regroupe les processus lis
la manipulation proprement dite du logiciel : excution de laction et perception
(Comment le faire ?). Lpaisseur de ces strates est reprsentative de la complexit
dutilisation, do la notion de distance pour mesurer la complexit associe
chacune des tapes du cycle de laction [Hutchins 86].
Au niveau conceptuel, la distance smantique symbolise la distance entre le but
vis par lutilisateur et les actions/objets de linterface. Elle tmoigne de la complexit
de comprhension du systme. Elle mesure la quantit de ressources ncessaires aux
processus cognitifs lis la comprhension du systme pour choisir les commandes
afin de raliser une tche et dterminer si le but a t atteint en fonction de ltat du
systme.
Sur le plan de la ralisation, la distance articulatoire figure la distance entre
laction et sa reprsentation physique. Elle atteste de la complexit dutilisation du
systme. Elle mesure la quantit de ressources ncessaires aux processus cognitifs et
moteurs lis la manipulation du systme pour raliser une commande et percevoir
ltat du systme.
La rduction des distances smantiques et articulatoires contribue diminuer
les ressources ncessaires aux processus cognitifs/moteurs de comprhension et de
manipulation du systme, cest--dire les ressources ncessaires la tche dutilisation
du systme. En dautres termes, rduire les distances facilite lutilisation du logiciel.
Lexemple typique de la rduction des distances est linterface manipulation directe.
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.
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.
Les informations ncessaires pour mener une tche sont associes en mmoire
cette tche. Tant que lobjectif initial na pas t atteint, les informations relatives la
tche sont actives. Par contre, une fois le but atteint, elles sont gnralement oublies.
Ce phnomne est prendre en compte lors de la conception du dialogue homme-
machine. Ainsi, il a t observ que les utilisateurs des premiers distributeurs de billets
de banque oubliaient leur carte bancaire dans la machine. En effet, ces distributeurs
ne rendaient la carte quaprs les billets. Or, le but de lutilisateur tait dobtenir des
billets ; une fois ceux-ci en main, il oubliait la carte bancaire, qui navait t quun
moyen datteindre ce but. Depuis, les distributeurs rendent la carte bancaire avant les
billets et plus aucune carte nest perdue.
A.3 Tche et activit 259
Figure A.8 Planification hirarchique de la tche.
Cependant, un mme but, un mme objectif de tche, peut tre atteint de diverses
manires selon le contexte. Par exemple, je ne my prendrais pas de la mme manire
pour communiquer par crit selon que je dispose dun traitement de texte et de
beaucoup de temps ou, au contraire, que je nai quune feuille de papier et 5 minutes
devant moi. Pour raliser une tche selon les moyens qui lui sont attribus et dans des
conditions donnes, lutilisateur dploie une activit.
Lactivit est aussi appele la tche effective , tandis que la tche est la tche
prvue ou prescrite . En dautres termes, la tche dsigne ce qui doit tre fait, tandis
que lactivit reprsente ce qui est fait.
La diffrence entre tche et activit est essentielle. En effet, lors de la conception
dun logiciel, on part dinformations sur la tche (le cahier des charges) et non
sur lactivit. Or, cest dans un contexte dactivit que sera utilis le logiciel. Cest
pourquoi il est important de mettre en situation lutilisateur et de lobserver afin de
comprendre son activit ; cest le rle des tests dutilisabilit.
Pour que linterface homme-machine puisse tre adapte lactivit des utilisateurs,
il convient de prendre en compte les diverses stratgies dutilisation quils peuvent
mettre en uvre selon le contexte dutilisation en offrant une flexibilit dans les moyens
de dialogue. Par exemple, la commande dimpression peut tre dclenche soit par une
fentre de dialogue permettant de choisir la plage dimpression et le nombre de copies,
soit directement, mais sans configuration possible, par un bouton. Ainsi, lorsque jai
le temps, jutilise la fentre de dialogue et je bnficie dun paramtrage fin, mais si je
suis press, je ne me sers que du bouton.
Par ailleurs, un logiciel est un outil complexe qui fait appel des comptences
spcifiques pour tre utilis. La ralisation dune tche informatise demande en fait
de mener deux tches en parallle : dune part la tche mtier cest--dire lobjectif
que lutilisateur cherche atteindre vis--vis du monde extrieur, dautre part la tche
systme qui consiste se servir du logiciel proprement dit. Cette dernire rend la
tche globalement plus difficile sans pour autant faciliter la ralisation de la tche
mtier qui est lobjectif premier de lutilisateur. Par exemple, lorsque lon utilise un
logiciel de conception assiste par ordinateur, la tche mtier consiste concevoir
une pice mcanique, tandis que la tche systme correspond lemploi du logiciel et
de lordinateur.
Pour quun systme informatique soit facile utiliser, la tche systme ne doit pas
perturber la ralisation de la tche mtier. Linterface homme-machine doit tre la plus
transparente possible : la tche systme rduite au minimum. La prpondrance
de la tche systme sur la tche mtier a souvent t un facteur de refus du logiciel.
Inversement, lorsque la tche systme est aise, le logiciel est mieux accept. Cest
pourquoi le Macintosh, avec une reprsentation graphique et la mtaphore du bureau,
a eu un tel succs, par rapport au PC qui, lpoque, proposait une interface textuelle.
B
Critres ergonomiques
Les critres ergonomiques constituent une typologie des proprits dune interface
homme-machine qui vont conditionner son utilisabilit.
Les critres prsents dans ce chapitre sont issus des travaux de J.-C. Bastien
[Bastien 93] et repris dans la norme AFNOR Z67-133-1. Il y a un relatif consensus des
chercheurs du domaine sur cet ensemble de critres. Ils se retrouvent galement dans
la grille dvaluation de luniversit de Purdue [Lin 97] et dans les rgles dvaluation
heuristique de J. Nielsen [Nielsen 93].
Les critres sont employs de deux manires. Ils permettent dvaluer lutilisabilit
dun logiciel et servent de guide lors de la conception des interfaces homme-machine.
Nous les prsentons ici en donnant dune part une dfinition du critre, utile
lvaluation, et dautre part des recommandations illustrant la faon de le mettre
en uvre en phase de conception.
B.1 COMPATIBILIT
La compatibilit est la capacit du logiciel sintgrer dans lactivit relle des
utilisateurs. Ce critre mesure ladquation du logiciel avec lenvironnement de travail
dans lequel il est utilis. Lobjectif est de rduire le transfert de connaissances ncessaire
pour passer du mtier au logiciel. La logique dutilisation du systme doit correspondre
la logique de lutilisateur.
La compatibilit consiste prendre en compte tous les niveaux de la conception
de linterface homme-machine, le contexte rel dutilisation. Lorsque le logiciel est
adapt son usage, lutilisateur sen sert plus facilement car il rpond mieux aux
exigences du terrain.
262 Annexe B. Critres ergonomiques
Figure B.1 Les critres ergonomiques sont les principales rgles suivre
pour que le logiciel ou le site web soit utilisable.
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.
Considrons, par exemple, un logiciel destin un grant de magasin dont la tche

peut tre modlise comme sur la figure suivante.
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.
B.2 Guidage 263
Figure B.2 Pour cet exemple, 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 mmes oprations : dition, Impression ou Envoi.
Figure B.3 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.
B.2 GUIDAGE
Le critre de guidage regroupe lensemble des moyens mis en uvre pour assister
lutilisateur dans lemploi du logiciel, cest--dire lui faire connatre ltat du systme et
lui permettre dtablir des liens de causalit entre ses propres actions et ltat rsultant.
Lobjectif est de faciliter lutilisation du systme et son apprentissage. En effet, le
guidage rend le logiciel plus convivial car lutilisateur comprend mieux ce que lon
attend de lui : il hsite moins. Lapprentissage est facilit car le fonctionnement du
systme apparat clairement.
On considre habituellement deux types de guidage. Le guidage explicite correspond
aux diffrents messages mis par le systme afin dinformer lutilisateur sur son
fonctionnement, par exemple des textes explicatifs. Le guidage implicite regroupe les
diffrents artifices de prsentation qui sont employs pour guider lutilisateur, comme
le fait de griser les commandes inactives par exemple.
Ce critre est dcompos en quatre sous-critres [Bastien 93] prsents ci-aprs.
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.
Groupement/Distinction
Quand il dcouvre pour la premire fois un outil, ltre humain applique le principe de
similarit : Ce qui se ressemble, fonctionne de la mme manire . Lutilisateur comprend
plus facilement le fonctionnement du logiciel lorsque les informations de mme type
sont regroupes, et inversement, que les donnes distinctes apparaissent sous une
forme diffrente.
Le groupement sappuie sur deux attributs graphiques : le format de prsentation
de la donne (couleur, forme, syntaxe, etc.) et sa position lcran. Lorsque les
informations se rapprochent lcran, soit par leur graphisme, soit par leur position,
lutilisateur fait lhypothse quelles fonctionnent de la mme manire.
Figure B.4 Guidage par incitation : les indications guident la saisie

en prcisant de faon explicite la syntaxe de chaque champ de la fentre.
Regrouper les informations de mme type par le format ou par la position.

Distinguer les informations diffrentes.
B.2 Guidage 265
Figure B.5 Guidage par groupement : chaque menu prsente lutilisateur un ensemble
cohrent de commandes, facilitant ainsi la mmorisation et lapprentissage du logiciel.
Retour utilisateur
Le critre de retour utilisateur (feed-back) runit les diffrents comportements de
linterface homme-machine visant montrer le fonctionnement du systme, en
signalant ce que fait le logiciel et en fournissant un retour aux actions utilisateur.
Ce critre contribue accrotre la confiance dans le systme. Lorsque le logiciel
fournit des retours, lutilisateur tablit le lien entre les actions quil effectue et ltat
rsultant. Il comprend mieux le fonctionnement et laccepte plus facilement.
Le logiciel doit rpondre aux actions de lutilisateur par un changement de prsentation de

linterface.
Indiquer les modes de fonctionnement du systme.
Signaler les traitements longs par un message dattente.
Toujours faire apparatre les saisies utilisateur.
Rendre visible les traitements raliss par le logiciel.
Figure B.6 Guidage par retour utilisateur :

la modification du pointeur souris montre quun traitement est en cours.
Lisibilit
Dans la mesure o elle facilite la perception des informations, la lisibilit contribue
aussi au guidage. Lorsque la lecture est facile, lutilisateur comprend mieux le
fonctionnement du logiciel.
Utiliser une police droite.

Employer des lettres sombres sur un fond clair.
B.3 HOMOGNIT
Le critre homognit concerne la cohrence globale de linterface 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.
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.
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 effec-
tivement 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.

B.5 Contrle utilisateur 267
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

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
Le contrle utilisateur vise rendre lutilisateur autonome dans son interaction
avec le logiciel en lui donnant la matrise du processus. Lapprentissage en est facilit.
Les erreurs sont moins nombreuses, la performance est donc meilleure. De ce fait, le
logiciel est mieux accept par lutilisateur.
[Bastien 93] distingue deux niveaux de contrle. Le premier (actions explicites)
concerne le fait que seules les oprations demandes par lutilisateur sont ralises par
le systme. Le second (contrle utilisateur) dnote le degr de matrise de lutilisateur
sur les traitements effectus, lobjectif tant que lutilisateur ait toujours le contrle
sur le logiciel.
Valider explicitement les commandes importantes ou difficilement rversibles.

Offrir la possibilit dinterrompre les traitements longs.
Autoriser les retours en arrire.
Figure B.8 Contrle utilisateur : le bouton Dfaire (Undo) autorise lutilisateur revenir sur
ltat prcdant lexcution de la dernire commande. Ce bouton permet dviter des erreurs et
minimise le stress.
B.6 TRAITEMENT DES ERREURS

Le traitement des erreurs regroupe les diffrents moyens visant protger lutilisateur
des erreurs et lui permettre de les corriger. Lobjectif est de minimiser les interruptions
dues aux erreurs.
viter les erreurs.

Permettre une correction aise des erreurs.
Faciliter lexploration et lapprentissage du systme.
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 ne commette
des erreurs (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 efficacement des erreurs. Dautres moyens
doivent galement tre mis en uvre, en particulier le guidage qui contribue une meilleure
comprhension du logiciel.
B.6.2 Correction des erreurs

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

B.7 Charge mentale 269
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 dviter les erreurs
en rduisant les stimuli. Il vise diminuer le nombre dinformations que lutilisateur
doit prendre en compte et simplifier les actions quil doit raliser.
Nafficher que les informations pertinentes.

Rduire le nombre dactions lmentaires pour atteindre un objectif donn.
Mettre en uvre ce critre consiste concevoir un dialogue simple, cest--dire

limiter le travail de lecture, de saisie et les tapes ncessaires laccomplissement de
la tche.
Minimiser les saisies.

viter les textes trop verbeux.
Ne pas demander de saisir des informations qui peuvent tre calcules par le systme.
viter lutilisateur davoir se souvenir dinformations dune fentre lautre.
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
lutilisabilit dun logiciel.
Cette check-list est gnrale. Elle demande tre adapte en fonction de lapplica-
tion valuer (pour un site web, voir lannexe C).
B.8.1 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 ?
B.8.2 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 ?
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 ?
B.8 Check-list dvaluation ergonomique 271
Les informations sont-elles correctement lisibles ?

Une aide en ligne est-elle propose ?
La documentation est-elle claire ?
B.8.3 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 ?
B.8.4 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 ?
B.8.5 Contrle utilisateur

Les commandes sont-elles toujours explicitement actives par lutilisateur ?
Lutilisateur peut-il quitter, abandonner facilement, interrompre un traitement
en cours ?
Est-il possible de revenir en arrire ?
B.8.6 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 ?
B.8.7 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 ?
C
Check-list de conception
dun site web
Cette check-list fait la synthse des diffrentes recommandations nonces dans les
chapitres traitant des sites Internet. Elle sert daide-mmoire et permet de vrifier,
chaque tape de la conception, si les critres dutilisabilit ont bien t pris en compte.
Bien entendu, il sagit l dune approche a priori. Elle permet seulement didentifier
des problmes potentiels, mais elle ne vaut pas un vritable test dutilisabilit.
Afin de pouvoir servir au plus grand nombre, cette check-list est volontairement
gnrale. Pour lappliquer efficacement, il est prfrable de ladapter aux spcificits
du site concevoir.
C.1 DFINITION ET CIBLAGE

Quels 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 problmes
cherche-t-il rsoudre ?
Quelle est son attente ?
Dans quel contexte va-t-il se poser ces questions ?
Peut-on dfinir un scnario dutilisation typique ?
274 Annexe C. Check-list de conception dun site web
Des sites concurrents, ou du mme type, ont-ils t valus ?

Que pensent les utilisateurs de ces sites, voire des autres mdias offrant ce type
de service ?
Une stratgie de lancement du site a-t-elle t labore ?
Le processus de mise jour du site est-il dfini ? Qui va entretenir le site ?
Des moyens ont-ils t mis en uvre pour recueillir des retours dutilisation ?
Les outils permettant dtablir les statistiques dutilisation ont-ils t choisis ?
C.2 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 ?
C.3 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 ?
C.4 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 ?
Une alternative est-elle propose aux menus droulants ?
Le graphisme des onglets est-il explicite ?
C.5 Liens 275
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 ?
C.5 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-elle interrompue par lutilisation des liens ?
Le texte des liens est-il facile comprendre ?
Le texte des liens reflte-t-il les concepts importants de la page ?
Le mme lien est-il rpt sur la page ?
Le libell des liens est-il cohrent ? La mme page est-elle toujours indique par
un lien de mme nom ?
Le texte du lien correspond-il avec le titre de la page ?
Linternaute est-il prvenu lorsquun lien le conduit vers un document volumi-
neux ?
Les liens vers dautres sites restent-ils dans la mme fentre ?
C.6 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 ?
276 Annexe C. Check-list de conception dun site web
La navigation lintrieur de la mme page se limite-t-elle au retour en haut de

page ?
Les pages se chargent-elles suffisamment vite ?
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 ?
C.7 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 utilisateurs
expriments (moteur de recherche) ?
C.8 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 ?
C.9 Texte 277
C.9 TEXTE
Linformation importante apparat-elle en haut de page ?
Les lments importants du texte ressortent-ils lorsquon balaye la page des
yeux ?
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 ?
C.10 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 ?
Rfrences
BIBLIOGRAPHIE
En comparaison des nombreux ouvrages techniques traitant des mthodes et des

outils de dveloppement, il y a assez peu de livres sur la conception ergonomique des
interfaces utilisateur. Les ouvrages suivants vous apporteront un autre clairage sur ce
domaine.
Principes de conception dinterface homme-machine

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 nom-
breuses recommandations sur la conception des interfaces principalement dans
le domaine du logiciel, mais aussi pour les applications web. La dernire dition
(3) traite galement des technologies Ajax ainsi que des interfaces de type
Ipod. On regrettera toutefois le nombre relativement restreint dillustrations
comparativement aux autres ouvrages de ce type.
Nielsen J., Usability Engineering, Academic Press, 1993.
Usability Engineering 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.
Shneiderman B., Designing the User Interface, Addison-Wesley, 1998.
Cet ouvrage, plus gnraliste, est probablement lun des mieux russis sur le
sujet. Ben Shneiderman y aborde les diffrents aspects de linteraction homme-
machine aussi bien sous langle de lutilisabilit que sous celui des techniques
de dveloppement et de la recherche.
Ouvrages complmentaires
Andre A.D. et Wickens C.D., When Users Want Whats Not Best for Them ,
Ergonomics in Design, octobre 1995.
Brown C.M.L., Human-Computer Interface Design Guidelines, Ablex, 1988.
Card S.K., Moran T.P., Newell A., The psychology of human-computer interaction,
Lawrence Erlbaum Associates, 1983.
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.
Norman D.A., Cognitive engineering , User centered system design, Norman
& Draper (eds.), Lawrence Erlbaum Associates, 1986.
Norman D.A., The Invisible Computer, MIT Press, 1998.
Articles de fond et rapports scientifiques

Berkun S., Fittss UI Law Applied to the Web, UIWeb.com, mai 2000.
Baddeley, A.D., The episodic buffer: a new component of working memory ? Trends
in Cognitive Sciences, 4(11), 417423, 2000.
Broadbent, D., Perception and Communication. London : Pergamon Press, 1958.
Broadbent D.E., The magic number seven after fifteen years , Studies in Long
Term Memory, A. Kennedy & A. Wilkes (eds.), Wiley, 1975.
Card S.K., The Model of Human Processor : A model of making engineering
calculations of human performance , Proceedings of the Human Factors Society
25th annual meeting, 1981.
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.
Cowan, N., The magical number 4 in short-term memory : A reconsideration of
mental storage capacity . Behavioral and Brain Sciences 24 (1): 87114, 2001.
Fitts P. M., The information capacity of the human motor system in controlling the
amplitude of movement , Journal of Experimental Psychology, 47, 1954.
Frohlich D.M., The history and future of direct manipulation , Behaviour &
Information Technology, vol. 12, n 6, 1993.
Fuchs F., Ergonomie et efficacit , E-business : guide de rfrence 2003, Elec-
tronic 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.
Gediga G., Hamborg K.C., Dntsch H., The IsoMetrics Usability Inventory : An
Operationalisation of ISO 9241-10 , Behaviour & Information Technology, 1999.
Bibliographie 281
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.
Miller G.A., The magic number seven, plus or minus two , Psychological Review
n 63, 1956.
Scapin D., Guide ergonomique de conception des interfaces homme-machine, Rap-
port INRIA n 77, 1986.
Conception de sites web

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.
Ne vous fiez pas son titre racoleur, ni ses illustrations de BD : Zro prise de
tte est un excellent ouvrage pour apprendre lergonomie web. Avec le souci
daller rapidement lessentiel, Steve Krug nous explique, dans un langage clair
et imag, comment concevoir des sites web. Sappuyant sur des exemples vcus,
il donne des conseils pratiques pour mener des tests dutilisabilit et intgrer la
pratique de lutilisabilit dans la conception dun service en ligne.
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.
Hardy J.-M. et Palermo G., Russir son site web en 60 fiches, 2e dition, Dunod,
2008.
Destine principalement aux chefs de projet web, la check-list de 60 points cls
labore par Jean-Marc Hardy couvre lensemble des lments qui concourent
la qualit dun site web. Partant du principe quun site de qualit est un site
utilisable, elle est principalement oriente sur la perception du site du point
de vue des internautes. La check-list couvre la fois les aspects techniques de
ralisation du site, lergonomie, le design graphique, le contenu et les aspects
marketing. Chaque point est dtaill par des recommandations, des tudes de
cas, ainsi que de nombreuses rfrences.
Ouvrages complmentaires
Fleming J., Koman R., Web Navigation: Designing the User Experience, OReilly
& Associates, 1998

Battey J., IBMs redesign results in a kinder, simpler Web site , InfoWord, 19 avril
1999.
Berkun S., Leadership in collaboration: film making and interaction design,
UIWeb.com, janvier 2002.
Chen C.Y., Lindsay G., How to Lose a Customer in a Matter of Seconds ,
Fortune, vol. 141, n 12, 12 juin 2000 (www.fortune.com).
Creative Good, Holiday 99 E-Commerce, Research report, 1999.

Germain M., Conduite du projet intranet, Economica, 2004.
Ipsos Mediangles, Web Tracking Eye, juin 2001.
Manning H. et al., Why Most Web Sites Fail, Interactive Technology Series,
Forrester Research: 1998.
Nielsen J., Cost of User Testing a Website, Jakob Nielsens Alertbox, 1998.
Nielsen J., Failure of Corporate Website, Jakob Nielsens Alertbox, 1998.
Nielsen J., First Rule of Usability ? Dont Listen to Users, Jakob Nielsens Alertbox,
2001.
Nielsen J., How Users Read on the Web, Jakob Nielsens Alertbox, 1997.
Nielsen J., Inverted Pyramids in Cyberspace, Jakob Nielsens Alertbox, 1996.
PhoCusWright & Akamai, Consumer response ot travel site performance, 2010
(www.phocuswright.com/free_downloads).
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.
Reprsentation de linformation
Few, S., Information Dashboard Design: The effective visual communication of data,
OReilly Media, 2006.
McCandless, D., The Visual Miscellaneum: A colorful guide to the worlds most
consequential trivia, Harper Design, 2009.
Sears A., Layout Appropriateness: Guiding interface design with simple task descrip-
tions, Ph.D. Dissertation, University of Maryland Computer Science Depart-
ment 1993.
Spool J.M. et al., Web Site Usability : A Designers Guide, Series in Interactive
Technologies, Morgan Kaufmann, 1998.

Camacho M.J., Steiner B.A., Berson B.L., Icons vs. alphanumerics in pilot-
vehicles interfaces , Proceedings of the Human Factors and Ergonomics Society
Annual Meeting, 1990.
Wiedenbeck S., The use of icons and labels in an end-user application program: an
empirical study of learning and retention , Behaviour & Information Technology,
vol. 18, n 2, 1999.
Miller P.D., The Depth/Breadth Tradeoff in Hierarchical Computer Menus ,
Proceedings of the Human Factors Society Annual Meeting, 1981.
Schenkmann B.N., Jnsson F.U., Aesthetics and Preferences of Web Pages ,
Behaviour & Information Technology, vol. 19, n 5, 2000.
Bibliographie 283
Veen J., Faucet Facets: A few best practices for designing multifaceted navigation
systems, Adaptive Path, 2002 (www.adaptivepath.com).
Les mthodes de conception des interfaces

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
mthodes dvaluation ergonomique. Pour chaque mthode, une fiche prsente
le protocole mettre en place, le matriel utiliser, ainsi que tous les dtails
pratiques de mise en uvre. Principalement destin un public professionnel,
cet ouvrage constitue un tat de lart prcis des principales mthodes exprimen-
tales employes en ergonomie. Une lecture conseille tous ceux qui souhaitent
conduire des valuations ergonomiques.
Andre A.D. et Segal L.D., The Users Perspective , Ergonomics in Design,
vol. 6, n 3, July 1998.
Arnowitz, J., Arent, M. et Berger, N., Effective Prototyping for Software Makers
(Interactive Technologies), Morgan Kaufmann, 2006.

Hendrick H.W., Good Ergonomics is Good Economics , Ergonomics in Design,
vol. 5, n 2, April 1997.
Lund A.M., Expert Ratings of Usability Maxims , Ergonomics in Design, vol. 5,
n 3, July 1997.
Meyer J. et Seagull F.J., Where Human Factors Meets Marketing , Ergonomics
in Design, vol. 4, n 3, July 1996.
Critriologie et Normes de conception ergonomique

Scapin D. L. et Bastien J. M. C., Ergonomic criteria for evaluating the ergonomic
quality of interactive systems , Behaviour & Information Technology, vol. 16,
1997.
Dans cet article, Dominique L. Scapin et J. M. Christian Bastien exposent
les critres ergonomiques. Chacun dentre eux est dfini prcisment, des
justifications ainsi que des exemples de recommandations sont galement fournis
afin de mieux apprhender le jeu complet des critres.
ISO 13407, Processus de conception centre sur loprateur humain pour les
systmes interactifs, ISO, 1999.
ISO 20282-3, Facilit demploi des produits quotidiens : Partie 3, Mthode
dessai pour produits de consommation courante (PAS), ISO, 2007.
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.
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 nous crivons 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.
Ressources sur les interfaces homme-machine et la pratique de lergonomie

ACM SIGCHI Lorsquon cherche une information sur les interfaces homme-
machine, le meilleur point de dpart est, notre 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
All about ux Ce site fournit des ressources et mthodes sur lexprience
utilisateur. Linformation est cre et entretenue par des bnvoles.
http://www.allaboutux.org
Ergolab Amlie Boucher propose sur le site Ergolab des ressources en
ergonomie web et logiciel. Les articles, chroniques de livres et liens prsents
abordent des thmatiques lies la conception centre utilisateur, lutilisabilit,
laccessibilit et larchitecture de linformation. Les articles sont rpartis selon
quatre thmatiques : questions existentielles, principes, lments dinterface et
pratiques.
http://www.ergolab.net
Ergonomie du web Alain Robillard-Bastien expose sur ce site des notions
fondamentales sur la conception ergonomique de site web et sur lergonomie
en gnral. Il y prsente en dtail une mthode de dveloppement orient
utilisateur de site web.
http://www.ergoweb.ca
Human Factors International Le site Human Factors International comporte,
entre autres, une synthse, illustre dexemples, des principales rgles dergono-
mie -suivre lors de la conception des interfaces homme-machine.
http://www.humanfactors.com
Industrial USability Reporting Ce site cr linstigation de lInstitut amri-
cain 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
Webographie 285
Information & Design Ce site prsente les principales mthodes employes

en ergonomie informatique dans les phases danalyse, conception et valuation.
http://www.infodesign.com.au
LukeW
Luke Wroblewski est expert en utilisabilit et cofondateur de Bagcheck Inc.
Auteur et confrencier, il partage sur son site nombre de ressources sur la
http://www.lukew.com/
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
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
The UX Bookmark - Abhay Rautela propose des ressources pour les profession-
nels du facteur humain et des IHM, designers dinteraction, et architectes de
linformation.
http://www.theuxbookmark.com/
UPA Le site de lUPA (Usability ProfessionalsAssociation) est une mine de
ressources sur la dmarche centre utilisateur. La mthode et les bnfices de
la dmarche y sont prsents en dtail. On trouve galement sur le site de
nombreuses ressources pour mettre en place une dmarche ergonomique.
http://www.upassoc.org
Usabilis Usabilis est la socit de conseil fonde par Jean-Franois Nogier. 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 Institute Le Usability Institute propose non seulement plusieurs
livres blancs et articles sur lutilisabilit, mais aussi une bibliothque de com-
posants 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
Usability.gov Ce site prsente une liste impressionnante de ressources sur la

pratique de lutilisabilit. Il comporte en particulier un recueil de recommanda-
tions pour la conception de sites web dans lequel chaque rgle est pondre par
deux critres : son importance dans la russite du site (Relative Importance) et la
force des preuves venant appuyer cette recommandation (Strength of Evidence).
Ces lments vont faciliter les choix de conception et les compromis invitables
lors du dveloppement du site.
http://usability.gov
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
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. Son fondateur principal nest autre que Jared M. Spool,
illustre spcialiste de lergonomie des interfaces informatiques.
http://www.uie.com
Blogs et webzines sur et autour de lergonomie informatique

60 questions Jean-Marc Hardy livre son exprience et ses rflexions sur
les bonnes et mauvaises pratiques en matire de conception de sites web, en
mettant laccent sur les innovations qui enrichissent ou simplifient le Web.
http://blog.60questions.net
AccessiBlogue Blogue (qubcois) promoteur de laccessibilit des contenus
Web aux personnes handicapes et vieillissantes, de la normalisation (WCAG,
SGQRI, etc.) et enjeux.
http://accessibiliteweb.com/accessiblogue
Adaptive Path Cabinet de conseil en ergonomie web, propose une lettre
de diffusion et des articles de fond traitant de la conception des sites et de la
pratique de lutilisabilit.
http://www.adaptivepath.com
AskTog Le site de Bruce Tognazzini, vanglisateur en interface utilisateur
pendant 14 ans chez Apple, comporte de nombreux articles sur lutilisabilit et
fournit des conseils sur la conception des interfaces homme-machine.
http://www.asktog.com
Capitaine Commerce - Le Capitaine et ses acolytes nous font partager avec
humour leur passion du e-commerce au travers de commentaires, dcouvertes
et rflexions sur le web marketing, le web analytique et lutilisabilit.
http://www.capitaine-commerce.com
Ergologique Ce site vise sensibiliser les concepteurs et techniciens multi-
mdia la ncessit de rflchir sur lutilisabilit de linterface. Il propose des
conseils vulgariss de conception ergonomique et des actualits quotidiennes
Webographie 287
autour de lergonomie et du multimdia.

http://www.ergologique.com
ErgonomiA Sandrine Promtep nous fait dcouvrir des mthodes et des
vnements sur lutilisabilit et le web 2.0.
http://www.ergonomia.ca
Ergonomie, Ruby on Rails et Architecture de linformation web (2.0)
Frdric de Villamil, QA Manager, nous livre une belle varit dactualits sur
les mtiers de lergonomie web, lexprience utilisateur et la stratgie produit.
http://www.t37.net
Ergophile : Analyse de lergonomie web Jacinthe Busson partage son
approche de lergonomie web et mobile ainsi que ses rflexions sur lactualit
des IHM.
http://www.ergophile.com
Expressions.be Gaetano Palermo nous fait partager sa passion pour lcriture
dans les diffrentes formes et expressivits quelle revt travers le web.
http://expressions.be
Fred Cavazza - Dans ce blog, Frdric Cavazza publie ses rflexions et ses
dcouvertes sur lutilisabilit, le e-marketing, le web 2.0 et les nouvelles
technologies en gnral.
http://fredcavazza.net
Getelastic - Linda Bustos propose avec Getelastic un Blog traitant de lexp-
rience utilisateur dans lE-commerce.
http://www.getelastic.com/
I-ergo : Le bloc note - Raphal Yharrassarry publie et partage des ides, sujets
et informations sur les IHM, lergonomie et lexprience utilisateur.
http://blocnotes.iergo.fr
InterfacesRiches.fr - Anim par Frdric Cavazza (et quelques autres contri-
buteurs) ce blog porte sur lactualit des interfaces riches et leurs aspects
fonctionnels et business.
http://www.interfacesriches.fr
Johnny Holland - Collectif ouvert explorant le design dinteraction.
http://johnnyholland.org/
Journal of Usability Studies Cr linitiative de lassociation des profession-
nels 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/
Le blog de Pascal Magnenat Pascal Magnenat nous fait partager son regard
attentif et surprenant sur lexprience utilisateur et sur tout ce qui touche aux
interactions homme-machine.
http://www.pascalmagnenat.ch
Linearis, Blog Mal Poulain, web designer, publie des anecdotes, actualits et
autres informations surprenantes et originales sur le design dinterfaces.
http://www.linearis.fr/blog
Orange Cone - Blog de Mike Kuniavsky, fondateur dAdaptive path.

http://orangecone.com/
PIA blog Blog prsentant des outils, des vnements et une revue de presse
mensuelle sur les thmes du design graphique, des technologies associes et de
lexprience utilisateur.
http://blog.piaction.com
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
SimpleWeb Blog de Frdric Cavazza qui fait la part belle tout ce qui se
rapporte la simplification et lutilisabilit des interfaces web.
http://www.simpleweb.fr
Smashing Magazine Blog indpendant proposant des articles et ressources
dans les domaines de la conception dinterface, du design numrique et du
dveloppement web.
http://www.smashingmagazine.com/
Step Two Designs Step Two Designs est une agence de conseil spcialise
dans la gestion de la connaissance (knowledge management). Plusieurs articles
didactiques sur la problmatique du savoir dans lentreprise, la gestion du
contenu et les intranets sont disponibles sur le site.
http://www.steptwo.com.au
SuperFiction Eric DI POL nous propose des actualits autour du marketing
interactif et de la conception dinterface multimdia.
http://www.superfiction.net/blog
Temesis La qualit est un domaine troitement li celui de lutilisabilit.
Le blog de Temesis est un des rares blogs ddis la qualit et laccessibilit
des sites web. On y trouvera de nombreuses ressources sur la conformit des
dveloppements web.
http://blog.temesis.com
The UX Booth Collectif dauteurs et de contributeurs. Cr par les membres
de The UX Panel, cest maintenant une communaut grandissante qui crit
dans diverses perspectives.
http://www.uxbooth.com/
Usaddict Notre blog propose des ressources sur lergonomie et la dmarche
de conception centre utilisateur. Il sadresse principalement aux concepteurs
dinterface (ergonomes et designers) et prsente des articles de fond, des tudes
de cas, des outils et des mthodes sur lergonomie des interfaces.
http://www.ergonomie-interface.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
Webographie 289
associes.
http://www.useit.com
Utilisabilit.info Stphanie Le Rouzic nous fait part dvnements et de
mthodes concernant lutilisabilit, avec des articles toujours bien illustrs.
http://www.utilisabilite.info
UX matters UX matters est un blog qui regroupe de nombreux articles
sur la conception des interfaces et les mthodes de dveloppement orientes
utilisateur. Il couvre largement le domaine depuis les technologies utilises,
les mthodes, le management, lorganisation, ainsi que les ressources (livres,
confrences, etc.).
http://www.uxmatters.com
UX Movement Anthony Tseng propose un blog traitant dinterface utilisateur
et dexprience utilisateur. Les articles publis offrent des solutions pratiques
aux problmes communs de la conception web.
http://uxmovement.com/
UXpassion - Blog qui promeut lexprience utilisateur et fournit tutoriaux et
astuces autour des outils suivants: WPF, Silverlight, expression blend, expression
design.
http://www.uxpassion.com/
Yu blogue - Ce blog prodigue conseils, rgles et mthodes pour la conception
de systmes interactifs et lamlioration de lexprience utilisateur.
http://www.yucentrik.ca/yu-blogue
Design patterns et reprsentation de linformation

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
CaMarchePas Un site prsentant les tmoignages vidos dexpriences frus-
trantes avec des machines. Une belle initiative de Pascal Magnenat, spcialiste
des interactions homme-machine en Suisse et en Europe.
http://www.camarchepas.ch/
Designing Interfaces Un site bien document qui traite des design patterns
la fois des sites web et des interfaces logicielles. Il reprend en partie louvrage
du mme nom de Jenifer Tidwell.
http://www. designinginterfaces.com
Endeca Design Pattern Library Un catalogue de design patterns bien fournis
et surtout avec de nombreuses tudes de cas commentes, point par point.
http://patterns.endeca.com
Little Big Details Blog recensant des designs patterns utiliss le plus souvent
pour faciliter lexprience utilisateur. Les pratiques sont expliques et mises en
perspective, que ce soit pour les applications web ou logicielles.

http://littlebigdetails.com
LOLHome Un site de photos souvent humoristiques illustrant les problmes
dergonomie rencontrs au quotidien.
http://www.lolhome.com
Mobile Awesomeness Un site linitiative de Brightwurks spcialis dans la
conception de site Web mobile. La galerie recense des sites web adapts aux
smartphones et qui offrent souvent une conception graphique de qualit.
http://www.mobileawesomeness.com
Pattern Browser Un catalogue trs riche de design patterns propos par
lUniversit de Postdam.
http://www.patternbrowser.org
Patternry Une initiative finlandaise dchange de patterns utilisant le moteur
de Flickr. Les fiches sont compltes et intressantes.
http://patternry.com/
PatternTap Une galerie de design patterns sans cesse enrichie. Les exemples
manquent des recommandations dusage mais ils favorisent linspiration en
conception.
http://www.patterntap.com
Quince Infragistics Un trs riche et pratique catalogue interactif de design
patterns. Dot dune recherche par tags et de nombreux exemples, le dynamisme
de linterface est une exprience en elle-mme.
http://quince.infragistics.com
Smileycat Elements of Design Ce site propose une belle collection de design
patterns actuels, idale pour les concepteurs la recherche de linspiration pour
agencer les informations.
http://www.smileycat.com/
UI Patterns UI Patterns est une bibliothque de 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
We are colorblind Un catalogue trs utile en conception puisquil propose des
design patterns et des modles de reprsentation de linformation accessibles
aux personnes atteintes de troubles de la vision tels que le daltonisme.
http://www.wearecolorblind.com
Welie.com Le site de Martijn van Welie fournit une bibliothque dtaille de
schmas de conception. Des recommandations accompagnent chaque modle
ainsi que des exemples dinterfaces. Le site prsente principalement des
exemples pour le web mais certains schmas peuvent tre rutiliss pour des
interfaces logicielles.
http://www.welie.com
Webographie 291
Yahoo! Design Pattern Library Le catalogue de design patterns linitiative

de Yahoo! Les fiches pratiques sont bien documentes accompagnes de recom-
mandations dusage. Yahoo! y propose galement des patterns plus riches et le
code source associ
http://developer.yahoo.com/ypatterns
Guides de style pour la conception des interfaces

La plupart des concepteurs de systmes dexploitation et dinterfaces applicatifs pro-
posent une documentation en ligne et parfois imprimable. Ces sites, gnralement
volumineux, sont appels guides de style . Ils fournissent les rgles et les principes
dergonomie respecter pour concevoir des interfaces ergonomiques et interactives.
Cette liste est maintenue jour et actualise sur notre blog Usaddict.
Android User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html
Apple Human Interface Guidelines pour Mac Os X et iOS :
Mac Os X : http://developer.apple.com/library/mac/navigation/
iOS: http://developer.apple.com/library/ios/navigation/
Bada Application UI Guide
http://developer.bada.com/library/help.do?menu=MC01310100
Blackberry - UI Guidelines
http://docs.blackberry.com/en/
GNOME Human Interface Guidelines
http://developer.gnome.org/hig-book/
Java Java Look and Feel Design
http://java.sun.com/products/jlf/ed2/book/HIGTitle.alt.html
KDE User Interface Guidelines
http://developer.kde.org/documentation/design/ui/
Microsoft User Experience Guidelines pour Windows 7 Windows Phone :
Windows 7 : http://msdn2.microsoft.com/en-us/library/aa511258.aspx
Windows Phone 7 : http://msdn.microsoft.com/en-us/library/hh202915
SAP User Interface Guidelines
http://www.sapdesignguild.org/resources/uiguidelines.asp
Yahoo! Style Guide
http://styleguide.yahoo.com/
Index
A B
abrviations 134 balayage visuel en Z 32
accessibilit 34 barre
accueil 43 de menus 56
de navigation 53, 56
achat 67
BCA Expertise 175
activit 258, 259
benchmark 21
agencement 30
bnfice 2
fluide 39 Bouillot Thierry XVI
aide en ligne 170 bouton 104
alignement 121 de navigation 78
alt 79 de slection Voir composant de
analyse slection 113
de la situation de travail 219 radio Voir composant de slection
113
de la tche 219
bouton ou menu 112
application assurance 175
breadcrumb trail 72
application web 85 bulle daide 79, 171
apprentissage 96
arborescence 26, 27, 29
C
architecture
de communication 21 call to action 201
caractres 154
de linformation 22
carte du site 71
astrisque 120
case cocher Voir composant de
attente Voir temps de rponse 125 slection 113
audit ergonomique 232 champ de saisie 115
autocompltion 90 charge mentale 269
avancement 127 charte ergonomique 3
check-list 270, 273 critres ergonomiques 261, 270

dvaluation ergonomique 270 cross-selling 64, 206
dvaluation graphique 236 culturel 157
dvaluation rapide 21
de conception dun site web 273 D
de page daccueil 44
daltonisme 188
de questions poser lors du test de
perception 243 dmarche ergonomique 3, 211
de test du systme de navigation 84 descente dachat 63
de vrification du contenu dune dialogue, souris 96
page 146 didacticiel 171
check-out 63 distance
chemin de progression 72 articulatoire 93, 258
ciblage 20 smantique 92, 258
clart 190 distinction 264
clavier 90 doigt 100
clic 96 double-clic 97
double-clic 97 Dovadis 13
maintenu 98 drag and drop 89
clignotement 183
codage couleur 190 E
code des couleurs 190 e-commerce 63, 67, 201
commande 134 chantillon 240
compatibilit 261 cran
composant de slection 113 couleur de fond 193
conception dintroduction 44
ergonomique 1 dimension 38
itrative 228 tactile 10, 34
oriente utilisateur 211 criture web 141
web 213 Edison Th. 249
concision 269 encadrement 180, 188
contrle utilisateur 267 enjeux XII
Cooper A. 211 enqute utilisateur 215
correction ENT 47
automatique 90 Environnement Numrique de Travail 47
des erreurs 169 ergonomie
Cte-dOr Tourisme 85 bnfice 2
couleur 188 charte 3
choix 192 cot 2
codage couleur 190 enjeux XI
composante 189 intranet 7
de fond 184 mobile 10
Index 295
russites 3 gestion des erreurs 159

tactile 10 glisser-dposer 89
web 4 graisse 184
erreur 118, 159, 267 groupement 180, 187, 264
404 7 guidage 52, 263
cognitive 161 guide de style 3
correction des erreurs 169
dexcution 160
H
dintention 160
messages 164 haptique 95
messages derreur 164 hirarchie visuelle 181, 191
motrice 163 homognit 30, 266
perceptive 160 HSV (Hue, Saturation and Value) 189
prvention des erreurs 167
type 159 I
valuation ergonomique 232, 270
valuation par inspection 232 icnes 194
grille dvaluation 233 incitation 264
test dutilisabilit 236 index thmatique 70
Explorateur 25 interaction tactile 12, 99
exploration visuelle 32 interface homme-machine XIII
internationalisation 146
internaute 5
F interview 20
facultatif 120 utilisateur 215
feed-back 265 intranet 7
fentres, multi-fentrage 41 moteur de recherche 68
fil dAriane 53, 72 structure du site 9
flexibilit 266
fluid layout 39
K
focus group 20, 216
footer 60 K-dcole 47
format 119
forme 186 L
formulaire 152
web 115 langage 133
de linterface 133
langage de linterface
G criture web 141
gabarits 30 Leclerc Jules XVI
dcran 30 lettres 198
Gestalttheorie 179 libell 134
geste 100 des commandes 134
liens 80, 144 mise en vidence 182

locaux 40 mnme 255
lisibilit 200, 265 mobile 10
liste modle du Processeur Humain 253
puces 197 moteur de recherche 54, 68
de slection 114 multi-fentrage 41
droulante 114 multitouch 100
historique 117
Voir composant de slection 113 N
localisation 150
navigation 9, 22, 52, 56, 61, 243
logiciel immobilier 13
bouton de navigation 78
logo 60
contextuelle 59
bancaire 67
intranet 9
loi
persistante 57
de bonne continuit 180
primaire 61
de Fitts 80
secondaire 61
de la perception 180
de proximit 180 site internet 27
test 84
de similitude 180
web 60
Nielsen J. 51
M Nogier Jean-Franois XVI
manipulation directe 91 Norman D. 249, 256
manuel en ligne 171 Norman Don 1
maquettage 228
papier 231 O
maximes 245
Mayhew Deborah J. 19 obligatoire 120
mga-menus 77 onglets 73
mmoire 255 organisation
de lcran 30
court terme 255
de linterface 22
mmorisation 161
menu 27, 29, 37, 56, 106
contextuel 106, 109 P
droulant 76, 106 page
en ruban 110 daccueil 43, 146
menu ou bouton 112 longueur de la page 39
messages 135 produit 201
derreur Voir erreurs 164 page web
mthode longueur 39
de conception 211 poids 40
des incidents critiques 220 paiement 67
tri par carte 27 panel utilisateurs 20, 215, 240
Index 297
panier 66, 204, 206 rutilisabilit 3

paper prototyping 15, 231 ribbon 110
parcours visuel 32 rollover 98
PDA 12
perception 180
S
personas 221
phonographe 249 SAB 128
pistes graphiques 230 Saisies obligatoires et facultatives 120
plan de site 71 saturation 189
polices de caractres 154, 185, 198 Schneiderman B. 133
lisibilit 200, 265 slection 113
Pop-up menu Voir menu contextuel 109 site internet
positionnement 30 ciblage 20
prvention des erreurs 167 contenu 19
processus organisation visuelle 179
de dtection 146 vie du site 4
par tape 63 site web 5
processus itratif XII situation de travail 219
profil utilisateur 20 smartphone 61
progiciel bancaire 128 soulignement 145, 186
prototypage 228 souris 96
papier 15 sous-menu 76
proximit Voir groupement 187 spcificits culturelles 157
puces 197 splash screens 44
pyramide inverse 141, 142 Spool J. 179
statistiques 6
R dutilisation 6
raccourcis story-boards 231
clavier 90 survol 98
gestuels 102 souris 98
radio bouton 113
Raskin, J. 89
T
recherche thmatique 70
recouvrement 41 tablette 10
rdaction 136, 172 tche 22, 219, 258
web 141 tactile 10, 99, 208
regard 32 accessibilit 34
regroupement Voir groupement 187 taille 185
rsolution dcran 38 teinte 189
retour utilisateur 265 tlchargement 83
Return On Investment 2 temps de rponse 125
russites commerciales 3 terminal de vente 208
test 235 utilisabilit XI, 214

dutilisabilit 236 bnfice 4, 8
de perception 235, 243 dfinition XII
du coffre 84 russites commerciales 3
navigation 84 utilisateur moyen 214
utilisateur 13, 236 utilitaires 60
utilit XI
texte 197
Voir langage de linterface 133
thorie V
de laction 92, 256 vue globale 53
de la forme 179
tooltip 79 W
trac rgulateur 30
WAP 12
traduction 148 web 4
traitement des erreurs 159 rdaction 141
tri par carte 27, 28, 224 wireframe 228
trouvabilit 226
tuilage 41 Z
zone
de manipulation 37
U
Panier 204
Usaddict XV zoning 230

Ergonomie Des Interfaces

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ergonomie Des Interfaces

Transféré par

Droits d'auteur :

Formats disponibles

JEAN-FRANOIS NOGIER

Chapitre 1 Concevoir des interfaces ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Chapitre 2 Organiser linformation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Chapitre 3 Construire la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.4 Les lments du systme de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Chapitre 4 Crer linteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Chapitre 5 Communiquer avec lutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

5.2.3 Traduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Chapitre 6 Prsenter linformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

6.3.3 Choix des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

Chapitre 7 Mthodes de conception des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Annexe A Ltre humain en situation de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Annexe B Critres ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Annexe C Check-list de conception dun site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Trente rais se runissent autour dun moyeu.

Lutilit est la capacit de lobjet servir la ralisation dune activit humaine,

Les enjeux de lergonomie

Une dmarche pragmatique

du dveloppement logiciel, lenfer est pav de bonnes intentions et malgr toute

La cinquime dition de louvrage

Le cinquime chapitre, Communiquer avec lutilisateur, traite du langage de

Cest ma "bible" au travail !

1.1 Les enjeux de la conception ergonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 LES ENJEUX DE LA CONCEPTION ERGONOMIQUE

avec linterface va conditionner lefficacit avec laquelle il atteint ce but et donc la

1.1.2 Les bnfices de lergonomie

Pour une ligne de produit logiciel, la dmarche ergonomique est un vecteur de

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

Un document, gnralement appel guide de style, ou charte ergonomique, dfinit

1.1.3 Quelques russites commerciales

nombreux employs. Ainsi, Ameritech, une compagnie amricaine de tlphone, a

1.2 ERGONOMIE DU WEB

1.2.1 Pourquoi faire des sites web faciles utiliser ?

1.2.2 Linternaute est gnralement le client

1.2.3 Concevoir un site web pour ses utilisateurs

Dfinir le processus de fonctionnement du site.

Le processus de fonctionnement du site doit tre mis en place ds la phase de

Connatre son public et inciter au dialogue.

Rpondre aux utilisateurs.

apprci. Il permet dtablir un climat constructif dchanges et de confiance qui

Suivre les statistiques dutilisation.

Les statistiques dutilisation permettent dtablir la topologie de frquentation du

Prvoir les cas derreur.

Suite une rorganisation du site ou une saisie errone de ladresse de la page,

Mettre jour rgulirement le site, maintenir les liens externes.

1.3 ERGONOMIE DES INTRANETS

1.3.1 Les enjeux de lintranet

lorganisation de lintranet a t revue, faisant conomiser 10 millions de dollars par

1.3.2 La navigation : principale difficult des intranets

Faciliter la navigation et la recherche dinformations.

Les intranets sont volumineux. De ce fait, la navigation y est difficile. Permettre

Calquer la structure du site sur lorganisation de lentreprise.

Afin de permettre aux salaris de se reprer facilement, il est conseill de structurer

Dfinir un modle de page unique pour lensemble de lintranet.

Afin de permettre lutilisateur de se reprer facilement entre les rubriques, la

1.4 ERGONOMIE TACTILE ET MOBILE

1.4.1 Concevoir pour de petits crans

1.4.2 Linteractivit au bout des doigts

Linteraction tactile implique toutefois dautres rgles. Le doigt, ce pointeur

1.5 CAS PRATIQUE : DOVADIS, UN LOGICIEL DE

1.5.2 Une premire version peu intuitive

Figure 1.8 La premire version de linterface du logiciel Dovadis

Le manque de guidage, des libells peu explicites et un graphisme aux couleurs

1.5.3 Des groupes de travail regroupant les diffrents mtiers