Home

Ergonomie web

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 Pr face 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 les professionnels du Web de conna tre les techniques et les m thodes de l ergonomie Beaucoup de professionnels ont en effet tendance faire de l ergonomie sans conna tre les bases du m tier et pire parfois sans m me savoir qu il s agit d un m tier A 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 ont fait une entr e encore plus profonde dans les formations sup rieures d ergonomie De nombreux ergonomes commencent conna tre en pro 8 fondeur les technologies web et de nombreux professionnels du Web ont 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 projet nest 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 ou triviale pour le chef de projet web M me
2. Ces donn es vous seront pr cieuses pour prendre des d cisions technologiques et d interface Nous verrons au chapitre 5 quel point la probl matique de l accessibilit technologique est importante et au chapitre 9 com ment elle influence l activit de conception fonctionnelle e La qualit des visites en termes fonctionnels quelles sont les pages les plus visit es le nombre de pages vues par visite les l ments d une page 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 s recherch s etc Au del des outils de statistiques classiques vous pouvez compl ter votre analyse avec des applications qui traitent aussi les donn es qui n ont pas d effet en termes d interaction web par exemple un clic utilisateur n ayant pas d effet Elles proposent en outre des repr sentations sous des formes graphiques tr s int ressantes nous donnant ainsi des informations sur le comportement des internautes au sein d une page web Voyez ainsi comme ClickDensity se propose d enregistrer tous les clics r 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 vos internautes et l endroit o ils cliquent En effet ClickDensity recense tous les clics et pas uniquement ceux sur les liens comme les outils de statistiques habitu
3. M THODOLOGIE R gles tout faire Les r gles d ergonomie permettent d optimiser la qualit d utilisation d un site selon un double mouvement 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 de l acharnement C est en appliquant un ensemble de recommandations que l on peut croire tre des d tails que vous atteindrez une qualit ergono mique irr prochable 94 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 ne les int grent pas dans leur r flexion Ignorer ces principes c est risquer de perdre 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 vous pourrez 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 quun ensemble de choses logiques il reste toutefois que ces r gles permettent
4. sans que ceux ci n apparaissent explicitement dans l arborescence R gle n 2 Organisation visuelle la page est bien rang e La deuxi me r gle concerne toujours le rangement mais elle s applique aux pages du site qui doivent elles aussi tre bien organis es Cet objectif g n ral d un site web est facilement compr hensible puisqu il s 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 s et a r s Consid rez la page web comme un environnement part enti re et essayez d y faire le m nage Sur un site web pour donner l impression que votre page est bien rang e vous devez suivre plusieurs recommandations Elles ont toutes pour objectif de lib rer esprit de votre internaute en limitant la charge mentale li e au traitement de ce qu il voit l cran viter le trop plein d informations Tout d abord ne surchargez pas vos pages d informations inutiles Vous devez privil gier l essentiel afin que l utilisateur mait pas int grer trop d l ments la fois
5. 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 comportement 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 le
6. 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 lors du d veloppement d une interface web Ainsi nous allons apprendre cr er ce que l on appelle des personas Ce sont des personnages virtuels que vous allez imaginer pour repr senter votre cible utilisateur Ce sont donc de faux utilisateurs cr s de toutes pi ces pour des besoins m thodologiques Adopter ce r flexe de conception poss de de nombreux avantages entre autres un co t de mise en 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 communiquer autour d un r f rent commun Voyons les b n fices que vous pouvez retirer de cette m thode ainsi que quelques r gles pour cr er et utiliser les personas BIBLIOGRAPHIE Un livre enti rement consacr aux personas 700 pages sur le sujet des personas structur es autour de ce que les auteurs nomment le cycle de vie d un Boae e PERSONA LIFECYCLE persona de la gestation la mort en passant par la People in Mind Throughout Product Design naissance l enfance puis l ge adulte Rempli d exem ples d
7. ouvrage Prioritizing Usability que les 69 internautes recrut s pour les besoins du livre avaient tous au moins 1 an d exp rience dans la navi gation sur le Web Ce choix permettait d liminer d office toute personne trop d butante qui viendrait influencer les r sultats de mani re trop marqu e En tant que personne un internaute est caract ris par des dimensions qui lui sont propres et que vous devez prendre en compte afin de r pondre pleinement ses besoins Un internaute poss de ainsi un profil sociod mographique un objectif l amenant visiter un site Internet un historique 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 internaute Au del de sa d finition en tant que personne linternaute qui vient sur un site a des objectifs S il n en a pas de pr cis on tiendra compte d un objectif m me flou ou qui rel ve de la d couverte par exemple pour les internautes qui arrivent sur un site sans vraiment savoir ce que propose ce dernier Afin de bien comprendre les objectifs de vos internautes et la mani re dont ils entendent les atteindre vous devez les questionner et ou les observer cet effet la d marche d analyse de l activit vous sera tr s utile pour comprendre tout ce qui d termine une t che 79 4 D finir votre internaute crit res et m thode des personas Ergonom
8. pratique de l architecture de l information nous y avons consacr un chapitre entier Au chapitre 8 vous pourrez donc d couvrir comment les internautes naviguent sur l Internet et de quelle mani re l architecture de l information peut vous aider vous adapter ces comportements Nous verrons aussi comment organiser vos contenus r aliser des plans de site et choisir le vocabulaire qui traduira cette architecture dans l interface 95 5 12 r gles pour optimiser l ergonomie de votre site Ergonomie web Figure 5 2 Pour voir une liste de cuisines l utilisateur est oblig de choisir parmi quatre styles qui 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 termes de groupes regroupements ou cat gories 96 Pensez toujours que ces derniers ne vont pas parcourir l ensemble de votre site mais peuvent s arr ter d s la premi re rubrique Il faut donc que votre organisation respecte leur logique de recherche Par exemple sur le site de Cuisine Plus la cat gorisation force les visiteurs choisir un style de cuisine Or il peut tre difficile de choisir entre les quatre styles propos s Plus emb tant il y a fort parier qu apr s avoir visit un des styles une partie des internaut
9. r ellement d am liorer la qualit ergonomique d une interface Le grand danger c est pr cis ment 4 k RTE qu 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 un puissant outil de travail pour quiconque fabrique des sites Internet Vous voulez que votre site Internet respecte les principes consensuels de l ergonomie web afin que vos internautes s y sentent bien Voici douze r gles vous permettant de concevoir et d valuer votre site en tenant compte de l ergonomie Ce chapitre n a pas pour vocation de passer en revue de mani re exhaustive toutes les erreurs possibles mais plut t d illustrer par l exemple chacune des r gles et son application Nous en donnons des mod les positifs et n gatifs sur une multitude de sites web tr s diff rents Vous verrez ainsi qu un site tr s bien fait par ailleurs peut un moment donn mettre en d faut une des r gles Cela vous permettra de comprendre encore mieux que c est seulement en optimisant tr s pr cis ment chacune des pages de votre site que vous pourrez atteindre une bonne qualit ergonomique g n rale Il ny a pas de secret mais uniquement une prise en compte minutieuse et rigoureuse de chacun des principes de l ergonomie web 2 PC Enfin gardez bien Pesprit que le d coupage propos ici est uniquement utilitaire dans le sens o il permet d a
10. 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 oivent encore leurs messages publicitaires comme des spots TV o les visiteurs regardent 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 chose de faire attendre l internaute parce qu une page est longue charger technique ment cen est une autre de le faire volontairement pour produire un effet visuel 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 sur une page par exemple la page d accueil C est l inverse beaucoup plus emb tant lorsque linternaute a envie de consulter plusieurs pages et se retrouve devoir attendre chaque nouvelle page Le syst me n est pas intrusif La derni re recommandation qui permet linternaute de conserver le contr 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 se sentir contraint ou d pass par le syst me Le syst me n est pas lourd ou insistant dans ses propositions Si vous voulez faire des propositi
11. sait ce sera peut tre l appari tion de nouveaux p riph riques ou approches qui viendront modifier en profondeur les interfaces En 2007 j expliquais qu Am lie faisait partie des ergonomes install s pour longtemps dans le paysage Je ne croyais pas si bien dire Il me semble qu il reste un monde explorer collectivement Si j ai la chance de pouvoir mettre jour cette pr face pour la septi me ou huiti me dition de cet ouvrage en 2016 ou 2017 je suis pr t prendre deux paris les interfaces auront de nouveau consid rablement volu d ici l et Am lie sera toujours l pour les d crypter et nous montrer comment les concevoir lie Slo m 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 ssssusunseseennnne 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
12. si de nombreux projets sont encore trait s en n gligeant les phases de conception de personas de cr ation de maquettes semi fonctionnelles ou de test utilisateur ces approches sont de moins en moins consid r es comme exotiques Leur valeur ajout e est g n ralement comprise En ce sens pour beaucoup de professionnels et notamment ceux qui ont lu 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 ouvrage peut servir cet effet mettant votre disposition des m thodes des techni Ergonomie web VI ques et surtout une approche de conception centr e sur l utilisateur Par la suite rien ne remplacera la pratique et l exp rience pour savoir quand et comment agir Vous le verrez ce qui vous est propos n est pas complexe Au contraire et vous pourrez le v rifier la lecture l approche ergonomique est simple mais tous les concepteurs d interfaces homme machine vous le confirmeront la simplicit est Pune des choses les plus difficiles obtenir Elle n est vidente que lorsqu on a r ussi l obtenir Autre postulat que lon peut v rifier jour apr 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 am
13. transformer le manuscrit en un vrai livre e 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 projet Opquast r f rentiel de bonnes pratiques pour la qualit des services en ligne entre autres e Emeric Thoa pour la gen se de ce livre et le grand plaisir tir de nos discussions Et parce que tu ne t en tireras pas comme a e Manu et tous les Rugama e Tous les gens qui mont 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 La diversit des projets web et des interactions qu ils supposent est ce qui me nourrit et me fait le plus avancer e Et jur j ai essay de me retenir de remercier mes parents pour m avoir permis de parler aux ordinateurs quand j tais petite Mais sans a je n aurais sans doute jamais fait ce m tier le a LE le ste est bien rong Ns les mots et symboles 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 d
14. 5 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 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 ergonom
15. 5 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 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 Ke 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
16. 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 plus 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 sssssssssssnnennnea 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 lo
17. Troisi me partie les r gles de l ergonomie web La troisi me partie de ce livre a pour ambition de vous transmettre les cl s de l ergonomie web vous y apprendrez dans le d tail ce qui fait qu un site est plus ou moins ergonomique travers la prise en compte de douze r gles de base Coh rence compr hension assistance gestion des erreurs satisfaction tout pour que votre internaute se sente laise sur votre 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 est d finitivement la meilleure mani re pour comprendre les objectifs de l 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 Elle se termine en effet sur le chapitre 6 d di l audit ergonomique que Pon peut mener de mani re plus ou moins formelle Vous verrez qu en consid 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 Z Si vous faites de la conception web dans le cadre de votre m tier cette partie constituera le moyen de donner un nouvel lan votre pratique quotidienne Nous y aborderons les th matiques de la d finition de con tenus de l analyse concurrentielle c
18. aisser d cider seul de ce qu il souhaite 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 pas anti ergonomique Pensez ainsi que la demande de son peut tre implicite par exemple lorsque l utili sateur visionne une vid o ou consulte un site de musique 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 et c est donc plus g nant sur un site bancaire ou ven dant des v tements Lorsque votre site joue du son fournissez une possibilit tr s visible et tr s explicite de le stopper Lorsque le son accompagne le contenu et a une r elle utilit ajoutez y la possi bilit de r gler le volume 170 Le site n agit pas la place de l internaute Le site doit faire explicitement ce que linternaute lui demande ni plus ni moins Lorsque linternaute se trompe veillez ne pas vous int grer de fa on excessive dans la correction de cette erreur et laissez lutilisateur libre de ses actes 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 linter naute saisisse le chiffre 10 et magit qu au moment d ajouter le produit au panier Au lieu de l informer de son erreur et de le laisser rectifier en cons
19. ateurs clair s qui ont consid rablement m ri au cours des derni res ann es sur le sujet il est temps 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 plusieurs ann es d exp rience pour les ma triser Il vous faudra apprendre quelle technique est int ressante et rentable dans tel ou tel contexte Certaines techniques peuvent s av rer disproportionn es en fonction du niveau de qualit que vous voudrez atteindre D une certaine mani re au del de la connaissance th orique et de la compr hension pratique si ce livre doit vous conduire r fl chir la juste place de l ergonomie dans la vie du projet web il aura t encore plus utile Enfin outre les m thodes qui permettent de les concevoir il faut se poser la question de l volution des interfaces en elles m mes La quasi totalit des exemples 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 interfaces actuelles 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 en tant que p riph riques ind pendants Qui
20. aussi structurer vos contenus pour aider vos inter nautes dans leurs recherches Q 25 MON ABONNEMENT 2 Afficher mon RIB utilis pour le pr levement amp Mon Assistance amp Afficher mon adresse d installation amp Identifiants Hotline 2 Mes Conditions G n rales de Vente R cup rer ma ligne victime d crasement amp Suivi de ma commande amp Caract ristiques de ma ligne k O amp Sp Modifier mon mot de passe Freebox Sp Modifier mon adresse de facturation 2 Modifier mon email de contact Modifier mes coordonn es bancaires 2 Modifier mon num ro de mobile de contact 2p Changer de moyen de paiement 2p D m nager 8 Saisir les Informations Syndic pour le raccordement de la fibre optique La structuration met en avant les contenus cl s Une bonne architecture se traduit en termes de navigation par un par cours fluide qui passe inaper u aux yeux des visiteurs Pour que cela soit v rifi le plus souvent possible vous devez mettre en avant les pages ou fonctionnalit s les plus recherch es par vos internautes Cette action de hi 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 temporairement la rubrique Soldes afin de simplifier son acc s pour les utilisateurs amp zalando se Le Chaussures et mode en Lee 000 SOLDES Pr t porter Mar
21. 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 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 2 52552500 5m nsente mers aeaaea eard aeria hiai 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 Avant propos Internet change nous aussi Octobre 2011 Voici la troisi me dition du livre Ergonomie Web enti rement renouvel e par plus de 300 nouveaux exemples venant illustrer les diff rents chapitres et th mes abord s Depuis la premi re dition en 2007 l Internet a chang 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 quelq
22. border l ensemble des th matiques les unes apr s les autres Cependant dans leur mise en pratique sur un site web toutes ces r gles s imbriquent les unes dans les autres Vous verrez d ailleurs la fin de ce chapitre que pour satisfaire pleinement un principe ergonomique vous serez parfois contraint de mettre en d faut un autre principe Nous illustrerons ce type de conflits au travers de quelques exem ples concrets Dans ces situations de compromis les sp cificit s de votre projet vous aideront prendre les meilleures d cisions possibles Mais passons aux choses s rieuses et voyons donc comment vous pouvez aider vos internautes se sentir bien sur votre site Internet R gle n 1 Architecture le site est bien rang Commen ons avec la r gle d architecture pour que votre site serve vos internautes encore faut il qu ils puissent y trouver ce qui les int resse Vous atteindrez cet objectif en rangeant les informations de votre site de telle mani re que vos internautes localisent rapidement ce qu ils recherchent m Jeux de soci t ecs Poker amp Max collectionner Jeux d A Echecs Cartes jouer Jeux de casino Cartes Coffrets Bridge Plateaux Belote Roulettes Sabots Tapis pi ces Patience Divers FE LD Livres H LD LD Tarot Tapis Autres cartes Rateau
23. de vous vous rendrez vite compte du rapport qualit prix incroyable de cette m thode 78 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 la m thode des personas irrempla able pour d finir votre cible utilisateur et 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 marche pour 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 nimporte quoi Il faut donc aller plus loin et v ritablement s interroger sur les caract ristiques de vos internautes et les besoins qui en d coulent Ces informations seront les points d entr e qui vous permettront de prendre des d cisions en termes de fourniture de contenus et de services puis d 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 afin de cr er une interface leurs mesures La premi re tape de toute d marche ergonomique consiste donc fouiller dans toutes les so
24. de multiples conseils avanc s Vous d couvrirez ainsi toutes les subtilit s de ces d marches et les meilleures mani res de les appliquer 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 peuvent s 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 Vous verrez au fil des exemples que nos illustrations proviennent aussi bien de sites ditoriaux que de sites de commerce en ligne de sites vitrines d une activit 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 une dynamique int ressante pour illustrer chacun des principes voqu s mais elle sert surtout vous montrer que ces principes sont applicables quel que soit le contexte Autrement dit c est vous qui tes porteur des sp cificit s de votre projet web et l ergonomie est l pour vous donner un cadre 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 les principes et r gles auxquels e
25. e 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 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 de
26. e pour que ses principes de base puis sent infiltrer l ensemble des projets web Ce que vous trouverez dans ce livre c est un condens de nos connaissances et de notre exp rience dans le 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 des sites web pour des internautes et qui veulent comprendre les principes et m thodes que propose l ergonomie web dans ce sens Si vous lisez cet avant propos c est probablement que vous tes d j int ress par notre probl matique que vous d butiez ou que vous souhaitiez approfondir vos connaissances Si c est le cas qui que vous soyez vous tes au bon endroit Ce livre s adresse en effet tous les professionnels du Web ou ceux qui sont en passe de le devenir et tous les niveaux e d cisionnaire chef d entreprise responsable d activit web directeur de client le responsable marketing e chef de projet chef de produit concepteur fonctionnel architecte de l information ergonome e directeur de cr ation directeur artistique e 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 votre pratique quotidienne Le contenu de cet ouvrage vous int ressera parti culi rement si vous souhaitez e vous persuader du bien
27. e 5 102 Avant 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 der directement au site Source www allocine fr 168 Regardez ainsi comme le site de Rue du Commerce ajoute automatique ment une assurance au panier figure 5 101 page pr c dente Si linter 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 celui demand par linternaute C est le cas des introductions de site ou de vid os o l on profite de l int r t de linternaute pour un contenu ou un site particulier pour le forcer voir des contenus promotionnels on a alors affaire des messages de type Votre vid o d marrera dans 25 secondes 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 pour compenser un affichage publicitaire tr s intrusif Acc s direct AlloCin com ILS CR VENT L CRAN LE QUOTIDIEN DU PNEU viter l affichage de pop ups spo
28. e contournement Vous pouvez choisir diff rents syst mes d affi chage pour pr senter plusieurs contenus successi vement au m me endroit apparition al atoire d un contenu chaque nouveau chargement de la page ou apparition successive de plusieurs con tenus de mani re dynamique par exemple la fr quence d un contenu toutes les 8 s En fonction du syst me adopt si vous ne lui fournissez pas de moyen de contournement explicite l internaute peut s en trouver lui m me actualisation de la page 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 gradent fortement la facilit d utilisation de votre site Figure 5 100 Gr ce la navigation propos e dans le bas du bandeau on peut naviguer tr s facilement parmi les cinq mises en avant de contenu du site de Fluctuat net Source www fluctuat net 166 Donnez la possibilit l internaute de contourner le syst me et d agir dessus Vous devez aussi offrir vos utilisateurs la possibilit de contourner votre syst me si ce dernier est contraignant ou intrusif vous devez notamment les autoriser stopper une animation une vid o ou du son et mieux encore de contr ler le volume du son Cette r gle est notamment tr s importante dans le cas de mises en avant al atoires ou successives dans le m me espace cran Nous voquions la r gle n 2 ce type d
29. e 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 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 16
30. e notre exp rience de l ergonomie web elles doivent devenir votre leitmotiv DA AR AR D D D D D D Le HS he A 0 AO ee Le CE le A 0e A PO A SOMMAIRE R gle n 1 Architecture R gle n 2 Organisation visuelle R gle n 3 Coh rence R gle n 4 Conventions R gle n 5 Information R gle n 6 Compr hension R gle n 7 Assistance R gle n 8 Gestion des erreurs R gle n 9 Rapidit R gle n 10 Libert R gle n 11 Accessibilit R gle n 12 Satisfaction de votre internaute MOTS CL S R gles ergonomiques Architecture de l information Navigation Charge informationnelle Gestalt Homog n it Conventions Information et feedback Vocabulaire Guidage Affordances Erreurs Efficience Contr le utilisateur Accessibilit Satisfaction Ergonomie web 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 termes d ergonomie ou des habitudes de travail qui ont des cons quences sur l ergonomie de votre site web dans le bon ou le mauvais sens L objectif de ce chapitre est de vous aider comprendre et assimiler les bonnes pratiques de l ergonomie web Si vous n tes pas responsable de la concep tion fonctionnelle le but est de vous les faire appliquer au jour le jour en compl ment de votre m tier Si vous en tes responsable ces r gles deviendront la base de votre m tier
31. e proc d pour d multiplier la valeur du pixel carr Si vous l utilisez pensez toutefois fournir un moyen pour vos internautes de consulter l ensemble des mises en avant Si cette recommandation semble anodine et para t apporter simplement un moyen de navigation suppl mentaire il n en est rien Elle est capitale compte tenu du type de contenus pr sent dans ces zones qui sont sou vent des espaces promotionnels servant mettre en avant des contenus internes ou de la publicit Or c est souvent la suite d une navigation plus orient e que l utilisateur consulte ce type de contenus Autrement dit je viens sur le site dans un objectif bien pr cis je le r alise je peux voir d autres choses qui m int ressent en cours de route et n y revenir qu 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 minutes plus tard C est ce que propose le site Fluctuat net dans une interface tr s intelligente f 4 7 2 aS Te N ja Fe 7 ff a tt raire 10 destinations insolites en images PAS li Adoptez le principe suivant plus le nombre de mises en avant succes sives est important plus il est n cessaire d offrir vos internautes un moyen de naviguer parmi celles ci N induisez pas de comportement passif D une mani re g n rale faites tr
32. els 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 1 Gr 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 wWww reservoir jeux com 81 4 D finir votre internaute crit res et m thode des personas Ergonomie web 82 Je m appelle Fran ois je viens acheter le dernier livre de Paul Auster Interroger les internautes Pour 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 thodes plus distantes questionnaires ou entretiens en ligne discussions sur des forums sondages etc Votre objectif est de savoir qui ils sont ce qu ils font 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
33. es n ira pas visiter les autres CUISINE PLUS Equipements Temoignages DONNONS PLUS DE VIE VOS ID ES grandes marques VOIR LES PRODUITS EQUIPEMENTS Admiral H VOIR LES PRODUITS PROVEN ALE On voit travers cet exemple que ce qui fonctionne assez bien en catalogue papier 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 de Pordre du r flexe qu une suite d allers retours base de clics Les erreurs de cat gorisation viennent souvent du fait que les concepteurs utilisent leur propre mod le mental pour organiser les contenus Or les utilisateurs peuvent avoir des strat gies de recherche tout fait diff rentes Regardez par exemple comme cette page du site de Free t moigne d une cat gorisation technicienne figure 5 3 elle regroupe les items par type d action Afficher ou Modifier Or le r flexe classique d un internaute dans ce contexte sera de rechercher par objet RIB ou Coordonn es bancaires Il faut donc n cessairement grouper les actions relatives au m me objet voire les proposer seulement suite la s lection de l objet Soyez donc tr s vigilant puisqu un d faut de cat gorisation peut vous faire perdre votre internaute tr s rapidement Mais optimiser l architec ture de votre site n est pas juste une histoire de groupements Voyons comment vous devez
34. ez d sormais activer la vocalisation de la saisie sur mot de passe W7 Activer la vocalisation Pour saisir le mot de passe positionnez sans cliquer le curseur de votre souris sur le chiffre souhait BUOBE BODBE Figure 5 98 Le 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 ANNULER VALIDER Certaines fonctionnalit s d affichage au survol de la souris peuvent aussi mettre linternaute dans des situations d licates o il a l impression d tre coinc Souvent c est d ailleurs effectivement le cas et il doit trouver 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 en arri 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 fonctions d annulation voire de undo redo et de retour en arri re Accorder de telles possibilit s aux internautes peut relever d un v
35. fond de la d marche ergonomique et de l importance de l int grer au cycle de conception e vous former aux fondements r gles et m thodes de l ergonomie afin d en faire le socle de votre activit e 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 navez besoin d aucune connaissance pr alable pour lire ce livre Il vous sera toutefois plus facile de comprendre les exemples que nous citons si vous tes habitu naviguer sur le Web Nous en appelons donc davantage votre exp rience d internaute que de professionnel du Web Si vous d butez dans la conception web essayez de lire ce livre dans l 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 Avant propos Ergonomie web Si vous tes plus avanc dans votre connaissance de l ergonomie web vous pourrez 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 vous puissiez mieux vous approprier les concepts de base de l ergonomie et comprendre ce qui les sous tend De m me le d veloppement des appro ches m thodologiques audit analyse concurrentielle tri de cartes test utilisateur vous donnera
36. hapitre 7 de l architecture de l information et des interactions chapitre 8 et enfin du maquettage conceptuel chapitre 9 Avant propos chapitre Camille 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 itant 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 D finir qui sont vos internautes et ce qu ils font La m thode des personas MOTS CL S Profils utilisateurs Personas Sc narios d utilisation Ergonomie web M THODOLOGIE Et si je saute cette tape Si par manque de temps ou d int r t vous omettez de d finir le plus pr cis ment possible qui sont vos internautes vous commettez l erreur la plus cou rante dans les projets web actuels Ainsi concevoir un site sans tenir compte des sp cificit s et besoins de ses visiteurs produit un outil polyvalent mais qui peine les satisfaire Dans le second volet de ce chapitre vous appren drez donc remplacer votre vision g n rique de l internaute par une vision sp cifique de vos per sonas Et pas d inqui tu
37. i taire L IAB recommande de ne pas d passer 30 s voire 15 dans un certain nombre de cas Figure 5 101 Le 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 167 5 12 r gles pour optimiser l ergonomie de votre site Ergonomie web RECOMMANDATION Trop d intrusion fait fuir votre internaute Attention lorsque vous essayez de r colter des informations personnelles sur votre internaute Souvent tr s t t trop t t on a l impression d tre confront des questions du type Bonjour nom pr nom num ro de s curit sociale et nom de jeune fille de votre m re Il existe m me des sites o il est n cessaire de renseigner des donn es per sonnelles pour entrer Trop de sites sous pr texte d une d marche marketing veulent poser un tas de questions pour qualifier leur cible Or au lieu de la 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 res ann es les concepteurs comprenant petit petit leur effet 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 Figur
38. i 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 affordance 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 P 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 c
39. ible 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 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 informationnell
40. ie web 80 Par exemple si vous devez concevoir une interface pour jouer au Loto en ligne vous devez parfaitement comprendre ce qui sous tend ce jeu dans la 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 serviront non 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 de r pondre la question suivante Comment les gens ach tent ils des voyages aujourd hui Lorsque vous vous penchez sur ce type d interro gation vous sortez de votre r le de concepteur pour vous mettre la place 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 travaillez est aussi un facteur primordial dont vous devez avoir conscience et que vous devez prendre en compte en permanence Par exemple si la plupart de vos internautes utilisent le site plusieurs heures par jour cette infor mation devra n cessairement intervenir dans la conception de votre interface C est par exemple le cas d applicatio
41. ils install s sur le poste client mais aussi d un point de vue utilisateur En effet un nombre non n gligeable d internautes ferment toute pop up qui s ouvre spontan ment avant m me que son contenu soit charg du fait de la surutilisation de ce format par les publicitaires Quelques exemples de fen tres intrusives s affichant Grand tirage au sort soit au chargement du site soit en cours de visite pour tenter de gagner 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 le site de Sytadin o la consultation du trafic peut s accompagner d une pop up informant les internautes de travaux sur l autoroute Il est alors tout fait justifi d employer quelque chose de fort visuellement qui doit cacher le contenu initial sous peine d tre ignor par linternaute Ce qu il faut viter ce sont les pop ups promotionnelles qui sautent au visage des internautes alors qu ils n ont rien demand Sources www kookit com www linternaute com wwwr tati fr 169 5 12 r gles pour optimiser l ergonomie de votre site Ergonomie web Figure 5 104 Au vu de la quantit renseign e par l internaute 10 le site de Nicolas juge opportun de d cider de modifier lui m me cette quantit 2 Or ce syst me met l internaute dans une position passive qui risque de le contrarier Il est donc pr f rable de le l
42. ique 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 ergonomique 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 i
43. l tent donc la fois les principes de cat gorisa tion et de structuration 97 5 12 r gles pour optimiser l ergonomie de votre site Ergonomie web ALLER PLUS LOIN Navigation au survol de la souris Alex Frank nous propose avec Don t Click it un site enti rement navigable au survol Une exp rience tonnante o l on doit se concentrer pour ne pas survoler n importe quoi sous peine de passer une autre page ou d enclencher un bouton d action gt http www dontclick it 164 commande o il ne vous reste plus qu confirmer en vous laissant bien s r toute 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 doit forc 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 leurs besoins sur leurs parcours r els sur votre site R gle n 10 Libert c est l internaute qui commande Votre internaute doit toujours avoir le pouvoir et le contr le sur le site Internet tout au moins en avoir l impression Il donne des ordres et l 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 contraindre linternaute Vos visiteurs doive
44. lle 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 est l 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 ergonomie web chapitre 2 Nous vous expliquerons donc en quoi certaines 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 conception plus 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 de votre travail c est dire savoir qui sont vos internautes ce qui les carac t rise et comment prendre en compte ces informations pour y adapter votre site Nous aborderons donc au troisi me chapitre ce qui d finit tous 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 vofre internaute de mani re individuelle Nous ter minerons par la m thode des personas qui vous aidera int grer cette vision au jour le jour dans votre pratique
45. ns m tier ou d outils en ligne permettant l exercice d une activit professionnelle Cela peut aussi tre valable pour des interfaces web tr s sp cialis es par exemple des sites 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 utilisations les 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 res sont suffisamment interpr t es Difficile en effet de comprendre quelque chose des fichiers de logs bruts fournis par un serveur ou m me parfois aux informations disponibles sur les outils de statistiques courants La configuration la recherche et la compr hension de ce type de donn es est un vrai m tier Essayez donc de vous entourer de sp cialistes qui vous aideront obtenir et interpr ter les chiffres qui vous int ressent Vous tirerez des statistiques deux grands types d informations e 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
46. nt sentir qu ils ont le syst me en main et que rien ne se passera sans qu ils aient demand Respectez les contr les utilisateur conventionnels Pour que votre internaute sente que c est lui qui commande vous devez n cessairement respecter les contr les habituels en vigueur sur les autres sites N emp chez jamais le fonctionnement classique d un site l utilisa tion du bouton Back du navigateur la copie d un contenu textuel nimposez jamais une ouverture en plein cran sans qu elle ait t explici tement demand e etc Le fonctionnement le plus basique de votre site doit ainsi tre identique celui de la majorit des sites Internet sans quoi votre internaute se sentira coinc Fuyez les actions au rollover Si l affichage d informations au survol de la souris rollover est envisageable dans certaines conditions voir ce propos la r gle n 2 vitez tout prix de d clencher des actions par ce proc d Avec ce type d interfaces les internautes 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 il traduit bien la difficult li e au manque de contr le des interfaces au rollover Sur ce site c est le survol d un chiffre du pav virtuel qui permet sa s lection Imaginez comme il peut tre difficile de renseigner son mot de passe six chiffres pour un internaute d butant VOTRE MOT DE PASSE Vous pouv
47. ntan es Les m mes probl matiques d intrusion r gissent l affichage sous forme de pop ups spontan es c est dire qui s ouvrent sans qu on Pait demand La fen tre pop up peut pr senter certains avantages fonction nels dans l utilisation normale d un site par exemple elle est tout fait adapt e pour pr senter des contenus compl mentaires ou d aide tout en conservant le contexte et la page source visibles en dessous Cependant ce n est le cas que si linternaute l a explicitement demand e en cliquant sur un lien ou un bouton provoquant louverture de cette pop up Notez en 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 affichage de type flottant qui va venir se poser par dessus le site Le format ne r sout cependant absolument pas la question de l intrusion C est notamment presque devenu une mode de proposer l inscription la newsletter un jeu ou toute autre proposition louverture d un site ou pendant sa visite Pesez alors bien le pour et le contre de ce proc d LIVRAISON GRATUITE Soyez inform des nouveaut s promotions et ventes flash aies voue sresse eman x Figure 5 103 RECOMMANDATION Le format pop up est viter tant du point de vue technique que de l utilisateur Attention au v ritable format pop up discutable techniquement il est bloqu par de nombreux navigateurs et out
48. nternautes 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 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 23
49. odes de conception ces dimensions laisse souvent de c t ce qui devrait repr senter le point de d part de tout projet web savoir la satisfaction et le confort de l utilisateur final Ainsi la plupart des sites actuels manquent encore de l essentiel un vrai souci des internautes de qui ils sont et de leurs besoins Avec ce livre nous souhaitons proposer un d but de r ponse travers la pr sentation approfondie d un mode de pens e et d une trame m tho dologique bien sp cifiques Nous essaierons de vous amener conna tre et 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 est ce que l on appelle la conception centr e utilisateur Nous verrons que cette probl matique n est pas seulement une question d humanisme ou d thique et qu elle est capitale pour influencer le bon fonctionnement d un site tous les points de vue En tenant compte de ses 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 de satisfaire les attentes que l on a envers ce site que ce soit d un point de vue directement financier ou plus d tourn par exemple augmentation des visites de leur fr quence du nombre de pages visit es du nombre d inscriptions une newslet
50. ons votre internaute vous devez tre tr s attentif proc der de mani re raisonn e et fournir au besoin un moyen tr s simple de refuser votre proposition Un visiteur de votre site ne doit pas se sentir manipul ou oblig de faire quelque chose contre son gr Veillez donc ne pas tromper ni contraindre vos internautes sous pr texte d inciter Finalgez votre commande un 5 tapes taches gt Boutique R f rence Produit paires Quantit ii Disponibilit Actualisor Aspire 7741G 484G64Mn Ordinateur Partable 17 3 intel 575 00 Orainateurs LCROBUZ07E Core I5 480M 2 06 GHz 2 99 GHz Turbo 640 Go RAM 4095 ao ac on amimga En SOCR o E Caret pos chons iea garanten anroctet m RueDuCommerce vuus Pn P A conse e l achat de ce service DnA Ar Ae Se mme 1 sasoe csa O p paur vatre produit Les garanties RueDuCommerce Vara h r ioez funa r ductian Entrez ie votre onse Low Paisment s cuns g eti Total de vos achats 633 90 3x aaae D bit de votre CB cm Ta Mae oxp drion don cu partopuzun ame R giez vos achats on 3 fois inios 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 de l attention est tr s bas Il est tr s int ressant de ce point de vue de prendre en compte les recomman dations de l IAB Internet Advertising Bureau sur la dur e maximum d une animation public
51. quence le site applique alors une r gle automatique et adapte le nombre de bouteilles au plus proche Or le site ne peut pas d cider si au vu de cette con trainte linternaute va choisir de commander six ou douze bouteilles C est donc un bon moment pour proposer et non pour imposer Vous devez saisir une quantit multiple de 6 La quantit que vous avez saisie a t automatiquement arrondie 12 nr Au secours le site prend le contr le de l ordinateur Il est tr s important que linternaute 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 ouvrent un nouveau message pr rempli dans un client de messagerie vitez aussi de jouer une bande son alors que l utilisateur ne l a pas demand 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 Le premier r flexe de nombreux internautes sera alors de chercher comment teindre Notez que selon le contexte le son peut tre encore moins justifi lorsqu il est jou seul sans support vid o Ergonomie web VOCABULAIRE Lien transversal Un lien transversal est un lien qui passe outre l arborescence du site Il p
52. ques Chaussures Femme Chaussures Homme Chaussures Enfant Entrez votre recherche Q Rechercher Ae Service chem gratuit O 600 940 651 Top cat gories Chaussures Femme Banarras Sangaies Mu iianieaa mont dia E Paiement s curis Les menus aident linternaute naviguer dans les contenus Les internautes se d placeront dans l architecture que vous avez con ue gr ce aux l ments de navigation Les menus en font partie et sont parmi les plus difficiles concevoir Lorsque vous les pr parez vous devez veiller ce que vos internautes puissent choisir facilement parmi l 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 linternaute lit un intitul il doit com prendre ce qu il recouvre et pouvoir deviner le type de contenus appartenant la rubrique Nous voquerons plus pr cis ment les pro bl matiques de justesse du vocabulaire dans la r gle n 6 Figure 5 3 Les items Afficher mon RIB et Modifier mes coordonn es bancaires devraient faire partie du m me groupe Source www free fr Figure 5 4 Remonter 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 interface de vos choix d architecture de l information Ils ref
53. ritable choix strat gique Par exemple sur le site d Amazon on peut modifier sa commande jusqu au moment de son exp dition Vous pouvez m me annuler une commande et ce de mani re tr s simple tout ce que le site vous demande c est de pr ciser le motif d annulation d un article ou de modification d une quantit exp dier Annuler Articles command s Prix Article 1 ex de Emily L Poche EUR 5 71 D de Marguerite Duras Etat Neuf Nouveai Vendu par Amazon EU S a r L 1 article s Options cadeaux Aucun Raison de l annulation facultatif AE motif de l annulation Commande cr e par erreur btre annulation facultatif La commande n arrivera pas assez vite Frais de livraison trop lev s Prix du produit trop lev E a Produit trouv moins cher ailleurs Supprimer les articles s lectionn s Besoin de changer l adresse de livraison Besoin de changer le mode de livraison Besoin de changer l adresse de facturation Besoin de changer le moyen de paiement Autre Source www labanquepostale fr Figure 5 99 Le 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 165 5 12 r gles pour optimiser l ergonomie de votre site Ergonomie web SAVOIR L attente et l actualisation de la page ne sont pas des moyens d
54. ropose des endroits appropri s des liaisons directes vers des contenus en rapport avec les informations consult es UN PEU DE PSYCHOLOGIE La notion de bruit visuel Les l ments inutiles sur une page web agissent comme autant de bruit visuel qui vient perturber la simplicit de la page L internaute a donc plus de mal se concentrer sur ce qui l int resse 98 tre compl mentaires la somme de tous les items du menu doit recouvrir tout ce que le site propose ses internautes Il ne doit pas exister de contenu n appartenant aucune des rubriques tre exclusifs vos internautes doivent pouvoir choisir entre deux items sans h siter Vous devez donc viter toute ambigu t et respecter le crit re exclusivit un intitul doit tre le seul envisageable pour linternaute qui 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 e aux besoins de vos internautes mais que vous ne pouvez rien y faire cela peut 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 des rapports troits
55. s 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 Dirigez 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 taill
56. ter 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 de sites web doit int grer les questions d ergonomie voire en faire le c ur du 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 part quatre pr suppos s e que vous soyez convaincu de l importance de l ergonomie et en con naissiez les objectifs e que vous disposiez de connaissances de base sur l humain en g n ral et les r gles ergonomiques aff rentes e que vous poss diez des connaissances sur les visiteurs de votre site e 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 des sites labellis s comme tels En effet on croit trop souvent ne pouvoir faire de sites ergonomiques que sous la houlette d un ergonome alors que c est tout fait faux Il s agit donc ici de sortir l ergonomie de son statut de connaissance privil gi
57. 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 Les 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
58. tudes de cas d illustrations de t moignages ce livre est un incontournable si vous souhaitez vous docu menter en profondeur sur le sujet John Pruitt amp Tamara Adlin The Persona Life cycle Keeping People in Mind Throughout Product Design Morgan Kaufmann 2006 Ergonomie web Cinqui me partie mettez votre site l preuve La derni re partie de ce livre est enti rement consacr e deux m thodes privil gi es de l ergonomie web faisant intervenir des internautes pour qu 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 de la 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 pourrez toucher 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 et de ce qui les conditionne Remerciements Ce livre n existerait pas sans l aide pr cieuse des personnes qui mentou rent Un grand merci donc e Karine Joly mon ditrice pour son implication et sa disponibilit dans tous nos projets Avec elle toute l quipe Eyrolles qui a r ussi
59. ues recommandations et techniques viennent enrichir les contenus initiaux mais le c ur du sujet reste inchang et applicable au Web mais aussi de nombreuses autres interfaces crans Pourquoi ce livre Si l on regarde rapidement ce qui se passe sur le Web francophone aujourd hui on peut faire le constat suivant il y a de plus en plus de sites mais aussi de plus en plus d internautes qui utilisent le Web de plus en plus souvent pour faire de plus en plus de choses Encore plus int ressant il existe un certain nombre d activit s pour lesquelles on ne peut plus se passer d une interface web ces derni res tendant remplacer d autres modes de communication papier t l phone fax logiciels et machines en tous genres Face cette mont e en puissance du Web dans nos vies il importe de s 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 Ergonomie web LA SUITE SUR LE WEB Le site compagnon Vous trouverez des compl ments cet ouvrage sur son site compagnon Lorsqu une ressource est dis ponible en ligne pour faciliter votre compr hension nous vous l indiquons l endroit appropri Profitez aussi de ce site pour nous envoyer un message et nous dire ce que vous avez pens de ce livre www ergonomie sites web com nos m th
60. uivant le pr cepte du Qui peut le plus peut le moins vous concevez votre site pour 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 un processus complexe en de nombreuses tapes afin de rendre chacune d elles tr s simple Or ce proc d produit une interface tr s rigide peu perm able aux ph no m nes d apprentissage m me si leur niveau d expertise augmente vos utilisateurs seront toujours bloqu s par le cheminement impos par le syst me Ainsi une interface con 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 vos utilisateurs contre les erreurs sans moyen de contour nement vous allez contraindre les plus experts subir des messages de confirmation incessants dont ils se seraient bien pass s Si vous concevez pour l utilisateur le plus novice vous risquez donc de p naliser celui dont le niveau d exper tise est plus lev Ceci se ressentira la fois sur le plan objectif ils seront moins efficients qu ils ne pourraient l tre mais aussi sur le plan subjectif se sentant con traints et assist s comme des d butants ils pourraient revendiquer un peu de libert en allant regarder ce qui se fait chez vos concurrents Une anecdote ce sujet Jakob Nielsen et Hoa Loranger relatent dans leur
61. urces 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 ces traits distinctifs Questionnez vos clients le service marketing la direction les chefs de projet le service apr s vente bref toutes les personnes qui pourraient vous aider obtenir des informations Votre r le consiste rassembler toutes ces donn es et en d gager des profils utilisateurs Surtout ne c 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 e des personnes e des objectifs e des contextes d utilisation ID ERE 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 objectif de l ergonomie web N essayez pas de concevoir votre site pour n importe qui une personne moyenne ou la personne la plus novice mais pour vos utilisateurs Ce sont eux qui vous jugeront au final en fonction de leurs besoins sp cifiques Si votre interface est con ue pour d autres elle risque de ne pas leur correspondre Un exemple courant si en s
62. urs 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 repr 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 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
63. x jouer Livres Divers Jetons LRARREZ Livres Figure 5 1 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 la meilleure mani re d organiser votre contenu en vue de le pr senter vos internautes Nous verrons au chapitre 8 que cela n cessite un travail de cat 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 de vos 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 partageant suffisamment de caract ristiques communes pour tre plac s dans la m me cat gorie Attention c est en g n ral difficile d en juger seul vous devez cr er vos rubriques selon les mod les mentaux de vos internautes Lorsque 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 la mise en

Ergonomie web

Contents

Download Pdf Manuals

Related Search

Related Contents