Élaboration d’une stratégie de médiatisation appropriée à la transmission

du cours « enseignement de la civilisation »

Master AIGEME – cours de transmission des connaissances

Enseignant : M Rakotonoelina

Les auteurs :

Anne-Charlotte Chaput

Dina El Kassas

Anselme Mvilongo

Lydia Libos

Jean-Philippe Louisjean

Marion Picard

Yann Coquerelle

1

Ce rapport est destiné à l’équipe pédagogique (concepteur Web, enseignant et chef du projet)

Nous abordons les différents aspects afférents à la médiatisation des connaissances pour une

formation à distance :

1. Introduction : éléments clés pris en compte dans les choix p. 2

2. Analyse du type de connaissances p. 3

3. Analyse des philosophies d’enseignement p. 4

4. Analyse des théories d’apprentissage p. 5

5. Amélioration et réorganisation des contenus bruts p. 7

6. Communication visuelle p. 12

7. Design web en utilisabilité directe p. 13

8. Consignes typographiques p. 16

9. Design web en utilisabilité détournée p. 19

1. Introduction

Les contenus à analyser, issus d’un cours de didactique du français, portent sur les aspects

civilisationnels et interculturels en classe de langues. Ce cours est destiné à être transmis par

un dispositif de FOAD et s’adresse à des étudiants de licence en FLE. Ces contenus sont

formels, académiques et appartiennent au genre textuel de la conférence universitaire.

Le public a une vingtaine d’années (jeune donc) et se prépare pour devenir enseignant. Ils

suivent un cours d’université à bac +3 et peuvent être de milieux socioculturels variés. Ils

attendent de ce cours qu’il les prépare à l’enseignement de la culture dans un cours de FLE.

Le type de site sur lequel seront transmis ces contenus est un site de service éducatif. On en

attend les caractéristiques suivantes : précision, clarté, structuration, autorité. L’objectif du

site est d’apporter et transmettre des contenus de connaissances qui permettront à l'utilisateur

de construire une compétence didactique et pédagogique.

2

2. Types de connaissances

Le type de connaissances est essentiellement déclaratif mais contient des éléments

procéduraux plus ou moins explicites.

Ainsi, du coté déclaratif, le texte apporte des définitions de concepts, des réflexions

et illustrations, des points de vue d’experts, l'exposition de problématiques, de théories, de

conceptions, d’approches disciplinaires. En dehors d’un récit d’expérience personnel les

connaissances sont globalement théoriques.

Mais le texte est ponctué de formulations renvoyant à l'objectif sous-jacent qui lui est d'ordre

procédural, à savoir notamment suggérer une « approche... », une « démarche », une

« méthodologie ». Ainsi, des recommandations et pistes d’exploitation pédagogique sont

données ici et là, qui s’apparentent alors à des connaissances procédurales, des manières de

procéder (« La description des faits culturels consistera ainsi à mettre à jour… » ; « On peut

aussi étudier les signaux non verbaux »).

Il y a aussi des invitations plus fermes à  adopter une certaine manière d'enseigner. Cela est

marqué par une modalisation du discours à travers des marqueurs de type conatif (« il faudra

accorder » ; « il convient d’habituer » ; « on doit tenir compte » ; « il fallait […] s’appuyer sur

leurs connaissances linguistiques »).

En fait, ce rapport déclaratif /procédural  sous-tend l’ensemble de la conférence : c'est une

réflexion qui doit permettre à l'apprenant d'envisager une manière de transmettre  une

compétence culturelle à un public de FLE. Autrement dit, au travers des connaissances

déclaratives apportées, on vise une connaissance procédurale : acquérir une démarche

d’enseignement des faits culturels, et donc se forger un savoir-faire. 

3

3. Philosophie d’enseignement Le type textuel (conférence) et le genre discursif (avant tout informatif, expositif) sont

caractéristiques de ce que l’on trouve dans les formations universitaires. Comme nous l’avons

montré dans l’analyse des connaissances, on transmet à l’étudiant des connaissances

déclaratives, des savoirs (outils théoriques) sur lesquels on espère qu’il pourra s’appuyer pour

construire une compétence procédurale : savoir enseigner la civilisation. Globalement, le

cours  amène à développer la réflexion théorique, à se poser les questions essentielles, à

connaître les points de vue des experts du domaine, bien plus qu'il n’apporte une compétence

pragmatique. Il suggère certes quelques pistes mais ne met pas en situation concrète de

