✐ ✐

“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page III — #3

✐ ✐

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page IV — #4
✐ ✐

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page V — #5
✐ ✐

Table des matières

AVANT-PROPOS XI

CHAPITRE 1 • CONCEVOIR DES INTERFACES ERGONOMIQUES 1

Les enjeux de la conception ergonomique 1
Du besoin à l’usage 1
Les bénéfices de l’ergonomie 2
Quelques réussites commerciales 3
Ergonomie du web 4
Pourquoi faire des sites web faciles à utiliser ? 4
L’internaute est généralement le client 4
Concevoir un site web pour ses utilisateurs 5
Proposer une expérience web mobile 7
Ergonomie des intranets 9
Les enjeux de l’intranet 10
La navigation : principale difficulté des intranets 10
Ergonomie tactile et mobile 12
Les contextes d’usage des smartphones et tablettes 13
Concevoir pour de petits écrans 14
Tablette : plus d’espace pour enrichir l’expérience 15
L’interactivité au bout des doigts 17
Ergonomie d’une application mobile 18
Cas pratique – guichet-entreprises.fr : Ergonomie & Dématérialisation 21
Guichet Entreprises : dématérialiser la création d’entreprise 22
Dématérialiser et tester auprès des usagers 22
Maquetter pour valider l’interface avant de développer 23
L’UX pour réduire la durée du projet 24

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page VI — #6
✐ ✐

VI UX Design

CHAPITRE 2 • ORGANISER L’INFORMATION 25

Identifier le contenu 25
Cibler les attentes des utilisateurs 26
Transmettre l’information 26
Architecture de communication 27
Architecture de l’information 28
Organiser selon la tâche 28
Organiser selon le contenu 32
Agencer pour interagir 35
Organiser l’espace 35
Le regard de l’utilisateur 36
Parcours visuel d’une page web 37
Accessibilité des éléments de l’interface 39
Zones de manipulation 40
Les dimensions de l’écran 43
Longueur des pages web 44
Poids des pages web 46
Multifenêtrage 46
Concevoir la page d’accueil 48
Le responsive web design 51
Cas pratique – Refonte de l’intranet de l’Enseigne La Poste 60
Le tri par cartes pour organiser les contenus 60
Une utilisation quotidienne facilitée pour les 55 000 agents de La Poste 62

CHAPITRE 3 • CONSTRUIRE LA NAVIGATION 63

Principes ergonomiques de navigation 63
Concevoir le système de navigation 68
Barre de navigation 68
Navigation contextuelle 70
Navigation web 71
Navigation sur smartphone 75
Processus par étapes : exemple du tunnel d’achat 79
Naviguer autrement dans une interface 83
Moteur de recherche 83
Plan de site 85
Les éléments du système de navigation 87
Le fil d’Ariane 87
Les onglets 87
Les menus déroulants 89
Les boutons de navigation 92
Les liens 94
Vérifier la navigation 98
Cas pratique – Photoweb : développer ses photos avec une application mobile
en toute simplicité 98
Une application mobile pour personnaliser les produits photos 98

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page VII — #7
✐ ✐

Table des matières VII

CHAPITRE 4 • CRÉER L’INTERACTION 103

Interagir avec l’interface 103
Clavier 104
Manipulation directe 105
Souris 110
Interaction tactile 113
Les éléments d’interaction 119
Boutons 119
Menus 121
Éléments de sélection 127
Formulaires et champs de saisie 130
Temps de réponse 140
L’attente pour l’utilisateur 140
Minimiser l’attente 141
Cas pratique – Lyonnaise des Eaux : un portail client mobile first 143
Une refonte web responsive 143
Tout Sur Mon Eau : Un réseau de sites pour simplifier les démarches 144
Une conception centrée client et tactile (mobile first) 144
Co-concevoir avec les utilisateurs et l’équipe projet 144
Une expérience client facilitée, enrichie et récompensée 145

CHAPITRE 5 • COMMUNIQUER AVEC L’UTILISATEUR 149

Le langage de l’interface 149
Libellé des commandes 149
Messages 151
L’écriture web 155
Design émotionnel 160
Internationalisation des interfaces 162
La page d’accueil 162
 Dunod – Toute reproduction non autorisée est un délit.

Choisir sa langue 163

Traduction 164
Localiser l’interface 166
Lecture du texte 170
Spécificités culturelles 173
Méthodologie 174
Traitement des erreurs 174
Types d’erreurs 174
Messages d’erreur 178
Prévention des erreurs 180
Correction des erreurs 182
Aide et assistance à l’utilisateur 182
Différentes aides 183
L’ergonomie de l’aide 183
Rédiger une aide efficace 185

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page VIII — #8
✐ ✐

VIII UX Design

Cas pratique – SIRIUS NG : le compagnon du conducteur SNCF 187

Une dématérialisation ergonomique pour le conducteur SNCF 187
L’application SIRIUS 188
Une démarche BYOD (Bring your own device) 188
Une démarche centrée utilisateur en mode agile 188
Un taux de satisfaction de plus de 90 % 188

CHAPITRE 6 • PRÉSENTER L’INFORMATION 191

