27 conseils pratiques en ergonomie Web

Table des matières

1. Rappel de la demande .................................................................................................... Error! Bookmark not defined.
2. Méthodologie .................................................................................................................. Error! Bookmark not defined.
2.1. Phase 1 – Échantillonnage et Grille d’analyse .......................................................... Error! Bookmark not defined.
2.2. Phase 2 – Évaluation ................................................................................................ Error! Bookmark not defined.
2.3. Phase 3 – Analyse et Recommandations ................................................................. Error! Bookmark not defined.
3. Constats suite à la visibilité du contenu.......................................................................... Error! Bookmark not defined.
3.1. Moteur de recherche interne .................................................................................... Error! Bookmark not defined.
3.2. Navigation et accomplissement des tâches ............................................................. Error! Bookmark not defined.
4. Analyse des forces et faiblesses de la conception des sites .......................................... Error! Bookmark not defined.

27 conseils
4.1. Présentation de l’analyse ......................................................................................... Error! Bookmark not defined.
4.2. Engins de recherche................................................................................................. Error! Bookmark not defined.

5.
pratiques en
4.3. Navigation ................................................................................................................ Error! Bookmark not defined.
Sommaire des meilleures pratiques de l’industrie .......................................................... Error! Bookmark not defined.

ergonomie Web
5.1. Généralités sur les méthodes de développement .................................................... Error! Bookmark not defined.
5.2. Engins de recherche.................................................................................................des gestionnaires defined.
Un guide pratique à l’intention Error! Bookmark not
5.3. Navigation ................................................................................................................ Error! Bookmark not defined.
6. Recommandations quant aux critères de financement20 mars 2008 Le .................................................. Error! Bookmark not defined.
Version 1.0
ANNEXE 1 – Étude des moteurs de recherché internes
Par
ANNEXE 2 – Étude de la navigation et accomplissement des tâches - Jean-François Vigeant - Jean-François Renaud
Thomas Tixier

Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 1

27 conseils pratiques en ergonomie Web

Préambule
Adviso est fier de vous présenter son guide pratique en ergonomie Web réunissant 27 conseils pratiques qui contribueront à augmenter le succès
de vos initiatives Web.

Investir en ergonomie Web, c’est investir directement dans la performance de votre site, c’est-à-dire sa capacité à atteindre les objectifs pour
lesquels il a été conçu. Agissant en complément avec les stratégies d’acquisition de trafic et de fidélisation client, l’ergonomie Web s’affaire à
augmenter le nombre de visiteurs qui passent à l’action sur votre site.

Ce guide est directement en ligne avec la mission d’Adviso : maximiser le retour sur investissement Internet de nos clients en:
• développant et déployant des stratégies Internet créatives,
• les soutenants dans l’appropriation de l’innovation et de nouvelles façons de faire.

À propos d’Adviso
Adviso est une firme d’experts en stratégie et marketing Internet. Depuis plus de 5 ans, nous aidons nos clients à optimiser leur(s) site(s) Internet
et leurs opérations de marketing Internet par des idées innovatrices et créatives. Celles-ci se fondent entre autres sur un travail continu de veille
et de recherche des meilleures pratiques sur Internet.

Ainsi, Adviso compte parmi ses clients de nombreuses organisations prestigieuses telles Quebecor, Rogers/Fido, Téléglobe, Hydro-Québec,
Patrimoine Canadien, Québec Loisirs, Cascades Groupe Tissu et Bell Canada. Nous avons réalisé pour ces clients de nombreuses interventions
afin d’améliorer leur stratégie sur Internet.

Adviso accompagne plus d’une centaine de clients actifs et a réalisé à ce jour plus de 300 projets Internet.

Vous pouvez rejoindre les conseillers d’Adviso : www.adviso.ca
514-598-1881 x330
conseil@adviso.ca
Les auteurs
Jean-François Vigeant et Thomas Tixier sont des ergonomes Web d’expérience chez Adviso et c’est leur expertise qui a permis la création de
ce document.

Jean-François Renaud est un associé d’Adviso qui a fourni son expérience et son support au projet.



Table des matières

1. Introduction..................................................................................................................................................................... 4

2. Un mot sur l’ergonomie .................................................................................................................................................. 4

2.1. Définition et usage .................................................................................................................................................... 4

2.2. Évaluation de l’ergonomie Web ................................................................................................................................ 5

2.3. Bénéfices et liens avec les autres disciplines........................................................................................................... 7

3. 27 conseils pratiques en ergonomie ............................................................................................................................... 8

3.1. Page d’accueil .......................................................................................................................................................... 8

3.2. Menus..................................................................................................................................................................... 12

3.3. Liens ....................................................................................................................................................................... 16

