Novembre 2002Ergonomie1 Ergonomie du Web. Novembre 2002Ergonomie2 - du contenu à jour, qui se renouvelle régulièrement - des pages réservant un maximum

Ergonomie 1 Novembre 2002

Ergonomie du Web


- du contenu à jour, qui se renouvelle régulièrement

- des pages réservant un maximum de surface utile Réduire l'espace alloué aux éléments de navigation

Eviter l'abus de bandeaux de publicité dans chaque page

Eviter les écrans d'introduction (splash-screens) inutiles

- fiabilité

- sécurité

- respect des droits et libertés des internautes

Site utile


- Temps de transfert minimal La taille d'une page, avec les éléments associés (images...) doit être inférieure à 30Ko

Pour un téléchargement, l'accès à une grande image, prévenir l'utilisateur en donnant la taille, ou mieux une estimation du temps de transfert en fonction de son type de connexion

- Temps de réponse du serveur Prévoir un serveur assez puissant...

...et supportant la montée en charge

Site rapide (1)


- Vitesse de mise en page Toujours donner pour chaque image la taille avec les balises WIDTH et HEIGHT

Eviter des tableaux imbriqués avec trop de niveaux d'imbrication

Pensez au GIF entrelacé ou au JPEG progressif : les images s'affichent avant d'être complètement chargées

Site rapide (2)


- Evitez les animations GIF animés

Animations Flash

balise BLINK (clignotement de texte)

balise MARQUEE (défilement de texte)

- Eviter ce qui demande un plug-in Impose un probable téléchargement du plug-in

Problème potentiel de configuration sur le poste client

Site simple (1)


- Eviter la "high-tech" pour le plaisir Les applets Java

Javascript : attention aux problèmes de compatibilité

CSS : la page doit être lisible même pour un navigateur ne supportant pas CSS

La vidéo, le son

La 3D

- Eviter de faire "riche" Trop d'images, images trop grandes

Trop de couleurs

Pages surchargées

Site simple (2)


- Respect de l'apparence standard des liens Liens non-visités en bleus et liens visités en rouge

Réservez ces couleurs aux liens

liens toujours soulignés. Réservez le soulignement aux liens

Pas de liens qui se révèlent en tant que tels que si le curseur souris passe dessus

Respect du mode de navigation du web Eviter les fenêtres pop-ups

Ne changer pas le comportement du bouton "Retour" (Back) : on doit toujours revenir à la page d'avant

Identification du site (logo) en haut à gauche

Site familier


- Fonctionne quelque soit le type de navigateur (Microsoft, Netscape, Opéra...) et la version du navigateur

Une version met environ 2 ans à se répandre universellement

gérez au moins une version précédente (Ex. IE5 et IE4)

-Fonctionne quelque soit l'écran utilisé Résolution graphique

Nombre de couleurs

-Utilisable avec des navigateurs en mode texte Renseignez l'attribut ALT sur les images

Site universel (1)


–Pensez aux autres type d'accès Accès mobile : WAP, PDA...

Autres terminaux : WebTV, WebPhone

–Accessibilité pour les handicapés, particulièrement les malvoyants.

•Pensez à fournir une version imprimable des documents ou articles mis à disposition

Site universel (2)


- Utilisez un style direct, simple, concis Pas de style ampoulée, de phrase longue

Pas de blabla marketing

Utilisez les listes à points

–Mettre en évidence les points importants Mots importants en gras ou italique

Titres immédiatement compréhensibles en dehors du contexte

Démarrer un article par un résumé avec les conclusions (style pyramidal)

Les informations importantes doivent être en haut de la page

Site lisible (1)


-Polices et couleurs Choisir une police de caractères adaptée au Web (Verdana, Tahoma...)

Préférez les polices sans empattement

Choisissez des couleurs de texte et de fond donnant un bon contraste. Idéalement, noir sur fond blanc

Si la couleur de fond est plus sombre que la couleur de texte, mettre les caractères en gras

Proscrire les fonds avec des motifs graphiques qui gênent la lecture

PAS DE TEXTE EN MAJUSCULES, C'EST MOINS LISIBLE

–Défilement Limiter le défilement vertical

Proscrire le défilement horizontal

Site lisible (2)


D'autres sites créent des liens sur vos pages Evitez de changer les URL de vos documents

Chaque page doit identifier clairement votre site (présence systématique du logo avec la "tagline" (slogan) du site)

Les URL de vos documents doivent si possible être explicites, sans caractères spéciaux, pour faciliter la mémorisation et éviter les erreurs

Les internautes accèdent à votre site par les moteurs de recherche

Mettez des mots-clés sur vos pages (balise meta keywords)

Donnez des descriptions à vos pages (balise meta description)

Référencez votre site dans les moteurs

Site ouvert (1)


Votre site mène vers d'autres sites... Vérifier périodiquement que les liens restent valides

Des outils permettent de détecter automatiquement ces "liens morts"

Site ouvert (2)


Sur chaque page, indiquer à l'internaute où il est. Où il est dans le web : identification claire du site et de sa fonction

Où il est dans le site : indiquez la position de la page par rapport à l'arborescence principale

Sur chaque page, indiquer à l'internaute où il peut aller. Eléments de navigation par rapport à l'arborescence principale : sous-

rubriques, rubrique mère, rubriques "soeur"

Documents associés

Ne vous limitez pas à créer des "barres" de navigation et utilisez les hyper-liens dans les textes

Indiquez clairement les liens induisant un téléchargement

Signalez éventuellement les liens menant à un autre site

Site navigable (1)


Sur chaque page, indiquer à l'internaute où il a déjà été. Les liens sur les documents déjà parcourus doivent apparaître en rouge

Donnez à l'internaute un moteur de recherche et un plan du site. Nécessaires à partir de 100 pages

Site navigable (2)


Tests techniques Testez chaque fonction au travers de scénarios de tests pré-définis

Testez les temps de réponse en simulant des montées en charge

Testez avec plusieurs navigateurs, plusieurs OS, plusieurs machines, plusieurs écrans...

Tests d'ergonomie

Sélectionnez des utilisateurs-tests représentatifs

Observez-les utiliser le site, en résistant à la tentation de les "aider"

Prenez en compte leurs remarques

Site testé