Perception des informations 191
Les lois de la perception 191
Hiérarchie visuelle 193
Techniques de mise en évidence 193
Animation 195
Couleur de fond 195
Graisse 196
Police de caractères 197
Soulignement 197
Forme 197
Proximité 197
Encadrement 199
La couleur 199
Composantes de la couleur 200
Codage couleur 201
Choix des couleurs 203
Méthode de choix des couleurs 204
Les icônes 204
Construction des icônes 205
Recommandations 205
Le texte 207
Liste à puces 207
Polices de caractères 209
Présentation des produits pour l’e-commerce 211
La page produit 211
La zone Panier 213
La page Panier 215
Cas pratique – Logista France : une démarche ergonomique pour concevoir un nouveau terminal
de vente 217
Un nouvel outil pour un nouveau métier 217
Une conception centrée sur l’usage 217
Des ateliers de co-création avec les équipes marketing 218
Un design épuré et novateur 219
Une utilisation quotidienne intensive 219

CHAPITRE 7 • MÉTHODES DE CONCEPTION UX 221

Conception orientée utilisateur 221
L’utilisateur moyen n’existe pas 221

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page IX — #9
✐ ✐

Table des matières IX

Les étapes de la conception UX 222

Le Design Thinking 223
La méthode du Design Sprint 226
Le Lean UX 230
Recherche utilisateur 233
Étude ethnographique 233
Interview utilisateur 235
Focus group 237
Modélisation de la tâche 239
Job-to-be-Done 241
Personas 243
Cartographier l’expérience 246
Cartographie du parcours client 247
Carte d’expérience 251
Service blueprint 253
Carte d’empathie 257
Conception 258
Atelier d’idéation 259
Tri par carte 263
La méthode OOUX 266
Design Studio 275
Maquettage 278
Conception mobile first 283
Atomic Design 285
Design System 288
Évaluation ergonomique 291
Audit ergonomique 292
Test de perception 294
Test utilisateur 295
Eye-tracking 303
Test A/B 306
Questionnaire en ligne 308
 Dunod – Toute reproduction non autorisée est un délit.

Journal de bord 310

Derniers conseils 312

CONCLUSION 315

ANNEXE 317
L’être humain 318
Modèle du processeur humain 318
Théorie de l’action 320
Tâche et activité 322
Critères ergonomiques 325
Compatibilité 325
Guidage 326
Homogénéité 329
Flexibilité 329

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page X — #10
✐ ✐

X UX Design

Contrôle utilisateur 330

Traitement des erreurs 330
Charge mentale 332
Check-list d’évaluation ergonomique 332

RÉFÉRENCES 335

INDEX 347

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page XI — #11
✐ ✐

Avant-propos

Trente rais se réunissent autour d’un moyeu.

C’est de son vide que dépend l’usage du char.
On pétrit de la terre glaise pour faire des vases.
C’est de son vide que dépend l’usage des vases.
On perce des portes et des fenêtres pour faire une maison.
C’est de leur vide que dépend l’usage de la maison.
C’est pourquoi l’utilité vient de l’être, l’usage du non-être.
Lao-Tseu

Chaque jour, le digital prend une place grandissante dans notre vie quotidienne ; au
bureau, dans la rue, mais aussi dans nos foyers où la tablette a trouvé sa place. De
nombreux objets de la vie de tous les jours : téléphone, montre, télévision, enceintes,
etc. sont maintenant « connectés ».
Ces objets, rendus « intelligents » par le numérique, ont été conçus pour nous faciliter
la vie. Effectivement, ils nous aident et nous permettent de réaliser facilement certaines
tâches qui, sans eux, auraient demandé beaucoup de temps et d’énergie.
Mais qui n’a jamais éprouvé des difficultés à les utiliser ? Qui n’a pas eu à ouvrir
le mode d’emploi de sa box avant d’enregistrer son émission favorite ? Qui n’a jamais
ressenti ce sentiment de frustration de ne pas pouvoir utiliser pleinement un objet,
faute de savoir comment s’en servir ? Nul doute que ces machines nous sont utiles,
mais elles ne sont pas toujours facilement utilisables...
En fait, l’usage d’un instrument se caractérise selon deux dimensions : son utilité et
son utilisabilité1 .
L’utilité est la capacité de l’objet à servir la réalisation d’une activité humaine, tandis
que l’utilisabilité représente la facilité d’emploi de cet objet.

1. « Utilisabilité » est une traduction littérale 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. L’ergonomie est une science qui a pour objet l’étude du travail humain, tandis que l’utilisabilité
est une caractéristique de l’objet lui-même. C’est donc par abus de langage que nous emploierons
dans cet ouvrage le terme « ergonomie » à la place de « utilisabilité ».

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page XII — #12
✐ ✐

XII UX Design

Considérons, par exemple, deux objets dédiés à une utilisation similaire : la combi-
naison de plongée et le scaphandre. Ils relèvent de la même utilité : permettre de se
déplacer sous l’eau. Cependant, le scaphandre, du fait de son poids et de la connexion
permanente avec la source d’air, est d’une utilisabilité moindre que la combinaison
qui offre une plus grande autonomie. Les plongeurs l’ont vite compris : depuis que la
combinaison de plongée a été inventée, le scaphandre n’est quasiment plus utilisé...
L’instrument dont l’utilisabilité est la meilleure a été choisi.
L’utilisabilité est la capacité de l’objet à être facilement utilisé par une personne
donnée pour réaliser la tâche pour laquelle il a été conçu. La notion d’utilisabilité englobe
à la fois la performance de réalisation de la tâche, la satisfaction que procure l’utilisation
de l’objet et la facilité avec laquelle on apprend à s’en servir.
Cette qualité concerne tout type d’instrument destiné à aider l’être humain. Nous
nous intéressons ici à l’utilisabilité des applications digitales.
Les auteurs anglais emploient généralement le terme « User Experience » pour dési-
gner l’utilisabilité. C’est une notion plus globale ; il s’agit de l’expérience complète vécue
par l’utilisateur lorsqu’il se sert de l’application et du service qu’elle procure. Aujour-
d’hui, dans un monde où les applications sont ubiquitaires (l’utilisateur commence sur
son smartphone puis continue sur sa tablette ou son ordinateur), nous ne pouvons
plus tenir compte uniquement de l’interaction sur un seul dispositif. L’usage est devenu
une expérience globale. C’est pourquoi, nous préférerons à « utilisabilité », le terme
« Expérience Utilisateur » dont l’acronyme est UX par référence au terme anglais User
eXperience.

