Ergonomie - fnac-static.com...Généalogie et objectifs de l’ergonomie web † 14 Un site web...

36
Amélie Boucher 3 e édition Préface de d’Élie Sloïm Ergonomie web Pour des sites web efficaces © Groupe Eyrolles, 2007, 2009, 2011, ISBN : 978-2-212-13215-1

Transcript of Ergonomie - fnac-static.com...Généalogie et objectifs de l’ergonomie web † 14 Un site web...

A m é l i e B o u c h e r

� 3e éditionP r é f a c e d e d ’ É l i e S l o ï m

Ergonomieweb

Pour des sites web efficaces

© Groupe Eyrolles, 2007, 2009, 2011, ISBN : 978-2-212-13215-1

© Groupe Eyrolles, 2010

La première édition de l’ouvrage que vous avez entre les mains a étépubliée courant 2007. J’y pointais notamment l’importance, pour lesprofessionnels du Web, de connaître les techniques et les méthodes del’ergonomie. Beaucoup de professionnels ont en effet tendance à « faire »de l’ergonomie sans connaître les bases du métier et, pire, parfois sansmême savoir qu’il s’agit d’un métier.

À l’heure où paraît la troisième édition, objet d’une mise à jour com-plète, le paysage de l’ergonomie francophone a considérablement mûri :les technologies web et la conception d’interfaces homme-machine ontfait une entrée encore plus profonde dans les formations supérieuresd’ergonomie. De nombreux ergonomes commencent à connaître en pro-fondeur les technologies web, et de nombreux professionnels du Webont commencé à se former à l’ergonomie, notamment grâce à ce livre et àde nombreuses ressources dédiées à cette question.

Sur le terrain, l’intervention d’un ergonome web dans un gros projetn’est plus une exception et, que l’on parle d’expérience d’utilisateur,d’utilisabilité ou d’ergonomie web, cette approche n’est plus taboue outriviale pour le chef de projet web. Même si de nombreux projets sontencore traités en négligeant les phases de conception de personas, decréation de maquettes semi-fonctionnelles ou de test utilisateur, cesapproches sont de moins en moins considérées comme exotiques. Leurvaleur ajoutée est généralement comprise.

En ce sens, pour beaucoup de professionnels, et notamment ceux qui ontlu les ouvrages ou écouté les conférences d’Amélie, une étape a été fran-chie. Mais cette étape est encore insuffisante.

La deuxième étape consisterait, pour les chefs de projet web, à avoir en per-manence à leur disposition la trousse à outils de l’ergonome. Cet ouvragepeut servir à cet effet, mettant à votre disposition des méthodes, des techni-

Préface

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2010VI

ques, et surtout une approche de conception centrée sur l’utilisateur. Par lasuite, rien ne remplacera la pratique et l’expérience pour savoir quand etcomment agir.

Vous le verrez, ce qui vous est proposé n’est pas complexe. Au contraire, etvous pourrez le vérifier à la lecture, l’approche ergonomique est simple, maistous les concepteurs d’interfaces homme-machine vous le confirmeront, lasimplicité est l’une des choses les plus difficiles à obtenir. Elle n’est évidenteque lorsqu’on a réussi à l’obtenir. Autre postulat que l’on peut vérifier jouraprès jour : ce n’est pas parce que cela semble évident qu’il ne faut pas le faire.

De plus, si vous faites partie de ces professionnels ou amateurs éclairés quiont considérablement mûri au cours des dernières années sur le sujet, il esttemps alors d’évoquer un sujet qui me tient particulièrement à cœur : la sur-qualité. Les méthodes et outils que vous allez découvrir ici sont fondamen-tales. Vous devez les connaître et vous aurez sans doute besoin de plusieursannées d’expérience pour les maîtriser. Il vous faudra apprendre quelletechnique est intéressante et rentable, dans tel ou tel contexte. Certainestechniques peuvent s’avérer disproportionnées en fonction du niveau dequalité que vous voudrez atteindre. D’une certaine manière, au-delà de laconnaissance théorique et de la compréhension pratique, si ce livre doitvous conduire à réfléchir à la juste place de l’ergonomie dans la vie du projetweb, il aura été encore plus utile.

Enfin, outre les méthodes qui permettent de les concevoir, il faut se poser laquestion de l’évolution des interfaces en elles-mêmes. La quasi-totalité desexemples proposés dans les premières éditions a été renouvelée dans cetteédition. C’est parfaitement normal et ce n’est sans doute que le début. Àmon sens, et même si cela ne se voit pas encore sur toutes les interfacesactuelles, l’ergonomie web est à l’aube d’une révolution qui a déjàcommencé : celle du tactile.

Ce qui nous attend, c’est peut-être la disparition de la souris et du clavier entant que périphériques indépendants. Qui sait, ce sera peut-être l’appari-tion de nouveaux périphériques ou approches qui viendront modifier enprofondeur les interfaces.

En 2007, j’expliquais qu’Amélie faisait partie des ergonomes installés pourlongtemps dans le paysage. Je ne croyais pas si bien dire. Il me semble qu’ilreste un monde à explorer collectivement. Si j’ai la chance de pouvoirmettre à jour cette préface pour la septième ou huitième édition de cetouvrage en 2016 ou 2017, je suis prêt à prendre deux paris : les interfacesauront de nouveau considérablement évolué d’ici là, et Amélie sera toujourslà pour les décrypter, et nous montrer comment les concevoir.

Élie Sloïm

Table des matières

© Groupe Eyrolles, 2011 VII

AVANT-PROPOS............................................................ 1Internet change, nous aussi ! • 1Pourquoi ce livre ? • 1À qui s’adresse ce livre ? • 3Est-ce que mon site est concerné ? • 4Que vais-je trouver dans ce livre ? • 4Remerciements • 6

PREMIÈRE PARTIEINTRODUCTION À L’ERGONOMIE WEB.....................9

1. L’ERGONOMIE WEB, QU’EST-CE QUE C’EST ?................... 11L’ergonomie, pour considérer l’homme dans le rapport homme-machine • 12Généalogie et objectifs de l’ergonomie web • 14

Un site web ergonomique est un site utile et utilisable • 15La notion d’utilité • 16La notion d’utilisabilité • 16

Au départ : un utilisateur, des objectifs, un contexte • 17Objectif 1 : efficacité • 17Objectif 2 : efficience • 17Objectif 3 : satisfaction • 18

Intérêt et retours sur investissement • 18Les méthodes de l’ergonomie web • 21

Méthodes expertes • 21Méthodes participatives • 21

La place de l’ergonomie dans un projet web • 22

2. TOP 10 DES IDÉES REÇUES SUR L’ERGONOMIE ................ 25La sacro-sainte règle des 3 clics • 26

L’idée reçue en quelques mots • 26

Pourquoi faut-il se méfier de cette règle ? • 26Le bon côté de la règle, et comment aller plus loin • 28

Les internautes sont des idiots • 28L’ergonomie et le design, ennemis jurés • 29

Idée reçue et réalités du métier • 29Pourquoi l’ergonomie aime le design graphique • 30

Pas besoin d’ergonomie, on a fait un focus group • 33Faites-moi un site ergonomique • 34Les internautes lisent en F • 35L’ergonomie, c’est juste du bon sens • 36On le fera en HTML 5, en Ajax, etc. • 37Les internautes ne scrollent pas • 37Pour l’ergonomie, on verra à la fin • 39

L’idée reçue en quelques mots • 39Pourquoi faut-il commencer par l’ergonomie ? • 40

DEUXIÈME PARTIEDANS LA PEAU DE VOTRE INTERNAUTE : LES FONDEMENTS DE L’ERGONOMIE .................... 43

3. COMPRENDRE L’INTERNAUTE : D’ABORD UN ÊTRE HUMAIN.........45Découvrez et appliquez les théories de la Gestalt • 46

La loi de proximité • 47La proximité doit respecter la logique des contenus • 48La proximité au niveau microscopique • 49La proximité peut causer des soucis d’interaction • 51

La loi de similarité • 52Découvrez et appliquez la loi de Fitts • 54

Les éléments cliquables doivent être gros • 55Augmenter la taille réelle des éléments cliquables • 56Augmenter la taille virtuelle des éléments cliquables • 57

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2011VIII

Augmenter la surface cliquable des éléments cliquables • 57Augmenter la distance entre les éléments cliquables • 59

Les éléments cliquables doivent être proches • 60Découvrez et appliquez le concept d’affordance • 63

Optimiser l’affordance « vous pouvez me cliquer » • 64Attention aux affordances erronées • 65Optimiser l’affordance « vous pouvez interagir avec moi » • 66

Le nombre magique de Miller et la loi de Hick • 69Accessibilité visuelle et lisibilité • 70

Faciliter l’utilisation de moyens de contournement du mode visuel • 71Optimiser la lisibilité à l’écran • 72

Optimisation des couleurs • 72La différence de couleurs • 72La différence de brillance • 73

Optimisation des caractéristiques des textes • 73

4. DÉFINIR VOTRE INTERNAUTE : CRITÈRES ET MÉTHODE DES PERSONAS ........................... 77Une personne donnée dans un contexte précis • 78

La notion de tâche pour mieux cerner l’internaute • 79Les statistiques de visite, un atout majeur • 80Interroger les internautes • 82

Un persona pas comme les autres • 82Pourquoi avez-vous intérêt à inventer des personas ? • 83

Inventer des personas vous force à vous pencher réellement sur votre cible • 83Inventer des personas humanise votre cible • 83Inventer des personas donne des objectifs à votre cible • 83

Comment créer et utiliser des personas ? • 84Il existe différents types de personas • 84Combien de personas devez-vous créer ? • 85La création d’un persona est un travail collectif • 85Comment définit-on un persona ? • 86Communiquer sur les personas • 87

TROISIÈME PARTIELES RÈGLES DE L’ERGONOMIE WEB......................91

5. 12 RÈGLES POUR OPTIMISER L’ERGONOMIE DE VOTRE SITE.........93Règle n° 1. Architecture : le site est bien rangé • 95

Les regroupements sont logiques • 95La structuration met en avant les contenus clés • 97Les menus aident l’internaute à naviguer dans les contenus • 97

Contourner un site mal rangé • 98Règle n° 2. Organisation visuelle : la page est bien rangée • 98

Éviter le trop-plein d’informations • 98Réduire la quantité de mots sur les pages navigantes • 99N’afficher que les principaux éléments de navigation et d’interaction • 101

Afficher les éléments optionnels seulement si nécessaire • 101Supprimer les éléments d’interaction inutiles • 102N’afficher que les éléments d’interaction les plus utiles • 103

Différencier les quantités d’informations réelles et perçues • 103L’hétérogénéité visuelle augmente la charge informationnelle • 103Les images de fond augmentent la charge informationnelle • 103Les animations augmentent la charge informationnelle • 104

