cours Web design, Master Arts et Création Numérique, UVHC, 2010

1. 12 règles pour optimiser
l'ergonomie de votre site
Chapitre 05 - Les bases et critères de l'ergonomie web
» Règle n°1. Architecture : le site est bien rangé
» Règle n°2. Organisation visuelle : la page est bien rangée
» Règle n°3. Cohérence : le site capitalise sur l’apprentissage interne
» Règle n°4. Conventions : le site capitalise sur l’apprentissage externe
» Règle n°5. Information : le site informe l’internaute et lui répond
» Règle n°6. Compréhension : les mots et symboles sont choisis minutieusement
» Règle n°7. Assistance : le site aide et dirige l’internaute
» Règle n°8. Gestion des erreurs : le site prévoit que l’internaute se trompe
» Règle n°9. Rapidité : l’internaute ne perd pas son temps
» Règle n°10. Liberté : c’est l’internaute qui commande
» Règle n°11. Accessibilité : un site facile d’accès pour tous
» Règle n°12. Satisfaire votre internaute
» En bref : 12 règles à utiliser à bon escient
http://www.ergonomie-sites-web.com/

2. Règle 2
Organisation visuelle :
la page est bien rangée
Libérer l’esprit de votre internaute, en
limitant la charge mentale liée au
traitement de ce qu’il voit à l’écran

3. Rappels sur le système visuel
Les photorécepteurs de la rétine captent les longueurs d'ondes et
les transforment en influx nerveux, qui via le nerf optique sera
traité par le thalamus, puis par le cortex.
Où ?
Quoi ?
- voie dorsale (lobe pariétal) responsable de la discrimination spatiale :
localisation et mouvement
- voie ventrale (lobe temporal) opère à la discrimination d'objets : dirige vers
les zones du langage

4. Recommandations à suivre :
● Éviter le trop-plein d’informations
● Diviser la quantité de mots par deux
● N'afficher que les principaux éléments de navigation et
d'interaction
● Afficher les éléments optionnels seulement si nécessaire
● Supprimer les éléments d'interaction inutiles
● N'afficher que les éléments d'interaction les plus utiles
● Différencier les quantités d'information réelles et perçues
● L'hétérogénéité visuelle augmente la charge informationnelle
● Les images de fond augmentent la charge informationnelle
● Les animations augmentent la charge informationnelle

5. 1 - Éviter le trop-plein d’informations
Supprimer l'information inutile
bruit visuel : tout élément
graphique qui ne transmet pas
d'information, surcharge la
présentation, ou entre en
compétition avec l'information.
Il est évident qu'il vaut mieux se
passer de ce genre de nuisance
sur une page web.

6. 2 - Diviser la quantité de mots par deux
● Conseil récurrent, constat empirique
● Valable pour les pages navigantes non pour les pages de
contenu
● Tout particulièrement pour les éléments de navigation
(barre, menu)

7. Trois types de lecture
selon le contexte d'utilisation, l'expertise de l'internaute
● Repérage : survol
● Balayage : survol + synthèse, « scan visuel »
● Lecture en profondeur : décortication, « mot à mot »
J. Nielsen → grands principes pour l'écriture Web
* concision : nous lisons 25 % plus lentement à l'écran.
* balayabilité : quand nous lisons, nous "scannons", nous lisons « en diagonale »
79 % balaient les textes.
16% lisent mot à mot tout le contenu qui leur est présenté.
* morcellement des pages : les internautes n'utilisent pas systématiquement
l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement
des informations importantes en haut de la page.

8. ● On peut supprimer texte Cliquez
sur les puces rouges pour faire
apparaître les caractéristiques
détaillées du centre de votre choix
ou pour obtenir un plan d’accès
●
Composition : difficulté à trouver
stabilité horizontale
●
Site actuel :
http://www.unepieceenplus.com/
●
page d'accueil enrichie
●
grille 3 colonnes

9. 3 - Différencier les quantités
d'information réelles et perçues
La quantité d’informations seule ne peut suffire à définir la charge
Informationnelle de votre site. Cette dernière peut paraître plus
Importante pour l’internaute en fonction des animations,
images de fond et de l’hétérogénéité visuelle. (p102)
● Hétérogénéité : plus il y a de typographies et de couleurs
différentes plus la charge informationnelle de la page augmente
alors que la quantité d'informations calculée en pixels ne change pas
● Théorie du traitement de l'information :
la charge cognitive

10. Approche STI – Système de traitement
de l'information

11. ● Confort visuel : combinaison de sensation et d'information
éblouissement gênant : perte de lisibilité
éblouissement inconfortable : gêne visuelle, fatigue

12. ● Les images de fond augmentent la charge
informationnelle
Les éléments de navigation primordiaux sont presque invisibles : Genre, Recherche,
Catalogue (au centre)