résolution de problème. Autrement dit, l’enseignement est libéral.

Il  s’'agit bien là de « développer les connaissances fondamentales des apprenants » sur les

problématiques de rencontre des cultures et de l’enseignement de la civilisation, et d’autre

part de leur donner les moyens de les  « analyser […] de telle sorte qu’ils soient aptes ensuite

à prendre des décisions. » (Citation du cours D9MM3)

Par contre, comme nous le disions, l'objectif  sous-jacent est de permettre à l’apprenant de se

forger un savoir-faire en termes d’enseignement de la culture. Par conséquent, la visée est

bien fonctionnelle au final et à ce titre, l’enseignement est disons "à visée" progressive ou

potentiellement progressif.

Enfin, l’enseignement d’une compétence interculturelle vise à changer les comportements, à

développer une ouverture d’esprit et une tolérance vis-à-vis des différences culturelles et faire

prendre conscience de l’égalité des cultures (« Une culture quelconque est égale en dignité à

n’importe quelle autre »). Cela est explicitement énoncé dans les principes en début de

chapitre si bien que la portée du cours est aussi sociale et politique. Le cours s’inscrit donc

dans une philosophie de l'enseignement radical. Par ailleurs, on peut considérer que même

pour les étudiants de ce cours, l’enjeu des connaissances présentées dépasse la simple

formation de l’esprit : le public d’apprenants est invité à faire siens les divers enjeux de

changement liés à l’interculturalité. 

4

4. Théories d’apprentissage

Le cognitivisme

Le cognitivisme repose sur la recherche en sciences cognitives. Il énonce des stratégies pour

faciliter le traitement cognitif de l’information nouvelle en vue de son assimilation et de son

intégration aux connaissances préexistantes dans la mémoire à long terme. Il s'agit de

l'organisation anticipée, la métaphore, la progression thématique, les aide-mémoire, la

structuration du contenu, le pluri-encodage, l'articulation entre connaissances connues et

connaissances nouvelles.

La présentation initiale des contenus s’inscrit clairement dans cette perspective :

les contenus sont structurés thématiquement (introduction, méthodologie, contenus,

évaluation) et organisées en paragraphes

définitions et illustrations facilitent l'assimilation des concepts théoriques abstraits

et la mémorisation

la présence de titres et transitions  permettent à l'apprenant d'avoir une vision générale

et structurés du cours, de faire le lien entre les parties  

les questions permettent d’orienter l’esprit, invitent à faire appel à ses représentations

avant de poursuivre la lecture et de les confronter aux connaissances nouvelles

les contenus présentés reposent sur des concepts acquis de ces étudiants : pour

enseigner, on doit réfléchir à la méthode, aux contenus, à l’évaluation ; les nouvelles

connaissances pourront donc s'insérer dans ce schéma connu.

Dans les contenus bruts remaniés, nous renforçons la dimension cognitiviste : davantage de

définitions et d'illustrations des concepts, un multi-encodage, la réorganisation des contenus,

l'ajout de graphiques sur des points sensibles des contenus, la mise en valeur typographique

des titres, l'introduction du cours, la  présentation du plan...

Le constructivisme

Dans la théorie constructiviste de l'apprentissage, l’apprenant est amené à reconstruire ses

connaissances. C'est un apprentissage actif, ouvert aux échanges collaboratifs, à la

confrontation des points de vue et à la recherche personnelle. Il est  basé sur l'expérience et ne

réduit pas la complexité du monde. 

5

Si nous revenons à l'étude des types de connaissances, nous en déduisons que ce cours est

potentiellement constructiviste, de même que la théorie de l'enseignement est potentiellement

progressive. La dimension constructiviste est inscrite entre les lignes mais dépendra de l'usage

que l'apprenant fera des contenus. La réflexion personnelle est certes encouragée par quelques

questions (« Comment savoir qu’une compétence de civilisation est atteinte ? ») mais des

éléments de réponse sont immédiatement fournis et les questions ne sont pas contextualisées,

ce qui n’incite pas le lecteur à jouer le jeu.

L'apprenant  n'est pas mis en situation concrète de résolution de problème. Il peut donc se

contenter de lire et s'arrêter là. Cette dimension demande donc à être mise en œuvre pour que

l'étudiant soit placé dans une démarche active dans laquelle il utilisera ces contenus au service

de la construction d'un cours par exemple et donc de ses connaissances propres.