Les enjeux de l’expérience utilisateur (UX)

Lorsqu’une application est employée à des fins professionnelles, son utilisabilité est
essentielle car elle détermine la performance du salarié. Une application facilement
utilisable permettra de réaliser rapidement la tâche prévue, sans perte de temps et
avec moins de stress. Pour une entreprise, l’expérience utilisateur est un critère de
choix important ; non seulement la productivité en dépend, mais aussi la qualité de
travail.
La vie de tous les jours nous le montre : l’ergonomie conditionne la réussite commer-
ciale d’une technologie. N’est-ce pas la facilité d’utilisation qui a permis à Apple de tenir
le haut du marché chez tous les « allergiques à l’informatique », tandis qu’à l’inverse,
Linux comblait les informaticiens par sa puissance et sa concision ?
Le succès commercial d’un produit numérique n’est pas uniquement lié à sa techni-
cité. Le choix du consommateur se porte vers l’application la mieux adaptée à son besoin
et à ses compétences. L’utilisabilité est un critère de choix au moment de l’achat, au
même titre que le coût ou l’esthétisme du produit. Mais c’est aussi, et surtout, un facteur
de fidélisation ; le client achète « les yeux fermés » lorsqu’il est sûr de pouvoir utiliser
facilement le produit. À tel point qu’en général, il est prêt à faire des concessions en
termes de fonctionnalités et de performances lorsqu’il sait l’outil agréable à utiliser et
qu’il ne perdra pas de temps à apprendre à s’en servir.
Échaudés par quelques mauvaises expériences, les clients sont vigilants. Lors du
développement de systèmes « à risque » tels que les salles de contrôle de centrale
nucléaire ou les centres de contrôle de la circulation aérienne, l’utilisabilité est mainte-
nant considérée comme un critère d’acceptation à la livraison du système final.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page XIII — #13
✐ ✐

Avant-propos XIII

Une démarche pragmatique

La clé de la réussite d’un projet digital n’est donc pas seulement technique, c’est aussi
la prise en compte, tout au long du développement, de l’expérience utilisateur. Pour
cela, il importe de mettre en place un processus itératif. En effet, dans le domaine du
développement, « l’enfer est pavé de bonnes intentions » et malgré toute l’attention
qu’on y porte, jamais la première version d’une application ne sera satisfaisante. Plutôt
que de chercher à faire bien du premier coup, il est préférable de réaliser rapidement
une maquette et de la faire tester par les utilisateurs. Chaque nouvelle maquette va
s’enrichir des améliorations demandées par les utilisateurs. Un prototype va émerger
et les utilisateurs vont progressivement être en mesure de réaliser des tâches de plus
en plus complexes pour lesquelles l’application a été conçue.
Bien entendu, travailler à partir de prototypes et impliquer l’utilisateur dans la
conception du produit ne veut pas dire partir de zéro et réinventer la roue ! De nom-
breuses expérimentations ont été menées en ergonomie digitale. Elles ont permis d’éla-
borer un certain nombre de recommandations qui vont servir de point de départ au
développement du premier prototype. Suivre ces recommandations permet d’éviter les
principaux écueils afin de se concentrer sur les particularités de l’application.
Dans ce livre, nous donnons pour chacune des étapes de la conception, des règles
visant à améliorer l’expérience utilisateur. Mais il ne s’agit pas de recettes de cuisine !
Certaines de ces règles sont contradictoires tandis que d’autres peuvent être remises
en cause en fonction du contexte. Elles ne doivent pas être appliquées à la lettre
sans prendre en compte l’utilisation effective de l’application. Ces recommandations
permettent d’orienter les choix de conception en s’appuyant sur les expérimentations
menées dans le domaine. Il reste ensuite à valider le design de l’interface en situation
réelle : c’est le rôle des tests utilisateurs.

Audience
Cet ouvrage est un guide pratique de conception des interfaces digitales. Il donne
les règles et les principes ergonomiques à prendre en compte à chaque étape de la
définition de l’interface utilisateur, qu’il s’agisse d’un logiciel, d’une application web,
d’un site internet, d’une application mobile ou tactile.
Ce livre s’adresse à toutes les personnes impliquées dans la conception et le dévelop-
 Dunod – Toute reproduction non autorisée est un délit.

pement d’interfaces, en particulier celles en charge des spécifications et de l’interface