14. La lisibilité
Optimiser deux aspects :
● legibility pour désigner la lisibilité matérielle, visuelle d'un texte. On
réfère donc au niveau perceptif
●readability pour désigner la lisibilité cognitive, la façon dont un texte
peut être intégré au niveau cognitif et compris par l'utilisateur.
Quelques recommandations
● mettre en valeur les informations importantes, les mots-clés : utiliser des
enrichissements typographiques, gras ou l'italique (moins lisible qu'un style
classique)
● jouer sur les tailles de caractères
● bien distinguer les mots-clés des liens (ne pas utiliser le même format)

15. ● Ecrire en minuscules plutôt qu'en majuscules
(les mots écrits en lettres minuscules sont plus faciles à
lire que ceux écrits en lettres capitales). On peut
toutefois se permettre d'écrire en majuscules pour des
informations brèves (intitulé d'un bouton, titre de page,
titre de rubrique, etc.).
● Contre-exemple http://www.gaite-lyrique.net/ Cf diapo suivante
● Séparer le texte en parties significatives, leur attribuer des titres et sous-
titres, fournir un sommaire pour les longs textes
Catégoriser les informations et faire ressortir cette catégorisation, soit par
la localisation physique des éléments (on sépare ce qui ne se ressemble
pas), soit par le format (on présente dans un format différent les éléments
qui sont différents), soit par la couleur
● Employer la voix active, rédigez le plus possible au présent de
l'indicatif
Des lignes de texte ni trop longues ni trop courtes, environ 80 caractères

17. Le droit d'écrire long
● Dès que le contenu recherché est identifié, le processus de lecture n'est
plus de type "scan" et le parcours oculaire revient à la normale. 75% du
texte est alors lu et non parcouru. ( Fournir un format imprimable )
● Découper le texte en plusieurs pages ? discutable
● a priori, il est plus facile de lire des pages courtes, sans avoir besoin de
scroller pour lire la suite d'un texte. Cependant, la nature même du web fait
que le découpage d'un texte en plusieurs pages nécessite le chargement
successif de ces pages. Cette façon de présenter l'information nuit à une
lecture continue du texte, puisque normalement, l'oeil passe
inconsciemment d'une ligne à l'autre de manière non séquentielle.
● de plus, la lecture est une activité cognitive très contextuelle. On a
souvent besoin de "remonter" de quelques paragraphes pour comprendre
ce que nous sommes en train de lire. En effet, on ne lit pas des mots isolés,
mais on met en relation les mots et phrases les uns avec les autres.

18. Couleurs
● Cf. Pdf Cédric Dumas
● tester contraste de couleur selon déficience
http://www.vischeck.com/vischeck/vischeckURL.php
● tester palette de couleur de votre page
http://www.checkmycolours.com/
● générer une palette de couleur à partir photo
http://bighugelabs.com/colors.php

19. Page d'accueil : Tout se joue en 50 ms !
● Mettre un minimum de contenu textuel : 2 ou 3 § (indexation et
positionnement correct)
● Evitez le logo occupant une grande partie de la page sans autre
commentaire
● Proposer un outil de recherche
● Des liens utiles : plan, contact - adresse, choix de langue, annonce,
actualités, nouveauté
● Permettez l'interruption de l'animation d'intro.
● La page d'accueil doit être appréhendée d'emblée, d'un seul coup
d'œil : pas d'ascenseur

20. ● scinder en plusieurs ensembles les menus trop longs (supérieur à 10
rubriques, MCT : Miller 7+/- 2 items)
● les informations les plus importantes qui sont contenues dans le site
doivent pouvoir être accessibles rapidement en deux ou trois
étapes maximum.
● pas trop « dense » (page tunnel à éviter).
● Les liens vers " Quoi de neuf ? ", " News", " Nouveautés" sont
insuffisants.
● date de création, ainsi que la date de mise à jour et
éventuellement la périodicité
● Attention au message "page en construction" (discrédit du site).
Quand la date de mise à disposition est connue, précisez-la et
respectez la.
● URL courtes, faciles à retenir (moins de 10,12 lettres, pas de tirets)

21. La mise en page
● Le titre > attractif, court : 4 à 10 mots
> informatif/explicite
> contenant les mots clés
> visible - central - en gros caractère
● Les sous-titres
Ils ressortent lorsqu'ils sont composés dans une police de
caractère différente de celle du texte, s'ils sont composés en
caractères gras ou italiques.
Les sous-titres peuvent être centrés, alignés à gauche ou alignés à
droite

22. ● Les légendes
Les titres et les légendes sont souvent les seuls éléments lus dans
un document. Utilisez les légendes pour résumer les points
importants du texte.
La largeur de la légende doit être établie en fonction de la largeur
de l'illustration
Les sous-titres, les légendes les en-têtes accélèrent le temps
de lecture
● Le pied de page de chaque page-écran doit contenir :
> la barre de navigation,
> le nom de l'auteur;
> l' adresse d'un contact ( e-mail),
> l' identification de l'organisme,
> la date de mise à jour

23. Macrotypographie
Cf le pdf en ligne