story-board
les seuls TP réalisables dans le contexte de l'ESSI étaient des TD théoriques et
... sont les ordinateurs, la program-mation, le réseau, Internet, le multimédia, les
IHM. ... utilisés (présentations de cours, travaux dirigés, questionnaires, corrigés).
part of the document
2
HYPERLINK \l "_Toc40610354" 3.2. Modifications importantes PAGEREF _Toc40610354 \h 2
HYPERLINK \l "_Toc40610355" 4. Analyse de lIHM en fonction du public visé PAGEREF _Toc40610355 \h 2
HYPERLINK \l "_Toc40610356" 5. Présentation des théories utilisées pour les modèles PAGEREF _Toc40610356 \h 2
HYPERLINK \l "_Toc40610357" 5.1. Approche traditionnelle de lenseignement PAGEREF _Toc40610357 \h 2
HYPERLINK \l "_Toc40610358" 5.2. Approche constructiviste de lenseignement PAGEREF _Toc40610358 \h 2
HYPERLINK \l "_Toc40610359" 5.3. Approche socio-constructiviste de lenseignement PAGEREF _Toc40610359 \h 2
HYPERLINK \l "_Toc40610360" 5.4. Approche psycho-culturelle (vygotskienne) de lenseignement PAGEREF _Toc40610360 \h 2
HYPERLINK \l "_Toc40610361" 6. Structures des modèles de site prédéfinis PAGEREF _Toc40610361 \h 2
HYPERLINK \l "_Toc40610362" 6.1. Menu en haut, sous-menu à gauche PAGEREF _Toc40610362 \h 2
HYPERLINK \l "_Toc40610363" 6.2. Menu en haut, sous-menu déroulant PAGEREF _Toc40610363 \h 2
HYPERLINK \l "_Toc40610364" 6.3. Menu en haut, sous-menu par onglets PAGEREF _Toc40610364 \h 2
HYPERLINK \l "_Toc40610365" 6.4. Menu en haut, sous-menu dans une page PAGEREF _Toc40610365 \h 2
HYPERLINK \l "_Toc40610366" 6.5. Menu à gauche, sous-menu dans une page PAGEREF _Toc40610366 \h 2
HYPERLINK \l "_Toc40610367" 6.6. Menu et sous-menu à gauche PAGEREF _Toc40610367 \h 2
HYPERLINK \l "_Toc40610368" 7. Scénario dinteractivité des modèles (story-board) PAGEREF _Toc40610368 \h 2
HYPERLINK \l "_Toc40610369" 7.1. Scénario de sciences expérimentales, travaux pratiques en groupe PAGEREF _Toc40610369 \h 2
HYPERLINK \l "_Toc40610370" Scénario PAGEREF _Toc40610370 \h 2
HYPERLINK \l "_Toc40610371" Structure PAGEREF _Toc40610371 \h 2
HYPERLINK \l "_Toc40610372" 7.2. Scénario de sciences expérimentales, cours et travaux dirigés PAGEREF _Toc40610372 \h 2
HYPERLINK \l "_Toc40610373" Scénario PAGEREF _Toc40610373 \h 2
HYPERLINK \l "_Toc40610374" Structure PAGEREF _Toc40610374 \h 2
HYPERLINK \l "_Toc40610375" 8. Scénario dinteractivité du questionnaire (story-board) PAGEREF _Toc40610375 \h 2
HYPERLINK \l "_Toc40610376" 8.1 Scénario dinteractivité PAGEREF _Toc40610376 \h 2
HYPERLINK \l "_Toc40610377" 8.2 Principe de fonctionnement PAGEREF _Toc40610377 \h 2
HYPERLINK \l "_Toc40610378" 9. Etude des médias utilisés PAGEREF _Toc40610378 \h 2
HYPERLINK \l "_Toc40610379" 9.1. Les médias PAGEREF _Toc40610379 \h 2
HYPERLINK \l "_Toc40610380" 9.2. La bibliothèque de modèles prédéfinis PAGEREF _Toc40610380 \h 2
HYPERLINK \l "_Toc40610381" 10. Etude iconographique PAGEREF _Toc40610381 \h 2
HYPERLINK \l "_Toc40610382" 11. Charte graphique PAGEREF _Toc40610382 \h 2
HYPERLINK \l "_Toc40610383" 11.1. Le site CEPIAH PAGEREF _Toc40610383 \h 2
HYPERLINK \l "_Toc40610384" 11.2. Le questionnaire des modèles PAGEREF _Toc40610384 \h 2
HYPERLINK \l "_Toc40610385" 11.3. Les sites web proposés PAGEREF _Toc40610385 \h 2
HYPERLINK \l "_Toc40610386" 12. Jeu dessai hypothétique PAGEREF _Toc40610386 \h 2
HYPERLINK \l "_Toc40610387" Conclusion PAGEREF _Toc40610387 \h 2
Introduction
Ce rapport présente lanalyse ergonomique et le story-board du projet de création de modèles prédéfinis pour le site CEPIAH.
Lanalyse ergonomique et le story-board sont les dernières étapes de conception du site avant la réalisation proprement dite. Cette analyse est létape suivant la rédaction du cahier des charges.
Dans une première partie, le projet sera brièvement résumé, puis les principaux éléments du cahier des charges seront rappelés et mis à jour et lIHM sera alors analysée en tenant compte du public visé. Ensuite seront présentées les théories sur lesquelles sont basés les modèles. Dans la partie suivante, les structures retenues pour les modèles seront développées, puis les scénarios dinteractivité de deux modèles et du questionnaire seront présentés. Enfin nous procéderons à une étude des médias utilisés, des icônes et de la charte graphique.
Précisions
Lanalyse ergonomique et le story-board présentés ici ont été réalisés sur la base de documents concernant les scénarios pédagogiques et le questionnaire réalisés par E. Giacomini.
1. Présentation générale du projet sur les modèles prédéfinis
Notre travail sinscrit dans le projet CEPIAH, dont lobjectif est la conception et la réalisation des outils daide pour les concepteurs de sites Web éducatifs.
Dans le cadre de ce projet, nous avons choisi de travailler sur les modèles prédéfinis afin de compléter la liste de modèles existant en ajoutant une catégorie pédagogique. Cette catégorie devra prendre en compte les théories de lenseignement et de lapprentissage.
Dautre part, on peut remarquer que les modèles déjà existant dans la catégorie débutants et intermédiaires présentent quelques éléments pédagogiques. En effet, nous avons remarqué que tous les modèles présents appartiennent à la catégorie de lenseignement traditionnel. Car, dans tous les modèles proposés lenseignant met à la disposition des étudiants des cours, des travaux dirigés à venir, les prochaines séances de travaux pratiques et quelques informations relatives à lUV telles que la date des examens et dautres informations utiles.
De plus, ces modèles ont une structure de navigation assez classiques que lon retrouvera dans nos futurs modèles :
une navigation par bandeau à gauche :
une navigation par bandeau en haut :
une navigation par bandeau à gauche et en haut :
une navigation par onglet :
En ce qui concerne l IHM, il y a surtout deux types de boutons qui sont employés dans ces modèles :
des boutons textuels
des liens hyper-textuels
Ces modèles sinscrivent dans lapproche traditionnelle de lenseignement mais aucun deux ne tient compte des autres approches de lenseignement ce à quoi nous allons remédier à laide des différents modèles de scénario pédagogique que nous allons implémenter.
2. Rappel du cahier des charges
Dans le précédent rapport, nous avions défini les grandes lignes directrices de notre projet. Cette partie rappelle et résume les éléments principaux du cahier des charges.
2.1. Analyse des besoins
Lors de notre analyse, nous avons jugé nécessaire dintégrer les théories de lenseignement et de lapprentissage dans des modèles prédéfinis des supports interactifs de cours sur le Web, en classant et en structurant ces modèles selon une liste de critères à définir. De plus, lutilisation dun questionnaire de sélection de modèles permettrait de mettre en uvre ces théories sans que lutilisateur en ait connaissance.
2.2. Objectifs
Lobjectif de notre projet est de permettre aux enseignants de concevoir simplement des sites Web pédagogiques. Lassistance du site consistera à proposer des modèles conformes aux théories de lenseignement et de lapprentissage, aux domaines dapplication, aux activités pédagogiques ainsi quaux éléments de design graphique.
Les objectifs sont donc doubles : une partie du projet vise les enseignants pour la génération de site, et une deuxième partie vise plus particulièrement les étudiants pour qui les modèles sont destinés.
2.3. Public visé
Le projet se décompose en deux parties distinctes, chacune destinée à une catégorie de personne précise.
La première catégorie comprend des enseignants souhaitant réaliser des sites Web pédagogiques. Ces enseignants désirant utiliser le site des modèles prédéfinis ne devront pas nécessairement avoir de connaissances approfondies en informatique.
La deuxième catégorie de personnes correspond aux étudiants, les utilisateurs finaux des sites générés. Les étudiants possèdent déjà, en général, les compétences pour utiliser un site web pédagogique.
Bien quon ait distingué deux catégories de personnes, on peut considérer que celles-ci sont interconnectées entres elles par lintermédiaire de lenseignement. En effet, la première catégorie à pour but de transmettre un savoir à la deuxième. Les modèles proposés dans ce projet se situent donc entre ces deux catégories de personnes. Ils permettent de faire le lien entre les enseignants et les étudiants.
3. Planning mis à jour
3.1. Répartition des taches
semaine du 10 marsValidation du sujet avec le chargé de TD. Prise du premier rendez-vous avec la personne qui a soumis le projet.
semaine du 17 marsPremier rendez-vous avec mademoiselle Giacomini. Entretien non directif. Mise en place des thèmes à aborder, des limites du projet et début délaboration de la solution technique (XML). Les 4 personnes du groupe étaient présentes.
À la suite de cet entretien, nous avons défini les rôles de chaque étudiant :
Hervé Crespon chef de projet
Thibault Cavalié responsable IHM
Emmanuel Denoize, Maxime Devlieger programmeurs
semaine du 24 marsDeuxième entretien avec mademoiselle Giacomini et monsieur Trigano. Recadrage du sujet : abandon de la technologie XML au profit dun questionnaire Flash et dun site en HTML classique sinscrivant dans le site de CEPIAH, le projet sarticulera autour de quatre axes : théorie, domaine, activité, apprenant. Nouvelle répartition des taches au sein du groupe :
Hervé Crespon chef de projet
Thibault Cavalié IHM et questionnaire Flash
Emmanuel Denoize réalisation des sites
Maxime Devlieger gestion Dreamweaver et catégorisation.
semaine du 31 marsEntretien avec monsieur Trigano : précision du partage des taches entre les étudiants et mademoiselle Giacomini.
Élaboration plus précise du cahier des charges.
Travail sur Flash à partir du questionnaire Cepiah et Dreamweaver.
Hervé Crespon et Maxime Devlieger : Études des documents et début de la rédaction du cahier des charges.
semaine du 7 avrilFinalisation du cahier des charges.
Proposition du cahier des charges à l'enseignant ayant proposé le sujet. Poursuite du travail sur Flash et Dreamweaver.
semaine du 14 avrilEtude des documents remis concernant la structure et le contenu du questionnaire à réaliser.
Remise du cahier des charges (le 18 Avril).
semaine du 28 avrilDébut du Story-Board et de l'analyse ergonomique.
Définition de la charte graphique.
Remise des scénarios pédagogiques par mademoiselle Giacomini (pas encore validés par M Trigano).
Etude de ces documents.
Ecriture du rapport sur le Story-Board.
semaine du 5 maiPoursuite de la rédaction du Story-Board.
Remise des critères de sélection du questionnaire par mademoiselle Giacomini (pas encore validés par M Trigano).
Entretien directif avec M Trigano.
Etude de ces documents.
Début de la réalisation du questionnaire Flash.
Création de premiers modèles à partir des critères.
Elaboration de la grille de catégorisation des sites.
semaine du 12 maiRemise du rapport sur le Story-Board.
Etude des documents remis concernant les sites prédéfinis.
Réalisations informatiques.
Ensuite : Réalisation informatique des sites prédéfinis et du questionnaire. Rédaction du rapport final.
3.2. Modifications importantes
Nous avons dû faire de grandes modifications dans notre planning, concernant la rédaction du Story-board suite à un délai dans la remise de certains documents nécessaire à sa réalisation.
4. Analyse de lIHM en fonction du public visé
Notre travail sinscrit dans la continuité du site CEPIAH, site à vocation denseignement respectant les règles pédagogiques. Le public concerné par ce site est donc formé par les enseignants désirant avoir un support informatique pour leur cours. Le public cible est donc des adultes ayant un minimum connaissance de loutil informatique. Cet atout leur permettra dappréhender correctement les sites qui vont leur être proposés.
Aussi, notre travail sera dajouter des pages au site CEPIAH déjà existant. Dans sa globalité, lIHM a donc été déjà pensée. Notre travail consistera à se réapproprier les éléments déjà existants et à les compléter dans les pages que nous construirons nous-mêmes. Ces nouveaux éléments devront alors respecter la structure avec navigation avec bandeau en haut et menu à gauche.
5. Présentation des théories utilisées pour les modèles
Cette partie présente brièvement les théories sur lesquelles les modèles prédéfinis sont bâtis. Ces théories sont au nombre de quatre. Elles ont servi de cadre pour la conception des scénarios qui, associés à des structures de sites et à des IHM, formeront les modèles prédéfinis.
Source : E Giacomini.
5.1. Approche traditionnelle de lenseignement
Selon cette approche, le rôle de lenseignant est celui de transmetteur de savoir sans quil ny ait dinteraction entre les apprenants et lui.
Approche traditionnelle
5.2. Approche constructiviste de lenseignement
Dans cette approche existe à la fois linteraction entre lenseignant et les apprenants mais aussi linteraction entre les apprenants. Dans le cadre de cette approche, il ny a pas de collaboration entre les apprenants.
Approche constructiviste
5.3. Approche socio-constructiviste de lenseignement
Selon le courant socio-constructiviste, le savoir se construit, en première phase, de manière individuelle puis, il est socialement partagé. Contrairement au constructivisme, les apprenants réalisent des activités individuelles et collectives.
5.4. Approche psycho-culturelle (vygotskienne) de lenseignement
Selon lapproche vygotskienne, la dimension sociale est essentielle aux processus cognitifs régissant lapprentissage. La vraie direction du développement ne va pas de lindividuel au social, mais du social à lindividuel.
Approche psycho-culturelle
6. Structures des modèles de site prédéfinis
Les modèles de sites prédéfins sont bâtis selon des scénarios pédagogiques, et ces scénarios sont mis en forme et organisés par les structures présentées dans cette partie.
Après analyse de plusieurs sites pédagogiques, dont les modèles déjà existant et les sites créés dans le cadre de lUV LO18, six structures principales ont été dégagées pour « habiller » les scénarios.
6.1. Menu en haut, sous-menu à gauche
SHAPE \* MERGEFORMAT
Le menu principal situé en haut de la page est statique pour tout le site, il fait partie dun cadre invariant. Le sous-menu situé à gauche est invariant à lintérieur de chaque partie, mais sont contenu dépend de la partie du site ou on se trouve. Exemple : si on se trouve dans la partie TD, le sous-menu pourra être constitué de « TD1, TD2, TD3, TD final », tandis que le sous-menu de la partie cours sera « cours 1, cours 2, cours 3 ».
Les boutons de navigation permettent de passer dune rubrique à lautre à lintérieur dune même partie. Leur aspect dépend de lIHM choisie.
6.2. Menu en haut, sous-menu déroulant
SHAPE \* MERGEFORMAT SHAPE \* MERGEFORMAT
Le menu principal situé en haut de la page est statique pour tout le site. Le sous-menu de chaque partie apparaît quand la souris survole la partie concernée. Les éléments du sous-menu sont des liens hypertexte.
6.3. Menu en haut, sous-menu par onglets
SHAPE \* MERGEFORMAT
Dans cette structure, le menu principal est en haut. Chaque sous-menu est un jeu donglets qui dépend de la partie à laquelle il est associé. Chaque partie du menu principal mène à un jeu donglets et chaque onglet mène à une page du site.
6.4. Menu en haut, sous-menu dans une page
SHAPE \* MERGEFORMAT
Le menu principal est placé en haut de la page. Chaque partie mène à une page de sommaire local contenant le sous-menu. Les éléments du sous-menu mènent aux pages du site. La navigation se fait par les boutons à lintérieur dune partie.
6.5. Menu à gauche, sous-menu dans une page
SHAPE \* MERGEFORMAT
Cette structure est identique à la précédente avec un menu principal placé à gauche au lieu dêtre en haut.
6.6. Menu et sous-menu à gauche
SHAPE \* MERGEFORMAT
Dans cette structure, menus et sous-menus sont affichés à gauche. Chaque sous-menu est affiché directement en dessous de la partie qui lui correspond. Le cadre principal de la page est ainsi laissé pour le contenu.
7. Scénario dinteractivité des modèles (story-board)
Dans cette partie, nous allons étudier en détails deux scénarios pédagogiques différents et montrer comment ils peuvent être associés à plusieurs structures pour conduire à de nombreux modèles différents.
7.1. Scénario de sciences expérimentales, travaux pratiques en groupe
Scénario
Théorie denseignement : Psycho-culturelle
Activité : travaux pratiques en groupe
Domaine : sciences expérimentales (Chimie, Physique, Biologie
)
Ce scénario propose la réalisation dun projet se déroulant sur plusieurs séances de travaux pratiques. Il est caractérisé par un mélange dactivités collectives et dactivités individuelles, avec une prédominance dactivités collectives.
Exemple de scénario :
Type dactivitéForme sémantiqueAttending Présentation du sujet, des consignes à suivre
Recherche dinformationsLes apprenants recherchent des informations qui pourraient leur être utile pour la réalisation du projetSynthèse Une fois les informations recensées elles seront analysées et synthétisées individuellementRéalisation et rédactionEn sappuyant sur le travail danalyse et de synthèse les apprenants réalisent lexpérimentation puis ils rédigent un rapport par groupe. EvaluationEvaluation du rapport
Structure
Pour correspondre au schéma théorique, ce scénario devra être associé à une structure divisée en menu et sous-menus. Les parties principales seront les différentes activités plus la présentation générale et lévaluation. Les sous-menus de chaque partie seront des éléments propres à chaque activité. Exemple, pour la présentation générale, le sous-menu associé sera constitué des items objectifs et consignes.
Exemple de structure : menu en haut et sous-menus par onglets
La page de présentation sert à introduire les activités pratiques réalisées sur plusieurs séances. Elle comporte les onglets « Objectifs généraux » et « Consignes ».
Page de présentation
SHAPE \* MERGEFORMAT
Les pages des activités pourront avoir la forme suivante : un onglet pour le planning et un onglet pour des documents collectifs.
Page Activité collective
SHAPE \* MERGEFORMAT
Les pages correspondant aux grandes parties nont pas nécessairement de sous-menu. Voici un exemple de page dévaluation sans onglets de sous-menu :
Page dévaluation
SHAPE \* MERGEFORMAT
Ce scénario peut aussi bien être associé à une structure avec menu et sous-menus à gauche, plus des boutons de navigation. Voici par exemple la page de présentation avec cette dernière structure :
SHAPE \* MERGEFORMAT
Cet exemple permet de démontrer quun même scénario peut être décliné selon plusieurs structures différentes, tout en gardant ses propriétés.
7.2. Scénario de sciences expérimentales, cours et travaux dirigés
Scénario
Théorie denseignement : Socio-constructiviste
Activité : cours et travaux dirigés
Domaine : sciences expérimentales (Chimie, Physique, Biologie
)
Ce scénario propose dalterner les parties de cours et les parties de travaux dirigés. Chaque chapitre correspondra à une activité individuelle ou collective. Lévaluation finale est basée sur les productions individuelles réalisées par les apprenants.
Exemple de scénario :
Type dactivitéForme sémantiqueAttending Présentation des éléments théoriques du cours (par exemple la présentation du premier chapitre de cours)Travaux dirigés (activité individuelle)Résolution individuelle des problèmes de chimie en rapport avec la partie théorique présenté précédemment Travaux dirigés (activité collective)Résolution collaborative des problèmes de chimie en rapport avec la partie théorique (toujours de type attending comme présenté sur la figure 7) qui précède cette activitéEvaluation Lévaluation sera effectuée sur les productions individuelles réalisées par les apprenants
Structure
Pour correspondre au schéma théorique, le site sera constitué dun bandeau contenant les différentes parties du cours, c'est-à-dire les différents chapitres. Chaque chapitre sera associé aux différents TD traitant le sujet.
On trouvera des sous-menus uniquement dans les pages contenant les travaux dirigés, il nest donc pas approprié davoir une structure avec des sous-menus dans des bandeaux.
Les structure adaptées à ce scénario seront donc de la forme suivante :
La première page permettra davoir accès au contenu du premier chapitre. Cette page sera constituée des différents medias nécessaire à la compréhension du cours. Toutes les pages de cours seront sur le même principe, on alternera les cours et les TD. Le bandeau contenant les liens vers les chapitres du cours et les travaux dirigés pourront être aussi bien en haut quà gauche.
SHAPE \* MERGEFORMAT
La deuxième page donnera à létudiant les moyens de mettre en pratique la partie théorique apprise en cours. Pour une meilleure compréhension, cette page aura sa partie droite divisée en plusieurs parties. Chaque partie correspondra à un onglet. La première partie (atteinte lors de la sélection de TD1 dans le bandeau) fixera les objectifs du TD. Cette partie permet à lapprenant de mettre en relation ce TD avec le cours théorique. La deuxième partie fournira les consignes à suivre pour mener à bien le TD. La dernière partie sera constituée de lénoncé du problème ainsi que des données nécessaire au traitement du problème.
SHAPE \* MERGEFORMAT
Pour la partie concernant les TD de type activité collective, la présentation sera identique à celle du TD de type activité individuelle. Un autre onglet pourra être ajouté pour contenir les corrigés de chaque groupe de TD. Dans cette page, lenseignant pourra rendre accessibles les résultats de travail de chaque groupe dapprenants afin quils puissent les consulter et les comparer.
SHAPE \* MERGEFORMAT
Ce scénario est lui aussi compatible avec plusieurs structures : menu et sous-menus à gauche, menu en haut et sous-menus déroulants
8. Scénario dinteractivité du questionnaire (story-board)
8.1 Scénario dinteractivité
Le questionnaire est un élément très important de la partie MODÈLES du site CEPIAH. Il va être la porte dentrée de lutilisateur dans cette partie. En effet, quand un utilisateur va vouloir bénéficier des modèles prédéfinis réalisés au cours de ce projet, il va être guidé par ce questionnaire. Grâce aux différentes questions auxquelles il aura répondu, il sera orienté vers tel ou tel modèle. Celui-ci répondra aux critères que lutilisateur aura alors spécifié à travers ses questions.
Le questionnaire va sarticuler autour de quatre grandes parties. Ces parties correspondent aux quatre groupes de critères à prendre en compte lors de la construction dun site pédagogique. Les critères présentés ci-dessous ont été donnés par Mlle Giacomini :
lapproche théorique denseignement (activités individuelles, collectives
)
le domaine dapplication (sciences, urbanisme, langues
)
le type dactivité englobant un scénario pédagogique
Lapprenant (novice, apprenant intermédiaire, expérimenté
)
Ces quatre grandes parties proposeront alors différentes questions (au maximum une dizaine par partie) qui permettront à lutilisateur plusieurs choses. Dune part, il connaîtra mieux ses attentes en matière de site web pédagogique. Dautre part, il sera alors renvoyé vers un modèle spécifique de site web qui répondra à ses critères, et qui sera exploitable par lutilisateur.
La structure du questionnaire sera très proche du questionnaire dévaluation CEPIAH déjà existant, qui permet de connaître la qualité de son site dun point de vue pédagogique. Aussi, nous avons remarqué que ce questionnaire était bien fait, quil fonctionnait bien et que sa structure était souple et abordable. Cest pourquoi le questionnaire dont il est question maintenant prendra comme base le questionnaire déjà existant. Comme notre projet sinclura dans le site CEPIAH déjà existant, nous avons pris cette option dans le but de garder une cohérence à un niveau graphique et pratique pour lutilisateur.
On aura donc une série de questions qui sera posé à lutilisateur. Il passera automatiquement dune question à lautre. Le questionnaire fini, le traitement des réponses se fera automatiquement. Il pourra alors cliquer sur les liens vers le ou les sites répondant aux critères quil aura spécifié.
Questionnaire dévaluation CEPIAH
Actuellement, il y a moins de questions dans notre questionnaire, donc il ny aura probablement pas de sous parties. Mais cela dépend évidemment de sa mouture finale. Enfin, la navigation sera assez simple. On pourra accéder directement aux parties voulues grâce à la barre de navigation ou se laisser guider par lenchaînement des questions.
8.2 Principe de fonctionnement
SHAPE \* MERGEFORMAT
Schéma de fonctionnement du questionnaire
Le questionnaire sappuiera sur une base de connaissance permettant de construire des scénarios, puis sélectionnera une structure et une IHM en fonction des réponses de lutilisateur. Le résultat sera alors un squelette de site : un modèle prédéfini.
9. Etude des médias utilisés
9.1. Les médias
De par sa nature, la partie du site CEPIAH consacrée aux modèles prédéfinis ne nécessite pas lutilisation de média particulier, si ce nest des fichiers daide. En effet, ce site est destiné à générer des sites pédagogiques, dans lesquels se trouveront des médias liés à lenseignement, mais la sélection et la mise à disposition des modèles proprement dit ne serait qualourdie par des médias non nécessaires. Le seul média retenu est donc le fichier daide de la partie « modèles » du site CEPIAH ; cest un média sous forme de texte.
Cette absence de média permet, de plus, de conserver une cohérence avec le reste du site CEPIAH.
9.2. La bibliothèque de modèles prédéfinis
Il est toutefois possible de remarquer à juste titre que la bibliothèque de modèles prédéfinis disponible constitue à elle seule un média sous forme de support de cours. Mais cette bibliothèque étant dune part le sujet du site, et dautre part non accessible tel quel (il faut passer par le questionnaire de sélection), nous ne la considérerons pas comme un média disponible pour lutilisateur.
10. Etude iconographique
Comme notre travail fera partie intégrante des MODÈLES du site CEPIAH, nous pourrons reprendre les icônes déjà existants. Ainsi, dans la barre de menus, quelques éléments nous semblent intéressants :
INCLUDEPICTURE "G:\\UTC\\LO18\\cepiahv2.02\\images\\menu_carte.gif" \* MERGEFORMATINET Cette icône correspond à la carte du site. Il nous a semblé que le lien sémantique avec la carte du site nétait pas évident. Nous pensions au départ que cétait des liens vers dautres sites étrangers. MAIS, comme lutilisateur du site est habitué à ces icônes et quil les connaît alors bien, dans un souci de cohérence, nous les garderons.
INCLUDEPICTURE "G:\\UTC\\LO18\\cepiahv2.02\\images\\menu_email.gif" \* MERGEFORMATINET Lien vers la messagerie. Il est explicite, bien connu et fonctionne correctement auprès des utilisateurs.
INCLUDEPICTURE "G:\\UTC\\LO18\\cepiahv2.02\\images\\menu_aide.gif" \* MERGEFORMATINET Lien vers laide. Là encore, il est explicite, connu et fonctionne correctement auprès des utilisateurs.
INCLUDEPICTURE "G:\\UTC\\LO18\\cepiahv2.02\\images\\menu_home.gif" \* MERGEFORMATINET Retour à laccueil. Nous navions pas tout de suite identifié licône « maison », ce qui nous a poussé à savoir à quoi il correspondait. En regardant plus attentivement, on identifie en effet une maison. Mais, dans la plupart des sites, il y a une maison seule. Là, nous navions pas tout de suite identifié ce qui est en fait le chemin et le sol. Sinon, le lien sémantique qui associe le retour à laccueil avec licône maison est là encore connu, donc fonctionne correctement auprès des utilisateurs. De plus, cette icône existe déjà ailleurs dans le site CEPIAH.
11. Charte graphique
11.1. Le site CEPIAH
À un premier niveau, notre travail sintègre dans la partie MODÈLES du site CEPIAH, à dominante orange. Pour les pages daccueil et de renseignements simples, nous aurons donc seulement à reprendre la barre de navigation de gauche et à construire nos nouvelles pages en reprenant la structure déjà existante.
Exemple de page de la partie MODÈLES :
11.2. Le questionnaire des modèles
Le questionnaire sur lévaluation était de dominante jaune, couleur correspondant à la partie ÉVALUATION de du site CEPIAH. Comme ce questionnaire nous paraît très clair et lisible, nous reprendrons sa charte graphique dans les grandes lignes. Le positionnement des différentes parties barre de navigation et question- sera donc la même. Même si la structure des questionnaires est proche, on les différenciera en choisissant dautres couleurs, qui respecteront la dominante orange propre à la partie MODÈLES. Sinon, pour les autres éléments de navigation, on gardera le même principe. La partie où lutilisateur se trouve sera en surimpression dans la barre et les boutons de navigation seront des flèches accompagnées de texte.
11.3. Les sites web proposés
Les sites proposés seront en fait une somme déléments combinés par lutilisateur. Ces éléments porteront sur différents points importants régissant la charte graphique de tout site web. Ainsi, lutilisateur aura à choisir entre différents types de découpages de pages, de boutons et de couleurs dominantes. Ces éléments permettront alors de créer tout un panel de sites à partir des différents éléments de la charte graphique.
En ce qui concerne la structure des pages, les différentes propositions seront :
Bandeau en haut bandeau à gauche bandeau en haut et à gauche
Navigation par onglets comme sur lillustration suivante :
Les boutons de navigation pourront être trois types :
Purement schématiques : purement textuels : combinaison des deux types
EMBED PBrush EMBED PBrush EMBED PBrush
Enfin, deux types de couleurs seront proposés. Le premier est une palette de couleurs douces, plutôt dans les tonalités pastelles et claires. Lautre sera des couleurs plus intenses, plus contrastées.
Exemple de couleurs vives : EMBED PBrush
Exemple de couleurs douces : EMBED Photoshop.Image.6 \s
Dans la mesure du possible, nous essaierons donc de faire un maximum de sites correspondant aux combinaisons de tous ces éléments de charte graphique. Une fois que lutilisateur aura choisi la structure de son site en fonction des critères pédagogiques, il pourra choisir entre tous ces éléments de charte graphique et construire son site comme il veut.
12. Jeu dessai hypothétique
Il nest actuellement pas possible de réaliser un jeu dessai hypothétique afin de simuler le comportement des utilisateurs car le questionnaire nest pas encore réalisé. Concernant les sites prédéfinis, un jeu dessai hypothétique nest pas pertinent puisque les modèles ne sont que des sites vides servants de contenant pour des cours.
Conclusion
Ce rapport explique le fonctionnement global du questionnaire et laspect des modèles générés et présente des éléments dIHM pour le questionnaire portant sur les modèles prédéfinis du site CEPIAH. Toutefois, il nous a été impossible de présenter un scénario dinteractivité complet du questionnaire par manque de sources précises.
Par ailleurs, seuls deux scénarios pédagogiques ont été traités en détails par manque de sources et parce que nous navons pas jugé pertinent de développer tous les modèles. Les structures et lIHM des modèles prédéfinis ont été, quant à eux, étudiés plus en détails. Une fois la liste des critères permettant de construire des scénarios achevée, il sera possible de présenter tous les modèles retenus.
Création de modèles prédéfinis pour le site CEPIAH
Analyse ergonomique Story-board LO18
- PAGE 3 -
Evaluation
Présentation des critères dévaluation
Présentation du projet Activité collective 1 Activité individuelle Activité collective 2 Evaluation
Présentation du projet Activité collective 1 Activité individuelle Activité collective 2 Evaluation
Activité collective Réalisation et Rédaction
Evaluation
finale
Présentation du projet
Objectifs
Consignes
Activité collective 1
Planning
Activité individuelle 1
Planning
Documents
Evaluation
Enseignant
Consignes
Objectifs généraux
Présentation globale du projet
Présentation du projet Activité collective 1 Activité individuelle Activité collective 2 Evaluation
Apprenant
Apprenant
Enseignant
Apprenant
Apprenant
Enseignant
Apprenant
Apprenant
Apprenant
Evaluation
Activité individuelle
(TD)
Chapitre
(description)
Activité collective
(TD)
Chapitre
(description)
Activité individuelle
(TD)
Chapitre
(description)
Chapitre 1
(Elément de théorie)
TD 1
Chapitre 2
(Elément de théorie)
TD 2
Contenu du Chapitre 1
Chapitre 1
(Elément de théorie)
TD 1
Chapitre 2
(Elément de théorie)
TD 2
TD 1 Activité individuelle
Objectifs à atteindre
Chapitre 1
(Elément de théorie)
TD 1
Chapitre 2
(Elément de théorie)
TD 2
TD 2 Activité collective
Présentation de objectifs à atteindre
Menu principal (statique)
Boutons de navigation
(aspect dépendant de lIHM choisie)
Sous-menu dynamique
Contenu dépendant de chaque partie
Sous-menu déroulant apparaissant suivant les actions de la souris
Menu principal (statique)
Menu principal (statique)
Sous-menu par onglets
Contenu de la page
Menu principal (statique)
Sous-menu = première page de chaque partie
Boutons de navigation
Menu principal
Sous-menu
Planning de cette activité
Page 10
Espace commun des documents collectifs
Page 11
Présentation globale du projet
Activité collective
Evaluation
Activité individuelle
Activité collective
Activité collective
Grande partie
Sous parties
Question
Squelettes des modèles
IHM
Scénarios
Apprenant
Activité
Domaine
Théorie
Structure