Nous faisons donc là aussi le choix de consolider cette approche sous jacente. Nous

proposons une scénarisation du cours dans l'ouverture qui met l'apprenant face à un problème

concret : devoir monter un cours de civilisation. Il lira donc les contenus à la lumière de cet

objectif et gardera une distance réflexive face à ces derniers. Des questions supplémentaires

liées à ce scénario et placées en début de page invitent à réfléchir par soi même à des

problèmes concrets et confronter son point de vue aux éléments de réponse fournis. 

Nous proposons aussi, dans cette perspective, une tâche en clôture où l'apprenant se retrouve

confronté à certaines problématiques à résoudre en s'appuyant sur les éléments du cours.

Enfin, la recherche d'informations supplémentaires grâce à la bibliographie et des

lectures recommandées invitent encore à une prise en charge autonome. 

6

5. Amélioration et réorganisation des contenus bruts

Niveau macrostructurel 

Les contenus semblent correspondre à l’ensemble des connaissances apportées dans le cours

sur ce thème ; ils sont intimement liés et constituent donc un chapitre en soi. La quantité de

connaissances proposées peut raisonnablement tenir dans un module de e-formation. Par

ailleurs ces contenus représentent 2 heures et demi sur le volume global d’un cours de 25

heures. En faire l’objet d’un module semble donc raisonnable.

Niveau mésostructurel

Organisation de la structure du module et des pages Web

Les cours sont répartis en trois parties : une introduction des termes clés (deux pages), une

deuxième partie portant sur des considérations méthodologiques (6 pages), une troisième

partie (3 pages)  axée sur les problématiques de choix et d’organisation des contenus

d’enseignement.

Mais cette organisation n’est pas forcément pertinente. Le texte dit page 8 : « nous quittons la

“méthodologie d’approche des faits culturels” pour aborder l’enseignement de la civilisation

et les problèmes spécifiques qui s’y posent. » Cette phrase prête à confusion ; elle semble

vouloir dire que les méthodologies présentées ne font pas partie des problématiques de

l’enseignement de la civilisation mais constituent un domaine de référence dont les

enseignants exploiteraient uniquement les trouvailles. Or, dans le cadre d’un cours de

didactique du FLE, la méthodologie d’approche fait partie intégrante des problématiques

d’enseignement et devra apparaître comme telle dans l’organisation du module.

Dans une perspective cognitiviste l’organisation des sections du module dans les pages web

doit permettre à l’apprenant d’appréhender visuellement la hiérarchisation des connaissances :

en passant d’une page à l’autre, il aborde des connaissances au même niveau de la

mésosotructure. Or, en didactique, les interrogations sur les contenus, l’évaluation et la

méthodologie se situent à priori sur un même plan et doivent donc se trouver au même niveau

mésosotructurel. Mais se pose ici un dilemme du à la forte disparité dans la longueur de ces 3

champs. Nous sommes typiquement face à un cas où la technologie ne peut suppléer à la

disparité des contenus pédagogiques. Etant donné la longueur importante de la partie

7

« méthodologie », on répartira ses parties constitutives sur différentes pages tout en indiquant

clairement par le biais des titres qu’il s’agit de sous-sections de la réflexion sur la

méthodologie. Procéder à la même répartition pour les autres contenus engendrerait une

multitude de pages de petite taille et ferait perdre à l’apprenant la cohérence du discours.

Nous choisissons donc de répartir ainsi : une page web par grande section 1, 2, 3… Seul dans

la partie 4 aura-t-on une page web par sous-partie (4.1, 4.2, 4.3, etc.). Ce choix reflètera

visuellement l’accent mis par l’enseignant sur la méthodologie.

Cohérence du texte

L’ordre de succession proposé entre les 5 approches méthodologiques présente une logique

que l’on peut conserver à condition d’expliciter les enchaînements. En revanche, le lien entre

les deux premières approches (langue vers sociologie) n’est pas clair. Un paragraphe mal

placé de l’approche sociologique qui doit être déplacé dans la partie « langue et civilisation »

permettra d’arranger la transition.

Dans la partie « contenus », la section consacrée aux stéréotypes trouvera mieux sa place à la

suite du premier paragraphe sur le contexte d’enseignement qui suggère de tenir compte du

capital culturel du public et de ses représentations. Par ailleurs, les stéréotypes peuvent

constituer une entrée dans les contenus du cours et il est cohérent d’en parler avant la

typologie de Porcher sur les contenus.

