Ergonomie Des Environnements Numériques D'apprentissage

MASTER PROFESSIONNEL EN NOUVELLES TECHNOLOGIES
EDUCATIVES
Ergonomie des environnements

numériques d’apprentissage.
Cas : Sites web éducatifs.
Présenté par :
Zied TRABELSI
Soutenu le 11 octobre 2014 devant le jury composé de :
Dr. Najoua GHRISS : Président de Jury

Dr. Abdelamjid NACEUR : Encadrant
Dr. Mondher ABROUGUI : Examinateur
2013 - 2014
2
Remerciements
Je voudrais tout d’abord exprimer mes plus profonds remerciements à mon direc-
teur de mémoire Dr. Abdelmajid NACEUR pour le temps qu’il a consacré à m’apporter
les outils méthodologiques indispensables à conduire ce projet.
L’enseignement de qualité dispensé par cette formation a également su nourir mes
réflexions et a présenté une profonde satisfaction intellectuelle, merci donc à tous les
enseignants.
J’aimerais exprimer ma gratitude à toutes les personnes, trop nombreuses pour les
citer, qui ont pris le temps de discuter de mon sujet. Chacun de ces échanges m’a aidé
à faire avancer mon analyse.
Enfin, j’adresse un grand merci à mes parents, mes deux adorables sœurs, mon
frère, ma famille et tous mes amis et proches, qui m’ont toujours soutenu et encouragé
au cours de la réalisation de ce mémoire.
i
ii
À mes chers parents. . .

Table des matières
I Introduction Générale 1
II Cadre général et théorique 5

1 Cadre général 7
I. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
II. Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
III. Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
IV. Descriptif du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
V. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2 Cadre théorique 11
I. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
II. L’apprentissage par la technologie . . . . . . . . . . . . . . . . . . . . . 12
II.1. Les approches de l’apprentissage par la technologie . . . . . . . 13
II.2. Les mécanismes de l’apprentissage par la technologie . . . . . . 15
II.3. Les théories de l’apprentissage par la technologie . . . . . . . . 16
III. L’ergonomie cognitive . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
IV. Ergonomie des sites web . . . . . . . . . . . . . . . . . . . . . . . . . . 23
IV.1. Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
IV.2. Comportement de lecture sur une page web . . . . . . . . . . . 24
IV.3. Le Design émotionnel . . . . . . . . . . . . . . . . . . . . . . . 27
IV.4. Les théories psychologiques intervenant dans l’ergonomie des
sites web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
V. Normes et critères pour la conception et l’évaluation ergonomique des
sites web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
VI. Les critères ergonomiques de Bastien et de Scapin : . . . . . . . . . . . 34
VI.1. Premier critère principal : Le guidage . . . . . . . . . . . . . . . 35
iii
iv TABLE DES MATIÈRES
VI.2. Deuxième critère principal : Charge de Travail . . . . . . . . . . 38

VI.3. Troisième critère principal : Contrôle explicite . . . . . . . . . . 39
VI.4. Quatrième critère principal : Adaptabilité . . . . . . . . . . . . 40
VI.5. Cinquième critère principal : Gestion des Erreurs . . . . . . . . 41
VI.6. Sixième critère principal : Homogénéité/ Cohérence . . . . . . . 43
VI.7. Septième critère principal : Signifiance des codes et dénominations 43
VI.8. Huitième critère principal : Compatibilité . . . . . . . . . . . . . 44
VII. Design pédagogique des ENA . . . . . . . . . . . . . . . . . . . . . . . 44
VII.1. Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
VII.2. Le modèle ADDIE . . . . . . . . . . . . . . . . . . . . . . . . . 45
VIII. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
III Ergonomie des sites web éducatifs 51

3 Guide ergonomique pour la conception de sites web éducatifs 53
I. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
II. Conception du guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
III. Guide ergonomique pour la conception d’un site web éducatif . . . . . . 54
III.1. Guidage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
III.2. Charge de travail : . . . . . . . . . . . . . . . . . . . . . . . . . 80
III.3. Contrôle explicite : . . . . . . . . . . . . . . . . . . . . . . . . . 85
III.4. Adaptabilité : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
III.5. Gestion des erreurs : . . . . . . . . . . . . . . . . . . . . . . . . 92
III.6. Homogénéité/Cohérence : . . . . . . . . . . . . . . . . . . . . . 97
III.7. Signifiance des codes et dénomination : . . . . . . . . . . . . . . 98
III.8. Compatibilité : . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
IV. Utilisation du guide au cours du processus de développement du site
web éducatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
V. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
4 Évaluation ergonomique des sites web éducatifs 103

I. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
II. Les méthodes d’évaluation ergonomique des sites web . . . . . . . . . . 103
II.1. Les tests utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . 104
II.2. Les questionnaires et les entretiens . . . . . . . . . . . . . . . . 105
II.3. Les méthodes d’inspection ergonomique . . . . . . . . . . . . . 106
II.4. Les évaluations automatiques . . . . . . . . . . . . . . . . . . . 107
III. Questionnaire utilisateur d’évaluation ergonomique des sites web éducatifs107
III.1. Conception du questionnaire . . . . . . . . . . . . . . . . . . . 107
III.2. Le questionnaire utilisateur . . . . . . . . . . . . . . . . . . . . 108
TABLE DES MATIÈRES v
III.3. Critères évalués . . . . . . . . . . . . . . . . . . . . . . . . . . 110

III.4. Mode de notation . . . . . . . . . . . . . . . . . . . . . . . . . 113
III.5. Utilisation du questionnaire . . . . . . . . . . . . . . . . . . . . 114
IV. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
IV Etude de cas et expérimentation 117

5 Mise en ligne d’un site web éducatif 119
I. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
II. Développement du cours en ligne . . . . . . . . . . . . . . . . . . . . . 119
II.1. Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
II.2. Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
II.3. Développement . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
II.4. Mise en œuvre ou Implémentation . . . . . . . . . . . . . . . . . 125
II.5. Évaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
III. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
6 Expérimentation 127
I. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
II. Hypothèse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
III. Échantillon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
IV. Ajustement ergonomique du système d’apprentissage . . . . . . . . . . 129
IV.1. Lacunes ergonomiques de la version originale de l’ENA : . . . . 129
IV.2. Ajustements ergonomiques appliqués à la version originale de
l’ENA : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
V. Discussion des résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
V.1. Les scores globaux des deux groupes . . . . . . . . . . . . . . . 131
V.2. Les scores pour les huit critères principaux de Bastien et Scapin
des deux groupes . . . . . . . . . . . . . . . . . . . . . . . . . . 132
V.3. Les scores des trois sous-critères du guidage sur lesquels on a
appliqué l’ajustement ergonomique . . . . . . . . . . . . . . . . 133
VI. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
V Conclusion générale et perspectives 137

A Carte conceptuelle du cours en ligne 141
B Contenu et structuration du module en ligne 143

vi TABLE DES MATIÈRES
C Fiches modules du cours en ligne : Niveau 0 147

I. Système d’entrée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
II. Système d’apprentissage . . . . . . . . . . . . . . . . . . . . . . . . . . 149
III. Système de sortie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
D Cahier des charges du cours en ligne 151
Bibliographie 155
Table des figures
2.1 Théorie cognitive de l’apprentissage multimédia . . . . . . . . . . . . . 18

2.2 La pyramide des Besoins de Maslow . . . . . . . . . . . . . . . . . . . 27
2.3 Réorganisation de la pyramide de Maslow en fonction des besoins des
internautes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.4 La loi de proximité fait que l’on perçoit deux groupes . . . . . . . . . . 29
2.5 La loi de similarité par la taille fait que l’on perçoit deux types d’objets 30
2.6 La loi de similarité par la forme fait que l’on perçoit deux types d’objets 30
2.7 La loi de similarité par la couleur fait que l’on perçoit deux types d’ob-
jets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.8 Les différentes formes de ces 7 portes vous donnent des indices sur la
manière de les actionner . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.9 Critères de Bastien et Scapin . . . . . . . . . . . . . . . . . . . . . . . 35
3.1 Système de navigation horizontal . . . . . . . . . . . . . . . . . . . . . 55

3.2 Système de navigation vertical . . . . . . . . . . . . . . . . . . . . . . . 56
3.3 Système d’onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.4 Système de navigation mixte . . . . . . . . . . . . . . . . . . . . . . . . 58
6.1 Différence du score global entre les groupes d’apprenants . . . . . . . . 132

6.2 Score des deux groupes pour les huit critères ergonomique de Bastien
et Scapin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
6.3 Score des deux groupes d’apprenants selon trois sous critère du guidage 134
vii
viii TABLE DES FIGURES
Liste des tableaux
2.1 Trois métaphores du mécanisme d’apprentissage . . . . . . . . . . . . . 16

2.2 Les trois processus cognitifs en jeu pour un apprentissage actif par la
technologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.3 liste des normes et standards ergonomiques les plus répandus . . . . . 33
3.1 les combinaisons de couleurs à utiliser ou à éviter sur une page web . . 77
3.2 Expressions à éviter dans les messages d’erreurs . . . . . . . . . . . . . 95
106table.4.1
4.3 Système de notation pour les affirmations positives . . . . . . . . . . . 114
4.4 Système de notation pour les affirmations négatives . . . . . . . . . . . 114
4.5 Les notes des différents critères . . . . . . . . . . . . . . . . . . . . . . 115
5.1 Scénario des trois premières activités. . . . . . . . . . . . . . . . . . . . 123

5.2 Activité N4 : TP sur la syntaxe de base du langage Java . . . . . . . . 124
6.1 Caractéristiques des deux échantillons d’étudiants . . . . . . . . . . . . 128

6.2 Les scores globaux des deux groupes . . . . . . . . . . . . . . . . . . . 131
6.3 Scores des deux groupes d’apprenants selon les critères ergonomiques
principaux de Bastien et Scapin . . . . . . . . . . . . . . . . . . . . . . 132
6.4 Scores des deux groupes d’apprenants pour trois sous-critères du guidage134
ix
x LISTE DES TABLEAUX
Première partie
Introduction Générale
1
Au cours de ces dernières années, l’integration des TIC 1 dans l’enseignement a
pris une grande ampleur. À l’école, au lycée ou encore à l’université les responsables
et les acteurs des formations accordent de plus en plus de place à cette integration
dans leurs systèmes d’apprentissage. On parle déjà de « l’apprentissage par les TIC ».
Au cours de cet apprentissage, l’expérience pédagogique se construit avec les sup-
ports et moyens offerts par les TIC. De moyens offrants des nouvelles formes de pré-
sentation des messages et plusieurs niveaux d’interactivité (Mayer, 2010) .
On distingue alors deux démarches de l’apprentissage par les TIC : une démarche
centrée sur la technologie et une autre centrée sur l’apprenant. La première, la plus
utilisée, se préoccupe essentiellement de l’utilisation des TIC dans l’enseignement en
offrant l’accès à ces technologies de pointe. Cette approche n’a jamais tenu sa promesse
vu qu’elle ne tient pas compte de l’apprenant et postule que les apprenants et les
enseignants s’adapteront aux exigences des nouvelles technologies et non l’inverse.
Adopter la deuxième approche, c’est s’intéresser d’abord aux mécanismes et processus
de l’apprentissage et considérer les TIC comme simples supports et moyens. Cette
approche postule que la technologie doit s’adapter aux besoins de l’apprenant et de
l’enseignant, une exigence souvent absente lorsqu’il s’agit d’offrir aux apprenants un
accès aux TIC.
L’adoption de l’approche centrée sur l’apprenant place les qualités ergonomiques
des environnements numériques d’apprentissage (ENA) 2 au centre des préoccupations
des concepteurs techniques et pédagogiques de tels environnements vu que l’ergonomie
ne concerne pas uniquement les qualités des interfaces, mais également l’adaptation
des fonctionnalités de ces interfaces à l’activité des apprenants.
Pour évaluer les qualités ergonomiques des ENA, les concepteurs ont eu recours
à plusieurs normes et critères utilisés en sciences informatiques dont les plus utilisées
sont les critères de Scapin et Bastien (Bastien & Scapin, 1993) ; une liste de 18 critères
ergonomiques recouvrant la totalité des aspects graphiques et interactionnels. Elle
est considérée comme la plus aboutie du fait de son caractère abstrait et général et
assez puissante pour être utilisable dans tous les domaines des IHM 3 (Logiciels, web,
1. TIC : Technologies d’Informations et de Communications

2. On utilisera, dans la suite de ce travail, le terme ENA pour désigner "environnement(s) numé-
rique(s) d’apprentissage.
3. IHM : Interface Homme Machine.
3
produit) et dans la phase de conception et de l’évaluation des ENA.
Mais, l’utilisation de cette liste ergonomique dans les ENA reste timide pour ne
pas dire inexistante. C’est dans ce contexte que se situe notre projet de fin d’études
de master professionnel en Nouvelles Technologies Éducatives intitulé : "l’ergonomie
dans la conception et l’évaluation des environnements numériques d’apprentissage.
Cas : Sites web éducatifs."
On se propose alors d’étudier les mécanismes de l’apprentissage par la technologie 1
centrée sur l’apprenant et ces conséquences sur l’utilisation des TIC en éducation en
présentant le rôle de l’ergonomie cognitive dans le processus de l’apprentissage par
les ENA. Après cette étude, on va proposer un guide ergonomique pour la conception
d’un site web éducatif (cas particulier d’un ENA) et un questionnaire utilisateur pour
son évaluation ergonomique et on finira par montrer les avantages de l’integration de
l’ergonomie par une dernière étape d’expérimentation sur un cas pratique de mise en
place d’un cours en ligne intitulé "Syntaxe de base du langage Java" pour un ensemble
d’étudiants.
Ce document est organisé en trois parties. Dans la première partie, nous allons pré-
senter le cadre général et théorique du projet. Dans la deuxième partie, on va annoncer
notre guide ergonomique pour la conception d’un cours en ligne, et un questionnaire
pour son évaluation basés sur les critères de Scapin et Bastien (Bastien & Scapin,
1993). Au niveau de la troisième partie, on va essayer de montrer les avantages de
cette approche en mesurant l’impact de la conception ergonomique des ENA sur l’ap-
préciation perceptive des apprenants à travers une étude expérimentale sur un système
numérique d’apprentissage réel. Une conclusion clôturera ce document en essayant de
récapituler et synthétiser notre travail et énoncer les perspectives envisageables.
1. Tout au long de notre travail, le terme "technologie" est utilisé pour désigner les TIC.
4
Deuxième partie
Cadre général et théorique
5
Chapitre 1: Cadre général
I. Introduction
Ce premier chapitre sera consacré à la présentation du contexte et des motiva-
tions pour la réalisation de ce projet tout en évoquant les concepts clés qui doivent
être étudiés dans les chapitres suivants pour répondre à la problématique qui va être
annoncée.
On commencera par évoquer le contexte général ainsi que les motivations derrière ce
travail pour annoncer en deuxième lieu, la problématique traitée et finir par présenter
les objectifs du projet.
II. Contexte
De nos jours, les TIC prennent de plus en plus de place dans tous les domaines
de la vie de l’Homme. En éducation, l’integration des TIC, surtout après l’apparition
d’Internet, a été considérée comme la troisième grande révolution dans ce domaine
après l’invention de l’écriture il y a 5000 ans et l’imprimerie il y a 500 ans.
Désormais, l’apprentissage par les TIC est devenu une pratique indispensable pour
toutes les institutions d’enseignement et de formation. Les projets se multiplient créant
ainsi de plus en plus d’ENA qui sont devenus les concurrents sérieux aux classes
classiques.
Plusieurs adeptes de ce phénomène postulent que, dans quelques années, ces en-
vironnements vont remplacer définitivement les classes classiques (Cuban, 1986) et
annoncent l’avènement de l’apprentissage numérique en dépit de l’apprentissage clas-
sique, une attitude qui n’est pas nouvelle en éducation. Dans les années 20, Thomas
Edison prévoyait que « le film allait révolutionner notre système éducatif » et que « les
7
Chapitre 1. Cadre général
livres seraient bientôt dépassés dans nos écoles » 1 . Bien que le film fût la technologie
de pointe à cette époque, le recours aux films en classe reste, à nos jours, très rares.
En faites, les gens qui soutiennent ces postulats ignorent que la mise en place
des ENA doit apporter tout à la fois la qualité d’un cours en présentiel et celle d’un
contenu rédigé et imprimé, qualités auxquelles s’ajouteraient les attributs spécifiques
du support numérique tel que la rapidité d’accès, la flexibilité, ou encore l’interactivité.
Une approche d’apprentissage centrée sur la technologie ne peut jamais atteindre ces
qualités, autrement dit, elle restera toujours dans la sphère de l’adoption et l’utilisation
de la technologie en éducation et ne peut jamais atteindre le niveau de l’appropriation
(Norman, 1993) (Saettler, 2004).
Une approche de l’apprentissage centrée sur l’apprenant peut remédier au pro-
blème de la première. En effet, plusieurs recherches et études ont été menées sur
les nouvelles formes d’apprentissage par la technologie. Les plus distinguables étaient
celles inspirées de la recherche en sciences cognitives et surtout la théorie cognitive
de l’apprentissage multimédia 2 (Mayer, 2005) qui met l’accent sur l’importance de
l’adéquation des technologies aux activités et aux opérations mentales engagées par
les apprenants en situation d’apprentissage via ces technologies. Bien que ça serait
impossible de prévoir tous les profils utilisateurs possibles, mais cette théorie, postule
qu’on peut prendre en compte des caractéristiques cognitives communes à l’ensemble
des apprenants.
Dans le cas de l’apprentissage via les ENA basé sur les technologies web, l’appre-
nant est en face d’une interface web via laquelle il va interagir avec l’ENA. L’ergono-
mie cognitive vient ici comme le moyen idéal pour ajuster ces interfaces pour qu’elles
soient, le plus possible, adaptées aux activités des apprenants. En effet, l’ergonomie
cognitive se base sur le concept de la « représentation mentale », concept clé dans
le domaine de l’apprentissage par la technologie et tous les projets de mise ligne des
ENA doivent tenir compte de ce concept aussi bien dans la phase de conception que
dans l’évaluation du projet.
Plusieurs normes, conventions, listes de critères, checklists ont été proposées pour
la réalisation des interfaces web ergonomiques. C. Bastien et D. Scapin (Bastien &
1. En 1913, Thomas Edison a affirmé :"Books will soon be obsolete in schools . . . . Our school
system will be completely changed in the next ten years"
2. Cognitive Theory of Multimedia Learning, CTML
8
Scapin, 1993) ont élaboré une liste de 18 critères ergonomiques considérée comme
la liste la plus complète en matière d’ergonomie des interfaces Homme-Machine en
général. Une spécification pour les sites web a été établie pour ces critères (Bastien,
Leulier, & Scapin, 1998).
En plus, avec l’apparition de nouveaux environnements d’apprentissage il y a eu
l’apparition de nouveaux modèles de Design pédagogique. Des modèles qui tiennent
en considération les nouvelles caractéristiques de ces environnements. Un modèle va
se distinguer dans ce domaine à savoir le modèle ADDIE 1 . Ce modèle présente une
méthodologie structurée pour la réalisation des systèmes d’apprentissages numériques
qui commence par l’analyse et s’achève par la phase d’évaluation.
III. Problématique
Bien que les recherches en ergonomie cognitive ont commencé il y a longtemps et

la plus part des recommandations, critères, normes sont basés essentiellement sur ces
recherches. Son application dans le domaine éducatif reste très faible, pour ne pas dire
inexistante.
La majorité des ENA souffrent du point de vue ergonomique ce qui a entrainé
dans la plupart des cas leurs échecs. En effet, la plupart des projets essayent de mettre
en ligne un contenu, originalement conçu pour les supports papier, en lui ajoutant
une couche d’interactivité sans donner vraiment de l’importance à la qualité ergo-
nomique de l’environnement en croyant qu’en appliquant de nouvelles pratiques pé-
dagogiques l’apprenant s’adaptera forcément au nouveau décor. En vain, ces projets
finissent souvent par un échec. Tant que l’apprenant n’est pas au centre du système
de l’apprentissage, tout projet sera voué à l’échec.
L’idée, à travers ce travail, est d’essayer d’appliquer l’ergonomie dans un projet de
développement d’un ENA et montrer l’importance d’une réflexion ergonomique tout
au long du cycle de vie du projet.
1. ADDIE acronyme de :Analyse Design Developpement Implementation Evaluation. On pré-

sentera ce modèle au niveau du cinquième chapitre "Mise en ligne d’un site web éducatif".
9
IV. Descriptif du projet

On se propose au cours de ce projet de réaliser :
1. Un guide ergonomique pour la conception d’un site web éducatif sur la base des
critères de C. Bastien et D. Scapin (Bastien & Scapin, 1993).
2. Un questionnaire utilisateur pour l’évaluation ergonomique d’un site web édu-

catif.
3. Pour montrer les avantages de l’integration de l’ergonomie dans le processus

de développement d’un système d’apprentissage numérique, on va recourir à une
dernière phase d’expérimentation sur un cas pratique de mise en place d’un cours
en ligne intitulé "Syntaxe de base du langage Java "et l’impact d’une conception
ergonomique sur l’appréciation perceptive des apprenants.
V. Conclusion
Dans ce chapitre, on a essayé, en premier lieu, d’évoquer l’intérêt primordial pour
l’apprentissage avec les TIC de prendre en compte les aspects ergonomiques des envi-
ronnements numériques étant donné que la représentation mentale des apprenants sur
ces espaces dépend, dans une majeure partie, des qualités des interfaces présentées et
que la pédagogie seule ne permet pas l’adaptation et l’appropriation de ces nouveaux
environnements par les apprenants. À partir de ce constat, on a essayé d’identifier
les concepts clés que nous devons étudier pour réaliser notre projet en proposant une
solution et en la testant sur un cas particulier.
Dans le prochain chapitre, on va présenter les différents concepts qui vont servir
de base théorique pour notre projet.
10
Chapitre 2: Cadre théorique
I. Introduction
Dès la préhistoire, l’Homme est tributaire de la transmission de ses savoir-faire
afin de survivre et de se développer. L’homo sapiens qui vivait 40000 ans avant notre
ère a produit des outils, des armes, des habitats, etc. Ce savoir se transmettait d’une
génération à une autre. C’étaient les premières formes d’apprentissage.
Il y a 5000 ans, l’Homme a inventé « l’écriture 1 ». À cette époque, en Mésopo-
tamie 2 , on attribuait à cette ‘nouvelle technologie’ une origine comptable, mais son
utilisation a dépassé de loin ce domaine et cette zone géographique pour se générali-
ser sur toutes les activités de l’Homme et où il se trouvait. L’apprentissage s’est vu
révolutionné par cette technologie qui est devenue le support dominant des activités
d’apprentissage et de transmission et stockage des savoirs et savoir-faire.
Il y a 500 ans, l’Homme a inventé « l’imprimerie 3 ». Une deuxième invention
technologique qui va révolutionner la vie de l’Homme et surtout l’apprentissage.
Au siècle dernier, il y a environ 50 ans, l’Homme a inventé l’Informatique et l’In-
ternet 4 qui devient la troisième grande invention technologique qui va révolutionner
l’apprentissage par les nouvelles formes de transmissions et traitement d’informations
qu’elles offrent.
Mais si aucune personne, de nos jours, ne peut contester l’impact de ces nouvelles
1. Les premières écritures datent de 3400 avant J-C
2. La Mésopotamie est la région historique du Moyen-Orient située dans le Croissant fertile, entre
le Tigre et l’Euphrate.
3. L’imprimerie a été inventée par l’allemand Gutenberg en 1454 en perfectionnant des techniques
chinoises anciennes, datant du 2ème siècle après J-C.
4. On ne fait pas ici une différence entre ces deux technologies,à savoir Informatique et Internet,
qui sont techniquement parlant différents et indépendants, et on suppose que ces deux technologies,
ensemble, constituent une grande révolution technologique.
11
Chapitre 2. Cadre théorique
technologies dans l’apprentissage et le fait que leurs adoption et utilisation sont incon-
tournable, les résultats de plusieurs recherches scientifiques montrent que l’Homme n’a
pas encore approprié cette technologie dans ce domaine. Ce qui nous mène à essayer
d’analyser de près les différentes approches de l’apprentissage par la technologie ainsi
que les mécanismes intervenants dans un tel type d’apprentissage et les conséquences
de ses analyses sur l’enseignement par la technologie pour répondre, à la fin, aux
questionnements suivants : comment apprend-on à l’aide de la technologie ? (science
de l’apprentissage) et comment exploiter la technologie pour faciliter l’apprentissage ?
(science de l’enseignement)
Au niveau de la première partie de ce chapitre, on commencera par présenter le
concept de l’apprentissage par la technologie en évoquant les deux approches adoptées
et les mécanismes d’un tel type d’apprentissage pour aborder au niveau de la deuxième
partie le concept de l’ergonomie cognitive comme étant un paradigme important dans
les mécanismes de l’apprentissage par la technologie pour finir par présenter le Design
pédagogique des ENA.
II. L’apprentissage par la technologie

Dès la préhistoire, tout apprentissage intègre nécessairement la technologie. L’écri-
ture est une technologie, le papier, la craie, le tableau noir, etc. Des technologies certes
anciennes mais fiables à nos jours. Dans notre travail, on considère par technologie
l’outil informatique et Internet ou d’une manière plus précise : les TIC
Si on considère que « l’apprentissage est une modification durable des connaissances
de l’apprenant attribuable à l’expérience » (Mayer, 2008) on peut alors considérer
que l’apprentissage par la technologie « implique des situations d’apprentissage dans
lesquelles l’expérience pédagogique se construit avec le support d’un instrument tel que
l’ordinateur ou Internet. »(Mayer, 2008)
Cette technologie offre des nouvelles formes de présentation des savoirs : images,
animations, vidéos, son, etc. des formes qui offrent plus de choix à l’enseignant pour
guider et accompagner les apprenants dans leurs apprentissages.
En plus, avec la notion des liens hypertextes, boutons, icônes, etc. . . les TIC as-
surent plusieurs niveaux et formes d’interactivité. En ajoutant à tout ça, la puissance
12
de calcul de plus en plus importante et les services de recherches d’informations, on

peut déduire que les TIC représentent, aujourd’hui, la meilleure opportunité comme
support de l’apprentissage.
En effet, partant du constat de Lowyck qui décrit l’apprentissage par la technologie
comme « un élan généralisé vers une tentative d’utilisation de la technologie disponible
aux fins de l’enseignement scolaire » (Lowyck, 2008), les TIC et plus particulièrement
Internet se présentent comme les moyens technologiques les plus utilisés pour favoriser
l’apprentissage.
De ce fait, on assiste aujourd’hui à l’émergence d’une nouvelle forme d’environ-
nements d’apprentissage, en parallèle avec les environnements classiques (salles de
classe, amphis, laboratoires, ateliers, etc.), généralement appelés « Environnements
Numériques d’Apprentissage » ou ENA.
Graesser, Chipman et King (Graesser, Chipman, & King, 2008) définissent dix
types d’ENA.
L’utilisation de chaque type dépend de la nature de l’apprentissage, des apprenants,
des moyens à la disposition des responsables des systèmes d’apprentissage, etc.
Les adeptes « fanatiques » de l’utilisation des TIC dans l’apprentissage essayent
toujours d’affirmer que les TIC vont transformer l’éducation et la formation. D’autres
voix, critiquant ce point de vue, se font entendre postulant que l’integration des TIC
en éducation doit être rationalisée et adaptée aux spécificités des mécanismes de l’ap-
prentissage chez l’Homme, d’où l’apparition de deux approches : l’une centrée sur la
technologie et l’autre sur l’apprenant.
II.1. Les approches de l’apprentissage par la technologie
II.1.a. L’approche centrée sur la technologie
L’idée centrale de cette approche est « ce que la technologie peut faire à l’appren-
tissage ». Par ce fait, la technologie a comme rôle d’offrir un accès à l’instruction pour
atteindre un objectif final qui n’est autre que d’utiliser la technologie pour enseigner
(Saettler, 2004).
L’approche centrée sur la technologie postule que les apprenants et les enseignants
13
s’adapteront aux exigences des nouvelles technologies et non l’inverse. Un postulat mis
à défaut par plusieurs expériences (Mayer, 2008).
Dans les années 30 et 40, plusieurs voix prétendaient que la radio ferait « entrer
le monde dans la classe » et prévoyaient que « le transistor serait aussi courant que
le tableau noir dans la classe », en vain, de nos jours la radio est quasi inexistante en
éducation (Saettler, 2004).
Dans les années 50, on annonçait déjà la télévision éducative comme nouveau
moyen technologique révolutionnaire d’apprentissage. Encore une fois, ce n’été qu’une
illusion (Saettler, 2004).
Cuban (Cuban, 2001) conclut : « L’introduction des technologies de l’information

