!!Rsum!des!4!premires!parties!(sur!5)!de!louvrage!!ERGONOMIE!WEB!!par!Natural"net,!sans!aucune!volont!de!plagier!mais!dans!lobjectif!!de!donner!envie!!ceux!qui!consulte!cette!synthse!de!sintresser!!louvrage!original!et!de!mettre!en!valeur!le!travail!dAmlie!BOUCHER.!!!! ! Eigonomie Web Synthse!de!louvrage!dAmlie!Boucher!:!!Ergonomie!Web!![Editions!Eyrolles]!mercredi!7!mai!2008!2!!Table ues matieies Avant!propos!..........................................................................................................................................................................!4!PARTIE!1!:!INTRODUCTION!A!LERGONOMIE!WEB!....................................................................................................................!5!Lergonomie!web,!quest"ce!que!cest!?!...................................................................................................................................!5!Un!site!web!ergonomique!est!un!site!utile!et!utilisable!..................................................................................................................!5!Intrts!et!retour!sur!investissement!(ROI)!.....................................................................................................................................!5!Les!mthodes!de!lergonomie!web!.................................................................................................................................................!6!La!place!de!lergonomie!dans!les!projets!web!................................................................................................................................!6!Le!top!10!des!ides!reues!sur!lergonomie!..............................................................................................................................!6!La!sacro"sainte!rgle!des!3!clics!......................................................................................................................................................!6!Les!internautes!sont!des!idiots!........................................................................................................................................................!6!Lergonomie!et!le!design!sont!des!ennemis!jurs!...........................................................................................................................!6!Pas!besoin!dergonomie,!on!a!fait!un!focus!group..........................................................................................................................!7!Faites"moi!un!site!ergonomique!.....................................................................................................................................................!7!Les!internautes!lisent!en!F!..............................................................................................................................................................!7!Lergonomie!cest!juste!du!bon!sens!...............................................................................................................................................!7!On!le!fera!en!Web2.0,!en!ajax,!etc,!.................................................................................................................................................!7!Les!internautes!ne!scrollent!pas......................................................................................................................................................!7!Pour!lergonomie,!on!verra!!la!fin!.................................................................................................................................................!7!PARTIE!2!:!LES!FONDEMENTS!DE!LERGONOMIE!.......................................................................................................................!8!Comprendre!linternaute!:!dabord!un!tre!humain!..................................................................................................................!8!Dcouvrez!et!appliquez!les!thories!de!la!Gestalt!..........................................................................................................................!8!Dcouvrez!et!appliquez!la!loi!de!Fitts!.............................................................................................................................................!8!Dcouvrez!et!appliquez!le!concept!daffordance!............................................................................................................................!9!Le!nombre!magique!de!Miller!et!la!loi!de!Hick................................................................................................................................!9!Accessibilit!visuelle!et!lisibilit!......................................................................................................................................................!9!Dfinir!votre!internaute!:!critres!et!mthodes!des!personas!.................................................................................................!10!Une!personne!donne!dans!un!contexte!prcis!............................................................................................................................!10!Un!persona!pas!comme!les!autres!................................................................................................................................................!10!PARTIE!3!:!LES!REGLES!DE!LERGONOMIE!WEB!.......................................................................................................................!12!12!rgles!pour!optimiser!lergonomie!de!votre!site!................................................................................................................!12!Rgle!n1.!Larchitecture!:!le!site!est!bien!rang!...........................................................................................................................!12!Rgle!n2.!Organisation!visuelle!:!la!page!est!bien!range!...........................................................................................................!12!3!!Rgle!n3.!Cohrence!:!le!site!capitalise!sur!lapprentissage!interne!............................................................................................!14!Rgle!n4.!Conventions!:!le!site!capitalise!sur!lapprentissage!externe!........................................................................................!14!Rgle!n5.!Information!:!le!site!informe!linternaute!lui!rpond!...................................................................................................!15!Rgle!n6.!Comprhension!:!les!mots!et!symboles!sont!choisis!minutieusement!.........................................................................!16!Rgle!n7.!Assistance!:!le!site!aide!et!dirige!linternaute!..............................................................................................................!16!Rgle!n8.!Gestion!des!erreurs!:!le!site!prvoit!que!linternaute!se!trompe.!.................................................................................!18!Rgle!n9.!Rapidit!:!linternaute!ne!perd!pas!son!temps!.............................................................................................................!19!Rgle!n10.!Libert!:!cest!linternaute!qui!commande!.................................................................................................................!20!Rgle!n11.!Accessibilit!:!un!site!facile!daccs!pour!tous!...........................................................................................................!21!Rgle!n12.!Satisfaction!de!votre!internaute!................................................................................................................................!21!En!bref!les!12!rgles!!utiliser!!bon!escient!.................................................................................................................................!22!Laudit!ergonomique!:!conseils!et!mthodologie!....................................................................................................................!23!Pratique,!support!et!moyens!de!laudit!ergonomique!..................................................................................................................!23!Structurer!ltude!selon!vos!besoins!.............................................................................................................................................!24!Conduire!une!analyse!ergonomique!.............................................................................................................................................!25!PARTIE!4!:!LES!ETAPES!DE!LA!CONCEPTION!WEB!:!PENSEZ!VOTRE!SITE!DE!A!A!Z!......................................................................!27!Dfinition!des!contenus!et!analyse!concurrentielle!................................................................................................................!27!Votre!contenu!rpond!!un!besoin!de!linternaute!.......................................................................................................................!27!Que!font!les!autres!?!Lanalyse!concurrentielle!en!ergonomie!.....................................................................................................!28!Architecturer!linformation!et!les!interactions!.......................................................................................................................!29!Ranger!pour!aider!!trouver!.........................................................................................................................................................!29!Comment!visite"t"on!un!site!internet!?!.........................................................................................................................................!29!Une!organisation!calque!sur!les!attentes!de!linternaute!...........................................................................................................!30!Concevez!votre!architecture!de!linformation!...............................................................................................................................!30!Au"del!de!la!navigation!:!architecturer!les!parcours!client!et!les!interactions!............................................................................!31!Passez!!lcran!:!zonings!et!maquettes!.................................................................................................................................!32!Le!zoning!:!un!premier!dcoupage!................................................................................................................................................!32!La!maquette!conceptuelle!:!chaque!zone!en!dtail!.......................................................................................................................!32!Quels!logiciels!pour!raliser!zonings!et!maquettes!?!....................................................................................................................!33!CINQUIEME!PARTIE.!METTEZ!VOTRE!SITE!A!LEPREUVE!..........................................................................................................!33!!! !4!!Avant piopos Essor!dinternet!!!Professionnalisation!:!!!Rflexion!sur!la!qualit!dun!site!et!son!adaptation!!sa!cible!!!Economie!de!cots!(efficience)!CONCEPTION!CENTREE!UTILISATEUR!:!! !!Optimisation!de!la!rentabilit!!!Diminution!des!cots!de!la!conception/exploitation!!!Fidlisation!des!internautes!!CONCEPTION!CENTREE!UTILISATEUR!!Crer!une!interface!au!service!dun!internaute! effectuant! une! tache!donne!dans!un!contexte!donn!!5!!PARTIE 1 : INTR0B0CTI0N A L'ERu0N0NIE WEB L'eigonomie web, qu'est-ce que c'est . 0n site web eigonomique est un site utile et utilisable Lergonomie!redonne!du!pouvoir!!ltre!humain,!permet!!loutil!!site!Internet!!daider!et!non!de!pnaliser.!2!grandes!fonctions!sont!gages!de!la!russite!dun!site!Internet!et!de!la!fidlisation!des!internautes!qui!lutilise!:!!0tilit uu site poui captei l'inteinaute !A!quoi!sert!un!site!et!quels!micro"services!il!offre!?!0tilisabilit poui piolongei l'utilisation pai l'inteinaute LES!COMPOSANTS!DE!LUTILISABILITE!:!!!!Efficacit!:!un!utilisateur!peut!faire!ce!quil!doit!faire!(surtout!pour!les!sites!gnralistes)!!!Efficience!:!faire!rapidement!ce!quil!a!!faire!avec!le!moins!derreur!!(surtout!pour!les!sites!spcialiss!+!pour!fidliser!linternaute)!!!Satisfaction!:!mettre!le!site!au!service!des!utilisateurs!Intits et ietoui sui investissement (R0I) !Investir!!dans!lergonomie!permet!:!!!satisfaction!donc!fidlisation!des!!clients!!!!augmentation!des!ventes!et!taux!de!conversion!!!augmentation!du!trafic!et!de!sa!qualit!!!amlioration!des!performances!des!utilisateurs!en!terme!defficacit!et!defficience!!!amlioration!de!limage!de!marque!MOTS!CLES!DU!CHAPITRE!Ergonomie,! utilit,! utilisabilit,! efficacit,!efficience,!satisfaction,!ROI!!DEFINITION!DE!LA!NORME!ISO!9241!DE!LUTILISABILITE!:!!!Un! produit! est! dit! utilisable,!lorsquil! peut! tre! utilis! avec!efficacit,! efficience! et! satisfaction!par! des! utilisateurs! donns!cherchant! ! atteindre! des! objectifs!donns,! dans! un! contexte!dutilisation!donn!!CONCLUSION!DU!RAPPORT!DE!J.NIELSEN!&!S.GILUTZ!!USABILITY!RETURN!ON!INVESTMENT!!!La! moiti! du! budget! de! cration!dun! site! Internet! devrait! tre!consacre!!lutilisabilit.!!6!!!!rduction!des!temps!de!dveloppement!(pour!Jakob!Nielsen!une!modification!cote!100!fois!plus!aprs!le!lancement!dun!site)!Les mthoues ue l'eigonomie web Nthoues expeites Ces!mthodes!font!intervenir!un!ou!plusieurs!intervenants!concepteurs!ou!responsables!daudit!pour!concevoir!o!valuer!des!sites!en!fonction!de!leurs!connaissances,!expriences!et!convictions.!Nthoues paiticipatives Ces!mthodes!mettent!en!jeu!les!utilisateurs!finaux!en!les!observant,!les!questionnant!sur!des!donnes!objectives!le!plus!souvent!sous!forme!dentretiens!ou!danalyses!individuelles.!La place ue l'eigonomie uans les piojets web Elle!est!parfois!qualifie!de!!science!du!compromis!!dans!le!sens!o!elle!doit!mettre!en!jeu!tous!les!interlocuteurs!dun!projet!web!en!leur!demandant!de!dialoguer.!Le!suivi!ergonomique!est!primordial!et!transversal!!tout!le!projet!de!cration!du!dbut!!sa!fin.!Le top 1u ues iues iecues sui l'eigonomie O!comment!se!dfaire!des!ides!reues.!La sacio-sainte iegle ues S clics Cette!!rgle!!prend!en!compte!la!difficult!physique!!des!clics,!mais!occulte!compltement!la!difficult!mentale!;!limportant!est!que!linternaute!ralise!!bien!les!tches!quil!souhaite!mener!sans!erreur!ou!ambigut.!Appliquer!stricto"sensu!cette!rgle!peut!nuire!au!projet.!Linternaute!peut!au!final!tre!plus!efficient!dans!sa!dmarche!en!faisant!plus!de!3!clics!sans!se!poser!de!question!ni!commettre!derreur.!Les inteinautes sont ues iuiots Il!ne!faut!ni!sous"estimer!ni!surestimer!les!internautes.!Il!ne!faut!pas!rflchir!au!bien!tre!des!Internautes!en!gnral,!mais!connatre!les!Internautes!visitant!le!site!et!prendre!en!compte!leurs!caractristiques.!L'eigonomie et le uesign sont ues ennemis juis Les!2!disciplines!frontalires!doivent!en!ralit!collaborer!et!se!rpondre!:!!Le!graphisme!aide!lergonomie!quand!il!respecte!les!recommandations.!Ces!changes!permettent!doptimiser!lutilisabilit,!le!design!influence!la!qualit!ergonomique!de!linterface!dun!point!de!vue!utilisateur.!!Le!graphisme!possde!galement!un!fort!impact!sur!la!satisfaction!des!internautes!(composante!de!lutilisabilit).!MOTS!CLES!DU!CHAPITRE!Architecture! de! linformation,! ergonomie,!design,!sens!de!lecture,!scroll,!focus!group,!test!utilisateur!!7!!!Lesthtique!dune!interface!influence!la!perception!de!lutilisabilit!par!les!internautes!car!inconsciemment!on!interprte!que!ce!qui!est!beau!est!galement!agrable!!utiliser.!Pas besoin u'eigonomie, on a fait un focus gioup Il!est!essentiel!de!ne!pas!confondre!les!rsultats!et!la!dmarche!de!focus!group!(mthode!collective!permettant!de!collecter!les!avis!subjectifs!des!internautes)!et!la!dmarche!ergonomique.!Les!focus!group!et!les!tests!utilisateurs!sont!tous!2!utiles!!la!dmarche!ergonomique!mais!ne!sy!substituent!pas.!Faites-moi un site eigonomique Un!site!ergonomique!!100%!est!un!modle!idal!utopique!puisque!tous!les!internautes!sont!diffrents,!cherchent!!raliser!des!taches!diffrentes!dans!des!contextes!diffrents.!Les inteinautes lisent en F Il!nexiste!pas!de!sens!de!lecture!de!page!web!inscrit!dans!nos!automatismes!mentaux,!chaque!internaute!possde!des!habitudes!diffrentes!et!laspect!graphique!!un!fort!impact!sur!son!comportement!de!lecture.!Il!ne!faut!pas!construire!un!site!!partir!de!tels!pr"requis!mais!de!faon!rflchi!et!dpendant!du!contexte!ainsi!que!des!conventions!web!qui!ont!merges.!L'eigonomie c'est juste uu bon sens Il!ny!a!pas!de!bon!sens!ergonomique,!cest!essentiellement,!la!rflexion,!la!connaissance!des!grands!principes!dergonomie,!et!lexprience!qui!permettent!de!forger!une!bonne!ergonomie.!Il!est!important!que!tous!les!acteurs!du!projet!possdent!des!notions!dergonomie.!0n le feia en Web2.u, en ajax, etc, La!technologie!ne!dtermine!pas!en!soi!la!facilit!dutilisation!finale!du!site,!les!objectifs!et!normes!de!lergonomie!sont!les!mmes!quelque!soit!la!technologie.!Les inteinautes ne sciollent pas En!ralit!les!internautes!scrollent!si!le!site!correspond!!leurs!attentes!et!si!ils!pensent!quils!trouveront!ce!quils!cherchent!en!scrollant.!A!contrario!veiller!!disposer!dans!la!zone!de!haut!de!page!tous!les!lments!primordiaux,!et!des!lments!plus!annexes!dans!les!zones!scrollables!est!judicieux.!!Poui l'eigonomie, on veiia la fin Les!proccupations!ergonomiques!nintervient!pas!ponctuellement!!mais!tout!au!long!du!projet.!!! !8!!PARTIE 2 : LES F0NBENENTS BE L'ERu0N0NIE Compienuie l'inteinaute : u'aboiu un tie humain Ce!chapitre!prsente!diffrentes!!lois!!qui!conditionnent!le!comportement!des!tres!humains!de!manire!gnrale!et!qui!ont!des!consquences!importantes!quand!!leurs!comportements!sur!internet.!Bcouviez et appliquez les thoiies ue la uestalt Elles!traitent!de!la!manire!dont!notre!cerveau!analyse!son!environnement!comme!un!ensemble!de!formes.!Plusieurs!lois!composent!les!thories!de!Gestalt,!2!ont!des!consquences!essentielles!par!rapport!!Internet!:!La loi ue pioximit Notre!cerveau!tend!!regrouper!des!choses!qui!sont!proches!physiquement.!Il!faut!donc!rapprocher!physiquement!des!lments!ayant!des!points!communs!et!dissocier!les!lments!diffrents!et!ce!quelque!soit!lchelle!(de!la!page!dans!son!ensemble!!chaque!zone!et!lment!la!composant.!En!respectant!ce!principe,!le!site!gagne!en!intuitivit.!La loi ue similaiit Notre!cerveau!tend!!regrouper!des!choses!qui!se!ressemblent,!une!diffrence!de!forme!ou!de!couleur!sera!signe!dobjets!opposables.!Bcouviez et appliquez la loi ue Fitts Une!cible!est!dautant!plus!rapide!!atteindre!quelle!est!proche!et!grande!:!Les lments cliquables uoivent tie gios Pour!augmenter!la!taille!des!lments!cliquables,!il!est!possible!:!!"Daugmenter!la!taille!relle!des!lments!cliquables!et!de!choisir!des!tailles!relatives!!leur!importance!"Daugmenter!la!surface!cliquable!des!lments!cliquables!(ex!:!le!clic!sur!le!label!pour!un!bouton!radio,!en!sassurant!que!toute!la!surface!des!boutons!soient!cliquables!et!pas!seulement!le!texte!du!bouton).!Cela!permet!en!plus!de!compenser!les!erreurs!et!imprcisions!des!internautes,!et!de!guider!leur!comportement!(le!changement!du!curseur!de!la!souris!!prvient!,!avant!darriver!prcisment!sur!la!cible,!linternaute!quil!pourra!cliquer)!"!Daugmenter!la!distance!entre!des!lments!cliquables!par!des!actions!sur!la!distance!physique!ou!la!diffrence!de!formes!ou!de!couleurs.!Les lments cliquables uoivent tie pioches Plus!lobjet!cible!est!proche!de!lobjet!source,!plus!on!latteindra!rapidement,!en!consquence,!il!faut!:!!"Regrouper!les!lments!utiliss!de!manire!simultane!ou!successive!MOTS!CLES!DU!CHAPITRE!Gestalt,! proximit,! similarit,! loi! de! Fitts,!affordances,! nombre! magique! de! Miller,!Loi!de!Hick,!accessibilit!visuelle,!lisibilit!!9!!"Utiliser!!les!raccourcis!claviers!et!clic!droit!qui!rduisent!forcment!les!distances.!Bcouviez et appliquez le concept u'affoiuance Les!affordances!sont!les!possibilits!daction!suggres!par!les!caractristiques!dun!objet.!Les!affordances!nous!permettent!danticiper!et!de!connaitre!!lavance!quel!comportement!adopter!face!!un!objet!ou!une!situation.!0ptimisei l'affoiuance vous pouvez me cliquei "En!optimisant!laffordance!de!cliquabilit!des!lments!correspondant!pour!favoriser!leur!reprage!(via!la!forme,!couleur,!libell,!curseur!de!souris,!localisation!dans!linterface,!adjonction!dlments!indiquant!la!prsence!dun!lien,)!"En!travaillant!sur!le!comportement!de!lobjet!lors!de!linteraction!avec!linternaute!(roll"over)!Et!penser!galement!!renforcer!laffordance!des!autres!lments!dinteraction!tel!des!formulaires.!0ptimisei l'affoiuance vous pouvez inteiagii avec moi Il!sagit!de!donner!aux!lments!dinteraction!de!type!champ!de!formulaire!une!apparence!les!incitant!!les!utiliser!et!facilitant!leur!reprage!via!une!recherche!sur!la!forme,!la!couleur,!le!libell,!le!contenu,!la!localisation!dinterface,!ladjonction!dlments!renforant!lidentit!et!surtout!en!respectant!les!conventions.!Attention aux affoiuances eiiones Il!ne!vaut!mieux!pas!dtourner!les!affordances!pour!ne!pas!diminuer!lutilisabilit!finale!(pas!de!texte!soulign!non!cliquable,)!Le nombie magique ue Nillei et la loi ue Bick La loi ue Nillei !Au"del!de!7!!objets!!dans!notre!cerveau,!il!sature!!;!7!est!donc!le!nombre!magique!de!Miller!(plus!ou!moins!2!lments),!seuil!maximal!de!notre!!mmoire!de!travail!!qui!nous!permet!de!stocker!des!informations!temporaires.!En!consquence!il!faut!le!prendre!en!compte!pour!ne!pas!surcharger!les!interfaces!web.!Ce!nest!cependant!pas!une!loi!!respecter!stricto"sensu!notamment!quand!au!nombre!ditems!des!menus.! La loi ue Bick Cette!loi!indique!quil!est!plus!facile!de!dcider!parmi!un!nombre!rduit!dlments,!la!complexit!de!comprhension!et!dutilisation!croit!proportionnellement!au!nombre!de!choix!proposs!Accessibilit visuelle et lisibilit "Sattacher!!concevoir!des!interfaces!adaptes!aux!internautes!pnaliss!sur!le!plan!visuel!(synthse!vocale!et!autres)!!!Optimisation!de!lintgration!html!(normes!xhtml/css!(sparer!contenu!et!forme)!+!normes!daccessibilit!(liens!de!contournement!(skiplink)!et!title!sur!les!liens))!"Sattacher!!facilit!lutilisation!courante!du!site!quelque!soit!linternaute!!!Optimisation!de!la!charte!graphique!!ooptimisation!des!couleurs!:!!10!!"diffrence!de!couleurs!en!prenant!en!compte!les!couleurs!qui!!vibrent!!(bleu!rouge!;!noir!blanc!franc)!et!la!taille!et!la!graisse!des!textes!"diffrence!de!brillance!(recommand!dtre!suprieure!!125)!ooptimisation!des!caractristiques!des!textes!"taille!des!polices!"graisse!des!polices!"typographie!(sans!serif!plus!lisible!quavec!serif)!"interlignage!"casse!(minuscule!plus!lisible!que!les!majuscules)!Bfinii votie inteinaute : ciiteies et mthoues ues peisonas !Dfinir!lutilisateur!et!ses!particularits!afin!de!concevoir!un!systme!adapt!!ses!besoins!et!capacits!!0ne peisonne uonne uans un contexte picis Il!faut!dialoguer!avec!les!responsables!du!projet!et!collecter!un!maximum!dinformations!sur!les!cibles!utilisateurs!en!dterminant!:!!Qui!?!,!!Quels!sont!ces!objectifs!?,!!Quels!sont!les!contextes!dutilisation!?!!!Concevoir!un!site!pour!les!plus!novices!dentre!eux!nest!pas!!la!!solution,!mieux!vaut!ladapter!aux!relles!cibles.!La notion ue tche poui mieux ceinei l'inteinaute !Il!est!primordial!danalyser,!de!questionner,!dobserver!les!utilisateurs!dans!les!taches!quils!effectuent!sur!le!site,!on!en!retire!des!donnes!concernant!!la!fois!lutilit!et!lusabilit.!Les statistiques ue visite, un atout majeui Renseignent!sur!les!configurations!des!utilisateurs!et!la!qualit!des!visites!(pages!les!plus!visites,!nb!de!pages!vues/visite,)!et!dsormais!des!outils!permettent!dobtenir!des!informations!sur!le!comportement!au!sein!mme!dune!page!(taux!de!clics!sur!diffrents!lments)!Inteiiogei les inteinautes 0n peisona pas comme les auties Les!personas!reprsentent!des!utilisateurs!typiques!crs!de!toute!pice!permettant!de!concrtiser!la!notion!dutilisateur!type.!!Les intits ue ciei ues peisonas"Force!!se!pencher!rellement!sur!la!cible!toute!lquipe!implique!dans!le!projet!"!Humanisation!!de!la!cible!par!lapport!de!toutes!les!caractristiques!(nom,!histoire,!lieu!de!consultation,)!favorable!!lempathie!et!donc!la!relle!considration!MOTS!CLES!DU!CHAPITRE!Profils! utilisateurs,! personas,! scnarios!dutilisation!!11!!"Ncessite!dattribuer!aux!personas!des!missions!et!!matrialiser!les!objectifs!utilisateurs!Comment ciei et utilisei ues peisonas Il!existe!diffrents!types!de!personas!"Le!persona!primaire!(cible!de!prdilection)!important!pour!dfinir!les!principes!de!fonctionnement!par!dfaut!du!systme!"Les!personas!secondaires!!"Les!personas!tertiaires!pour!les!profils!plus!annexes!"Les!ante"personas!sont!ventuellement!utiliss!pour!dfinir!les!profils!que!lon!souhaite!exclure!du!site!Combien!de!personas!crer!?!Le!but!!conserver!en!tte!est!davoir!au!final!le!mois!de!personas!possibles!car!il!ne!sagit!pas!de!prendre!en!compte!lexhaustivit!de!la!cible!mais!au!contraire!de!restreindre!!peu!de!profils!particuliers.!La!cration!de!personas!doit!tre!collective!Sous!peine!dcarter!des!personas!importants!et!de!sloigner!des!cibles!relles!Comment!dfinir!(construire)!un!persona!Les!dimensions!!prendre!en!compte!dans!lordre!suivant!:!!"Objectifs!et!missions!sur!le!site!spcifiques!et!prcis!(ce!point!est!bien!le!premier!!dfinir!!)!"Information!socio"dmographique!"Relation!!la!marque,!historique!client!et!relation!!la!concurrence!"Habitudes!et!envies!Communiquer!sur!les!personas!Ce!sont!des!outils!de!travail!pour!lensemble!de!lquipe!projet,!il!faut!donc!ne!cesser!den!parler.!Tout!ce!qui!peut!les!rendre!plus!prsents!est!positif!(affiches,)!!!12!!PARTIE S : LES REuLES BE L'ERu0N0NIE WEB 12 iegles poui optimisei l'eigonomie ue votie site Les!rgles!dergonomie!permettent!doptimiser!la!qualit!dutilisation!du!site!en!influenant!la!conception!et!en!tant!quoutil!de!pour!valuer!des!interfaces!existantes.!Toutes!ces!rgles!sont!imbriques!et!doivent!rgir!la!construction!de!larchitecture!du!site!dans!son!ensemble!tout!comme!chacune!des!pages.!Regle n1. L'aichitectuie : le site est bien iang Il!sagit!de!dterminer!la!meilleure!manire!dorganiser!le!contenu!en!vue!de!sa!prsentation!aux!internautes!via!la!catgorisation!(grouper)!et!la!structuration!(hirarchiser).!Les iegioupements sont logiques !Faire!des!regroupements!logiques!en!adoptant!des!termes!clairs!et!ninduisant!pas!en!erreur!sur!le!contenu.!La stiuctuiation met en avant les contenus cls !Larchitecture!doit!tre!pense!pour!faire!remonter!au!premier!plan!les!lments!majeurs!et!contenus!importants!Les menus aiuent naviguei uans les contenus Les!menus!refltent!!la!fois!les!principes!de!catgorisation!et!de!structuration.!!Les!intituls!doivent!respecter!3!critres!:!!"tre!signifiants!:!voquer!clairement!le!contenu!"tre!complmentaires!:!la!somme!de!tous!les!items!recouvre!tout!le!contenu!du!site!"tre!exclusifs!:!viter!les!ambiguts!en!permettant!!chaque!item!davoir!son!sens!mme!en!labsence!de!la!lecture!des!autres!items!Contouinei un site mal iang !La!mise!en!place!de!liens!transversaux!au!cur!des!pages!peuvent!permettre!de!contourner!une!mauvaise!organisation!et!renforcer!la!mise!en!exergue!de!certains!contenus!ou!de!certaines!fonctionnalits.!Regle n2. 0iganisation visuelle : la page est bien iange La!finalit!est!de!librer!au!maximum!lesprit!de!linternaute!en!limitant!la!charge!mentale!lie!au!traitement!des!informations!de!ce!quil!peroit!!lcran.!Evitei le tiop plein u'infoimations En!purant!les!pages!et!en!supprimant!ce!que!ne!sert!!rien!MOTS!CLES!DU!CHAPITRE!Rgles! ergonomiques,! architecture! de!linformation,! navigation,! charge!informationnelle,! Gestalt,! Homognit,!conventions,! informations! et! feedback,!vocabulaire,!guidage,!affordances,!erreurs,!efficience,! contrle! utilisateur,!accessibilit,!satisfaction.!!13!!Diviser!la!quantit!de!mots!par!2!dans!les!pages!de!navigation!Il!est!souvent!possible!de!supprimer!des!termes!inutiles!essentiellement!dans!les!pages!de!navigation!et!dans!les!lments!de!navigation.!Il!ne!faut!pas!hsiter!!remettre!en!cause!lutilit!de!textes!pour!les!internautes!en!vrifiant!que!leur!prsence!est!justifie.!N'affichei que les piincipaux lments ue navigation et u'inteiaction Afficher!les!lments!optionnels!que!quand!cela!est!ncessaire!Ce!point!prend!toute!sa!valeur!pour!les!formulaires!ou!il!y!a!des!interactions!avec!linternaute!;!le!but!est!de!ne!proposer!les!fonctionnalits!optionnelles!que!lorsque!linternaute!en!a!besoin!et!sans!rafraichissement!de!la!page.!Supprimer!les!lments!dinteraction!inutile!Cest!notamment!le!cas!dun!!bouton!!suivant!apparaissant!en!bas!de!page!dun!rsultat!de!recherche!alors!quil!ny!a!pas!de!page!suivante.!Nafficher!que!les!lments!dinteraction!les!plus!utiles!Biffienciei les quantits u'infoimation ielles et peicues Lhtrognit!visuelle!augment!la!charge!dinformation!Plus!on!emploie!de!typographies!et!de!couleurs!diffrentes!plus!on!augmente!la!charge!informationnelle!sur!une!surface!dcran!donne.!Les!images!de!fond!augmentent!la!charge!dinformation!Il!sagit!parfois!dlments!graphiques!polluant!le!contenu.!Les!animations!augmentent!la!charge!informationnelle!Aussi!il!est!ncessaire!que!les!animations!ne!fonctionnent!pas!en!continu!ou!que!linternaute!puisse!les!arrter!;!et!il!faut!viter!de!placer!plusieurs!animations!dans!le!mme!cran.!Bmultipliei la valeui uu pixel caii Il!sagit!de!profiter!de!la!flexibilit!de!linterface!pour!utiliser!les!mmes!surfaces!physiques!pour!dlivrer!diffrents!contenus.!Remplacer!une!information!au!clic!Cest!souvent!le!cas!lors!de!lutilisation!donglets!permettant!dafficher!des!contenus!cachs!sans!rechargement!de!pages.!Remplacer!une!information!au!roll"over!Le!changement!de!contenu!peu!galement!seffectuer!au!roll"over,!attention!toutefois!!la!sensibilit!du!systme.!Lapparition!dinformations!au!roll"over!Contrairement!au!cas!prcdent!le!fait!quune!information!apparaisse!nest!pas!suggre!et!donc!vidente.!Cela!peut!poser!des!problmes!de!comprhension!et!dapprhension!par!les!internautes!notamment!:!!"!Si!la!distance!entre!laction!et!lapparition!de!llment!est!grande,!"Si!la!surface!de!dclenchement!est!trop!rduite,!"Si!la!fonction!de!dclenchement!nest!pas!facilement!comprhensible,!"Si!lintgration!html/javascript!produit!des!comportements!peu!faciles!!grer!pour!lutilisateur,!!14!!La!question!de!la!publicit!Souvent!difficile!!carter!la!cantonner!aux!pourtours!du!site!dans!des!zones!rserves!places!aux!mmes!endroits!sur!toutes!les!pages.!0ptimisei l'oiganisation et la hiiaichie visuelle En!faisant!appel!aux!principes!de!proximit!et!de!similarit,!il!sagit!dorganiser!les!lments!au!sein!de!la!page!:!distinction!des!espaces!de!navigation!des!lments!de!contenus,!des!lments!dinteraction,!Ce!travail!doit!se!faire!au!sein!de!la!page!comme!au!niveau!de!chacun!des!lments!la!composant!(sparation!de!diffrents!groupes!de!champs!dans!un!long!formulaire,).!La!hirarchisation!du!contenu!textuel!et!des!lments!est!galement!un!moyen!dapporter!de!la!clart!et!de!facilit!lutilisation!du!site.!Regle nS. Cohience : le site capitalise sui l'appientissage inteine La!cohrence!dans!la!mise!en!page!entre!les!pages!du!site!facilite!lutilisation!par!les!internautes!qui!ds!leur!connexion!au!site!enregistre!sans!sen!rendre!compte!des!principes!de!fonctionnement,!et!gagne!ainsi!en!rapidit!et!en!efficacit!dans!leur!visite.!Bes localisations cohientes Autrement!dit!ne!pas!dplacer!les!lments!semblables!entre!les!diffrentes!pages!du!site.!Les appellations sont cohientes Employer!le!mme!mot!pour!dsigner!un!mme!lment.!Les foimats ue pisentation sont cohients Il!faut!rechercher!la!cohrence!au!sein!des!classes!!dobjets!!dun!mme!type!et!lhtrognit!entre!ces!classes!!dobjets!.!Les inteiactions sont cohientes Un!site!doit!se!comporter!de!la!mme!manire!afin!de!ne!pas!surprendre!les!visiteurs.!Regle n4. Conventions : le site capitalise sui l'appientissage exteine Les!connaissances!et!habitudes!tires!de!lexprience!de!linternaute!lors!de!sa!navigation!sur!dautres!sites!doit!tre!mise!!profit!pour!simplifier!lusage!dune!interface.!0u'est ce qu'une convention On!parle!de!standard!si!plus!de!80%!des!sites!adoptent!une!mme!procd/dispositif,!et!de!convention!sils!sont!50!!79%!!ladopter.!Lorsquon!recherche!les!conventions!!respecter!pour!un!site,!mieux!vaut!les!rechercher!parmi!les!sites!que!visitent!les!internautes!cibles!que!parmi!tous!les!sites!existants.!Cela!peut!mme!parfois!sopposer!!dautres!principes,!par!exemple!le!bleu!#0000ff!qui!a!caractris!les!liens!a!t!une!convention!bien!quen!contradiction!avec!les!principes!de!saturation!des!couleurs.!Des!mthodes,!des!mtiers,!des!livrables!permettent!de!travailler!sur!le!vocabulaire!(thesaurus,!taxonomie,)!La!cration!dune!charte!ergonomique!aidera!!obtenir!une!cohrence!des!informations!des!formats!de!prsentation!et!des!interactions!15!!Respectei les conventions ue localisation Les!lments!tels!le!logo!en!haut!!gauche,!le!moteur!de!recherche!en!haut,!laccs!au!panier!en!haut!!droite,!les!barres!de!navigation!horizontales!en!haut!pour!le!premier!niveau!de!navigation,!les!barres!de!navigation!verticales!!gauche!pour!les!menus!de!second!niveau,!les!lments!de!pied!de!page!(mentions!lgales)!font!maintenant!partie!des!conventions.!On!peut!donc!difficilement!ne!pas!sy!soumettre!sauf!si!la!dmarche!est!justifie!et!souvent!compense!par!une!mise!en!exergue!de!llment!pour!quil!devienne!immanquable.!Respectei les conventions ue vocabulaiies !Respecter!les!conventions!permet!de!simplifier!et!dapporter!en!clart!(!accueil!!plutt!que!!page!daccueil!),!et!sadapter!!la!cible,!en!respectant!les!conventions!de!vocabulaire!qui!lui!sont!propre,!lui!apporte!plus!de!facilit!pour!lutilisation.!Respectei les conventions u'inteiaction et ue pisentation Cela!touche!tous!les!lments!dinteraction!:!ascenseurs,!formulaires,!alertes,!dclenchement!dactions,!process!de!commande,!il!faut!donc!veiller!!ne!pas!crer!un!lment!qui!ressemble!!un!menu!alors!quil!ne!lest!pas,!!ne!pas!utiliser!le!format!dalerte!pour!indiquer!des!messages!peu!importants,!!respecter!les!diffrentes!formes!du!curseur!de!souris,!!Regle nS. Infoimation : le site infoime l'inteinaute lui iponu Le!site!se!doit!dtre!poli,!et!informe!linternaute!au!moment!opportun.!L'oiuinateui infoime et pivient l'inteinaute Donner!de!linformation!gnrale!!Le!site!doit!laisser!transparaitre!lactivit!et!les!contenus!proposs!au!travers!dlments!gnriques!(logo,!tagline,)!et!de!la!page!daccueil.!Donner!de!linformation!ponctuelle!Le!fait!dinformer!dans!toute!sa!navigation!linternaute!sur!lendroit!o!il!se!trouve,!les!diffrentes!options!qui!soffrent!!lui!et!les!pages!et!rubriques!dj!visits!vont!faciliter!lutilisation!du!site.!!Il!faut!veiller!galement!:!!"A!apporter!!linternaute!les!prcisions!ncessaires!qui!lui!permettront!dinteragir!et!de!comprendre!linterface,!de!!faire!ce!quon!attend!de!lui!!;!"A!apporter!les!informations!lui!permettant!de!comprendre!ce!qui!est!en!train!de!se!passer!grce!!un!feedback!adapt!(symbolisation!du!tlchargement!pour!ne!pas!quil!ait!limpression!que!rien!ne!se!passe,).!Informez,!mais!au!bon!moment!Le!fait!de!prvenir!du!format!!tlcharger!ou!de!louverture!dune!nouvelle!fentre!vite!que!linternaute!soit!troubl!par!le!comportement!dun!site.!Le!fait!doffrir!la!possibilit!dacheter!un!produit!sans!aller!consulter!sa!fiche!dtaille,!ou!dindiquer!quels!lments!seront!ncessaires!pour!remplir!un!long!formulaire,!dindiquer!le!plus!en!TAGLINE,!BASELINE!OU!SLOGAN!:!!Cest! la! phrase! accompagnant! le!logo!et!dfinissant!le!caractristique!principale! du! site.! Elle! prend! toute!son! importance! en! absence! dun!accs!par!la!page!daccueil!mais!par!un!moteur!de!recherche.!16!!amont!si!un!produit!est!disponible!ou!ncessite!un!dlai!de!livraison!vont!raccourcir,!simplifier!ou!viter!une!dmarche!longue!et!infructueuse!!linternaute.!L'oiuinateui iponu aux inteiactions ue l'inteinaute Il!sagit!de!mettre!en!place!des!feedbacks!rpondant!aux!actions!de!linternaute.!Donner!du!feedback!aux!actions!de!linternaute!Dans!le!cas!de!rechargement!de!page,!ou!dlments!au!sein!dune!page,!suite!!laction!de!linternaute!il!faut!que!les!diffrences!visuelles!soient!assez!marques!pour!que!linternaute!comprenne!aisment!ce!qui!sest!pass.!Visibilit!du!feedback!C'est""dire!mettre!en!place!des!feedbacks!suffisamment!visibles!et!positionns!judicieusement.!Regle n6. Compihension : les mots et symboles sont choisis minutieusement Il!sagit!demployer!les!codes!smantiques!que!linternaute!connait.!La bonne utilisation ues mots sui le web La!rduction!de!boutons!!de!simples!icones!sans!terme!associ!entraine!par!exemple!une!diminution!de!lutilisabilit.!!Il!faut!utiliser!des!mots!explicites!adapts!aux!internautes!cibles!en!faisant!rfrence!au!!langage!naturel!!et!aux!conventions!en!terme!de!nomenclature,!les!plus!prcis!et!concis!possibles!et!en!rapport!avec!le!contenu!ou!la!fonction!quils!proposent!pour!amliorer!lutilisabilit!au!maximum!(viter!les!langages!techniques,!viter!les!ambiguts,).!Les symboles et coues uoivent tie compihensibles Les!codes!et!symboles!comme!les!couleurs!doivent!tre!en!adquation!avec!la!culture!de!linternaute!(rouge!=!erreur,)!et!une!trop!grande!utilisation!entraine!une!surcharge!informationnelle.!!Dans!le!cas!des!icnes,!il!faut!veiller!!ce!que!leur!sens!soit!clair!et!que!chacune!ne!porte!quun!sens!connu!et!comprhensible!par!tous.!Regle n7. Assistance : le site aiue et uiiige l'inteinaute Le!site!doit!tre!conu!de!manire!!assister!linternaute!tout!au!long!de!sa!visite.!Biiigez gice l'oiganisation ue la visibilit Dans!ce!cadre!la!bonne!visibilit!des!objets!de!navigation!est!primordiale!(menu,!pages!suivantes!ou!prcdentes,).!Il!est!ncessaire!de!rpondre!!la!question!!quest!ce!que!le!site!propose!?!!!pour!prsenter!linterface!en!consquence!et!de!sassurer!que!tous!les!lments!primordiaux!sont!affichs!sans!scroll.!!Biiigez gice ues clics logiques Les!dfauts!de!visibilit!sont!critiques!lorsque!linternaute!ne!se!doute!pas!du!contenu!ou!des!fonctions!offerts.!Il!faut!alors!absolument!travailler!sur!lorganisation!de!la!visibilit!pour!contrer!ce!dfaut.!17!!Il!est!fondamental!que!ce!soient!les!lments!dcisionnels!qui!soient!activables!et!cliquables!(proscrire!!pour!lire!la!suite!cliquez!sur!le!bouton!ci"dessous!).!!Biiigez gice aux affoiuances Il!est!impratif!que!les!internautes!identifient!quasi!instantanment!les!lments!cliquables!et!actionnables.!Les!affordances!permettent!de!reprer!ce!qui!est!cliquable!Il!faut!veiller!!ne!pas!induire!en!erreur!linternaute!en!lui!faisant!croire!quun!lment!nest!pas!cliquable!par!lutilisation!dun!style!ou!dun!effet.!A!noter!que!le!fait!dutiliser!des!formulations!!limpratif!ou!linfinitif!ont!tendance!!renforcer!laffordance!au!clic.!Les!affordances!permettent!de!remarquer!ce!qui!est!utilisable!Il!faut!aider!les!internautes!!reprer!tous!les!lments!interactifs.!Cest!important!pour!tous!les!formulaires!o!les!champs!de!saisie!doivent!apparaitre!clairement!en!couleur!claire!pour!reprsenter!le!vide!et!en!contraste!avec!le!fond!du!formulaire!(le!fait!de!pr"remplir!un!champ!de!saisie!est!plutt!nfaste!!lutilisabilit).!Le!fait!des!utiliser!des!affordances!temporaires!pour!distinguer!le!champ!de!saisie!en!cours!de!remplissage!est!favorable!!lutilisabilit!(ajout!de!pictogrammes,!changement!de!couleur,!bordures,).!veillei ne pas uiiigei ue facon eiione Le!manque!de!justesse!et!de!prcision!induit!en!erreur!Les!contre!affordances!induisent!en!erreur!Il!sagit!de!ne!pas!dguiser!des!lments!en!ce!quils!ne!sont!pas!(ne!pas!faire!ressembler!!un!lien!un!lment!non!cliquable,!ne!pas!proposer!une!list"box!lorsquil!ny!a!quun!choix!propos)!Evitez u'avoii uiiigei gice un mouele u'inteiaction auapt Il!ne!faut!pas!demander!!linternaute!de!faire!plus!daction!quil!nest!ncessaire!(inutile!de!le!faire!cliquer!sur!le!bouton!recalculer!lorsquil!change!le!nombre!de!produits!dun!panier,!le!recalcule!doit!tre!fait!ds!quil!sort!de!la!zone!!quantit!).!Assistez votie inteinaute en tenant compte ue ses besoins en teime ue tches La!prise!en!compte!du!comportement!des!internautes!effectuant!des!tches!sur!un!site!est!importante!pour!lui!faciliter!!le!travail!.!Lide!de!remplacer!des!caractres!par!des!*!lors!de!la!saisie!dun!code!peut!renforcer!le!sentiment!de!scurit!mais!complexifie!et!gne!la!saisie!de!linternaute!qui!peut!dsirer!vrifier!sa!saisie).!Assistez votie inteinaute en le suivant ue ties pies Il!faut!assister!linternaute!en!lui!proposant!clairement!les!choix!qui!soffrent!!lui!!un!instant!T!(aide!!la!saisie!ou!suggestions!lors!dune!recherche).!Affordance!:!!En! ergonomie,! elle! se! rfre! aux!capacits! dun! objet! ! suggrer! sa!propre!utilisation.!18!!Fouinissez ue l'aiue explicite en cas ue besoin Ne!proposer!que!des!contenus!daide!utiles!et!utilisables!soit!directement!dans!la!page!soit!de!manire!transversale!dans!une!rubrique!ddie!;!mais!laide!nest!que!lultime!point!daction!qui!ne!peut!compenser!une!mauvaise!ergonomie.!Regle n8. uestion ues eiieuis : le site pivoit que l'inteinaute se tiompe. La!gestion!des!erreurs!est!l!pour!palier!aux!situations!o!linternaute!scarte!du!chemin!idal!imagin!par!le!concepteur!particulirement!critique!dans!les!interfaces!transactionnelles.!L'inteinaute ne uoit pas faiie u'eiieui Les!erreurs!sont!des!points!de!rupture!qui!peuvent!faire!sarrter!linternaute!et!quil!faut!donc!viter.!La!prsentation!du!formulaire!peut!protger!contre!lerreur!Le!fait!dindiquer!clairement!les!champs!obligatoires!par!un!*!et!de!rendre!lisible!aisment!la!mention!laccompagnant!sont!pertinents!dans!cette!dmarche.!Eviter!les!erreurs!grce!aux!libells!et!lgendes!des!champs!Le!libell!ventuellement!accompagn!dune!lgende!plus!dtaille!doit!tre!clair!et!sans!ambigut.!Le!fait!de!nafficher!la!lgende!quau!moment!opportun!!par!rapport!!la!saisie!de!linternaute!est!galement!pertinent.!Eviter!les!erreurs!en!ajustant!la!taille!des!champs!!linformation!qui!y!sera!saisie!La!taille!des!champs!plus!ou!moins!grands!suggre!le!type!de!donnes!attendu.!Eviter!les!erreurs!en!utilisant!des!lments!de!formulaire!!bon!escient!Adapter!le!champ!de!formulaire!!la!fonction!et!la!tche!attendue!(radio!bouton!si!1!seule!slection!possible).!Eviter!les!erreurs!par!laffordance!gnrale!de!linterface!Par!exemple!si!la!prsence!dun!bouton!!effacer!!est!obligatoire!il!faut!absolument!viter!la!confusion!avec!le!bouton!valider!par!la!position,!la!forme,!la!couleur,!Le fonctionnement uu foimulaiie peui piotgei contie l'eiieui Eviter!les!erreurs!en!demandant!la!confirmation!pour!les!actions!risques!Eviter!les!erreurs!en!empchant!la!saisie!de!donnes!errones!Si!on!ne!peut!commander!des!articles!que!par!6!autant!faciliter!la!saisie!en!les!proposant!sous!forme!de!list"box!que!de!laisser!un!champ!libre.!Eviter!les!erreurs!en!validant!ou!en!corrigeant!!la!vole!Cette!mthode!est!!appliquer!judicieusement!pour!ne!pas!tre!trop!intrusive!et!nuisible.!Elle!est!surtout!justifie!dans!les!cas!o!le!concepteur!est!certain!que!linternaute!commet!une!erreur!(saisie!dune!date!antrieure!pour!un!voyage!retour).!Lerreur!dans!un!formulaire!peut!prendre!plusieurs!formes!qui!doivent!toutes!tre!prises!en!compte!pour!les!gestions!derreur!:!champ!oubli,!mauvais!format!de!saisie,!incohrences!des!informations.!19!!L'inteinaute uoit facilement iepiei et compienuie ses eiieuis Faciliter!le!reprage!de!lerreur!Lobjectif!est!de!mettre!en!valeur!de!manire!visible!le!fait!quune!erreur!sest!passe!et!ce!sans!rechargement!de!la!page.!Fournir!une!explication!prcise!de!lerreur!Il!est!ncessaire!de!distinguer!les!diffrents!types!derreur!et!dy!attribuer!des!messages!spcifiques!libells!clairement.!Faire!preuve!de!courtoisie!dans!les!messages!derreur!Il!ne!sagit!ni!daffoler!linternaute!ni!de!remettre!en!cause!ses!comptences!et!capacits!mais!juste!de!le!guider!de!nouveau!pour!lui!faciliter!la!tche.!L'inteinaute uoit facilement pouvoii coiiigei ses eiieuis Grce!!lexplication!de!lerreur!Lerreur!est!explique!clairement!le!format!attendu!est!prcis!et!ventuellement!accompagn!dun!exemple.!Faciliter!la!correction!grce!aux!mcanismes!de!gestion!des!erreurs!"Traiter!lensemble!des!erreurs!en!une!seule!fois!pour!viter!des!allers!retours!fastidieux!!lutilisateur!commettant!de!multiples!erreurs.!"Favoriser!laffichage!des!messages!derreur!directement!dans!la!page!"Laisser!les!champs!remplis!afin!de!faciliter!sa!comprhension!de!lerreur!commise!Regle n9. Rapiuit : l'inteinaute ne peiu pas son temps 0ptimisei la navigation Faciliter!laction!de!vise!sur!les!lments!cliquables!en!gardant!en!mmoire!la!loi!de!Fitts!Prendre!en!compte!les!besoins!de!linternaute!sur!le!plan!fonctionnel!Si!un!internaute!doit!cliquer!sur!un!lment!dans!une!longue!liste,!la!mise!en!exergue!de!la!ligne!survole!peut!faciliter!la!tche!de!linternaute.!!Nultipliei les cls u'entie veis une mme page Le!fait!de!permettre!un!accs!!une!page!!la!fois!en!cliquant!sur!un!titre,!une!image!et!un!bouton!est!favorable!!la!rapidit!de!la!navigation.!Facilitei les inteiactions Le!fait!de!rendre!cliquable!les!libells!de!champ!de!formulaire!facilite!lutilisation!par!linternaute,!le!fait!de!passer!au!champ!suivant!via!la!touche!Tab,!ou!automatiquement!dans!le!cas!dun!code!CB!sont!galement!favorables.!La!loi!de!Fitts!Une!cible!est!dautant!plus!cliquable!quelle!est!!proche!!et!!grande!.!20!!Evitei les actions inutiles Il!sagit!de!simplifier!la!vie!des!utilisateurs!en!leur!vitant!les!actions,!clics!ou!scroll!non!obligatoires.!Ne pas uemanuei l'inteinaute ueux fois la mme chose Notamment!en!neffaant!jamais!ce!quil!a!dj!saisi.!Bes moues u'inteiaction oiientes efficience Il!faut!que!les!utilisateurs!les!plus!!laise!puissent!bnficier!de!raccourcis!(faire!ses!courses!en!mode!express,!faire!varier!le!nombre!de!produits!avec!+!et!!en!plus!de!la!possibilit!de!saisir!linformation!dans!le!champ!quantit,!liste!personnelle!de!courses,!acheter!en!1!clic!dans!une!boutique,),!de!moyens!daugmenter!leur!niveau!defficience!tout!en!prservant!aussi!un!parcours!pour!les!nophytes.!!Ce!genre!doptimisation!ncessite!de!connatre!scrupuleusement!le!comportement!et!les!tches!effectues!par!les!internautes.!Regle n1u. Libeit : c'est l'inteinaute qui commanue Linternaute!doit!garder!le!contrle!sur!le!site!Internet!o!en!avoir!limpression.!Respectei les contiles utilisateui conventionnels Le!fonctionnement!le!plus!basique!du!site!doit!tre!identique!!la!majorit!des!sites!Internet.!Ne jamais uclenchei u'actions au iollovei Flexibilit ues actions utilisateuis Les!fonctions!dannulation!et/ou!de!retours!en!arrires!sont!des!plus!proposes!aux!internautes!lui!donnant!plus!de!matrise!de!loutil.!Bonnez la possibilit l'inteinaute ue contouinei le systeme et u'agii uessus Il!sagit!doffrir!!lutilisateur!les!moyens!de!contourner!des!dispositifs!contraignants!ou!intrusifs!(arrter!une!bannire,!un!dfilement!dactualits,)!N'inuuisez pas ue compoitements passifs Notamment!en!proposant!des!animations!de!courtes!dures,!en!vitant!les!fondus!entre!les!pages!qui!ont!tendance!!rallonger!le!temps!que!prend!la!navigation.!N'enfeimez pas votie inteinaute En!terme!de!navigation!il!ne!faut!pas!le!contraindre!!faire!des!choix!successifs!avant!daccder!!son!objectif!(limiter!le!nombre!de!niveau!des!menus!ou!faciliter!laccs!dune!autre!manire).!Les!fonctionnalits!de!personnalisation!rentrent!parfaitement!dans!la!dmarche!defficience!de!linterface!(iGoogle).!A!voir!le!site!www.dontclick.it!o!tout!est!navigable!au!survol!qui!rvle!que!les!actions!au!survol!sont!souvent!des!expriences!difficiles!!grer!pour!lutilisateur!21!!Le systeme ne uoit pas tie intiusif Le!systme!nest!pas!insistant!Ne!pas!contraindre!les!internautes!sous!des!prtextes!dincitation!et!donner!limpression!quon!le!force!!subir!un!choix!avec!trop!dinsistance!(les!options!doivent!rester!des!options).!Le!systme!ne!force!pas!linternaute!!voir!quelque!chose!"Eviter!les!introductions!et!fournir!des!entres!directes!"Eviter!laffichage!spontan!de!pop"up!!"Le!site!nagit!pas!!la!place!de!linternaute!Le!site!ne!doit!pas!prendre!le!contrle!de!lordinateur!"Ne!pas!forcer!louverture!dune!application!logicielle!sur!le!poste!client!"Ne!pas!jouer!du!son!de!manire!inapproprie!et!fournir!la!possibilit!de!le!contrler!Regle n11. Accessibilit : un site facile u'acces poui tous Accessibilit physique Permettre!laccs!!tous!les!internautes!quel!que!soit!le!ou!les!canaux!perceptifs!et!daction!quils!utilisent!pour!naviguer.!Accessibilit technologique Le!site!est!accessible!quel!que!soit!le!matriel!utilis!par!linternaute!en!prenant!en!compte!les!systmes!dexploitation,!navigateurs,!taille!et!rsolution,!fonctions!actives,!plugins!installs,!Adaptez!le!contenu!au!matriel!de!linternaute!En!proposant!un!format!jpg!au!lieu!dun!flash!lorsque!linternaute!na!pas!le!plugin!plutt!que!de!lui!demander!de!le!tlcharger!et!en!permettant!au!site!de!fonctionner!mme!sans!javascript,!La!plateforme!de!consultation!est!stratgique!:!informez!et!guidez!Dans!le!cas!o!linternaute!a!besoin!dun!outil!ou!dune!activation!obligatoire!pour!utiliser!le!site!il!faut!le!prvenir!et!linciter!!y!procder.!Regle n12. Satisfaction ue votie inteinaute Bien!que!cite!en!12me!cest!la!rgle!primordiale!car!cest!la!seule!qui!peut!autoriser!la!remise!en!question!de!toutes!les!autres.!Cest!aussi!le!critre!le!plus!difficile!!valuer.!Par!contre!le!respect!des!11!prcdents!critres!entrainera!ncessairement!un!accroissement!du!satisfcit!du!client.!!Satisfaiie au ciiteie u'utilit !Un!site!utile!est!un!site!qui!fournit!du!bon!contenu!!ses!internautes,!un!service!leur!permettant!de!remplir!leurs!objectifs,!ainsi!que!des!utilits!de!second!niveau!(micro"fonctionnalits)!optimisant!la!satisfaction.!!Satisfaiie gice l'esthtique et l'expiience utilisateui globale La!qualit!graphique!a!un!impact!indniable!sur!la!perception!subjective!de!lutilisabilit!dun!site!Les!micro"fonctionnalits!peuvent!permettre!de!mieux!impliquer!linternaute!dans!le!site!en!le!rendant!acteur!des!volutions!du!site.!22!!Satisfaiie gice la puissance et la fiabilit technique Le!site!doit!tre!puissant!au!niveau!fonctionnel!et!fiable!(pas!de!liens!errons,!dimages!casss,!pas!de!lourdeur!de!chargement,!et!veiller!!ce!que!le!site!rponde!sur!les!requtes!sans!les!www,).!En bief les 12 iegles utilisei bon escient Un!post"it!!conserver!tout!le!temps!en!tte!en!restant!conscient!quelles!peuvent!se!compenser!les!unes!par!rapport!aux!autres.!Conventions: Le site capitalise sur lapprentissage externe!!! !!!!!!!!!!!!!!!!!!!!! !- Les rgles pour optimiser lergonomie dun site -1. Architecture: Le site est bien rang 2.Organisation visuelle: Le page est bien range 3.Cohrence: Le site capitalise sur lapprentissage interne 4.Conventions: Le site capitalise sur lapprentissage externe 5.Information: Le site informe linternaute et lui rpond 6.Comprhension: Les mots et symboles sont choisis minutieusement 7.Assistance: Le site aide et dirige linternaute 8.Gestion des erreurs: Le site prvoit que linternaute se trompe 9.Rapidit:Linternaute ne perd pas son temps 10.Libert: Cest linternaute qui commande 11.Accessibilit: Un site facile daccs pour tous 12.Satisfaction de linternaute23!!L'auuit eigonomique : conseils et mthouologiePiatique, suppoit et moyens ue l'auuit eigonomique Il!sagit!dobserver!une!interface!sous!la!lumire!des!objectifs!de!lergonomie!en!essayant!daller!dans!le!moindre!dtail!et!en!passant!donc!par!des!thmatiques!renvoyant!!des!mtiers!diffrents!(chef!de!projet,!infographiste,!intgrateur,!dveloppeur).!L'valuation eigonomique, une piatique multifoime Lobjectif!!ergonomie!!conduisant!au!bien!tre!des!internautes!se!doit!dtre!pos!ds!le!dpart!comme!une!vocation!centrale!du!site!et!doit!rgir!en!arrire!plan!toutes!les!actions!mmes!les!plus!anodines!de!maintenance.!On!peut!distinguer!:!!"Une!rflexion!ergonomique!!silencieuse!!intervenant!dans!tous!nos!choix!de!manire!plus!ou!moins!mcaniques!sans!demander!de!temps!supplmentaire.!Les!volutions!ergonomiques!qui!sont!pratiques!sont!discrtes!et!sont!mises!en!place!au!fur!et!!mesure!que!leur!besoin!est!peru!lors!daudits!informels,!elles!peuvent!ltre!par!tous!les!corps!de!mtiers.!"Une!rflexion!ergonomique!relevant!dun!audit!formel.!Il!sagit!de!vrifications!planifies!sinscrivant!!des!moments!cls!de!la!vie!dun!projet!(au!tout!dbut!du!projet,!aprs!lintervention!de!chaque!mtier,!et!aprs!le!lancement!du!site)!sur!tout!ou!partie!du!site.!Suppoit et piimetie ue l'valuation eigonomiqueLaudit!ergonomique!peut!concerner!:!!"Un!cahier!des!charges!:!laudit!juge!surtout!des!utilits!de!telles!ou!telles!fonctions,!"Une!maquette!fonctionnelle!:!laudit!juge!de!larchitecture!et!de!lorganisation!visuelle,!"Une!maquette!graphique!:!laudit!juge!surtout!de!la!lisibilit,!de!laccessibilit!visuelle,!!"Un!site!fonctionnel!:!permet!danalyser!des!lments!difficilement!valuables!!un!autre!moment!(dlai!des!feedbacks,!mouvements!de!linterface,)!Le!support!analys!a!donc!des!consquences!sur!les!thmatiques!abordes!dans!laudit.!Le!primtre!de!laudit!est!variable!mais!est!souvent!orient!par!des!proccupations!marketing!ou!stratgiques.!Noimes, conventions, ciiteies, checklists & co De!nombreuses!normes!et!rgles!peuvent!guider!laudit!ergonomique,!elles!doivent!tout!tre!cependant!considres!avec!prcaution!et!rflexion!car!elles!sont!en!gnral!tablies!sans!prendre!en!compte!le!contexte.!Prendre!en!compte!les!rgles!dergonomie!ne!passe!pas!par!la!soumission!!une!ou!plusieurs!checklists!ou!grilles!dvaluation.!! !MOTS!CLES!DU!CHAPITRE!Audit! ergonomique,! inspection! experte,!ajax,!seniors,!outils!pour!laudit!!24!!!Diffrentes!normes!et!critres!en!ergonomie!web!!Rfrences!! Contenu!et!origine!Heuristiques!de!Nielsen!(issues!de!Nielsen!et!Molich,!1990)!10!heuristiques!cres!en!1994!et!rvises!en!2005!pour!juger!de!lutilisabilit!de!linterface!!Cf!http://www.hec.unil.ch/fbodart/IHM/Chap3/heuristiques.html!Critres!ergonomiques!de!Bastien!et!Scapin! 18!critres!rpartis!en!8!dimensions!pour!juger!de!lergonomie!des!interfaces!homme"machine!!Cf!http://www.ergoweb.ca/criteres.html!!Heuristiques!dInstone! Adaptation!des!heuristiques!de!Nielsen!pour!juger!de!lutilisabilit!dun!site!web!Bruce!Tognazzini! 16!grands!principes!du!design!dinteraction!proposs!en!2003!!Stiuctuiei l'tuue selon vos besoins Les peisonas ponueient les iegles gniiques Laudit!ergonomique!consiste!!analyser!un!site!pour!savoir!sil!rpond!aux!besoins!des!personas.!Les!besoins!des!personas!pondrent!donc!les!rgles!gnriques!(on!sautorise!!une!surcharge!informationnelle!pour!un!site!dont!le!persona!principal!est!un!expert!de!manire!!augmenter!lefficience!de!linterface!pour!ce!persona!;!dans!le!cas!dun!persona!snior!on!aura!tendance!!accorder!plus!dimportance!!lorganisation!visuelle,!linformation,!la!comprhension,!lassistance,!!la!libert,!laccessibilit!et!la!satisfaction).!Les technologies vous mettent la puce l'oieille A!priori,!comme!voqu!dans!le!chapitre!2,!il!existe!une!autonomie!entre!le!recours!!une!technologie!et!la!qualit!ergonomique!de!linterface.!Cependant,!les!technologies!ont!une!influence!sur!la!rcurrence!des!dfauts!observs!(les!sites!flash!ont!des!dfauts!communs,!idem!pour!ceux!utilisant!de!lajax,).!Lexemple!dajax!et!javascript!"Modification!partielle!de!la!page!:!une!modification!partielle!de!la!page!doit!tre!parfaitement!perceptible!par!linternaute!:!opar!la!proximit!visuelle!entre!laction!et!le!feedback!opar!le!format!visuel!(surligner!un!lment!nouveau!pour!sa!mise!en!valeur!temporaire)!opar!la!reprsentation!du!caractre!dynamique!(simulation!dun!processus!de!latence!avant!chargement)!"Le!pli/dpli!dinformations!:!ce!sont!des!liens!ayant!un!impact!uniquement!!lintrieur!de!la!page!au!mme!titre!que!les!ancres!nommes,!on!parle!donc!de!liens!intra"page.!Il!faut!dans!ce!cas!veiller!!:!!oIndiquer!que!laction!est!possible!(affordance!de!cliquabilit)!ajax!acronyme! d!asynchronous!javascript!and!xml!,!technologie!qui!ouvre! des! possibilits! dinteraction!beaucoup! plus! large! (des! requtes!serveurs!en!temps!rel!permettent!le!rafraichissement! de! fragment! de!page! sans! rechargement! de! la! page!complte)!25!!oDiffrencier!les!liens!daction!des!hyperliens!classiques!oFournir!un!moyen!de!revenir!!linterface!initiale!"Le!drag!&!drop!:!Il!est!ncessaire!de!ne!le!mettre!en!place!que!lorsque!cest!judicieux!uniquement,!car!ce!mode!de!fonctionnement!original!introduit!souvent!une!plus!grande!complexit!et!ncessite!plus!de!rflexions!de!la!part!de!linternaute.!Le!drag!&!drop!est!surtout!utile!pour!des!interfaces!expertes.!S!on!y!fait!appel!il!faut!tre!vigilant!sur!:!!oLe!fait!que!linterface!indique!sans!ambigut!que!des!lments!sont!dplaables!(croix!de!saisie,)!oLe!fait!que!linterface!illustre!que!des!lments!sont!dplaables!avant!la!saisie!et!au!moment!du!dplacement!oLe!fait!que!linternaute!se!rende!bien!compte!quil!est!en!train!de!dplacer!un!lment!oLe!fait!que!linternaute!constate!sans!ambigut!quil!vient!de!dplacer!un!lment.!Le type ue site et son contenu inuique les points cls suiveillei Le!type!de!site!oriente!les!points!cls!!auditer!(transaction!pour!un!site!marchand,!utilit!de!certaines!fonctions!pdf!ou!autres!dans!le!cas!de!sites!ditoriaux).!Conuuiie une analyse eigonomique Seul ou a plusieuis . Jakob!Nielsen!recommande!de!faire!participer!3!!5!spcialistes!au!mme!audit.!Le fil iouge : uans la peau ue votie peisona Il!faut!visiter!le!site!comme!si!on!ne!lavait!jamais!vu!en!incarnant!les!diffrents!personas!dfinis!en!faisant!abstraction!des!ses!propres!connaissances!ergonomiques.!Pai o commencei . !Le!primtre!et!le!temps!imparti!sont!2!contraintes!dfinis!avant!le!commencement!de!laudit!et!permettant!de!dfinir!les!limites!de!laudit.!Sauf!contradiction,!la!rgle!consistant!!aller!du!gnral!au!particulier!semble!judicieuse!en!consignant!toutes!les!remarques!au!fur!et!!mesure!semble!la!plus!simple!!suivre.!!Par!ailleurs,!3!tapes!peuvent!guider!laudit!:!!"Evaluer!si!linterface!du!site!traduit!bien!son!utilit!(comprend"on!rapidement!ce!que!propose!le!site!?)!;!"Reprer!les!dfauts!inter"pages!(problmes!darchitecture!de!linformation,!de!navigation,!denchainements,!dinteractions,!de!structure!du!dialogue!homme"machine,)!qui!entravent!la!navigation!des!internautes!;!"Reprer!les!dfauts!intra"page!en!observant!chaque!tape!de!manire!plus!apporfondie.!Ces!3!temps!doivent!se!concilier!avec!dautres!impratifs!comme!lanalyse!des!pages!cls,!et!dautres!points!incontournables!tels!que!:!!"Ladaptation!des!pages!!une!rsolution,!"Les!emplacements,!apparences!et!comportements!des!barres!de!navigation,!"La!lisibilit!des!polices!employes,!Leffet!de!lvaluateur!Hertzum!&!Jacobsen!ont!relev!plusieurs!fois!que!des!valuateurs!employant!des!mthodes!semblables!dclent!des!dfauts!ergonomiques!diffrents.!Le!fait!de!faire!appel!!plusieurs!valuateurs!aux!comptences!et!spcialits!complmentaires!parait!donc!indispensable!26!!Les outils ue l'auuit eigonomique!Les!rgles!ergonomiques,!premier!guide!du!travail!Toutes!les!rgles!prcdemment!voques!constituent!le!premier!support!de!laudit!;!il!est!par!contre!plus!judicieux!que!laudit!fonctionne!!partir!des!connaissances!de!ces!rgles!en!vrifiant!leur!application!sur!linterface,!plutt!que!de!partir!de!linterface!pour!vrifier!les!rgles.!!Logiciels!et!outils!techniques!!"Prendre!des!notes!:!la!prise!de!note!est!transverse!!tout!laudit!;!"Faire!des!captures!dcran!par!exemple!avec!screengrab,!extension!de!Mozilla,!en!numrotant!les!captures!,!et!ventuellement!sous!forme!de!capture!vidos!(Snagit);!"Tester!la!compatibilit!technique!en!sappuyant!sur!les!toolbars!des!navigateurs.!Pour!ce!qui!est!des!tests!sur!diffrentes!plateformes!Browsercam!(payant)!permet!dvaluer!une!interface!sous!diffrentes!plateformes.!Enfin,!il!est!bon!de!penser!!procder!!des!tests!dans!des!conditions!dgrades!(bas!dbit!avec!netlimiter!(http://www.netlimiter.com/),).!!"Evaluer!laccessibilit!visuelle!:!!oLisibilit!des!textes!et!images!!vocation!fonctionnelle!en!validant!lutilisation!de!:!"diffrences!de!couleur!suprieures!!400!(500!daprs!le!W3C)!"diffrences!de!brillance!suprieures!!125!oEvaluer!galement!lutilisabilit!du!site!pour!les!personnes!caractrise!de!dficiences!dans!la!perception!des!couleurs!ou!dachromatisme!(perception!de!niveaux!de!gris!sans!couleur).!oEvaluer!lutilisabilit!du!site!en!version!texte!(Lynx)!oTester!lutilisabilit!du!site!en!contournant!le!mode!visuel!(plages!Braille,!synthse!vocale)!et!la!navigation!sans!souris.!"Evaluer!la!forme!gnrale!du!site!dun!point!de!vue!visuel!en!rfrence!aux!principes!de!Gestalt!et!plus!particulirement!!la!notion!de!forme!gnrale!de!manire!!vrifier!que!lon!distingue!bien!les!zones!de!navigation!et!de!contenu!ainsi!que!les!appels!aux!actions!si!lon!observe!que!trs!rapidement!lensemble!de!la!page.!0ue faiie ues obseivations Hirarchisez!les!observations!Hirarchisez!les!observations!des!plus!critiques!au!moins!critiques!en!appliquant!pour!chacune!3!critres!:!!impact!du!dfaut!observ!,!!frquence!du!dfaut!observ!,!!persistance!du!dfaut!observ!.!Les!livrables!de!laudit!Il!faut!penser!!expliquer!comment!sutilise!le!document,!!fournir!une!synthse,!ventuellement!un!lexique!qui!accompagneront!le!rapport!daudit.!Il!est!essentiel!que!laudit!remonte!les!problmes!mais!envisage!galement!les!solutions!!y!apporter!en!cohrence!avec!le!contexte!de!manire!!ce!que!ces!solutions!soient!applicables.!!!http://uzilla.mozdev.org/heuristicreview.html!propose!le!tlchargement!dune!extension!mozilla!!uzReview!!pour!auditer!une!interface!sur!la!base!des!heuristiques!de!Nielsen!et!Instone!et!gnrer!un!rapport.!!2!sites!proposent!dvaluer!en!ligne!les!contrastes!de!couleur!et!de!brillance!:!http://etre.com/tools/colourcheck/!et!http://www.snook.ca/technical/colour_contrast/colour.html!Colorzilla,!extension!de!mozilla,!vous!permet!de!connatre!le!code!hexadcimal!des!couleurs!dune!interface.!A!utiliser!galement!http://www.accesskeys.org/tools/color"contrast.html!qui!permet!dvaluer!globalement!une!interface.!27!!PARTIE 4 : LES ETAPES BE LA C0NCEPTI0N WEB : PENSEZ v0TRE SITE BE A A Z Comment!dfinir!le!contenu,!lorganiser!et!le!formaliser!!lcran!Bfinition ues contenus et analyse concuiientielle Un!site!ergonomique!est!avant!tout!un!site!utile,!cest!donc!ce!point!qui!prime!;!lutilisabilit!arrive!seulement!en!second!lieu!!!Le!contenu!est!la!relle!valeur!ajoute!qui!va!intresser!linternaute!et!qui!marque!la!diffrence!du!site!avec!les!autres!sites.!Le!contenu!doit!donc!tre!utile!pour!les!visiteurs!votie contenu iponu un besoin ue l'inteinaute Soit!linternaute!accde!au!site!pour!ce!que!lui!offre!le!site!en!le!connaissant!auparavant,!soit!il!accde!au!site!sans!le!connatre!parce!que!le!site!lui!propose!un!contenu!dintrt!(accs!via!de!la!publicit!ou!un!moteur!de!recherche).!0uelle est l'utilit globale uu site . Cest!lide!principale!du!site!qui!dfinit!son!utilit!ou!ses!niveaux!dutilit!(en!fournissant!plusieurs!types!de!contenus!ou!services!aux!internautes).!!Ciez ues micio-utilitsFonctionnalits!et!informations!complmentaires!proposes!aux!internautes!permettant!aux!persona!de!mieux!profiter!de!loffre!du!site.!!Comment!imaginer!et!choisir!des!micro"utilits!Les!micro"utilits!viennent!complter!une!utilit!globale!en!la!servant!au!mieux,!elles!sont!!inventes!!surtout!en!se!mettant!!la!place!des!personas.!Les!micro"utilits!sont!dautant!plus!essentielles!que!le!secteur!est!concurrentiel,!il!peut!sagit!soir!dinformation!soit!de!fonctionnalit.!Des!exemples!de!micro"utilit!"Offrir!la!vue!la!plus!complte!sur!un!produit!!(plusieurs!visuels!diffrentes,!ventuellement!toute!la!gamme!et!toutes!les!couleurs,!vues!360,)!"La!fonctionnalit!chercher!au!cur!des!livres!sur!le!site!Amazon,!ou!montrer!lintrieur!dune!boite!de!jeux,!"Proposer!le!tlchargement!dun!contenu!(notice,)!en!pdf!Prendre!en!compte!les!comportements!lis!!lachat!Pour!faciliter!lachat!online!comme!lachat!offline!(communiquer!une!rfrence!dun!produit!pour!lacheter!en!magasin,)!MOTS!CLES!DU!CHAPITRE!Contenus,! fonctionnalits,! utilits! et!micro"utilits,! analyse! concurrentielle,!benchmark!ergonomique,!!Contenu!Dans! ce! chapitre! le! terme! contenu!est! utilis! au! sens! large! et! regroupe!en! mme! temps! linformation! et! les!fonctionnalits!proposes.!28!!Prcder!les!interrogations!des!internautes!Rpondre!!leurs!questions!avant!quil!les!formule.!Simplifier!la!tche!des!internautes!en!prcdant!leurs!besoins!fonctionnels!Proposer!le!tlchargement!de!tous!les!pdf!dun!site!en!une!seule!fois.!Prendre!en!compte!les!potentialisateurs!daction!Le!fait!de!proposer!diffrents!mode!de!paiement!ou!de!pouvoir!bnficier!des!mmes!services!et!offres!que!dans!un!magasin!physique!favorise!les!sites!de"commerce.!Poui numiei vos contenus, exploitez toutes vos souices ! Une!fois!dfinit!prcisment!les!diffrents!niveaux!dutilit,!il!faut!les!numrer!clairement!sans!prendre!en!compte!!cet!instant!de!la!manire!dont!ils!seront!proposs!(il!ne!sagit!pas!forcment!des!contenus!finaux!mais!au!moins!de!leurs!trames!et!essence).!Pour!dterminer!avec!exhaustivit!les!contenus!des!sites,!il!est!possible!de!sappuyer!:!!"Sur!le!site!existant!"Sur!les!acteurs!du!projet!!"Sur!la!concurrence!"Sur!les!besoins!supposs!des!internautes!(cf!personas)!"Sur!les!besoins!exprims!par!les!internautes!rels!(messagerie!du!service!clientle)!0ue font les auties . L'analyse concuiientielle en eigonomie Lanalyse!concurrentielle!ergonomique!na!pas!les!mmes!objectifs!quun!benchmark!purement!marketing.!La umaiche ue l'analyse concuiientielle Principes!de!base!de!lanalyse!concurrentielle!!Observer!chez!les!autres!ce!qui!pourrait!tre!intressant!pour!son!propre!site.!!Pratique!intuitivement!simplement!en!naviguant!ou!de!manire!plus!formelle!(en!simulant!les!parcours!des!diffrents!personas)!,!elle!permet!de!relever!les!points!positifs!et!ngatifs!de!chaque!site.!Dfinissez!votre!panel!concurrentiel!!Il!faut!distinguer!les!concurrents!du!point!de!vue!sectoriels!qui!font!lobjet!dun!benchmark!marketing,!des!concurrents!!ergonomiques!!ce!qui!largit!ncessairement!le!panel.!Combien!de!concurrents!doivent!tre!analyss!?!Un!nombre!suprieur!!10!parat!difficile!!surmonter!au!vu!de!la!charge!de!la!travail,!la!slection!doit!rassembler!les!sites!rfrents!et!des!sites!moins!connus!mais!plus!innovants!de!point!de!vue!leurs!interfaces.!Analyses concuiientielles gniales Les!analyses!concurrentielles!gnrales!sintressent!!lutilit!du!site,!aux!grands!principes!adopts!en!considrant!parfois!certaines!micro"fonctionnalits!caractristiques!(cls!dentre!dans!les!catalogues,!principe!gnral!de!navigation,!!micro"fonctionnalit!de!navigation!(nuage!tags,),!descriptifs!produits,).!Pour!Jakob!&!Nielsen,!lanalyse!concurrentielle!permet!de!tester!la!manire!dont!les!concurrents!ont!gr!des!problmatiques!semblables,!leur!site!devenant!une!sorte!de!prototype.!!29!!Analyses concuiientielles utailles Cette!analyse!sintresse!essentiellement!!lanalyse!de!lutilisabilit!des!sites!du!panel!avec!3!objectifs!:!!"Copier!les!bonnes!ides,!"Reprer!les!conventions!de!prsentation!et!de!fonctionnement,!"Reprer!les!conventions!de!terminologie!(dpendantes!!la!fois!de!linterface!ou!du!domaine!dactivit).!Pour!conclure,!lanalyse!concurrentielle!nest!quune!partie!du!travail!de!rflexion!ergonomique!!appliquer!paralllement!!dautres!mthodes!ergonomiques!(les!12!rgles,!personas,).!!Aichitectuiei l'infoimation et les inteiactionsLarchitecture!de!linformation!dun!site!se!dfinit!comme!la!manire!dy!ranger!les!donnes.!Rangei poui aiuei tiouveiIl!sagit!de!passer!dun!ensemble!de!contenus!indiffrencis!!un!site!internet!organis!dans!le!but!de!satisfaire!ses!utilisateurs!en!concevant!une!architecture!en!fonction!de!la!manire!dont!les!internautes!vont!chercher!linformation.!Comment visite-t-on un site inteinet . Il!existe!3!grands!types!dexploration!du!contenu!dun!site!:!!La iecheiche pai mot cl : uioit au butLe!site!doit!disposer!dun!moteur!de!recherche!si!!cest!justifi.!Il!faut!rflchir!!la!manire!dont!on!met!en!avant!cette!fonctionnalit!de!recherche!sur!les!pages,!sur!la!performance!de!loutil!et!sur!la!prsentation!des!rsultats.!La navigation cible : tape pai tape Elle!consiste!!parcourir!larborescence!!la!recherche!dun!contenu!prcis,!elle!est!favorise!par!:!!"Une!navigation!globale!qui!sert!de!repre!permanent,!"Une!navigation!locale!(c'est""dire!dont!le!contenu!change!en!fonction!do!on!se!trouve),!fille!de!la!navigation!globale.!La navigation libie : se piomenei sui un site Inteinet La!prsence!de!liens!transversaux,!de!liens!contextuels,!ou!raccourcis!peuvent!la!favoriser.!Un!outil!daide!au!benchmark!pour!la!saisie!des!donnes,!tirer!des!conclusions,!produire!des!rsums,!et!faire!des!graphiques!:!http://alpha.benchmarkr.com!!MOTS!CLES!DU!CHAPITRE!Architecture! de! linformation,! navigation,!plan! du! site,! catgorisation! mentale,!stratgies! de! recherche,! trouvabilit,!parcours!client,!flux!dinteraction!!30!!0ne oiganisation calque sui les attentes ue l'inteinaute Larchitecture!doit!reflter!la!manire!dont!les!internautes!pensent!et!cherchent!une!information.!Souice u'inspiiation n1 : les objectifs et compoitements utilisateui Larchitecture!doit!faciliter!laccomplissement!des!tches!(contacter!le!service!client,!tlcharger!une!chanson,!rserver!un!billet!de!thtre!pour!la!semaine!prochaine,)!que!doivent!remplir!les!personas.!Souice u'inspiiation n2 : les iepisentations mentales Connatre!les!reprsentations!mentales!passe!ncessairement!par!leur!rencontre!et!!pratiquer!soit!des!!tris!de!carte!,!soit!des!tests!utilisateurs.!Souice u'inspiiation nS : allei voii ailleuis ! Le!modle!mental!des!internautes!dpend!galement!du!monde!rel,!et!ce!dernier!peut!donc!!bon!escient!permettre!dorganiser!les!contenus.!Souice u'inspiiation inteiuite : votie piopie vision ues choses A!proscrire!:!organiser!un!site!en!fonction!de!lorganisation!interne!de!lentreprise,!!lorganiser!daprs!un!jargon!spcifique!dans!le!cas!dun!site!grand!public,!Concevez votie aichitectuie ue l'infoimation Noue u'emploi en 2 tapes : catgoiisei puis stiuctuieiCest!!dire!crer!des!groupes!de!contenus,!puis!hirarchiser!les!groupes!en!dfinissant!les!relations!quils!entretiennent.!La!catgorisation!:!regrouper!pour!simplifier!Ce!rflexe!cognitif!sapplique!!tout!ce!qui!nous!entoure!et!nous!permet!de!regrouper!pour!simplifier!notre!perception!et!viter!une!surcharge!mentale.!Diffrents!critres!peuvent!tre!considrs!pour!procder!!ces!regroupements!:!!"Alphabet!"Chronologie!"Localisation!gographique!"Thme!"Actions!utilisateur!(classement!par!taches!un!peu!!la!manire!dun!logiciel!avec!dition!qui!regroupe!!copier,!coller,!)!"Cible!utilisateur!La stiuctuiation ue l'infoimation Une!fois!les!groupes!crs!il!est!ncessaire!den!dgager!une!vue!densemble!plus!hirarchise!par!la!mise!en!valeur!de!certains!contenus,!le!fait!de!faciliter!laccs!!certains!contenus.!On!intgre!dans!cette!phase!les!caractristiques!cognitives!des!internautes,!les!limitations!en!terme!dcran.!trouvabilit!de!langlais!!findability!!dsigne!la!capacit! dun! site! ! guider! les!utilisateurs! pour! quils! trouvent! ce!quils! cherchent.!http://findability.org!!31!!Une!structure!hirarchique!reprsente!par!les!menus!Limportance!variable!des!contenus!va!pousser!!les!mettre!en!valeur!diffremment!dans!les!menus.!Les!menus!peuvent!ds!lors!mlanger!des!thmatiques!issus!de!diffrents!classements!si!les!cibles!et!leurs!comportements!lexige!(par!exemple!isoler!et!prsenter!un!article!spcifique!trs!attendu!par!les!internautes!dans!la!barre!de!menu!en!dehors!dun!menu!!boutique!).!!!Une!structure!secondaire!reprsente!par!des!liens!contextuels!Une!structure!vivante!Modifier!la!structuration!durant!la!vie!du!site!est!tout!!fait!envisageable!notamment!en!fonction!dune!actualit!ncessitant!une!mise!en!exergue.!!Ralisei un plan uu site Cest!le!rsultat!attendu!du!travail!darchitecture!de!linformation.!Il!doit!permettre!de!situer!un!contenu!!un!endroit!donn!et!de!dcrire!les!diffrentes!manires!dy!accder.!!Bien choisii ses motsLe!mot!vu!par!linternaute!sera!primordial!dans!son!choix!de!cliquer!ou!non,!do!limportance!des!libells.!Il!faut!permettre!!linternaute!dtre!dune!part!sr!de!son!choix!lorsquil!clique!sur!une!rubrique!et!dautre!part!faire!quil!ne!se!trompe!pas!lors!de!ce!choix.!!Le!fait!de!se!donner!comme!objectif!lutilisation!ditem!les!plus!courts!et!clairs!possible,!de!se!reposer!sur!les!conventions!web!et!les!conventions!du!domaine!est!une!dmarche!positive!en!terme!dutilisabilit.!Tiauuiie l'aichitectuie pai la navigation!Ce!sont!les!liens,!menus,!boutons,!qui!permettent!de!parcourir!le!site!qui!traduisent!larchitecture!de!linformation!(ce!sont!en!quelque!sorte!les!panneaux!indicateurs!du!monde!rel).!Larchitecture!de!linformation!est!la!structure,!la!navigation!est!ce!qui!permet!de!parcourir!cette!architecture.!Les!lments!de!navigation!doivent!permettre!de!rpondre!en!permanence!aux!rponses!suivantes!:!!"O!suis"je!?!Rvler!!tout!moment!lidentit!du!site,!donner!une!ide!de!son!contenu,!"O!puis"je!trouver!ce!qui!mintresse!?!Aider!lutilisateur!!raliser!sa!tche.!"Quest!ce!que!ce!site!propose!dautre!?!Au-uel ue la navigation : aichitectuiei les paicouis client et les inteiactionsIl!sagit!de!tracer!le!parcours!pas!!pas!des!personas!cette!fois!de!manire!linaire!;!on!ajoute!!la!structure!de!linformation!la!composante!temps.!Il!sagit!de!dcrire!les!parcours!client!et!flux!dinteraction!entre!le!site!et!linternaute.!Profondeur!et!largeur!en!architecture!de!linformation!!Une!architecture!plate!contient!peu!de!rubriques!de!second!niveau!et!beaucoup!de!premier!niveau.!Moins!de!clics!pour!parvenir!!linformation!mais!plus!de!rflexions!pour!rechercher.!Une!architecture!profonde!prsente!beaucoup!de!rubriques!de!niveau!profond.!Il!faut!trouver!un!compromis!entre!ces!2!tendances!en!sattachant!!analyser!la!difficult!daction!et!non!simplement!le!nombre!de!clics.!Une!bibliothque!!dobjets !pour!raliser!un!plan!du!site!est!disponible!!ladresse!:!http://jjg.net/ia/visvocab/!!32!!Lutilisabilit!des!parcours!client!doit!tre!envisag!!la!fois!au!niveau!du!fonctionnement!gnral!mais!galement!au!niveau!des!micro"fonctionnements.!Loptimisation!des!parcours!clients!et!interaction!a!toujours!pour!objectif!de!sadapter!aux!besoins!et!comportements!des!personas.!Passez l'cian : zonings et maquettes Le zoning : un piemiei ucoupage Avant!de!formaliser!le!site!cran!par!cran,!il!faut!tout!dabord!dcouper!et!positionner!les!grands!espaces!dinformation!et!de!contenu.!!Espace uisponible et piincipes ue ipaitition!Dbute!par!le!choix!dune!rsolution!cible!tout!en!prenant!en!compte!les!rsolutions!suprieures!et!infrieures.!Il!faut!porter!attention!aux!lments!incompressibles!qui!rduisent!lespace!disponible!(barre!de!menu!du!navigateur,)!et!dfinir!lespace!rellement!disponible!pour!effectuer!le!zoning.!Espace!disponible!en!fonction!de!la!rsolution!dcran!Rsolution!cible! Largeur!maximale! Hauteur!visible!sur!lcran!a!x!b!pixels!! (a!!20)!pixels! (b!!200)!pixels!!!Lespace!horizontal!:!une!limite!maximale!La!limite!horizontale!est!une!limite!finie!!ne!pas!dpasser!pour!proscrire!les!ascenseurs!horizontaux.!Lespace!vertical!et!la!notion!de!fold!Le!fold!est!une!ligne!virtuelle!reprsentant!le!bas!de!lcran!au"del!de!laquelle!il!faut!descendre!pour!voir!la!suite!de!la!page.!Cette!notion!et!la!bonne!habitude!quon!les!internautes!deffectuer!des!scrolls!verticaux!tend!la!surface!de!lespace!vertical!en!distinguant!2!zones!:!la!zone!!above!the!fold!!(visible!sans!scroll)!qui!doit!contenir!au!minimum!lidentit!visuelle,!la!navigation!principale,!les!outils!fonctionnels,!et!les!informations!capitales.!Les types ue zones Le!zoning!ne!concerne!pas!toutes!les!pages!mais!seulement!les!pages!cls!du!site!;!il!sagit!de!positionner!toutes!les!zones!cls!en!jouant!sur!la!surface!et!la!couleur!de!chaque!zone!pour!indiquer!les!zones!qui!doivent!tre!plus!ou!moins!fortes!visuellement.!La maquette conceptuelle : chaque zone en utail La!maquette!conceptuelle!utilise!le!zoning!comme!support!et!apporte!des!dtails!!chaque!zone.!Cette!maquette!a!3!rles!:!!"Ct!concepteur!:!cela!concrtise!la!problmatique!et!oblige!!rflchir,!"Ct!client!:!elle!matrialise!au!client!la!conception!du!site!et!facilite!le!dialogue,!"Ct!quipe!projet!:!utilis!par!toute!lquipe!pour!dialoguer!sur!une!base!commune.!MOTS!CLES!DU!CHAPITRE!Zoning,! maquette,! cran,! fold,! pixel,!storyboard,!spcifications!ergonomiques!!33!!Les uiffients types ue maquette Le!fait!de!commencer!par!une!premire!version!de!type!papier!offre!plus!de!libert!et!de!crativit!et!moins!de!contraintes!lies!aux!outils!informatiques.!0u'est-ce que je mets uans ma maquette . Texte!et!vocabulaire!!La!maquette!va!ncessiter!de!rflchir!et!dfinir!les!termes!cls!des!lments!au!cur!des!pages!(titres,!boutons,!liens,)!et!dadopter!des!rgles!dcriture!(emploi!de!linfinitif,).!On!peut!par!contre!travailler!avec!des!textes!de!substitution.!!!Apparence!et!comportement!des!objets!Le!fait!dintroduire!en!pralable!aux!maquettes!la!prsentation!des!objets!et!leur!comportement!(les!rgles!qui!les!rgissent)!vite!de!surcharger!le!reste!de!la!prsentation.!De!mme!les!phnomnes!dinteraction,!de!changement!dapparence!doivent!tre!reprsents.!Plus!la!phase!de!maquettage!est!prcise!et!dtaille,!plus!le!travail!qui!suivra!sera!allger.!0uels logiciels poui ialisei zonings et maquettes . Chaque!outil!prsente!ses!avantages!et!ses!inconvnients!:!!"Powerpoint!!! !!les!plus!:!! travail!collaboratif,!multi"fonction!!!Les!moins!:! rigidit!de!la!mise!en!page,!inadapt!au!format!web,!pas!de!notion!de!pixels!"Visio! ! !!les!plus!:!! bibliothque!dlments,!multi"fonction!!!Les!moins!:! rigidit!de!la!mise!en!page,!pas!de!notion!de!pixels!"Indesign! !!les!plus!:!! bibliothque!dlments,!multi"fonction,!puissance!et!flexibilit!du!vectoriel!!!Les!moins!:! partage!des!documents,!pas!de!notion!de!pixels!"Illustrator! !!les!plus!:!! notion!de!pixels,!puissance!et!flexibilit!du!vectoriel,!bibliothque!dlments!!!Les!moins!:! pas!de!notion!de!pages,!travail!collaboratif!"Photoshop! !!les!plus!:!! notion!de!pixels!!!Les!moins!:! pas!de!notion!de!pages,!!"Axure!RP!Pro! !!les!plus!:!! le!plus!avanc!et!intgrant!des!lments!rellement!fonctionnels!(www.axure.com)!! !!Les!moins!:! travail!collaboratif!CIN00IENE PARTIE. NETTEZ v0TRE SITE A L'EPRE0vE !Cette!cinquime!et!dernire!partie!nest!pas!traite!dans!ce!document.!!!!!