homme-machine, mais aussi les chefs de projet et les responsables marketing. Dans la
mesure où ces interfaces se rencontrent et s’utilisent au quotidien, ce livre concerne
autant les applications logicielles que les sites web, utilisés aussi bien au bureau, chez
soi ou en mobilité.
Dans la mesure où l’expérience utilisateur naît de la relation qui s’établit entre l’ap-
plication et son utilisateur, nous nous intéresserons principalement à la conception des
interfaces homme-machine. Dans un système informatique, l’interface homme-machine
représente la partie du logiciel qui permet à l’utilisateur d’interagir avec le programme
informatique.

La septième édition de l’ouvrage

Depuis presque vingt ans, cet ouvrage a été lu, relu, exploité et utilisé par de nombreux
chefs de projet, développeurs et concepteurs d’interface. Les interfaces et l’informa-
tique en général ont beaucoup évolué. Nous ne pouvons plus réduire la conception des

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page XIV — #14
✐ ✐

XIV UX Design

interfaces aux logiciels et au web. Désormais, les interfaces se déclinent également sur
d’autres dispositifs, en particulier les smartphones et les tablettes tactiles.
Les vingt ans de l’ouvrage correspondent à peu près aux vingt ans d’Usabilis. Vingt
années au cours desquelles nous avons mis en œuvre les recommandations et les
méthodes de ce livre. Ces expériences partagées sur des projets variés nous ont montré
l’importance et la richesse des regards croisés et du mélange de compétences pour
concevoir une interface réussie.
Les premières éditions de l’ouvrage ont été construites à partir du support de mes
cours et des formations Usabilis. La précédente édition s’est enrichie de l’expérience
acquise lors de nos interventions auprès des équipes de développement et des éditeurs
de logiciel. Nous y avons présenté des exemples concrets d’applications pour lesquelles
nous avons mis en œuvre la démarche UX. Je tiens à remercier nos clients qui ont
accepté de dévoiler ainsi une partie de leurs « secrets de fabrique ».
Cette édition a été réécrite en appliquant la démarche UX. Dans un premier temps,
nous avons demandé aux consultants d’Usabilis de conduire une revue experte de
l’ouvrage faisant ainsi ressortir différents points d’amélioration. Ensuite, nous avons
réalisé une enquête auprès de nos lecteurs qui nous a permis de mieux comprendre leurs
attentes et surtout l’usage qu’ils font de l’ouvrage. Puis, nous avons essayé de prendre
en compte le plus grand nombre de retours et finalement, d’améliorer l’utilisabilité du
livre et donc l’expérience des lecteurs.
La principale nouveauté de la septième édition est le dernier chapitre qui présente
les méthodes les plus fréquemment utilisées dans un projet UX. En vingt ans, le domaine
de l’ergonomie digitale a gagné en maturité. De nombreuses méthodes adressant les
différentes phases de la démarche ont été imaginées et mises en œuvre. C’est pour-
quoi, le chapitre 7 a été considérablement étoffé, de manière à décrire l’ensemble des
méthodes UX utilisées actuellement.

Organisation du livre
Le livre est organisé selon les différentes étapes du processus de conception orienté
utilisateur (UX), qui fournit une base commune et invariante quelle que soit l’interface
à créer.
Cette approche présente également l’intérêt de répondre chapitre par chapitre aux
questions que se posent les concepteurs d’interface au fur et à mesure de la réalisation :
• Le premier chapitre, Concevoir des interfaces ergonomiques, introduit la
démarche de conception UX et les enjeux relatifs à la diversité des interfaces
actuelles et à venir.
• Dans le deuxième chapitre, Organiser l’information, nous abordons la question de
la définition du contenu informationnel, celle de l’organisation des informations à
l’écran ainsi que le Responsive Web Design qui consiste à concevoir des interfaces
s’adaptant au dispositif de lecture (smartphone, tablette ou ordinateur).
• Dans le troisième chapitre, Construire la navigation, nous présentons les méthodes
pour concevoir la navigation ainsi que les éléments de l’interface qui permettent
de réaliser le système de navigation.
• Le quatrième chapitre, Créer l’interaction, regroupe les recommandations ergono-
miques concernant les moyens d’interaction (clavier, souris, doigt) et les éléments
d’interaction affichés à l’écran sur ordinateur et sur mobile.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page XV — #15
✐ ✐

Avant-propos XV

• Le cinquième chapitre, Communiquer avec l’utilisateur, traite du langage de l’inter-

face, c’est-à-dire la manière dont l’application informatique dialogue avec l’utilisa-
teur (libellés, messages). Nous abordons également dans ce chapitre le traitement
des erreurs et l’aide en ligne.
• Le sixième chapitre, Présenter l’information, fournit les recommandations pour
habiller graphiquement les écrans : choix des couleurs, techniques de mise en
évidence, choix des polices de caractères.
• Le septième et dernier chapitre, Méthodes de conception UX, donne l’état de
l’art des méthodes utilisables à chaque étape de la conception de l’application,
en particulier l’étude ethnographique, la conception de l’architecture de l’informa-
tion, le maquettage de l’interface, les tests utilisateur et bien d’autres. Ce cha-
pitre s’adresse aux chefs de projet désireux de suivre un processus de conception
« orientée utilisateur » (UX Design). Il intéressera également les personnes en
charge de l’évaluation d’un logiciel car il présente différentes méthodes d’évalua-
tion.
• En annexe, on trouvera une présentation des travaux majeurs en psychologie
cognitive sur lesquels s’appuie l’ergonomie digitale, en particulier le modèle du
processeur humain et la notion de critères ergonomiques.
• Enfin, pour en savoir plus sur la pratique de l’utilisabilité, la bibliographie fournit,
outre les principaux ouvrages du domaine, les adresses internet des sites traitant
de l’ergonomie digitale et des ressources en ligne pour la conception d’interfaces.