à l’école au cours de deux dernières décennies n’a pas transformé l’enseignement ou
l’apprentissage, ni permis les gains de productivité que les dirigeants d’entreprise, les
responsables publics, les parents, les universitaires et les éducateurs réclamaient de
leurs vœux »
Une observation très pertinente qui doit être mentionnée sur ce sujet, c’est celle de
Saettler (Saettler, 2004) : « le défaut majeur des futurologues est de prédire l’avenir
sans se référer au passé, ou si peu ».
II.1.b. L’approche centrée sur l’apprenant
Cette approche s’appuie sur le concept du fonctionnement de l’esprit humain et elle

a comme objectif d’adapter la technologie pour favoriser l’apprentissage et affectant,
ainsi, à la technologie le rôle de soutenir les apprentissages.
En effet, cette approche postule que la technologie doit s’adapter aux besoins
de l’apprenant et de l’enseignant, car adopter une telle démarche implique que nous
devons tenir compte des mécanismes de l’apprentissage et considérer la technologie
comme simple support (Mayer, 2008).
Ces exigences sont souvent ignorées par les concepteurs des systèmes d’apprentis-
sage numériques ce qui influe sur la qualité de tels systèmes.
14
II.2. Les mécanismes de l’apprentissage par la technolo-

gie
Pour parler des mécanismes de l’apprentissage par la technologie il faut impérati-
vement présenter les mécanismes de l’apprentissage classique.
En effet, on peut distinguer trois grandes conceptions de l’apprentissage qui se sont
démarquées de toutes les théories sur l’apprentissage durant le siècle dernier.
Alors que le béhaviorisme postulait que l’apprentissage est un processus de consoli-
dation de réponses par renforcements, la psychologie cognitive a apporté une nouvelle
thèse, en mettant l’accent sur le rôle central du traitement de l’information, conduisant
à concevoir l’apprentissage comme une construction active et interne de savoirs.
Le constructivisme s’est profondément démarqué de ces deux visions en mettant le
rôle actif de l’apprenant, comme étant un constructeur de sens, au premier plan. Vers la
fin du XXe siècle, la vision constructiviste a été remplacée par le socioconstructivisme.
Cette théorie, qui domine aujourd’hui, considère que "les processus psychologiques
internes à l’apprenant entretiennent une relation réflexive avec les aspects sociaux et
situationnels qui influent sur l’apprentissage "(Mayer, 2008).
Ces trois visions ou trois ‘métaphores’ comme R. Mayer (Mayer, 2005) les appelle
sont présentées dans le tableau ci-dessous :
15
Métaphore Apprenant Enseignant Rôle de la

technologie
Renforcement Réceptacle Distribuer de ré- Solliciter la
passif de récom- compenses et de réponse, donner
penses et de punitions un feedback
punitions
Acquisition d’in- Réceptacle Diffuseur d’in- Donner accès
formations passif d’informa- formations aux informa-
tions tions
Construction Créateur de sens Guide cognitif Guider le trai-
des savoirs et constructeur tement cognitif
de connaissances au cours de l’ap-
prentissage
Tableau 2.1 – Trois métaphores du mécanisme d’apprentissage
Tenir compte de ces trois grandes visions est essentiel dans le développement des
technologies éducatives. Mais, le cognitivisme et le constructivisme (et socioconstruc-
tivisme) restent les plus dominants lorsqu’il s’agit d’intégrer les TIC dans l’apprentis-
sage.
En faites, ces deux visions favorisent l’apprentissage actif qui garantit au mieux les
apprentissages signifiants vu que l’apprenant va lui-même créer son savoir et donc il
deviendra constructeur de sens. Les chercheurs en technologies éducatives se sont basés
sur ces deux visions pour décrire les mécanismes de l’apprentissage par la technologie.
II.3. Les théories de l’apprentissage par la technologie

II.3.a. La théorie cognitive de l’apprentissage multimédia :
II.3.a.i. Présentation :
La théorie cognitive de l’apprentissage multimédia (Cognitive Theory of Multime-

dia Learning, abrégé CTML) élaborée par Richard Mayer est la théorie référence en
matière d’apprentissage par la technologie. Elle se base sur trois présupposés princi-
paux issus des sciences cognitives de l’apprentissage :
• Le traitement cognitif diffère selon que l’information est de type visuel ou auditif.
16
Le cerveau humain dispose de deux canaux distincts pour traiter l’information :

le traitement se fait par doubles canaux (Paivio, 1986, 2007)
• La capacité de traitement de chaque canal est limitée. Chaque canal ne peut trai-
ter qu’une quantité limitée d’informations à la fois :Capacité limitée (Baddeley,
1986)
• Le dernier présupposé est que l’être humain s’engage activement dans le trai-
tement cognitif afin de construire des représentations mentales cohérentes avec
ses expériences. En effet, l’apprentissage profond se réalise lors de l’engagement
des processus cognitifs appropriés (sélection, organisation et integration). C’est
ce qu’on appelle le traitement actif ou traitement cognitif actif dont le résul-
tat est la construction d’une représentation mentale cohérente appelée « modèle
mentale » (Mayer, 2008 ; Wittrock, 1989)
La théorie cognitive de l’apprentissage multimédia repose sur trois types de mé-

moires à savoir :
1. La mémoire sensorielle : Elle garde les images et les mots formés sur la
rétine comme des images visuelles et les mots parlés dans l’oreille comme des
images auditives, pendant une brève période de temps.
2. La mémoire de travail : Pour permettre la manipulation des informations de

façon active et consciente afin de construire des modèles mentaux et picturaux
ainsi que des liens entre ces derniers, la mémoire de travail retient temporaire-
ment un nombre limité d’informations.
3. La mémoire à long terme : Elle stocke les connaissances d’une manière per-
manente.
En outre, cette théorie fait intervenir trois processus cognitifs importants qui sont :
• Sélection,
• Organisation,
• integration.
17
Figure 2.1 – Théorie cognitive de l’apprentissage multimédia

(Mayer, 2008)
Comme c’est illustré dans la figure 2.1, un premier processus sélectionne les images
pertinentes de la représentation multimédia après leurs pénétrations à la mémoire
sensorielle visuelle via le canal visuel. Un autre processus similaire sélectionne les
mots parlés pertinents après leurs pénétrations à la mémoire sensorielle auditive via
le canal auditif.
Une fois les informations sont au niveau de la mémoire de travail, deux processus
d’organisation s’engagent. Le premier organise les images sélectionnées pour créer un
modèle pictural cohérent dans la mémoire de travail et le deuxième organise les mots
sélectionnés pour créer un modèle verbal cohérent. C’est le processus d’organisation.
Enfin, l’apprenant construit des connexions et des liens entre ses différents modèles
et ses connaissances antérieures stockées au niveau de sa mémoire à long terme. Ce
processus s’appelle « processus d’integration »
Le tableau ci-dessous récapitule ces trois processus :
18
Processus Description Localisation

Sélection Attention portée aux Transfert des informa-
mots et images perti- tions de la mémoire
nents sensorielle à la mé-
moire de travail
Organisation Organisation des mots Manipulation des
et images sélection- informations dans la
nés pour former des mémoire de travail
représentations men-
tales cohérentes
integration Mise en ligne des Transfert des informa-
représentations ver- tions de la mémoire à
bales et graphiques long terme à la mé-
avec les connaissances moire de travail
antérieures
Tableau 2.2 – Les trois processus cognitifs en jeu pour un apprentissage actif par la
technologie
II.3.a.ii. Les principes de l’apprentissage par la technologie se-

lon la CTML :
R. Mayer a présenté un ensemble de principes pour favoriser l’apprentissage par la

technologie en essayant de satisfaire trois conditions (Mayer, 2005 ; Gauthier & Jobin,
2009) qui sont :
• Réduction du traitement externe,
• Gestion optimisée du traitement essentiel,
• Traitement génératif favorisé.
On va présenter ces principes selon les besoins auxquels ils viennent répondre.
Réduction du traitement externe : Ou Réduction du traitement inutile. Ce

type de traitement, appelé aussi par Sweller « charge cognitive inutile » (Extraneous
Cognitive Load)(Sweller, 1999), est le traitement cognitif qui ne soutient pas les objec-
tifs pédagogiques de l’apprentissage. Mayer propose aux concepteurs des technologies
19
plusieurs principes : Cohérence, redondance, contiguïté spatiale et temporelle, signa-

lement.
1. Cohérence : Élimination de tout ce qui n’est pas en rapport avec l’objectif de

l’apprentissage.
2. Redondance : Éviter de répéter les éléments multimédias inutilement ; par

exemple : Aucun texte ne doit être ajouté à l’écran sur une animation narrative.
3. Signalisation (Signalement) : les informations essentielles sont mises en évi-

dence ; Par exemple : Donner des indices sur le déroulement de la leçon, donner
des informations de feedback, etc.
4. contiguïté spatiale : Il s’agit d’appliquer des notions comme la proximité, la

similarité, etc. ; par exemple : les textes sont placés à proximité des graphiques
correspondants.
5. contiguïté temporelle : Pour les vidéos et animations par exemple, la narra-

tion et l’animation correspondante sont présentées simultanément.
Gestion optimisée du traitement essentiel : Ce traitement, cognitif appelé

par Sweller « charge cognitive intrinsèque » (Sweller, 1999) et visant à « se repré-
senter mentalement les informations essentielles en rapport avec l’objectif de la leçon,
doit être géré au mieux et pour s’y faire, Mayer suggère des principes tels que la
segmentation, le pré entrainement, la modalité.
1. Segmentation : Découpage sémantique du cours. Il faut toujours essayer de

granulariser les séquences pédagogiques.
2. Pré entrainement (ou Préformation) : Donner aux apprenants ayant peu

d’expérience une formation préalable à la désignation, à la localisation et aux
caractéristiques des principales composantes.
3. Modalité : Présentation des mots sous forme verbale plutôt que dans les textes
à l’écran.
20
Traitement génératif favorisé : Ce traitement cognitif profond que Sweller

l’appelle « charge cognitive permanente » (Sweller, 1999) doit être favorisé vu que
c’est le processus cognitif responsable de l’organisation mentale des informations et
leurs integrations aux connaissances utiles. Mayer propose le principe de multimédia
et personnalisation.
1. Multimédia : Elle part du fait que l’apprenant apprend plus en profondeur

lorsqu’il est encouragé à construire des liens entre les mots et les images.
2. Personnalisation : Elle part du fait que plus l’apprenant a l’impression d’être
engagé dans une interaction sociale plus sa construction des sens des messages
pédagogiques sera meilleure. Par exemple : utiliser un style conversationnel,
c’est-à-dire la construction de phrase à la première ou deuxième personne.
II.3.b. Autres théories de l’apprentissage par la technologie

La recherche dans le domaine des technologies éducatives a abouti sur plusieurs
théories et travaux autres que celle de R.Mayer, les plus connus sont :
• Le modèle intégratif de compréhension de texte et d’images (Integrated Com-

prehension for Text and Picture, abrégé ICTP) proposée par Shnotz (Schnotz,
2005)
• La théorie de la charge cognitive élaborée par Sweller et Chandler (Chandler &
Sweller, 1991)
• Etc.
Ces théories se rejoignent sur l’implication d’une architecture cognitive, compor-

tant un système de mémoire multiple avec une mémoire de travail à capacité limitée
et différents canaux pour traiter et stocker l’information, dans l’apprentissage par la
technologie (Gauthier & Jobin, 2009).
Cette constatation nous a menés à penser que l’application des résultats de re-
cherche dans le domaine de l’ergonomie cognitive dans la conception des ENA va
favoriser davantage l’apprentissage via de tels environnements.
Partant du fait que l’ergonomie cognitive se base sur les travaux concernant les
aspects perceptifs, cognitifs et psychologiques de l’Homme pour adapter les outils, les
dispositifs et les machines qu’il veut les utiliser et si on suppose que l’apprentissage par
la technologie n’est autre qu’une utilisation optimisée de la technologie pour favoriser
l’apprentissage et les différentes théories dans ce domaine se basent sur les résultats
de la recherche en sciences cognitives, on peut donc penser que l’ergonomie cognitive
peut intervenir pour adapter les technologies pour l’apprentissage humain.
21
Dans la section suivante, on va essayer de présenter les principes de l’ergonomie

cognitive et son application sur les ENA, surtout les sites web éducatifs.
III. L’ergonomie cognitive

L’ergonomie cognitive (EC) est une branche de la discipline d’Ergonomie 1 .
L’association internationale de l’ergonomie (International Ergonomic Association) 2
définit l’ergonomie comme « la discipline scientifique qui vise la compréhension fon-
damentale des interactions entre les humains et les autres composantes d’un système,
et la profession qui applique principes théoriques, données et méthodes en vue d’opti-
miser le bien-être des personnes et la performance globale des systèmes »
Le terme cognition dérive du mot féminin latin « cognitio » qui signifie « Action
d’apprendre à connaitre, de faire connaissance de ». Elle est l’ensemble de processus
cognitifs qui sont les processus du cerveau qui interviennent entre la sensation et le
mouvement. En d’autres termes, la cognition réfère à tous les processus par lesquels
l’information est traitée.
Selon Alain Wisner 3 (1972) « l’Ergonomie cognitive est l’ensemble des connais-
sances scientifiques relatives aux aspects perceptifs, cognitifs et psychologiques de
l’Homme et nécessaires pour concevoir des outils, des machines et des dispositifs qui
puissent être utilisés avec le maximum du confort, de sécurité et d’efficacité. » et
elle a pour discipline fondatrice la psychologie cognitive, dont elle emprunte le cadre
théorique et la méthodologie expérimentale.
Cette science appliquée a vu le jour il y a plus de 30 ans après l’organisation de
la première conférence européenne en ergonomie cognitive à Amsterdam par Thomas
Green, Gerrit Vander Veer et quelques autres chercheurs . Cette conférence, comme la
seconde qui s’est tenue à Gmunden deux ans plus tard, ne comporterait pas l’ergonomie
cognitive dans leurs titres, l’expression « Mind and computers » a été utilisée. Le
terme Ergonomie cognitive n’a été adopté qu’en 1985 à Stuttgart après la fondation de
l’association européenne de l’ergonomie Cognitive (European Assocition of Cognitive
Ergonomics, EACE) (Hoc, 1998).
Ce qui est intéressant dans cette histoire est que cette communauté de recherche
a pris sa source plutôt dans le courant de l’étude des Interactions Homme-Ordinateur
qu’en ergonomie. Les premiers livres publiés à la suite des trois premières conférences
sont : The psychology of computer use (Green, Payne, & Veer, 1983), Reading in
1. Le terme Ergonomie a été utilisé pour la première fois par l’ingénieur et naturaliste polonais
Wojciech Jastrzębowski en 1937 et il a été redécouvert par le psychologue anglais Murrel en 1949.
2. Site officiel de l’IEA : http://www.iea.cc/
3. Alain Wisner (2 novembre 1923, Paris - 3 janvier 2004, Paris) : Médecin français, et l’un des
fondateurs de l’ergonomie en France. Il a fondé en 1955 le premier service d’ergonomie de la Régie
Renault.
22
cognitive ergonomics – mind and computers (der Veer, Tauber, & Gorny, 1984), cog-
nitive ergonomics : understanding, learning and designing human-computer interaction
(Falzon, 1990).
De nos jours, la définition de l’ergonomie cognitive d’Alain Wisner est encore par-
faitement adaptée aux pratiques actuelles de l’ergonome et fonctionne à merveille dans
le cadre des sites web. En effet, dans ce domaine l’objectif de l’EC sera d’adapter les
pages web pour qu’elles soient le plus possible adaptées aux activités des utilisateurs.
L’ergonomie vise d’améliorer le monde qui nous entoure et dans le cas de l’appren-
tissage par la technologie de parvenir à une interaction plus sereine entre les apprenants
et les TIC. Les TIC ne doivent pas nous pénaliser, mais nous aider. Plusieurs appre-
nants, et même des enseignants, se plaignent de la complexité et la non-convivialité
des ENA parce qu’elle les contraint à se conduire d’une manière très rigide et ne tient
absolument pas compte de leurs besoins.
Pour renverser ce type de rapport, l’EC appliqué aux TIC, et spécialement sur les
sites web éducatifs dans notre projet, se propose d’analyser ce dont les apprenants ont
réellement besoin et de mettre en œuvre des méthodes appropriées pour que les pages
web finales répondent aux mieux à ces besoins.
Il faut mentionner aussi que l’EC ne se restreint pas aux caractéristiques générales
de l’être humain, il faut se rappeler que nous sommes très dépendants de nos carac-
téristiques individuelles, des contextes dans lesquels nous évoluons et les objectifs que
nous poursuivons. Cette notion de tâche est importante dans la pratique ergonomique
dans le contexte d’apprentissage. Il faut que la pratique ergonomique pour les ENA
tienne compte des caractéristiques des apprenants et le contexte dans lequel l’appren-
tissage est dispensé (sociohistorique, économique, institutionnel, etc.) pour favoriser
un apprentissage signifiant ce qui correspond au postulat de la vision socioconstruc-
tiviste de l’apprentissage qui considère que « les processus psychologiques internes à
l’apprenant entretiennent une relation réflexive avec les aspects sociaux et situation-
nels qui influent sur l’apprentissage » (Mayer, 2008).
Dans la section suivante, on va présenter l’ergonomie cognitive appliquée aux sites
web en mettant l’accent sur les standards, normes et critères qui se sont imposés au
fil des années. On finira par présenter les critères ergonomiques qu’on va utiliser au
cours de ce projet en essayant de justifier ce choix.
IV. Ergonomie des sites web

IV.1. Présentation
L’ergonomie web est un sous domaine de l’ergonomie informatique qui descend
elle-même de l’ergonomie des interfaces Homme-Machine sous domaine de l’ergonomie
cognitive qui est une branche de l’ergonomie.
23
Elle se base, en grande partie, sur les théories de la psychologie cognitive. En

effet, la distinction entre psychologie et ergonomie cognitive tient essentiellement à
leurs objectifs respectifs. Elles ont les mêmes objets d’études, mais l’ergonomie a une
vocation de changer les choses sur terrain.
En s’intéressant à l’ergonomie des sites web on se place plus du côté de l’ergono-
mie mentale dont le concept princeps est la « représentation mentale ». L’interface du
site web ; qui est le canal principal de communication entre l’utilisateur et l’environ-
nement informatique doit s’adapter afin d’aider et favoriser l’accomplissement de la
tâche de l’utilisateur. Dans notre cas, où l’interface est celle de l’ENA (site web édu-
catif) et l’utilisateur n’est autre que l’apprenant, cette interface doit être conçue afin
de favoriser la construction des représentations mentales via les différents messages
multimédias pour garantir un apprentissage actif signifiant (Boucher, 2009).
Ceci peut être fait en travaillant sur deux versants :
• L’universel qui correspond aux connaissances dont l’on dispose sur les caractéris-
tiques de l’être humain, des connaissances issues principalement des recherches
en psychologie cognitive.
• Le spécifique à l’apprenant ou groupe d’apprenants, aux objectifs de l’appren-
tissage, au contexte de déroulement de l’apprentissage, etc.
L’ergonomie des sites web repose essentiellement sur les résultats des recherches
en IHM et en psychologie. On a jugé qu’il sera très utile d’exposer brièvement les
résultats les plus pertinents afin de montrer l’importance d’une réflexion ergonomique
dans le conception des sites web éducatifs.
IV.2. Comportement de lecture sur une page web

Selon une étude menée par Jackob Nielsen en juin 2013 1 , sur un site ordinaire,
81% des internautes regardent le premier paragraphe, 71% le second, 63% le troisième
et seulement 32% le quatrième. Encore plus surprenant, selon une autre recherche
du même auteur, uniquement 20% à 28% des mots sur une page web sont lus par les
internautes. En outre, ces recherches ont montré que la lecture sur les mobiles est deux
fois plus difficile que celle sur ordinateur à cause de la taille de l’écran qui exige de
nombreux aller-retour (scrolling) et un recours à la mémorisation des informations plus
important dû à la faible quantité de données visible à la fois. Les études menées par la
Online Publishers Association (OPA) 2 ont révélé des chiffres que tous les concepteurs
1. www.nngroup.com/articles/website-reading/
2. Selon une étude datant de 2007 publiée par l’association Online Publishers, les habitudes de
consommation du web sont passées de la communication au contenu. Les internautes passent aujour-
d’hui plus de temps à la lecture de l’information en ligne, avec une augmentation de plus de 35% en
4 ans, et cela, au détriment du commerce en ligne notamment
24
des sites web doivent les prendre en considération :
• Le temps moyen passé sur une page : de 30 à 60 secondes ;
• Le temps moyen passé sur un site : 2 minutes ;
• Le nombre moyen de pages consultées sur un site : 2 pages ;
• 79% des internautes lisent toujours en diagonale ;
• 16% des internautes lisent mot à mot.
Ces chiffres montrent que la lecture sur écran est moins confortable 1 ce qui rend
les internautes pressés de quitter un site web. Il faut donc que le site facilite la tâche
du lecteur pour garantir une meilleur accessibilité au contenu des pages.
Pour ce qui concerne la façon avec laquelle les internautes consultent une page web,
plusieurs observations issues de nombreux travaux sur ce domaine sont intéressantes
pour les concepteurs de sites web.
La technique, la plus répandue, qui permet d’analyser la manière dont un in-
ternaute consulte une page web est l’eyetracking (oculométrie)(Nielsen & Pernice,
2009)(Duchowski, 2007). Cette technique permet de déterminer l’endroit ou un inter-
naute regarde sur une page en ligne. Les études d’eyetracking aident à comprendre la
façon dont un internaute consulte un site web ce qui permet de fournir aux concepteurs
de sites web des données pertinentes pour adapter la présentation de leurs contenus
(Mise en forme et mise en page).
On peut citer quelques résultats intéressants issus des études du Nielsen Norman
Group 2 :
• Les photos en tant que contenu web 3 :

Le regard est attiré par des photos qui contiennent des informations pertinentes
et ignore les photos purement esthétiques.
• La partie gauche de la page 4 :

Les utilisateurs passent 69 % de leur temps à regarder la moitié gauche de la
page et 30 %, la partie droite. Un layout conventionnel a donc davantage de
chances de succès 5 .
1. www.nngroup.com/articles/mobile-contentis-twice-as-difficult/
2. Pour voir tous les articles des études d’eyetracking du N/M group : www.nngroup.com/topic/
eyetracking/all/
3. Voir article : www.nngroup.com/articles/photos-as-web-content/
4. Voir article : www.nngroup.com/articles/horizontal-attention-leans-left/
5. Pour des pages en langue arabe, c’est la partie droite de la page qui sera plus regardée.
25
• Défilement et attention 1 :
Les utilisateurs passent 80 % de leur temps à regarder des informations au-dessus
de la ligne de flottaison. Ils scrollent, oui, mais seuls 20 % de leur attention est
réservé au contenu sous la ligne de flottaison.
• La lecture en forme de F 2 :
Pour certains contenus, les utilisateurs adoptent souvent un schéma de lecture
sous forme de « F » : deux lignes horizontales suivies d’une ligne verticale.
• Affichez les nombres sous forme de chiffres 3 :

Mieux vaut écrire « 23 » plutôt que « vingt-trois » pour attirer le regard de
l’utilisateur quand il scanne la page à la recherche d’information factuelle.
• Tout ce qui ressemble à la promotion est ignoré 4 :

Seuls 14 % des utilisateurs d’un site pourtant conçu en grande partie dans les
règles de l’art ont identifié l’information qu’ils cherchaient. En effet, ils ignoraient
une zone clé car elle ressemblait trop à une bannière promotionnelle.
Une autre observation doit être évoquée lorsqu’on traite le sujet du comporte-
ment de lecture sur le web à savoir le concept de la lecture saccadée proposée par le
psycholinguiste Keith Rayner qui a montré que l’œil se déplace d’une manière non
linéaire(Rayner, 1998).
En effet, l’œil bondit d’un mot ou d’un groupe de mots à un autre puis il fait une
fixation de 0.25 seconde en moyenne. Après cette fixation, l’œil se déplace vers le mot
ou le groupe de mots suivant, par saccades. Ce mouvement s’effectue en 0.1 secondes
en moyenne. Après un certain nombre d’arrêts et de saccades, de courtes pauses de
0.3 ou 0.5 seconde surviennent pour la compréhension du contenu consulté. Avec une
telle progression, un internaute peut lire en moyenne 200 à 400 mots par minute.
La prise en compte de tels résultats par les concepteurs web s’avère indispensable
afin de fournir aux internautes des contenus plus accessibles. Dans le cas des sites web
éducatifs, c’est pareil ; vu que les apprenants vont utiliser le site comme ils le font
sur n’importe quel autre site et si on adopte une approche centrée sur l’apprenant où
la technologie doit s’adapter aux caractéristiques des apprenants et la spécificité du
contexte de l’apprentissage, la compréhension du comportement de lecture sur le web
est essentielle pour concevoir des ENA conviviaux et adaptés aux apprenants.
1. Voir article : www.nngroup.com/articles/scrolling-and-attention/

2. Voir article : www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
3. Voir article : www.nngroup.com/articles/web-writing-show-numbers-asnumerals/
4. www.nngroup.com/articles/fancy-formatting-looks-like-an-ad/
26
IV.3. Le Design émotionnel

Dans les années 50 et 60, le psychologue américain Abraham Maslow a proposé sa
théorie de la hiérarchie des besoins(Maslow, 1943) qui a été interprétée et synthétisée
tardivement par ce qu’on appelle "La pyramide des besoins de Maslow" :
Figure 2.2 – La pyramide des Besoins de Maslow

(Walter, 2012)
En partant du fait que la conception des interfaces informatiques n’est autre que du
Design pour les Humains (Walter, 2012), plusieurs chercheurs ont utilisé la pyramide
de Maslow pour essayer d’améliorer et de mieux comprendre la conception de ces
interfaces.
En transposant le modèle de Maslow aux besoins des internautes, Arron Walter a
proposé une nouvelle organisation de cette pyramide :
Figure 2.3 – Réorganisation de la pyramide de Maslow en fonction des besoins des

internautes
(Walter, 2012)
Une interface doit être fiable et utilisable, mais plus encore les concepteurs d’inter-
faces web doivent "transcender ces deux besoins pour créer des expériences réellement
27
extraordinaires " (Walter, 2012) ce qui correspond à satisfaire le niveau supérieur de

la pyramide réorganisée de Maslow à savoir le niveau "agréable".
De ce fait, plusieurs chercheurs se sont intéressés au Design émotionnel, notam-
ment, le professeur en sciences cognitives Donald A. Norman qui a présenté trois
niveaux de comportements cérébraux face au Design (Norman, 2005) : les niveaux
viscéral, comportemental et réflectif.
IV.3.a. Le niveau viscéral

Il est relié au premier niveau cérébral, la partie du cerveau pré-câblé et corres-
pond à ce que "la nature nous envoie comme émotions interprétées automatiquement"
(Norman, 2005). C’est le niveau le plus immédiat qui est dominé par l’apparence.
En effet, quand on juge que quelque chose est jolie, le jugement vient de ce niveau.
Sur ce niveau, les concepteurs doivent travailler pour faire passer aux internautes
des émotions positives et agréables.
IV.3.b. Le niveau comportemental

Il est lié à la partie du cerveau qui contrôle le comportement et se base sur
l’utilisation et la manipulation des objets. C’est le niveau qui concerne l’utilisabilité 1 .
À ce niveau, les concepteurs doivent travailler sur l’ensemble de fonctionnalités,
performances des interfaces.
IV.3.c. Le niveau réflectif

Il est lié à la partie contemplative du cerveau et concerne le message, la culture et
le sens de l’interface et de son utilisation. Ce niveau est basé sur la manière dont nous
pensons à un objet. L’interprétation, la compréhension et le raisonnement viennent de
ce niveau qui détermine l’impression globale à propos d’une interface.
A ce niveau, les concepteurs d’interfaces graphiques doivent se préoccuper de
l’image que le site renvoie aux internautes.
IV.4. Les théories psychologiques intervenant dans l’er-

gonomie des sites web
IV.4.a. La théorie de la Gestalt
La psychologie de la forme traite la manière dont notre cerveau analyse le monde
environnant comme des ensembles structurés appelés ‘formes’ plutôt qu’une simple
1. Comment sentez-vous en le manipulant ? Est-il ennuyeux ou agréable à utiliser ? Est-il lent ?
Etc..
28
addition ou juxtaposition d’éléments.

