CollectiWeb(R) - Fiche pédagogique - Version texte Design et ergonomie d'un site Web --------------------------------- Durée : 3 jours. Publics : chefs de projets (MOA/MOE(1)), concepteurs, web designers, webmasters. Objectifs pédagogiques : * identifier les enjeux liés au webdesign et les spécificités de l'environnement Web ; * connaître les règles d'ergonomie et de design favorisant l'utilisabilité et l'accessibilité d'une interface Web. Prérequis : connaissance générale des concepts, des services et de la terminologie de l'Internet ; pratique du navigateur. Méthodes pédagogiques : alternance d'apports théoriques et d'exercices. La formation laisse une large part aux exemples en ligne et aux exercices pratiques (analyse de sites existants) permettant ainsi aux participants de s'approprier de façon progressive les différents contenus du stage. L'animateur privilégie l'analyse des sites conçus/animés par les participants lorsque ces sites sont accessibles en ligne. Supports pédagogiques : un support est remis à chacun des participants au début de la formation. Ce support est conçu pour permettre la prise de notes par les stagiaires. Il est complété par différents outils pratiques (checklists et grilles d'analyse) et une bibliographie/webographie. Le support est initialement fourni par CollectiWeb sous la forme d'un fichier Acrobat PDF. Les travaux de reprographie sont pris en charge par l'entreprise cliente (formation intra entreprise) ou par l'organisme dispensateur de la formation (formations intra ou inter entreprises). Logistique de formation : la formation est animée dans une salle mise à disposition par l'entreprise cliente (formation intra entreprise) ou par l'organisme dispensateur de la formation (formations intra ou inter entreprises). Cette salle doit comporter les équipements suivants : * pour les participants : 1 micro-ordinateur par participant (connexion Internet et navigateur) ; * pour l'animateur : 1 micro-ordinateur (Microsoft PowerPoint, connexion Internet et navigateur) ; 1 vidéoprojecteur et 1 écran. Le micro-ordinateur peut être apporté par notre animateur ; il est dans ce cas nécessaire de lui communiquer les paramètres de connexion au réseau, au démarrage de la formation. Contenus détaillés ------------------ Design : concepts et enjeux * Design : définition * Ergonomie et utilisabilité * Les facteurs de satisfaction et de fidélisation * Les enjeux liés au design d'un site Les spécificités du Web : 4 facteurs à prendre en compte * Un environnement technique non contrôlé par le concepteur * Un public large : des usages diversifiés * Une "concurrence" permanente... * Un nouveau média... * Les spécificités des sites intranet et extranet Structure du site et architecture de l'information * Les différents types de contenus * L'organisation des contenus * Les schémas d'organisation * La structure/l'arborescence du site * Les libellés * Démarche projet et méthodes * Recommandations concernant la structure du site La page d'accueil * Le rôle de la page d'accueil * Recommandations concernant la page d'accueil Le système de navigation * Les différents modes d'accès à l'information * Les 3 questions fondamentales * Le système de navigation * Recommandations concernant le système de navigation Les liens hypertextes * Liens hypertextes : fonctions et caractéristiques * Le caractère explicite des liens * La signalétique des liens * Le positionnement et la pertinence des liens * Recommandations concernant les liens hypertextes Les fonctions de recherche et les aides à la navigation * Le système de recherche * La recherche en texte intégral * La recherche sur des contenus structurés * Le plan du site et l'index du site * Les FAQ(2) et les pages d'aide * Recommandations concernant les fonctions de recherche et les aides à la navigation Mise en page, couleurs et typographie * Les composantes de la page * L'organisation visuelle de la page * La largeur des pages * La longueur des pages * Les rapports texte/image * La perception des couleurs * L'utilisation des couleurs * Les contrastes * La typographie * La constance * L'impression des pages * Recommandations concernant la mise en page, les couleurs et la typographie Les éléments graphiques et multimédias * L'utilisation des éléments graphiques * Les formats d'images * L'utilisation des éléments multimédias * Les formats multimédias * Les animations * L'iconographie * Recommandations concernant les éléments graphiques et multimédias La conception des formulaires * Les 5 composants d'un formulaire Web * Les principaux problèmes rencontrés * Recommandations pour la conception des formulaires Le temps de chargement des pages * Une cause primaire de satisfaction/d'insatisfaction * Les facteurs qui influent sur le temps de chargement Le respect des standards * Les standards de navigation * Les standards de facto * Les standards techniques L'accessibilité du site * Définition de l'accessibilité * Le handicap en France * Les WCAG(3) un standard international * Au-delà du handicap... Design et référencement * Les bonnes pratiques selon Google * Le modèle documentaire Utilisabilité 2.0 *Interfaces "riches" et développements Ajax(4) *Les contraintes spécifiques à prendre en compte Évaluation et tests de l'interface * Que teste-t-on ? * Quand teste-t-on ? * L'évaluation heuristique * Les principes heuristiques * Les tests utilisateurs (1) MOA : maîtrise d'ouvrage / MOE : maîtrise d'oeuvre. (2) FAQ : Frequently Asked Questions, foire aux questions (3) WCAG : Web Content Accessibility Guidelines, Directives pour l'accessibilité des contenus Web (4) Ajax : Asynchronous JavaScript and XML Adresse de ce document : http://www.collectiweb.fr/documents/fiche-pedagogique-design-et-ergonomie-d-un-site-web.txt Version PDF de ce document : http://www.collectiweb.fr/documents/fiche-pedagogique-design-et-ergonomie-d-un-site-web.pdf Pages concernées : * http://www.collectiweb.fr/formations.php * http://www.webaccessibilite.fr/formations-accessibilite-utilisabilite.php (C) 2009 CollectiWeb(R) - Dernière mise à jour le 10/07/09 Conditions d'utilisation : http://www.collectiweb.fr/informations-editeur.php Patrice Bourlon Cour Damoye 12 place de la Bastille 75011 - Paris Tél. : +33 1 42 74 39 42 Fax : +33 1 48 04 06 54 Sites Web : http://www.collectiweb.fr - http://www.webaccessibilite.fr Siret : 420 894 214 00022 - NAF : 741G Organisme de formation 11 75 31185 75 Exonération de TVA