INGÉNIERIE MULTIMÉDIA PÉDAGOGIQUE Le 05/12/2002

Comment réaliser un site web de travail coopératif ? Support de Cours Enseignement à Distance Le 05/12/2002

EAD ou E-Commerce Nouveau Site Web Est-ce que l’on a pensé à tout ? Le 05/12/2002

Impressions Générales Qualité technique Innovant, Attrayant... Qualité technique Robustesse, Liens, Mise à Jour... Ergonomie Guidage, Manipulation, Design... Documents multimédias Documents sonores/vidéos Images didactiques... Interactivité Gestion des données Navigation... Activité de l ’utilisateur Outils pédagogiques Evaluation de l’apprenant Spécificités Commerce... J’utilise le guide interactif …. Le 05/12/2002

Premiers principes ergonomiques L'utilisateur ne doit jamais se retrouver "coincé" L'interface doit être explicite Une aide doit être fourni Valider clairement les actions de l'utilisateur Mettre en évidence les informations pertinentes sur l'écran sans surcharger Confier l'évolution du logiciel à l'utilisateur Donner toujours la possibilité de corriger ces erreurs Les écrans doivent présenter une certaine cohérence Le 05/12/2002

Les 7 règles d'or de Joëlle Coutaz Lutter pour la cohérence Lutter pour la concision Réduire la charge cognitive Contrôle entre les mains de l'utilisateur Souplesse Structurer le dialogue Prédire les erreurs Le 05/12/2002

Quelques Critères… Guidage : Ensemble des moyens mis en œuvre pour conseiller, orienter, informer et conduire l'utilisateur lors de ses interactions avec l'ordinateur. Incitation (1) Informations fournies à l'utilisateur sur l'état dans lequel il se trouve, actions possibles ou attendues et moyens de les mettre en œuvre. Groupement / distinction par la localisation (2) Positionnement des items les uns par rapport aux autres pour indiquer leur appartenance ou non à une même classe, ou en montrer la distinction. Groupement / distinction par le format (3) Indices graphiques des items les uns par rapports aux autres pour indiquer leur appartenance ou non à une même classe. Retour informatif (4) Réponses de la machine après actions de l'utilisateur ("Feed-back" immédiat.) Clarté (5) Caractéristiques lexicales de présentation des informations pouvant entraver ou faciliter la lecture de ces informations (Lisibilité) Formalisation de la tâche éducative en vue de la définition de critères pédagogiques : une tâche complexe en collaboration avec des pédagogues. Formalisation de l'interdépendance des différents critères sur le résultat global de l'évaluation. Implantation informatique : un outil se basant sur une base de questions : un questionnaire évolutif conseils et assistance à l'évaluateur : réduire au maximum les risques d'incompréhension transcription automatique des résultats : nécessité d'un formalisme permettant de prendre en compte l'interdépendance de certaines réponses comment utiliser les réponses aux questions ouvertes... Le 05/12/2002

Quelques Critères… (suite) Charge de travail : Ensemble des éléments ayant un rôle dans la réduction de la charge perceptive ou mnésique des utilisateurs et dans l'augmentation de l'efficacité du dialogue. Concision (6) Charge de travail perceptive et mnésique en rapport à des éléments individuels d'entrée/sortie. Actions minimales (7) Charge de travail au niveau des options ou moyens utilisés pour atteindre un but. Densité d'information (8) Charge de travail perceptive et mnésique pour des ensembles d'éléments et non pour des items. (Densité informationnelle) Le 05/12/2002

Quelques Critères (Fin) Contrôle explicite : Prise en compte par le système à la fois des actions explicites des utilisateurs et du contrôle qu'ils ont sur le traitement de leurs actions. Adaptabilité : Capacité du système à réagir selon le contexte, les besoins et les préférences de l'utilisateur. Gestion des erreurs : Moyens permettant d'éviter ou réduire les erreurs et les corriger. Homogénéité et cohérence (ou consistance) : Façon dont les choix de conception de l'IHM sont conservés pour des contextes identiques, et différents sinon. Signifiance des codes et dénominations : Adéquation entre l'objet ou l'information affichée ou demandée et son référent. Compatibilité… Le 05/12/2002