De nombreux items ont été replacés. Tous les changements sont expliqués dans les

commentaires attachés aux contenus remaniés à visualiser avec la fonction « panneau de

révision » de Word.

Lecture écran et facilitation cognitive

Il est indispensable, pour une lecture écran mais aussi pour la facilitation cognitive, que le

texte soit constitué de paragraphes courts avec une abondance de titres, repères indispensables

pour l’apprenant. Aussi, nous avons ajouté des titres et sous-titres. Ils contiennent des mots

clés pour faciliter la compréhension et le repérage de l’organisation des connaissances dès la

première lecture d’une part, la localisation des idées principales et à la mémorisation lors des

lectures suivantes d’autre part. Dans cette même optique, nous avons opté dans la partie

8

méthodologie (plus longue) pour un deuxième niveau de sous-titres pour rythmer, structurer et

aérer le texte, facilitant ainsi sa lecture à l’écran sans rompre sa continuité.

Des questions adressées à l’apprenant en début de parties aident aussi cognitivement à

percevoir les enjeux des connaissances présentées. 

Les transitions entre parties sont souvent ébauchées, nous les avons reformulées ou explicitées

pour préserver l’enchaînement logique et la clarté du propos. De plus toutes les parties

commencent par un paragraphe introducteur qui fut ajouté.

La séquence d’ouverture

Elle répond à une approche cognitiviste et constructiviste. Elle présente les contenus et

objectifs du module de façon à poser des repères que l’apprenant gardera en mémoire, à

susciter des attentes. Nous avons aussi présenté la logique organisationnelle du module et le

plan détaillé en fin d’introduction, ce qui aide à percevoir l’enchaînement des connaissances.

Par ailleurs, pour susciter l’intérêt et donner du sens à l’apprentissage, il faut permettre à

l’apprenant de percevoir les enjeux et l’utilité du cours. Nous avons donc scénarisé le module

en l’inscrivant dans un cadre fictif mais réaliste pour des étudiants de FLE, et nous y posons

des questions clés qui seront reprises au fur et à mesure. Cela actualise la philosophie

progressive sous-jacente aux contenus et invite à s’en servir comme d’outils au service de la

construction d’une compétence.

La séquence de clôture

Dans une logique cognitiviste, elle fait le bilan des connaissances et propose une mise en

application qui répond à d’autres styles d’apprenants, plus pragmatiques que réflexifs. Dans

une logique constructiviste (et de la philosophie progressive), la tâche proposée est une tâche

authentique qui va susciter une (re)construction active des connaissances dans l’expérience en

confrontant à des problématiques clés du cours comme la notion d’intériorisation de la

culture. En effet, l’explication de cette « simple » BD nécessite de mettre à jour des

« évidences » culturelles enfouies. Par conséquent, l’apprenant se rendra compte de la

nécessité de recourir à une méthodologie pour être capable d’expliciter le culturel dans la BD

et aussi prendra conscience des obstacles à la compréhension interculturelle pour ses élèves.

9

Niveau microstructurel

Nous avons explicité certaines formulations synthétiques, techniques ou elliptiques et illustré

des concepts abstraits. Conformément aux techniques d’exposition de l’e-conférence, nous

avons défini les termes « techniques », soit dans la linéarité du texte, soit dans un glossaire,

selon leur longueur. De nombreux exemples ont été ajoutés.

Dans l’introduction par exemple, les termes clés ont été définis, les liens entre « civilisation »,

« compétence culturelle » et « interculturel » explicités, de même que la problématique

induite qui sous-tend le chapitre. On perçoit mieux la liaison avec les réflexions qui suivent.

La fin de l’introduction fut réécrite car elle introduisait une confusion entre la compétence

culturelle de l’individu et celle de l’apprenant, et entre la problématique des contenus et celle

de l’intériorisation de la culture. Elle ne semblait pas liée aux propos tenus avant sur

l’interculturalité et la pluriculturalité.

Certaines notions abordées dans ce module nécessitent aussi d’être mieux expliquées. Par

exemple la notion de domination et de champ chez Bourdieu. En tant que concepteurs

pédagogiques multimédia, nous ne décidons pas des contenus, nous les mettons en forme

pour le web. Nous avons néanmoins choisi de compléter dans le corps de cours l’approche de

G. Rate sur les stéréotypes (III b).

A cela s’ajoute des modifications liées à des erreurs typographiques, aux facteurs de cohésion

