Guide regroupant les grands principes ergonomiques et apprentissages multimédia appliqués aux mudules e-learning.

1. Pour gagner en efficacité
Cliquez pour modifier le style du titre
Guide des critères et recommandations
ergonomiques et multimédia
Laura CRESPIN
1

2. SOMMAIRE
Introduction : En quoi une bonne ergonomie est bénéfique pour l’apprentissage ?
1. Principes ergonomiques
Guidage
Charge de travail
Contrôle explicite
Homogénéité/cohérence
2. Apprentissage multimédia
Qu’est ce qu’un multimédia ?
Le principe multimédia
Le principe de modalité
Le principe de redondance
Le principe de contiguïté spatiale
Le principe de contiguïté temporelle
Le principe de cohérence
Le principe d’indiçage (signaling)
Les différences individuelles
Quiz
2

3. Cliquez pour modifier le style du titre
Introduction : En quoi une bonne ergonomie
est bénéfique pour l’apprentissage ?
3

4. En quoi une bonne ergonomie est bénéfique pour l’apprentissage
Une mauvaise ergonomie requiert des ressources chez l’apprenant. Ces ressources
mobilisés pour l’ergonomie ne pourront plus être utilisées pour le traitement de
l’information, soit l’apprentissage.
Un document multimédia efficace diminue les ressources dues à l’ergonomie et
augmente les ressources utilisées pour l’apprentissage.
Une bonne ergonomie permet donc de gagner en efficacité.
Apprentissage Apprentissage
Ergonomie
Ergonomie
Document non efficace Document efficace
4

5. Cliquez pour ergonomiques du titre
1. Principes modifier le style
Guidage
Lisibilité
Charge de travail
Contrôle explicite
Homogénéité/cohérence
5

6. Principes ergonomiques
Guidage
Titre de
Logo N° Chapitre Titre chapitre
l’animation
Certaines informations doivent
apparaître sur chaque page :
 Un logo
 Le N° du chapitre
 Un titre
 Possibilité de revenir à la page
d’accueil (généralement le logo
en haut à gauche)
 Possibilité de revenir en arrière
Possibilité de revenir à la page d’accueil Possibilité de revenir en arrière
6

7. Principes ergonomiques
Guidage
Concernant les titres :
 Ils doivent être compréhensibles et concis
 Ils doivent contenir les mots clé du texte
 Le premier mot doit apporter le plus d’informations possible
 Eviter de commencer tous les titres par le même mot
7

8. Principes ergonomiques
Lisibilité
- Eviter l’italique
- Eviter les textes en capitales
- Contraste texte/arrière-plan soutenu
- Préférer un fond léger
- Rédiger des textes qui soient au moins deux fois plus courts que des textes destinés à être
imprimés
- Faire en sorte que les apprenants n'aient pas de longs blocs de texte à lire : utiliser des
paragraphes courts, des titres et sous-titres et des listes de puces, utiliser des pop-up pour
diviser les blocs d'informations longs
8

9. Principes ergonomiques
Lisibilité
- Justifier le texte à gauche (pas gauche et droite)
- Éviter les caractères clignotants (les mettre en gras ou augmenter la taille de police), car ils
attirent l'attention de l‘apprenant au détriment des autres informations disponibles sur la page
- Éviter les messages défilant (posent des problèmes à la lecture compte tenu de la vitesse
variable de défilement) => utiliser du texte statique
- Utiliser des polices sans sérif (de type Arial), qui sont recommandées pour la lecture sur écran
contrairement aux polices avec sérif (de type Times) qui sont recommandées pour la lecture sur
papier.
Arial Times
Sans sérif Avec sérif
9