Démultiplier la valeur du pixel carré • 105Le remplacement d’informations au clic • 105Le remplacement d’informations au survol • 106L’apparition d’informations au survol • 108

La question de la publicité • 110Optimiser l’organisation et la hiérarchie visuelle • 111

Règle n° 3. Cohérence : le site capitalise sur l’apprentissage interne • 112

Les localisations sont cohérentes • 113Les appellations sont cohérentes • 114Les formats de présentation sont cohérents • 114Les interactions sont cohérentes • 115

Règle n° 4. Conventions : le site capitalise sur l’apprentissage externe • 115

Qu’est-ce qu’une convention ? • 117Respecter les conventions de localisation • 117Respecter les conventions de vocabulaire • 120Respecter les conventions d’interaction et de présentation • 121

Règle n° 5. Information : le site informe l’internaute et lui répond • 123

L’ordinateur informe et prévient l’internaute • 123Ne soyez pas avare d’informations • 123

Donner de l’information générale • 123Donner de l’information pour faciliter la navigation • 124Donner de l’information ponctuelle • 125

Informez, mais au bon moment • 127Informez pour augmenter votre force persuasive • 128

Tabl

e de

s m

atiè

res

© Groupe Eyrolles, 2011 IX

L’ordinateur répond aux actions de l’internaute • 130Donner du feedback aux actions de l’internaute • 130Visibilité du feedback • 130

Règle n° 6. Compréhension : les mots et symboles sont choisis minutieusement • 132

La bonne utilisation des mots sur le Web • 132Utilisez le vocabulaire ! • 132Le vocabulaire doit être compréhensible • 133

Le vocabulaire doit être orienté utilisateur • 133Le vocabulaire doit être exact et précis • 134Le vocabulaire doit être conventionnel • 134Attention à l’utilisation des métaphores • 134

Le vocabulaire doit être concis • 134Les symboles et codes doivent être compréhensibles • 135

Règle n° 7. Assistance : le site aide et dirige l’internaute • 136

Dirigez grâce à l’organisation et à la visibilité • 136Dirigez grâce aux affordances • 139

Les affordances permettent de repérer ce qui est cliquable • 139Les affordances permettent de repérer ce qui est utilisable • 139

Hiérarchisez vos call-to-action • 141Attention à ne pas diriger de façon erronée • 141Évitez d’avoir à diriger grâce à un modèle d’interaction adapté • 142Assistez votre internaute en tenant compte de ses besoins en termes de tâches • 144Assistez votre internaute en le suivant de très près • 145Fournissez de l’aide explicite en cas de besoin • 146

Règle n° 8. Gestion des erreurs : le site prévoit que l’internaute se trompe • 146

L’internaute ne doit pas faire d’erreur • 147La présentation du formulaire peut protéger contre l’erreur • 147

Éviter les erreurs grâce à l’indication des champs obligatoires • 147Éviter les erreurs grâce aux libellés et légendes des champs • 148Éviter les erreurs grâce à la taille des champs • 149Éviter les erreurs en utilisant les éléments de formulaire à bon escient • 150Éviter les erreurs par l’affordance générale de l’interface • 150

Le fonctionnement du formulaire peut protéger contre l’erreur • 151

Éviter les erreurs en demandant une confirmation pour les actions risquées • 151Éviter les erreurs en empêchant la saisie de données erronées • 152Éviter les erreurs en validant ou en corrigeant à la volée • 152

L’internaute doit facilement repérer et comprendre ses erreurs • 154

Faciliter le repérage de l’erreur • 154Fournir une explication précise de l’erreur • 155Faire preuve de courtoisie dans les messages d’erreur • 155

L’internaute doit facilement pouvoir corriger ses erreurs • 156Faciliter la correction grâce à l’explication de l’erreur • 156Faciliter la correction grâce aux mécanismes de gestion des erreurs • 157

Règle n° 9. Rapidité : l’internaute ne perd pas son temps • 158Faciliter les interactions • 158

Faciliter l’action de visée des éléments cliquables • 158Prendre en compte les besoins de votre internaute sur le plan fonctionnel • 158

Éviter les actions inutiles • 160Proposer pour simplifier la tâche • 160Des modes d’interaction orientés efficience • 161

Règle n° 10. Liberté : c’est l’internaute qui commande • 164Respectez les contrôles utilisateur conventionnels • 164Fuyez les actions au rollover • 164Flexibilité des actions utilisateur • 165Donnez la possibilité à l’internaute de contourner le système et d’agir dessus • 166N’induisez pas de comportement passif • 167

Le système n’est pas intrusif • 167Le système n’est pas lourd ou insistant dans ses propositions • 167Le système ne force pas l’utilisateur à voir quelque chose • 168

Éviter les introductions et fournir des entrées directes • 168Éviter l’affichage de pop-ups spontanées • 168

Le site n’agit pas à la place de l’internaute • 170Au secours, le site prend le contrôle de l’ordinateur • 170

Règle n° 11. Accessibilité : un site facile d’accès pour tous • 171Accessibilité physique • 172Accessibilité technologique • 172

La plate-forme de consultation est de l’ordre du bonus : adaptez le contenu • 173La plate-forme de consultation est stratégique : informez et guidez • 173

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2011X

Règle n° 12. Satisfaction de votre internaute • 173Satisfaire grâce au critère d’utilité • 174Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale • 175Satisfaire grâce à la qualité du service • 176Satisfaire grâce à la puissance et à la fiabilité technique • 176

En bref : 12 règles à utiliser à bon escient • 176

6. L’AUDIT ERGONOMIQUE : CONSEILS ET MÉTHODOLOGIE ......179Pratique, support et moyens de l’audit ergonomique • 180

L’évaluation ergonomique, une pratique multiforme • 180Support et périmètre de l’évaluation ergonomique • 182Normes, conventions, critères, checklists, etc. • 184

Structurer l’étude selon vos besoins • 186Les personas pondèrent les règles génériques • 186Les technologies vous mettent la puce à l’oreille • 187

Le type de site et son contenu impliquent des points clés à surveiller • 187

Conduire une analyse ergonomique • 188Seul ou à plusieurs ? • 188Le fil rouge : dans la peau de votre persona • 189Par où commencer ? • 190Les outils de l’audit ergonomique • 192

Les règles d’ergonomie, premier guide de travail • 192Logiciels et outils techniques • 193

Prendre des notes • 193Faire des captures d’écran • 193Tester la compatibilité technique • 195Évaluer l’accessibilité visuelle • 196Évaluer la forme générale du site • 200

Que faire de vos observations ? • 200Hiérarchisez vos observations • 200Les livrables de l’audit • 201La suite des événements • 201

QUATRIÈME PARTIELES ÉTAPES DE LA CONCEPTION WEB : PENSEZ VOTRE SITE DE A À Z ...........................203

7. DÉFINITION DES CONTENUS ET ANALYSE CONCURRENTIELLE......205Votre contenu répond à un besoin de l’internaute • 206

Quelle est votre utilité globale ? • 207Créez vos micro-utilités • 208

Comment imaginer et choisir des micro-utilités • 208Des exemples de micro-utilités • 209

Offrir la vue la plus complète possible d’un produit • 210Prendre en compte les comportements liés à l’achat • 212Précéder les interrogations des internautes • 213Simplifier la tâche des internautes en précédant leurs besoins fonctionnels • 214Prendre en compte les potentialisateurs d’action • 215

Pour énumérer vos contenus, exploitez toutes vos sources ! • 216

Que font les autres ? L’analyse concurrentielle en ergonomie • 219La démarche de l’analyse concurrentielle • 219

Principes de base de l’analyse concurrentielle • 219Définissez votre panel concurrentiel • 220

Qui sont vos concurrents ergonomiques ? • 220Combien de concurrents devez-vous analyser ? • 221

Analyses concurrentielles générales • 222Analyses concurrentielles détaillées • 223

8. ARCHITECTURER L’INFORMATION ET LES INTERACTIONS............227Ranger pour aider à trouver • 228Comment visite-t-on un site Internet ? • 229

La recherche par mot-clé : droit au but ! • 229La navigation ciblée : étape par étape • 230

Support : la navigation globale, un repère persistant • 230Support : la navigation locale, fille de la navigation globale • 231

La navigation libre, ou comment se promener sur le Web • 231Support : la navigation transversale, générée en fonction du besoin • 232

Rechercher ou naviguer, telle est la question • 233La raison pour laquelle on vient sur le site • 233Les préférences personnelles de l’utilisateur • 234Les objectifs poursuivis • 234La confiance envers le moteur de recherche et la navigation • 234Le type de site • 234La présentation des fonctions de recherche et de navigation • 235

Une organisation calquée sur les attentes de l’internaute • 235Source d’inspiration n° 1 : les objectifs et comportements utilisateur • 235Source d’inspiration n° 2 : les représentations mentales • 236Source d’inspiration n° 3 : allez voir ailleurs ! • 237Source d’inspiration interdite : votre propre vision des choses • 238

Tabl

e de

s m

atiè

res

© Groupe Eyrolles, 2011 XI

Concevez votre architecture de l’information • 239Mode d’emploi en deux étapes : catégoriser puis structurer • 239

La catégorisation : regrouper pour simplifier • 239Alphabet • 241Chronologie • 242Localisation géographique • 242Thème • 242Actions utilisateur • 242Cible utilisateur • 243

La structuration de l’information • 244Une structure hiérarchique représentée par les menus • 244Une structure secondaire représentée par des liens contextuels • 246Une structure floue représentée par des liens semés au gré du site • 247Une structure vivante • 247

Réaliser un plan de site • 248Bien choisir ses mots • 250

La quête du mot idéal • 250Intégrer les contraintes spécifiques du Web • 251

La concision : faites court ! • 251Prendre en compte les conventions de vocabulaire • 252

Traduire l’architecture par la navigation • 252Au-delà de la navigation : architecturer les parcours client et les interactions • 254En bref : obtenir des bases solides pour la suite • 257

9. PASSEZ À L’ÉCRAN : ZONINGS ET WIREFRAMES ............. 259Le zoning : un premier découpage • 261

Espace disponible et principes de répartition • 261L’espace horizontal : une limite maximale • 263L’espace vertical et la notion de fold • 263

Les types de zones • 264Le zoning par l’exemple • 265

Le wireframe : chaque zone en détail • 266Les différents types de wireframes • 267Qu’est-ce que je mets dans mon wireframe ? • 267

Textes et vocabulaire • 268Apparence et comportement des objets • 268

Apparence et comportement de classes d’objets • 269Apparence et comportement d’éléments individuels • 270

Le wireframe par l’exemple • 271Et la suite ? • 272

CINQUIÈME PARTIEMETTEZ VOTRE SITE À L’ÉPREUVE ..................... 275