R ESSOURCES NUMÉRIQUES

Retrouvez des compléments de l’ouvrage sur le blog Usabilis : www.usabilis.com/blog.

L’auteur
 Dunod – Toute reproduction non autorisée est un délit.

Jean-François Nogier – Ce livre est le fruit du parcours professionnel de Jean-François

Nogier. Tout d’abord au centre scientifique IBM France, il a mené des recherches sur la
communication entre l’homme et la machine, s’intéressant à la façon dont l’ordinateur
pourrait produire des textes semblables à ceux d’un être humain. Ensuite chez Thales, il
a participé au développement de nombreux centres de contrôle aérien en conseillant les
équipes de développement sur la conception des postes de travail pour les aiguilleurs
du ciel. Puis, comme web manager, il a conduit plusieurs programmes internes liés aux
technologies web au sein du groupe Thales.

En 2002, Jean-François Nogier fonde Usabilis, une

des premières sociétés de conseil UX en France,
spécialisée dans la conception des interfaces.
Depuis 18 ans, Usabilis accompagne les maîtrises
d’ouvrage dans la conception des services en ligne
et des produits digitaux.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page XVI — #16
✐ ✐

XVI UX Design

Remerciements
L’ouvrage est issu du manuel des formations que j’ai dispensé à l’Université Paris-
Dauphine, Supélec et l’Institut National des Télécommunications. Je remercie les élèves,
les stagiaires et les responsables de ces formations.
Cet ouvrage est aussi le fruit d’échanges et de discussions sur la pratique de l’UX.
Mes remerciements vont à tous ceux qui placent le respect de l’utilisateur comme une
exigence professionnelle. Merci aux consultants d’Usabilis de m’avoir fait partager leur
passion de rendre les technologies utilisables.
Je remercie également Isabelle Riquier et Léonore Turquin pour leur relecture atten-
tive de l’ouvrage, ainsi que les nombreux lecteurs qui ont répondu à l’enquête.
Un grand merci à Florent Dufier et à Valery Ly pour la patience et le professionnalisme
dont ils ont fait preuve dans la collecte et la réalisation des figures du livre.
Mes remerciements vont aussi à Thierry Bouillot pour son apport à la cinquième
édition, ainsi qu’à Jules Leclerc qui est intervenu sur les cinquième et sixième éditions.

« C’est ma "bible" au travail !

En tant que conceptrice multimédia, j’utilise le manuel des interfaces utilisateurs pour
appuyer mes préconisations auprès des différentes personnes constituant l’équipe d’un
projet (chef de produit, chef de projet, directeur artistique...). Je suis effectivement conduite
à argumenter certains choix auprès des équipes marketing ou technique. Mon rôle étant
de prouver qu’un site web facile à utiliser est une clé de la réussite commerciale (message
drôlement compliqué à faire passer car pour certains la simplicité équivaut à un manque
d’attractivité ! Pourquoi faire simple quand on peut faire compliqué... ?).
Je fais référence surtout aux chapitres concernant la navigation web et la page web. Les
illustrations et les recommandations m’aident à expliquer clairement les conseils que je
peux donner.
J’utilise souvent l’index du manuel pour effectuer une recherche rapide et je m’inspire
volontiers de la check-list pour poser des questions en réunion. Enfin, la synthèse des
critères ergonomiques (tableau) est un outil indispensable pour ne pas oublier l’utilisateur
(et pour se familiariser avec les noms barbares des critères !). »

Aude F RAISSE
Conceptrice multimédia sur le portail Orange.fr

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 1 — #17
✐ ✐

Concevoir

1 des interfaces
ergonomiques

« Le monde est complexe, tout comme les activités que nous réalisons. Mais nous ne devons
pas pour autant vivre en constante frustration. Non. Tout l’intérêt de la conception centrée
utilisateur est d’apprivoiser la complexité, de faire en sorte que ce qui semble être un outil
compliqué, devienne adapté au besoin, compréhensible, pratique et agréable à utiliser. »
Don Norman1 , Interactions Journal, 2008.

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

w Ergonomie du web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

w Ergonomie des intranets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

w Ergonomie tactile et mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

w Cas pratique – guichet-entreprises.fr : Ergonomie & 21

Dématérialisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

LES ENJEUX DE LA CONCEPTION ERGONOMIQUE

Du besoin à l’usage
L’utilisation d’un logiciel, d’un site web ou de toute autre interface informatique, repose
sur des besoins et des attentes. Qu’il s’agisse de trouver une information sur internet,
de poser des congés sur un intranet ou d’acheter un billet sur une borne interactive, le
principe reste le même : l’utilisateur veut atteindre un but. L’interaction avec l’interface
va conditionner l’efficacité avec laquelle il atteint ce but et donc la qualité de l’expérience
utilisateur.
Plus l’interface paraît facile à utiliser, plus elle est appréciée des utilisateurs. Quand il
s’agit d’un produit « interactif », cela devient un facteur de satisfaction et de confiance
envers la marque. Pour le grand public, des marques telles qu’Apple ou Philips intègrent
depuis de nombreuses années la démarche ergonomique dans la conception de leurs