10. Principes ergonomiques
Lisibilité
Remarque : le temps de lecture à REMARQUE : LE TEMPS DE LECTURE
A L’ECRAN EST SUPERIEUR DE 25-
l'écran est supérieur de 25-30%
30% COMPARATIVEMENT A UNE
comparativement à une lecture faite LECTURE FAITE SUR UN SUPPORT
sur un support papier, bien qu’il se soit PAPIER, BIEN QU’IL SOIT REDUIT
réduit fortement depuis les écrans FORTEMENT DEPUIS LES ECRANS
LCD.
LCD. PAR AILLEURS ON ESTIME QUE LA
Par ailleurs, on estime que la PROPORTION DE SURFACE LIBRE
proportion de surface libre nécessaire NECESSAIRE DANS UN DOCUMENT
PAPIER REPRESENTE 25 A 40% DE LA
dans un document papier représente
SURFACE TOTALE ; SUR UN ECRAN,
de 25 à 40% de la surface totale ; sur LA PROPORTION DE SURFACE LIBRE
un écran, la proportion de surface libre EST DE 40 A 60% DE LA SURFACE
est de 40 à 60% de la surface totale. TOTALE.
Bonne lisibilité Mauvaise lisibilité
Pourquoi le texte de droite n’est pas lisible ?
10

11. Principes ergonomiques
Lisibilité
Remarque : le temps de lecture à REMARQUE : LE TEMPS DE LECTURE
A L’ECRAN EST SUPERIEUR DE 25-
l'écran est supérieur de 25-30%
30% COMPARATIVEMENT A UNE
comparativement à une lecture faite LECTURE FAITE SUR UN SUPPORT
sur un support papier, bien qu’il se soit PAPIER, BIEN QU’IL SOIT REDUIT
réduit fortement depuis les écrans FORTEMENT DEPUIS LES ECRANS
LCD.
LCD. PAR AILLEURS ON ESTIME QUE LA
Par ailleurs, on estime que la PROPORTION DE SURFACE LIBRE
proportion de surface libre nécessaire NECESSAIRE DANS UN DOCUMENT
PAPIER REPRESENTE 25 A 40% DE LA
dans un document papier représente
SURFACE TOTALE ; SUR UN ECRAN,
de 25 à 40% de la surface totale ; sur LA PROPORTION DE SURFACE LIBRE
un écran, la proportion de surface libre EST DE 40 A 60% DE LA SURFACE
est de 40 à 60% de la surface totale. TOTALE.
Bonne lisibilité Mauvaise lisibilité
Pourquoi le texte de droite n’est pas lisible ?
• Texte en italique • Texte justifié à gauche et à droite
• Texte en capitale • Police avec sérif
• Mauvais contraste fond/forme • Pas de mise en forme avec les
• Fond non uniforme idées importantes en surbrillance 11

12. Principes ergonomiques
Charge de travail
Les listes d’items doivent être courtes (pas plus de 7) car les études en psychologie cognitive ont
mis en évidence les capacités limitées et de la mémoire de travail*, or la mémoire de travail
intervient dans le traitement des informations.
Mémoire de travail :
La mémoire de travail est la capacité à retenir des informations à
court terme (quelques secondes) pour réaliser des opérations
mentales sur ces informations (par exemple mémoriser et
comprendre des informations).
La capacité limitée de la mémoire de travail contraint les activités
mentales complexes comme la mémorisation d’informations, c’est
pourquoi il faut en tenir compte dans la présentation de l’information.
12

13. Principes ergonomiques
Charge de travail
La densité informationnelle concerne la charge de travail du point de vue perceptif et mnésique
(relatif à la mémoire).
Recommandations :
- Éliminer sur chaque page, les informations superflues pouvant distraire l‘apprenant.
- Le nombre d’éléments cliquables sur un écran ne doit pas être supérieur à 7 (cf mémoire de
travail).
13