10. LA MÉTHODE DU TRI DE CARTES POUR ORGANISER UN SITE....277La préparation du tri de cartes • 278

Le matériel du tri de cartes • 278Les participants au tri de cartes • 279

Déroulement d’un tri de cartes : les règles du jeu • 2801re étape : immersion • 2802e étape : validation et précision des contenus • 2813e étape : groupement • 2824e étape : nommage • 283Accompagner vos participants • 284

Les grands types de tris de cartes • 285Selon la liberté d’action des participants • 285

Tri de cartes ouvert : tout est possible • 285Tri de cartes fermé : une place pour chaque chose et chaque chose à sa place • 286

Selon le support du tri de cartes • 286Le tri de cartes physique • 287Le tri de cartes informatisé • 287

Selon votre panel de participants • 288Avec des internautes, pour s’adapter à leurs attentes • 288Avec des spécialistes, pour s’inspirer de leur expertise • 288

Selon le niveau de profondeur du tri de cartes • 289Extensions possibles au tri de cartes • 289

Ce que l’on peut tirer d’un tri de cartes : analysez les données • 290Le tri de cartes en bref : utilité et limites • 291

11. LES TESTS UTILISATEURS...........................................295Préparer votre test • 297

Les participants d’un test utilisateur • 297Des participants plus vrais que nature • 297Des participants représentatifs de votre cible réelle • 298

Genre • 298Âge • 298Métier et CSP • 299Rapport au site, à la marque ou à un domaine • 299Niveau d’expertise • 300Situation familiale, région, projets de vie, etc. • 300

La personnalité idéale du testeur • 301Plus ils jouent le jeu, mieux c’est • 301Plus ils s’expriment, mieux c’est • 302

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2011XII

Combien de participants sont-ils nécessaires ? • 302Oubliez les échantillons statistiquement suffisants • 303Nombre idéal et nombre acceptable de participants • 303Plus de participants ou plus de tests ? • 306

L’étape de recrutement • 307La logistique du recrutement • 307Présenter l’étude à vos invités : mystère et doigté • 308

Comment remercier les participants ? • 308Le support de test : tester quoi, à quel moment ? • 309

Prototype papier ou maquettes statiques à l’écran • 309Prototype semi-fonctionnel • 310Site finalisé • 312Récapitulatif et intérêts de supports multiples • 313

Plan de test et objectifs d’utilisabilité • 313Un test comme dans la vraie vie • 314« Nous voulons tester l’efficacité de la barre de navigation » • 314

Tester un élément d’interface en particulier • 315Excluez les tests comparatifs • 315

Réalisme des scénarios • 316Souplesse des scénarios • 317Nombre de scénarios • 318Au-delà des tâches... la compréhension du site • 318Effets d’ordre et contrebalancements • 319Les erreurs à éviter lors de l’écriture du plan de test • 320

Un plan de test ne doit pas utiliser les mêmes mots que le site • 320Un plan de test ne doit pas détailler les étapes permettant de réaliser la tâche • 320Un plan de test ne doit pas être un questionnaire • 321Un plan de test doit tester les missions du persona et non vos propres objectifs • 321Un plan de test ne s’écrit pas seul • 322

Les objectifs d’utilisabilité • 322Pendant le test utilisateur • 323

Un participant, et qui d’autre ? • 324Qui doit être chargé du test ? • 324

Le rôle de l’animateur • 325Les observateurs • 327

Combien de temps dure un test utilisateur ? • 328Le déroulement d’un test : étapes et recommandations • 329

Pré-questionnaire et décharges • 329Mise en situation : les points clés • 330

Familiarisation avec la procédure • 331Familiarisation avec le produit • 332

Réalisation des scénarios • 332Comment présenter le plan de test ? • 332La bonne manière de prendre des notes • 333Comment relancer en cas de déviation ou d’échec ? • 334

Post-questionnaire et débriefing • 335Post-test • 336

Le matériel d’enregistrement • 337Analyse des résultats et suite des événements • 340

Tri et hiérarchisation des observations • 340Quelles sont les observations que vous allez prendre en compte ? • 341Pondération des observations • 342

Interprétation et pistes de résolution • 343Interprétation des observations • 343Trouver des solutions • 344

Le rapport de test • 344Un test utilisateur à votre mesure • 344Aller plus loin que le test utilisateur : l’usage réel • 346

CONCLUSION.............................................................349Et après ? • 349

ERGONOMIE WEB ILLUSTRÉE : 60 SITES À LA LOUPE.......351

MÉMENTO ERGONOMIE WEB.......................................352

INDEX ......................................................................353

© Groupe Eyrolles, 2010

Internet change, nous aussi !Octobre 2011. Voici la troisième édition du livre Ergonomie Web, entièrementrenouvelée par plus de 300 nouveaux exemples venant illustrer les différentschapitres et thèmes abordés. Depuis la première édition en 2007, l’Internet achangé : rares sont les sites étudiés à l’époque qui n’ont pas évolué, que ce soità l’occasion de nouvelles versions ou d’évolutions plus progressives.

Le constat est quasi inverse pour les théories, règles et méthodes de l’ergo-nomie. Bien sûr, quelques recommandations et techniques viennent enrichirles contenus initiaux, mais le cœur du sujet reste inchangé et applicable auWeb mais aussi à de nombreuses autres interfaces écrans.

Pourquoi ce livre ?Si l’on regarde rapidement ce qui se passe sur le Web francophoneaujourd’hui, on peut faire le constat suivant : il y a de plus en plus desites, mais aussi de plus en plus d’internautes, qui utilisent le Web deplus en plus souvent, pour faire de plus en plus de choses. Encore plusintéressant, il existe un certain nombre d’activités pour lesquelles on nepeut plus se passer d’une interface web, ces dernières tendant à remplacerd’autres modes de communication (papier, téléphone, fax, logiciels etmachines en tous genres).

Face à cette montée en puissance du Web dans nos vies, il importe des’interroger sur les manières de fabriquer des sites Internet. Aujourd’hui,le développement de sites web est encore largement centré sur des pro-blématiques de technologie, d’image et de marketing. La soumission de

Avant-propos

Ergo

nom

ie w

eb

© Groupe Eyrolles, 20102

nos méthodes de conception à ces dimensions laisse souvent de côté cequi devrait représenter le point de départ de tout projet web, à savoir lasatisfaction et le confort de l’utilisateur final. Ainsi, la plupart des sitesactuels manquent encore de l’essentiel : un vrai souci des internautes, dequi ils sont et de leurs besoins.

Avec ce livre, nous souhaitons proposer un début de réponse, à travers laprésentation approfondie d’un mode de pensée et d’une trame métho-dologique bien spécifiques. Nous essaierons de vous amener à connaîtreet prendre en compte vos visiteurs tout au long du processus de concep-tion d’un site web et plus encore, tout au long de la vie de ce site. C’estce que l’on appelle la conception centrée utilisateur.

Nous verrons que cette problématique n’est pas seulement une questiond’humanisme ou d’éthique et qu’elle est capitale pour influencer le bonfonctionnement d’un site à tous les points de vue. En tenant compte deses visiteurs, on peut ainsi s’attendre à optimiser le taux de transforma-tion et de visites d’un site, mais aussi à réduire les coûts de développe-ment et d’assistance. Concevoir un site orienté utilisateur permet desatisfaire les attentes que l’on a envers ce site, que ce soit d’un point devue directement financier ou plus détourné (par exemple : augmentationdes visites, de leur fréquence, du nombre de pages visitées, du nombred’inscriptions à une newsletter, du nombre de créations de compte, etc.).Enfin, plus largement, la conception centrée utilisateur améliore la rela-tion que peut entretenir un site, et souvent une marque, avec ses clients.Lorsqu’on analyse tous ces points, il paraît évident que la conception desites web doit intégrer les questions d’ergonomie, voire en faire le cœurdu processus de développement.

Notre objectif est donc de vous aider à transformer vos pratiques de con-ception actuelles en de véritables pratiques orientées utilisateur. Ce but,que l’on peut atteindre de manière assez simple, appelle de votre partquatre présupposés :• que vous soyez convaincu de l’importance de l’ergonomie et en con-

naissiez les objectifs ;• que vous disposiez de connaissances de base sur l’humain en général

et les règles ergonomiques afférentes ;• que vous possédiez des connaissances sur les visiteurs de votre site ;• que vous exploitiez ces connaissances et en obteniez de nouvelles par

la mise en œuvre de méthodes de conception et d’évaluation.

Le contenu de cet ouvrage est destiné à vous donner les moyens de rem-plir ces quatre conditions, afin que l’ergonomie ne reste pas l’apanage dessites labellisés comme tels. En effet, on croit trop souvent ne pouvoirfaire de sites ergonomiques que sous la houlette d’un ergonome, alors

LA SUITE SUR LE WEB Le site compagnon

Vous trouverez des compléments à cet ouvrage surson site compagnon. Lorsqu’une ressource est dis-ponible en ligne pour faciliter votre compréhension,nous vous l’indiquons à l’endroit approprié. Profitezaussi de ce site pour nous envoyer un message etnous dire ce que vous avez pensé de ce livre !B www.ergonomie-sites-web.com

Ava

nt-p

ropo

s

© Groupe Eyrolles, 2010 3

que c’est tout à fait faux. Il s’agit donc ici de sortir l’ergonomie de sonstatut de connaissance privilégiée, pour que ses principes de base puis-sent infiltrer l’ensemble des projets web. Ce que vous trouverez dans celivre, c’est un condensé de nos connaissances et de notre expérience dansle domaine de l’optimisation du Web pour ses utilisateurs finaux.

À qui s’adresse ce livre ?Ce livre s’adresse à tous ceux qui pensent que l’on doit concevoir dessites web pour des internautes et qui veulent comprendre les principes etméthodes que propose l’ergonomie web dans ce sens. Si vous lisez cetavant-propos, c’est probablement que vous êtes déjà intéressé par notreproblématique, que vous débutiez ou que vous souhaitiez approfondirvos connaissances. Si c’est le cas, qui que vous soyez, vous êtes au bonendroit. Ce livre s’adresse en effet à tous les professionnels du Web (ou àceux qui sont en passe de le devenir) et à tous les niveaux :• décisionnaire, chef d’entreprise, responsable d’activité web, directeur

de clientèle, responsable marketing ;• chef de projet, chef de produit, concepteur fonctionnel, architecte de

l’information, ergonome ;• directeur de création, directeur artistique ;• développeur, intégrateur, webmaster.

Selon votre métier, certains chapitres vous toucheront plus que d’autres,mais c’est tout au long du livre que vous trouverez de quoi nourrir votrepratique quotidienne. Le contenu de cet ouvrage vous intéressera parti-culièrement si vous souhaitez :• vous persuader du bien-fondé de la démarche ergonomique et de