Contrairement au béhaviorisme, la Gestalt théorie postule que les phénomènes
psychologiques ainsi que les comportements humains ne peuvent pas être décomposés
en une simple chaîne associative stimulus - réponse. En faites, elle annonce que « le tout
est n’est pas la somme de ses parties » et que nous percevons tout notre environnement
en termes de « bonnes formes » ; l’Homme cherche toujours la configuration perceptive
qui correspond à une sorte de modèle que nous avions en tête. Autrement dit, «
on recherche dans le monde ce qui viendrait s’intégrer à notre moule mentale ». Ce
fonctionnement cognitif est un parfait modèle d’économie mentale.
Au niveau du web, la Gestalt théorie permet de comprendre la manière dont un
utilisateur structure son champ perceptif et voit et intègre mentalement une page web
pour fournir un support théorique pour concevoir et évaluer les sites web.
Deux grandes lois interviennent dans le domaine de l’ergonomie des sites web à
savoir : la loi de proximité et de similarité.
IV.4.a.i. La loi de proximité
Cette règle énonce que notre cerveau tend à regrouper les éléments qui sont proches
physiquement. Elle est considérée comme étant une traduction d’un rapport concep-
tuel 1 . Autrement dit, on considère que deux éléments qui sont proches physiquement
entretiennent des points communs. De même, l’éloignement des deux éléments té-
moigne d’une différence entre eux.
Sur les pages web, une mauvaise application de cette loi engendrera une sensa-
tion d’étouffement. L’utilisateur perçoit un amas de choses sans pouvoir distinguer de
véritables groupes d’informations.
Figure 2.4 – La loi de proximité fait que l’on perçoit deux groupes
(Boucher, 2009)
Cette loi doit être appliquée au niveau macroscopique et microscopique d’une page
web :
1. La règle de proximité est liée à un réflexe mental de bas niveau permettant à notre cerveau de
comprendre les formes perçues : au vu de la distance qui sépare deux éléments, il va traduire ce que
cela représente sur le plan de la signification.
29
• Niveau macroscopique : Au niveau de la page web dans sa globalité. C’est-à-

dire, mettre en avant une mise en page facilement percevable : l’entête du site,
les menus de navigation, le bloc du contenu informationnel, etc.
• Niveau microscopique : A l’intérieur des blocs de la page. Par exemple, iden-

tifier au niveau de l’entête, le logo, le titre de la page et une courte description
du site.
IV.4.a.ii. La loi de similarité (similitude)
Cette loi postule que les éléments semblables ont tendance à être perçus comme
appartenant à la même forme. Notre cerveau a une tendance à regrouper les choses
qui se ressemblent. Une ressemblance ou une différence de forme entre deux éléments
témoignera que ces deux éléments sont comparables ou opposables d’un point de vue
conceptuel.
Figure 2.5 – La loi de similarité par la taille fait que l’on perçoit deux types d’objets
(Boucher, 2009)
Figure 2.6 – La loi de similarité par la forme fait que l’on perçoit deux types d’objets
(Boucher, 2009)
Au niveau d’une page web, l’application de cette loi va favoriser le groupement ou

la distinction des éléments de la page par leurs mises en forme. L’application de cette
loi doit être, comme celle de la loi de proximité, sur les deux niveaux macroscopique
et microscopique de la page.
30
Figure 2.7 – La loi de similarité par la couleur fait que l’on perçoit deux types d’objets
(Boucher, 2009)
IV.4.b. La loi de Fitts

Cette loi 1 énonce que « le temps que l’on met pour atteindre une cible est pro-
portionnel à la distance à laquelle elle se trouve, ainsi qu’à sa taille » (MacKenzie,
1992).
Dans le domaine de l’informatique, et plus particulièrement le web, l’application
de cette loi sur une interface s’appelle le Fittsizing. Elle s’applique essentiellement sur
les éléments cliquables 2 .
Plusieurs recommandations dans le domaine de l’ergonomie sont dérivées de cette
loi. Par exemple :
• Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande,
• Augmenter les surfaces cliquables des éléments cliquables,
• etc.
IV.4.c. Théorie de la perception visuelle de Gibson : Le concept

d’Affordance
Ce concept a été introduit en 1966 par James Jerom Gibson qui selon lui, l’affor-
dance « illustre... L’idée du lien mutuel entre l’animal et l’environnement. En effet,
l’affordance nous dit que l’environnement est évalué non pas par rapport à un stan-
dard extérieur mais par rapport à l’animal et à ses propres contraintes »(Luyat &
Regia-Corte, 2009)
En d’autres termes, les affordances sont les possibilités d’actions suggérées par les
caractéristiques d’un objet. Par exemple : devant une porte, un ensemble d’indices
1. La loi de Fitts a été proposée par Paul Fitts en 1954 sur la base d’expérimentations dans le
domaine psychomoteur, avec l’objectif d’améliorer l’ergonomie des cockpits d’avion.
2. Le Fittsizing, c’est l’application de la loi de Fitts dans une interface. Dans un sens restrictif, elle
concerne uniquement la compensation de la distance vers un élément par l’augmentation de sa taille.
Généralement, lorsqu’on « fittsize » une interface, c’est que l’on conçoit les objets qui la composent
en prenant en compte la loi de Fitts
31
permettra de comprendre, avant toute action, si vous devez la pousser, la tirer, la

faire glisser, etc. Parmi ces indices il ceux qui sont implicites (roulement, forme de la
poignée, etc.) et d’autres explicites (un écriteau Poussez, etc.)
Figure 2.8 – Les différentes formes de ces 7 portes vous donnent des indices sur la
manière de les actionner
Sur une page web, un ensemble d’indices est à fournir à l’utilisateur sur les objets
qu’il va utiliser. Mais aussi, les concepteurs des sites web doivent se méfier aux affor-
dances erronées (par exemple : Il ne faut pas souligner un texte bleu s’il n’est pas un
lien, etc.)
IV.4.d. Le nombre magique de Miller
Dans un article intitulé « The magic number seven, plus or minus two : Some limits
on our capacity for processing information » (Miller, 1956) le psychologue George
Armitage Miller a affirmé que l’être humain peut retenir environ sept éléments à la
fois dans sa mémoire court terme à plus ou moins deux éléments près.
Depuis, plusieurs recherches ont bien confirmé que notre mémoire à court terme
peut retenir 5 à 9 éléments. Ces éléments peuvent être de nature différente.
Au niveau du web, selon cette loi on recommande, par exemple, qu’un menu ne
doit pas contenir plus que neuf liens pour que les utilisateurs puissent les retenir.
IV.4.e. La loi de Hick
C’est un modèle qui décrit le temps qu’il faut à un utilisateur pour prendre une
décision en fonction du nombre de choix à sa disposition.
En effet, elle développe l’idée qu’il est plus facile de décider parmi un nombre réduit
d’éléments.
Le temps nécessaire pour prendre une décision croît proportionnellement au nombre
et à la complexité des options proposées.(Boucher, 2009)
32
V. Normes et critères pour la conception et l’éva-

luation ergonomique des sites web
Depuis plus de vingt ans, plusieurs équipes de recherche en ergonomie ont com-
mencé à proposer différentes normes et critères pour la conception et l’évaluation
ergonomique des interfaces informatiques 1 . Sur ces normes et critères, plusieurs adap-
tations sur les interfaces web ont été proposées.
On a essayé de faire un tour d’horizon sur ce qui est proposé pour finir par privi-
légier les quatre normes et critères détaillés dans le tableau suivant :
Normes Contenu et origine
Critères ergonomiques de 18 critères répartis en 8 dimen-

Bastien et Scapin (Bastien sions, crées en 1993 pour juger des
& Scapin, 1993) interfaces homme-machine.
Heuristiques de Nielsen 10 heuristiques créées en 1990 et
(Nielsen & Molich, 1990) révisées en 2005 pour juger l’uti-
lisabilité d’une interface utilisa-
teur.
ISO 9241 Des recommandations standards
en ergonomie. Plusieurs spécifica-
tions de cette norme ISO ont été
ajouté.
Heuristiques d’Instone Adaptation des heuristiques de
(Instone, 1997) Nielsen pour juger de l’utilisabi-
lité d’un site web.
Tableau 2.3 – liste des normes et standards ergonomiques les plus répandus
L’utilisation de telles listes doit être bien étudiée. En effet, en ergonomie on doit
toujours tenir compte du contexte et par suite, extraire des simples checklists de ces
normes et critères et essayer de les vérifier est une pratique dangereuse, car cocher un
ensemble d’assertions élémentaires ne peut pas garantir l’identification de toutes les
lacunes et défaillances des sites web. Les recommandations ergonomiques ne sont pas
des recommandations in vitro, mais elles sont en intéraction avec d’autres recomman-
1. La première proposition qui a été utilisée par les grandes entreprises du Design est celle proposée
par l’US Air Force de 1984 à 1986. Il s’agit de la compilation des connaissances sur l’utilisabilité de
l’US Air Force. Cette proposition a été nommée Guidelines for Designing User Interface Software,
EST-TR-86-278 et elle comportaient 944 directives.
33
dations. Suite à ces constatations, on a essayé de choisir la liste des critères la plus
aboutie sur deux niveaux :
• Exhaustivité des critères : La liste la plus riche et qui couvre le maximum

d’aspects ergonomiques.
• Complémentarité des critères : Les critères doivent être judicieusement défi-

nis et organisés afin d’éviter la redondance et les détails inutiles qui compliquent
davantage la conception et l’évaluation ergonomique.
Après une étude approfondie, on a opté à l’adoption des critères de Bastien et

Scapin comme critères pour la conception et l’évaluation des sites web éducatifs. Dans
la section suivante, on va présenter cette liste qui sera la base du guide ergonomique
qu’on va proposer ultérieurement.
VI. Les critères ergonomiques de Bastien et de

Scapin :
Cette liste de critères est considérée par les experts en ergonomie, la plus aboutie
pour concevoir et évaluer les interfaces Homme-Machine. Elle a été proposée par les
deux chercheurs français C. Bastien et D. Scapin. Elle est le produit d’un profond
travail de synthèse de plus de 900 recommandations dans le domaine de l’ergonomie
informatique en général.
Bastien et Scapin considèrent qu’on peut regrouper les recommandations ergono-
miques en huit dimensions à savoir le guidage, la charge de travail, le contrôle explicite,
l’adaptabilité, la gestion des erreurs, l’homogénéité et la cohérence, la signification des
codes et dénominations et enfin la compatibilité. Les cinq premiers critères ont été or-
ganisé en sous-citères comme le montre 2.9. Cette décomposition rigoureuse a produit
une liste de 18 critères élémentaires couvrant la quasi-totalité des questions ergono-
miques. Plusieurs experts utilisent la phrase suivante pour décrire cette liste : « On
pense à des choses auxquelles on n’aurait pas forcément pensé »(Bastien & Scapin,
1993 ; Bastien et al., 1998)
Mais, le caractère abstrait de la liste reste son atout majeur. Basée sur plusieurs
travaux de recherche en psychologie, neuroscience, IHM, etc. la définition de l’ensemble
des éléments de la liste repose sur un niveau d’abstraction élevé ce qui rend cette liste :
• Utilisable dans tous les domaines des interfaces Homme-Machine : Plusieurs spé-
cifications de cette liste appliquées au domaine du web, logiciel, environnements
3D, etc. ont été élaborées.
34
• Supporte l’évolution des technologies : Prenons l’exemple du web, avec l’évolu-

tion des technologies et standards, du HTML1 au HTML5, du CSS1 au CSS3,
JavaScript, AJAX, etc., les éléments de cette liste restent applicables sur les
interfaces web avec le même degré de pertinence et d’efficacité.
Figure 2.9 – Critères de Bastien et Scapin
On va présenter, dans ce qui suit, tous les critères de la liste.
VI.1. Premier critère principal : Le guidage

Ce critère couvre les sous-critères suivants :
1. Incitation,
2. Groupement/Distinction entre items (Par localisation et par format),
3. Feedback immédiat,
4. Lisibilité.
VI.1.a. L’incitation
Description :
Ce critère recouvre les moyens mis en œuvre pour amener les utilisateurs à effectuer
des actions spécifiques, qu’il s’agisse d’entrée de données ou autre. Ce critère englobe
aussi les mécanismes ou moyens faisant connaître aux utilisateurs les alternatives,
lorsque plusieurs actions sont possibles, selon les états ou contextes dans lesquels ils
se trouvent.
L’incitation concerne également les informations permettant aux utilisateurs de
savoir où ils en sont dans la réalisation de leurs tâches, d’identifier l’état ou contexte
dans lequel ils se trouvent, de même les outils d’aide et leur accessibilité.
35
Une bonne incitation facilite donc la navigation dans une application et permet
d’éviter les erreurs.
Exemple de recommandations :
• Afficher les unités de mesure des données à saisir,
• Donner un titre à chaque fenêtre,
• etc.
VI.1.b. Groupement/Distinction entre items

VI.1.b.i. Groupement Distinction entre items par localisation
Description :
Grouper les différents éléments visuels de façon cohérente et ordonnée. L’objectif
est que les caractéristiques visuelles de l’interface nous renseignent sur le sens. Ce cri-
tère concerne le positionnement des informations les unes par rapport aux autres dans
le but d’indiquer leur appartenance ou non à une même classe. Il s’agit de l’application
de la loi de proximité de la Gestalt théorie.
Distinguer des éléments par localisation, c’est de les éloigner ou les séparer d’un
point de vue géographique pour signifier leur différence et de les rapprocher pour
signifier un rapport conceptuel.
• Lorsque plusieurs options sont présentées, leur organisation doit être logique et
signifiante,
• La mise en page du site doit être facilement détectable,
• etc.
VI.1.b.ii. Groupement/Distinction entre items par format
Description :
Le critère Groupement/distinction par le format concerne plus particulièrement
les caractéristiques graphiques (format, couleur, etc.) permettant de faire apparaître
l’appartenance ou non d’items à une même classe, ou permettant d’indiquer des dis-
tinctions entre classes ou bien des items d’une même classe.
Distinguer des éléments par le format, c’est attribuer des formats différents aux
éléments qui sont différents.
C’est une application directe de la loi de similarité (similitude) de la Gestalt théorie.
36
• Établir une distinction visuelle entre des aires ayant des fonctions différentes
(commande, message, etc.),
• Établir une distinction visuelle entre les labels et les champs d’entrée,
• etc.
VI.1.c. Feedback immédiat

Description :
Ce critère concerne les réponses du site suite aux actions des utilisateurs. Dans
tous les cas, le site doit répondre à l’internaute en fonction de ces actions et requêtes.
La qualité et la rapidité du feedback sont deux facteurs importants pour l’éta-
blissement de la confiance et de la satisfaction des utilisateurs ainsi que pour leur
compréhension du dialogue ce qui leurs permet de se faire une bonne représentation
du fonctionnement du site.
Les navigateurs actuels fournissent des moyens pour indiquer les états d’avance-
ment lors d’un téléchargement ou le chargement d’une page du site. Mais, ce qui
importe le plus pour les concepteurs des sites web est d’optimiser ces temps de char-
gement et de téléchargement.
Les temps d’attente doivent être acceptables.
• Dans le cas où les traitements sont longs, une information indiquant que le
traitement est en cours doit être fournie à l’utilisateur,
• etc.
VI.1.d. Lisibilité
Description :
Il s’agit des caractéristiques lexicales de présentation des informations à l’écran
pouvant entraver ou faciliter la lecture de celles-ci (luminance des caractères, contraste
caractères/fond, dimension des lettres, espacement entre les mots, espacement entre
les lignes, etc.)
La performance est accrue lorsque la présentation des informations à l’écran tient
compte des caractéristiques cognitives et perceptives des utilisateurs. Une bonne li-
sibilité favorise la construction d’une bonne représentation mentale des informations
présentées sur le site.
Améliorer la lisibilité revient à rendre "lisibles" les contenus dans deux sens :
• Lisible dans le sens facilement déchiffrable (en anglais : legible)
37
• Lisible dans le sens intelligible et compréhensible (en anglais : readable), c’est-

à-dire utilisable par l’internaute.
• Les titres doivent être centrés,
• Les lignes de texte continu doivent être d’au moins 50 caractères,
• etc..
VI.2. Deuxième critère principal : Charge de Travail

Ce critère couvre les deux sous-critères suivants :
• Brièveté ( Concision et actions minimales),
• Densité informationnelle.
VI.2.a. Brièveté
VI.2.a.i. Concision
Description :
Ce critère concerne la charge de travail au niveau perceptif et mnésique pour ce
qui est des éléments individuels d’entrée ou de sortie.
Plus succins sont les items, plus court est le temps de lecture et plus courtes sont
les entrées plus court est le temps de lecture.
Ce critère vient pour prendre en considération le fait que les capacités de la mémoire
à court terme sont limitées et par conséquent, plus courtes sont les entrées, plus limités
sont les risques d’erreurs. Par ailleurs, plus succincts sont les items, plus court est le
temps de lecture.
• Permettre aux utilisateurs des entrées de données courtes,
• Lorsqu’une unité de mesure est associée à un champ de donnée, celle-ci doit faire
partie du label du champ plutôt qu’être saisie par les utilisateurs,
• etc.
38
VI.2.a.ii. Actions minimales
Description :
Il concerne la charge de travail concernant les actions nécessaires à l’atteinte d’un
but ou l’accomplissement d’une tâche. Il faut veiller à limiter autant que possible les
étapes par lesquelles doivent passer les apprenants.
Plus les actions nécessaires à l’atteinte d’un but sont nombreuses et compliquées,
plus la charge de travail augmente et par conséquent plus les risques d’erreurs sont
élevés.
• Minimiser le nombre des étapes dans la sélection des menus,
• Pour des documents contenant plusieurs pages, il devrait être possible d’at-
teindre une page donnée sans avoir à parcourir les pages intermédiaires une à
une,
• etc.
VI.2.b. Densité informationnelle

Description :
Ce critère concerne la charge de travail au niveau perceptif et mnésique pour des
ensembles d’éléments et non pour des items : ce qui doit être perçu et mémorisé
globalement par l’utilisateur.
• Limiter la densité informationnelle en affichant seulement les informations né-

cessaires,
• Les données qui peuvent être déduites des données saisies par l’utilisateur doivent
être calculées automatiquement (par exemple : l’utilisateur a donné l’année de
naissance le système doit déduire son âge),
• etc.
VI.3. Troisième critère principal : Contrôle explicite

• Actions explicites.
• Contrôle utilisateur.
39
VI.3.a. Actions explicites

Description :
Le critère « Actions explicites » concerne la relation pouvant exister entre le fonc-
tionnement du site et les actions des utilisateurs. Cette relation doit être explicite,
c’est-à-dire le site doit exécuter seulement les opérations demandées par l’utilisateur
et pas d’autres, et ce, au moment où il les demande.
Quand toutes les opérations du système résultent des actions des utilisateurs, on
observe moins d’erreurs et la compréhension du fonctionnement de l’application est
facilitée.
La satisfaction de ce critère minimise les risques d’erreurs et favorise la compré-
hension du fonctionnement du système.
• Le système doit requérir une action explicite de validation par l’utilisateur

(exemple : OK, valider, etc.) suite à une entrée de donnée ; aucun traitement
ne devrait être la conséquence d’une autre action,
• etc.
VI.3.b. Contrôle utilisateur

Description :
L’apprenant doit toujours avoir la main pour contrôler le déroulement (inter-
rompre, reprendre, etc.) des traitements en cours. Ses actions doivent être anticipées
et des options appropriées fournies pour chaque cas.
La prise en main du contrôle du dialogue par l’apprenant lui facilite l’apprentissage.
• Autoriser les utilisateurs à contrôler le rythme de leurs entrées plutôt que de les
faire subir le rythme du système ou d’événements extérieurs,
• etc.
VI.4. Quatrième critère principal : Adaptabilité

• Flexibilité.
• Prise en compte de l’expérience utilisateur.
40
VI.4.a. Flexibilité
Description :
Il s’agit de la mise à disposition des utilisateurs des moyens pour personnaliser
l’interface.
Il correspond aussi au nombre de façons différentes mises à la disposition des
apprenants pour atteindre un objectif donné.
• Quand certains affichages sont inutiles, les utilisateurs doivent pouvoir les désac-
tiver temporairement,
• etc.
VI.4.b. Prise en compte de l’expérience utilisateur

Description :
Ce critère concerne les moyens mis en œuvre pour respecter le niveau d’expérience
des apprenants.
Lorsque l’apprenant arrive sur le site, il n’est pas vierge de toute expérience. Il a
des connaissances sur le fonctionnement d’un site Internet. Il va essayer même s’il n’en
a pas conscience, d’appliquer ces connaissances à vos pages.
Il faut respecter « les conventions » : il y a une constatation qui postule que pour les
internautes, l’Internet est un concept général. Les moins expérimentés en particulier
ont du mal à faire la distinction entre les sites. De leur point de vue, ils vont sur
l’Internet, point. Ils s’attendent donc logiquement à ce que tous les sites fonctionnent
de la même manière. Lorsque leur expérience diffère de leurs connaissances antérieures,
leur conclusion est rapide : C’est forcément que le site ne marche pas.
• Lorsque le guidage ralentit les utilisateurs expérimentés, fournir des moyens à

ces utilisateurs de contourner ce guidage,
• etc.
VI.5. Cinquième critère principal : Gestion des Erreurs

Ce critère couvre les trois sous-critères suivants :
• Protection contre les erreurs.
• Qualité des messages d’erreurs.
• Correction des erreurs.
41
VI.5.a. Protection contre les erreurs

Description :
L’idée est que l’utilisateur ne doit pas faire l’erreur alors ce critère exige de tout
faire pour l’empêcher qu’il en commet.
Dans le cas des sites web éducatifs, l’erreur compromet l’apprentissage des appre-
nants en créant des points de rupture qui faussent le scénario pédagogique et diminue
leur motivation.
Faire une erreur n’est pas anodin pour l’internaute qui va chercher sans attendre
un coupable. Selon la personnalité de l’utilisateur et son niveau d’expertise, il va
se culpabiliser ou rejeter la faute sur le site ou même l’enseignant dans le contexte
éducatif. Aucune de ces deux alternatives ne favorise une utilisation aisée et efficace.
Ce critère concerne les moyens mis en place pour détecter et surtout prévenir les
erreurs d’entrées et de sortie.
• Toutes les actions possibles sur une interface doivent être envisagées et plus
particulièrement les appuis accidentels des touches du clavier afin que les entrées
non attendues soient détectées,
• Etc.
VI.5.b. Qualité des messages d’erreurs

Description :
Ce critère concerne la pertinence, la facilité de lecture et l’exactitude de l’infor-
mation donnée aux utilisateurs sur la nature des erreurs commises (syntaxe, format,
etc.) et sur les actions à entreprendre pour les corriger.
L’utilisateur doit facilement repérer et comprendre ses erreurs.
• Fournir des messages d’erreurs orientés tâches,
• Utiliser des messages d’erreurs aussi brefs que possible,
• Etc.
VI.5.c. Correction des erreurs

Description :
Il s’agit des moyens mis à la disposition de l’utilisateur pour corriger ses erreurs.
42
• Suite à une erreur de saisie d’une commande ou de données, donner aux utilisa-
teurs la possibilité de corriger seulement la portion de données ou de commande
qui est erronée,
• Etc.
VI.6. Sixième critère principal : Homogénéité/ Cohérence

Description :
Il s’agit des moyens mis à la disposition de l’utilisateur pour corriger ses erreurs.
Par exemple, sur un site web éducatif, pour que les apprenants puissent se forger
un modèle mental solide du site, il faut rester cohérent dans tous les choix.
Lorsqu’un internaute utilise avec succès un élément d’interface pour accomplir une
action, il essaiera immanquablement d’appliquer la même stratégie.
En effet, la cohérence exploite les apprentissages inconscients. Il ne s’agit pas de
demander aux gens de mémoriser des choses. On cherche plutôt à se servir de ce qu’ils
ont engrangé en mémoire sans s’en rendre compte puisque l’utilisateur commence à
apprendre le site dès qu’il arrive sur la première page.
• Toujours afficher au même endroit l’incitation pour la saisie des données ou des
commandes,
• Etc.
VI.7. Septième critère principal : Signifiance des codes

et dénominations
Description :
Il s’agit d’assurer une adéquation entre l’objet ou l’information affichée ou entrée
et son référent.
Il faut toujours s’assurer qu’il n’y a pas d’ambiguïté dans le sens donné aux mots
ou aux icônes. Un codage signifiant améliore le rappel et la reconnaissance des objets.
• Les titres doivent véhiculer ce qu’ils représentent, et être distincts,
• Rendre les règles d’abréviation explicites,
• Etc.
43
VI.8. Huitième critère principal : Compatibilité

Description :
Il concerne l’accord pouvant exister entre les caractéristiques des utilisateurs (mé-
moire, perceptions, habitudes, compétences, âge, attentes, etc.) et des tâches, d’une
part, et l’organisation des sorties, des entrées et du dialogue d’une application donnée,
d’autre part. La compatibilité concerne également le degré de similitude entre divers
environnements ou applications.
En vue d’augmenter l’efficacité du site, les procédures nécessaires à l’accomplisse-
ment des différentes tâches sont compatibles avec les caractéristiques des apprenants
ainsi que leurs habitudes et attentes. Sur un site web éducatif l’efficacité sera plus
accrue lorsque le cours est présenté sous forme directement utilisable.
• Les termes employés doivent être familiers aux utilisateurs, et relatifs à la tâche
à réaliser,
• Etc.
VII. Design pédagogique des ENA

VII.1. Présentation
Le terme de Design pédagogique est apparu au cours des années 1960, lorsque
certains chercheurs américains ont essayé de créer des méthodes systémiques et systé-
matiques de planification de l’enseignement.
On peut définir une méthode de Design pédagogique comme « une description du
processus de Design pédagogique, c’est-à-dire les différentes tâches que les concepteurs
pédagogiques doivent accomplir pour concevoir un système d’apprentissage (cours,
programme, leçon, module, matériel d’apprentissage, etc.) d’une manière efficace et
efficiente. »
De nos jours, on parle plutôt de méthodes d’ingénierie pédagogique et non plus de
Design pédagogique. Les chercheurs ont voulu, par ce changement de nomenclature,
mettre en avant le fait que de telles méthodes et démarches sont largement empruntées
aux différents domaines du génie et insister sur la cohérence, efficience et efficacité de
cette discipline. Il nous a paru essentiel de mentionner que les deux vocables « design
pédagogique » et « ingénierie pédagogique » désignent le même domaine. (Lior, 2013)
Ces méthodes se sont adaptées aux changements apportés par les TIC, des chan-
gements qui ont modifié les rôles des acteurs de l’apprentissage : nouveaux rôles des
enseignants, des apprenants, des responsables des formations, etc.
44
En effet, les nouveaux environnements d’apprentissage sont plus complexes que

ne l’étaient les systèmes d’apprentissage assistés par ordinateur des années 70 et 80
et que ne l’est la formation traditionnelle en salle. Les TIC ont apporté plusieurs
innovations techniques et pédagogiques compliquant ainsi la tache de tous les acteurs
de tels systèmes.
En ayant plus que 50 ans de maturité, le domaine de l’ingénierie pédagogique offre
aux concepteurs des ENA une panoplie de théorie et méthodes pour les guider dans
le processus de développement de ces nouveaux systèmes.
Les chercheurs ont été inspirés essentiellement par l’approche systémique, ils consi-
déraient alors un cours ou toute unité de formation comme un système complexe sollici-
tant l’interaction d’un ensemble d’éléments (caractéristiques des apprenants, objectifs
et stratégies pédagogiques, stratégies d’évaluation, objets d’apprentissage, etc.) qu’il
sera judicieux d’assurer leur cohérence.
Toutes les méthodes de ce domaine considèrent que les processus intervenant dans
un système d’apprentissage concernent les phases du cycle de vie de ce système. Ty-
piquement, ce cycle de vie comprend cinq phases : Analyse, Conception (ou Design),
Développement (ou Réalisation, ou Production), Implantation (ou implémentation,
Mise en œuvre) et Évaluation.
On appelle ce processus typique par le modèle ADDIE. Cet acronyme est formé
par la première lettre de chacune des cinq phases du modèle (En anglais : Analysis,
Design, Development, Implementation, Evaluation).
VII.2. Le modèle ADDIE

Pour décrire ce modèle, plusieurs auteurs utilisent la métaphore de « la chute
d’eau en cascade », on trouve fréquemment l’expression « Waterfall model ». Cette
métaphore insiste sur la séquentialité des différentes étapes du modèle et renforce l’idée
de sa linéarité. Mais les partisans du modèle postulent que son application n’est pas
rigide et peut être itérative malgré sa linéarité selon le contexte.(Ghirardini, 2012)
On va présenter brièvement les cinq étapes du processus, une explication plus
détaillée sera donnée lors de la partie de description du développement de notre cours.
VII.2.a. Analyse
Cette phase consiste à analyser un certain nombre de composantes qui servent
à orienter le projet de développement du système d’apprentissage. Par exemple, il
faut analyser le besoin de formation en spécifiant la nature exacte du problème que le
système d’apprentissage doit viser à résoudre, définir les caractéristiques de la clientèle
cible et du contexte dans lequel s’insérera la formation, identifier les attentes des
demandeurs de la formation et les contraintes avec lesquelles il faudra composer, faire
l’inventaire des ressources existantes, etc.
45
En général, dans cette étape on essaye d’identifier les facteurs reliés aux apprenants
qui auront une incidence sur la conception de l’ENA. On peut citer quelques facteurs :
Facteurs à prendre en Importance du facteur