14. Principes ergonomiques
Contrôle explicite
L‘apprenant doit toujours "avoir la main" sur le fonctionnement du module, c'est-à-dire qu'il doit
pouvoir contrôler son déroulement (interrompre, reprendre, revenir en arrière etc.). Ses actions
doivent pouvoir être anticipées grâce à des options appropriées qui doivent être fournies pour
chaque cas.
Recommandations :
- Pour les sons : éviter qu'ils soient téléchargés et déclenchés automatiquement. De plus, lors de
l'écoute, un panneau de contrôle doit être fourni. Les sons peuvent être utilisés en complément
de l'interface visuelle pour informer l‘apprenant d'événements d'arrière-plan. Des sons de bonne
qualité enrichissent le site.
- Les animations périphériques (c'est-à-dire secondaires, qui n’entrent pas en jeu dans la
compréhension) sont à éviter. Elles mobilisent l’attention des apprenants ce qui engendre des
difficultés pour lire les autres informations.
- Les animations sont à minimiser au maximum et éviter celles qui bouclent sans fin.
14

15. Principes ergonomiques
Homogénéité/cohérence
Les choix de conception de l'interface (codes, dénominations, formats, procédures, etc.) doivent
être conservés pour des contextes identiques, et doivent être différents pour des contextes
différents.
Recommandations :
- Les icônes doivent être utilisées de manière cohérente, c'est-à-dire une même icône utilisée
pour une même fonction et dans le même format.
- Tous les écrans du module doivent avoir la même structure : utilisation de formats identiques
pour les titres, les alignements, les dispositions d'images, etc.
- Les mêmes séquences d'action doivent avoir les mêmes effets pour l'ensemble du module.
- Les termes employés sur le module doivent être homogènes : un même mot renvoie toujours à
la même signification.
15

16. Cliquez pour modifier le style du titre
2. Apprentissage multimédia
Qu’est ce qu’un multimédia ?
Le principe multimédia
Le principe de modalité
Le principe de redondance
Le principe de contiguïté spatiale
Le principe de contiguïté temporelle
Le principe de cohérence
Le principe d’indiçage (signaling)
Les différences individuelles
16

17. Apprentissage multimédia
Qu’est ce qu’un multimédia
Les recommandations concernant l’apprentissage multimédia vont permettre aux concepteurs
pédagogiques d’organiser aux mieux les modules e-learning pour permettre une meilleure
intégrations des informations et donc un meilleur apprentissage.
Un document multimédia est un support composé d’au moins deux moyens de représenter
l’information, tel que :
- Du texte
- Des images
- Du son
- Des animations Une personne assise devant un
ordinateur et qui reçoit des
informations textuelles, graphiques,
animées ou encore sonore.
Une présentation avec un discours
oral et des informations graphiques.
Support avec du
texte et des images.
17

18. Apprentissage multimédia
Le principe multimédia
Le principe multimédia suggère que les illustrations se révèlent bénéfiques pour aider à la
compréhension d’un texte. Les apprenants retiennent et comprennent mieux avec un texte + une
illustration qu’avec un texte seul. Néanmoins il faut que le contenu de l’illustration soit nécessaire
à la compréhension et cohérente avec le contenu du texte.
La poulie est un engin en forme La poulie est un engin en forme
de roue servant à transmettre un de roue servant à transmettre un
mouvement. Dans le cas ou on mouvement. Dans le cas ou on
utilise une poulie fixe, utilise une poulie fixe,
la force de traction change. Ceci la force de traction change. Ceci
consiste à ce que le poids à faire consiste à ce que le poids à faire
bouger ne se divise ou ne se bouger ne se divise ou ne se
multiplie, mais à ce que la multiplie, mais à ce que la
direction dans laquelle on doit direction dans laquelle on doit
tirer change et qu’on pourra se tirer change et qu’on pourra se
suspendre à la corde pour hisser suspendre à la corde pour hisser
la charge. la charge.
Texte seul Texte + illustration
18

19. Apprentissage multimédia
Le principe de modalité
Le principe de modalité suggère que la compréhension et la mémorisation est meilleur à partir
d’une image et d’une narration entendue qu’à partir d’une image et d’un texte lu.
Lorem ipsum dolor sit
>
amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.
Illustration + narration > Illustration + texte
19

