Ergonomie des écrans : lecture des écrans et emplacements des éléments médias
Ingénierie pédagogique multimédia : phase du développelent et 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 - Agencement des écrans et la disposition des éléments

Ingénierie du e-learningErgonomie des écrans

Le Centre collégial de développement de matériel didactique (CCDMD) a édité en 2007 un guide du design ("Notions de design de l’interface utilisateur") comportant une section sur la mise en page. Voici ce que nous dit cette section :

La plupart des utilisateurs ont recours à deux stratégies de lecture à l’écran.

Lecture d'un écran : ergonomie

    Fig. 0 : tracé de l’œil lors de la lecture d’un écran.

  1. La lecture dite en Z consiste à effectuer un balayage de l’écran à partir du haut et de gauche à droite (1 ->2). L’œil glisse ensuite en diagonale vers le coin inférieur gauche (2->3->4), en passant par le centre de l’écran, pour finir son parcours vers le coin inférieur droit (4->5). Cette stratégie d’exploration se fait lorsque l’utilisateur découvre un nouveau logiciel ou un nouveau site Internet.
  2. La lecture ponctuelle est une stratégie de balayage de l’écran qui permet à l’utilisateur d’effectuer une recherche visuelle précise d’éléments lorsqu'il suppose connaître leurs emplacements. Ce mode de recherche est propre aux utilisateurs expérimentés.

Ergonomie des écrans

Fig. 1 : Grille de visibilité et d’accessibilité générale.

ergonomie : lecture des écrans

Fig. 2 : Suggestion d'implantation des éléments.

Ingénierie du e-learningVenant appuyer ces deux grands modes de lecture des écrans et ainsi renforcer les habitudes des utilisateurs :

  • La plupart des concepteurs de logiciels ou de sites Internet tendent à uniformiser l’emplacement des composants de l’écran de travail. La barre de menu est généralement en haut de l’écran, la table des matières est à gauche de la page ou en haut.
  • De la même manière, le sens de la lecture chez les Occidentaux est de la gauche vers la droite; il est donc souhaitable de placer à gauche, dans la zone de la barre des menus, les informations importantes et, en ordre de moindre importance, les autres fonctionnalités vers la droite.
  • Il en va de même pour une palette d’outils dans laquelle ceux qui sont le plus fréquemment utilisés sont situés dans le haut de la palette tandis que ceux qui le sont moins se retrouvent au bas.

Lorsqu'il est correctement conçu, le gabarit permet à l’utilisateur de se retrouver facilement avec une interface homogène et cohérente dans tout le logiciel ou le site. Exemples d'interface pour un module de formation...

Exemple d'écran
exemple d'écran

Ingénierie du e-learningLa structure des pages

Vos pages doivent être conçues comme des pyramides fonctionnant à la façon d'un entonnoir qui va guider la lecture de vos écrans.

  • Tout d'abord, le titre : il est situé en haut à gauche de votre écran (ou au milieu). Celui-ci doit être clair, court, explicatif et accrocheur. Il peut être accompagné d'un sous-titre qui précisera l'objectif de la page.
  • Les paragraphes : la règle d'or est : une idée = un paragraphe. Demandez-vous toujours si vos paragraphes ne pourraient pas être ré-ordonnés de façon plus logique ou plus facile à suivre. Supprimez sans état d'âme les paragraphes qui n'apportent rien à votre propos.

Ingénierie du e-learningLes petits plus...

Faites plaisir à vos apprenants. Voici quelques idées qui vous permettront de mettre un peu d'animation et de gaîté dans vos pages :

  • Les personnages et les images : Illustratives, humoristiques, explicatives, surprenantes : tous les coups sont permis !!! Néanmoins, évitez les images et les animations gadgets qui n'apportent absolument rien ! Une image, une illustration par écran permet de reposer l’œil de vos lecteurs et de capter leur intérêt. Pensez également à votre public cible pour choisir les images et les personnages : faites référence à leur contexte familier et à la thématique de votre cours.
  • Les légendes d'images : Si votre image est illustrative, il faut absolument lui attribuer une légende (petit texte de quelques mots figurant sous l'image). Les légendes sont souvent lues par les visiteurs pressés.
  • Les listes : Les thèmes ou idées organisées sous forme de listes sont plus facilement lues et comprises par vos lecteurs. Le texte d'une liste est souvent plus synthétique (plus court). Il vous obligera à structurer votre pensée.
  • Les encadrés : Les encadrés permettent de casser les mises en page trop strictes et leur apportent un côté vivant. Il a souvent un fond légèrement plus foncé que le reste de la page. Il pourra contenir un petit texte amusant ou anecdotique, un complément d'information, une liste de liens en rapport avec le sujet ou une bibliographie.



Sites à consulter

 

 

Bon travail à tous et à toutes...