3.4. Navigation & orientation ......................................................................................................................................... 20

3.5. Aspect visuel et lisibilité ......................................................................................................................................... 25

3.6. Gestion des erreurs ................................................................................................................................................ 31



1. Introduction

Le but de ce guide est de présenter, d’une part, quelques notions de bases sur l’ergonomie et son impact dans un développement de site
Internet, et d’autre part, de fournir un ensemble de règles à prendre en compte lors de la création d’un site Web. Notons que les règles
présentées ici sont générales, elles ne peuvent servir que de base à une évaluation plus complète qui devra prendre en considération le contexte
particulier ainsi que les utilisateurs cibles de chaque projet.

Les critères présentés servent à illustrer la mise en œuvre de l’ergonomie dans un développement de site Internet et ils pourront, de plus,
permettre au lecteur d’analyser succinctement son site afin d’avoir une idée générale de sa convivialité.

La première partie de ce document présente donc un aperçu de ce qu’est l’ergonomie et ses applications. La seconde présente la liste de 27
critères illustrés par différents sites couvrant des besoins variés tels la vente en ligne, des sites corporatifs, des sites informationnels, etc.

2. Un mot sur l’ergonomie
2.1. Définition et usage

L’ergonomie et, plus récemment, l’ergonomie Web, ne sont pas des domaines nouveaux et pourtant, à la vue de certains sites Internet c’est un
sujet qui mérite grandement d’être abordé. Le concept d’ergonomie appliqué au monde du travail est en fait apparu à la fin des années 1940.
Son application à des industries traditionnelles s’est généralisée très rapidement grâce à son impact immédiat sur l’augmentation de la
productivité des employés. Il fut ensuite adapté à l’informatique avec la démocratisation, tout d’abord des ordinateurs de bureau et, plus tard, de
l’Internet.

Malgré cela, l’ergonomie Web, bien que capable d’apporter des bénéfices comparables à l’ergonomie de postes de travail, reste encore un
domaine méconnu et on trouve encore, à l’heure actuelle, bon nombres de sites dans lesquels il est tout simplement impossible d’accomplir de
simples tâches. De tels problèmes peuvent avoir des conséquences drastiques lorsque, par exemple, des utilisateurs n’arrivent pas à atteindre
les informations dont ils ont besoin pour compléter des achats en ligne ou contacter votre compagnie. Ceci est d’autant plus incompréhensible
qu’à l’heure actuelle, la mise en place d’études ergonomiques lors de la création ou de la refonte de sites Internet est de plus en plus simple.

Lorsqu’on parle d’ergonomie on parle aussi, souvent, d’utilisabilité. L’utilisabilité est la notion qui permet de définir la facilité d’utilisation d’une
interface pour un groupe d’utilisateurs particuliers, dans un contexte d’utilisation particulier. Son évaluation se base sur trois aspects ;
l’efficacité, c'est-à-dire la possibilité par l’utilisateur d’atteindre ses buts, l’efficience, qui prend en compte les efforts nécessaires à l’atteinte de
ces buts et la satisfaction. Notons que l’ensemble de ces critères ont un impact important sur la fidélisation des visiteurs.


25 conseils pratiques en ergonomie

2.2. Évaluation de l’ergonomie Web

Il existe plusieurs méthodes pour évaluer l’utilisabilité d’un site. La première consiste à effectuer des tests avec des utilisateurs type et d’observer
leurs réactions par rapport au système. Ceci peut se faire au cours des différentes étapes d’un développement, que ce soit par l’évaluation de
maquettes papiers ou de prototypes plus ou moins avancés.

Il existe également une approche d’évaluation en fonction de listes de critères ergonomiques, ce sont des évaluations heuristiques. Plusieurs
chercheurs tels Nielsen1, Bastien et Scapin2 ont proposé des listes de critères basées sur des études cognitives. De manière générale, ces
critères concernent les différents aspects nécessaires aux utilisateurs pour réussir leurs tâches. C'est-à-dire, par exemple, la nécessité de
disposer d’un guidage suffisant, d’avoir une charge de travail minimale, de pouvoir comprendre et lire les termes utilisés, etc. En se basant sur
ces concepts de haut niveau il est ensuite possible d’extraire des recommandations concrètes directement applicables au design de sites
Internet. Les 27 conseils que nous présentons dans ce document en sont un exemple.

Nous les avons regroupés selon six axes dans lesquels on trouve régulièrement des problèmes d’utilisabilité. Comme vous le verrez par la suite,
l’évaluation de ces critères est relativement simple car ils sont tous très explicites.

Voici les six axes que nous allons aborder :