l’importance de l’intégrer au cycle de conception ;• vous former aux fondements, règles et méthodes de l’ergonomie afin

d’en faire le socle de votre activité ;• acquérir des connaissances de base en ergonomie pour vous ouvrir

l’esprit, affûter votre sensibilité ergonomique et orienter votre pra-tique métier dans ce sens.

Vous n’avez besoin d’aucune connaissance préalable pour lire ce livre. Ilvous sera toutefois plus facile de comprendre les exemples que nouscitons si vous êtes habitué à naviguer sur le Web. Nous en appelons doncdavantage à votre expérience d’internaute que de professionnel du Web.

Si vous débutez dans la conception web, essayez de lire ce livre dansl’ordre, chapitre après chapitre. En effet, nous vous fournirons au fur et àmesure les clés nécessaires à la compréhension des chapitres suivants.

Ergo

nom

ie w

eb

© Groupe Eyrolles, 20104

Si vous êtes plus avancé dans votre connaissance de l’ergonomie web, vouspourrez sans doute vous dispenser de cette lecture linéaire et piocher àvotre guise parmi les thématiques de cet ouvrage. Nous nous sommes atta-chés à fournir de larges approfondissements théoriques, afin que vouspuissiez mieux vous approprier les concepts de base de l’ergonomie etcomprendre ce qui les sous-tend. De même, le développement des appro-ches méthodologiques (audit, analyse concurrentielle, tri de cartes, testutilisateur) vous donnera de multiples conseils avancés. Vous découvrirezainsi toutes les subtilités de ces démarches et les meilleures manières de lesappliquer en fonction de vos besoins et de vos possibilités.

Est-ce que mon site est concerné ?Les principes et méthodes que vous trouverez dans ce livre peuvents’appliquer à n’importe quel contexte web (site grand public, site spécia-lisé, outil en ligne, intranet, extranet, etc.). La plupart sont d’ailleurs lar-gement valables dans les contextes logiciels et applicatifs web. Vousverrez au fil des exemples que nos illustrations proviennent aussi bien desites éditoriaux que de sites de commerce en ligne, de sites vitrines d’uneactivité ou encore de sites « outils ».

De même pour les thématiques abordées, dont le spectre est volontaire-ment large : produits culturels, immobilier, banque, musique, alimen-taire, institutionnel, édition, vêtements, etc. Cette diversité donne unedynamique intéressante pour illustrer chacun des principes évoqués,mais elle sert surtout à vous montrer que ces principes sont applicablesquel que soit le contexte. Autrement dit, c’est vous qui êtes porteur desspécificités de votre projet web et l’ergonomie est là pour vous donner uncadre de réflexion, des objectifs génériques et des méthodes de travail.

Que vais-je trouver dans ce livre ?Chapitre après chapitre, nous détaillerons ce qu’est l’ergonomie web, lesprincipes et règles auxquels elle souscrit, ainsi que les méthodes par les-quelles elle se propose d’optimiser la qualité d’utilisation d’un site web.

Première partie – introduction à l’ergonomie web

La première partie de ce livre a pour vocation de vous présenter ce qu’estl’ergonomie web, en évoquant ses objectifs et ses moyens (au chapitre 1).Elle nous permet aussi d’aborder certaines idées reçues sur l’ergonomieweb (chapitre 2). Nous vous expliquerons donc en quoi certaines

Ava

nt-p

ropo

s

© Groupe Eyrolles, 2010 5

réflexions très fréquentes dans les milieux web ne sont que des mythes,et comment vous pouvez vous en défaire pour arriver à une conceptionplus juste de ce qu’est l’ergonomie web.

Deuxième partie – dans la peau de votre internaute : les fondements de l’ergonomie

Nous entrerons ensuite dans le vif du sujet avec la première étape devotre travail, c’est-à-dire savoir qui sont vos internautes, ce qui les carac-térise et comment prendre en compte ces informations pour y adaptervotre site. Nous aborderons donc au troisième chapitre ce qui définittous les internautes en tant qu’êtres humains et, plus précisément, quel-ques grandes lois que vous devez connaître pour concevoir un site web àdestination d’un humain. Le quatrième chapitre sera quant à lui con-sacré à ce qui définit votre internaute de manière individuelle. Nous ter-minerons par la méthode des personas, qui vous aidera à intégrer cettevision au jour le jour dans votre pratique.

Troisième partie – les règles de l’ergonomie web

La troisième partie de ce livre a pour ambition de vous transmettre lesclés de l’ergonomie web : vous y apprendrez dans le détail ce qui faitqu’un site est plus ou moins ergonomique, à travers la prise en compte dedouze règles de base. Cohérence, compréhension, assistance, gestion deserreurs, satisfaction... : tout pour que votre internaute se sente à l’aise survotre site et puisse avoir envie de revenir. Après la lecture du chapitre 5,vous verrez les choses autrement et plus rien ne vous échappera ! C’estdéfinitivement la meilleure manière pour comprendre les objectifs del’ergonomie à travers sa mise en application.

Facile à comprendre, abondamment illustrée d’exemples en tous genres,cette partie vous permettra de passer très rapidement à la pratique. Ellese termine en effet sur le chapitre 6, dédié à l’audit ergonomique, quel’on peut mener de manière plus ou moins formelle. Vous verrez qu’enconsidérant chacune des règles dans toutes vos décisions, vous parvien-drez à une qualité d’utilisation toute nouvelle !

Quatrième partie – les étapes de la conception web : pensez votre site de A à Z

Si vous faites de la conception web dans le cadre de votre métier, cettepartie constituera le moyen de donner un nouvel élan à votre pratiquequotidienne. Nous y aborderons les thématiques de la définition de con-tenus, de l’analyse concurrentielle (chapitre 7), de l’architecture del’information et des interactions (chapitre 8) et enfin du maquettageconceptuel (chapitre 9).

© Groupe Eyrolles, 2010

chapitre 4

Camille

François

Paul

© Groupe Eyrolles, 2010

Définir votre internaute : critères et méthode des personas

Une fois que vous avez traité le versant « universel » définissant un internaute, vous devez vous préoccuper de ce qui caractérise votre internaute. Autrement dit, vous allez ajouter à ses caractéristiques d’être humain tout ce qui lui est spécifique en ìtant que personne.

Ainsi, vous entrez de plain-pied dans ce qui fait véritablement l’ergonomie, à savoir définir l’utilisateur et ses particularités afin de concevoir un système adapté à ses besoins.

SOMMAIRE

B Définir qui sont vos internautes et ce qu’ils font

B La méthode des personas

MOTS-CLÉS

B Profils utilisateursB PersonasB Scénarios d’utilisation

Ergo

nom

ie w

eb

© Groupe Eyrolles, 201078

Un site ergonomique est avant tout un site qui se préoccupe de ses utili-sateurs. Vous devez par conséquent vous mettre au travail pour com-prendre qui ils sont réellement et ainsi vous adapter à leurs besoins.Nous allons donc évoquer dans ce chapitre ce qui caractérise un inter-naute au-delà de son appartenance au genre humain et insister sur laméthode des personas, irremplaçable pour définir votre cible utilisateuret la prendre en compte tout au long d’un projet web.

Une personne donnée dans un contexte précis Il ne suffit pas de dire que l’utilisateur est au cœur de votre démarchepour réussir votre projet d’un point de vue ergonomique. Le mot utilisa-teur est en soi problématique, puisqu’il peut signifier tout et n’importequoi. Il faut donc aller plus loin et véritablement s’interroger sur lescaractéristiques de vos internautes et les besoins qui en découlent. Cesinformations seront les points d’entrée qui vous permettront de prendredes décisions en termes de fourniture de contenus et de services, puisd’utilisabilité.

Des personnes différentes ont des caractéristiques et des besoins diffé-rents. Vous devez donc découvrir les spécificités de vos internautes afinde créer une interface à leurs mesures.

La première étape de toute démarche ergonomique consiste donc àfouiller dans toutes les sources disponibles afin de comprendre qui sont(ou qui doivent être) vos visiteurs. Tous les internautes sont différents,mais il est probable que certains partagent des caractéristiques com-munes. C’est le moment de faire la chasse aux indices pour cerner cestraits distinctifs !

Questionnez vos clients, le service marketing, la direction, les chefs deprojet, le service après-vente, bref, toutes les personnes qui pourraientvous aider à obtenir des informations. Votre rôle consiste à rassemblertoutes ces données et à en dégager des profils utilisateurs. Surtout, necédez jamais au syndrome « Madame Michu ». Lors de votre enquête,gardez à l’esprit qu’une population cible se définit par trois critères :• des personnes ;• des objectifs ;• des contextes d’utilisation.

MÉTHODOLOGIE Et si je saute cette étape ?

Si par manque de temps ou d’intérêt vous omettezde définir le plus précisément possible qui sont vosinternautes, vous commettez l’erreur la plus cou-rante dans les projets web actuels. Ainsi, concevoirun site sans tenir compte des spécificités etbesoins de ses visiteurs produit un outil polyvalentmais qui peine à les satisfaire. Dans le second volet de ce chapitre, vous appren-drez donc à remplacer votre vision générique del’internaute par une vision spécifique de vos per-sonas. Et pas d’inquiétude : vous vous rendrez vitecompte du rapport qualité/prix incroyable de cetteméthode !

4 –

Défin

ir vo

tre

inte

rnau

te: c

ritèr

es e

t mét

hode

des

per

sona

s

© Groupe Eyrolles, 2010 79

En tant que personne, un internaute est caractérisé par des dimensionsqui lui sont propres et que vous devez prendre en compte afin derépondre pleinement à ses besoins. Un internaute possède ainsi un profilsociodémographique, un objectif l’amenant à visiter un site Internet, unhistorique avec ce site, la marque ou ses concurrents, un niveau d’exper-tise Internet, des habitudes de navigation sur le Web, etc.

La notion de tâche pour mieux cerner l’internauteAu-delà de sa définition en tant que personne, l’internaute qui vient surun site a des objectifs. S’il n’en a pas de précis, on tiendra compte d’unobjectif même flou ou qui relève de la découverte (par exemple, pour lesinternautes qui arrivent sur un site sans vraiment savoir ce que proposece dernier).

Afin de bien comprendre les objectifs de vos internautes et la manièredont ils entendent les atteindre, vous devez les questionner et/ou lesobserver. À cet effet, la démarche d’analyse de l’activité vous sera trèsutile pour comprendre tout ce qui détermine une tâche.

IDÉE REÇUE Si ça fonctionne pour ma grand-mère, ça fonctionnera pour tout le monde

