12 règles pour optimiser l’ergonomie de votre site… · d’ergonomie, ou des habitudes de...

© Groupe Eyrolles, 2007

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

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

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

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

ErgoWeb.book Page 89 Jeudi, 19. f vrier 2009 7:18 19

Ergo

nom

ie w

eb


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

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

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

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

Ce chapitre n’a pas pour vocation de passer en revue de manière exhaus-tive toutes les erreurs possibles, mais plutôt d’illustrer par l’exemple cha-cune des règles et son application. Nous en donnons des modèles positifset négatifs sur une multitude de sites web très différents. Vous verrez ainsiqu’un site très bien fait par ailleurs peut, à un moment donné, mettre en

MÉTHODOLOGIE Et si je saute cette étape ?

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

Figure 5–1Les règles d’ergonomie permettent d’optimiser

la qualité d’utilisation d’un site selon un doublemouvement : d’une part, elles influencent la

conception (1), d’autre part elles sont un outilpour évaluer une interface existante (2).

MÉTHODOLOGIE Règles à tout faire

Mesurer la qualité d’utilisation ponctuellement ets’en occuper au quotidien sont des activités trèsdifférentes. Cependant, elles exploitent les mêmesressources, à savoir les règles permettant d’éva-luer le niveau de qualité ergonomique relatif à unchoix d’interface. Ce sont ces règles que nous vousprésentons dans ce chapitre.


5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e

© Groupe Eyrolles, 2007 91

défaut une des règles. Cela vous permettra de comprendre encore mieuxque c’est seulement en optimisant très précisément chacune des pages devotre site que vous pourrez atteindre une bonne qualité ergonomiquegénérale. Il n’y a pas de secret, mais uniquement une prise en compteminutieuse et rigoureuse de chacun des principes de l’ergonomie web.

Enfin, gardez bien à l’esprit que le découpage proposé ici est uniquementutilitaire, dans le sens où il permet d’aborder l’ensemble des thématiquesles unes après les autres. Cependant, dans leur mise en pratique sur unsite web, toutes ces règles s’imbriquent les unes dans les autres. Vousverrez d’ailleurs à la fin de ce chapitre que, pour satisfaire pleinement unprincipe ergonomique, vous serez parfois contraint de mettre en défautun autre principe. Nous illustrerons ce type de conflits au travers dequelques exemples concrets. Dans ces situations de compromis, les spé-cificités de votre projet vous aideront à prendre les meilleures décisionspossibles.

Mais passons aux choses sérieuses et voyons donc comment vous pouvezaider 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 à vosinternautes, encore faut-il qu’ils puissent y trouver ce qui les intéresse. Vousatteindrez cet objectif en rangeant les informations de votre site de tellemanière que vos internautes localisent rapidement ce qu’ils recherchent.

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

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

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


Ergo

nom

ie w

eb


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

Les regroupements sont logiquesTout d’abord, si vous décidez de grouper des contenus, il faut que ceregroupement ait un sens. Vous ne pouvez pas simplement juxtaposerdes éléments pour former une rubrique sous peine de voir vos inter-nautes chercher en vain des informations.

Le sens de vos regroupements est d’autant plus important du point devue de l’utilisateur que ce dernier s’arrête très tôt dans le processus delecture des titres de rubriques. En fait, une fois qu’il croit avoir saisi lecontenu d’une rubrique, il passe à la lecture de la suivante. Or les utilisa-teurs pensent avoir compris en un ou deux mots, puisqu’ils sont habituésà ce que les regroupements dans les menus reposent sur des apparie-ments de contenus. Autrement dit, ils s’attendent à ce que vous ayez misensemble ce qui va ensemble (ce en quoi ils ont raison).

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

Pour aller plus loin dans la compréhension et lamise en pratique de l’architecture de l’information,nous y avons consacré un chapitre entier. Auchapitre 8, vous pourrez donc découvrir commentles internautes naviguent sur l’Internet et dequelle manière l’architecture de l’information peutvous aider à vous adapter à ces comportements.Nous verrons aussi comment organiser vos con-tenus, réaliser des plans de site et choisir le voca-bulaire qui traduira cette architecture dansl’interface.

VOCABULAIRE Grouper = Catégoriser

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

Figure 5–3Sur le site de SFR Music, le fait de regrouper

les genres World, Jazz et Classique dansla même rubrique a peu de sens

d’un point de vue utilisateur.Source : www.sfr.fr


5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e