considération
Région ou zone géographique où les ap- Cette information est nécessaire pour
prenants résident. définir la langue et les questions cultu-
relles, mais aussi pour choisir entre des
outils synchrones et asynchrones (des
apprenants situés dans des fuseaux ho-
raires différents auront des difficultés à
communiquer en temps réel).
Type d’organisation ou d’institution Cela permettra d’identifier des objectifs
dans laquelle les apprenants travaillent d’apprentissage spécifiques pour cha-
et leur fonction professionnelle. cun des groupes de public cible.
Connaissances et compétences préa- En général, les apprenants qui pos-
lables des apprenants sur le sujet. sèdent déjà des connaissances étendues
n’ont pas besoin du même genre ou ni-
veau de soutien à la formation que des
novices.
Capacités et compétences techniques Cette information permettra de définir
des apprenants en matière d’informa- la complexité des activités interactives
tique. sur ordinateur.
Temps disponible pour l’apprentissage Cette information influe sur le volume
numérique et contexte d’apprentissage. de contenu qui sera fourni et sur la
nécessité de granulariser/segmenter le
contenu du cours en petites unités.
Lieu où les apprenants suivront le cours Cela permet de déterminer le temps de
e-learning et d’où ils peuvent accéder à connexion nécessaire pour effectuer le
Internet ; peuvent-ils étudier à la mai- cours et si les apprenants peuvent télé-
son, au travail ou dans des centres e- charger des plug-ins sur Internet.
learning ?
46
Bande passante du réseau. Des limites de la bande passante

peuvent ralentir les performances de
l’application et diminuer la producti-
vité des utilisateurs. Dans certaines si-
tuations, il est préférable d’utiliser des
applications pour faible bande passante
car elles se téléchargent plus vite.
Logiciels et capacités de l’ordinateur Les exigences techniques, y compris les
à disposition de l’apprenant, p. ex. la capacités multimédias, influencent le
taille de l’écran, le nombre de couleurs choix des multimédias et des plug-ins.
qu’il peut afficher, le système de lec-
ture des sons, la RAM (quantité de mé-
moire), le type et la vitesse du proces-
seur.
Facteurs à prendre en considération pour l’analyse du public cible (Ghirardini,

2012)
VII.2.b. Conception
Cette phase vise essentiellement à spécifier les objectifs d’apprentissage et les élé-
ments de contenu qui seront abordés dans la formation, à mettre au point la stratégie
pédagogique et à sélectionner les médias d’apprentissage. Elle consiste également à
élaborer les devis médiatiques (pouvant prendre la forme, dans certains cas, de ma-
quettes ou de prototypes) des différentes composantes du matériel pédagogique inclus
dans le système d’apprentissage et qui seront remis aux personnes qui réaliseront le
matériel.(Ghirardini, 2012)
VII.2.c. Développement
Cette phase consiste à mettre en forme le système d’apprentissage, à l’aide de divers
outils (papier, crayon, appareil photographique, caméscope, caméra télé, traitement
de texte, éditeur graphique, logiciel de programmation, etc.).(Lior, 2013)
VII.2.d. Mise en oeuvre ou Implémentation

Cette phase consiste à rendre le système d’apprentissage disponible aux appre-
nants cibles, ce qui nécessite la mise en place d’une infrastructure organisationnelle et
technologique.(Lior, 2013)
47
VII.2.e. Évaluation
Cette phase consiste à porter un jugement sur différentes dimensions (qualité, effi-
cacité, etc.) du système d’apprentissage dans le but de l’améliorer (évaluation forma-
tive) ou de prendre une décision sur son adoption ou son retrait dans un milieu donné
(évaluation sommative). Une évaluation formative peut être faite après l’implantation
du système, mais également avant. Dans ce dernier cas, elle prend généralement la
forme d’une mise à l’essai (appelée aussi parfois « test-pilote ») auprès d’un nombre
restreint de représentants des apprenants ciblés, afin de vérifier si le système présente
des lacunes et, le cas échéant, d’y apporter des correctifs avant son implantation à
plus large échelle.
Une évaluation formative avant l’implantation du système peut également être faite
auprès d’experts pédagogiques et/ou d’experts du domaine visé. (Ghirardini, 2012)
Dans la partie suivante, on va détailler les étapes de développement et la mise en
ligne du cours intitulé « Syntaxe du langage Java » en utilisant le modèle ADDIE.
VIII. Conclusion
Dans un système d’apprentissage classique, l’apprenant doit être dans le centre de
ce système. Le faite d’intégrer la technologie ne doit pas affecter ce postulat.
Pour apprendre par la technologie et en étudiant les principales théories dans ce
domaine, on peut dire qu’il faut adapter la technologie aux besoins et caractéristiques
des apprenants afin de favoriser des apprentissages signifiants et ne pas penser que les
apprenants vont s’adapter aux supports technologiques. Pour satisfaire cette exigence,
on a eu recours à l’ergonomie cognitive (EC). Par sa vocation d’améliorer le monde
qui nous entoure, on va l’utiliser pour améliorer les environnements d’apprentissage
par la technologie utilisés par les apprenants.
L’EC se base essentiellement sur les résultats des recherches en psychologie et
surtout la psychologie cognitive. Plusieurs travaux dans ces domaines ont implémenté
le socle théorique de l’EC à savoir la théorie de Gestalt, la théorie des affordances, la
loi de Ftittz, les lois de Miller et Hick, etc. ainsi que la recherche dans le domaine de
la neuroscience et l’IHM.
Plusieurs normes, critères et checklists ont été présentés par les équipes de recherche
dans l’EC pour la conception et l’évaluation des IHM. En plus, des adaptations aux
interfaces des sites web ont été proposées. L’une des plus abouties, c’est la liste de
critères de Bastien et Scapin. Une liste de 18 critères élémentaires englobant la quasi-
totalité des domaines d’interaction entre les utilisateurs et une interface Machine (web
dans notre cas).
Dans la section suivante, on va présenter un guide ergonomique pour la conception
de sites web éducatifs basé sur cette liste. Un guide qui résulte de la synthèse de
48
plusieurs recommandations dans la littérature et sur le web et adaptées au contexte

éducatif.
49
50
Troisième partie
Ergonomie des sites web éducatifs
51
Chapitre 3: Guide ergonomique
pour la conception de sites web
éducatifs
I. Introduction
Au niveau de ce chapitre, on va proposer un guide ergonomique basé sur les critères
de Bastien et Scapin pour la conception de sites web éducatifs.
On commencera par décrire le processus de l’élaboration de ce guide pour le présen-
ter dans une deuxième étape. A la fin du chapitre, on essayera de mener une réflexion
sur son utilisation dans un processus de développement de cours en ligne.
II. Conception du guide

Le guide est le résultat de la synthèse de centaines de recommandations ergono-
miques qui existent au niveau de la littérature ou sur le web dans ce domaine.(Bastien
& Scapin, 1993 ; Bastien et al., 1998 ; Boucher, 2009 ; Nielsen & Molich, 1990)
Un travail minutieux a été mené afin de réaliser un guide ergonomique adapté
au contexte des sites web éducatifs. En effet, rares sont les sources qui exposent la
question ergonomique dans le processus de développement des ENA et même si on
en trouve les auteurs évoquent le rôle de l’ergonomie sans donner une proposition qui
peut servir de cadre de conception ou d’évaluation.
La majorité des livres et articles dans ce domaine évoquent l’ergonomie des sites
web en général. La majorité des recommandations trouvées concernent les sites web
de vente en ligne, d’informations, des sites web personnels et des organisations qui
53
Chapitre 3. Guide ergonomique pour la conception de sites web éducatifs
proposent des chartes ergonomiques spécifiques aux sites qu’elles développent.

En outre, travailler sur la base de la liste ergonomique de Bastien et Scapin et en
essayant de répondre aux 18 critères élémentaires qui composent cette liste a rendu la
tâche plus délicate. Il fallait regrouper les recommandations sous les critères adéquats
et sans redondance alors que les recommandations qu’on trouve sont présentées dans
l’ordre que l’auteur de la source trouve logique.
Organiser et synthétiser toutes ces données en tenant compte du contexte dans
lequel on travaille et en se basant sur les travaux de recherches en ergonomie cognitive
n’étaient pas une tâche simple surtout avec l’absence de cadre de travail solide dans ce
domaine. On essayera alors par ce guide d’offrir une première proposition d’un guide
ergonomique efficace pour la conception des sites web éducatifs qui peut être utilisé
par les concepteurs techniques et pédagogiques de ces environnements d’apprentissage
et qui peut être révisé et enrichi par les personnes et institutions travaillant dans ce
domaine.
Ce guide est composé de plus que 400 recommandations organisées en 18 critères
élémentaires conformément à la liste ergonomique de Bastien et Scapin.
III. Guide ergonomique pour la conception d’un

site web éducatif
54
III.1. Guidage
III.1.a. Incitaion
La navigation
• Elle doit être intuitive aux yeux de l’apprenant ce qui permet de garantir une
cinématique fluide des écrans du site.
• Sur n’importe qu’elle page et dans n’importe quel moment, l’apprenant doit
pouvoir répondre facilement aux questions suivantes : Où suis-je ? Où puis-je
aller ? Comment puis-je revenir ?
Les systèmes de navigation

Il est recommandé que chaque page doit fournir deux systèmes de navigation :
Un système principal (Menu, plan de site) pour la navigation entre les pages et un
deuxième système secondaire pour la navigation à l’intérieur de la page ou fournir
d’autres points d’entrées pour différentes pages en relation avec la page en cours.
1. Le système de navigation principal :
Pour le système principal de navigation : Il y a 3 dispositions possibles
• Le système horizontal :
Figure 3.1 – Système de navigation horizontal
55
– Adapté aux sites n’ayant pas une profondeur supérieure à trois ni-
veaux. Au-delà de trois, il faut ajouter un système de navigation se-
condaire.
– Il permet de donner une vue d’ensemble du cours, mais il a l’incon-
vénient d’occuper un espace important au centre de l’écran.
– Il est en général complété par des menus déroulants ou menus en
cascade (comme le montre la figure de l’aperçu)
– Pour un cours en ligne, l’utilisation de ce type de système n’est pas
trop conseillée vu qu’on essaye de focaliser l’apprenant aux contenus
et activités du cours et non aux informations de navigation.
• Le Système Vertical :
Figure 3.2 – Système de navigation vertical
– Il s’apparente à l’arborescence du poste de travail ce qui est facilement

manipulable par les apprenants.
– Il est très recommandé pour les sites qui veulent mettre, en premier
lieu, la structuration du site ce qui est le cas pour les cours en ligne.
Le but de ces sites n’est pas la simple publication des informations,
mais le guidage de l’apprentissage via un scénario pédagogique qui
correspond à la structure générale du site.
56
– La navigation se fait par clic. Au-delà de 3 niveaux, il faut utiliser

des systèmes de navigations secondaires.
– On peut inviter les apprenants à naviguer à l’intérieur de ce système
par de petits pictogrammes présentant des signes + et – pour dérouler
où refermer les niveaux de navigation inférieure.
– L’avantage de ces systèmes, c’est qu’ils occupent peu de place sur
l’écran, ou ils donnent impression de ça, et ils sont agencés à droite
(langue du site est l’arabe par exemple) ou à gauche (langues latines).
• Le système d’onglets :
Figure 3.3 – Système d’onglets
– Il s’apparente à quelques types de fenêtres du système ou des inter-

faces de logiciel comme Word 2007, etc.
– Il est adapté pour des pages dont le cheminement est déterminé et
pour des sites, ou parties de sites, ayant des structures simples. Par
exemple : formulaires à étapes, démarches en ligne, etc.
– Son inconvénient, dans le cas des sites web éducatifs, est qu’ils oc-
cupent un espace important au centre de l’écran.
• Le système mixte :
– Il est conseillé de n’utiliser ce mixage que dans le cas d’une structura-

tion complexe du processus d’apprentissage (contenu, activités, etc.)
ou dans le cas ou les apprenants ont des compétences informatiques
élevées.
57
Figure 3.4 – Système de navigation mixte
– La hiérarchie entre les systèmes doit être logique. L’ordre de prio-

rité est : le système horizontal et puis le système vertical et enfin le
système d’onglets.
2. Le système de navigation secondaire :

Pour le système de navigation secondaire : on peut citer les éléments suivants :
• Fil d’Ariane :
– Appelé aussi « chemin de navigation », il constitue une aide aux

systèmes principaux de navigation.
– Il permet à l’apprenant de se positionner dans l’arborescence des
pages qu’il les a visités et accéder directement à ces pages.
– Les libellés du Fil Ariane doivent correspondre aux titres des pages
de l’arborescence.
• Les adresses URL :
– L’apprenant peut voir l’adresse URL du site dans plusieurs endroits :

Barre d’adresse, barre de chargement du navigateur, sur d’autres sites
58
web (moteurs de recherche, lien sur un site, etc.), sur des supports
divers (documents, présentations, etc.)
– La conception de l’adresse URL est importante pour un meilleur gui-
dage.
– Il est conseillé d’utiliser des formats simples et signifiants.
• Les zones de fonctions transverses :
– Elle regroupe des liens utilitaires qui aident à la navigation et l’accès

à des informations spécifiques.
– Elle peut contenir : un moteur de recherche, un bloc d’authentifica-
tion, choix de la langue, etc.
– Elle est positionnée généralement en haut de la page.
• Pied de page :
– Il permet de fournir un point de repère fixe tout au long du site.

– Il est conseillé de mentionner les informations suivantes :
∗ les mentions légales, les liens vers les pages d’accessibilité, le lien
vers la page d’aide ou FAQ, etc.
∗ Nom de l’auteur du site (société de développement) et l’année de
réalisation,
∗ Contacts (enseignant, Institution),
∗ Etc.
• Navigation à l’intérieur de la page (liens ancrés) :
– L’apprenant doit pouvoir aller, à partir de n’importe quelle position

sur une page, vers le haut et le bas de la page.
– Lorsque la page est longue, il faut avoir des aides à la navigation en
haut et en bas de page. Lorsque la hauteur de la page ne dépasse pas
un fold alors ces aides de navigation peuvent être fournies dans une
seule position.
59
– Les pictogrammes sont vivement recommandés dans ces cas.
Conception des liens hypertextes :
• Les liens sont les moyens de déplacement des apprenants sur le site, alors ils
doivent être facilement identifiables et indiquent clairement leurs destinations.
• Les liens doivent être fidèles à ce qu’ils énoncent pour que l’apprenant construise
une représentation fonctionnelle positive du site.
• Les liens ancrés ne doit jamais perturber la séquence pédagogique prévue par
l’enseignant et le tuteur ou inhiber un traitement mental quel qu’onques de
l’apprenant.
1. Mise en forme des liens :
• Changer la mise en forme des liens par rapport aux textes.
• Diriger grâce aux affordances : les apprenants peuvent identifier rapide-

ment ce qui est cliquable par leurs mises en forme spécifiques, alors il ne
faut pas ignorer les affordances des apprenants sinon ils risquent (si vous
changer catégoriquement ses mises en forme) de manquer plusieurs liens.
• Un lien est généralement souligné et ayant la couleur bleue.
• Au passage d’un pointeur sur un lien le curseur prend la forme d’une main.
L’adresse du lien s’affiche en bas à gauche de la fenêtre.
2. Texte des liens :
• La langue du lien doit être celle de la page.
• Il doit refléter le contenu de la page cible et généralement il coïncide avec

le titre de la page destination.
• La balise TITLE des liens doit être renseignée systématiquement.
60
3. Vérifier toujours que les liens pointent vers des pages existantes et ce sont les
pages annoncées.
4. Il faut que l’apprenant soit informé du type de la cible du lien (page HTML, un
fichier PDF, etc.)
5. Lorsque le site contient plusieurs liens avec le même texte, ces liens doivent
pointer vers la même page.
Les informations éditoriales et contextuelles :
1. Les informations des responsables du site :

Il faut que l’apprenant puisse contacter l’enseignant (s) ou le(s) tuteur (s) faci-
lement. Les informations qui peuvent être mentionnées sont :
• Courriel,
• Adresses du site personnel ou Blog (s’il existe),
• Réseaux sociaux (Facebook, Twitter, Google+, etc.),
• Téléphone (avec leurs permissions).
2. Les informations du contexte institutionnel et Copyrights :

Il faut que le contexte d’où provient le site soit identifiable avec la possibilité
de le contacter. Les droits doivent être mentionnés pour rassurer les apprenants.
Les informations qui peuvent être mentionnées sont :
• Cadre institutionnel : (Faculté, École, Lycée, ministère, etc.) et informa-

tions de contact :
– Courriel,
– Adresse du site web,
– Réseaux sociaux (Facebook, Twitter, Google+, etc.).
• Copyright
61
3. Les informations de mise à jour :

Le rythme de mise à jour du contenu et de consultation des liens proposés
comme liens utiles ou des webographies est un indicateur de la pertinence des
savoirs présentés et le suivi quotidien des enseignants et tuteurs de ce système
d’apprentissage ce qui réduit la sensation de la solitude des apprenants. Les
informations qui peuvent être mentionnées sont :
• Préciser la date de la dernière mise à jour,
• Le rythme de mise à jour,
• Les liens vers les sites externes doivent être consultés régulièrement et
indiquer pour chaque lien la date de la dernière consultation (Il se peut
que le contenu du site change et ne coïncide plus à celui de la dernière
consultation).
Les ressources numériques :
1. Les images :
• Le type et la résolution des images doivent être présentés à l’apprenant

(lors du survol, au-dessous de l’image, etc.)
• Chaque image doit avoir un titre.
2. Vidéos, sons, animations, interactions :
• Les caractéristiques techniques du média doivent être fournies à l’appre-

nant.
• Chaque média doit avoir un titre qui reflète son contenu.
• La lecture, l’enregistrement (si c’est permis) des médias doivent être faciles
à réaliser (via des liens directs ou des boutons d’actions, etc.)
• L’ouverture de ces médias se fait sur la même page.
62
3. Documents bureautiques :
• Les formats des ressources doivent être communiqués à l’apprenant :
– Du texte (PDF, WORD, EXCEL, ODT, RTF, ZIP, RAR, etc.)

– Et/ou des icônes des logiciels qui peuvent ouvrir ces fichiers.
• L’ouverture de ces fichiers ne doit pas perturber le scénario pédagogique

en cours.
• Il est fortement recommandé d’ouvrir ces fichiers dans des nouveaux on-
glets ou nouvelles fenêtres (pop-up par exemple)
4. Téléchargement des ressources (Download) :

Il faut spécifier pour les fichiers à télécharger :
• Un nom de fichier significatif de sorte qu’après téléchargement, l’apprenant

peut facilement identifier le fichier dans son arborescence.
• Spécifier le type par deux informations : un texte mentionnant l’extension

et un pictogramme mentionnant le logiciel ouvrant le fichier.
• Il est conseillé d’afficher avec la taille du fichier, un temps de télécharge-

ment approximatif selon les débits théoriques de votre public cible afin de
renseigner l’apprenant sur l’optimisation de son temps de navigation.
• Un texte dans la balise TITLE doit mentionner si le lien va s’ouvrir dans

la même ou nouvelle fenêtre ou onglet.
5. Importation des ressources (Upload) :

Il faut spécifier pour le fichier à importer :
• La taille maximale.
• Le ou les types permis.
63
Les formulaires :
1. Aspect général :
Au niveau d’un formulaire (QCM, QCU, inscription, authentification, etc.), l’ap-
prenant doit savoir ce qu’il a à faire, comment ? Et où ?
• Chaque zone de saisie ou contrôle doit avoir un libellé.
• Les champs obligatoires sont clairement indiqués (par des ‘*’ ou explicite-
ment mentionnés) : cette signalétique doit être signalée en haut au début
du formulaire.
• Si le formulaire dépasse 3 flods 1 , il est conseillé de le scinder sur plusieurs

pages.
• Si le formulaire est scindé sur plus qu’une page, l’apprenant doit être averti
et il peut naviguer entre les pages du formulaire pour vérifier ou corriger
ce qu’il a fait.
• Dans le cas d’un formulaire multi-page, avant la validation, une page de

récapitulatif des données saisies est proposée.
• Il faut regrouper les champs en fonction de leurs natures sémantiques en

blocs distincts portant un texte explicite.
• Il est conseillé de donner une aide contextuelle (infobulle, icône spécifique,

etc.) afin de créer un climat d’accompagnement pour mieux guider l’ap-
prenant.
2. Les zones de saisie :

L’apprenant doit être guidé dans tout ce qu’il peut saisir : format, accès aux
champs de saisie, etc.
1. Le terme anglais fold (pli) est issu de la presse papier. En effet, sur les présentoirs, les journaux
sont pliés en deux, de sorte que les lecteurs puissent lire immédiatement les gros titres qui feront
vendre ou pas le journal. Sur le Web, par anachronisme, le fold, que nous avons traduit par « ligne de
flottaison », est la partie du document que l’internaute peut voir sans faire défiler l’écran. On parle
aussi de « seuil de scroll » (Boucher, 2009).
64
• L’apprenant doit être informé toujours des contraintes de saisie : format

et longueurs, etc. des exemples peuvent être utilisés.
• Si l’apprenant peut accéder à ces champs via le clavier (la touche « TAB
») ça doit être dans l’ordre naturel du remplissage du formulaire.
3. Les contrôles :
L’utilisation des différents contrôles n’est pas aléatoire. Chaque contrôle a une
raison d’être dans un formulaire ; l’apprenant doit être conscient de ça.
• Lors de l’utilisation des cases à cocher, l’apprenant doit être informé qu’il
peut choisir plus qu’un choix et s’il y a un nombre maximal de choix à
cocher il faut le mentionner.
• Pour les boutons radio et listes déroulantes, l’apprenant doit savoir qu’il
ne peut faire qu’un seul choix.
• Si une valeur par défaut est cochée ou choisie, l’apprenant doit être conscient
de ce choix : la valeur par défaut est une réponse ou interprété comme étant
l’apprenant n’a pas répondu, etc.
65
III.1.b. Groupement/Distinction des items par localisation :
Aspect de toute la page (niveau macroscopique) :

La page doit être bien rangée en réalisant des regroupements logiques, car les
apprenants « s’attendent à ce que vous ayez mis ensemble ce qui va ensemble ».
En plus, la structuration doit mettre en avant les éléments les plus importants pour
favoriser l’apprentissage et donc les mots ne doivent pas être un moyen pour contourner
un défaut de catégorisation.
Il faut ici faire attention au fait que certaines structurations et certains groupe-
ments ont un sens chez l’enseignant ou le tuteur ce qui ne tient pas compte des besoins
et caractéristiques des apprenants utilisant le site.
• Il faut que l’apprenant arrive à identifier, à première vue, les blocs les plus
importants par leurs dispositions entre eux (position, taille) : ce que l’apprenant
cherche le plus dans la page (informations, actions, etc.)
• Généralement la mise en page d’un site web est composée des blocs suivants :
l’entête, les menus, le pied de page et le bloc du contenu informationnel.
• La loi de proximité énonce que notre cerveau tend à regrouper les choses qui
sont proches physiquement. Il est conseillé de séparer les blocs par des espaces
pour pouvoir les distinguer (marges internes et externes)
• La disposition des blocs doit refléter le degré d’importance des blocs. Par exemple :
le bloc du contenu doit être le plus grand et au centre de la page.
• Il faut utiliser les espaces entre les blocs (margin et padding) pour les distancer
entre eux.
• Les internautes passent 69% de leurs temps à regarder la moitié gauche de la

page et 30% la partie droite(Canivet-Bourgaux, 2014). L’aspect de la page (lo-
calisation des blocs) doit tenir compte de cette observation. Ce résultat dépend
de la langue du site (dans le cas de la langue arabe, c’est la partie droite qui
procure plus l’attention des utilisateurs)
Aspect de l’intérieur des blocs de la page (niveau microscopique) :
66
1. L’entête :
Au niveau de l’entête, il faut toujours positionner l’apprenant dans le contexte
général du site.
• L’apprenant doit identifier clairement les sous blocs composant l’entête par
leurs positions.
• L’identification spatiale est possible en utilisant de l’espace entre ces sous-

blocs et en les disposant dans un ordre logique (de gauche à droite, etc.)
• Avec le titre, l’utilisation d’une citation, une parole, etc. peut être appré-
ciée par les apprenants. Ce texte doit être identifiable facilement par sa
position.
2. Le pied de page :
Ce bloc est l’endroit où l’apprenant peut trouver des informations ou des services
d’importance inférieure à celles au niveau des menus ou du bloc du contenu
principal.
• L’apprenant doit identifier clairement les sous-blocs composant le pied de

page par leurs positions.
• La taille des éléments de ce bloc doit être petite par rapport aux autres
blocs.
• L’identification spatiale est possible en utilisant de l’espace entre ces sous-

3. Les menus :
Il faut veiller à ce que l’apprenant puisse distinguer facilement les liens proposés
par un menu.
• Les différents liens du menu doivent être séparés par des espaces homogènes
(horizontalement ou verticalement selon le sens du menu)
67
4. Le contenu :
Si on considère le site web du cours comme une salle de classe, ce bloc est le
tableau de la classe. Tous les apprenants doivent le distinguer le plus rapidement
possible et à l’intérieur du bloc une sous structuration claire est exigée
• Ce bloc doit être le plus grand vu qu’il sera le plus important pour l’ap-
prenant.
• Il contiendra plusieurs autres sous blocs qui doivent être identifiables à

première vue.
• Le bloc du contenu textuel (les informations du cours) sera le plus grand,

les autres sous blocs doivent être de taille inférieure et leurs dispositions
reflèteront leurs importances (sous blocs : Exercices, Évaluation, Outils de
communication (blogs, forum, etc.), Glossaire et liens utiles, etc.)
5. Le contenu textuel (informationnel) :
À l’intérieur du bloc principal, les différents types d’informations (titres, sous-

titres, paragraphes, etc.) doivent être clairement structurés pour que l’apprenant
puisse les identifier et les mémoriser facilement.
• Il faut appliquer des espacements entre les paragraphes du contenu.
• Il faut appliquer des espacements entre titres, sous-titres et paragraphes
• S’il y a des colonnes de textes, il vaut mieux opter à les faire espacer par
des espacements que par des lignes séparatrices
• Lors de l’insertion d’un objet à l’intérieur des paragraphes, il faut appliquer

un espacement signifiant à cet objet
6. Les formulaires, liens et médias :
La position des mini éléments doit permettre une identification rapide et claire.
68
• A l’intérieur des formulaires, il est conseillé de laisser des espaces assez

signifiants entre les blocs de formulaires (un bloc est composé du libellé et
la zone de saisie ou le contrôle).
• Pour les liens, il faut qu’il indique l’espace de la page dont il dépend sé-
mantiquement.
• La position du média indique le ou les blocs dont il appartient sémanti-

quement.
III.1.c. Groupement/Distinction des items par format :
Aspect de toute la page (niveau macroscopique) :

La loi de similarité (similitude) postule que notre cerveau a une tendance à regrou-
per les choses qui se ressemblent.
La mise en forme de la page doit guider les apprenants en leur aidant à construire
une organisation structurée et sémantiquement correcte du site pour ne pas perturber
l’apprentissage.
• Il faut que l’apprenant arrive à identifier, à première vue, les blocs les plus
importants par leurs mises en forme (couleur d’arrière-plan, bordure, etc.)
• Les mises en forme doivent mettre en premier plan les éléments les plus utilisés
par l’apprenant.
• La ressemblance de la mise en forme entre deux blocs indique un rapport concep-

tuel ou fonctionnel.
• La différence de la mise en forme entre deux blocs indique une différence concep-
tuelle ou fonctionnelle.
Aspect de l’intérieur des blocs de la page (niveau microscopique) :
1. L’entête :
Au niveau de l’entête, il faut toujours positionner l’apprenant dans le contexte
général du site : la mise en forme est en relation avec le contexte du site (cours,
institutions)
69
• L’apprenant doit identifier clairement les sous blocs composant l’entête par
leurs mises en forme.
• Les caractéristiques du titre du site (ou de la page) doivent être différentes