(Cela fonctionne aussi avec Simone, monsieur Tout-le-monde, la ménagère de moins de 50 ans, l’idiot de ser-vice et autres stéréotypes du même acabit !)C’est faux et c’est même tout le contraire de l’objectifde l’ergonomie web ! N’essayez pas de concevoir votresite pour n’importe qui, une personne moyenne ou lapersonne la plus novice, mais pour vos utilisateurs. Cesont eux qui vous jugeront au final, en fonction deleurs besoins spécifiques. Si votre interface est conçuepour d’autres, elle risque de ne pas leur correspondre.Un exemple courant : si, en suivant le précepte du « Quipeut le plus peut le moins », vous concevez votre sitepour des populations très novices face à l’outil informa-tique, vous risquez de simplifier votre interface àl’extrême. Vous pourriez ainsi être tenté de découper unprocessus complexe en de nombreuses étapes, afin derendre chacune d’elles très simple. Or, ce procédé produitune interface très rigide, peu perméable aux phéno-mènes d’apprentissage : même si leur niveau d’expertiseaugmente, vos utilisateurs seront toujours bloqués par lecheminement imposé par le système. Ainsi, une interfaceconçue pour des débutants peut empêcher une progres-sion dans la rapidité d’exécution future.

De la même manière, si vous protégez à l’extrême vosutilisateurs contre les erreurs sans moyen de contour-nement, vous allez contraindre les plus experts à subirdes messages de confirmation incessants, dont ils seseraient bien passés.Si vous concevez pour l’utilisateur le plus novice, vousrisquez donc de pénaliser celui dont le niveau d’exper-tise est plus élevé. Ceci se ressentira à la fois sur le planobjectif (ils seront moins efficients qu’ils ne pourraientl’être), mais aussi sur le plan subjectif (se sentant con-traints et assistés comme des débutants, ils pourraientrevendiquer un peu de liberté en allant regarder ce quise fait chez vos concurrents). Une anecdote à ce sujet : Jakob Nielsen et HoaLoranger relatent dans leur ouvrage Prioritizing Usabilityque les 69 internautes recrutés pour les besoins du livreavaient tous au moins 1 an d’expérience dans la navi-gation sur le Web. Ce choix permettait d’éliminerd’office toute personne trop débutante qui viendraitinfluencer les résultats de manière trop marquée.

Ergo

nom

ie w

eb

© Groupe Eyrolles, 201080

Par exemple, si vous devez concevoir une interface pour jouer au Loto enligne, vous devez parfaitement comprendre ce qui sous-tend ce jeu dansla vie réelle. Allez dans des bureaux de tabac, des maisons de la presse,interrogez des gens, frottez-vous à leur activité pour en saisir les proto-types comportementaux. Les données que vous en tirerez vous servirontnon seulement du point de vue de l’utilité (de quoi vos internautes ont-ils besoin ?), mais aussi de l’utilisabilité (comment en ont-ils besoin ?).

De même, si vous travaillez sur le site d’une agence de voyages en ligne,il vous sera indispensable de recueillir des données vous permettant derépondre à la question suivante : « Comment les gens achètent-ils desvoyages aujourd’hui ? » Lorsque vous vous penchez sur ce type d’interro-gation, vous sortez de votre rôle de concepteur pour vous mettre à laplace des gens. Ainsi, vous ouvrez votre esprit et lui permettez d’ima-giner des fonctionnalités auxquelles vous n’auriez pas pensé sans cela.

La manière dont les gens utilisent l’interface sur laquelle vous travaillezest aussi un facteur primordial dont vous devez avoir conscience, et quevous devez prendre en compte en permanence. Par exemple, si la plupartde vos internautes utilisent le site plusieurs heures par jour, cette infor-mation devra nécessairement intervenir dans la conception de votreinterface. C’est par exemple le cas d’applications métier ou d’outils enligne permettant l’exercice d’une activité professionnelle. Cela peut aussiêtre valable pour des interfaces web très spécialisées, par exemple dessites de bourse en ligne, de poker en ligne, d’enchères en temps réel, etc.Dans ce type d’interface, vous pourrez accepter un temps d’appropria-tion de l’outil par les débutants, afin de l’optimiser pour les utilisationsles plus fréquentes, ramenées au pourcentage d’heures d’utilisation.

Les statistiques de visite, un atout majeur Si vous êtes dans un projet de refonte d’un site existant, l’analyse des sta-tistiques d’utilisation peut vous être d’une grande aide si ces dernièressont suffisamment interprétées. Difficile en effet de comprendre quelquechose à des fichiers de logs bruts fournis par un serveur ou même parfoisaux informations disponibles sur les outils de statistiques courants. Laconfiguration, la recherche et la compréhension de ce type de donnéesest un vrai métier. Essayez donc de vous entourer de spécialistes qui vousaideront à obtenir et interpréter les chiffres qui vous intéressent.

Vous tirerez des statistiques deux grands types d’informations :• Des renseignements sur les configurations des ordinateurs de vos

visiteurs. Vous devez normalement avoir accès au moins à des infor-mations sur le système d’exploitation utilisé, le navigateur et sa ver-sion, la résolution d’écran et les plug-ins disponibles. Ces données

4 –

Défin

ir vo

tre

inte

rnau

te: c

ritèr

es e

t mét

hode

des

per

sona

s

© Groupe Eyrolles, 2010 81

vous seront précieuses pour prendre des décisions technologiques etd’interface. Nous verrons au chapitre 5 à quel point la problématiquede l’accessibilité technologique est importante, et au chapitre 9, com-ment elle influence l’activité de conception fonctionnelle.

• La qualité des visites en termes fonctionnels : quelles sont les pagesles plus visitées, le nombre de pages vues par visite, les éléments d’unepage qui font l’objet du plus grand nombre de clics, le taux d’abandonà chacune des étapes d’un process de commande, les mots-clésrecherchés, etc.

Au-delà des outils de statistiques classiques, vous pouvez compléter votreanalyse avec des applications qui traitent aussi les données qui n’ont pasd’effet en termes d’interaction web (par exemple, un clic utilisateur n’ayantpas d’effet). Elles proposent en outre des représentations sous des formesgraphiques très intéressantes, nous donnant ainsi des informations sur lecomportement des internautes au sein d’une page web.

Voyez ainsi comme ClickDensity se propose d’enregistrer tous les clicsréalisés sur une page et de représenter ces derniers sous forme de heat-maps, ou cartes de chaleur.

Vous êtes ainsi à même d’analyser précisément ce sur quoi cliquent vosinternautes et l’endroit où ils cliquent. En effet, ClickDensity recensetous les clics, et pas uniquement ceux sur les liens (comme les outils destatistiques habituels). Ainsi, vous pourrez observer quelles erreurs com-mettent vos visiteurs, leurs préférences et leurs habitudes.

Dans le même ordre d’idées, ClickTale se propose d’ajouter les mouve-ments de la souris, même si ce type de données est beaucoup plus diffi-cile à interpréter. Attention à ne pas faire de raccourcis !

Figure 4–1Grâce à ClickDensity, vous pouvez voir où vos internautes préfèrent cliquer sur votre site. À ne pas confondre avec les cartes de chaleur indiquant les zones les plus regardées par les participants grâce à l’eyetracking ! Nous évoquerons cette technique au chapitre 11. Sources : www.clickdensity.com / www.reservoir-jeux.com

Ergo

nom

ie w

eb

© Groupe Eyrolles, 201082

Interroger les internautesPour affiner la vision de vos internautes, rien de tel que d’aller les inter-roger, que ce soit lors d’entretiens en face à face ou grâce à des méthodesplus distantes (questionnaires ou entretiens en ligne, discussions sur desforums, sondages, etc.). Votre objectif est de savoir qui ils sont, ce qu’ilsfont, de quoi ils ont besoin et de quoi ils ont envie.

Toutes ces informations, que vous aurez récoltées par divers moyens,vont servir à vous construire une vue précise et complète de vos inter-nautes, essentiellement afin de nourrir vos personas. Mais au fait, savez-vous ce qu’est un persona ?

Un persona pas comme les autres Nous allons à présent aborder une méthode de conception qui vous per-mettra de réellement prendre en considération votre cible utilisateur lorsdu développement d’une interface web.

Ainsi, nous allons apprendre à créer ce que l’on appelle des personas. Cesont des personnages virtuels, que vous allez imaginer pour représentervotre cible utilisateur. Ce sont donc de « faux utilisateurs », créés detoutes pièces pour des besoins méthodologiques. Adopter ce réflexe deconception possède de nombreux avantages, entre autres un coût de miseen œuvre très faible. Un incontournable donc !

Les personas représentent les utilisateurs typiques, ce qui permet d’évo-quer la cible utilisateur de manière concrète et proche de la réalité. Sup-ports de travail au sein d’une équipe projet, ils servent à communiquerautour d’un référent commun. Voyons les bénéfices que vous pouvezretirer de cette méthode, ainsi que quelques règles pour créer et utiliserles personas.

BIBLIOGRAPHIE Un livre entièrement consacré aux personas !

700 pages sur le sujet des personas, structurées autourde ce que les auteurs nomment « le cycle de vie d’unpersona » : de la gestation à la mort, en passant par lanaissance, l’enfance puis l’âge adulte. Rempli d’exem-ples, d’études de cas, d’illustrations, de témoignages, celivre est un incontournable si vous souhaitez vous docu-menter en profondeur sur le sujet.

R John Pruitt & Tamara Adlin, The Persona Life-cycle : Keeping People in Mind ThroughoutProduct Design, Morgan Kaufmann, 2006

Ergo

nom

ie w

eb

© Groupe Eyrolles, 20106

Cinquième partie – mettez votre site à l’épreuve

La dernière partie de ce livre est entièrement consacrée à deux méthodesprivilégiées de l’ergonomie web, faisant intervenir des internautes pourqu’ils vous aident à comprendre leur manière de naviguer sur le Web.C’est en effet en les observant et en discutant avec eux que vous arriverezà leur fabriquer un site sur mesure.

À travers la méthode du tri de cartes (chapitre 10), vous apprendrez àoptimiser à peu de frais votre architecture de l’information, en fonction dela façon dont les utilisateurs rangent et nomment les choses dans leur tête.

Enfin, avec la méthode du test utilisateur (chapitre 11), vous pourreztoucher ce qui fait vraiment la spécificité de la démarche ergonomique,dans sa volonté d’être la plus proche possible des usages réels du Web etde ce qui les conditionne.

RemerciementsCe livre n’existerait pas sans l’aide précieuse des personnes qui m’entou-rent. Un grand merci donc à :• Karine Joly, mon éditrice, pour son implication et sa disponibilité

dans tous nos projets. Avec elle, toute l’équipe Eyrolles, qui a réussi àtransformer le manuscrit en un vrai livre.