i. Page d’accueil
Malgré l’avènement des moteurs de recherches, c’est encore à l’heure actuelle la porte d’entrée principale des sites Internet. C’est donc
une des pages les plus importantes qui va souvent déterminer le succès ou l’échec d’une visite. C’est pour cela qu’il est recommandé de
mettre suffisamment d’efforts pour lui garantir une bonne utilisabilité.

ii. Menus
Cet axe permet d’évaluer l’ergonomie des menus de navigation. Ces derniers ont également un impact important sur la facilité d’accès
au contenu. Si les utilisateurs ne comprennent pas ou ne voient pas clairement les sections auxquelles ils ont accès, il est évident que la
navigation sera pénalisée.

1
Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY
2
Bastien, J.M.C., Scapin, D. (1993) Ergonomic Criteria for the Evaluation of Human-Computer interfaces. Institut National de recherche en informatique et en automatique, France



iii. Liens
Cet axe concerne les liens présentés de manière textuelle dans les pages Internet. Il peut s’agir de liens contextuels ou même de menus
secondaires. Ces liens permettent aux utilisateurs de se faire une idée sur la valeur des informations d’une page courante ainsi que sur
l’ensemble des destinations possibles depuis cette page. Ils influencent beaucoup la navigation interne à une section.

iv. Orientation dans le site
Cet axe concerne des aspects plus généraux de la navigation et a pour but d’évaluer la qualité des guides d’orientations fournis aux
utilisateurs. En plus des menus et des liens, il y a d’autres paramètres à prendre en compte pour évaluer la facilité de navigation. Dans
cet axe, nous aborderons les critères de constance d’interface, d’identification de la position courante, d’abus de pop-up, et de
rubriques d’aide.

v. Aspects visuels et lisibilité
Cet axe concerne la lisibilité des informations présentes sur le site. Les axes précédents concernaient l’accès à l’information, mais il est
évident que la présentation de ces informations a également un rôle important dans l’utilisabilité d’un site. Les utilisateurs doivent être
capables de lire facilement et d’identifier visuellement les différents composants d’une page web.

vi. Gestion des erreurs
Le dernier aspect abordé dans ce guide concerne la gestion des erreurs. Un site qui présente des erreurs perdra énormément en termes
de fréquentation et de crédibilité. De plus, un des points très important de cet axe concerne la récupération et la prévention d’erreurs lors
du remplissage de formulaire. Ceci est en effet un point clé de tout site voulant interagir avec des utilisateurs que se soit pour des
inscriptions à des listes d’envois ou pour le remplissage d’une commande en ligne.

Ces critères peuvent donc nous permettre d’intervenir pour l’évaluation d’un site existant mais peuvent également servir de guide de conception
pour la création de nouveaux sites.



2.3. Bénéfices et liens avec les autres disciplines

La majorité des grandes entreprises investissent en ergonomie car ils y connaissent habituellement un retour très concret. Investir en ergonomie,
c’est investir en satisfaction, en facilité d’accès à des produits et à des contenus qui faciliteront la prise de décision. Améliorer l’ergonomie, c’est
faciliter une tâche pour des centaines ou des milliers de personnes qui doivent l’accomplir.

Une entreprise a beau avoir d’excellents produits ou services, si ceux-ci ne sont pas identifiables facilement sur leur site, celui-ci ne les
supportera d’aucune façon. Investir en ergonomie c’est également éviter des erreurs en amont, et ainsi minimiser les frais liés à leur correction
sur le produit fini. De plus, il existe un réel coût à enligner les utilisateurs vers une fausse piste : les visiteurs et ventes perdues, l’insatisfaction
éprouvée par les utilisateurs, les coûts de re-conception, pour ne nommer que ceux-là. Par contre, les améliorations sont nombreuses lorsqu’on
investit en ergonomie Web :

o Meilleur productivité dans les services en ligne et intranets ou extranets ;
o Diminution du nombre d’erreurs et donc des coûts de gestion ;
o Augmentation de la conversion (ventes, abonnements, opportunités) ;
o Diminution des besoins en formation ;
o Diminution des besoins en support au site (téléphonique et par courriel) ;
o Moins de réajustements nécessaires à la fin du développement.

Il est important de comprendre que l’ergonomie fonctionne de pair avec les autres disciplines Web. Par exemple, en amont dans un projet de
planification stratégique, des approches telles l’étude des personas et l’analyse comparative ou le benchmark viennent compléter la
planification en permettant d’identifier des axes stratégiques qui offrent une réelle utilité aux utilisateurs tout en supportant les objectifs d’affaires
d’une organisation. Les maquettes et l’arborescence complètent ensuite la phase de conception.

