Choix des couleurs et des polices de caratères, règles de structuration des textes dans un projet e-learning
Ingénierie pédagogique multimédia : pahse du développement et de la médiatisation
cours de maths

 

Initiation à l'ingénierie du e-learning

Menu Initiation à l'ingénierie du e-learning
Etapes de l'ingénierie en formation : Analyse | Design | Developpement | Implémentation | Evaluation

3- phase du développement : médiatisation et développement du projet - Choix des polices de caractère et des couleurs

Le choix des polices de caractère avec ou sans sérifs, la casse, la graisse, en italique ou non, le nombre caractères par ligne... ne sont pas des choix faciles à opérer. Voici, quelques recommandations à ce sujet...

Ingénierie du e-learningEmpattements des caractères

Avec ou Sans sérifs ?

  • Une police de caractères sans empattements est appelée "sans-sérifs" ou "caractères bâton". Helvetica, Arial, Geneva et Verdana en sont des exemples.
  • Les polices de caractères sans empattements facilitent la lecture des éléments textuels isolés tels que les menus, les libellés des messages ou des champs de saisie.
  • Les polices de caractères avec empattements sont plutôt employées dans le corps d’un texte. Le dessin de ces polices crée une ligne virtuelle horizontale qui facilite la lecture de longs textes. Times, Monaco, Garamond en sont quelques exemples.
  • Il est important de savoir que les polices de caractères avec empattements sont plus lisibles sur une feuille de papier, alors que les polices de caractères sans empattements sont plus agréables à lire sur un écran d’ordinateur.

Ingénierie du e-learningCasse : majuscule ou minuscule ?

  • Les textes en minuscules facilitent la lecture des paragraphes tandis que les textes en majuscules facilitent la recherche de mots.
  • Un texte en majuscules est plus difficile à lire et requiert plus de temps. Toutefois, l’utilisation des majuscules est un excellent moyen de mettre en évidence, autrement que par la couleur, un titre, certains mots ou certains énoncés.

Ingénierie du e-learningGraisse : caractère gras ou pas ?

  • Habituellement, les changements de graisse d’un caractère dans un texte servent à attirer l’attention du lecteur, à hiérarchiser l’information ou à mettre en évidence un mot ou une partie de texte.

Ingénierie du e-learningEn italique ou pas ?

  • L’italique est surtout utilisé pour détacher certaines phrases d’un texte courant (légende, citations, mots en langue étrangère, titre d’ouvrage, expressions à « double sens », etc.).

 

Ingénierie du e-learningRecommandations

  • De manière générale, il est souhaitable de limiter le nombre de polices de caractères différents pour une même application ou un même site Internet (de l'ordre de 2 à 3 polices de caractère différentes). Une grande quantité de caractères différents rend l’écran confus.
  • Au même titre que l’utilisation des couleurs, il est primordial d’associer une signification à chacune des polices de caractères utilisées. Par exemple, les menus et sous-menus peuvent utiliser une même police de caractères tandis que le texte courant de l’application peut en utiliser un autre.
  • Toujours utiliser des caractères foncés sur fond clair pour garantir un contraste optimal, qui augmente la lisibilité.
  • éviter les lignes de texte trop courtes qui oblige l’œil à se déplacer constamment de gauche à droite pour reprendre à la ligne suivante. Des textes rédigés sur des longues lignes minimisent la fatigue visuelle. Néanmoins, l'utilisation de 50 à 55 caractères par ligne est souhaitable, à moins de rédiger le texte sur deux colonnes; à ce moment, une largeur de 30 à 35 caractères par colonne est souhaitable.
  • évitez de surcharger l’écran; une mise en page dégagée et aérée du texte permet à l’œil de se reposer, facilite la lecture et augmente l’attention de l’usager.
  • Utilisez une taille de texte suffisante : Les écrans utilisant des caractères microscopiques sont fatigants, notamment pour les internautes ayant plus de 40 ans. Vous aussi, vous serez sans doute presbyte, à cet âge là !
  • évitez les textes soulignés : sur le Web, un mot ou une expression soulignée signalent généralement l'existence d'un lien. Utilisez la couleur, la taille ou le style (gras et italique), mais ne soulignez pas une portion de texte pour en signaler l'importance.
  • Finalement, les couleurs
    • Utiliser des couleurs très contrastées lorsque vous souhaitez exprimer une différence. Pour augmenter le contraste, il est possible d’utiliser des couleurs complémentaires.
    • Le choix de couleurs peu contrastées renvoie à une certaine similarité des éléments.
    • éviter le bleu pour le texte et les petits objets.
    • En règle générale, l’usage des couleurs a pour fonction :
      • de mettre en évidence l’information importante;
      • d’indiquer un état propre à un objet dans un contexte donné;
      • de regrouper visuellement des informations de même nature qui ne sont pas contiguës.
    • Afin d’éviter la sur-utilisation de la couleur, il faut :
      • limiter le nombre de couleurs significatives à environ sept couleurs et teintes différentes (4 étant un bon compromis);
      • respecter la signification des couleurs selon les clientèles visées.
      • éviter les fonds de couleur verts et marron puisqu’il sera difficile de trouver une couleur qui permettra de lire facilement un texte.
      • éviter l’agressivité des grandes surfaces de couleurs vives. Utiliser plutôt des couleurs peu saturées ayant une dominante vers le gris neutre et clair.
      • Par opposition, utiliser des couleurs vives pour les petits objets afin qu’ils se distinguent plus facilement d’une grande surface neutre.
      • Pour démontrer une différence, utilisez des couleurs contrastées. à l’inverse, pour démontrer des ressemblances, utilisez des couleurs peu contrastées et de même tonalité.

 

Sites à consulter

 

 

Bon travail à tous et à toutes...