• Cyril Delapeyre, qui a réalisé au pied levé les illustrations de ce livre.• Élie Sloïm, pour avoir préfacé cet ouvrage en sa position de qualiti-

cien web. Élie est gérant de Temesis, fondateur et directeur du projetOpquast (référentiel de bonnes pratiques pour la qualité des servicesen ligne), entre autres.

• Emeric Thoa pour la genèse de ce livre et le grand plaisir tiré de nosdiscussions. Et parce que tu ne t’en tireras pas comme ça.

• Manu et tous les Rugama. • Tous les gens qui m’ont appris à faire de l’ergonomie et du Web, puis

ceux avec qui j’ai pu en faire tout au long de ces dernières années. Ladiversité des projets web et des interactions qu’ils supposent est ce quime nourrit et me fait le plus avancer.

• Et juré, j’ai essayé de me retenir de remercier mes parents pourm’avoir permis de parler aux ordinateurs quand j’étais petite. Maissans ça, je n’aurais sans doute jamais fait ce métier.

© Groupe Eyrolles, 2010

chapitre 5

© Groupe Eyrolles, 2010

12 règles pour optimiser l’ergonomie de votre site

Lorsque vous attachez de l’importance à l’ergonomie de votre site, ce souci doit être constant : quelles que soient les circonstances, vous devez garder en tête les règles de base qui permettent d’optimiser un site d’un point de vue ergonomique.

Ce chapitre vous propose 12 règles qui sont un condensé des normes, des critères et de notre expérience de l’ergonomie web ; elles doivent devenir votre leitmotiv.

SOMMAIRE

B Règle n° 1. ArchitectureB Règle n° 2. Organisation

visuelleB Règle n° 3. CohérenceB Règle n° 4. ConventionsB Règle n° 5. InformationB Règle n° 6. CompréhensionB Règle n° 7. AssistanceB Règle n° 8. Gestion des erreursB Règle n° 9. RapiditéB Règle n° 10. LibertéB Règle n° 11. AccessibilitéB Règle n° 12. Satisfaction de

votre internaute

MOTS-CLÉS

B Règles ergonomiquesB Architecture de l’informationB NavigationB Charge informationnelleB GestaltB HomogénéitéB ConventionsB Information et feedbackB VocabulaireB GuidageB AffordancesB ErreursB EfficienceB Contrôle utilisateurB AccessibilitéB Satisfaction

Ergo

nom

ie w

eb

© Groupe Eyrolles, 201094

Les projets web se divisent en deux catégories : ceux qui prennent en consi-dération les principes d’ergonomie et ceux qui ne les connaissent pas ou neles intègrent pas dans leur réflexion. Ignorer ces principes, c’est risquer deperdre vos internautes alors même que ce que vous leur proposez les inté-resse. En effet, lorsqu’ils arrivent sur un site qui leur donne du fil à retordre,les internautes n’ont qu’une envie : prendre leurs jambes à leur cou.

Ce n’est qu’en tenant compte des règles de base de l’ergonomie que vouspourrez satisfaire vos visiteurs et vous donner une chance de les retenir,voire de les faire revenir.

Ces règles ne s’inventent pas. À leur lecture, on peut se surprendre àacquiescer en ayant l’impression de ne lire qu’un ensemble de choseslogiques ; il reste toutefois que ces règles permettent réellement d’améliorerla qualité ergonomique d’une interface. Le grand danger, c’est précisémentqu’elles paraissent couler de source. C’est à cause de cette simplicité appa-rente qu’on les ignore ou qu’on les oublie fréquemment. Or elles sont unpuissant outil de travail pour quiconque fabrique des sites Internet.

Vous voulez que votre site Internet respecte les principes consensuels del’ergonomie web afin que vos internautes s’y sentent bien ? Voici douzerègles vous permettant de concevoir et d’évaluer votre site en tenantcompte de l’ergonomie.

Ce chapitre n’a pas pour vocation de passer en revue de manière exhaustivetoutes les erreurs possibles, mais plutôt d’illustrer par l’exemple chacunedes règles et son application. Nous en donnons des modèles positifs etnégatifs sur une multitude de sites web très différents. Vous verrez ainsiqu’un site très bien fait par ailleurs peut, à un moment donné, mettre endéfaut une des règles. Cela vous permettra de comprendre encore mieuxque c’est seulement en optimisant très précisément chacune des pages devotre site que vous pourrez atteindre une bonne qualité ergonomiquegénérale. Il n’y a pas de secret, mais uniquement une prise en compteminutieuse et rigoureuse de chacun des principes de l’ergonomie web.

Enfin, gardez bien à l’esprit que le découpage proposé ici est uniquementutilitaire, dans le sens où il permet d’aborder l’ensemble des thématiquesles unes après les autres. Cependant, dans leur mise en pratique sur un siteweb, toutes ces règles s’imbriquent les unes dans les autres. Vous verrezd’ailleurs à la fin de ce chapitre que, pour satisfaire pleinement un principeergonomique, vous serez parfois contraint de mettre en défaut un autreprincipe. Nous illustrerons ce type de conflits au travers de quelques exem-ples concrets. Dans ces situations de compromis, les spécificités de votreprojet vous aideront à prendre les meilleures décisions possibles.

Mais passons aux choses sérieuses et voyons donc comment vous pouvezaider vos internautes à se sentir bien sur votre site Internet !

MÉTHODOLOGIE Et si je saute cette étape ?

Impossible ! Vous avez forcément en tête des con-victions sur ce qui est bon ou pas en termesd’ergonomie, ou des habitudes de travail qui ontdes conséquences sur l’ergonomie de votre siteweb (dans le bon ou le mauvais sens). L’objectif dece chapitre est de vous aider à comprendre et àassimiler les bonnes pratiques de l’ergonomieweb. Si vous n’êtes pas responsable de la concep-tion fonctionnelle, le but est de vous les faireappliquer au jour le jour, en complément de votremétier. Si vous en êtes responsable, ces règlesdeviendront la base de votre métier.

MÉTHODOLOGIE Règles à tout faire

Les règles d’ergonomie permettent d’optimiser laqualité d’utilisation d’un site selon un doublemouvement : d’une part, elles influencent la con-ception, d’autre part, elles sont un outil pour éva-luer une interface existante.

POINT DE VUE Oui, ça arrive à tout le monde !

L’application des règles ergonomiques sur la tota-lité d’un site nécessite des connaissances et del’acharnement. C’est en appliquant un ensemblede recommandations, que l’on peut croire être desdétails, que vous atteindrez une qualité ergono-mique irréprochable.

5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e

© Groupe Eyrolles, 2010 95

Règle n° 1. Architecture : le site est bien rangéCommençons avec la règle d’architecture : pour que votre site serve à vosinternautes, encore faut-il qu’ils puissent y trouver ce qui les intéresse. Vousatteindrez cet objectif en rangeant les informations de votre site de tellemanière que vos internautes localisent rapidement ce qu’ils recherchent.

Architecturer l’information d’un site est un travail qui doit être décorréléde la présentation des informations dans les pages. Vous devez trouver lameilleure manière d’organiser votre contenu en vue de le présenter à vosinternautes. Nous verrons au chapitre 8 que cela nécessite un travail decatégorisation (vous créez des groupes de contenus) puis de structuration(vous décidez de l’architecture de votre site en hiérarchisant les con-tenus). Ces deux étapes doivent absolument tenir compte des attentes devos internautes et de leurs réflexes de navigation.

Les regroupements sont logiquesÀ partir de l’ensemble de vos contenus et fonctionnalités, le travail de grou-pement consiste à créer des rubriques permettant à vos internautes de navi-guer dans votre site. Une rubrique est donc constituée d’éléments partageantsuffisamment de caractéristiques communes pour être placés dans la mêmecatégorie. Attention, c’est en général difficile d’en juger seul : vous devezcréer vos rubriques selon les modèles mentaux de vos internautes.

Figure 5–1Lorsque l’architecture de l’information d’un site est bien pensée, les internautes arrivent facilement à leurs objectifs.

DANS CE LIVRE Tout savoir sur l’architecture de l’information

Pour aller plus loin dans la compréhension et lamise en pratique de l’architecture de l’information,nous y avons consacré un chapitre entier. Auchapitre 8, vous pourrez donc découvrir commentles internautes naviguent sur l’Internet et de quellemanière l’architecture de l’information peut vousaider à vous adapter à ces comportements. Nousverrons aussi comment organiser vos contenus,réaliser des plans de site et choisir le vocabulairequi traduira cette architecture dans l’interface.

Ergo

nom

ie w

eb

© Groupe Eyrolles, 201096

Pensez toujours que ces derniers ne vont pas parcourir l’ensemble devotre site, mais peuvent s’arrêter dès la première rubrique. Il faut doncque votre organisation respecte leur logique de recherche. Par exemple,sur le site de Cuisine Plus, la catégorisation force les visiteurs à choisirun style de cuisine. Or, il peut être difficile de choisir entre les quatrestyles proposés. Plus embêtant, il y a fort à parier qu’après avoir visité undes styles, une partie des internautes n’ira pas visiter les autres.

On voit à travers cet exemple que ce qui fonctionne assez bien en cataloguepapier devient peu pratique sur le Web. Cela est dû au caractère fragmentéde la navigation web : le feuilletage papier est beaucoup plus naturel et del’ordre du réflexe qu’une suite d’allers-retours à base de clics.

Les erreurs de catégorisation viennent souvent du fait que les concepteursutilisent leur propre modèle mental pour organiser les contenus. Or, lesutilisateurs peuvent avoir des stratégies de recherche tout à fait différentes.Regardez par exemple comme cette page du site de Free témoigne d’unecatégorisation technicienne (figure 5-3) : elle regroupe les items par typed’action (Afficher ou Modifier). Or, le réflexe classique d’un internaute dansce contexte sera de rechercher par objet (RIB ou Coordonnées bancaires). Ilfaut donc nécessairement grouper les actions relatives au même objet, voireles proposer seulement suite à la sélection de l’objet.

Soyez donc très vigilant, puisqu’un défaut de catégorisation peut vousfaire perdre votre internaute très rapidement. Mais optimiser l’architec-ture de votre site n’est pas juste une histoire de groupements. Voyonscomment vous devez aussi structurer vos contenus pour aider vos inter-nautes dans leurs recherches.

Figure 5–2Pour voir une liste de cuisines, l’utilisateur

est obligé de choisir parmi quatre stylesqui divisent le catalogue en quatre

parties imperméables.Source : www.cuisine-plus.fr

VOCABULAIRE Grouper = catégoriser

Vous verrez au chapitre 8 que l’activité de catégo-risation consiste à créer des groupes de contenus.Nous utiliserons donc indifféremment les termesde groupes, regroupements ou catégories.

5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e

© Groupe Eyrolles, 2010 97

