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

Présentation au sujet: "Novembre 2002Ergonomie1 Ergonomie du Web. Novembre 2002Ergonomie2 - du contenu à jour, qui se renouvelle régulièrement - des pages réservant un maximum."— Transcription de la présentation:

1 Novembre 2002Ergonomie1 Ergonomie du Web

2 Novembre 2002Ergonomie2 - 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

3 Novembre 2002Ergonomie3 - 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)

4 Novembre 2002Ergonomie4 - 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)

5 Novembre 2002Ergonomie5 - 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)

6 Novembre 2002Ergonomie6 - 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)

7 Novembre 2002Ergonomie7 - 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

8 Novembre 2002Ergonomie8 - 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)

9 Novembre 2002Ergonomie9 –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)

10 Novembre 2002Ergonomie10 - 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)

11 Novembre 2002Ergonomie11 -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)

12 Novembre 2002Ergonomie12  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)

13 Novembre 2002Ergonomie13  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)

14 Novembre 2002Ergonomie14  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)

15 Novembre 2002Ergonomie15  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)

16 Novembre 2002Ergonomie16  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é