Les mots ne doivent donc pas être un moyen de contourner un défaut decatégorisation. Ne tablez pas sur une rédaction explicite du titre derubrique pour en décrire le contenu, parce que vos internautes ne lirontpas forcément ce titre de manière très attentive. Par exemple, sur le sitede SFR Music (figure 5–3), les styles World, Jazz et Classique sontregroupés dans la même rubrique. Il s’avère que, lorsqu’ils parcourent cemenu avec l’objectif de trouver un morceau de Mozart, 75 % des inter-nautes ne voient pas le mot Classique à la première lecture. Certains ontbesoin de 3 passages et d’autres ne le voient jamais, allant chercherMozart dans Variétés Internationales, faute de mieux.

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

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

Prenons pour exemple le site de Nespresso : une grande partie des inter-nautes s’y rend pour commander des capsules de café. Or, mis à part sur lapage d’accueil, il est très difficile de trouver comment y parvenir. Il estprobable qu’une partie des internautes, une fois arrivés à l’intérieur du site,auront du mal à comprendre comment commander en ligne. Ils aurontalors deux types de réaction : soit ils reviennent à l’accueil, soit ils partentdu site en pensant qu’il est impossible d’acheter des capsules en ligne.

Ceci est dû à un défaut de structuration, qui fait que l’achat en ligne est« caché » à un niveau 2 de profondeur (c’est une sous-rubrique de larubrique Club Nespresso). L’architecture du site devrait être pensée pourfaire remonter cette fonctionnalité au premier niveau. En outre, leregroupement au sein de cette rubrique a certes un sens dans la cultured’entreprise Nespresso et la relation clients offline, mais il pose problèmesur le Web puisqu’il rend totalement invisible la fonctionnalité d’achatde capsules : pourquoi l’internaute irait-il acheter du café dans unerubrique qui semble jouer un rôle communautaire ou être réservée à desclients privilégiés ? Cet exemple recoupe donc aussi des problématiquesde compréhension du vocabulaire que nous traiterons par la suite.


Ergo

nom

ie w

eb


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

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

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

Figure 5–4 Sur le site de Nespresso, la rubrique Commandez vos capsules est « cachée » dans un sous-niveau de l’architecture. Ce défaut est accentué par l’appellation de la rubrique de niveau supérieur, Le club NESPRESSO,

qui n’indique en rien que l’on puisse y acheter des capsules de café. Source : www.nespresso.fr

POINT DE VUE Le menu de navigation

transforme l’abstrait en concret

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

Figure 5–5Sur le site de la Camif, on pouvait trouver

les produits Image et Son à la foisdans l’univers Loisirs et dans celui de la

Maison. Cela permettait aux internautes quiallaient chercher un téléviseur de le trouver

du premier coup, qu’ils se dirigent spontané-ment vers l’un ou l’autre des univers.

Source : ancien site www.camif.fr


5 –

12 rè

gles

pou

r opt

imise

r l’e

rgon

omie

de

votr

e sit

e


• Être exclusifs : vos internautes doivent pouvoir choisir entre deux itemssans hésiter. Vous devez donc éviter toute ambiguïté et respecter le critèred’exclusivité : un intitulé doit être le seul envisageable pour l’internautequi cherche un contenu précis. Si vous ne suivez pas cette recomman-dation, vous devrez alors dupliquer les accès à certaines rubriques.C’était notamment le cas sur l’ancien site de la Camif (figure 5–5).

Contourner un site mal rangéSi vous vous rendez compte que l’architecture de votre site est inadaptéeaux besoins de vos internautes mais que vous ne pouvez rien y faire (celapeut être le cas si votre marge de manœuvre est très réduite et/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 rap-ports étroits, sans que ceux-ci n’apparaissent explicitement dans l’arborescence.

Reprenons l’exemple du site de Nespresso, et mettons que vous en soyezle responsable. Vous savez que la fonctionnalité d’achat en ligne est tropenfouie dans l’arborescence, vous devez alors chercher les endroits-clésoù proposer un lien direct vers cette dernière. Ce lien agira comme unraccourci afin de pallier une architecture de l’information quelque peudéfaillante. C’est déjà ce qui est mis en place sur la page d’accueil, maisce n’est pas suffisant. Par exemple, il paraîtrait tout à fait logique defournir un lien vers l’achat dans les fiches de présentation des capsules,d’autant que l’on spécifie un prix pour chacune des capsules. C’est doncl’endroit rêvé pour encourager l’achat en ligne !

DÉFINITION Lien transversal

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

Figure 5–6 Sur les fiches produit du site Nespresso, un lien transversal vers l’achat en ligne permettrait de compenser le manque de visibilité de cette fonc-tionnalité dans le menu de navigation principal.Source : www.nespresso.fr


12 règles pour optimiser l’ergonomie de votre site… · d’ergonomie, ou des habitudes de...

Documents

Transcript of 12 règles pour optimiser l’ergonomie de votre site… · d’ergonomie, ou des habitudes de...