aux autres textes de la page (contenu, liens, etc.) : plus grande, plus gras,
etc.
• Les effets d’ombres, d’arrondissement des coins, relief des blocs (3D), opa-
cité, etc. sont fournis par le langage CSS 2 et 3
2. Le pied de page :
Ce bloc est l’endroit où l’apprenant peut trouver des informations ou des services
d’importance inférieure à celles au niveau des menus ou du bloc du contenu
principal.
• L’apprenant doit identifier clairement les sous blocs composant le pied de

page par leurs mises en forme.
• L’identification spatiale est possible en utilisant de l’espace entre ces sous

• La mise en forme des éléments du pied de page ne doit pas mettre en avant
ce bloc afin de ne pas perturber l’apprentissage.
3. Les menus :
Il faut veiller à ce que l’apprenant puisse distinguer facilement les liens proposés
par un menu.
• Les différents liens du menu doivent être mis en forme afin que l’appre-
nant puisse choisir facilement parmi l’ensemble d’items du menu, celui qui
l’intéresse.
• Plusieurs effets de transition et d’animation peuvent être utilisé pour dis-

tinguer les différents niveaux des menus et leurs éléments (CSS 2 et 3, Java
Script, etc.)
70
4. Le contenu :
• Ce bloc doit être le plus grand vu qu’il sera le plus important pour l’ap-
prenant.
• Il contiendra plusieurs autres sous blocs qui doivent être identifiables à

première vue.
• Le bloc du contenu textuel (les informations du cours) sera le plus grand,

les autres sous-blocs doivent être de taille inférieure et leurs dispositions
reflèteront leurs importances (sous-blocs : Exercices, Évaluation, Outils de
communication (blogs, forum, etc.), Glossaire et liens utiles, etc.)
5. Le contenu textuel (informationnel) :
• L’utilisation des styles de polices doit refléter la hiérarchie sémantique du

cours.
• Il faut appliquer des espacements entre les paragraphes du contenu.
• Il faut appliquer des espacements entre titres, sous-titres et paragraphes.
• Lors de l’insertion d’un objet à l’intérieur des paragraphes, il faut appliquer

un espacement signifiant à cet objet.
• Il faut toujours respecter les conventions en matière de code couleur :
Rouge → Danger, arrêt, etc.

Vert → départ, repos, etc.
6. Les formulaires, liens et médias :
• A l’intérieur des formulaires, il est conseillé de laisser des espaces assez

signifiants entre les blocs de formulaires (un bloc est composé du libellé et
la zone de saisie ou le contrôle)
71
• Pour les liens, il faut qu’il indique l’espace de la page dont il dépend sé-
mantiquement. En plus, on doit définir deux couleurs correspondants aux
deux états possibles du lien (visité ou non)
• Les liens et les boutons d’action doivent avoir des mises en forme diffé-
rentes.
III.1.d. Feedback immédiat :
Chargement des pages :
1. Concernant le codage des pages, il est recommandé de :
• Limiter le nombre des requêtes HTTP.
• L’utilisation des protocoles de sécurité ne se fait que lorsqu’il y a un besoin

essentiel.
• L’utilisation des versions HTML les plus récentes (les plus optimisées).
• Veiller à l’optimisation du codage HTML/XHTML et CSS (limitation des

redondances, regroupement des propriétés des styles, etc.)
2. Pour les scripts et les styles :
• Utiliser les versions les plus récentes du langage CSS (idéalement CSS 3
mais tenant compte de la compatibilité avec les différentes versions des
navigateurs)
• Il est conseillé de définir les feuilles de styles dans des fichiers à part et les
invoquer lorsqu’elles sont utilisées.
• Les scripts doivent être optimisés (mémoire et complexité du code : temps

d’exécution)
3. Pour les pages dynamiques (PHP, ASP, etc.) :
72
• Réduire la quantité d’information récupérée de la base de données lors du

chargement de la page : chargement des éléments statiques et l’interroga-
tion avec la base de données se fait via des boutons d’actions ultérieure-
ment.
• Optimiser les requêtes SQL afin de minimiser les temps de calcul au niveau
des serveurs et le temps d’envoi des données.
4. La conception des liens :
• Vérifier que les liens répondent dans tous les cas avec un temps de réponse
homogène au niveau de tout le site.
• Si certaines pages se chargent lentement, pour diverses raisons, l’apprenant

doit être informé avant de cliquer sur le lien de la page : parfois, les pages
d’examens sont fermées par les apprenants vu la lenteur de leur chargement
et ils s’aperçoivent après qu’ils ont raté leur ultime chance de passer le test
ou l’examen.
• Lorsque la réponse d’un lien dépend d’un contexte spécifique, l’apprenant

est immédiatement informé. Par exemple, un lien qui devient inactif après
un nombre bien déterminé de tentatives, etc.
Les formulaires :
• Toutes les entrées effectuées par l’apprenant, sauf les entrées confidentielles
(comme les mots de passe), sont visibles à l’apprenant. L’apprenant peut, s’il le
veut, voir ce qu’il a saisi pour les mots de passe.
• La vérification de la validité des champs du formulaire se fait avant sa soumission.

De préférence, la vérification est en temps réel.
• L’apprenant est informé du succès ou de l’échec du remplissage du formulaire.
• La soumission d’un formulaire renvoie toujours une réponse sur l’état de la re-
quête et les sources des erreurs lorsqu’elles surviennent.
73
Les images, vidéos et animations :
1. Pour les images :
• Pour les images, il est conseillé d’utiliser les formats adaptés aux web
(PNG, JPEG) car elle offre une bonne qualité et une taille acceptable.
• Tenir compte toujours de la résolution de l’image avant de l’afficher sur

le site, car il est fortement recommandé d’afficher les images dans leurs
tailles d’origine.
• Lorsqu’une image est utilisée comme lien hypertexte ou bouton d’action,

le nom du bouton ou du lien s’affiche sans avoir à attendre le chargement
complet de l’image (utiliser l’attribut alt= de la balise <img>)
• Penser toujours à optimiser le nombre d’images affichées dans une page en

contrôlant toujours la taille de la page en essayant d’être toujours près du
poids moyen des pages du site. Si le besoin exige l’utilisation de plusieurs
images, pensez à scinder la page en plusieurs pages ou utiliser des sites
comme Flickr (penser, avant d’utiliser ces sites de partage de photos, aux
questions d’identité numérique, éthique, etc.)
2. Pour les vidéos :
• Utiliser des formats de vidéos dédiées au web comme le flv pour limiter le
temps de lecture.
• Lorsque la lecture d’une vidéo nécessite l’installation d’un module externe,

l’apprenant doit être avisé d’avance et guidé lors de l’installation de ces
modules.
• Le délai de chargement des médias pour plusieurs contextes est indiqué à

l’apprenant.
• Il est fortement conseillé d’utiliser des sites de partage de vidéo comme

YouTube, Dailymotion, etc. pour la lecture de vidéos vu que, généralement,
74
le temps de lecture est meilleur que pour les autres sites (penser, avant
d’utiliser ces sites de partage de vidéos, aux questions d’identité numérique,
éthique, etc.)
III.1.e. Lisibilité :
L’espace :
• La quantité d’espace libre disponible sur les pages doit être entre 40% et 60%.
• L’interligne à l’intérieur des paragraphes est plus important que 2 points.
• Il est conseillé de faire coïncider les fins de ligne avec des unités de sens.
• Pour indiquer les différents paragraphes, des passages d’une ligne blanche entre
elles sont utilisés.
• Pour les paragraphes sur une seule colonne, en moyenne, le nombre de mots par
ligne doit être environ 10 à 12 mots (50 à 70 caractères)
• Pour les textes sur plusieurs colonnes, le nombre moyen de caractères par ligne
ne doit pas dépasser 50 caractères.
• Pour les textes sur plusieurs colonnes, les colonnes sont séparées par au moins 8
caractères d’espace plutôt que des lignes séparatrices.
• Pour mesurer les contrastes fond/caractères, on peut citer les outils en ligne
suivants :
– http://snook.ca/technical/colour_contrast/colour.html 1 ,
– www.checkmycolours.com 2 .
La couleur :
1. Dernière date de consultation le 15/08/2014 à 13h
2. Dernière date de consultation le 15/08/2014 à 13h
75
• Au niveau des paragraphes, l’affichage doit être en contraste positif (caractères

sombres sur fond clair). Un contraste négatif implique une impression négative
et le texte sera lu 10% plus lentement qu’un contraste positif.
• L’utilisation des couleurs comme fond d’écran doit avoir comme premier effet
l’aide à la distinction des éléments en rapport.
• Il est conseillé d’utiliser pour la distinction des détails, en outre de la couleur,

la technique des différences d’intensité lumineuse en noir/gris/blanc.
• Il faut éviter d’utiliser des fonds texturés avec des motifs.
• Le nombre de couleurs utilisées sur une page ne doit pas dépasser 7.
• Il est conseillé toujours de vérifier le résultat de l’impression d’une page avant

d’arrêter le choix des couleurs.
• Un mauvais choix de la couleur entraine un défaut de conception.
• Il est recommandé de conserver tout le temps les mêmes couleurs pour les mêmes
types d’informations.
• N’utiliser les couleurs lumineuses et saturées que pour les informations critiques,
ayant peu de probabilité d’être affichées et requérant une attention immédiate.
• Le tableau suivant présente les combinaisons de couleurs à utiliser ou à éviter :
La typographie et la ponctuation :
• Il est recommandé de ne pas dépasser 4 polices différentes.
• La taille des caractères dépend de plusieurs éléments :
– Résolution de l’écran,
– L’utilisation de la police (titres, Texte principal, liens, etc.),
– Le public cible
76
Couleurs de fond
Couleur
du texte Couleur de fond à Couleur de fond à utiliser
utilisé éviter
Blanc Jaune Magenta, Rouge, Vert, Bleu,

Autres
Jaune Blanc, Cyan Bleu, Rouge, Magenta, Autres
Cyan Vert, Jaune Bleu, Blanc, Rouge, Autres
Vert Cyan, Bleu Jaune, Blanc, Rouge, Magenta
Magenta Rouge Bleu, Blanc, Cyan, Vert, Autres
Rouge Magenta, Bleu Blanc, Jaune, Cyan, Vert
Bleu Rouge Blanc, Jaune, Cyan, Vert, Autres
Tableau 3.1 – les combinaisons de couleurs à utiliser ou à éviter sur une page web
• En général, le texte principal doit être au moins égal à 12 pixels. Les hyperliens,
les légendes,etc. peuvent être composés dans un corps inférieur au texte principal
et les titres dans un corps supérieur à celui du texte principal.
• Il est recommandé, sauf pour des contraintes spécifiques, d’utiliser des tailles de
caractères relatives.
• La taille des caractères par défaut (<font-size="3">) est la plus adaptée à la

lecture. Elle est relative par rapport à la taille 2 ou 4 (plus grande et plus petite).
C’est une mesure qui peut être réglée par les apprenants dans les options de leurs
navigateurs.
• Il est conseillé d’utiliser des polices sans sérif. Il faut définir les polices alterna-
tives comme des polices sans sérif en cas ou le navigateur ne supporte pas la
police principale définie par le style.
• La technique d’antialiasing est fortement recommandée pour l’affichage des ca-

ractères. Mais, il faut tenir compte du fait que le lissage améliore la lisibilité
pour des tailles supérieures à 14 pixels.
• Le lissage de caractères ayant des tailles inférieures à 12 pixels réduit considéra-

blement la lisibilité (Aspect flou) et augmente la taille des images.
77
• Il faut tenir compte que les couples de caractères suivants posent des problèmes
de lisibilité (ces problèmes dépendent de la police choisie) :
X K, l L, Q O, u v, t y, S 5, l 1.
• Le soulignement est utilisé uniquement sur les mots et les phrases courtes.
• Le gras est utilisé uniquement sur les mots et les phrases courtes, idem pour
l’Italique. L’italique se lit plus lentement que le roman.
• La présence de phrases en majuscule uniquement est à éviter. Ils sont environ

12% plus lent à lire 1 2 .
• Utiliser des parenthèses pour mettre en retrait les informations plutôt qu’un
autre procédé de présentation. Par exemple, il est possible d’indiquer entre les
parenthèses ce que l’on va trouver dans une note de bas de page ou une fenêtre
ponctuelle : cela évite à l’apprenant de se reporter inutilement à des endroits
différents du site et de perdre le fil de la lecture.
• Une étude a classé des signes de ponctuation en fonction de leur pouvoir de sé-
paration (par ordre décroissant) : Paragraphe, point, points de suspension, point
d’exclamation, point d’interrogation, point-virgule, deux-points, parenthèses et
virgule (Boucher, 2009).
• Voici une liste d’outils en ligne pour la typographie et la ponctuation :
– https://developers.google.com/fonts/ 3 : Google offre une panoplie

de polices pour le web.
– www.typetester.org 4 : C’est un outil en ligne qui permet d’afficher trois

typographies différentes en même temps afin d’en mesurer et d’en com-
parer la lisibilité. Vous pouvez tester la couleur, la taille, l’interlignage, la
justification, l’espace entre les caractères, l’arrière-fond, etc.
1. Source : http://tecfa.unige.ch/tecfa/teaching/staf12/polycop/part36.htm, Dernière
date de consultation : le 15/08/2014 à 14h
2. www.cecluxembourg.lu, Dernière date de consultation : le 15/08/2014 à 14h
3. Dernière date de consultation : le 15/08/2014 à 14h
78
– http ://awesome-fontstacks.com/ 1 : Il vous permet de créer facilement des

tests mis en page avec des typographies qui vont bien ensemble. Le site
utilise les polices web gratuites. Il permet aussi de choisir la typo du titre,
des paragraphes, de présentation de code, etc.
– Pour plus d’outils en ligne : http://graphism.fr/typographie-une-liste

-doutils-en-ligne-dcouvrir/ 2

79
III.2. Charge de travail :

III.2.a. Brièveté : Concision
Au niveau des éléments d’Entrée :

• Les informations comme les unités de mesure sont affichées à l’apprenant pour
qu’il ne les saisit pas.
• Lorsqu’un Captcha est nécessaire pour une validation d’action, la chaîne deman-
dée pour la saisie ne doit pas être longue (4 ou 5 au maximum).
Au niveau des éléments de sortie :
• Le titre d’une page ne doit pas dépasser 30 caractères.
• Le titre de la fenêtre ne dépasse pas 6 mots et compte 60 caractères maximum.
• Le titre de fenêtre doit être concis et précis, car c’est lui qui est enregistré en
signet.
• Les textes de supports à la navigation et à la compréhension du contenu du site

doivent être courts et concis.
• Les textes d’instructions pour les formulaires ne doivent pas dépasser deux lignes.
• Les libellés des formulaires sont clairs, concis et non tronqués.
• Les titres des objets multimédias ou documents bureautiques sont mémorisables

et sémantiquement signifiants.
• Le lien doit être limité à un mot ou à un groupe de mots pertinents. Il faut éviter
l’utilisation de phrases entières comme des liens.
• Les intitulés des liens doivent être concis et clairs et ne comprenant pas des mots
qui peuvent être mal interprétés par les apprenants.
• En général, un intitulé de lien ne doit pas dépasser un maximum de 80 caractères.
• Pour un bouton d’action standard, il est conseillé que le libellé ne dépasse pas 15
caractères. Il doit être concis. Par exemple : « Imprimer » au lieu de « Imprimer
le formulaire d’authentification »
80
III.2.b. Brièveté : Actions minimales :
La navigation à l’intérieur de la page :
• Lorsque la page dépasse un flod de taille, l’apprenant doit cliquer au maximum

deux fois pour aller en haut ou en bas de la page.
• L’accès, de n’importe qu’elle position sur la page, au menu ou sur le plan du site
est direct.
• Il est fortement conseillé d’utiliser le positionnement CSS de type ‘fixed’ pour les
ancres de déplacement à l’intérieur de la page en leur donnant des positions fixes
dans la fenêtre du navigateur pour que même si l’apprenant déroule l’ascenseur
de la page, ces liens restent dans la même position.
La navigation entre les pages :
• Il est conseillé de ne pas dépasser une profondeur de 3 à 4 niveaux d’informations.

Au-delà, le contenu sera trop enfoui et l’accès à plusieurs parties du cours devient
de plus en plus compliqué.
• Les pages fréquemment cherchées par les apprenants doivent avoir plusieurs
points d’entrées.
Les formulaires :
• Lorsque cela est opportun, il est conseillé d’avoir recours à des champs proposant
des valeurs par défaut plutôt qu’à des champs libres.
• Si les valeurs possibles d’un champ sont connues, il est conseillé d’utiliser une
liste déroulante ou des boutons radio plutôt qu’à des champs libres.
• Si la valeur d’un champ peut être déduite à partir d’autres champs, il est conseillé
de ne pas proposer aux apprenants de les saisir.
• Lorsque l’apprenant va choisir dans un ensemble important de réponses, il est

conseillé de lui offrir un système de complètement automatique (auto complétion)
affichant les items correspondants aux premières lettres saisies.
81
• Les champs de saisie doivent être dimensionnés selon le nombre de caractères

attendus : Il faut éviter les champs trop petits qui obligent les apprenants à ac-
complir une action du clavier ou la souris pour visualiser l’ensemble des données
saisies.
• Pour les textes longs (sur plusieurs lignes), il est conseillé d’avoir recours à la
boite de saisie multi lignes.
• Opter aux sélections de réponses par défaut pour les cases à cocher ou les listes
déroulantes, mais à condition de prévenir l’apprenant des conséquences de laisser
des choix.
• Lorsqu’un formulaire est scindé sur plusieurs pages, il est possible d’accéder à la
dernière page sans être obligé de passer par les pages intermédiaires sauf dans
le cas où le scénario pédagogique l’impose.
• Lorsqu’un formulaire retourne une erreur, l’apprenant n’est demandé à ré emplir

tous les champs, mais uniquement les champs erronés.
Les actions sur les médias :

Il faut tâcher à ce que l’apprenant, facilement et en un nombre minimal d’actions,
puisse :
• Lire tout type de médias.
• Redimensionner l’affichage des médias selon ses besoins.
• Partager les médias (si c’est possible).
• Enregistrer les médias.
• Interrompre la lecture des médias.
III.2.c. Densité informationnelle :
Les informations de navigation et d’actions :
82
• Il est conseillé de ne pas dépasser 7 (+ ou – deux) rubriques en largeur par

niveau d’informations. Au-delà, la mémoire à court terme ne peut plus intégrer
facilement l’organisation du cours.
• Il n’y a pas de liens redondants.
• Il n’y a que des liens pertinents.
• Les menus contiennent 3 niveaux de profondeur maximum. Au-delà, il faut ajou-

ter un menu secondaire pour les autres sous-niveaux.
• Lorsqu’un lien est affiché, l’adresse URL n’est pas affichée avec texte.
• Les boutons ne doivent pas être condensés sur une zone donnée.
• Il est conseillé d’utiliser les techniques de remplacement des informations au clic :

le remplacement et l’apparition d’informations au Roll over.
Les formulaires :
• Pour les boites à liste, le nombre de lignes à afficher est de sept (+ ou – deux).
• Le nombre d’éléments contenus dans la liste ne doit pas dépasser 100 (50 est une
borne réaliste).
• Pour économiser de l’espace dans un formulaire, utiliser lorsque c’est possible,

des listes déroulantes plutôt que des boîtes à liste.
• Le nombre maximum d’éléments dans un regroupement de boutons radio est de

12.
L’Hétérogénéité visuelle :
• Le nombre de couleurs utilisées à l’intérieur d’un bloc ne peut dépasser 7 (+ ou

– deux).
• Le nombre de polices utilisées à l’intérieur d’un bloc ne peut dépasser 4.
Les images de fond et animations :
83
• L’image de fond, si elle existe, doit être bien utilisée.
• L’animation doit être utilisée pertinemment, pour expliquer les concepts du

cours.
• Il est fortement recommandé de ne pas utiliser des publicités sur les pages du
site.
• Éviter le défilement des textes.
• L’utilisation des textes clignotants doit être justifiée.
84
III.3. Contrôle explicite :

III.3.a. Actions explicites :
Les liens hypertextes et les boutons d’actions :
• Il faut toujours s’assurer que le faite de cliquer sur un lien de navigation n’en-
gendrera pas d’autres actions que d’accéder à une nouvelle page ou une nouvelle
position sur la page.
• Si le clic sur un lien est conçu pour activer plus d’un traitement, l’apprenant est
alors averti.
• L’ouverture d’une page dans une nouvelle fenêtre ou un nouvel onglet lorsqu’un
apprenant clique sur un lien de navigation est une information qu’il faut la
présenter à l’apprenant.
• Les liens du site mènent tous vers leurs cibles annoncées.
• Les liens doivent être explicites dans leurs contextes : l’apprenant doit savoir s’il
renvoie vers une autre page, s’il ouvre un document bureautique ou s’il corres-
pond à une adresse électronique, etc.
• Les textes du support à la navigation doivent être explicites.
• Les textes du bouton d’action doivent être assez explicites pour les apprenants.
Il convient d’utiliser des verbes d’action (à l’infinitif).
Les médias :
• Les boutons de lecture des médias engendreront uniquement la lecture du média.
• Si le bouton de lecture du média est conçu de sorte qu’il lance une autre action
avec la lecture, l’apprenant doit être informé de ce fait avant qu’il active le
bouton.
• Les opérations de sauvegarde et de partage des médias ne doivent pas engen-

drer d’autres traitements et si c’est le cas alors il faut avertir l’apprenant. Par
85
exemple, si une information peut être partagée sur Facebook, l’apprenant doit
être informé du fait qu’il doit avoir un compte sur Facebook et qu’il doit se
connecter à son compte s’il veut accomplir cette action.
Les formulaires :
• La soumission d’un formulaire passe toujours par la validation de l’apprenant

via un bouton (intitulé : OK, VALIDER, SOUMETTRE, etc.).
• Un bouton pour la ré-initialisation d’un formulaire est toujours présenté avec un

texte d’instructions expliquant le résultat de l’action.
• Ré-initialiser est différent à « Modifier formulaire » : il faut que les deux boutons
soient explicites.
• L’apprenant doit être informé des effets engendrés par les boutons (base de
données, etc.).
• Si les champs de boutons radio, listes déroulantes, etc. ne sont pas obligatoires,
ils doivent être laissés décochés.
III.3.b. Contrôle utilisateur :
Les liens hypertextes et les boutons d’actions :
• Il est possible de revenir en arrière (à la page de départ ou la position de départ

dans la même page).
• Le passage d’une page à une autre ou d’un écran à un autre n’est possible que
si l’apprenant le veut.
Les médias :
• L’apprenant peut, à tout moment, interrompre ou réinitialiser la lecture des

médias.
• L’apprenant peut, à tout moment, interrompre le partage ou la sauvegarde d’un

média donné.
86
• Si des médias, généralement des animations, se lancent automatiquement au

chargement de la page, l’apprenant doit être au courant et ce fait doit être
justifié.
• S’il y a des médias qui se lancent automatiquement, l’apprenant peut à tout

moment les interrompre et les fermer.
Les formulaires :
• Le curseur ne peut se déplacer dans un formulaire qu’avec le contrôle de l’ap-

prenant (souris, touche de tabulation, etc.).
• L’apprenant peut à tout moment réinitialiser ou modifier les champs d’un for-
mulaire.
• Le rythme ou l’ordre d’un remplissage est contrôlé par l’apprenant et si un ordre

est exigé alors l’information doit être indiquée.
87
III.4. Adaptabilité :
III.4.a. Flexibilité :
Affichage et mise en forme :
• Il est possible de changer le jeu de couleurs d’une page (thèmes personnalisés).
• Il est possible d’adapter la taille des objets de la page selon les vœux des appre-
nants.
• L’apprenant peut désactiver temporairement l’affichage d’un bloc ou un objet

donné.
Les médias et les documents numériques :
• Des liens textuels alternatifs aux images et cartes sont prévus pour les apprenants
ayant des navigateurs « textonly » ou des débits faibles.
• Quelques soit le type d’appareil via lequel le site est consulté (pc, Mobile, ta-
blette, etc.) la qualité des médias doit être toujours acceptable.
• Lors de la lecture des vidéos, il est conseillé d’offrir la possibilité aux apprenants
plusieurs résolutions qui s’adapteront avec leurs débits.
• Pour les fichiers volumineux, essayer d’offrir aux apprenants la possibilité de

télécharger le fichier tout entier ou sur plusieurs parties afin d’éviter au mieux
les problèmes d’instabilité de l’état du réseau.
La navigation :
• Concevoir les éléments de navigation de telle sorte que l’apprenant puisse accéder
aux contenus du site via plusieurs parcours (l’idéal, au moins deux).
• Lorsque l’adresse URL est mentionnée sur une page, elle doit être écrite en mode
texte HTML et non pas une image cliquable pour permettre le copier-coller et
facilité sont accessibilité.
88
III.4.b. Prise en compte de l’expérience de l’utilisateur :
Erreurs répandues :
• Notre site doit être original, nous ne voulons pas qu’il ressemble aux autres ». Ce
n’est pas par l’ergonomie de votre site que vous devez vous démarquer ! Faites la
différence par tout ce que vous voulez, sauf l’ergonomie. En tout cas, vous devez
respecter les principes de base de l’ergonomie.(Boucher, 2009)
• Faire différent pour se démarquer, c’est ce que plusieurs appellent « originalité

» mais dans notre contexte, ce qui compte le plus c’est le contenu que le site va
offrir avec le scénario pédagogique avec lequel ces informations vont être lues et
traitées.
• Généralement, les sites web éducatifs utilisent les nouvelles tendances du de-
sign et du développement web après leur maturité : ce n’est pas un terrain
d’expérimentation !
Respect des conventions de localisation :
• Il y a un bloc d’entête en haut de la page.
• Il y a au moins un menu principal dans la page.
• Le contenu principal est affiché au centre de la page.
• Un format visuel fort et très appuyé peut compenser une localisation peu conven-
tionnelle.
Respect des conventions de vocabulaire :
• Les titres de liens respectent les conventions et les pratiques répandues sur le
web.
• N’essayez pas de déroger aux conventions du vocabulaire en ce qui concerne les

principaux éléments du site.
89
• Il est permis de faire des ajustements, mais pas d’introduire des mots totale-
ment nouveaux. Par exemple : si vous utilisez « prochaine page » au lieu de «
page suivante », cela va faire réfléchir l’apprenant malgré que ce n’est pas trop
compliqué à comprendre mais l’apprenant en utilisant le site va associer tous les
éléments de l’interface au contexte dans lequel il se trouve.
• Éviter de remplacer un mot « obscur » par un mot plus adéquat dans l’absolu,
alors que le mot incriminé est tout à fait commun dans le secteur.
• Il ne faut jamais utiliser de manière détournée un mot déjà pris pour représenter
un objet ou un concept donné.
Respect des conventions de l’interaction et de présentation :
• Il est conseillé de rester conventionnel dans les modes d’interaction très répan-
dus sur le web (ascenseurs, formulaires, alertes, déclenchement d’actions, étapes
classiques de création de compte, etc.) ainsi dans leurs format de présentation.
• Tous les liens d’un menu ou d’une barre de navigation sont cliquables.
• Une image de « flèche en arrière » cliquable fait annuler un traitement ou revenir

à une page précédente.
• Une image de « flèche en avant » cliquable permet d’accéder à une étape suivante
ou la page suivante.
• Les survols des zones ne déclenchent pas des traitements.
• Ne pas effrayer les apprenants en présentant des informations peu importantes

sous forme d’alertes JavaScript avec une icône Danger car ils ont l’habitude de
voir ce type de messages en cas d’erreurs.
• Il est conseillé d’utiliser des fenêtres flottantes plutôt que des fenêtres d’alertes.
• Lorsqu’un apprenant clique sur un champ de saisie, le curseur doit s’afficher

dans le sens d’orientation de la langue du site (à gauche pour un site en langue
française et à droite en langue arabe).
90
• Lorsque l’apprenant clique dans un champ pour saisir une entrée quelconque, le
curseur doit apparaitre à l’intérieur du champ.
• Dans certains cas, la présence des champs de saisie avec des objets spécifiques
incite à des interactions au clavier et non à la souris comme pour une calculatrice
ou la saisie du code secret d’une carte de payement électronique.
Prise en compte des niveaux de compétences informatiques des appre-

nants :
• Autoriser les apprenants expérimentés à contourner des séries d’étapes en for-

mulant directement des commandes ou des raccourcis clavier.
• Autoriser plusieurs modes de dialogue, lorsque c’est possible, correspondant aux

différents groupes d’utilisateurs.
• Lorsque le guidage ralentit les apprenants ayant un niveau technique élevé, il est
conseillé de leur fournir des moyens pour contourner ce guidage.
91
III.5. Gestion des erreurs :

III.5.a. Protection contre les erreurs :
Les formulaires :
• L’indication des champs obligatoires est bien lisible. Donnez la signification de