L’ergonomie Web travaille également de pair avec les tactiques permettant l’acquisition de clients potentiel tels le référencement dans les
moteurs de recherche ou les campagnes de coûts par clic. Une fois sur le site, c’est le rôle de l’ergonomie de faciliter l’action de l’utilisateur
vers la tâche qu’il doit accomplir. Les pages de destination ou landing pages sont un exemple éloquent du travail complémentaire du
référencement et de l’ergonomie Web. Actuellement, c’est ici que les efforts ergonomiques ont le plus d’impact sur le taux de conversion d’un
site.

L’ergonomie complémente également la mesure de performance pour les évaluations de sites web. La mesure sert à identifier les endroits qui
ne performent pas et l’ergonomie permet d’apporter des correctifs aux pages responsables. Une fois les modifications ergonomiques misent en
place, la mesure de performance permet de suivre leur impact sur le site et de procéder à d’éventuelles optimisations.

Place aux 27 conseils pratiques.



3. 27 conseils pratiques en ergonomie
Notons que les exemples choisis ici n’illustrent que le critère pour lequel ils sont présentés. Cela ne représente donc pas la totalité d’un site dans
son ensemble. Ainsi, un site illustrant une mauvaise pratique peut être également utilisé plus tard pour illustrer une bonne pratique sur un autre
critère.

3.1. Page d’accueil

1. Choisir et afficher un tagline explicite
EXPLICATION
BONNE S PRATIQUES
Le tagline doit présenter :

• La mission de la compagnie si son nom et son logo ne sont pas
assez explicites, ou, si l’image de marque de la compagnie est
méconnue du public.
• La mission du site ou la valeur ajoutée du site, si le nom de la Le tagline de cadosphère.ca présente le but du site qui est de vendre
compagnie est assez clair. des cadeaux en ligne. Toutefois, il pourrait être amélioré en précisant
que les cadeaux vendus sont des cadeaux écologiques et
Le tagline doit être une courte phrase située sous le logo ou responsables.
suffisamment visible dans la page.

Cette phrase peut être complétée par un texte de deux ou trois lignes
présenté de façon suffisamment visible sur la page d’accueil.

Le tagline et le nom de domaine représentent bien la mission du site.

MAUVAISE PRATIQUE

Le site Forca.ca ne dispose pas de tagline ce qui lui serait utile pour
inciter les utilisateurs cibles à explorer le site plus en profondeur.



2. Présenter des exemples de contenus récents
EXPLICATION
BONNE PRATIQUE

Il est très important de présenter des contenus récents sur la page
d’accueil. Cela peut être fait par la présentation de nouvelles, de
nouveaux produits et/ou services, de promotions récentes, etc.

Ceci a pour but d’une part, de présenter le contenu disponible sur le site
de manière concrète. D’autre part, cela démontre aux utilisateurs que la
compagnie est active.

Pour le référencement, cela a l’avantage d’offrir du contenu frais aux
moteurs de recherche.

Parmi les informations que l’on trouve sur la page d’accueil de
Futureshop.ca il y a, entre autres, les soldes de la semaine. Ceci
permet de présenter des produits récents, disponibles chez
Futureshop.



3. Orienter la page d’accueil sur les options ou tâches principales
EXPLICATION
BONNE S PRATIQUES
La page d’accueil étant la vitrine d’un site il est important que les
utilisateurs puissent accéder facilement à toutes les sections principales
ou à toutes les principales tâches qu’ils pourront réaliser.

Pour cela il est donc important de présenter les principales sections, ce
qui peut être fait également par l’intermédiaire du point précédent, et de
fournir des liens explicites vers les tâches.

Sur la page d’accueil de la bibliothèque et des archives nationales du
Québec, les tâches de recherche sont présentées en premier.

Sur le site d’aircanada.ca, le moteur de recherche, qui correspond à
la tâche principale des utilisateurs, est également mis en avant sur la
page d’accueil.



4. Ne pas surcharger la page d’accueil sans raison
EXPLICATION
BONNE PRATIQUE

Tout en respectant les deux règles précédentes, il faut également
minimiser les informations fournies. La page d’accueil est une vitrine et
doit pouvoir être parcourue rapidement pour pouvoir diriger l’utilisateur
vers la tâche qu’il désire accomplir. Il faut donc :

• Éviter le défilement vertical superflu. La quantité de défilement
acceptable peut varier d’un site à l’autre. Par exemple, des sites
informationnels pourront se permettre plus de liberté à ce sujet.
• Minimiser le contenu textuel. Comme les utilisateurs veulent
généralement accéder rapidement aux informations, ce n’est
pas l’endroit idéal pour présenter de longs blocs de texte.

La page d’accueil de Telus mobilité est courte et sans texte superflu.

MAUVAISE PRATIQUE

