Centre recherche informatique de Montréal (2001)

Concepts sur la perspective ergonomique des sites web

• Une attention immédiate et continue aux utilisateurs (et à leur travail);
• Une conception intégrée (où tous les aspects de l’utilisabilité de l’interface sont
regroupés et évoluent en parallèle);
• Une évaluation immédiate et continue par les utilisateurs;
• Une conception itérative (où l’on modifie le système sur la base des résultats de
l’évaluation)

Règles et principes d’utilisabilité

l’architecture de l’information (la structure du site Web)
• chronologique (adaptée pour sites de formation, tutoriels, glosaires
• hiérarchique (la plupart des sites)
• base de données
• en réseau (beaucoup de liens hypertextes au qui renvoient à des pages au sein du
site)
o ne pas répéter un contenu dans plusieurs catégories
o les trois clics

la page d’accueil
Ses fonctions :
• menu
• news
• filtre (type d’utilisateur : profs, étudiants)
• couverture (comme un livre)
Règles :
• respecter la charte graphique
• utiliser des logos et éléments graphiques identifiables
• tout doit tenir dans un écran sans défiler

la présentation des pages (le texte, les images et les couleurs)

Règles :
• utiliser des feuilles de style
• utiliser une métaphore (caddie pour les sites de commerce)
• 4 polices grand maximum
• taille 12 pour du texte normal, 10 pour des mentions spéciales
• majuscule uniquement en début de phrase
• soulignement uniquement pour les liens
• couleurs utilisées pour associer ou dissocier des éléments
• 6 couleurs grand max
• ne pas utiliser de fond texturé
• mettre en page de la même manière toutes les pages
• mettre le logo en haut à gauche, la barre de navigation en haut ou à gauche
• les pages ne doivent pas défiler horizontalement
• aérer et aligner à gauche le texte
• indiquer avec mots-clés le contenu d’un éventuel pdf à télécharger
• une image doit pouvoir rentrer entière dans une page, sinon utiliser des vignettes
et des popups
 • signer la page
• contenu informationnel : entre 50 et 80 % de la page, contenu navigation, 20 %
(50 % pour la page d’accueil)

la navigation
Types de navigation :
• en largeur (le plus courant car affiche tout, mais embêtant pour architecture
complexe)
• en profondeur (pour sites hiérarchiques, mais plus difficile pour l’utilisateur de
situer la page consultée dans le site)
Règles :
• combiner les deux types de navigation
• indiquer le chemin parcouru
• griser le lien vers la page sur laquelle l’utilisateur se trouve déjà
• utiliser un bandeau de navigation cohérent
• aligner en haut à droite des éléments tels que plan du site ou recherche sous
forme d’un bandeau indépendant
• éviter les culs de sac
• signaler un contenu à venir plutôt que de mettre « page en construction »
• ne pas mettre ou limiter les bouton « retour », « précédent » ou « suivant »
• mettre un lien vers l’accueil sur toutes les pages
• titre des pages de 1 à 6 mots et 60 caractères max
• limiter les ancres
• utiliser le retour en haut de page, régulièrement dans la page si nécessaire
• appliquer un lien sur un mot explicite plutôt que sur l’url ou sur un « cliquez ici »
• attention aux images avec délimitations de zones pour les liens (pours les gogols
qui débutent avec la souris)
• éviter de changer les couleurs des liens, sinon choisir des couleurs bien distinctes
• le plan de site doit être accessible depuis toute les pages, surtout celle d’accueil

les animations et les effets multimédias (audio et vidéo)

Règles :
• limiter les effets de clignotement
• éviter de faire un site 100 % flash
• faire un descriptif de la vidéo si utilisation de vidéos

l’entrée de données (les formulaires)

Zappé car le site est consultatif

la performance et l’accessibilité
spécifier attributs largeur et hauteurs des images et des tableaux pour que le navigateur
interprète + rapidement ?
utiliser le slash à la fin d’une adresse pour accélérer le chargement
personnaliser le message 404
éviter le rouge+vert ou le rouge+bleu
utiliser gif pour logo, jpeg pour photos
attribuer titre aux images, au cas où elles manquent

le contenu et le soutien aux utilisateurs

/
Contrôles du respect des règles
Cf listes de contrôle dans le doc

Centre NTE (Suisse), 2004

Critères d’ergonomie
Accessibilité
• Multiplateforme
• Multi-résolutions
• Compatibilité des navigateurs
• Vitesse d’affichage
• Impression (print css)
• Déficience visuelle

Navigation
• Modes de navigation
• Zones de navigation (site ID, page name, summary, sections, local navigation)
• Menu
• Liens

Structuration de l’information
Homepage
• Objectifs du site
• Identité du site (logo, slogan, <title>)
• Page type
• Localisation de l’information

Lisibilité
• Feuille de style (CSS)
• Charte graphique (identité visuelle)
• Présentation de l’information
• Facteurs de nuisances
• Gestion de l’espace
• Qualité du contenu (orthographe, clarté, validité, fiche produit)
• Qualité des éléments multimédias
• URL

Systèmes d’aide / guidage / gestion des erreurs

• F.A.Q.
• Possibilité d’entrer en contact
• Indication des mises à jour
• Gestion des plug-ins
• Gestion de la page 404
• Gestion du moteur de recherche
• Etat de finition
• Gestion des formulaires

Personnalisation
• Profil : enregistrement / identification
• Respect des données personnelles
 • Choix des langues

Rugama, 2006
RAS