ce signe en plaçant une légende avant le formulaire, plutôt qu’en dessous. Par
exemple : "Les champs marqués d’un astérisque sont obligatoires".
• Les libellés et les légendes sont assez concis et précis et accompagnez-les d’une
explication plus élaborée (généralement, dans la marge à droite).
• La taille des champs est assez grande pour un risque d’illisibilité.
• Lorsque l’apprenant doit choisir un seul choix parmi plusieurs, le contrôle utilisé
est le bouton radio.
• Lorsque l’apprenant peut choisir plus qu’un seul choix parmi plusieurs, le contrôle
utilisé est la case à cocher.
• Un contrôle de saisie est effectué pour les champs à contraintes.
• Dans le cas d’un formulaire multi pages, il faut effectuer la vérification de l’in-
tégrité des données à chaque validation de page.
• La vérification se fait sur deux niveaux :
1. Le côté client : utilisation d’un script de contrôle à la volée qui permet

de conserver le formulaire sur la fenêtre et diminuer les aller/retour entre
l’apprenant et le serveur. Penser à d’autres alternatives pour les apprenants
travaillant dans des contextes n’interprétant pas les scripts.
2. Le côté serveur : La vérification par rapport aux propriétés et le contenu

des champs de la base de données.
• Il faut prévenir les cas où l’apprenant soumet plusieurs fois consécutives le for-
mulaire, car un feedback n’a pas été prévu ou pour une autre raison quelconque.
92
Les boutons d’action :
• Si un bouton « annuler », « effacer », etc. est proposé à l’apprenant, il est

conseillé de le positionner à gauche de l’écran ou à gauche du bloc ou il se trouve
(à droite pour les sites en langue arabe).
• Si un bouton « annuler », « effacer », etc. est proposé à l’apprenant, il est conseillé

de le positionner le plus loin possible du bouton de validation.
• Si un bouton « annuler », « effacer », etc. est proposé à l’apprenant, son format

doit être différent et moins fort et appuyé que le bouton de validation.
• Si un bouton « annuler », « effacer », etc. est proposé à l’apprenant, son format

doit être anodin alertant de son caractère dangereux.
• Si un bouton « annuler », « effacer », etc. est proposé à l’apprenant, il est

fortement recommandé de lui associer une étape de confirmation de choix.
La navigation :
• Il faut vérifier que tous les liens font référence à des pages existantes.
• Il faut bien prévenir les erreurs 404 1 en essayant d’identifier toutes les pages du
site. Une panoplie d’outils (link checker) en ligne permettent de le faire :
– Screaming Frog : www.screamingfrog.co.uk/seo-spider/ 2
– Link Sleuth : http://home.snafu.de/tilman/xenulink.html 3
– Link Checker pour Firefox : https://addons.mozilla.org/fr/firefox/

addon/linkchecker/ 4
– Broken Link Checker pour WordPress : http://wordpress.org/plugins/

broken-linkchecker/ 5
1. L’erreur 404 est un code renvoyé par un serveur HTTP pour indiquer que la ressource demandée
n’existe pas. Généralement, les navigateurs affichent le message suivant : "404 File Not Found"
93
– Outils pour les webmasters de Google : www.google.com/webmasters/

tools/ 1
• Une fois que vous les avez identifiées, corrigez les erreurs en les redirigeant vers
les pages correspondantes ou les pages les plus proches sur le nouveau site. Si
aucune page ne reprend le contenu sur le nouveau site, faites une redirection
301 2 vers la page d’accueil du site.
• Vu que même si vous arrivez à vérifier tous les liens du site, vous pouvez avoir des
apprenants qui se tromperont dans l’URL alors, il est fortement recommandé de
créer une page 404 personnalisée. Pour se faire, essayer de rester dans la charte
graphique de votre site et utiliser les outils en ligne disponibles surtout celles de
Google :
– Pour la personnalisation de la page 404 Google propose : https://support

.google.com/webmasters/answer/136085 3
– Pour la création de la page 404, Google propose : www.google.com/support/

webmasters/bin/answer.py?&answer=93641 4
– Vous pouvez avoir d’autres idées en consultant le lien suivant : www.google

.com/support/webmasters/bin/answer.py?&answer=93641 5
• Afin d’éviter que les pages d’erreur 404 ne soient pas indexées par les moteurs de
recherches, ce qui affectera la visibilité du site, il faut s’assurer que le serveur web
sur lequel le site est hébergé renvoie bien un code d’état HTTP 404 lorsqu’une
page inexistante est invoquée.
• Le contenu des pages cibles correspond bien à ce qui était annoncé.

2. La redirection 301 ou Moved Permanently permet de rediriger un internaute (et un moteur)
vers la nouvelle page de manière tout à fait transparente. Lorsqu’un robot arrive sur le site et lit
ce code, il est informé que le fichier a été déplacé de manière permanente et il suit le lien afin de
remplacer l’ancienne page par la nouvelle.(Canivet-Bourgaux, 2014)
94
• Les pictogrammes et les images cliquables correspondent bien aux endroits ou

aux actions annoncées.
• Proposez aux apprenants de signaler les liens morts, ou rompus, via un formulaire
ou par envoi de mail au responsable du site.
III.5.b. Qualité des messages d’erreurs :
Les formulaires :
• Les messages d’erreurs sont précis, factuels et doivent être les plus courts possible
(généralement, ne pas dépasser une ligne)
• Les messages d’erreurs de saisie sont courtois.
• Les messages d’erreurs sont conviviaux.
• Les messages d’erreurs de saisie indiquent la cause de l’erreur.
• Exemples d’expressions à éviter :
Expressions à éviter Expressions recom-

mandées
incapable ne pouvait pas, ne
pourrait pas
mauvais 8.33
illégal invalide
inconnu non reconnu
Tableau 3.2 – Expressions à éviter dans les messages d’erreurs

(Canivet-Bourgaux, 2014)
• Les messages d’erreur de saisie proposent des exemples de remèdes.
• En cas d’erreur de validation, les erreurs doivent être listées en début de la page
ou du formulaire.
• Chaque champ erroné ou incomplet doit être signalé par un pictogramme et un

changement de couleurs ou d’effets.
95
Les boutons d’actions :
• Les messages d’erreur des boutons sont courtois et conviviaux.
• Les messages d’erreurs des boutons indiquent la cause de l’erreur.
• Les messages d’erreur des boutons proposent des exemples de remèdes.
• Les messages d’action doivent aider l’apprenant par des explications du processus
(Action).
• Les messages doivent rassurer l’apprenant en renforçant son sentiment de sécu-

rité.
• Voici quelques règles à suivre :
– Évitez la voix passive, optez vers la voix active.
– Utilisez "le présent" si l’échec est permanent.
– Utilisez "le passé" si une opération échoue, mais peut réussir après avoir
apporté une correction.
La navigation :
• Les messages d’erreur de navigation sont courtois.
• Les messages d’erreurs de navigation indiquent la cause de l’erreur.
• Les messages d’erreur de navigation proposent des exemples de remèdes.
III.5.c. Correction des erreurs :
• En cas d’erreurs lors de la validation d’un formulaire, seules les données erronées
sont à ressaisir, le reste doit être inchangé et il doit être ré affiché.
• Éviter d’opter à des corrections élémentaires, traitez l’ensemble des erreurs en

une seule fois.
96
III.6. Homogénéité/Cohérence :
Cohérence de la localisation :
• Pour les éléments de navigation :
– Si l’apprenant a navigué d’une certaine manière, il cherchera à réitérer

cette stratégie toujours.
– Il ne faut ni changer la position des éléments de navigation ni les supprimer.
– Il est fortement recommandé de ne jamais modifier l’ordre des éléments

des menus, quelque soit la cause.
• La position des boutons de validation, de ré initialisation, de modification, etc.

dans les formulaires ne doit jamais changer d’un formulaire à un autre.
• Les titres des médias (images, vidéos, son, etc.) doivent garder la même position
(en dessous, à gauche, à droite, etc.) sauf pour des contraintes justifiées.
• Si une page présente un ascenseur horizontal, il faut la scinder en deux pages ou

chercher une autre solution vu que les apprenants se sont habitués à exploiter
uniquement la largeur de l’écran et n’utiliser que les ascenseurs verticaux.
Cohérence des appellations :
• La cohérence ici concerne le vocabulaire utilisé : Il faut toujours faire appel au

même mot pour désigner le même élément.
Cohérence des formats de présentation et d’interaction :
• Il faut rester cohérent dans les formats de présentation affectés aux éléments
présents sur le site.
• Les intéractions doivent être cohérentes.
• Le site doit se comporter toujours de la même manière afin d’éviter que les
apprenants soient surpris, mais au contraire puissent lui faire confiance.
97
III.7. Signifiance des codes et dénomination :

• Les textes doivent être compréhensibles pour les apprenants. Il n’y a pas un
texte compréhensible pour tous les apprenants. Il faut s’assurer de l’efficacité
des textes par rapport aux types des apprenants et le contexte d’apprentissage.
• Il existe des outils d’analyse de lisibilité 1 des textes qu’il faut les utiliser. Par
exemple, Textalyser 2 permet de générer un indice qui correspond au nombre
d’années de scolarité nécessaire pour lire le texte.
• Les contenus des pages doivent correspondre aux titres et aux rubriques qu’ils
les annoncent.
• Il est fortement recommandé de rassurer les apprenants en leur garantissant la

correspondance directe, non ambiguë entre les hyperliens de départ et le titre de
la page de destination 3
• Les titres doivent véhiculer ce qu’ils représentent, et être distincts.
• Rendre les règles d’abréviation explicites.
• Utiliser des codes et dénominations signifiants et familiers plutôt que des codes
de dénominations arbitraires.
1. La lisibilité dans l’aspect sémantique des informations, leur pertinence ou leur signification et
non la lisibilité dans la perception visuelle.
2. http://textalyser.net (dernière consultation le 28/06/2014 à 13h)
3. On retrouve cette problématique au niveau la notion de rhétorique d’arrivée développée par
George Landow.
98
III.8. Compatibilité :
La compatibilité avec les caractéristiques des apprenants et du contexte
de l’apprentissage.
• Il faut que tous les apprenants puissent bénéficier du site selon les modalités per-
ceptives qui leurs conviennent le mieux tout en tenant compte de leurs habitudes,
attentes et performances.
• L’organisation des informations affichées doit être conforme à l’organisation des

données à entrer.
• Les procédures de dialogue doivent être compatibles avec l’ordre tel que se l’ima-
gine l’apprenant ou celui dont il a l’habitude.
• Les termes employés doivent être familiers aux apprenants, et relatifs à la tâche
à réaliser.
La compatibilité technologique
• Il ne s’agit pas de présenter le site de la même manière quelque soit le support,

mais plutôt qu’il soit consultable depuis n’importe quelle plateforme (logicielle
ou matérielle).
• Il faut tenir compte de plusieurs dimensions qui caractérisent un site web :
– Système d’exploitation,
– Navigateurs,
– Taille de résolution des écrans,
– Modules et fonctions activées (Javascript, affichage des images, cookies,

etc.),
– Plugs in installés (Flash et versions de Flash, machine virtuelle Java, etc.),
– Logiciels installés (Acrobat Reader, RealPlayer, Windows Media Player,

VLC, etc.),
99
– Support matériel (PC, Laptop, Tablette, Smartphone, etc.)
• Il est fortement recommandé d’utiliser le Responsive web dans le développement

du site car cette méthode permet de détecter automatiquement les caractéris-
tiques logicielles et matérielles des environnements des apprenants pour rendre
le site compatible à cet environnement.
100
IV. Utilisation du guide au cours du processus

de développement du site web éducatif
Si on reprend le postulat selon lequel l’ergonomie, dans sa quête du confort de

l’apprenant dans son utilisation des environnements numériques d’apprentissage, s’in-
téresse aux deux versants suivants :
• L’universel qui correspond aux connaissances dont l’on dispose sur les caractéris-
tiques de l’être humain, des connaissances issues principalement des recherches
en psychologie cognitive,
• Le spécifique à l’apprenant ou groupe d’apprenants, aux objectifs de l’appren-

tissage, au contexte de déroulement de l’apprentissage, etc.
Le concepteur technique du site web éducatif va être amené à respecter les re-
commandations d’ordre universel et à pouvoir ignorer des recommandations qui ne
correspondent pas aux spécificités du système d’apprentissage (apprenants, objectifs
et stratégies pédagogiques, etc.).
Par exemple, le faite qu’une police sans sérif est plus rapide à lire qu’une police
avec sérif est un résultat qui s’applique à tous les humains. En effet, les recherches en
neurosciences ont validé ce postulat ainsi que plusieurs autres faits. Le concepteur ne
doit pas ignorer cette recommandation.
Prenons maintenant le cas où le système d’apprentissage doit être conçu pour des
apprenants ayant des niveaux avancés en matière d’utilisation des TIC, le concepteur
technique peut ignorer des recommandations de flexibilité et de guidage dans le guide
sans que ça influe sur l’ergonomie générale du site.
Il faut noter aussi que l’inspection ergonomique doit tenir compte de ces choix
et ne pas se contenter à vérifier toutes les recommandations du guide, contrairement
au questionnaire destiné aux apprenants à la fin de la formation, car c’est lui qui va
décider dans une grande partie si ces choix été judicieux ou non.
101
V. Conclusion
Au cours de ce chapitre, on a présenté un guide ergonomique pour la conception des
sites web éducatifs. Ce guide consiste à l’organisation de plus que 400 recommandations
ergonomiques sur 18 sous domaines 1 .
Pour y arriver, on a commencé par une phase de recensement de recommandations
ergonomiques pour le web en général. Cette phase s’est achevée par la collecte de
plusieurs centaines de recommandations. Ensuite, on a entamé une phase de synthèse,
d’adaptation et d’organisation de ces résultats pour le contexte éducatif pour finir
avec plus de 400 recommandations.
Le résultat final été donc une liste organisée, en 18 dimensions ergonomiques selon
les critères de Bastien et Scapin, de plus de 400 recommandations.
A la fin du chapitre, on a montré comment utiliser un tel guide dans le processus
de mise en place d’un cours en ligne.
Dans le chapitre suivant, on va aborder l’évaluation ergonomique d’un site web
éducatif.
1. Chaque sous-domaine correspond à un sous-critère de la liste des critères ergonomique de

Bastien et Scapin
102
Chapitre 4: Évaluation
ergonomique des sites web
éducatifs
I. Introduction
On s’intéresse au niveau de ce chapitre à la phase de l’évaluation ergonomique d’un
site web éducatif. Une fois le site est en ligne et la formation est terminée, le cycle de
vie de tout système d’apprentissage numérique ou non intègre une phase d’évaluation.
Dans notre projet, on s’intéresse à l’évaluation ergonomique du système d’appren-
tissage. Une étude préalable de diverses méthodes d’évaluation ergonomique a été
nécessaire pour pouvoir proposer notre solution.
Ce chapitre sera découpé en deux parties, une première partie qui exposera un
récapitulatif des grandes méthodes d’évaluation ergonomique d’une manière générale
pour passer dans la deuxième partie à la présentation du questionnaire utilisateur
(apprenant) d’évaluation ergonomique de site web éducatif que nous proposons.
II. Les méthodes d’évaluation ergonomique des

sites web
Les méthodes d’évaluation ergonomique des sites web sont nombreuses et peuvent
être classées dans les quatre types suivants (Bastien et al., 1998) :
• Les Tests utilisateurs,
• Les questionnaires et les entretiens,
103
Chapitre 4. Évaluation ergonomique des sites web éducatifs
• Les méthodes d’inspection ergonomique,
• Les évaluations automatiques.
On présentera dans la suite de cette partie une description de ces types d’évaluations.
II.1. Les tests utilisateurs

Le principe des tests utilisateur est simple : faire venir un, ou plusieurs, utilisateur
et observer son comportement et ses intéractions avec le site web en fonction des
scénarios que vous lui aurez soumis (Boucher, 2009).
Dans le contexte d’un site web éducatif, ce test consistera à observer le compor-
tement d’un échantillon d’apprenants utilisant le site selon un scénario pédagogique
bien déterminé .
Mettre en place un test utilisateur passe par trois étapes (Bastien et al., 1998) :
1. Préparation du test :
• Constitution d’un échantillon d’utilisateurs correspondant au public cible,
• Formulation des hypothèses pertinentes par rapport à vos attentes et ob-

jectifs,
• Mettre en place, selon les hypothèses déjà définies, les différents scenarii
du test,
• Préparation du matériel qui va être utilisé lors du test.
2. Réalisation du test :
• Observer et enregistrer le comportement des utilisateurs pendant la réali-

sation des scénarii,
• Tout au long du test, les utilisateurs seront guidés par l’évaluateur. En

effet, cette personne va jouer un triple rôle : Animateur, modérateur et
facilitateur.
104
3. Analyse des résultats :
• Analyser les résultats du test afin d’identifier les différentes difficultés ren-
contrées par les utilisateurs,
• Un rapport est finalement fourni présentant les lacunes et les recomman-

dations adéquates.
J. Nielson (Nielsen & Molich, 1990) a montré que des tests avec cinq utilisateurs
permettent d’identifier au moins 80% des problèmes d’utilisabilité. En outre, il postule
que tester avec plus de cinq utilisateurs ne fait qu’augmenter le coût du test sans
améliorer sa pertinence. Selon lui, au lieu de faire le test avec quinze personnes il est
préférable de faire trois tests avec cinq personnes en améliorant l’interface à chaque
itération.
Si on essaye d’appliquer ces tests dans un contexte éducatif, on n’aura pas la
même pertinence des résultats que dans d’autres contextes. En effet, les scénarios
que l’évaluateur va préparer seront les scénarios pédagogiques du cours et donc des
scénarios beaucoup plus complexes que des sites de réseaux sociaux, de ventes en ligne,
etc., et beaucoup plus contraignants de point de vue temps et espace.
Dans un apprentissage sur un site web, le scénario pédagogique et le site sont consi-
dérés comme des moyens pour favoriser une construction de nouvelles représentations
mentales. Avec ces moyens, plusieurs variantes influent sur l’accomplissement des ob-
jectifs désirés. Alors évaluer l’ergonomie du site en négligeant ces facteurs (émotions,
motivations, etc.) mettra en cause les résultats du test.
Du fait que l’apprentissage ne peut se faire in vitro, tester un site web éducatif
avec la même manière qu’un autre site web nous semble inadéquat.
II.2. Les questionnaires et les entretiens

Ils permettent de collecter des données relatives aux attitudes, impressions et de-
grés de satisfaction des utilisateurs par rapport à un site donné.
Malgré leur caractère subjectif, ces données se révèlent très importantes dans une
évaluation ergonomique. Prétendant qu’elle cherche le confort de l’Homme, l’ergonomie
doit pouvoir évaluer les degrés de ce confort. Ces données subjectives vont être ajoutées
aux résultats d’autres méthodes d’évaluation plus objectives.
105
Il y a plusieurs propositions de questionnaires qui ont été proposées, le tableau

suivant propose les plus utilisées et ceux qui ont été adaptés aux sites web :
Acronyme Instrument Références Institution Nombre

de ques-
tions
QUIS Questionnaire for User (Chin, Diehl, Maryland 27 ques-
Interface Satisfaction & Norman, tions
1988)
PUEU Perceived Usefulness and (Davis, 1989) IBM 12 ques-
Ease of Use tions
NAU Nielsen’s Attributes of (Nielsen, Bellcore 5 attributs
Usability 1993)
NHE Nielsen’s Heuristic Eva- (Nielsen, Bellcore 10 ques-
luation 1993) tions
CSUQ Computer System Usabi- (Lewis, 1995) IBM 19 ques-
lity Questionnaire tions
ASQ After Scenario Question- (Lewis, 1995) IBM 3 questions
naire
PHUE Practical Heuristics for (Perlman, OSU 13 ques-
Usability Evaluation 1997) tions
PUTQ Purdue Usability Testing (Lin, Choong, Purdue 100 ques-
Questionnaire & Salvendy, tions
1997)
USE USE Questionnaire (Lund, 2001) Sapient 30 ques-
tions
WAMMI website Analysis and (Bailey & Nigel Cla- 20 ques-
Measurement Inventory Pearson, ridge and tions
1983) Dr. Jurek
Kirakowski
Tableau 4.1 – Les questionnaires utilisateurs les plus utilisés pour l’évaluation des
interfaces informatiques 1
II.3. Les méthodes d’inspection ergonomique

Ces méthodes font appel aux jugements d’évaluateurs, experts ou non, qui vont
procéder à la vérification de l’ensemble de recommandations des normes, listes ou
standards ergonomiques choisies.
106
Dans le monde professionnel, on parle plutôt d’ « Audit ergonomique expert».

On essayera à travers cet audit d’évaluer la conformité du site à un ensemble de
recommandations. Le résultat sera un « Rapport d’Audit Ergonomique », document
qui va illustrer au moyen de captures d’écran les défauts de l’interface et proposer des
recommandations remèdes.
À la fin de ce rapport, une partie de synthèse doit être rédigée, de préférence sous
forme de tableau, résumant les principales conclusions du diagnostic.
II.4. Les évaluations automatiques

Les outils d’évaluation automatiques essayent d’évaluer les aspects ergonomiques
qui peuvent être évalués. En effet, ces outils ne permettent pas de tout évaluer. Il
y a des critères qui portent du jugement Humain qui ne peut pas être ni mesuré ni
quantifié automatiquement.(Bastien et al., 1998)
On distingue deux classes d’outils :
1. Les outils de vérification des codes (HTML, Javascript, XML, etc.)
2. Les outils d’aide à l’évaluation ergonomique des sites web comme les outils d’éva-
luation de l’accessibilité visuelle.
Malgré que ces outils ne peuvent pas être utilisés d’une manière exclusive pour éva-
luer un site web, ils demeurent, en les conbinant avec d’autres méthodes d’évaluation
ergonomique, des aides non négligeables.
III. Questionnaire utilisateur d’évaluation ergo-

nomique des sites web éducatifs
III.1. Conception du questionnaire

Le questionnaire qu’on propose est inspiré du questionnaire WAMMI 1 .
Il est présenté aux apprenants à la fin de l’utilisation du site et comporte 26
affirmations et une question ouverte.
1. WAMMI - Q - 2.3 EN (c) Copyright HFRG Ireland and Nomos Management AB Sweden, 1998.
Informations sur l’Internet. Adresse : http ://www.ucc.ie/hfrg/questionnaires/wammi/index.html 2
107
L’apprenant est invité à noter chaque phrase sur une échelle en cinq niveaux allant
de « pas du tout d’accord » à « tout à fait d’accord »
Ce questionnaire permettra d’évaluer les huit critères principaux de la liste de
Bastien et Scapin. Pour chaque critère évalué, deux types d’affirmations peuvent être
proposées (à la forme positive et négative). Les affirmations sont mélangées pour que
l’apprenant ne perçoive pas la logique du questionnaire et réponde de façon indépen-
dante à chacune d’elle et les affirmations sont équilibrées entre positives et négatives
(13 affirmations positives et 13 autres négatives).
En effet, on va proposer vingt-cinq affirmations concernant les critères ergono-
miques et une dernière affirmation d’ordre général qui est « Utiliser ce site est une
perte de temps, un support papier avec les séances présentielles auront suffi. ». Le but
de cette question d’ordre général est d’évaluer l’efficacité du site web pour apprendre
un cours donnée. Si l’évaluation des critères ergonomiques est positive alors on aura
deux cas :
• Cas ou l’évaluation de cette dernière affirmation est positive : dans ce cas, l’ap-
prenant est satisfait,
• Le cas où l’évaluation de cette question sera négative : dans ce cas, une réflexion
doit être lancée par les responsables du cours afin d’identifier les causes qui ont
conduit les apprenants à estimer que le site est inutile alors qu’ils l’apprécient
de point de vue ergonomique.
III.2. Le questionnaire utilisateur
Affirmations Pas du Tout à

tout fait
d’ac- d’ac-
cord cord
1 Les pages du site ne sont pas at-

trayantes.
108
2 Lorsque j’utilise ce site, j’ai le senti-

ment de ne pas contrôler la situation
3 Lorsque je rencontre une erreur sur ce
site, il m’aide à la corriger.
4 Ce site ne s’affiche pas et ne réagit
pas de la même manière lorsque je
change l’environnement logiciel (type
de navigateur et Système d’exploita-
tion) ou matériel (PC, smartphone, ta-
blette, etc.)
5 Sur ce site, je trouve ce que je cherche
rapidement.
6 Le site ne fait que ce que je lui dis de
faire.
7 Le site est aéré.
8 Le site est lent.
9 Lorsque je clique sur des liens du site
je n’obtiens pas toujours les résultats
auxquels je m’attends.
10 Utiliser ce site pour la première fois est
facile.
11 L’organisation des éléments du cours
sur ce site est difficilement identifiable.
12 Il est difficile de se repérer sur ce site.
13 Je trouve ce site cohérent et homogène.
14 La navigation sur ce site est facile.
15 La réalisation des taches sur ce site est
simple et facile.
16 Ce site est trop compliqué, je m’ennui
énormément lorsque je l’utilise.
109
17 Ce site a besoin d’offrir plus d’explica-

tions sur plusieurs éléments.
18 La structure de ce site est claire et lo-
gique.
19 Sur ce site je rencontre beaucoup d’er-
reurs et anomalies.
20 Je trouve que les textes sont faciles à
lire sur ce site.
21 Ce site m’offre toujours plusieurs op-
tions pour faire ce que je veux.
22 Je trouve ce site bizarre des autres sites
que je visite régulièrement.
23 Sur ce site, tout est facile à comprendre.
24 Sur ce site il y’a trop de détails inutiles
et superflus.
25 Je peux facilement contacter les res-
ponsables du cours et l’institution d’où
amène le cours.
26 Utiliser ce site est une perte de temps,
un support papier avec les séances pré-
sentielles aura suffi.
27 Si vous avez des commentaires, merci de les noter :
Questionnaire utitisateur d’évaluation ergonomique d’un site web éducatif
III.3. Critères évalués
III.3.a. Guidage
Évaluer ce critère passe par l’évaluation des sous-critères suivants : Incitation,

Groupement/Distinction des items par localisation et par format (GDI), Feedback
immédiat et lisibilité.
Les six affirmations positives évaluant ce critère sont :
110
1. Je peux facilement contacter les responsables du cours et l’institution d’où amène

le cours. (sous-critère évalué : Incitation)
2. La navigation sur ce site est facile. (sous-critère évalué : Incitation)
3. Sur ce site, je trouve ce que je cherche rapidement. (sous-critère évalué : Incita-

tion)
4. La structure de ce site est claire et logique. (sous-critère évalué : GDI)
5. Le site est aéré. (sous-critère évalué : Lisibilité)
6. Je trouve que les textes sont faciles à lire sur ce site. (sous-critère évalué :
Lisibilité)
Les six affirmations négatives évaluant ce critère sont :
1. Les pages du site ne sont pas attrayantes. (sous-critère évalué : Lisibilité)
2. Il est difficile de se repérer sur ce site. (sous-critère évalué : Incitation/GDI)
3. L’organisation des éléments du cours sur ce site est difficilement identifiable.

(sous-critère évalué : GDI)
4. Le site est lent. (sous-critère évalué : Feedback immédiat)
5. Lorsque je clique sur des liens du site je n’obtiens pas toujours les résultats
auxquels je m’attends. (sous-critère évalué : Incitation)
6. Ce site a besoin d’offrir plus d’explications sur plusieurs éléments. (sous-critère

évalué : Incitation)
III.3.b. Charge de travail
Évaluer ce critère passe par l’évaluation des trois sous-critères suivants : Concision,
Actions minimales et densité informationnelle.
Les deux affirmations positives évaluant ce critère sont :
1. Utiliser ce site pour la première fois est facile. (sous-critère évalué : Actions
minimales/Densité informationnelle)
111
2. La réalisation des tâches sur ce site est simple et facile. (sous-critère évalué :
Actions minimales)
Les deux affirmations négatives évaluant ce critère sont :
1. Ce site est trop compliqué, je m’ennui énormément lorsque je l’utilise. (sous-

critère évalué : Densité informationnelle/Actions minimales/Concision)
2. Sur ce site il y’a trop de détails inutiles et superflus. (sous-critère évalué : Densité
informationnelle/Actions minimales)
III.3.c. Contrôle explicite
L’évaluation du critère Actions explicites et contrôle utilisateur vont permettre

l’évaluation de ce critère.
L’affirmation positive évaluant ce critère est :
1. Le site ne fait que ce que je lui dis de faire. (sous-critère évalué : Action explicite)
L’affirmation négative évaluant ce critère est :
1. Lorsque j’utilise ce site, j’ai le sentiment de ne pas contrôler la situation. (sous-

critère évalué : Contrôle utilisateur)
III.3.d. Adaptabilité
L’évaluation du critère flexibilité et prise en compte de l’expérience de l’utilisateur