20. Apprentissage multimédia
Le principe de redondance
Le principe de redondance suggère que la compréhension et la mémorisation est meilleur à
partir d’une illustration accompagnée d’une narration qu’à partir d’une illustration accompagnée
d’une narration et d’un texte.
Lorem ipsum dolor sit
amet, consectetur
> adipisicing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.
Illustration + narration > Illustration + narration + texte
20

21. Apprentissage multimédia
Le principe de contiguïté spatiale
Le principe de contiguïté spatiale suggère que l’apprentissage est meilleur lorsque les mots et les
illustrations correspondantes sont physiquement proches.
axe
(point d’appui)
>
roue
force
charge
Présentation séparées où les
Présentation intégrée
informations textuelles sont
qui relie les informations
textuelles à l’illustration
grâce à des flèches.
> présentées à l’aide de fenêtres
disposées sur les côtés de
l’illustration.
21

22. Apprentissage multimédia
Le principe de contiguïté temporelle
Le principe de contiguïté temporelle suggère que l’apprentissage est meilleur lorsque les mots et
les images sont présentés simultanément plutôt que successivement.
Si délai entre narration et image est nul ou court, les apprenants peuvent faire des connexions
entre les représentations verbales et picturales. Si ce délai est long, les apprenants ont des
difficultés à faire ces connexions, ce qui perturbe la compréhension.
Le principe de cohérence
Le principe de cohérence suggère que les informations non cohérentes perturbent l’apprenant.
22

23. Apprentissage multimédia
Le principe d’indiçage (signaling)
Le principe d’indiçage suggère que l’apprentissage des individus est amélioré par l’ajout
d’informations au document, tel que des flèches directionnelles, des consignes, ou des couleurs
ayant pour but d’orienter leur attention sur les éléments pertinents de la leçon.
NB : Indicer un texte (c’est-à-dire le mettre en forme grâce à des titres, des paragraphes, des
listes à puces si nécessaire etc.) est plus efficace que le fait d’utiliser des indices tels que des
flèches.
23

24. Apprentissage multimédia
Les différences individuelles
• Le rôle des connaissances préalables :
Les effets bénéfiques d’un support multimédia sont plus importants pour les apprenants avec des
connaissances préalables peu élevées.
Les apprenants avec des connaissances préalables compensent le manque de guidage en utilisant
leurs connaissances.
Un design inapproprié entraîne une charge de travail (cf mémoire de travail) importante chez les
apprenants à faibles connaissances préalables.
• Le rôle des capacités de visualisation spatiale* :
Les effets bénéfiques d’un support multimédia sont plus importants pour les apprenants avec des
capacités de visualisation spatiale élevées.
Capacité de visualisation spatiale :
Capacité à visualiser et manipuler mentalement des objets aux formes complexes et de les faire
bouger dans l'espace.
24

25. Apprentissage multimédia
Synthèse
• Utiliser des illustrations lorsque celles-ci peuvent être bénéfiques pour la compréhension.
• Lors de l’utilisation d’une illustration, préférer l’accompagner d’un texte oral plutôt que d’un
texte écrit (par exemple utilisation d’une mascotte).
• Lors de l’utilisation d’une image, ne pas l’accompagné d’un texte oral + un texte écrit qui
reprendrait les même termes. Lors de l’utilisation d’une mascotte, ne pas retranscrire le contenu
du discours à l’écrit. Le contenu écrit peut compléter ou reprendre les points essentiels du
discours de la mascotte mais il ne doit pas le reprendre mots pour mots.
• Veiller à ce que les illustrations soit physiquement proches de leur équivalent textuel.
• Veiller à ce que les illustrations apparaissent en même temps que leur équivalent textuel.
• Eviter les illustrations non cohérentes avec l’information.
• Veiller à indicer l’information grâce à des flèches directionnelles, des consignes, ou des couleurs
ayant pour but d’orienter l’attention des apprenants sur les éléments pertinents de l’information.
25

26. Cliquez pour modifier le style du titre
Quiz
26