La page d’accueil du site ecolo-econo.org contient trop de texte et
nécessite trop de défilement vertical.



3.2. Menus

5. Suivre les standards du Web pour les menus.
EXPLICATION
BONNE PRATIQUE

Pour faciliter l’utilisation d’un site, il est important de respecter les
conventions visant à réduire la charge de travail du visiteur.

L’application des points suivants peut varier en fonction du site.

• Pour optimiser la navigation, le menu principal d’un site devrait
contenir entre 4 et 7 éléments.
• Le positionnement standard du menu principal est, soit en haut
de page, soit en colonne à gauche.
• Les menus secondaires doivent être présentés soit dans la
colonne de gauche, soit en dessous du menu primaire si celui-ci
est placé en haut de l’écran.
Les menus principaux et secondaires d’Archambault.ca respectent les
• Les menus secondaires doivent être facilement identifiables standards du web.

MAUVAISE PRATIQUE

Les menus du site Alphacasting.ca sont situés en bas de page ce qui
est très nuisible à la navigation.



6. Le menu ne doit pas dépasser la première page de défilement
EXPLICATION
BONNE PRATIQUE

Les éléments des menus qui dépassent de la première page sont très
rarement accédés par les utilisateurs. Ceux-ci ont tendance à cliquer sur
ce qu’ils voient sur la première page.

Les menus secondaires de la rubrique « Télévision » de
radiocanada.ca ne dépassent pas de la première page.

MAUVAISE PRATIQUE

Les menus du site divertissementscorporatifs.ca sont tous présentés
en une seule fois et nécessitent énormément de défilement pour être
lus.



7. Créer un menu clair
EXPLICATION
BONNE PRATIQUE

Il est important que chaque section du menu principal ait une
signification bien distincte des autres. Il faut donc créer un menu avec
une taxonomie simple.

Pour obtenir une taxonomie simple, la technique du tri de cartes peut
être utilisée. Cette technique permet d’impliquer les utilisateurs dans la
définition des sections du site et dans la répartition des contenus dans
chaque section.

Sur le site d’adviso.ca la taxonomie ne prête pas à confusion.
Chaque Rubrique possède un titre explicite.

MAUVAISE PRATIQUE

Sur le site Tremblant.ca, certaines rubriques sont peu claires. Par
exemple, la différence entre « Offres et forfaits » et « Billets et
Passes » n’est pas évidente. De plus, les libellés des sections « Quoi
faire » et « Village » ne sont pas suffisamment explicites.



8. Mettre en évidence les éléments cliquables dans le menu
EXPLICATION
BONNE PRATIQUE

Afin de faciliter la navigation, il faut que les utilisateurs puissent
reconnaître facilement ce qui est cliquable ou non. Une façon d’atteindre
cet objectif est de surligner ou souligner les objets lorsque le pointeur de
la souris passe au-dessus.

Les éléments cliquables du menu de la Baie sont facilement
identifiables.

MAUVAISE PRATIQUE

Les éléments du menu d’amazon.fr ne sont pas surlignés si la souris
passe au-dessus.



3.3. Liens

9. Suivre les standards du web pour les liens textuels.
EXPLICATION
BONNE PRATIQUE

Les points présentés ici peuvent être sujets à des adaptations en fonction
du type de sites évalués. Toutefois, de manière générale, respecter ces
critères tend à améliorer la clarté des pages web.

• Un lien textuel devrait être souligné.
• Il faut utiliser une seule couleur pour tous les liens textuels du
site (dans le corps du texte). Pour maximiser la reconnaissance
des liens par les utilisateurs il est même préférable d’utiliser des
teintes de bleus qui rappellent la couleur par défaut utilisée par
les navigateurs.
• Il faut également identifier les liens déjà visités en changeant leur
Sur amazon.fr, les liens textuels sont facilement identifiables et les
couleur.
liens visités changent de couleurs (encerclés sur l’image).
• Les libellés des liens doivent inciter à l’action et avoir une
signification pertinente pour les utilisateurs. Il faut donc éviter les MAUVAISE PRATIQUE
liens « cliquez ici ».
• Afin de ne pas perturber les utilisateurs, il faut éviter d’utiliser
des caractères gras ou du texte souligné pour des éléments qui
ne sont pas des liens.

À la fin des articles de Madame.ca se trouve un ensemble de liens.
Aucun n’est souligné et ils ont tous des mises en forme différentes.
En dessous de « Pour en savoir plus » les liens sont noirs et le
premier est en caractère gras. Dans la boîte « Autre liens », les textes
en caractères gras ne sont pas des liens. De plus les caractères gras
sont également utilisés dans le corps des articles pour du texte
neutre.



10. Les titres des pages et les liens doivent être logiques
EXPLICATION
BONNE PRATIQUE

