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

Slides:



Advertisements
Présentations similaires
Pré AO - PAO Pré AO Présentation assistée par ordinateur PAO
Advertisements

Copyright ©: SAMSUNG & Samsung Hope for Youth. All rights reserved Tutorials Logiciels : Navigateurs Internet Niveau : Débutant Intermédiaire.
1Er Partie Intervenants : Nuno Barata Alain Joly Thierry Belvigne
Conception de Site Webs Interactifs Cours 3
Gérer un site avec Kompozer
Ergonomie d’un site internet
Les étapes de conception d’un site web
Etude De Microsoft Word
La page daccueil Analyse et principes de conception.
L'architecture d'un site Toile : L'architecture d'un site Toile : Quelles informations pour Quel public ? Deux questions très importantes sont à poser.
PowerPoint : Comment créer son propre diaporama ?
Formulaire HTML Introduction. Définition de formulaire.
La fonction Style Permet de créer des types de texte, par exemple
ALLUMER L’ORDI 1 Appuyer sur le bouton du disque dur
Newsletter Bonnes pratiques.
ma date et mon pied de page (titre présentation)
PRÉSENTATION Logiciel de traitement de texte:
PROJET DATELIEU 20 MARS 2012LCP SALLE B105 création du site internet avec Weebly.
~ Les bonnes pratiques ~
Prologue : les premiers préparatifs Première étape : Ouvrir le logiciel de création de pages au format HTML (pages Web) Deuxième étape : enregistrer la.
Concevoir un diaporama avec Power Point.
Comment réussir son diaporama
Recommandations ergonomiques pour la création de présentations Powerpoint Claude Bourlès.
2b. Mise en forme de document
Le menu « Actualités » © Michel DURIEUX – Février 2007.
ERGONOMIE COGNITIVE DES SYSTEMES D’INFORMATION HYPERMEDIA
Présentation de NAVIGATEURS INTERNET
Règles & conseils de base en PreAO
Comment réaliser une mise en page ?. Tracer une zone de texte.
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Netscape Présentation par : Aleksandra Krul et Aurélia Marcus Jeudi 31/
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
Formation TYPO3 Lecture par « rôle » janvier 2010.
Cours 268 R. PEETERS 96-97page 1 Conseils et astuces de conception n Utilisez une seule police. – Lorsqu'un trop grand nombre de polices sont associées,
MONTRÉAL, October , 2014 Cliquez pour ajouter le titre de la présentation.
Quelques réflexions pour l'élaboration d'un diaporama
Le langage XHTML 420-S4W-GG Programmation Web Client
Les présentations assistées par ordinateur (préAO)
Pour une présentation orale
Un site sous SPIP Un nouveau système de publication sur le net Collège Charles Rieu A.T.I. Pélofi Stéphane.
LANGAGE HTML Le HTML (Hyper Text Markup Langage) est un langage universel utilisé sur le World Wide Web. Le HTML permet de : * Publier des documents sur.
Les guides de formation Conception de pages web. Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3.
Présente Conception d’un petit site Web. 2 4-nov-03© Préambule Cette présentation fait suite à celle intitulée « Imaginer, concevoir, mettre.
Ce document présente la nouvelle charte graphique à utiliser dorénavant pour toutes vos présentations. La police utilisée est l’Arial. Il est important.
L’ergonomie des IHM : pourquoi, comment ?
Guide de référence rapide sur © 2012 Microsoft Corporation. Tous droits réservés. Lync Web App Participer à une réunion Lync avec le système audio de votre.
POWERPOINT.
INTERNET Le langage HTML
PRESENTATION SUR POWERPOINT
1 Tutoriel SPIP Rédacteur. 2 Sommaire Connexion Interface SPIP Menu SPIP Rédiger un article Interface de création d’un article Fonctionnalités de base.
Cours 3 21 janvier 2010 Quelques principes d’ergonomie de l’écran et du contenu de la page web Cours 3 21 janvier 2010 Quelques principes d’ergonomie de.
Contribution CMS.Eolas
Une présentation ppt(x) idéale
Conception des pages Web avec
Accessibilité web Gérer l’accessibilité lors de la création d’un site ORT Lyon - 10/02/2014.
HTML Rappels des fondamentaux
Document réalisé par le Service Communication
Document réalisé par le Service Communication
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Guillaume MICHAUD – Yvan LECOMTE
Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.
Dreamweaver le retour Avec Les Formulaires Les Calques
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
Réussir un diaporama S. Pignon –
Transcription de la présentation:

Novembre 2002Ergonomie1 Ergonomie du Web

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

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)

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)

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)

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)

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

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)

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)

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)

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)

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)

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)

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)

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)

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é