27. Quiz
Question 1
Une bonne ergonomie :
Libère des ressources chez l’apprenant qu’il pourra utiliser pour l’apprentissage
Diminue les ressources utilisées pour l’apprentissage
Augmente les ressources utilisées pour l’apprentissage
Améliore le design
27

28. Quiz
Question 1
Une bonne ergonomie :
Libère des ressources chez l’apprenant qu’il pourra utiliser pour l’apprentissage
Diminue les ressources utilisées pour l’apprentissage
Augmente les ressources utilisées pour l’apprentissage
Améliore le design
Un document multimédia efficace diminue les ressources dues à l’ergonomie et augmente les ressources
utilisées pour l’apprentissage.
28

29. Quiz
Question 2
Comment mettre les informations importantes en surbrillance ?
Mettre l’information en gras
Augmenter la taille de police
Mettre l’information d’une couleur différente du reste du texte
Faire clignoter l’information
29

30. Quiz
Question 2
Comment mettre les informations importantes en surbrillance ?
Mettre l’information en gras
Augmenter la taille de police
Mettre l’information d’une couleur différente du reste du texte
Faire clignoter l’information
Il faut éviter les caractères clignotants, car ils attirent l'attention de l‘apprenant et perturbe la lecture des
autres informations disponibles sur la page. S’il est intéressant d’attirer leur attention sur les informations
importantes, il ne faut pas que cela soit au détriment d’autres informations.
30

31. Quiz
Question 3
Le(s)quel(s) de ces textes répond(ent) au principe de lisibilité ?
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do adipisicing elit, sed do
eiusmod tempor eiusmod tempor eiusmod tempor
incididunt ut labore et incididunt ut labore et incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do adipisicing elit, sed do
eiusmod tempor eiusmod tempor eiusmod tempor
incididunt ut labore et incididunt ut labore et incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
31

32. Quiz
Question 3
Le(s)quel(s) de ces textes répond(ent) au principe de lisibilité ?
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do adipisicing elit, sed do
eiusmod tempor eiusmod tempor eiusmod tempor
incididunt ut labore et incididunt ut labore et incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
 Texte en italique +
police avec sérif
 Texte justifié  Police avec sérif
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do adipisicing elit, sed do
eiusmod tempor eiusmod tempor eiusmod tempor
incididunt ut labore et incididunt ut labore et incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
 Police avec sérif
32

33. Quiz
Question 4
De quelle longueur doivent être les liste d’items ?
Entre 4 et 7
Moins de 7
Ça dépend du type d’item
33

34. Quiz
Question 4
De quelle longueur doivent être les liste d’items ?
Entre 4 et 7
Moins de 7
Ça dépend du type d’item
Les listes d’items doivent ne doivent pas dépasser 7 car les études en psychologie cognitive ont mis en
évidence les capacités limitées et de la mémoire de travail, or la mémoire de travail intervient dans le
traitement des informations.
34

35. Quiz
Question 5
Lorsque le module contient du son :
Celui-ci doit être téléchargés et déclenchés automatiquement
L’apprenant doit pouvoir arrêter le son
Un panneau de contrôle doit être fourni
Le son doit être de bonne qualité
35

36. Quiz
Question 5
Lorsque le module contient du son :
Celui-ci doit être téléchargés et déclenchés automatiquement
L’apprenant doit pouvoir arrêter le son
Un panneau de contrôle doit être fourni
Le son doit être de bonne qualité
Dans tout les cas, l’apprenant doit avoir le contrôle sur le module. Pour ce qui est du son, l’apprenant doit
pouvoir décider de si il veut ou non le déclencher, il doit pouvoir l’arrêter et modifier le volume comme il le
souhaite.
36

37. Quiz
Question 6
Le principe multimédia suggère que les illustrations se révèlent bénéfiques pour aider à la
compréhension d’un texte :
Si le contenu de l’illustration est nécessaire à la compréhension
Si l’illustration est séduisante
Si l’illustration est cohérente avec le contenu du texte
37