La structuration met en avant les contenus clésUne bonne architecture se traduit, en termes de navigation, par un par-cours fluide qui passe inaperçu aux yeux des visiteurs. Pour que cela soitvérifié le plus souvent possible, vous devez mettre en avant les pages oufonctionnalités les plus recherchées par vos internautes. Cette action dehiérarchisation s’appelle la structuration.

La structuration de vos contenus peut évoluer selon le calendrier. Pre-nons pour exemple le site de Zalando, qui met en avant temporairementla rubrique Soldes afin de simplifier son accès pour les utilisateurs.

Les menus aident l’internaute à naviguer dans les contenusLes internautes se déplaceront dans l’architecture que vous avez conçuegrâce aux éléments de navigation. Les menus en font partie et sontparmi les plus difficiles à concevoir. Lorsque vous les préparez, vousdevez veiller à ce que vos internautes puissent choisir facilement, parmil’ensemble des items du menu, celui qui les intéresse. Pour cela, les inti-tulés de vos menus doivent respecter les trois critères suivants :• Être signifiants : lorsque l’internaute lit un intitulé, il doit com-

prendre ce qu’il recouvre et pouvoir deviner le type de contenusappartenant à la rubrique. Nous évoquerons plus précisément les pro-blématiques de justesse du vocabulaire dans la règle n° 6.

Figure 5–3Les items Afficher mon RIB et Modifier mes coordonnées bancaires devraient faire partie du même groupe.Source : www.free.fr

Figure 5–4Remonter l’item Soldes au premier niveau est une action de structuration de l’architecture.Source : www.zalando.fr

POINT DE VUE Le menu de navigation

transforme l’abstrait en concret

Les menus sont la traduction en termes d’interfacede vos choix d’architecture de l’information. Ilsreflètent donc à la fois les principes de catégorisa-tion et de structuration.

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2010164

commande, où il ne vous reste plus qu’à confirmer (en vous laissant bien sûrtoute liberté de modifier les informations selon votre convenance).

On a donc un procédé comparable mais implicite, permettant aux inter-nautes, mine de rien, d’être plus efficients.

La conception de telles fonctionnalités ou modalités d’interaction doitforcément être basée sur une analyse minutieuse des tâches. Elle néces-site de se renseigner sur la manière dont les gens fonctionnent, sur leursbesoins, sur leurs parcours réels sur votre site.

Règle n° 10. Liberté : c’est l’internaute qui commandeVotre internaute doit toujours avoir le pouvoir et le contrôle sur le siteInternet, tout au moins en avoir l’impression. Il donne des ordres etl’ordinateur répond en conséquence. Vous devez donc éviter de le brider,mais aussi de renverser les rôles : l’ordinateur ne doit jamais contraindrel’internaute. Vos visiteurs doivent sentir qu’ils ont le système en main etque rien ne se passera sans qu’ils l’aient demandé.

Respectez les contrôles utilisateur conventionnelsPour que votre internaute sente que c’est lui qui commande, vous deveznécessairement respecter les contrôles habituels en vigueur sur les autressites. N’empêchez jamais le fonctionnement classique d’un site, l’utilisa-tion du bouton Back du navigateur, la copie d’un contenu textuel ;n’imposez jamais une ouverture en plein écran sans qu’elle ait été explici-tement demandée, etc. Le fonctionnement le plus basique de votre sitedoit ainsi être identique à celui de la majorité des sites Internet, sansquoi votre internaute se sentira coincé.

Fuyez les actions au rolloverSi l’affichage d’informations au survol de la souris (rollover) est envisageabledans certaines conditions (voir à ce propos la règle n° 2), évitez à tout prixde déclencher des actions par ce procédé. Avec ce type d’interfaces, lesinternautes ont tout de suite l’impression de perdre le contrôle du système.

Regardez ainsi l’exemple du site de la Banque Postale (figure 5-98) : iltraduit bien la difficulté liée au manque de contrôle des interfaces aurollover. Sur ce site, c’est le survol d’un chiffre du pavé virtuel qui permetsa sélection. Imaginez comme il peut être difficile de renseigner son motde passe à six chiffres pour un internaute débutant.

ALLER PLUS LOIN Navigation au survol de la souris

Alex Frank nous propose avec Don’t Click it unsite entièrement navigable au survol. Une expé-rience étonnante, où l’on doit se concentrer pourne pas survoler n’importe quoi sous peine depasser à une autre page ou d’enclencher unbouton d’action !

B http://www.dontclick.it

5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e

© Groupe Eyrolles, 2010 165

Certaines fonctionnalités d’affichage au survol de la souris peuvent aussimettre l’internaute dans des situations délicates, où il a l’impressiond’être coincé. Souvent, c’est d’ailleurs effectivement le cas et il doittrouver un moyen de contourner l’affichage réclamant une grande préci-sion dans ses gestes de visée.

Flexibilité des actions utilisateur Toutes les fonctionnalités qui permettent aux internautes de revenir enarrière augmentent le sentiment de contrôle (mais aussi le contrôle réel)qu’ils peuvent avoir sur le système.

Optimisez donc la flexibilité de votre système en proposant des fonctionsd’annulation (voire de undo/redo) et de retour en arrière. Accorder de tellespossibilités aux internautes peut relever d’un véritable choix stratégique. Parexemple, sur le site d’Amazon, on peut modifier sa commande jusqu’aumoment de son expédition. Vous pouvez même annuler une commande, etce, de manière très simple : tout ce que le site vous demande, c’est de préciserle motif d’annulation d’un article ou de modification d’une quantité.

Figure 5–98Le système de renseignement du mot de passe sur le site de la Banque Postale est difficile à utiliser. En effet, il est basé sur un système où c’est le survol de l’objet qui provoque sa sélection. La Banque Postale l’appelle « positionner sans cliquer le curseur ». La toute dernière version est plus utilisable car elle nécessite un survol long de chaque chiffre, mais reste toutefois étrange d’un point de vue utilisateur.Source : www.labanquepostale.fr

Figure 5–99Le site d’Amazon me permet, dans le cas d’une commande non expédiée, de l’annuler en spécifiant simplement qu’elle a été créée par erreur. Un bel exemple de flexibilité des actions utilisateur.Source : www.amazon.fr

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2010166

Donnez la possibilité à l’internaute de contourner le système et d’agir dessusVous devez aussi offrir à vos utilisateurs la possibilité de contourner votresystème si ce dernier est contraignant ou intrusif (vous devez notammentles autoriser à stopper une animation, une vidéo ou du son et, mieuxencore, de contrôler le volume du son).

Cette règle est notamment très importante dans le cas de mises en avantaléatoires ou successives dans le même espace écran. Nous évoquions, àla règle n° 2, ce type de procédé pour démultiplier la valeur du pixelcarré. Si vous l’utilisez, pensez toutefois à fournir un moyen pour vosinternautes de consulter l’ensemble des mises en avant.

Si cette recommandation semble anodine et paraît apporter simplementun moyen de navigation supplémentaire, il n’en est rien. Elle est capitalecompte tenu du type de contenus présenté dans ces zones, qui sont sou-vent des espaces promotionnels servant à mettre en avant des contenusinternes ou de la publicité. Or c’est souvent à la suite d’une navigationplus orientée que l’utilisateur consulte ce type de contenus. Autrementdit, je viens sur le site dans un objectif bien précis, je le réalise, je peuxvoir d’autres choses qui m’intéressent en cours de route et n’y revenirqu’après avoir accompli mon premier objectif.

Ainsi, si j’ai vu une publicité ou une autopromotion sur la page d’accueil,il est primordial que je puisse y accéder de nouveau quelques minutesplus tard. C’est ce que propose le site Fluctuat.net dans une interface trèsintelligente.

Adoptez le principe suivant : plus le nombre de mises en avant succes-sives est important, plus il est nécessaire d’offrir à vos internautes unmoyen de naviguer parmi celles-ci.

À SAVOIR L’attente et l’actualisation

de la page ne sont pas des moyens de contournement !

Vous pouvez choisir différents systèmes d’affi-chage pour présenter plusieurs contenus successi-vement au même endroit : apparition aléatoired’un contenu à chaque nouveau chargement de lapage ou apparition successive de plusieurs con-tenus de manière dynamique (par exemple, à lafréquence d’un contenu toutes les 8 s). En fonctiondu système adopté, si vous ne lui fournissez pas demoyen de contournement explicite, l’internautepeut s’en trouver lui-même : actualisation de lapage dans le premier cas, attente dans le second.Or, ces moyens de contournement ne sont absolu-ment pas optimaux, en ce sens qu’ils dégradentfortement la facilité d’utilisation de votre site.

Figure 5–100Grâce à la navigation proposée dansle bas du bandeau, on peut naviguer

très facilement parmi les cinq mises en avantde contenu du site de Fluctuat.net

Source : www.fluctuat.net

5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e

© Groupe Eyrolles, 2010 167

N’induisez pas de comportement passifD’une manière générale, faites très attention à ne pas induire de comporte-ment passif chez l’internaute, excepté lorsqu’il en a fait la demande explicite(par exemple, en cliquant pour regarder une vidéo ou une démo).

L’internaute n’est pas devant une télévision. Trop de marques conçoiventencore leurs messages publicitaires comme des spots TV, où les visiteursregardent un message se mettre en place.

Soyez aussi prudent avec la mise en place animée de pages, qui prend beau-coup de temps et met l’internaute dans une position d’attente. C’est une chosede faire attendre l’internaute parce qu’une page est longue à charger technique-ment, c’en est une autre de le faire volontairement pour produire un effetvisuel. Attention, pour toute action gratuite, veillez à ce que ce soit très léger.

Ce défaut est moins critique dans de tout petits sites ou uniquement surune page (par exemple, la page d’accueil). C’est, à l’inverse, beaucoupplus embêtant lorsque l’internaute a envie de consulter plusieurs pages etse retrouve à devoir attendre à chaque nouvelle page.

Le système n’est pas intrusifLa dernière recommandation qui permet à l’internaute de conserver lecontrôle sur le système consiste à limiter ce que l’on nomme l’intrusion.Grossièrement, cela correspond au fait que l’utilisateur ne doit pas sesentir contraint ou dépassé par le système.

Le système n’est pas lourd ou insistant dans ses propositionsSi vous voulez faire des propositions à votre internaute, vous devez être trèsattentif à procéder de manière raisonnée et à fournir, au besoin, un moyentrès simple de refuser votre proposition. Un visiteur de votre site ne doit passe sentir manipulé ou obligé de faire quelque chose contre son gré. Veillezdonc à ne pas tromper ni contraindre vos internautes sous prétexte d’inciter.

RECOMMANDATION La durée de l’animation doit être courte