Premières recommandations Définition du public ! : niveau/âge, enfant/ado/adulte Définition de l'utilisation : quand ? où ? à la place de quoi ? mieux qu'un livre ? Prise en compte du contexte Définir les dimensions du produit : interface, assistance, scénarisation, adaptabilité, évaluation, suivi du cursus... Le 05/12/2002

A chaque catégorie ses implications Qualité de l'interface ludique, attractive... Assistance, guidage temps de réaction, temps d'apprentissage, équilibre des connaissances, autonomie... Scénarisation navigation, découpage pédagogique, adaptatif, multiplication des points de vue... Adaptabilité âge, niveau, calibrage, expérience... Evaluation niveau, adaptation aux performances... Suivi du cursus Reprise, notion de temps, historique... Le 05/12/2002

Listes de Critères J. Coutaz INRIA J. Vanderdonckt Incitation Groupement par localisation Groupement par le format Retour informatif Clarté Concision Actions minimales Densité d'information Actions explicites Contrôle utilisateur Flexibilité Expérience utilisateur Protection Qualité des messages Correction des erreurs Homogénéité Signifiance Compatibilité Cohérence Concision Charge de travail Contrôle Souplesse Structuration du dialogue Gestion des erreurs J. Vanderdonckt 8 critères principaux Un recueil de plus de 3000 règles Le 05/12/2002

Quelques Questions… Le 05/12/2002

Quelques Questions… Le 05/12/2002

Questionnaire unique Cinq modules complémentaires Prise en compte des impressions générales Le 05/12/2002

Evaluation globale Ergonomie Qualité Informatique Aspects Pédagogiques Médias Esthétiques Scénarisation Navigation Ludique Fiction Design Le 05/12/2002

Documents textuels Analyse des documents Problématique : Lisibilité et visibilité Domaines : Edition, études sur les combinaisons de couleurs, techniques de rédaction, … Proposition : Rédaction simplifiée, mise en page adaptée à la lecture sur écran, typographie harmonieuse, ... Le 05/12/2002

Documents visuels Analyse des documents Problématique : Iconicité et appétence Domaines : Sémantique de l’image, photographie, images didactiques (Moles), … Proposition : Analyse des images didactiques qui véhiculent un contenu, des illustrations qui renforcent les informations, du design graphique qui accompagne l’ensemble. Autre : Documents sonores Le 05/12/2002

Analyse de la Scénarisation Navigation Problématique : Délinéarisation et réappropriation Proposition : Structure complexe et structurée, des outils de gestion du temps et de l’espace de navigation Interactivité Faire agir l’utilisateur de façon effective et profitable Actions créatives, interactivité émotionnelle et possibilités de communication Personnalisation Information, paramétrage et adaptation Le 05/12/2002

Analyse de la Scénarisation Fiction Description : Récit, personnage et ambiance Proposition : Une fiction forte dans les didacticiels Avantages : Fil conducteur qui permet de structurer la lecture, implication, maintien de l’attention, décentrage, créativité (cas des hyperhistoires), ... Le 05/12/2002

Relations entre documents Indifférence Doc. 1 Doc. 2 Doc. 3 Redondance et complémentarité Doc. 1 Doc. 3 Doc. 2 Autre : Relations entre documents et scénarisation Le 05/12/2002

Impressions générales Origine : Expériences, corpus, théorie de la perception visuelle (Gibson), sémantique de l’image, … Caractéristiques : Instinctives, descriptibles, homogènes, persistantes. Proposition : Une caractérisation plutôt qu’une évaluation, des critères neutres et généraux. Le 05/12/2002

Applications Multimédia Quelques approches Plusieurs supports d’information Hypertexte Nouvelles technologies compression, video, son, photos, graphisme Integration Ergonomie des IHM Cerner les utilisateurs potentiels formation, vente, jeux, information, culture Le 05/12/2002

Les protagonistes l’éditeur les auteurs la distribution interactivité, IHM son dessins, photos, videos multilinguisation programmation la distribution Le 05/12/2002

Les Intervenants Chef de Projet Graphiste Documentaliste Gestionnaire Informaticien Scénariste Graphiste Documentaliste Spécialiste Audi-Vidéo Caméraman Photographe Musicien Le 05/12/2002

Approche économique Le BP : Business Plan Précise le fond de roulement nécessaire Oblige à justifier les hypothèses de prix du produit Identifie le CA récurrent Hypothèses de versions successives Le ROI : Retour sur Investissement Indispensable si on doit faire appel à du capital-risque Le 05/12/2002