vont permettre l’évaluation de ce critère.
1. Ce site m’offre toujours plusieurs options pour faire ce que je veux. (sous-critère
évalué : flexibilité)
1. Je trouve ce site bizarre des autres sites que je visite régulièrement. (sous-critère
évalué : prise en compte de l’expérience de l’utilisateur)
112
III.3.e. Gestion des erreurs
1. Lorsque je rencontre une erreur sur ce site, il m’aide à la corriger. (sous-critère

évalué : qualité des messages d’erreurs/correction des erreurs)
1. Sur ce site je rencontre beaucoup d’erreurs et anomalies. (sous-critère évalué :

protection contre les erreurs)
III.3.f. Homogénéité/cohérence
L’évaluation positive évaluant ce critère est :
1. Je trouve ce site cohérent et homogène.
III.3.g. Compatibilité
Une seule affirmation négative évaluera ce critère :
1. Ce site ne s’affiche pas et ne réagit pas de la même manière lorsque je change l’en-
vironnement logiciel (type de navigateur et système d’exploitation) ou matériel
(PC, smartphone, tablette, etc.)
III.3.h. Signifiance des codes et dénomination
1. Sur ce site, tout est facile à comprendre.
III.4. Mode de notation

Vu qu’on a cinq niveaux d’évaluation, alors on obtient pour chaque affirmation
une note d’un à cinq. La correspondance des points varie selon le type de la question
(positive et négative).
Pour une affirmation positive, voici le système de notation :
113
Pas du tout Tout à fait

d’accord d’accord
1 2 3 4 5
Tableau 4.3 – Système de notation pour les affirmations positives
Pas du tout Tout à fait

d’accord d’accord
5 4 3 2 1
Tableau 4.4 – Système de notation pour les affirmations négatives
Pour une affirmation négative, voici le système de notation : Un site parfait, aux
yeux des apprenants, aura donc 130 points, le plus médiocre aura 26 points. Le tableau
suivant résume les notations des différents critères :
III.5. Utilisation du questionnaire

Reposant entièrement sur les attitudes et les impressions des apprenants, les ré-
ponses du questionnaire offrent un ensemble de données subjectives, mais importantes
qui vont être complétées par d’autres éléments pour une évaluation ergonomique glo-
bale plus objective.
Ce questionnaire mesure le degré de satisfaction des apprenants envers l’utilisation
du site web éducatif. Il mesure le degré de confort et facilité que trouvent les apprenants
en suivant leur apprentissage sur cet environnement.
Il est utilisé juste après la fin de l’apprentissage et avant l’audit expert. En effet,
l’Audit expert va en quelques sorte justifier les résultats du questionnaire et détecter
les causes d’une évaluation positive ou négative du site par les apprenants. Si les
apprenants n’apprécient pas le site, alors l’Audit va montrer les recommandations
ergonomiques qui ne sont pas respectées. Au contraire, si les apprenants aiment le site,
l’Audit va montrer que cette attitude positive est une conséquence de la satisfaction
de l’ensemble des critères ergonomiques.
114
Critères Note Note

minimale maximale
Guidage 12 60
Charge de travail 4 20
Contrôle explicite 2 10
Adaptabilité 2 10
Gestion des erreurs 2 10
Homogénéité/Cohérence 1 5
Signifiance de codes et dé- 1 5
nominations
Compatibilité 1 5
Tableau 4.5 – Les notes des différents critères
Il est important de mentionner qu’un rapport d’audit ergonomique expert positif

n’implique pas forcément une attitude positive des apprenants, d’où l’importance du
questionnaire. Il ne faut pas oublier que l’EC cherche le confort de l’Homme dans
son utilisation de la technologie, s’il n’aime pas la technologie alors il ne faut pas le
culpabiliser mais au contraire de chercher plus à le satisfaire.
IV. Conclusion
Au cours de ce chapitre, on a essayé de présenter les différentes méthodes d’éva-
luation ergonomique d’un site web d’une manière générale pour proposer, ensuite, un
questionnaire d’évaluation ergonomique adapté au contexte des ENA afin de mesu-
rer l’appréciation perceptive d’un ensemble d’apprenants utilisant un site web pour
l’apprentissage.
Ce questionnaire va être utilisé dans la phase d’expérimentation qu’on présentera
dans les deux derniers chapitres de ce document.
115
116
Quatrième partie
Etude de cas et expérimentation
117
Chapitre 5: Mise en ligne d’un site
web éducatif
I. Introduction
Dans ce chapitre, on essayera par un cas pratique de mettre en avant l’impact
positif de l’integration d’une réflexion ergonomique dans le processus de mise en place
des ENA.
On va commencer par présenter les étapes de développement de la formation en
ligne selon le modèle ADDIE. À la fin du chapitre, on va analyser les résultats des
questionnaires d’évaluation ergonomique qui ont été présentés aux apprenants à la fin
de leur apprentissage sur le site.
II. Développement du cours en ligne
II.1. Analyse
Cette phase comporte trois étapes à savoir :
• L’analyse des besoins,
• L’analyse du public cible,
• L’analyse des thèmes et des tâches.
II.1.a. L’analyse des besoins
On va commencer par mener une analyse des besoins pour déterminer si cette
solution en ligne du module est nécessaire pour combler les lacunes d’un apprentissage
119
Chapitre 5. Mise en ligne d’un site web éducatif
classique et si cette mise en ligne est la meilleure solution pour remédier aux problèmes
de la formation présentielle.
Il s’agit ici d’étudier la faisabilité du projet et la pertinence d’un tel choix. Dans
notre cas, l’enseignant va lui-même mettre en ligne le cours et il va réaliser toutes les
tâches du projet (conception pédagogique, conception technique, etc.) et le site sera
hébergé dans un domaine privé réservé par l’enseignant.
II.1.b. L’analyse du public cible
On arrive au stade de l’analyse du public cible pour adapter le nouveau système

d’apprentissage aux caractéristiques et contextes des apprenants qui vont suivre l’ap-
prentissage sur notre environnement numérique.
II.1.c. L’analyse des thèmes et des tâches
L’étape de l’analyse s’achève par l’analyse des thèmes et des tâches où le concepteur
pédagogique va définir le contenu détaillé du cours, ou la partie du cours, qui va être
mis en ligne. Cette étape est très critique, car tout le scénario pédagogique va se baser
sur elle, activités d’apprentissage ou dévaluation.
Pour se faire, on a procédé en premier lieu par élaborer une carte conceptuelle du
module en question 1 . Cette carte nous donnera une structure sémantique claire du
savoir à présenter et elle sera, en grande partie, le socle principal du plan du module 2 .
On a utilisé l’outil CmapTools 3 pour créer notre carte conceptuelle.
Ensuite, on a établi un ensemble de fiches modules 4 ; il s’agit, sur la base de
la carte conceptuelle, de définir une conception récursive du module. En effet, on a
considéré que le système d’apprentissage à réaliser est, tout autre système, composé
de 3 composants qui sont : un système d’Entrées, un système de Sortie et une Boîte
noire. Cette boîte noire est elle-même composée par des sous-systèmes ayant chacun
des entrées, des sorties et une autre boîte noire, etc. ces fiches modules vont être
enrichies par les objectifs généraux et spécifiques et les activités dévaluation 5 .
1. Voir annexe A.
2. Voir Annexe B.
3. Site officiel : cmap.ihmc.us/
4. Voir Annexe C
5. Voir Annexe C.
120
Un premier cahier de charge commence à être élaboré et va être complété dans la

deuxième phase du modèle ADDIE, à savoir la phase de conception (ou Design).
II.2. Conception
Cette phase se compose de quatre étapes, qui sont :
• Elaboration des objectifs d’apprentissage,
• Séquençage,
• Stratégie pédagogique,
• Modalité de formation,
• Stratégie d’évaluation.
À la fin de cette étape, on aura un cahier de charge complet 1 qui sera fourni, au
premier lieu, au concepteur technique pour développer le site web éducatif et l’ensei-
gnant, en deuxième lieu, pour appliquer les différentes stratégies d’apprentissage et
d’évaluation.
Au cours de cette étape, on a utilisé un module en cours de développement appelé
« Bazard » 2 du projet Scenari 3 pour générer notre scénario pédagogique complet basé
sur la notion d’ « activités » 4 .
Le scénario pédagogique développé par ce modèle contient :
• Les informations sur le dispositif de formation,
• Les objectifs généraux et spécifiques,
• Et l’ensemble des activités (tâches, consignes, matériel pédagogique, etc.).
1. Voir Annexe D.
2. C’est un modèle documentaire du projet Scenari. Il permet de générer des scénarios pédago-
giques complets sous différents formats numériques : Document Open Office (.odt), document PDF
et site web.
3. Site communautaire du logiciel libre Scenari : scenari-platform.org/
4. Lien pour consulter la version web du scénario : www.elearncity.net/scenariobazard/
121
Le cahier de charge de notre projet contiendra alors les parties suivantes : Contexte
général, Côté public cible, côté formation, Plan du cours en ligne, dispositif et scénario
pédagogique.
Scénario pédagogique
Le scénario pédagogique prévu pour ce module 1 2 sera décomposé par quatre acti-
vités qui vont s’étaler sur quatre semaines, une semaine pour chacune.
Pour toutes les activités, la modalité spatiale est mixte, la modalité temporelle
sera asynchrone et pour la modalité collaborative, elle sera individuelle.
Les trois premières activités seront des activités où les apprenants vont lire le cours,
s’exercer, apprendre et s’auto évaluer alors que dans l’activité du TP, la dernière, les
apprenants vont produire des programmes en utilisant tout ce qu’ils ont vu dans les
activités précédentes.
Le tableau ci-dessous, présentera le scénario détaillé des trois premières activités
qui sont :
1. Activité N1 : Variables, opérateurs et lecture du clavier avec le langage Java ;
2. Activité N2 : S’approprier les structures conditionnelles avec le langage Java ;
3. Activité N3 : S’approprier les structures répétitives avec le langage Java.
Le tableau d’après, présentera le scénario détaillé de la dernière activité, l’activité

du TP.
1. Pour consulter la version web du scénario généré pour le formateur via l’outil BAZARD,
voir le lien suivant :www.elearncity.net/scenarioformateur/. Dernière date de consultation : le
16/08/2014 à 16h50.
2. Pour consulter la version web du scénario généré pour l’apprenant via l’outil BAZARD, voir
le lien suivant : www.elearncity.net/scenarioapprenant/. Dernière date de consultation : le
16/08/2014 à 16h55.
122
Consignes apprenant Consignes enseignant
Pendant une semaine, l’appre-

nant va :
1. L’enseignant va com-
mencer par indiquer aux
1. Assister à la séance pré-
apprenants, pendant la
sentielle et prendre les
séance présentielle, qu’il
notes de cours ;
doivent consulter la partie
2. Après la séance présen- du cours en ligne concer-
tielle, commencer par lire nant les opérateurs et la
le contenu textuel de cette lecture à partir du clavier.
partie du cours ;
2. Il peut, s’il y a une
3. Il peut aussi, consulter les connexion Internet dans la
animations et les vidéos salle, montrer aux appre-
proposées ; nants la partie du site
à consulter et expliquer
4. A la fin, il va essayer de brièvement les étapes à
réaliser les différents types suivre.
d’exercices proposés ;
3. Pendant la semaine, l’en-
5. Noter les lacunes de com- seignant doit rappeler les
préhension pour les pré- apprenants des consignes
senter à l’enseignant pen- en leurs envoyant un cour-
dant les séances présen- rier électronique à leurs
tielles. adresses électroniques ou à
l’adresse du groupe si elle
existe.
Matériel pédagogique Matériel pédagogique
• Site web du cours ; • Site web du cours ;
• Notes de cours présentiels ; • Connexion Internet dans

la salle de cours ;
• Animations, vidéos et
images du site. • Un vidéoprojecteur.
Tableau 5.1 – Scénario des trois premières activités.
123
Consignes apprenant Consignes enseignant
Pendant une semaine, l’apprenant

va :
1. L’enseignant va commencer
par indiquer aux apprenants,
1. En assistant à la séance pré-
pendant la séance présentielle,
sentielle :
l’énoncé du TP et le faite qu’il
va donner des indices, tout au
• Prendre l’énoncé du TP ; long de la semaine, pour les ai-
• S’informer sur l’environ- der ;
nement de développe- 2. L’enseignant doit présenter ra-
ment à utiliser dans le pidement l’environnement lo-
projet ; giciel sur lequel les apprenants
• Entamer une première vont travailler. Il peut présen-
réflexion ; ter un environnement et les
laisser libre de choisir un autre
• Poser des questions à s’ils le veulent ;
l’enseignant concernant
la résolution du TP. 3. Il peut, s’il y a une connexion
Internet dans la salle, montrer
aux apprenants la partie du
2. Après la séance présentielle, site où il y a l’énoncé du TP et
essayer de résoudre le pro- l’endroit où il va mettre les in-
blème dices pour la résolution du pro-
3. Consulter le site régulièrement blème ;
pour voir les indices publiés 4. Pendant la semaine, l’ensei-
par l’enseignant tout au long gnant doit envoyer aux ap-
de la semaine ; prenants des messages élec-
4. Avant une date limite, annoncé troniques pour leur indiquer
par l’enseignant, envoyer sa so- l’ajout d’un indice sur le site ;
lution à l’enseignant via un 5. Au niveau de la séance présen-
courrier électronique ; tielle, l’enseignant doit corri-
5. Assister à la correction du TP ger le TP et donner des feed-
pendant la prochaine séance back des travaux des appre-
présentielle. nants.
Tableau 5.2 – Activité N4 : TP sur la syntaxe de base du langage Java
124
II.3. Développement
Pour développer notre cours en ligne on a utilisé le modèle documentaire Opale 1
du projet Scenari. A la fin du développement, le logiciel nous a généré un site web
éducatif scénarisé et prêt à être utilisé comme système d’apprentissage en ligne après
son hébergement (phase de Mise en œuvre)
En plus, on a développé des animations et des vidéos comme ressources numériques
d’apprentissage. Pour les animations, on a réalisé cinq animations de type Flash crées
par le logiciel Adobe flash CS6 2 . Pour les vidéos, on a monté cinq vidéos en utilisant
les logiciels Adobe Captivate 3 et Premiere 4 .
II.4. Mise en œuvre ou Implémentation

La mise en œuvre du projet a commencé par la mise en ligne du cours à l’adresse
URL suivante :www.elearncity.net, domaine que nous avons réservé pour ce projet.
Une fois mis en ligne, on a commencé à l’exploiter sur les quatre semaines déterminées
par le scénario pédagogique déjà défini lors de la phase de Conception.
II.5. Évaluation
Au niveau de cette phase, quatre niveaux peuvent être évalués selon le modèle de
Kirkpatrick(Kirkpatrick, 1998) à savoir :
1. Les apprentissages : On mesure le degré de réalisation des objectifs d’appren-

tissage. Dans notre cas, une évaluation formative a été planifiée ;
1. Site officiel :http://scenari-platform.org/projects/opale/fr/pres/co/. Dernière date de

consultation : le 16/08/2014 à 16h57.
2. Site officiel : http://helpx.adobe.com/fr/flash/topics-cs6.html?promoid=KFTPI. Der-
nière date de consultation : le 16/08/2014 à 18h.
3. Site officiel :http://www.adobe.com/fr/products/captivate.html?promoid=JNWJA. Der-
nière date de consultation : le 16/08/2014 à 18h05.
4. Site officiel :http://www.adobe.com/fr/products/premiere-elements.html?promoid=
JNWNK. Dernière date de consultation : le 16/08/2014 à 18h05.
125
2. Les comportements : c’est essayer de comprendre dans quelle mesure le com-

portement des participants a changé en raison du programme de formation. Ce
niveau n’a pas été traité dans le cycle de notre développement du module en
ligne ;
3. Les résultats : Il s’agit d’identifier les résultats qui ont été transférés dans le
reste de la formation (les chapitres suivants du cours). Ce niveau n’a pas été
traité dans le cycle de notre développement du module en ligne ;
4. Les réactions des apprenants : Ce qui revient à évaluer le degré de leur

satisfaction du cours en général. Dans cette partie, on a essayé d’évaluer l’ergo-
nomie du cours en ligne par le questionnaire qu’on a présenté dans la section de
l’évaluation ergonomique. On a implémenté ce questionnaire sur GoogleFrorms
afin de le rendre accessible via le NET et faciliter la collecte des réponses et leur
traitement.
À la fin des quatre semaines d’apprentissage sur le site web, les étudiants ont été
amenés à répondre au questionnaire d’évaluation ergonomique du site. Les résultats de
cette évaluation ergonomique vont être la base d’un travail d’amélioration ergonomique
du site selon le guide qu’on a présenté dans les chapitres précédents.
III. Conclusion
Comme tout autre système, un ENA doit être développé selon une démarche lo-
gique. Nous avons opté, lors de la réalisation de notre module en ligne, de procéder
selon le modèle ADDIE.
Tout au long de ce chapitre, on a essayé de présenter les différentes étapes de
développement du module intitulé "Syntaxe de base du langage Java", de l’analyse à
l’évaluation.
Ce nouvel espace de cours va être utilisé, au niveau du chapitre suivant, par des
apprenants (étudiants) afin de mesurer l’impact d’utilisation du guide ergonomique
qu’on a proposé sur leur satisfaction.
126
Chapitre 6: Expérimentation
I. Introduction
Dans ce chapitre, on essayera par une expérimentation de mettre en avant l’impact
positif de l’utilisation du guide ergonomique proposé dans le processus de mise en place
des ENA, dans notre cas les sites web éducatifs.
On va commencer par présenter la démarche expérimentale adoptée pour passer
à l’hypothèse de notre travail. Ensuite, on va décrire les échantillons des apprenants
et l’ajustement ergonomique appliqué au site web éducatif conçu dans le chapitre
précédant. Enfin, on passera à l’analyse des résultats.
II. Hypothèse
Les apprenants du groupe expérimental auraient une appréciation perceptive meilleure
que ceux du groupe contrôle.
III. Échantillon
La classe sur laquelle on a réalisé l’expérimentation est la classe de la deuxième an-
née cycle préparatoire de l’Université TIME 1 . Cette classe est divisée en deux groupes
pour les modules qui se déroulent dans des laboratoires, ce qui est le cas du module
« Programmation orientée objet avec le langage Java » que j’enseigne dans cette uni-
versité.
La répartition des groupes est aléatoire :
1. Université privée en Technologies de l’Information et de Management de l’Entreprise. Site web :
http://www.time.ens.tn/, Dernière date de consultation : le 16/08/2014 à 17h.
127
Chapitre 6. Expérimentation
• Il y a des Tunisiens et des étrangers dans les deux groupes,
• Il y a des filles et des garçons dans les deux groupes,
• Du point de vue performances au niveau des résultats d’études, les deux groupes
sont hétérogènes,
• Tous les candidats ont un niveau d’appropriation des TIC élevés : tous les can-
didats ont des ordinateurs portables, des téléphones intelligents (smartphones),
une connexion Internet chez eux, etc.
Chaque groupe est composé de neuf étudiants. Le tableau suivant résume les caracté-
ristiques des deux groupes :
Groupe expérimen- Groupe contrôle

tal
Nombre des étudiants tuni- 1 2
siens
Nombre des étudiants étran- 8 7
gers
Nombre des filles 1 2
Nombre des garçons 8 7
Tableau 6.1 – Caractéristiques des deux échantillons d’étudiants
La phase expérimentale s’est étalée sur quatre semaines dans lesquelles, les appre-
nants des deux groupes ont suivi le même scénario pédagogique, mais ils ont travaillé
sur deux ENA différents.
En effet, on a adopté deux sites web éducatifs :
1. Le premier site qui est un site généré par le modèle documentaire Opale. Le
groupe contrôle a travaillé sur cette version originale du site 1 .
1. Adresse du module en ligne pour le groupe contrôle :http://elearncity.net/java/

co/Syntaxe_langage_Java_web.html. Dernière date de consultation : le 03 mars 2014 à
14h. 1 Adresse du module en ligne pour le groupe contrôle :http://elearncity.net/java/co/
Syntaxe_langage_Java_web.html. Dernière date de consultation : le 03 mars 2014 à 14h.
128
2. Le deuxième site est le résultat d’un ajustement ergonomique du premier sur la

base du guide ergonomique présenté au niveau du troisième chapitre 1 . Le groupe
expérimental a travaillé sur cette version modifiée du site originale.
IV. Ajustement ergonomique du système d’ap-

prentissage
En analysant la version originale du site, générée par l’outil opale, on a pu dégager
plusieurs lacunes ergonomiques par rapport au guide ergonomique présenté dans le
troisième chapitre.
Tout en se basant sur les critères de Bastien et Scapin, on s’est focalisé sur le
premier et le plus important critère principal de la liste des critères, à savoir, le critère
de guidage. Ce critère comporte cinq sous-critères qui sont l’incitation, le groupe-
ment/distinction par localisation, groupement/distinction par format, feedback im-
médiat et lisibilité.
Dans la suite de cette partie, on présentera les lacunes ergonomiques observées
concernant le critère principal le guidage pour présenter, en deuxième lieu, les ajus-
tements ergonomiques apportés au site conformément au guide ergonomique qu’on a
conçu.
IV.1. Lacunes ergonomiques de la version originale de

l’ENA :
On a classé les lacunes observées dans trois lots qui correspondent chacune à un
sous-critère du critère principal : le guidage.
IV.1.a. Incitation
• Le site ne permet pas de contacter l’enseignant ou l’institution dont relève la

formation.
• Les informations de contacts sont absentes de toutes les pages du site.

1. Adresse du module en ligne pour le groupe expérimental :http://www.elearncity.net/co/
Syntaxe_langage_Java_web.html. Dernière date de consultation : le 03 mars 2014 à 14h.
129
• Le site n’est pas contextualisé : il n’y a pas des informations sur l’université,
cadre de formation, etc.
IV.1.b. Groupement/Distinction par localisation
• L’espacement entre les paragraphes, titres et sous titres ne permet pas la loca-
lisation et la distinction de ces différents blocs.
IV.1.c. Lisibilité
• La couleur des mots clés, syntaxe du langage Java, mots techniques n’est pas
lisible (gris dans un texte en noir)
• La taille de la police n’est pas assez grande.
• Les lignes contiennent trop de mots.
On va présenter maintenant les ajustements ergonomiques afin de remédier à ces

lacunes tout en appliquant les recommandations de notre guide.
IV.2. Ajustements ergonomiques appliqués à la version

originale de l’ENA :
IV.2.a. Incitation
• On va ajouter un pied de page dans toutes les pages du site contenant les infor-
mations de contact de l’enseignant et l’institution.
• On va ajouter le logo de l’institution ainsi des images en relation avec la tech-

nologie étudiée au niveau du site (Java)
IV.2.b. Groupement/Distinction par localisation
• L’espacement entre les paragraphes, titres et sous-titres va être redéfini pour une
distinction plus facile des éléments du cours.
130
IV.2.c. Lisibilité
• La couleur des mots clés, syntaxe du langage Java, mots techniques vont être
redéfinies selon les normes définies dans notre guide ergonomique, ainsi que la
taille de la police et le nombre de mots dans les phrases.
V. Discussion des résultats

Tout en respectant le mode de notation défini lors de la conception du question-
naire, on a pu avoir les résultats suivants :
1. Les scores globaux des deux groupes.
2. Les scores pour les huit critères principaux de Bastien et Scapin des deux
groupes.
3. Les scores des trois sous-critères du guidage sur lesquels on a appliqué l’ajuste-
ment ergonomique.
V.1. Les scores globaux des deux groupes
Critères ergonomiques Groupe contrôle Groupe expérimental

Score Global (26-130) 99.44 109
Tableau 6.2 – Les scores globaux des deux groupes
On remarque bien qu’il y a une différence nette de l’appréciation globale. Cette

différence est de l’ordre de 10 points. On peut qualifier une telle différence d’importante
et significative vu que par rapport au score maximal de 130 points cette différence est
de l’ordre de 7.38%.
Le graphique suivant illustre cette différence :
131
Figure 6.1 – Différence du score global entre les groupes d’apprenants
V.2. Les scores pour les huit critères principaux de Bas-

tien et Scapin des deux groupes
Critères ergonomiques Groupe contrôle Groupe expérimental

Guidage (12-60) 42.11 52.67
Charge de travail (4-20) 18.56 18.56
Contrôle explicite (2-10) 7.33 8.67
Adaptabilité (2-10) 8 7.33
Gestion des erreurs (2-
8.33 7.56
10)
Homogénéité/Cohérence
4.78 4.56
(1-5)
Compatibilité (1-5) 4.11 4
Signifiance des codes et
1.78 1.11
dénomination (1-5)
Tableau 6.3 – Scores des deux groupes d’apprenants selon les critères ergonomiques
principaux de Bastien et Scapin
Si on néglige toutes les différences inférieures à 1 point, on peut remarquer que

c’est au niveau du critère principal le guidage qu’on a une différence de 10.56 points
ce qui coïncide avec la différence au niveau du score global.
En effet, ces résultats confirment bien le fait que l’ajustement ergonomique, appli-
qué au site web généré par l’outil opale et qui n’a concerné que les sous-critères du
132
guidage, a modifié l’appréciation perceptive des apprenants envers le site du cours.

Les scores des autres critères ne sont pas différents (+ ou – 1 point) ce qui peut
être expliqué par le fait qu’on n’a pas modifié, lors de l’ajustement, les aspects ergo-
nomiques en relation avec ces critères.
Figure 6.2 – Score des deux groupes pour les huit critères ergonomique de Bastien et
Scapin
V.3. Les scores des trois sous-critères du guidage sur les-

quels on a appliqué l’ajustement ergonomique
Pour les trois sous-critères sur lesquels l’ajustement ergonomique a été appliqué
(Incitation, Groupement/Distinction entre items et Lisibilité), on a les résultats sui-
vants :
133
sous-critères ergono- Groupe contrôle Groupe expérimen- Évolution

mique du guidage tal
Incitation (6-30) 21.44 25.44 + 18%
Groupement/Distinction 8.33 13.67 +64%
entre items (3-15)
Lisibilité (2-10) 7.56 8.67 +14%
Tableau 6.4 – Scores des deux groupes d’apprenants pour trois sous-critères du guidage
On constate une différence d’appréciation pour les trois sous-critères, la figure

