Conception graphique et mise en page

Mise en page de tous documents

Lors de la réalisation d'un produit pédagogique multimédia interactif, l'application de quelques principes de mise en page permet de concevoir des documents élégants et faciles à lire. Les principes de base d'alignement, de contraste, de cohérence graphique et de proximité sont aisés à comprendre et à mettre en œuvre :

Alignement
L'alignement signifie que tous les éléments d'un écran ou d'une page sont alignés entre eux. Ce principe, appliqué avec rigueur, créé des liens invisibles entre les différents éléments, reliant ainsi les blocs d'information. L'oeil du lecteur ne s'égare pas dans la page, rendant ainsi la lecture plus aisée. Il est difficile d'associer différents principes d'alignement. Ainsi un document perdra sa lisibilité si une partie du texte est alignée (ou ferrée) à gauche alors que d'autres parties sont centrées. La rigueur des alignements est la garantie d'une communication claire.

* Aligner les éléments d'une page avec rigueur
* Eviter de choisir deux principes d'alignement
* Laisser une marge suffisante en haut, en bas, à droite et à gauche
* Aligner horizontalement et verticalement

Contraste
Le contraste et le positionnement des éléments sur une page créent une hiérarchie de valeurs. Les éléments les plus grands et les plus gras sont ceux sur lesquels l'œil s'arrête en priorité. Lorsque les éléments sont identiques, l'œil tend à se porter naturellement en haut et à gauche de l'écran et à commencer la lecture à partir de là. Ce n'est pas un problème quand il s'agit d'une page composée du seul texte principal. Mais dès que les éléments d'une page ont une fonction différente (par exemple : titre, sous-titre, texte principal), le contraste entre ces fonctions doit être évident. Ainsi, quand les titres sont systématiquement en Arial 16 rouge et le texte principal en Times New Roman 12 noir, le lecteur s'habitue à cette hiérarchie et sait immédiatement distinguer un titre du texte principal. L'alignement du texte et la régularité des espaces entre les éléments permettront au lecteur de savoir quel texte est lié à un titre.

* Le contraste typographique reflète la hiérarchie d'information
* Le contraste sépare différents éléments non liés

Cohérence ou style graphique
La répétition est un facteur unificateur important dans tout produit pédagogique multimédia interactif. Un document sans style semble désorganisé et incohérent, compliquant la tâche du lecteur, alors que la répétition des couleurs, des fonds, des typographies et du positionnement des éléments dans la page provoque l'effet inverse.

Il est important d'utiliser le même fond de page (couleur ou trame) sur l'ensemble du cours. Pour les plus expérimentés ce fond peut varier d'un chapitre à l'autre à condition de respecter le même esprit. Les choix typographiques ne doivent pas changer et la police de caractère, le corps et la couleur affectés au texte principal seront constants sur l'ensemble du cours. Les titres, sous-titres, notes et légendes feront chacun l'objet d'un choix maintenu sur l'ensemble du document.

L'utilisateur va s'adapter plus rapidement au cours si le positionnement et le style des boutons de navigation, des symboles et autres éléments répétitifs tels que l'accès à des fichiers audio ou vidéo est systématique.

Le style des éléments visuels utilisés peut lui aussi renforcer ou affaiblir la cohérence d'un produit. C'est ainsi qu'il y a perte de cohérence quand, par exemple, un point est illustré dans un chapitre par un dessin humoristique alors qu'un point complémentaire est accompagné d'une photo à la page suivante.

* Conserver la même couleur ou trame de fond de page
* Hiérarchiser le choix typographique
* Uniformiser le style et le placement des éléments répétitifs
* Opter pour un style d'illustration homogène

Proximité
Le principe de proximité permet d'associer les éléments d'un écran qui sont apparentés. Rapprocher ou aligner des documents les placent en étroite relation alors que de grands intervalles entre titres et paragraphes, ou légendes et documents visuels, favorisent l'incohérence et devient facteur de mauvaise communication.

* Maintenir les éléments apparentés proches
* Eviter les grands intervalles entre titres et textes
* Placer le texte de légende prêt du document commenté