Les libellés des liens doivent, dans la mesure du possible, correspondre
aux titres des pages vers lesquels ils pointent.

Ceci permet aux utilisateurs de se repérer plus facilement lors de leur
navigation.

De plus, il ne faut pas que plusieurs pages ou plusieurs objets soient
identifiés par de multiples libellés. Les liens portants les mêmes libellés
ne doivent pas pointer vers des pages différentes.

Sur le site d’Hydro Québec, lorsqu’on clique sur un lien, on arrive sur
une page qui correspond à nos attentes.

MAUVAISE PRATIQUE

Sur le site msn.ca, le lien « Téléphone à 0$ » nous envoie sur une
page où il n’y a qu’un téléphone à 179,95$.



11. La présentation des liens doit être en rapport avec ce qu’ils pointent
EXPLICATION
BONNE PRATIQUE

Le libellé et/ou l’icône de chaque lien doit être choisi judicieusement en
fonction des objets ou pages vers lesquels ils pointent.

Il faut éviter d’utiliser des concepts qui sortent trop de l’ordinaire pour ne
pas perturber les utilisateurs.

Il faut également éviter d’utiliser des images sans texte associé (que ce
soit une légende juxtaposée à l’image ou au minimum une description
textuelle dans les balises ALT.)
Sur yahoo.ca, les icônes choisies sont assez pertinents.

MAUVAISE PRATIQUE

Sur le site d’electricpulp.com les images choisies pour le menu de
droite ne représente pas vraiment le contenu vers lequel ils pointent.
L’icône RSS en bas à gauche n’est pas un lien vers le fil RSS de la
compagnie.



12. Identifier les liens sortants
EXPLICATION
BONNE PRATIQUE

Dans la mesure du possible il faut permettre à l’utilisateur de distinguer
les liens internes au site et les liens qui pointent vers des pages externes.
Ceci peut être fait par l’utilisation d’icônes de plus en plus répandus (voir
bonne pratique ci contre) ou le choix de couleurs différentes.

Il peut s’avérer utile d’expliquer la signification de l’icône ou des couleurs
choisies dans les pages où cela est nécessaire. Il faut également
informer l’utilisateur lorsqu’un lien pointe vers un document non HTML Sur Wikipédia, d’une part les liens sortants sont placés dans une
(word, pdf, etc.). De plus, dans ce cas, si un plug-in est nécessaire pour rubrique spéciale (Liens externes) et d’autre part, ils utilisent une
visualiser l’objet pointé par un lien il faut informer l’utilisateur avant qu’il icône explicite.
ne clique sur le lien.
MAUVAISE PRATIQUE

Sur le site d’ibm.ca, en cliquant sur le lien entouré, on arrive sur un
autre site, lenovo.com.



3.4. Navigation & orientation

13. Présenter la position courante de l’utilisateur
EXPLICATION
BONNE PRATIQUE

L’utilisateur doit toujours pouvoir identifier sa position courante. Ceci
l’aide à mieux comprendre le contenu de la page dans laquelle il est et
facilite son exploration du site. Pour l’aider il faut :

• Utiliser un fil d’Ariane
• Avoir un titre de section visible sur chaque page
• Mettre en évidence la position courante dans le menu de
navigation
Le site Fanatique de « Branchez-vous » indice clairement la position
• Avoir des URL simples.
courante dans le menu.

MAUVAISE PRATIQUE

Le site chapters.indigo.ca présente plusieurs problèmes. Il n’y a pas
de fil d’Ariane, le titre de la page « Littérature » ne correspond à
aucune sous-section du site, et la section « Livres » dans laquelle
nous nous trouvons n’est pas surlignée dans le menu. Notons
également que, dans le menu du haut, la section « Coin jouets » est
toujours surlignée ce qui peut porter à confusion.



14. Le retour à la page d’accueil doit être simple
EXPLICATION
BONNE PRATIQUE

L’utilisateur doit pouvoir retourner facilement à la page d’accueil. Comme
c’est le point d’entrée sur le site, c’est également un point de repère que
les utilisateurs peuvent utiliser pour retrouver facilement du contenu
récent ou des liens vers des sections importantes.

Pour faciliter l’accès à cette page on peut :
• Utiliser un lien « accueil » dans le menu principal,
• Faire en sorte que le logo du site soit un lien vers cette page.

Le site de Québec Loisirs utilise bien ces deux recommandations.

MAUVAISE PRATIQUE

Le menu du site Alphacasting.ca n’a pas de rubrique « accueil » et
son logo n’est pas cliquable.



15. Avoir des sections d’aide à la navigation
EXPLICATION
BONNE PRATIQUE