1. Don Norman est un professeur émérite en sciences cognitives de l’Université de Californie. Il est le
cofondateur, avec Jakob Nielsen, du Nielsen Norman Group.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 2 — #18
✐ ✐

2 1 • Concevoir des interfaces ergonomiques

produits. De cette confiance naissent évidemment la popularité mais aussi la fidélité

des clients.
Car tout client, réel ou potentiel, est d’abord un utilisateur. Concevoir un produit
répondant aux besoins des utilisateurs garantit son succès. C’est en faisant participer
l’utilisateur tout au long de la conception du produit que la démarche ergonomique prend
tout son sens. Pour des applications professionnelles, impliquer l’utilisateur permet
également de diminuer la résistance au changement.

Les bénéfices de l’ergonomie

L’interface occupe une part importante du code d’un produit interactif ; en moyenne
48 %, voire 80 % pour les applications web. Par ailleurs, c’est un sujet de préoccupation
récurrent pour les concepteurs de produits informatiques ; il a été relevé que l’interface
homme-machine faisait l’objet d’environ un tiers des points abordés lors des réunions
d’avancement.
Dans le cadre d’un projet informatique, les méthodes de conception ergonomique
permettent de réduire les coûts de développement. En effet, en impliquant l’utilisateur
final dès la phase de conception du logiciel, l’équipe projet peut rapidement consolider
avec le client sa compréhension du besoin. Sachant qu’en moyenne 70 % à 80 % des
coûts sont engagés au début du projet, l’enjeu est important.
Nos clients évoquent généralement, pour des applications professionnelles (applica-
tions métiers), des gains d’environ 30 % obtenus en mettant en œuvre une démarche
ergonomique dès la phase de spécification. Ce gain correspond directement à une
réduction des coûts de maintenance corrective. En effet, lorsque les utilisateurs sont
impliqués dans la phase de spécification au démarrage du projet, il y a moins de raisons
pour qu’ils demandent des modifications par la suite, à plus forte raison lorsque des
maquettes ont permis de tester la viabilité opérationnelle de l’application.
Pour les applications informatiques employées en entreprise, l’intérêt est donc
double. D’une part, la démarche est source d’un gain de productivité pour les utili-
sateurs finaux, car l’interface sera plus rapide à utiliser, plus simple à apprendre et
minimisera le risque d’erreur. D’autre part, elle permet aux équipes informatiques de
réduire les coûts de maintenance corrective.
Bien entendu, la démarche de conception orientée utilisateur a également un coût.
Il est évalué à environ 6 % du budget global du projet. Cet investissement est relative-
ment faible au regard de l’importance des enjeux que sont la qualité du produit et la
satisfaction du client.
Pour une ligne de produit logiciel, la démarche ergonomique est un vecteur de réuti-
lisation. Elle permet de mettre en place un cycle d’améliorations s’appuyant sur un
ensemble de composants de base dont l’utilisabilité est affinée au fil des différentes
versions du produit : le design system.
Un document, appelé guide de style, ou charte ergonomique, définit les principes
ergonomiques suivis par le logiciel ainsi que le design graphique de son interface. Ces
principes, issus de précédents projets et de considérations ergonomiques générales,
orientent les spécifications des composants logiciels. Pour chaque projet, l’interface
homme-machine du système est construite à l’aide de ces composants de base. Puis, en
fonction des retours d’utilisation, le guide de style et le design system sont mis à jour,
et ainsi de suite.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 3 — #19
✐ ✐

Les enjeux de la conception ergonomique 3

Figure 1.1 La pratique de l’utilisabilité est un vecteur de réutilisation.

Quelques réussites commerciales

Comme la plupart des méthodes visant à améliorer la qualité d’un produit, il est difficile
d’estimer précisément le gain apporté par les démarches ergonomiques. Cependant,
quelques réussites commerciales ont permis de mesurer la répercussion de l’approche
sur les résultats financiers de l’entreprise.
L’une des premières entreprises à avoir adopté cette méthode a été Thomson Mul-
timédia. En 1988, le design ergonomique des télécommandes leur offre un véritable
avantage concurrentiel ; plusieurs millions en ont été vendus.
Une amélioration, même minime, de l’utilisabilité peut être à l’origine d’une économie
considérable à l’échelle de l’entreprise, lorsque le logiciel est utilisé par de nombreux
employés. Ainsi, Ameritech, une compagnie américaine de téléphone, a revu les écrans
 Dunod – Toute reproduction non autorisée est un délit.

de saisie utilisés par ses assistants de direction, réduisant de 600 ms le temps moyen
pour traiter un appel. Il en résulte, pour l’ensemble de la compagnie, un gain de 2,94 mil-
lions de dollars par an.
Souhaitant améliorer la qualité de sa relation client, Staples, spécialiste américain des
fournitures de bureau, décide de refondre son site selon une démarche ergonomique
(enquête utilisateur, audit ergonomique et tests utilisateur). Grâce au nouveau site, il
augmente de 67 % la fidélité de ses clients. La fréquentation du site augmente de 80 %,
lui procurant une augmentation de 491 % des revenus au troisième trimestre 2000.
En 2005, le webmaster du site de l’American 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 l’agencement des pages et le parcours
vers le bouton de don en ligne. Les dons augmentent de 60 % suite à cette refonte.
Pour finir, Mike Gebbia (fondateur et actuel PDG de AirBnB) reconnaît que malgré
un business model particulièrement attractif, AirBnB n’aurait pas rencontré le succès
si ses équipes ne s’étaient pas attachées à interroger les utilisateurs finaux sur leurs
usages et leurs attentes dès les premières versions du site.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 4 — #20
✐ ✐