Coût de Conception Conception 150 KF Acquisition des éléments 350 KF Réalisation 200 KF Design d’interactivité 150 KF Design Graphique 150 KF Son 150 KF Intégration Informatique 200 KF Frais d’édition divers 100 KF TOTAL 1 500 KF Le 05/12/2002

Coût de distibution Pris de vente 210,00 F Marge revendeur 60,00 F Distribution 50,00 F Prix de cession éditeur 100,00 F Duplication et Packaging 12,50 F Droits d’auteurs 12,50 F Commission d’édition 25,00 F Recettes nettes producteurs 50,00 F PRIX DE REVIENT UNITAIRE 520,00 F Le 05/12/2002

Les 6 Étapes du projet Etude du projet Développement Evaluation Cahier des charges, Propositions, maquette Développement Conception, Réalisation, Intégration Evaluation Prototype, Tests, Validation Pré-Production : Conception du Packaging Production : Pressage et emballage Post-Production : Distribution Le 05/12/2002

Mise en œuvre Des scénettes QQOQC Maquette de structures d’écrans Qui fait Quoi, Où, Quand, Comment ? Maquette de structures d’écrans Scénario ou règle de jeu Que se passe-t-il si je fais … Penser à la dynamique (sinon => livre) Présentation de l’information à l’initiative du lecteur Le 05/12/2002

Les Spécifications Spécifications formelles On décrit les fonctions indépendamment des techniques employées (si possible) Principe d’une spécification Communication entre concepteurs et réalisateurs Mises à jour cohérentes du contenu Identification des éléments de base et leurs relations textes, videos, graphiques, photos, sons … Le 05/12/2002

Modalités de mise à jour Périodicité des mises à jour causes de la m.à.j. : obsolescence des données, politique de versions mise à jour des plate-formes de diffusion Période : choix des dates de lancement Volume et coût de la collecte en saisie en transformation en localisation Le 05/12/2002

Plate-formes de diffusion Configuration cible Puissance de l’UC Mémoire Disque Vitesse du lecteur de CD-Rom Système d’exploitation Ecran Choix des normes de codage Le 05/12/2002

Bases de la Conception en Couleur

La Roue Chromatique Le 05/12/2002

La Roue Chromatique bis Cyan Magenta Jaune Le 05/12/2002

Utilisation de la roue (1) Couleurs en vis à vis Couleurs complémentaires éblouit et trouble la vue Ne pas utiliser côte à côte sauf si effet recherché Figure 1 Le 05/12/2002

Utilisation de la roue (2) Couleurs adjacentes se marient effet agréable pas pour les longs textes difficile à lire ex : texte vert sur fond jaune Figure 2 Le 05/12/2002

Utilisation de la roue (3) Couleurs opposées séparées de la roue par 2 ou 3 couleurs effet audacieux et vif Figure 3 Le 05/12/2002

Exemples Le 05/12/2002

Caractères en couleur Attention au contraste Facteur de lisibilité important Le 05/12/2002

Utilisation de la couleur Associer objets ou idées similaires Exemple : plan du jardin plantes de même type => même couleur Le 05/12/2002

Analogies Figure 1 Figure 2 Figure 3 tragédie plus que comédie nature message d’avertissement ou d’urgence Le 05/12/2002

Sémantique des couleurs Rouge danger, pertes financières, révolution Blanc = pureté Vert fertilité, nature, poison, corruption, environnement Jaune soleil, prévoyance, or, opulence, luxe Noir danger, peur, deuil Le 05/12/2002

Couleurs chaudes Rouge, jaune, orange, roux, doré Chaleur, énergie, enthousiasme, confort, entrain, convivialité exemples : affiche d’un festival concert de musique folklorique goûter d’anniversaire Le 05/12/2002

Couleurs froides bleu, vert, gris, lavande froides et claires calme, propreté, fraîcheur, pureté, naturel froides et sombres sérieux, dignité, force, honnêteté, conventionnalisme Exemples : rapport financier publicité pour eau minérale Le 05/12/2002

Quelques informations Couleurs claires et vives parties du document porteuses de messages teintes plus délicates pour le fond Si une seule couleur : prendre rouge Pas trop de couleurs La même couleur pour les éléments répétitifs Le 05/12/2002