En cas de besoins les utilisateurs doivent pouvoir se tourner vers les
sections suivantes :

• Une section d’aide,
• Un plan du site,
• Un moteur de recherche. L’entête du site eBay offre un accès facile à la recherche, à l’aide et au
plan de site.
L’application des points de ce critère dépend bien sûr de la taille du
site. De plus la réalisation de chaque point joue également un rôle sur MAUVAISE PRATIQUE
l’utilisabilité du site. Il est souvent mieux de ne pas avoir de moteur de
recherche interne que d’en avoir un mauvais.

Sur le site d’Averna Vision&Robotics, il n’y a aucune des trois sections
recommandées.



16. Éviter d’utiliser trop de « pop-ups »
EXPLICATION MAUVAISE PRATIQUE

Pour ne pas surcharger l’écran des utilisateurs, il faut éviter d’ouvrir des
fenêtres de navigateur supplémentaires pour présenter des informations.
Cela rend la navigation laborieuse car il est très difficile de retrouver son
chemin dans un site qui nous emmène de fenêtre en fenêtre.

De plus, la prolifération des outils intégrés aux navigateurs empêchant
l’apparition de ce type de fenêtre pose de sérieux problèmes.

Pour présenter des informations de manière contextuelle, préférez
l’utilisation de pop-up Ajax/Dhtml qui permettent de rester dans la même
fenêtre de navigateur.

Sur le site desjardins.com, plusieurs sections présentent leur
contenu dans des nouvelles fenêtres. De plus, une fois que le pop-
up est ouvert, tous les autres liens pointant vers un pop-up s’ouvrent
dans cette nouvelle fenêtre. Cela peut prêter à confusion.



17. Le design du site doit être constant tout au long de la visite

Il est important d’offrir à l’utilisateur une interface constante dans toutes
les sections du site. Cela permet de :

• Développer des repères dans le site
• Avoir une navigation plus facile entre les sections
• Favoriser l’apprentissage du fonctionnement du site
• Rappeler à l’utilisateur qu’il est toujours dans le même site.

La page d’accueil du site et la page d’accueil de la boutique sont
différentes, ce qui rend la navigation entre les deux sites difficile. Il
n’y a pas de navigation commune qui fait le lien entre les deux sites.


Rapport d’analyse & recommandations – Étude de visibilité du contenu

3.5. Aspect visuel et lisibilité

18. Permettre l’impression facile du contenu dans les pages
EXPLICATION
BONNE PRATIQUE

Beaucoup d’utilisateurs aiment avoir les contenus sous format papier
pour archives ou pour faciliter la lecture. Il est important de fournir un
moyen facile d’imprimer le contenu de la page sans inclure tout le
visuel qui rend l’impression lente et encore moins écologique. Le seul
contenu que l’utilisateur désire imprimer est le corps du texte sans la
navigation. On peut placer cet outil d’impression dans le haut ou le bas
de la page.



19. Limiter la longueur des lignes de texte
EXPLICATION STATISTIQUE

Pour faciliter la lecture à l’écran, il est recommandé de limiter le nombre
de caractères par ligne de texte. Une ligne de texte devrait être
constituée d’environ 65 à 95 caractères (95 caractères équivalent à
25cm). Après cette limite, la vitesse de lecture diminue. Des lignes trop
courtes réduiront également la vitesse de lecture. L’âge des visiteurs, le
type de police, l’espacement et la taille du texte peuvent également
influencer la vitesse de lecture.

Étude de la vitesse de lecture (mot par minute wpm) menée par
Shaikh et Chaparro en 2004
(http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm)



20. Un contraste fort maximise la lisibilité
EXPLICATION
BONNE PRATIQUE

Pour faciliter la lisibilité, il faut utiliser des couleurs de police et
d’arrière-plan qui maximisent le contraste. Ce constat s’applique
également pour les images. Il existe des logiciels qui peuvent calculer
la différence de contraste entre les deux couleurs. La clientèle plus
âgée peut avoir de la difficulté avec les contrastes.

L’utilisation du noir sur blanc favorise le meilleur contraste.

MAUVAISE PRATIQUE

Éviter l’utilisation des tons de gris sur gris.



21. Éviter les animations superflues

Éviter d’insérer des animations superflues qui nuisent à
l’accomplissement des tâches des visiteurs. Par exemple :

• Les pages d’introduction (splash page)
• Les .gif animés sans valeur
• Les animations de transition de page

De plus, lorsque l’animation est cliquable, il peut être difficile de trouver
à quel endroit cliquer. Il faut aussi offrir un lien pour outrepasser
l’animation.

Cette page d’introduction n’indique pas où cliquer pour poursuivre la
visite.