4 1 • Concevoir des interfaces ergonomiques

Ces exemples montrent les principaux bénéfices de la démarche ergonomique : une

meilleure rentabilité (baisse des coûts de développement, de formation et de support)
ainsi qu’une plus forte attractivité du produit.

ERGONOMIE DU WEB
Un projet web est un projet d’entreprise. Mettre en place un site, communiquer, établir
une relation commerciale sur le web, est un choix stratégique. Au même titre que la
stratégie de l’entreprise se construit sur le long terme, le fonctionnement du site doit
être conçu dans la durée.

Pourquoi faire des sites web faciles à utiliser ?

Internet est une technologie décentralisée, offrant un support à des applications à la
fois domestiques(le réseau Internet grand public) et professionnelles : le réseau intranet
interne à l’entreprise ou extranet accessible également par les clients et les fournisseurs.
Les applications web2 touchent un public large, généralement en situation de mobi-
lité. En effet, dans les dernières années, l’usage d’Internet a fondamentalement changé.
Les internautes ne surfent plus uniquement depuis un ordinateur à leur bureau ou chez
eux. Ils vont sur Internet avec leur smartphone dans les transports en commun, à pied,
dans leur voiture pour chercher un itinéraire, se renseigner sur l’ouverture d’un maga-
sin. Chez eux, ils vont se servir d’une tablette dans le salon, parfois en parallèle d’une
autre activité. Ces devices mobiles, que nous avons toujours sur nous, font du web une
partie intégrante de notre vie de tous les jours. Qui n’a jamais recherché sur Google une
recette de cuisine ou une destination de voyage ?
Les sites web doivent donc tenir compte de cet usage ubiquitaire et quotidien. Tech-
niquement, ils doivent être conçus de manière à être utilisés à la fois sur ordinateur
(desktop), tablette et smartphone ; c’est ce qu’on appelle le « Responsive Web Design ».
Nous y reviendrons par la suite.

L’internaute est généralement le client

Sur Internet où le client peut changer de boutique d’un simple clic, l’ergonomie a un
impact direct sur la rentabilité du site. Alors que le web est peuplé de sites proposant des
services similaires, l’internaute préférera 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 n’arrive à
naviguer (...), la seconde fonction la plus populaire est le bouton d’aide, parce que la
fonction de recherche n’est pas opérationnelle »... IBM décide donc de revoir le design
de ses sites s’appuyant sur des principes ergonomiques simples tels que l’homogénéité
de présentation et l’accès rapide aux pages les plus fréquemment utilisées.
Le résultat est immédiat. En mars 1999, dans le mois qui suit le lancement des nou-
veaux sites, le trafic augmente de 120 % sur le site de commerce électronique ShopIBM,
tandis que les ventes grimpent de 400 % !

2. Le terme « web » est employé dans cet ouvrage pour désigner Internet en général, à la fois grand
public et professionnel (intranet et extranet).

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 5 — #21
✐ ✐

Ergonomie du web 5

Concevoir un site web pour ses utilisateurs

Un site ne peut pas être conçu comme une plaquette commerciale, c’est-à-dire « une
fois pour toutes ». Les internautes attendent une information actualisée, mise à jour
régulièrement.

Définir le processus de fonctionnement du site.

Le processus de fonctionnement du site doit être mis en place dès la phase de définition.
Dans les grandes lignes, le principe consiste à partir du plan du site et à identifier pour
chaque rubrique les responsables éditoriaux ainsi que la périodicité de mise à jour.
Il est d’ailleurs recommandé d’impliquer les responsables éditoriaux des différentes
rubriques dans la phase de conception du site.

Connaître son public et inciter au dialogue.

Un site web s’adresse toujours à un public, au même titre que les informations qu’il
propose, les produits et les services qu’il présente. De ce fait, connaître ses utilisateurs
est la meilleure façon de savoir si le contenu du site répond à leur besoin.
Inciter les visiteurs à partager leur impression sur le site et son contenu permet de
mieux connaître ce qu’ils aiment ou n’aiment pas, les problèmes qu’ils rencontrent, et
ce qu’ils attendent du site. Ces échanges avec le responsable éditorial, via les réseaux
sociaux par exemple, vont servir à améliorer le site, voire à concevoir les prochaines
versions.

Répondre aux utilisateurs.

Le dialogue doit s’établir dans les deux sens. Les réponses montrent aux utilisateurs
que leur point de vue est pris en considération. Ce comportement est généralement
apprécié. Il permet d’établir un climat constructif d’échanges et de confiance qui incitera
l’internaute à renouveler l’expérience.
Il est également envisageable de mener des enquêtes de satisfaction en ligne. Cepen-
dant, ce type d’enquête permet uniquement de récolter les opinions d’internautes uti-
lisateurs du site. Elle va servir à identifier des axes de fidélisation, mais elle ne permet
pas de toucher ceux qui ne vont pas sur site.
 Dunod – Toute reproduction non autorisée est un délit.

Suivre les statistiques d’utilisation.