Sur le Web, on doit être très vigilant avec l’anima-tion, dans le sens où le seuil de dépassement del’attention est très bas. Il est très intéressant de cepoint de vue de prendre en compte les recomman-dations de l’IAB (Internet Advertising Bureau)sur la durée maximum d’une animation publici-taire. L’IAB recommande de ne pas dépasser 30 s,voire 15 dans un certain nombre de cas.

Figure 5–101Le fait d’ajouter l’assurance au panier sans l’avoir explicitement proposé à l’internaute peut être vécu comme une intrusion, et risque de décevoir voire de faire fuir les internautes.Source : www.rueducommerce.fr

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2010168

Regardez ainsi comme le site de Rue du Commerce ajoute automatique-ment une assurance au panier (figure 5-101, page précédente). Si l’inter-naute ne la souhaite pas, il doit la supprimer lui-même.

Le système ne force pas l’utilisateur à voir quelque chose

Éviter les introductions et fournir des entrées directes

Il est assez courant de voir des contenus affichés en préambule de celuidemandé par l’internaute. C’est le cas des introductions de site ou devidéos, où l’on profite de l’intérêt de l’internaute pour un contenu ou unsite particulier pour le forcer à voir des contenus promotionnels (on aalors affaire à des messages de type « Votre vidéo démarrera dans 25secondes », associés à un compte à rebours inversement proportionnel àla durée restante du contenu promotionnel).

Si vous pouvez éviter ce genre de procédés, n’hésitez pas ! Sinon, pensezà fournir un lien direct d’accès au contenu, de type Passer l’introduction,Accès direct au site, etc. C’est notamment ce que pratique AlloCiné pourcompenser un affichage publicitaire très intrusif.

Éviter l’affichage de pop-ups spontanées

Les mêmes problématiques d’intrusion régissent l’affichage sous formede pop-ups spontanées, c’est-à-dire qui s’ouvrent sans qu’on l’aitdemandé. La fenêtre pop-up peut présenter certains avantages fonction-

RECOMMANDATION Trop d’intrusion

fait fuir votre internaute

Attention lorsque vous essayez de récolter desinformations personnelles sur votre internaute.Souvent, très tôt, trop tôt, on a l’impression d’êtreconfronté à des questions du type « Bonjour, nom,prénom, numéro de sécurité sociale et nom dejeune fille de votre mère ». Il existe même des sitesoù il est nécessaire de renseigner des données per-sonnelles pour entrer. Trop de sites, sous prétexted’une démarche marketing, veulent poser un tasde questions pour qualifier leur cible. Or, au lieu dela définir, on risque ainsi de la faire fuir.

ANECDOTE On a failli échapper aux splashs...

La présence de splash pages ou pages d’introductionà un site avait tendance à diminuer ces dernièresannées, les concepteurs comprenant petit à petit leureffet nuisible d’un point de vue utilisateur. Malheureusement, il semble qu’elles commencentà réapparaître sous l’impulsion du marché grandis-sant de la publicité sur Internet.

Figure 5–102Avant de visiter une page du site d’AlloCiné,

on propose à l’internaute une publicité.On compense ce procédé très intrusif

en lui fournissant un moyen d’accéderdirectement au site.

Source : www.allocine.fr

5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e

© Groupe Eyrolles, 2010 169

nels dans l’utilisation normale d’un site (par exemple, elle est tout à faitadaptée pour présenter des contenus complémentaires ou d’aide, tout enconservant le contexte et la page source visibles en dessous). Cependant,ce n’est le cas que si l’internaute l’a explicitement demandée, en cliquantsur un lien ou un bouton provoquant l’ouverture de cette pop-up. Notezen outre que le format strict pop-up est à bannir de par certaines restric-tions techniques exposées ci-contre. Vous devez lui préférer un affichagede type flottant, qui va venir se poser par-dessus le site. Le format nerésout cependant absolument pas la question de l’intrusion. C’estnotamment presque devenu une mode de proposer l’inscription à lanewsletter, à un jeu ou toute autre proposition à l’ouverture d’un site oupendant sa visite. Pesez alors bien le pour et le contre de ce procédé.

Les pop-ups peuvent aussi être utilisées de manière spontanée par le site,mais uniquement en cas de force majeure. C’est par exemple le cas sur lesite de Sytadin, où la consultation du trafic peut s’accompagner d’unepop-up informant les internautes de travaux sur l’autoroute. Il est alorstout à fait justifié d’employer quelque chose de fort visuellement, quidoit cacher le contenu initial sous peine d’être ignoré par l’internaute.

Ce qu’il faut éviter, ce sont les pop-ups promotionnelles qui sautent auvisage des internautes alors qu’ils n’ont rien demandé.

RECOMMANDATION Le format pop-up est à éviter

tant du point de vue technique que de l’utilisateur

Attention au véritable format pop-up, discutabletechniquement (il est bloqué par de nombreuxnavigateurs et outils installés sur le poste client)mais aussi d’un point de vue utilisateur. En effet, un nombre non négligeable d’internautesferment toute pop-up qui s’ouvre spontanément,avant même que son contenu soit chargé, du fait dela surutilisation de ce format par les publicitaires.

Figure 5–103Quelques exemples de fenêtres intrusives s’affichant soit au chargement du site, soit en cours de visite.Sources : www.kookit.com / www.linternaute.com / www.tati.fr

Ergo

nom

ie w

eb

© Groupe Eyrolles, 2010170

Le site n’agit pas à la place de l’internauteLe site doit faire explicitement ce que l’internaute lui demande, ni plus nimoins. Lorsque l’internaute se trompe, veillez à ne pas vous intégrer de façonexcessive dans la correction de cette erreur et laissez l’utilisateur libre de sesactes. Prenons un exemple sur le site de Nicolas, où certains vins ne sont dis-ponibles qu’en conditionnement de six bouteilles. Le site accepte que l’inter-naute saisisse le chiffre 10 et n’agit qu’au moment d’ajouter le produit aupanier. Au lieu de l’informer de son erreur et de le laisser rectifier en consé-quence, le site applique alors une règle automatique et adapte le nombre debouteilles au plus proche. Or, le site ne peut pas décider si, au vu de cette con-trainte, l’internaute va choisir de commander six ou douze bouteilles. C’estdonc un bon moment pour proposer, et non pour imposer.

Au secours, le site prend le contrôle de l’ordinateurIl est très important que l’internaute puisse observer une stricte correspon-dance entre ce qu’il a demandé et ce qu’il obtient. Notamment, vous devezéviter que votre site ouvre une application logicielle sur le poste client (Out-look, Thunderbird, Windows Media Player, iTunes, etc.). Ce type de fonc-tionnement est très fréquent avec les fonctionnalités de contact qui ouvrentun nouveau message prérempli dans un client de messagerie.

Évitez aussi de jouer une bande-son alors que l’utilisateur ne l’a pasdemandé. Par exemple, au chargement du site de Make Up For Ever(figure 5-105), une vidéo se lance avec une bande audio très forte. Lepremier réflexe de nombreux internautes sera alors de chercher commentl’éteindre. Notez que, selon le contexte, le son peut être encore moinsjustifié lorsqu’il est joué seul, sans support vidéo.

Figure 5–104Au vu de la quantité renseignée

par l’internaute (10), le site de Nicolas jugeopportun de décider de modifier lui-même

cette quantité à 2. Or, ce système metl’internaute dans une position passivequi risque de le contrarier. Il est donc

préférable de le laisser décider seul de ce qu’ilsouhaite faire au vu des contraintes

de conditionnement par six bouteilles.Source : www.nicolas.com

POINT DE VUE Le son, ce n’est pas toujours mal !

Le fait qu’un site joue du son n’est absolument pasanti-ergonomique. Pensez ainsi que la demande deson peut être implicite, par exemple lorsque l’utili-sateur visionne une vidéo ou consulte un site demusique ou de cinéma : c’est alors même conseillépuisque cela peut optimiser l’expérience utilisa-teur. L’utilisateur doit néanmoins s’y attendre etc’est donc plus gênant sur un site bancaire ou ven-dant des vêtements. Lorsque votre site joue duson, fournissez une possibilité très visible et trèsexplicite de le stopper. Lorsque le son accompagnele contenu et a une réelle utilité, ajoutez-y la possi-bilité de régler le volume.

Ergo

nom

ie w

eb

© Groupe Eyrolles, 201098

• Être complémentaires : la somme de tous les items du menu doitrecouvrir tout ce que le site propose à ses internautes. Il ne doit pasexister de contenu n’appartenant à aucune des rubriques.

• Être exclusifs : vos internautes doivent pouvoir choisir entre deux itemssans hésiter. Vous devez donc éviter toute ambiguïté et respecter le critèred’exclusivité ; un intitulé doit être le seul envisageable pour l’internautequi cherche un contenu précis. Si vous ne suivez pas cette recommanda-tion, vous devrez alors dupliquer les accès à certaines rubriques.

Contourner un site mal rangéSi vous vous rendez compte que l’architecture de votre site est inadaptéeaux besoins de vos internautes mais que vous ne pouvez rien y faire (celapeut être le cas si votre marge de manœuvre est très réduite ou si l’archi-tecture de votre site vient justement d’être remaniée), essayez de la con-tourner grâce à des liens transversaux placés au cœur des pages.

Ces liens vous aideront à mettre en relation des contenus entretenant desrapports étroits, sans que ceux-ci n’apparaissent explicitement dansl’arborescence.

Règle n° 2. Organisation visuelle : la page est bien rangéeLa deuxième règle concerne toujours le rangement mais elle s’appliqueaux pages du site qui doivent, elles aussi, être bien organisées. Cetobjectif général d’un site web est facilement compréhensible puisqu’ils’applique aussi à tout ce qui nous entoure dans la vie réelle. En général,nous nous en sortons mieux dans des environnements simples, organiséset aérés. Considérez la page web comme un environnement à partentière et essayez d’y faire le ménage.

Sur un site web, pour donner l’impression que votre page est bienrangée, vous devez suivre plusieurs recommandations. Elles ont toutespour objectif de libérer l’esprit de votre internaute, en limitant la chargementale liée au traitement de ce qu’il voit à l’écran.

Éviter le trop-plein d’informationsTout d’abord, ne surchargez pas vos pages d’informations inutiles. Vousdevez privilégier l’essentiel, afin que l’utilisateur n’ait pas à intégrer tropd’éléments à la fois.

VOCABULAIRE Lien transversal

Un lien transversal est un lien qui passe outrel’arborescence du site. Il propose, à des endroitsappropriés, des liaisons directes vers des contenusen rapport avec les informations consultées.

UN PEU DE PSYCHOLOGIE La notion de bruit visuel

Les éléments inutiles sur une page web agissentcomme autant de bruit visuel, qui vient perturberla simplicité de la page. L’internaute a donc plus demal à se concentrer sur ce qui l’intéresse.