22. Éviter l’utilisation des cadres et offrir une version HTML pour un site en
flash

Il y a plusieurs raisons qui motivent l’élimination des cadres. Parmi
celles-ci, on retrouve :

• Rend le défilement plus ardu
• Peut causer des problèmes d’impression
• Peut causer des problèmes avec les marque-pages
• Nuit au référencement
• Les visiteurs des moteurs de recherche peuvent être dirigés
sur une page incomplète
• Donne une impression désuète

Pour les sites en flash, il est recommandé de fournir une version en
HTML qui offrira une autre option aux utilisateurs en basse vitesse. Le
référencement du site en HTML sera également plus facile.
Il est difficile de naviguer dans ce site



23. Ajouter un favicone
EXPLICATION
BONNE PRATIQUE

L’ajout d’un favicone est une tactique simple qui permet d’identifier
plus facilement le site lorsque plusieurs fenêtres ou onglets sont
ouverts. On peut voir la présence d’un favicone dans trois endroits :

• La barre d’adresse Dans la barre d’adresse
• L’onglet du navigateur
• Les marque-pages

Cela permet au site d’être bien visible et d’attirer l’attention de Dans les onglets
l’utilisateur.

Dans les marque-pages



3.6. Gestion des erreurs

24. Attention à l’utilisation des « plug-ins »
EXPLICATION
BONNE PRATIQUE

Lorsque le site utilise un « plug-in » pour afficher du contenu, il faut
détecter si l’utilisateur possède l’outil et lui donner un message d’aide
en conséquence. Le message doit inclure un lien qui dirige vers
l’endroit où le « plug-in » est disponible. Si la détection est impossible,
un lien vers le téléchargement de l’outil doit être fourni.

Le site offre un lien de téléchargement pour l’outil de visionnement.

MAUVAISE PRATIQUE

Il est impossible de voir la vidéo sans le plug-in. On mentionne que le
site requiert flash, mais aucune aide n’est fournie pour le télécharger.



25. Avoir une page d’erreur 404 personnalisée
EXPLICATION
BONNE PRATIQUE

La page d’erreur personnalisée 404 a pour objectif d’aider l’utilisateur
qui arrive sur une page qui n’existe pas. Cela a pour effet de récupérer
du trafic qui autrement aurait été perdu. Une bonne page 404 peut
aussi :

• Offrir un message d’aide
• Offrir un lien vers la page d’accueil
• Donner accès à un moteur de recherche
• Rediriger vers la page d’accueil
• Mener vers le plan de site
• Suggérer des contenus populaires

MAUVAISE PRATIQUE



26. Gérer les erreurs possibles dans les formulaires
EXPLICATION
BONNE PRATIQUE

Les utilisateurs n’aiment pas remplir des formulaires, mais il n’est pas
possible de les éviter. Il faut donc les aider dans cette tâche. Pour ce
faire :

• Indiquer les champs obligatoires
• Mettre des messages d’erreurs clairs
• Donner des exemples de format pour remplir un champ
• Bien identifier à quel endroit il y a une erreur
• Valider les champs en temps réel
• Conserver l’information de l’utilisateur lors de la durée de la
session s’il change de page et revient

MAUVAISE PRATIQUE

Aucune indication des champs obligatoires n’est précisée.



27. S’assurer que le site est multiplateforme

Afin d’éviter de rendre votre site difficilement accessible pour une
partie de vos visiteurs potentiels, il est important de tester votre site
sous différentes versions de navigateur Web. Les problèmes peuvent
être d’ordre esthétique, voire même fonctionnel. Ces tests s’appliquent
également à toutes les nouvelles technologies introduites dans le site.

Problème d’affichage sous Firefox 2 qui peut rendre la navigation
difficile et qui n’est pas présent sous IE 7.



3.7. Conclusion & Remerciement

Nous espérons que vous avez apprécié la lecture de ce guide.

POUR EN SAVOIR PLUS DES QUESTIONS ?

Nous effectuons un travail continu de veille et de recherche des Si vous avez des commentaires (bons ou mauvais) ou des
meilleures pratiques sur Internet. Nous partageons le fruit de ce questions, vous pouvez communiquer avec nous à :
travail aux endroits suivant :
conseil@adviso.ca
Nos publications :
www.adviso.ca/-publications-d-adviso-.html
Notre blogue interne :
www.adviso.ca/blog/
Sur Branchez-Vous :
http://blogue.benefice-net.branchez-vous.com/


27 conseils pratiques en ergonomie Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a 27 conseils pratiques en ergonomie Web

Similar a 27 conseils pratiques en ergonomie Web (20)

Más de Adviso Stratégie Internet

Más de Adviso Stratégie Internet (20)

27 conseils pratiques en ergonomie Web