textuelle (reprises anaphoriques), à des répétitions, des liens elliptiques…

Voix narrative et ton

En dehors du passage sur l’expérience personnelle, la narratrice se manifeste sous la forme

d’un « nous » (elle et ses élèves), ou d’un « on » plus impersonnel. Nous avons repris le

« nous ». Nous avons opté pour le vouvoiement pour nous adresser à l’apprenant, ce qui

préserve le ton initial du texte relativement distant.

Le ton est le plus souvent objectif mais la narratrice prend aussi position face aux contenus

(« il faut accorder une grande importance… »). C’est la fonction expressive de Jakobson qui

est souvent liée ici à des recommandations (fonction conative). Nous avons conservé ces

prises de position dans la version médiatisée.

10

La problématique de l’accentuation du texte :

Il est tentant de mettre en valeur certains mots et propositions du texte pour aider le lecteur à

repérer les points clés. Toutefois l’appropriation des contenus passe par un repérage personnel

de ces points en surlignant et annotant le texte. On n’aide donc pas forcément l’apprenant

cognitivement en faisant pour lui ce travail. De plus partir d’un texte déjà accentué peut gêner

cette tâche. On a donc laissé le texte « vierge » mais ajouté titres et sous-titres pour guider

quitte à sur-hiérarchiser l’information.

Le pluri-encodage

En dehors de la communication visuelle (ci-dessous), nous proposons en RSS six

enregistrements audio portant sur les parties 1 à 6. Il ne s’agit pas de lecture du cours tel quel

car ils sont destinés à être écoutés avant de lire comme une première introduction aux

contenus. L’enseignant donne une explication courte des idées clés de ces parties sur un vrai

registre oral (spontané).

Interactivité

Les liens interactifs (en vert dans les contenus remaniés), mènent vers les définitions, vers les

ouvrages cités ou les auteurs nouvellement introduits.

11

4. La communication visuelle

Les contenus de ce cours ne se prêtent pas naturellement à une communication visuelle car il

s’agit avant tout de concepts abstraits. Á ce titre, la communication visuelle n’a pas ici une

fonction représentative mais avant tout illustrative. Elle doit répondre à des critères

d’intelligibilité et d’utilité :

les illustrations sont proches du texte qu’elles illustrent et contiennent des légendes au

besoin (précisant l’interprétation)

elles aident à la compréhension et à la mémorisation ; il ne s’agit pas de décorer

(l’esthétique du site sera traitée plus bas) mais d’attirer l’attention, d’aider à

comprendre, d’illustrer des concepts abstraits et les relations entre ceux-ci

on évite les détails superflus qui détournent l’attention du sujet ; les graphiques sont

simples

on tient compte du public à qui l’on s’adresse et à la charge culturelle véhiculée par les

graphiques.

Fonctions des graphiques :

fonction organisationnelle : illustrer les relations entre idées clés du cours (voir

annexe 2.2 Diagramme : « Compétence culturelle dans une perspective

interculturelle »)

fonction interprétative : illustrer des théories, des concepts abstraits

o le concept de champ culturel (annexe 2.3. Diagramme: «Champ culturel»)

o l’interculturalité (annexe 2.1. Planche BD Titeuf: «World-cantine»)

o Les connotations culturelles (le spot publicitaire pour Chanel n°5 « Le Petit

Chaperon rouge », section 4.6.1)

o Les stéréotypes (annexe 2.5. Dessin de Goscinny & Uderzo, «Astérix chez

les Bretons»)

fonction illustrative et mnémonique (annexe 2.4 image d’une interaction type)

12

5. Utilisabilité directe

Le design web de l’e-conférence s’appuie sur l’analyse placée en introduction. Il est centré

sur une utilisabilité simple, claire et précise. Voyons comment nous pouvons atteindre cet

objectif.

L'identité du site :

L'apparence générale doit être à la fois sobre (pour ne pas déconcentrer) et agréable. Notre

design (voir annexe 1.1) reflète l’idée d'interculturalité :

dessin illustrant des enfants d’origines culturelles différentes discutant avec leur

enseignante pour l’arrière-plan de la page d’accueil et comme logo

yeux renvoyant au mélange des origines

combinaison diversifiée et harmonieuse de couleurs chaudes ; le bandeau horizontal

du haut contient des nuances harmonieuses de rouge, vert et bleu.

Le choix de la résolution (800*600) permet une navigation aisée, l'utilisateur n’a pas à faire

défiler la barre horizontale.