38. Quiz
Question 6
Le principe multimédia suggère que les illustrations se révèlent bénéfiques pour aider à la
compréhension d’un texte :
Si le contenu de l’illustration est nécessaire à la compréhension
Si l’illustration est séduisante
Si l’illustration est cohérente avec le contenu du texte
Les apprenants retiennent et comprennent mieux avec un texte + une illustration qu’avec un texte seul.
Néanmoins il faut que le contenu de l’illustration soit nécessaire à la compréhension et cohérente avec le
contenu du texte.
38

39. Quiz
Question 7
La compréhension et la mémorisation est la meilleure
à partir d’une illustration accompagnée d’un texte
à partir d’une illustration accompagnée d’une narration
à partir d’une illustration accompagnée d’une narration et d’un texte
39

40. Quiz
Question 7
La compréhension et la mémorisation est la meilleure
à partir d’une illustration accompagnée d’un texte
à partir d’une illustration accompagnée d’une narration
à partir d’une illustration accompagnée d’une narration et d’un texte
La compréhension et la mémorisation est la meilleure à partir d’une illustration accompagnée d’une
narration.
40

41. Quiz
Question 8
Lors de l’utilisation d’une mascotte
Le contenu du discours de la mascotte doit être retranscrit à l’écrit
Un contenu écrit peut compléter ou reprendre les points essentiels du discours de la
mascotte
Les informations les plus importantes doivent apparaitre à l’écrit et non dans le discours
de la mascotte
41

42. Quiz
Question 8
Lors de l’utilisation d’une mascotte
Le contenu du discours de la mascotte doit être retranscrit à l’écrit
Un contenu écrit peut compléter ou reprendre les points essentiels du discours de la
mascotte
Les informations les plus importantes doivent apparaitre à l’écrit et non dans le discours
de la mascotte
Lors de l’utilisation d’une mascotte, il ne faut pas retranscrire le contenu du discours à l’écrit. Le contenu écrit
peut compléter ou reprendre les points essentiels du discours de la mascotte mais il ne doit pas le reprendre
mots pour mots.
42

43. Quiz
Question 9
Les effets bénéfiques d’un support multimédia sont plus importants
pour les apprenants avec des connaissances préalables élevées
pour les apprenants avec des connaissances préalables peu élevées
pour les apprenants avec des capacités de visualisation spatiale élevées
pour les apprenants avec des capacités de visualisation spatiale peu élevées
43

44. Quiz
Question 9
Les effets bénéfiques d’un support multimédia sont plus importants
pour les apprenants avec des connaissances préalables élevées
pour les apprenants avec des connaissances préalables peu élevées
pour les apprenants avec des capacités de visualisation spatiale élevées
pour les apprenants avec des capacités de visualisation spatiale peu élevées
Les effets bénéfiques d’un support multimédia sont plus importants pour les apprenants avec des
connaissances préalables peu élevées, en effet ceux qui ont déjà des connaissances sur le sujet peuvent
compenser le défauts d’un support moins efficace par leurs conaissances.
Les effets bénéfiques d’un support multimédia sont plus importants pour les apprenants avec des capacités
de visualisation spatiale élevées, car ces capacités sont nécessaire à la compréhension d’un document qui
utilise plusieurs médias.
44

45. Quiz
Question 10
Pour une meilleur compréhension, les illustrations doivent
Etre accompagnés par le discours d’une mascotte
Apparaitre en même temps que leur équivalent textuel
Etre indicées
Être physiquement proches de leur équivalent textuel
45

46. Quiz
Question 10
Pour une meilleur compréhension, les illustrations doivent
Etre accompagnées par le discours d’une mascotte
Apparaitre en même temps que leur équivalent textuel
Etre indicées
Être physiquement proches de leur équivalent textuel
Pour une meilleur compréhension, les illustrations doivent être accompagnés d’un discours oral (pas
forcément une mascotte), apparaitre en même temps que leur équivalent textuel, être indicées et être
physiquement proches de leur équivalent textuel.
46