Ergonomie web
Contents
1. Am lie Boucher CC D Ergonomie Pour des sites web efficaces 3 dition Pr face de d lie Slo m Groupe Eyrolles 2007 2009 2011 ISBN 978 2 212 13215 1 EYROLLES a Table des AVANT PROPOS nnnnnrnnrnnrenrerenrenemennnmennennnnennnenennnee 1 Internet change nous aussi 1 Pourquoi ce livre 1 qui s adresse ce livre 3 Est ce que mon site est concern 4 Que vais je trouver dans ce livre 4 Remerciements 6 PREMI RE PARTIE INTRODUCTION L ERGONOMIE WEB sssssssssnnnnnnnnn 9 1 2 L ERGONOMIE WEB QU EST CE QUE C EST nsnssusunseseennnne 11 L ergonomie pour consid rer Phomme dans le rapport homme machine 12 G n alogie et objectifs de l ergonomie web 14 Un site web ergonomique est un site utile et utilisable 15 La notion d utilit 16 La notion d utilisabilit 16 Au d part un utilisateur des objectifs un contexte 17 Objectif 1 efficacit 17 Objectif 2 efficience 17 Objectif 3 satisfaction 18 Int r t et retours sur investissement 18 Les m thodes de l ergonomie web 21 M thodes expertes 21 M thodes participatives 21 La place de l ergonomie dans un projet web 22 TOP 10 DES ID ES RE UES SUR L ERGONOMIE 25 La sacro sainte r gle des 3 clics 26 L id e re ue en quelques mots 26 mati res Pourquoi faut il se m fier de cette r gle 26 Le bon c t de la r gle et comment aller p2. 170 Au secours le site prend le contr le de l ordinateur 170 R gle n 11 Accessibilit un site facile d acc s pour tous 171 Accessibilit physique 172 Accessibilit technologique 172 La plate forme de consultation est de l ordre du bonus adaptez le contenu 173 La plate forme de consultation est strat gique informez et guidez 173 Table des mati res Ergonomie web R gle n 12 Satisfaction de votre internaute 173 Satisfaire gr ce au crit re d utilit 174 Satisfaire gr ce l esth tique et l exp rience utilisateur globale 175 Satisfaire gr ce la qualit du service 176 Satisfaire 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 179 Pratique support et moyens de l audit ergonomique 180 L valuation ergonomique une pratique multiforme 180 Support et p rim tre de l valuation ergonomique 182 Normes conventions crit res checklists etc 184 Structurer l tude selon vos besoins 186 Les personas pond rent les r gles g n riques 186 Les 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 188 Seul ou plusieurs 188 Le fil rouge dans la peau de votre persona 189 Par o commencer 190 Les outils de l audit ergono
3. 220 Combien de concurrents devez vous analyser 221 Analyses concurrentielles g n rales 222 Analyses concurrentielles d taill es 223 8 ARCHITECTURER L INFORMATION ET LES INTERACTIONS 227 Ranger pour aider trouver 228 Comment visite t on un site Internet 229 La recherche par mot cl droit au but 229 La navigation cibl e tape par tape 230 Support la navigation globale un rep re persistant 230 Support la navigation locale fille de la navigation globale 231 La navigation libre ou comment se promener sur le Web 231 Support la navigation transversale g n r e en fonction du besoin 232 Rechercher ou naviguer telle est la question 233 La raison pour laquelle on vient sur le site 233 Les pr f rences personnelles de lutilisateur 234 Les objectifs poursuivis 234 La confiance envers le moteur de recherche et la navigation 234 Le type de site 234 La pr sentation des fonctions de recherche et de navigation 235 Une organisation calqu e sur les attentes de linternaute 235 Source d inspiration n 1 les objectifs et comportements utilisateur 235 Source d inspiration n 2 les repr sentations mentales 236 Source d inspiration n 3 allez voir ailleurs 237 Source d inspiration interdite votre propre vision des choses 238 Concevez votre architecture de l information 239 Mode d emploi en deux tapes cat goriser puis structurer 239 La cat gorisation
4. 343 Trouver des solutions 344 Le rapport de test 344 Un test utilisateur votre mesure 344 Aller plus loin que le test utilisateur l usage r el 346 CONCLUSION 223525225005 isione mers ets care cran sens din siahai 349 Et apr s 349 ERGONOMIE WEB ILLUSTR E 60 SITES LA LOUPE 351 M MENTO ERGONOMIE WEB nnnnsssssannnnnnnmmnmnnnnn 352 INDEX ssemseesansenennetensoasnacecsenns ca iaeu E ireanii 353
5. OPTIMISER L ERGONOMIE DE VOTRE SITE 93 R gle n 1 Architecture le site est bien rang 95 Les regroupements sont logiques 95 La structuration met en avant les contenus cl s 97 Les menus aident linternaute naviguer dans les contenus 97 VIII Contourner un site mal rang 98 R gle n 2 Organisation visuelle la page est bien rang e 98 viter le trop plein d informations 98 R duire la quantit de mots sur les pages navigantes 99 N afficher que les principaux l ments de navigation et d interaction 101 Afficher les l ments optionnels seulement si n cessaire 101 Supprimer les l ments d interaction inutiles 102 N afficher que les l ments d interaction les plus utiles 103 Diff rencier les quantit s d informations r elles et per ues 103 L h t rog n it visuelle augmente la charge informationnelle 103 Les images de fond augmentent la charge informationnelle 103 Les animations augmentent la charge informationnelle 104 D multiplier la valeur du pixel carr 105 Le remplacement d informations au clic 105 Le remplacement d informations au survol 106 L apparition d informations au survol 108 La question de la publicit 110 Optimiser 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 113 Les appellations sont coh rentes 114 Les formats de pr sentation
6. regrouper pour simplifier 239 Alphabet 241 Chronologie 242 Localisation g ographique 242 Th me 242 Actions utilisateur 242 Cible utilisateur 243 La structuration de l information 244 Une structure hi rarchique repr sent e ar les menus 244 ne structure secondaire repr sent e ar des liens contextuels 246 ne structure floue repr sent e ar des liens sem s au gr du site 247 Une structure vivante 247 R aliser un plan de site 248 Bien choisir ses mots 250 La qu te du mot id al 250 Int grer les contraintes sp cifiques du Web 251 La concision faites court 251 Prendre en compte les conventions de vocabulaire 252 cs az Le Traduire l architecture par la navigation 252 Au del de la navigation architecturer les parcours client et les interactions 254 En bref obtenir des bases solides pour la suite 257 9 PASSEZ L CRAN ZONINGS ET WIREFRAMES 259 Le zoning un premier d coupage 261 Espace disponible et principes de r partition 261 L espace horizontal une limite maximale 263 L espace vertical et la notion de fold 263 Les types de zones 264 Le zoning par l exemple 265 Le wireframe chaque zone en d tail 266 Les diff rents types de wireframes 267 Qu est ce que je mets dans mon wireframe 267 Textes et vocabulaire 268 Apparence et comportement des objets 268 Apparence et comportement de classes d objets 269 Apparence et compo
7. sont coh rents 114 Les interactions sont coh rentes 115 R gle n 4 Conventions le site capitalise sur l apprentissage externe 115 Qu est ce qu une convention 117 Respecter les conventions de localisation 117 Respecter les conventions de vocabulaire 120 Respecter 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 123 Ne soyez pas avare d informations 123 Donner de l information g n rale 123 Donner de l information pour faciliter la navigation 124 Donner de l information ponctuelle 125 Informez mais au bon moment 127 Informez pour augmenter votre force persuasive 128 L ordinateur r pond aux actions de linternaute 130 Donner du feedback aux actions de l internaute 130 Visibilit 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 132 Utilisez le vocabulaire 132 Le vocabulaire doit tre compr hensible 133 Le vocabulaire doit tre orient utilisateur 133 Le vocabulaire doit tre exact et pr cis 134 Le vocabulaire doit tre conventionnel 134 Attention l utilisation des m taphores 134 Le vocabulaire doit tre concis 134 Les symboles et codes doivent tre compr hensibles 135 R gle n 7 Assistance le site aide et dirige l internaute 136 Di
8. lus loin 28 Les internautes sont des idiots 28 L ergonomie et le design ennemis jur s 29 Id e re ue et r alit s du m tier 29 Pourquoi l ergonomie aime le design graphique 30 Pas besoin d ergonomie on a fait un focus group 33 Faites moi un site ergonomique 34 Les internautes lisent en F 35 L ergonomie c est juste du bon sens 36 On le fera en HTML 5 en Ajax etc 37 Les internautes ne scrollent pas 37 Pour l ergonomie on verra la fin 39 L id e re ue en quelques mots 39 Pourquoi faut il commencer par l ergonomie 40 DEUXI ME PARTIE DANS LA PEAU DE VOTRE INTERNAUTE LES FONDEMENTS DE L ERGONOMIE ssssssssnssnnennnea 43 3 COMPRENDRE L INTERNAUTE D ABORD UN TRE HUMAIN 45 D couvrez et appliquez les th ories de la Gestalt 46 La loi de proximit 47 La proximit doit respecter la logique des contenus 48 La proximit au niveau microscopique 49 La proximit peut causer des soucis d interaction 51 La loi de similarit 52 D couvrez et appliquez la loi de Fitts 54 Les l ments cliquables doivent tre gros 55 Augmenter la taille r elle des l ments cliquables 56 Augmenter la taille virtuelle des l ments cliquables 57 VII Ergonomie web Augmenter la surface cliquable des l ments cliquables 57 Augmenter la distance entre les l ments cliquables 59 Les l ments cliquables doivent tre proches 60 D couvrez et appliquez le concept d aff
9. mique 192 Les r gles d ergonomie premier guide de travail 192 Logiciels et outils techniques 193 Prendre des notes 193 Faire des captures d cran 193 Tester la compatibilit technique 195 valuer l accessibilit visuelle 196 valuer la forme g n rale du site 200 Que faire de vos observations 200 Hi rarchisez vos observations 200 Les livrables de l audit 201 La suite des v nements 201 QUATRI ME PARTIE LES TAPES DE LA CONCEPTION WEB PENSEZ VOTRE SITE DE Z snsasssnnnnnnnnnnnnnnnnnnn 203 7 D FINITION DES CONTENUS ET ANALYSE CONCURRENTIELLE 205 Votre contenu r pond un besoin de l internaute 206 Quelle est votre utilit globale 207 Cr ez vos micro utilit s 208 Comment imaginer et choisir des micro utilit s 208 Des exemples de micro utilit s 209 Offrir la vue la plus compl te possible d un produit 210 Prendre en compte les comportements li s achat 212 Pr c der les interrogations des internautes 213 Simplifier la t che des internautes en pr c dant leurs besoins fonctionnels 214 Prendre 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 219 La d marche de l analyse concurrentielle 219 Principes de base de l analyse concurrentielle 219 D finissez votre panel concurrentiel 220 Qui sont vos concurrents ergonomiques
10. ordance 63 Optimiser l affordance vous pouvez me cliquer 64 Attention aux affordances erron es 65 Optimiser l affordance vous pouvez interagir avec moi 66 Le nombre magique de Miller et la loi de Hick 69 Accessibilit visuelle et lisibilit 70 Faciliter l utilisation de moyens de contournement du mode visuel 71 Optimiser la lisibilit l cran 72 Optimisation des couleurs 72 La diff rence de couleurs 72 La diff rence de brillance 73 Optimisation des caract ristiques des textes 73 4 D FINIR VOTRE INTERNAUTE CRIT RES ET M THODE DES PERSONAS 77 Une personne donn e dans un contexte pr cis 78 La notion de t che pour mieux cerner l internaute 79 Les statistiques de visite un atout majeur 80 Interroger les internautes 82 Un persona pas comme les autres 82 Pourquoi avez vous int r t inventer des personas 83 Inventer des personas vous force vous pencher r ellement sur votre cible 83 Inventer des personas humanise votre cible 83 Inventer des personas donne des objectifs votre cible 83 Comment cr er et utiliser des personas 84 Il existe diff rents types de personas 84 Combien de personas devez vous cr er 85 La cr ation d un persona est un travail collectif 85 Comment d finit on un persona 86 Communiquer sur les personas 87 TROISI ME PARTIE LES R GLES DE L ERGONOMIE WEB sccssssssee 91 5 12 R GLES POUR
11. pr sentatifs de votre cible r elle 298 Genre 298 ge 298 M tier et CSP 299 Rapport au site la marque ou un domaine 299 Niveau d expertise 300 Situation familiale r gion projets de vie etc e 300 La personnalit id ale du testeur 301 Plus ils jouent le jeu mieux c est 301 Plus ils s expriment mieux c est 302 XI Table des mati res Ergonomie web Combien de participants sont ils n cessaires 302 Oubliez les chantillons statistiquement suffisants 303 Nombre id al et nombre acceptable de participants 303 Plus de participants ou plus de tests 306 L tape de recrutement 307 La logistique du recrutement 307 Pr senter l tude vos invit s myst re et doigt 308 Comment remercier les participants 308 Le support de test tester quoi quel moment 309 Prototype papier ou maquettes statiques l cran 309 Prototype semi fonctionnel 310 Site finalis 312 R capitulatif et int r ts de supports multiples 313 Plan de test et objectifs d utilisabilit 313 Un 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 315 Excluez les tests comparatifs 315 R alisme des sc narios 316 Souplesse des sc narios 317 Nombre de sc narios 318 Au del des t ches la compr hension du site 318 Effets d ordre et contrebalancements 319 Le
12. rigez gr ce l organisation et la visibilit 136 Dirigez gr ce aux affordances 139 Les affordances permettent de rep rer ce qui est cliquable 139 Les affordances permettent de rep rer ce qui est utilisable 139 Hi rarchisez vos call to action 141 Attention ne pas diriger de fa on erron e 141 vitez d avoir diriger gr ce un mod le d interaction adapt 142 Assistez votre internaute en tenant compte de ses besoins en termes de t ches 144 Assistez votre internaute en le suivant de tr s pr s 145 Fournissez 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 147 La 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 in
13. rtement d l ments individuels 270 Le wireframe par l exemple 271 Et la suite 272 CINQUI ME PARTIE METTEZ VOTRE SITE L PREUVE ss 275 10 LA M THODE DU TRI DE CARTES POUR ORGANISER UN SITE 277 La pr paration du tri de cartes 278 Le mat riel du tri de cartes 278 Les participants au tri de cartes 279 D roulement d un tri de cartes les r gles du jeu 280 Ire tape immersion 280 2e tape validation et pr cision des contenus 281 3e tape groupement 282 4e tape nommage 283 Accompagner vos participants 284 Les grands types de tris de cartes 285 Selon la libert d action des participants 285 Tri de cartes ouvert tout est possible 285 Tri de cartes ferm une place pour chaque chose et chaque chose sa place 286 Selon le support du tri de cartes 286 Le tri de cartes physique 287 Le tri de cartes informatis 287 Selon votre panel de participants 288 Avec des internautes pour s adapter leurs attentes 288 Avec des sp cialistes pour s inspirer de leur expertise 288 Selon le niveau de profondeur du tri de cartes 289 Extensions possibles au tri de cartes 289 Ce que l on peut tirer d un tri de cartes analysez les donn es 290 Le tri de cartes en bref utilit et limites 291 11 LES TESTS UTILISATEURS 295 Pr parer votre test 297 Les participants d un test utilisateur 297 Des participants plus vrais que nature 297 Des participants re
14. s 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 320 Un plan de test ne doit pas d tailler les tapes permettant de r aliser la t che 320 Un plan de test ne doit pas tre un questionnaire 321 Un plan de test doit tester les missions du persona et non vos propres objectifs 321 Un plan de test ne s crit pas seul 322 Les objectifs d utilisabilit 322 Pendant le test utilisateur 323 Un participant et qui d autre 324 Qui doit tre charg du test 324 XII Le r le de l animateur 325 Les observateurs 327 Combien de temps dure un test utilisateur 328 Le d roulement d un test tapes et recommandations 329 Pr questionnaire et d charges 329 Mise en situation les points cl s 330 Familiarisation avec la proc dure 331 Familiarisation avec le produit 332 R alisation des sc narios 332 Comment pr senter le plan de test 332 La bonne mani re de prendre des notes 333 Comment relancer en cas de d viation ou d chec 334 Post questionnaire et d briefing 335 Post test 336 Le mat riel d enregistrement 337 Analyse des r sultats et suite des v nements 340 Tri et hi rarchisation des observations 340 Quelles sont les observations que vous allez prendre en compte 341 Pond ration des observations 342 Interpr tation et pistes de r solution 343 Interpr tation des observations
15. ternaute doit facilement rep rer et comprendre ses erreurs 154 Faciliter le rep rage de l erreur 154 Fournir une explication pr cise de l erreur 155 Faire preuve de courtoisie dans les messages d erreur 155 L internaute doit facilement pouvoir corriger ses erreurs 156 Faciliter la correction gr ce l explication de l erreur 156 Faciliter la correction gr ce aux m canismes de gestion des erreurs 157 R gle n 9 Rapidit l internaute ne perd pas son temps 158 Faciliter les interactions 158 Faciliter l action de vis e des l ments cliquables 158 Prendre en compte les besoins de votre internaute sur le plan fonctionnel 158 viter les actions inutiles 160 Proposer pour simplifier la t che 160 Des modes d interaction orient s efficience 161 R gle n 10 Libert c est l internaute qui commande 164 Respectez les contr les utilisateur conventionnels 164 Fuyez les actions au rollover 164 Flexibilit des actions utilisateur 165 Donnez la possibilit linternaute de contourner le syst me et d agir dessus 166 N induisez pas de comportement passif 167 Le syst me n est pas intrusif 167 Le syst me n est pas lourd ou insistant dans ses propositions 167 Le syst me ne force pas l utilisateur voir quelque chose 168 Eviter 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
Download Pdf Manuals
Related Search