Les statistiques d’utilisation permettent d’établir la topologie de fréquentation du site.
Ces données réelles vont servir à valider les hypothèses faites lors de la phase de
conception en termes de navigation et de typologie de contenu. Elles permettent d’ajus-
ter l’organisation du site afin que les pages les plus fréquemment utilisées soient les
plus faciles à atteindre. Les statistiques fournissent également une mesure réelle de la
configuration matérielle des visiteurs (navigateur, résolution graphique, taille d’écran,
système d’exploitation) et permettent d’adapter le site aux supports utilisés (ordinateur,
smartphone, tablette).

Prévoir les cas d’erreur.

Suite à une réorganisation du site ou à une saisie erronée de l’adresse de la page, il est
possible de renvoyer l’utilisateur vers une page prédéfinie lorsqu’il rencontre un lien
brisé (i.e. page 404). Dans ce cas, plutôt qu’un message d’erreur, il est préférable d’aider

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 6 — #22
✐ ✐

6 1 • Concevoir des interfaces ergonomiques

Figure 1.2 Cette page d’erreur conduit l’utilisateur sur une page présentant l’organisation
du contenu du site lui permettant ainsi de retrouver rapidement l’information qu’il cherchait.

l’utilisateur en l’orientant vers la page d’accueil ou en lui proposant de trouver ce qu’il

cherche à l’aide des grandes rubriques détaillées du site et du moteur de recherche.

Mettre à jour régulièrement le site, maintenir les liens externes.

Aussi utile soit-il, un site, n’est plus visité s’il ne change pas. D’ailleurs, connaissant par
avance son contenu, pourquoi le visiterait-on ? Il est important d’actualiser régulière-
ment les informations du site. Les nouveautés doivent apparaître clairement, si possible
dès la page d’accueil, afin que le visiteur régulier puisse en être informé immédiatement.
De même, il est préférable de vérifier régulièrement le bon fonctionnement des liens
vers les autres sites. Un lien « mort » dénote un certain laisser-aller dans la gestion du
site.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 7 — #23
✐ ✐

Ergonomie du web 7

Proposer une expérience web mobile

En quelques années, la manière de concevoir un site web a changé. Il se vend aujourd’hui
davantage de smartphones et de tablettes que de PC3 . En France, la majorité des inter-
nautes sont en fait des mobinautes ; l’accès à l’Internet mobile double chaque année4 .
Il est donc essentiel de proposer aux utilisateurs une expérience web satisfaisante sur
mobile.

Concevoir un site léger.

Les temps d’attente constituent un frein important dans l’expérience utilisateur. Dans
le contexte mobile, l’utilisateur aura parfois accès à un débit limité (Edge, 3G). Or, en
France, seulement 14,3 % des mobinautes5 sont prêts à attendre plus de 5 secondes
pour le chargement d’un site sur mobile.
Il faut donc veiller à concevoir des pages web qui s’affichent rapidement sur mobile.
Les images, comme les photos, sont les éléments les plus « lourds ». Il est donc impor-
tant de limiter le nombre et la taille de ces images. Par ailleurs, un soin apporté à
l’écriture du code des pages et à la puissance des serveurs favorise également un
affichage rapide.
 Dunod – Toute reproduction non autorisée est un délit.

Figure 1.3 Sur le site mobile de HSBC, il n’est pas possible d’ajouter un bénéficiaire
pour les virements. Pour ce faire, l’utilisateur doit utiliser un ordinateur de bureau.

3. Source : Panels Distributeurs, GFK Consumer Choices

http://marketing-webmobile.fr/2015/03/9eme-barometre-du-marketing-mobile-et-2eme-
anniversaire/
4. Source : http://www.blogdumoderateur.com/chiffres-internet/
5. Source : What Users Want from Mobile Compuware Corporation.

✐ ✐

✐ ✐
 ✐ ✐
“Nogier_7e” (Col. : FabBooksQuadri peronnalisé 172x250) — 2020/3/10 — 10:34 — page 8 — #24
✐ ✐

8 1 • Concevoir des interfaces ergonomiques

Proposer une expérience mobile au moins aussi riche que sur ordinateur.
Les mobinautes s’attendent à retrouver les mêmes contenus et les mêmes fonction-
nalités en se rendant sur un site depuis leur mobile. Une erreur serait de penser que
les utilisateurs ne veulent réaliser que des tâches simples et rapides sur smartphone.
La réalité est différente : le mobile est utilisé tout au long de la journée, y compris
dans des lieux où des ordinateurs sont souvent à disposition (domicile, lieu de travail)6 .
Proposer une version édulcorée du service dans sa version mobile risque de frustrer les
utilisateurs ou, pire, de les faire fuir.

Permettre de basculer entre les versions « mobile » et « classique ».

Quand deux versions du site sont proposées, il est important de permettre à l’utilisateur
d’accéder à la version « classique » pour qu’il puisse trouver des contenus qui n’appa-
raissent pas sur la version pour mobile. L’inverse est également vrai : l’utilisateur doit
pouvoir accéder à la version « mobile » depuis la version « classique ».

Figure 1.4 Sur le site mobile de la FNAC, il est possible d’accéder à la version « Site Web ».

Éviter d’imposer le téléchargement d’une application.

Lorsqu’une application proposant des fonctionnalités similaires au site est disponible,
il faut éviter de bloquer les mobinautes qui souhaiteraient consulter le site web depuis
leur mobile. Les utilisateurs risquent de se détourner d’un service qui rend obligatoire
le téléchargement d’une application.

6. Source : Compete’s Quarterly smartphone Report - Nielsen et Google.

✐ ✐

✐ ✐