La charte graphique du site

Le site est constitué de 2 blocs, le bandeau horizontal et le bloc central :

Le bandeau horizontal contient le titre du module

Le bloc central se divise en 3 sous-blocs :

o Le premier, à gauche, contient le menu de navigation du module (voir Annexe

1.1) ou celui du cours (voir Annexe 1.2). La largeur est de 5 cm ; et la

couleur orange pâle ( # :E4C347).

o Le second, au centre, occupant la partie principale accueille le contenu de

chaque page Web, ainsi que le copyright (en bas de chaque page) ; la largeur est

22 cm, et la couleur blanche (une image de fond d’opacité 25% - sur la page

d’accueil uniquement).

o Le troisième, à droite, est légèrement plus étroit (3 cm) que celui de gauche,

mais de la même couleur. Il permet d’encadrer le texte et de donner un meilleur

équilibre visuel.

13

Au chargement de la page, les yeux clignent (les images sont animées), ce qui crée un

mouvement et porte l’attention sur l’idée d’interculturalité, sans être trop envahissant.

Palette de couleurs du site Web

Afin de garantir une bonne ergonomie visuelle :

Pour la couleur de fond du texte, nous optons pour un blanc légèrement orangé (#FFFFCC)

et le bleu pour le texte, pour permettre un contraste harmonieux limitant la fatigue visuelle.

Les titres sont d’une autre teinte pour être plus visibles. Nous reprenons une gamme déjà

présente (le bleu dans le bandeau supérieur) pour l’harmonie du site. Le bleu sera nuancé en

fonction du niveau du titre, et mis en gras.

Couleur de l’arrière-plan du navigateur : les navigateurs ayant une résolution supérieure à

600*800 (taille de la page) verront un arrière-plan noir pour la fenêtre du navigateur, afin de

mettre en valeur les couleurs.

La navigation

L’utilisabilité directe doit permettre à l’utilisateur de trouver l’information rapidement et

d’avoir une vision générale du site. Les éléments de navigation seront dans une police

différente du texte (Trébuchet MS). Nous avons réuni tous les éléments propres à la

navigation dans le bandeau vertical gauche.

Lorsque l’utilisateur sélectionne un lien « cours » dans le menu général du site (annexe 1.1),

une nouvelle fenêtre du navigateur s’ouvre. Les rubriques du menu qui s’affichent dans cette

nouvelle fenêtre correspondent à celles du cours (voir annexe 1.2).

Cela permet à l’utilisateur de consulter un chapitre du cours dans une fenêtre tout en

consultant une autre rubrique du site (ex : le forum), sans perdre le fil de sa lecture.

Plusieurs éléments facilite la navigation :

Sommaire

Accessible depuis le menu général et le menu du module, il liste toutes les pages du site sous

la forme d’un sommaire en hyperliens.

14

Aide

Accessible depuis le menu général et le menu du module, la page d’aide définit le

fonctionnement du site.

Flèches de navigation d’une page à l’autre (< >)

L’utilisateur utilise les flèches pour aller à la page suivante ou précédente du cours.

Cet élément de navigation contextuel est utilisé pour la consultation à l’intérieur d’un chapitre

du cours.

Plan du cours

Sur les pages web du cours (annexe 1.2), un bouton « Plan du cours » permet à l’utilisateur

d’accéder à n’importe quelle section (page Web) du cours. En effet, s’il clique sur ce lien, les

sections et sous-sections du cours s’affichent dans une liste déroulante cliquable.

Structure d’une page Web du site

Chaque page Web qui contient les liens internes et ancres, les infos bulles, le texte et les

éléments de communication non verbale (images, vidéo, audio) utilisés pour faciliter la

transmission des connaissances.

Les titres :

Le titre du module et celui du cours (ou chapitre) figure dans le bandeau horizontal supérieur.

Les titres de sections figurent au début de chaque page Web dans le corps du texte.

Les info bulles

Les définitions des termes clés, les notes sur les auteurs clés et les références des ouvrages

cités apparaissent dans des infos bulles. Cela permet à l’apprenant de poursuivre sa lecture

sans interruption.

Termes et auteurs : l’info bulle est uniquement placée sur la première occurrence

pertinente du terme ou de l’auteur.

Références : une info bulle est ajoutée systématiquement sur l’année de publication de

l’ouvrage cité dans le cours.

Le même style s’applique à ces éléments (voir Typographie).

15

6. Choix typographiques

Pour le Web, nous faisons des choix visant à personnaliser le site tout en respectant des

consignes ergonomiques de mise en forme des contenus pour le Web et l’édition papier. Se

reporter à l’annexe 4 pour le récapitulatif des choix typographiques pour le Web.

Les polices

Les polices Sans Serif conviennent le mieux pour l'écran.

Nous proposons Calibri, qui présente l’avantage d’offrir un confort de lisibilité à l'écran,

comme police principale. Elle est d'apparence assez classique en conformité avec les contenus

(conférence universitaire) et rappelle aussi une écriture manuelle, renouant ainsi le lien avec

l’enseignante du cours. Si cette police n’est pas disponible : Verdana, Tahoma, Arial ; puis

une police Serif finalement : Times.

Les titres et info bulles ont la même police que le texte ; les encadrés de l’utilisabilité

détournée également (ci-dessous).

Pour les citations et exemples, nous avons choisi une police qui contraste avec celle utilisée

pour le corps de texte : Lucida Sans Typewriter, (en taille 10, pour ne pas dépasser la taille

des caractères en Calibri), puis Trébuchet MS, Garamont et Times new Roman.

Les questions de début de section seront en italique. Cela n’est pas récommandé à l’écran

mais l’usage est limité et évite de multiplier les couleurs du texte.

Taille des textes

La taille douze est la taille la plus élevée que l’on puisse choisir sans rendre la lecture plus

difficile. Les titres seront augmentés selon le degré de hiérarchie : titre du module de 6 points,

titres du cours de 4 points, titres et sous-titres de 2 points et sous-sous-titres (uniquement dans

la partie 4) de même taille que le texte mais couleur différente comme les sous-titres.

Il est recommandé d’augmenter le crénage  pour le Web de 10 points. Dans la partie en

italique il faudra l’augmenter encore de 7 points.

L’interlignage doit être de moins 120 %.  Le texte aura une largeur d’environ 70 signes, mais

pas plus, pour ne pas rendre la lecture fatigante.

16

Espacement entre les titres et le corps du texte

Il faudra sauter deux lignes pour une bonne aération du texte.

Les normes officielles de typographies 

Les titres de livres et de bandes dessinées doivent répondre à des normes :

Bandes dessinées : Prénom Nom (scénario, dessin et lettrage) (couleur Prénom Nom), titre,

Éditeur, Lieu, date.

Livres : Prénom Nom, titre, Editeur, collection, Lieu, date.

Les légendes d’images seront en Arial, et centrées.

Couleurs

Pour le titre du cours, qui figure aussi dans le bandeau horizontal supérieur, nous aurons un

bleu foncé (# : 333399). Les titres de sections, qui figurent au début de chaque page web et

les sous titres seront d’un bleu moins foncé (# : 3333FF) que le titre du cours.

En revanche, le titre du module sera nettement différencié : un orange (# : CC6633) apportera

une bonne distinction en harmonie avec le site.

Le menu sera d’un bleu clair (# : 3333FF).

Les exemples et citations seront en dans le même bleu que le texte (# : 000099).

Les mots du texte qui donne lieu à des fenêtres pop up seront distingués par une couleur

orangée. (# : CCCC33).

Les hyperliens seront soulignés et mis en bleu plus clair que le corps du texte avant la visite

(# : 000099) et en orange (# : CC6633) pour rappeler à l’apprenant ce qu’il a visité.

Consignes pour la version papier

Pour la version papier il faut utiliser des polices Serifs : Garamond (qui rappelle la version

Web, tout en étant adaptée à l’impression) puis Palatino, Times si Garamond est indisponible.

17

Le crénage ne sera pas augmenté. Il ne sera pas nécessaire de produire un texte aussi aérée, et

la largeur minimale n'a plus lieu d'être. La mise en page Web ne sera pas non plus conservée.

Les différentes sections seront imprimées l’une à la suite de l’autre.

La version sera en noir et blanc, plus économique. Cela évitera donc aux apprenants

d’imprimer en noir et blanc une version faite pour la couleur. Le gras remplacera la couleur

pour les sous-titres.

18

7. Utilisabilité détournée 

 Nous nous basons sur l’analyse du type de site, objectif, public et contenus de l’introduction.

 Une e-conférence demande à être lue dans un certain ordre pour ne pas perdre la logique

d'organisation des contenus. Il s'agit donc d’amener l'utilisateur à son insu à suivre l'ordre des

sections du cours.

 Par ailleurs, l'utilisabilité même détournée doit être cohérente avec les objectifs du site. Or,

nous avions montré que par le biais des contenus proposés ici à la lecture, on cherche à

donner aux futurs enseignants des outils pour construire un cours. Nous proposons une

utilisabilité qui matérialise cette dimension constructiviste et pragmatique. Nous prenons aussi

en compte l’âge et les attentes du public en introduisant une mise en situation à la fois ludique

et « concrète ».

 L'utilisabilité est détournée dans la mesure où l'utilisateur perd le contrôle de la navigation et

ne voit pas immédiatement comment entrer dans le cours. On joue aussi sur la surprise.

Fonctionnement

 

Nous avons intégré le design de l'utilisabilité directe et nous sommes appuyés sur le scénario

proposé dans les contenus remaniés (un cours de civi à l'alliance française du Caire).  

 

Premier écran 

La page 1 (introduction) de l'utilisabilité directe sans contrôle de navigation sauf un

lien « page suivante ». Jusque là, tout semble conventionnel...

 

Deuxième écran (annexe 3.1)

800 pixels de haut par 620 de large sur fond noir avec une photo entourée d’un bord

noir de 45 pixels et un autre de 45 représentant des lignes colorées entrecroisées

(concept de culture mouvante et complexe et croisée). On y voit le bureau

personnel encombré de l'apprenant à l'alliance française. Aucune consigne à l’écran,

l’utilisateur doit déplacer la souris jusqu'à trouver l'élément interactif : l'écran de

l'ordinateur.

19

En cliquant sur l'écran apparaît un mail (annexe 3.2) : « Salut  x,  j'ai un empêchement et ne pourrai pas t'aider pour le cours de civi. Ne t'inquiète pas, je t'ai laissé un document qui t'expliquera l’essentiel. Désolé! Bonne chance ! M Marcel. PS : tu vas voir, n’hésite pas à faire parler les étudiants ! »

L'apprenant, avant d'accéder au 2ème écran aura entré son prénom. Ainsi, le x

sera remplacé par celui-ci. 

Puis un autre élément devient interactif sur le bureau : un dossier qui ouvre les pages

web correspondant aux parties 2 et 3 du module (mettre un lien de navigation « page

suivante » entre ces pages). Un lien « fin de lecture » fait accéder au 3ème écran.  

 

Troisième écran (annexe 3.3)

Une image d'une salle de cours (même format que le bureau). Là non plus, aucune

indication à l'internaute sur ce qu'il faut faire. En passant la souris sur la tête

d'un élève apparaît une question introduite dans une bulle. 

On met dans ces bulles des questions témoignant des représentations d’élèves ou de

leurs interrogations sur le cours qui trouveront réponse dans les contenus du cours vers

lesquels elles redirigent. Par exemple, pour l’approche sociologique, un élève

demande : « Pourquoi les français boivent pas de vin rouge avec le poisson ? » Sept

secondes après, une question à l'apprenant apparait dans un encadré en haut de l'écran

sur fond blanc de 90 sur 530 pixels : « Parmi les pratiques culturelles, certaines ne sont

pas acceptées. Que nous dit cela sur la culture ? » Un lien « réponse » en bas à droite

de l'encadré dirige vers la page correspondante du cours.

Taille des bulles : 250 pixels par 130 (annexe 3.4). Fond coloré diversifié : #FF99CC,

#FFCC33, #6699FF, #66CC66, #F65737. Police : Comic Sans MS

Contenu des bulles : voir annexe 3.5

Les pages web du cours reprennent le design de d’utilisabilité directe, sauf qu’on

remplace les options de navigation par un seul lien : « retour vers la salle de classe »

où on cherchera d’autres questions des élèves. 

Une seule bulle peut apparaitre à chaque retour à la salle. Chaque tête ne se verra pas

attribuer une bulle. Ces questions apparaissent en réalité dans l'ordre des sections du

cours mais l'utilisateur ne le sait pas et pour garder un élément de surprise, on enlèvera 20

les phrases de transitions à la fin des sections dans les contenus remaniés. Cette aide

cognitive est remplacée ici par l'orientation des questions dans les bulles et encadrés.

Sortie de secours : la porte de la salle est interactive et permet de sortir du mode

utilisabilité détournée. On accède  directement au somaire (utilisabilité directe) avec

des liens vers les pages correspondantes du cours dans l'utilisabilité directe.   

21