suivante illustre bien cette différence :
Figure 6.3 – Score des deux groupes d’apprenants selon trois sous critère du guidage
VI. Conclusion
Pour mesurer l’impact d’une conception ergonomique d’un ENA sur les apprenants,
on a procédé, au niveau de ce chapitre, par une expérimentation.
Après la mise en place d’un site web éducatif avec un outil de génération auto-
matique de cours en ligne, l’outil opale, on a divisé l’échantillon des apprenants qui
vont suivre l’apprentissage du module concerné en deux groupes. Le premier groupe
134
a suivi l’apprentissage sur la version originale du site alors que le deuxième a suivi
l’apprentissage sur une version réajustée ( réajustement ergonomique) du site original.
À la fin de l’apprentissage, on a demandé aux apprenants de répondre à un ques-
tionnaire d’évaluation ergonomique en ligne. Les résultats ont montré une améliora-
tion nette de l’appréciation perceptive des apprenants après ajustement ergonomique
ce qui a confirmé notre hypothèse et qui a montré l’importance d’une conception er-
gonomique des ENA pour assurer des apprentissages signifiants en offrants davantage
de convivialité à ces environnements.
135
136
Cinquième partie
Conclusion générale et perspectives
137
Si les TIC semblent, de nos jours, intégrer notre vie quotidienne, l’hypothèse que
cet ensemble d’innovations va substituer l’apprentissage classique ou à la limite le
révolutionner est discutable.
Les expériences du passé sur l’application de la technologie dans l’apprentissage
nous incitent à réflichir sur l’éfficacité d’une telle application. C. Gauthier et Véronique
Jobin énoncent :". . .il y a lieu de se demander si nous serons capables d’écouter les
leçons d’un siècle d’erreurs sur le plan de l’application des technologies en éducation.
Ne sommes-nous pas en effet en train de reproduire les étapes du cercle vicieux des
innovations technologiques à l’école qui ont eu cours tout au long du XXe siècle ?. . ."
(Gauthier & Jobin, 2009)
Cette constatation nous a menés à essayer de répondre à la question : comment
apprend-on avec la technologie ? Pour se faire, on a étudié les différentes théories de
l’apprentissage par la technologie : La théorie cognitive de l’apprentissage multimédia
(CTML) de Richard E. Mayer, le modèle intégratif de compréhension de texte et
d’images (Integrated Comprehension for Text and Picture, abrégé ICTP) proposée par
(Schnotz, 2005) et la théorie de la charge cognitive élaborée par Sweller et Chandler
(Chandler & Sweller, 1991)
Toutes ces théories qu’on a présentées au cours de ce travail, postulent que la
technologie est un support qui doit s’adapter et tenir compte des caractéristiques et
contextes des acteurs d’un système d’apprentissage par la technologie et que toute
autre approche qui prétend que l’apprenant doit s’adapter à la technologie pour ap-
prendre ne favorise pas les apprentissages signifiants.
L’ergonomie cognitive peut avoir un grand impact pour favoriser de tels types
d’apprentissages. Il s’avère que du fait que l’ergonomie vise à améliorer le monde qui
nous entoure, elle satisfait les principes fondamentaux des théories d’apprentissage par
la technologie. Mais, en ce qui concerne l’application de l’ergonomie dans le domaine
éducatif, les efforts restent timides pour ne pas dire inexistante.
Dans ce contexte, on a essayé dans ce projet d’appliquer l’ergonomie dans le proces-
sus de développement et mise en place des systèmes d’apprentissage par la technologie
qui sont les sites web éducatifs. Pour cela, on a présenté un guide ergonomique pour
la conception d’un site web éducatif sur la base des critères de Bastien et Scapin que
tout concepteur technique de tels projets peut utiliser. Ensuite, on a présenté un ques-
tionnaire utilisateur pour l’évaluation ergonomique d’un site web éducatif qui servira
139
pour toute personne voulant évaluer la qualité ergonomique d’un site web éducatif du
point de vue des apprenants. Une évaluation subjective certes, mais importante pour
l’amélioration d’un environnement numérique d’apprentissage
Pour montrer la pertinence du guide ergonomique proposé, on a essayé de tester
l’impact de l’utilisation du guide dans un système d’apprentissage numérique réel sur
un échantillon de 18 étudiants en informatique. Les résultats ont bien confirmé qu’une
application des recommandations du guide ergonomique que nous avons proposée peut
améliorer la qualité ergonomique d’un site web éducatif.
Notre projet a essayé de proposer un premier guide ergonomique pour les sites
web éducatifs sur la base des critères de Bastien et Scapin qui contient plus que 400
recommandations synthétisées et organisées en 18 critères élémentaires. Nous tenons
que cette première proposition incitera les acteurs du domaine à l’enrichir davantage
surtout avec les découvertes scientifiques dans les domaines de la psychologie cognitive,
l’IHM et la neuroscience.
Pour ce qui est de l’évaluation ergonomique, on a proposé un questionnaire pour
évaluer la qualité ergonomique du point de vue des apprenants. Une évaluation sub-
jective certes, mais importante qui peut être appuyée par l’élaboration d’un prototype
d’audit ergonomique expert qui évaluera minutieusement la conformité du site avec
les recommandations du guide ergonomique de la conception.
En plus, ce guide est applicable essentiellement sur des sites web éducatifs et non
aux autres types d’ENA comme les plateformes, les cédéroms interactifs, etc. Un travail
équivalent peut être lancé pour les autres types d’ENA.
Finalement, l’ergonomie des ENA n’est qu’une pièce du puzzle, elle doit donc être
intégrée dans le processus de développement de ces environnements et elle doit tenir
compte des spécifications pédagogiques imposées par le système d’apprentissage. Une
grande réflexion peut être lancée dans ce sens.
140
Annexe A: Carte conceptuelle du
cours en ligne
141
Annexe A. Carte conceptuelle du cours en ligne
142
Annexe B: Contenu et
structuration du module en ligne
143
Annexe B. Contenu et structuration du module en ligne
Contenu et structuration du module
1. Introduction
2. Types de données
(a) Types primitifs
• Les variables de type numérique

• Les variables booleénnes
• Les caractères
(b) Chaînes de caractères
(c) Les Types composés
• Les tableaux à une dimension

• Les tableaux à deux dimension
3. Les opérateurs
(a) Liste des opérateurs
(b) Les conversions (ou casting)
4. Lecture des entrées du clavier
5. Les structures de contrôle
(a) La structure if .. else
• Les conditions simples

• Les conditions multiples
(b) La structure switch
(c) La condition ternaire
(d) Les structures avancées : "break" et "continue"
6. Les structures répétitives
144
(a) La boucle for
(b) La boucle while
(c) La boucle do .. while
7. Conclusion
145
146
Annexe C: Fiches modules du
cours en ligne : Niveau 0
147
Annexe C. Fiches modules du cours en ligne : Niveau 0
I. Système d’entrée
Pré requis :
• Architecture des ordinateurs,
• Logique booléenne,
• Algorithmique,
• Programmation modulaire (structurée) avec le langage C,
• Environnement d’exéction Java.

Objectifs :
À la fin de ce module, les étudiants de la deuxième année du cycle préparatoire de
l’université TIME, doivent être capable de :
• Connaître la syntaxe de base du langage Java.
• Identifier les différents types de variables et données et leurs utilisations.
• Utiliser les différentes structures de contrôle de manière judicieuse.
• Créer des programmes simples optimaux et syntaxiquement et sémantiquement

corrects.
• Mettre en place des programmes facilement maintenables et évolutifs.
Mode d’évaluation :
• Exercices interactifs (QCM, texte à trou, etc..)
• Exercices d’auto-évaluation.
• Problèmes et exercices.
Mode d’enseignement :
• Enseignement à distance : Présentiel enrichi.
Dispositif technique :
• Site web éducatifs.
• Outil de communications : Forums de discussion, chat.
148
Activités d’apprentissage :
• Devoirs à la maison.
• Documents pdf.
• Des vidéos.
• Des activités d’auto-évaluation (QCM, etc..).
Outils :
• Ordinateurs (Bureau, portable, tablette),
• Connexion Internet,
• Lecteurs de fichiers pdf (Adobe Reader),
• Lecteurs de vidéo sur web (Flash player),
• Navigateur(s) récents.
Planification :
Voir le scénario pédagogique.
II. Système d’apprentissage

Introduction du module :
Ce chapitre détaille la syntaxe et les éléments de bases du langage Java. Cette
syntaxe est largement inspirée de celle du langage C.
Ce chapitre sera composé des sections suivantes :
• Les variables et les types de données ;
• Les opérateurs arithmétiques ;
• La lecture du clavier ;
• Les structures conditionnelles ;
• Les structures répétitives.
149
Contenu :
Module 1 : Types de données.
Module 1.1 : Types primitifs
Module 1.2 : Types Composés
Module 1.2.1 : Les Tableaux
Module 1.2.2 : Les matrices
Module 1.3 : Les chaînes de caractères
Module 2 : Les opérateurs
Module 3 : Structures de contrôle
Module 3.1 : Structures conditionnelles
Module 3.2 : Structures itératives
Module 3.2.1 : Boucle for()
Module 3.2.2 : Boucle while()
Module 3.2.3 : Boucle do..while()
Module 3.3 : Structures de choix multiple
Module 3.4 : Structures avancées
Conclusion :
III. Système de sortie

Evaluation du module :
• Examen Présentiel.
150
Annexe D: Cahier des charges du
cours en ligne
151
Annexe D. Cahier des charges du cours en ligne
Cahier des charges pour le projet : « La mise en ligne du module : La

syntaxe de base du langage Java »
Titre : La syntaxe de base du langage Java

Auteur : Mr Zied Trabelsi
Public cible : Etudiants de la deuxième année du
cycle préparatoire du TIME univer-
sité
Discipline : Informatique
Prérequis :
• Architecture des ordinateurs,
• Logique booléenne,
• Programmation structurée,
• Algorithmique et structure des

données,
• Environnement d’exécution
Java.
Côté public
Attente : La mise en ligne de ce module vient dans le but

d’aider les apprenants à comprendre cette partie
du cours « Programmation orientée objet avec le
langage Java » en leurs fournissant un espace d’ap-
prentissage en ligne qui renforcera l’apprentissage
suivi dans les séances présentielles.
Du fait que cette partie est la plus basique du
cours, il est indispensable pour comprendre le reste
du cours de s’approprier cette partie.
Niveau d’études : Cette formation s’adresse aux étudiants en
deuxième année cycle préparatoire au TIME uni-
versité au niveau du premier semestre.
Age des appre- 19 - 30
nants :
Effectif : 21
152
Conditions et dis- Le candidat travaille principalement chez lui il doit

ponibilité : donc disposer d’une connexion Internet haut-débit
afin d’accéder au site web.
Il doit avoir un environnement de développement
installé (Eclipse, Netbeans, etc.)
Le temps minimum qu’il doit le consacrer à cette
formation est 2H par semaine.
Environnement so- Tous les apprenants sont disponibles à plein temps
cioprofessionnel : pour la formation. Il n’y a pas des étudiants pro-
fessionnels.
Il faut donc tenir compte de l’emploi du temps du
groupe pour la planification des activités en ligne.
Compétences tech- Tous les apprenants ont un niveau avancé en ma-
nologiques : tière des TIC.
Style d’apprentis- La structuration pédagogique s’articule autour de
sage : trois systèmes :
• Système d’entrée (objectifs, test de position-

nement),
• Système d’apprentissage,
• Système de sortie (post-test).
Une approche socioconstructiviste sera utilisée

pour l’enseignement du module (et spécialement
le chapitre qu’on va le scénariser).
Côté formation
Présentation : Cette mise en ligne va offrir un système d’ap-
prentissage secondaire de renforcement du système
principal (les cours présentiels).
Il s’agit de mettre en ligne un module du cours
« Programmation Orientée Objet avec le langage
Java » afin de s’assurer que les apprenants s’ap-
proprient cette partie du cours.
Cadre de la formation : C’est une initiative pédagogique de l’enseignant
responsable du cours au TIME université.
153
Etat de l’existant : Le module Programmation Orientée Objet avec le

langage Java s’enseigne en mode présentiel avec
des séances de cours, TDs et TPs.
Il n’y a pas des cours en ligne élaborés par l’uni-
versité et les apprenants sont généralement livrés
à eux-mêmes avec la panoplie des sites sur la toile.
But de l’ensemble de la Renforcer le présentiel
formation :
Modalité de la forma- Mixte
tion :
Durée de la formation : Quatre semaines
Volume horaire : 3 heures de cours en présentiel par semaine
154
Bibliographie
Baddeley, A. (1986). Human memory. Allyn and Bacon, Boston. 17

Bailey, J. E., & Pearson, S. W. (1983). Development of a tool for measuring and
analyzing computer user satisfaction. Management Science(29), 530-545. 106
Bastien, J. M. C., Leulier, C., & Scapin, D. L. (1998). L’ergonomie des sites web. In
L. M. J.-C. . H. B. C. et maintenir un service Web (Ed.), (p. 111-173). Paris :
ADBS. 9, 34, 53, 103, 104, 107
Bastien, J. M. C., & Scapin, D. L. (1993). Ergonomic criteria for the evaluation of
human-computer interfaces (Rapport technique). INRIA. 3, 4, 8, 9, 10, 33, 34,
53
Boucher, A. (2009). Ergonomie web pour les sites web educatifs. Eyrolles. 24, 29, 30,
31, 32, 53, 64, 78, 89, 104
Canivet-Bourgaux, I. (2014). Bien rédiger pour le web (3e éd. ; Eyrolles, Ed.). 66, 94,
95
Chandler, P., & Sweller, J. (1991). Cognitive load theory and the format of instruction.
Cognition and Instruction. 21, 139
Chin, J. P., Diehl, V. A., & Norman, K. L. (1988). Development of a tool mea-
suring user satisfaction of the human-computer interface (Rapport technique).
Department of Psychology, College Park, MD 20742, University of Maryland.
106
Cuban, L. (1986). Teachers and machines : The classroom use of technology since
1920. Teachers College Press, New York. 7
Cuban, L. (2001). Oversold and underused : Computers in the classroom. Harvard
University Press, Cambridge, MA. 14
Davis, F. D. (1989). Perceived usefulness, perceived ease of use, and user acceptance
of information technology. MIS Quarterly. 106
der Veer, G. C. V., Tauber, M. J., & Gorny, T. R. G. G. P. (1984). Readings on
cognitive ergonomics. In Mind and computers. 23
Duchowski, A. T. (2007). Eye tracking methodology : theory and practice (Springer,
Ed.). 25
Falzon, P. (1990). Cognitive ergonomics : Understanding, learning and designing
human-computer interaction. Academic Press Professional, Inc. San Diego, CA,
155
Bibliographie
USA. 23
Gauthier, C., & Jobin, V. (2009). Moins, c’est souvent mieux. Les Presses de l’Uni-
versité Laval 2009. 19, 21, 139
Ghirardini, B. (2012). méthodologies pour le développement de cours e-learning : Un
guide pour concevoir et élaborer des cours d’apprentissage numérique. FAO. 45,
47, 48
Graesser, A. C., Chipman, P., & King, B. (2008). Computer-mediated technologies. In
(Vol. Handbook of Research on Educational Communications and Technology,
p. 211-224). Erlbaum, New York. 13
Green, T. R., Payne, S. J., & Veer, G. C. V. D. (1983). The psychology of computer
use. Academic Press. London. 22
Hoc, J.-M. (1998). L’ergonomie cognitive : un compromis nécessaire entre de s ap-
proches centrées sur la machine et des approches centrées sur l’homme. Recherche
et Ergonomie. 22
Instone, K. (1997). Site usability heuristics for the web. Web Review. 33
Kirkpatrick, D. (1998). Evaluating training programs (Second Edition éd.). Berrett-
Koehler Publishers Inc. 125
Lewis, J. R. (1995). Ibm computer usability satisfaction questionnaires : Psychometric
evaluation and instructions for use. International Journal of Human-Computer
Interaction, 7 (1), 57-78. 106
Lin, H. X., Choong, Y.-Y., & Salvendy, G. (1997). A proposed index of usability :
A method for comparing the relative usability of different software systems. In
T. . Francis (Ed.), Behaviour and information technology (Vol. 16, p. 267-278).
106
Lior, L. N. (2013). Writing for interaction : Crafting the information experience for
web and software apps (H. Scherer, Ed.). Elsevier. 44, 47
Lowyck, J. (2008). Foreword. In Handbook of Research on Educational Communica-
tions and Technology, Erlbaum, New York, xiii-xv. 13
Lund, A. M. (2001). Measuring usability with the use questionnaire. Usability ans
User Experience, 8 (2). 106
Luyat, M., & Regia-Corte, T. (2009, June). Les affordances : de james jerome gibson
aux formalisations récentes du concept. L’Année psychologique, 109 (109), 297 -
332. 31
MacKenzie, S. (1992). Fitts’ law as a research and design tool in human-computer
interaction. Human-Computer Interaction, 7 , 99-139. 31
Maslow, A. (1943). A theory of human motivation. Psychological Review, 50 , 370-396.
27
Mayer, R. E. (2005). The cambridge handbook of multimedia learning. Cambridge
University Press, New York. 8, 15, 19
Mayer, R. E. (2008). Learning and instruction. Merill Pearson Prentice Hall, Upper
156
Bibliographie
Saddle River. 12, 14, 15, 17, 18, 23

Mayer, R. E. (2010). Apprentissage et technologie. Comment apprend-on ? la re-
cherche au service de la pratique. Consulté sur http://dx.doi.org/10.1787/
9789264086944-fr 3
Miller, G. A. (1956). The magical number seven, plus or minus two : Some limits
on our capacity for processing information. Psychological Review, 63 (2), 81–97.
Consulté sur http://psychclassics.yorku.ca/Miller/ 32
Nielsen, J. (1993). Nielsen’s attributes of usability. Usability Engineering.. 106
Nielsen, J., & Molich, R. (1990, April). Heuristic evaluation of user interfaces. ACM ,
249-256. 33, 53, 105
Nielsen, J., & Pernice, K. (2009). Eyetracking web usability (N. R. Press, Ed.). 25
Norman, D. A. (1993). Things that make us smart : Defending human attributes in
the age of the machine. Addison-Wesley, New York. 8
Norman, D. A. (2005). Emotional design : Why we love (or hate) everyday things
(B. Books, Ed.). 28
Paivio, A. (1986). Mental representations : A dual coding approach. Oxford University
Press, Oxford. 17
Paivio, A. (2007). Mind and its evolution. Erlbaum, Mahwah, NJ. 17
Perlman, G. (1997). Practical usability evaluation. OCLC Online Computer Library
Center. 106
Rayner, K. (1998, november). Eye movements in reading and information processing :
20 years of research. Psychological Bulletin, 3 (124), 372-422. 26
Saettler, P. (2004). The evolution of american educational technology (Greenwich,
Ed.). Information Age Publishing. 8, 13, 14
Schnotz, W. (2005). An integrated model of text and picture comprehension. In
R.E. Mayer (Eds), The Cambridge handbook of multimedia learning (pp. 49-69)
Cambridge : Cambridge University Press.. 21, 139
Sweller, J. (1999). Instructional design in technical areas. ACER Press, Camberwell,
Australie. 19, 20, 21
Walter, A. (2012). Design Émotionnel (Eyrolles, Ed.). 27, 28
Wittrock, M. C. (1989). Generative processes of comprehension. Educational Psycho-
logist, 24 (4), 345-376. 17
157
6
i
4
i
2
i
5
? ?
?
6 ? Header
6
i
6
6
6
Body i
7
Margin
Notes
i-
9
-
i
10
i-
3
i
8 -
i
11
? ?
1i- Footer
6
1 one inch + \hoffset 2 one inch + \voffset

3 \oddsidemargin = 50pt 4 \topmargin = 20pt
5 \headheight = 12pt 6 \headsep = 19pt
7 \textheight = 590pt 8 \textwidth = 436pt
9 \marginparsep = 30pt 10 \marginparwidth = 20pt
11 \footskip = 30pt \marginparpush = 7pt (not shown)
\hoffset = 0pt \voffset = 0pt
\paperwidth = 614pt \paperheight = 794pt
6
4i 2i
i
5
? ?
?
6 ? Header
6
i
6
6
6
Margin
Body i
7
Notes
9i
-
-
i
10
i-
3
i
8 -
i
11
? ?
1i- Footer
6
1 one inch + \hoffset 2 one inch + \voffset

3 \evensidemargin = 62pt 4 \topmargin = 20pt
5 \headheight = 12pt 6 \headsep = 19pt
7 \textheight = 590pt 8 \textwidth = 436pt
9 \marginparsep = 30pt 10 \marginparwidth = 20pt
11 \footskip = 30pt \marginparpush = 7pt (not shown)
\hoffset = 0pt \voffset = 0pt
\paperwidth = 614pt \paperheight = 794pt
Résumé : Avec les possibilités qu’offrent les TIC, de nouvelles formes d’apprentissage et pratiques pé-
dagogiques ont vus le jour. Cependant, il est illusoire de croire que l’integration des TIC dans le monde
de l’éducation sera la panacée des problèmes de l’apprentissage classique. Toute integration doit tenir
compte des caractéristiques des apprenants. Ce travail se base sur La théorie cognitive de l’apprentissage
multimédia de Richard Mayer qui prend appui sur les résultats des recherches en psychologie cognitive et
surtout la théorie de la charge cognitive. L’idée, est d’essayer d’appliquer l’ergonomie dans un projet de
développement d’un ENA et montrer l’importance d’une réflexion ergonomique tout au long du cycle de
vie du projet. On a commencé par l’élaboration d’un guide ergonomique pour la conception d’un site web
éducatif sur la base des critères de Bastien et Scapin pour proposer, ensuite, un questionnaire utilisateur
pour l’évaluation ergonomique d’un site web éducatif. Pour montrer les avantages de l’integration de l’er-
gonomie dans le processus de développement d’un système d’apprentissage numérique, une dernière phase
d’expérimentation a été menée afin de mesurer l’impact d’une conception ergonomique sur l’appréciation
perceptive des apprenants. Les résultats ont confirmés notre hypothèse.
Mots clés : Apprentissage par la technologie, théorie cognitive de l’apprentissage multimédia, ergo-
nomie cognitive, ergonomie de sites web éducatifs, liste de critères ergonomiques de Bastien et Scapin,
environnement numérique d’apprentissage.
Abstract : With the potential of ICT , new forms of learning and teaching practices have appeared
. However , it is unrealistic to believe that the integration of ICT in the field of education will be the
panacea to the problems of classical learning. Any integration must take into account the characteristics of
learners. This work is based on the cognitive theory of multimedia learning of Richard Mayer that is based
on the results of research in cognitive psychology and especially the theory of cognitive load . The idea, is
to try to apply ergonomics in a development project of a ENA and to show the importance of an ergonomic
reflection throughout the life cycle of the project. We started with elaborating an ergonomic guide for
the design of an educational Web site on the basis of criterion of Bastien and Scapin to propose, then,
a user questionnaire for the ergonomic evaluation of an educational Web site. To show the advantages
of the integration of ergonomics in the development process of a digital learning environment, a last
experimental phase was carried out in order to measure the impact of an ergonomic design on the
perceptive appreciation of learning. The results confirmed our assumption.
Keywords : Learning through technology, cognitive theory of multimedia learning, cognitive ergonomics,
educational web site ergonomy, Bastien and Scapin ergonomic criteria list, digital learning environment.

½Ë X ©Óð , éJk ñ« @ YJJË @
. .

H AP AÒÖÏ @ð ÕÎ
ªJË
@ áÓ è YK Yg
.
B A¾ @

È A B @ð

H AÓñÊªÖÏ @

H AJk ñËñJºK
.

Ik AK @ Y®Ë : é Cm
Ì
'@

Ì Ì ×
ªJË
Am '@ è A« @QÓ ùªJK X@ è XñêªÖÏ @ ÕÎ @ É¿ AÖÏ I AJÖÏ @ð ÉJÓ B @ Ém '@ ñë ÕæÊªJË @ ú¯ Aêm X à AK ÑëñJK à@ áºÖß B
. . . .

ªJÊË á
« Ð ñ ®K úæË @ QK AÓ XP AK QË AK YJÒJJÊÖÏ AK ÕÎ éJ¯QªÖÏ @ éK Q¢JË @ úÍ @ ÉÒªË @ @ Yë YJ . AêË AÒªJ @ YJ« ÒÊªJÒÊË éJK @ YË @
úÎ
.

ªK « × ' '
ÕÎ H @ Z A¯ ÕæÒ Ég @ áÓð . ú¯ QªÖÏ @ ÉJÒjJË @ éK Q¢ Añkð ú¯ QªÖÏ @ ®JË @ ÕÎ È Am ú¯ è X YªJÓ Hñm l AJK
. . . .

á Q ' ¯
ú« @QK H @ Z A®Ë @ è Yë ùÒÒÓ è YK A®Ë AJÓñKñ«P @ CJË X QªJË áK A¾ð J AK K AªÓ éÖß A¯ AJÓ YjJ @ ém QÓ ùÔ P
. .

« ' á
éJÊÔ ú¯ ÉJË YË @ @ Yë Ð @ YjJ B úG Am B@ QK B @ ®Ë éÊJñ» à AJJ B @ AJË AÒªJ @ Y¯ð . ÒÊªJÖÏ @ Akð H @P Y¯
. .
.

á á Ì Q ' « ¯ ªJË
Jj « ÒÊªJÖÏ @ ø YË úæm '@ ¼ @P X B @ ÕæJ®K ú¯ ªJË @ AJ®Ë éJK Qm éJÊÔ P A£ @ ú¯ ùÔ QË @ ÕÎ @ H @ Z A¯ QK ñ¢
úÎ
. .

éjË @ ÉK YªK éjJK

.
éJK AJË @ð È AK ð @
.
éJ®JJ¢
.
K Q£ á« Aêk AJK @
.

Õç' úÍ ð @ éj :
IK
Q
K B @ éºJ
.

úÎ«
¯
ùÔ P P X áÓ

' Q
. AîDÊ« AJÊªJ @ úæË @ éJQ®Ë @ IjJË @ l AJK H Y» @ Y¯ð ék @ ¯ @ Õç' ø YË @ ÉJË YË @ Ik úÍ ð B @
. . .

H @ñË @
.
©¯ @ñÓ AJÓñKñ¯P @ , éJ¯QªÓ AJÓñKñ¯P @ , AK YJÒJÊÖÏ AK
.
ÕÎ
ªJÊË
éJ¯QªÖÏ @ éK Q¢JË @ , AJk ñËñJºJË AK
. .
ÕÎ
ªJË
@ : iJK A®ÖÏ @

H AÒÊ¾Ë @

¯ ªJË á Q
ùÔ QË @ ÕÎ @ Z A¯ , áK A¾ ð J AK éÖß A¯ , éK ñK Ë @
. . .

Ergonomie Des Environnements Numériques D'apprentissage

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ergonomie Des Environnements Numériques D'apprentissage

Transféré par

Droits d'auteur :

Formats disponibles

MASTER PROFESSIONNEL EN NOUVELLES TECHNOLOGIES

Ergonomie des environnements

Soutenu le 11 octobre 2014 devant le jury composé de :

Dr. Najoua GHRISS : Président de Jury

À mes chers parents. . .

II Cadre général et théorique 5

VI.2. Deuxième critère principal : Charge de Travail . . . . . . . . . . 38

III Ergonomie des sites web éducatifs 51

4 Évaluation ergonomique des sites web éducatifs 103

III.3. Critères évalués . . . . . . . . . . . . . . . . . . . . . . . . . . 110

IV Etude de cas et expérimentation 117

V Conclusion générale et perspectives 137

B Contenu et structuration du module en ligne 143

C Fiches modules du cours en ligne : Niveau 0 147

D Cahier des charges du cours en ligne 151

2.1 Théorie cognitive de l’apprentissage multimédia . . . . . . . . . . . . . 18

3.1 Système de navigation horizontal . . . . . . . . . . . . . . . . . . . . . 55

6.1 Différence du score global entre les groupes d’apprenants . . . . . . . . 132

2.1 Trois métaphores du mécanisme d’apprentissage . . . . . . . . . . . . . 16

5.1 Scénario des trois premières activités. . . . . . . . . . . . . . . . . . . . 123

6.1 Caractéristiques des deux échantillons d’étudiants . . . . . . . . . . . . 128

1. TIC : Technologies d’Informations et de Communications

Cadre général et théorique

Bien que les recherches en ergonomie cognitive ont commencé il y a longtemps et

1. ADDIE acronyme de :Analyse Design Developpement Implementation Evaluation. On pré-

IV. Descriptif du projet

2. Un questionnaire utilisateur pour l’évaluation ergonomique d’un site web édu-

3. Pour montrer les avantages de l’integration de l’ergonomie dans le processus

II. L’apprentissage par la technologie

de calcul de plus en plus importante et les services de recherches d’informations, on

II.1. Les approches de l’apprentissage par la technologie

II.1.a. L’approche centrée sur la technologie

Cuban (Cuban, 2001) conclut : « L’introduction des technologies de l’information

II.1.b. L’approche centrée sur l’apprenant

Cette approche s’appuie sur le concept du fonctionnement de l’esprit humain et elle

II.2. Les mécanismes de l’apprentissage par la technolo-

Métaphore Apprenant Enseignant Rôle de la

Tableau 2.1 – Trois métaphores du mécanisme d’apprentissage

II.3. Les théories de l’apprentissage par la technologie

La théorie cognitive de l’apprentissage multimédia (Cognitive Theory of Multime-

Le cerveau humain dispose de deux canaux distincts pour traiter l’information :

La théorie cognitive de l’apprentissage multimédia repose sur trois types de mé-

2. La mémoire de travail : Pour permettre la manipulation des informations de

Figure 2.1 – Théorie cognitive de l’apprentissage multimédia

Processus Description Localisation

II.3.a.ii. Les principes de l’apprentissage par la technologie se-

R. Mayer a présenté un ensemble de principes pour favoriser l’apprentissage par la

• Réduction du traitement externe,

• Gestion optimisée du traitement essentiel,

• Traitement génératif favorisé.

Réduction du traitement externe : Ou Réduction du traitement inutile. Ce

plusieurs principes : Cohérence, redondance, contiguïté spatiale et temporelle, signa-

1. Cohérence : Élimination de tout ce qui n’est pas en rapport avec l’objectif de

2. Redondance : Éviter de répéter les éléments multimédias inutilement ; par

3. Signalisation (Signalement) : les informations essentielles sont mises en évi-

4. contiguïté spatiale : Il s’agit d’appliquer des notions comme la proximité, la

5. contiguïté temporelle : Pour les vidéos et animations par exemple, la narra-

Gestion optimisée du traitement essentiel : Ce traitement, cognitif appelé

1. Segmentation : Découpage sémantique du cours. Il faut toujours essayer de

2. Pré entrainement (ou Préformation) : Donner aux apprenants ayant peu

Traitement génératif favorisé : Ce traitement cognitif profond que Sweller

1. Multimédia : Elle part du fait que l’apprenant apprend plus en profondeur

II.3.b. Autres théories de l’apprentissage par la technologie