Réseaux Articulate :

Articulate

3 principes essentiels de conception graphique

3 principes essentiels de conception graphique

Si vous êtes comme la plupart des concepteurs pédagogiques, vous êtes sans doute plus à l’aise à l’écrit et en culture générale qu’en graphisme. Et si vous travaillez seul ou au sein d’une toute petite équipe, vous êtes probablement responsable de beaucoup de choses, de la conception pédagogique au graphisme en passant par la conception multimédia.

Le e-learning est d’abord un média visuel, il tient autant de la communication visuelle que de l’ingénierie pédagogique. Bien que vous n’ayez pas besoin d’être un pro du graphisme pour concevoir des cours efficaces, comprendre les concepts graphiques essentiels vous aidera à faire des choix plus réfléchis en organisant les éléments de vos diapos et influencera la façon dont vos apprenants interagiront avec votre contenu.

Voici trois conseils simples – mais très efficaces – de graphisme qui amélioreront vos modules.

Astuce n°1 : utilisez le contraste pour guider vos apprenants

Si vous avez déjà regardé une diapo de module e-learning en vous demandant : « Qu’est-ce que je suis censé voir ? », vous n’êtes pas le seul. Une des erreurs les plus fréquemment commises par les concepteurs pédagogiques est d’utiliser trop ou trop peu de contraste dans le design de leurs diapos.

Les apprenants remarquent ce qui est différent. Quand tous les éléments d’une diapo sont disparates, il n’y a pas de contraste ni de « point focal ».

Le contraste est une notion de graphisme très importante car il aide l’apprenant à distinguer et à organiser visuellement les éléments de la diapo. Et le contraste est essentiel pour guider le regard de l’apprenant vers les points essentiels.

Il existe plusieurs façons de jouer avec le contraste. Nous allons nous attarder sur les trois éléments les plus communs des modules e-learning.

1. Le texte

Le texte est le plus important (en taille et en importance) élément graphique que vous utilisez. C’est un vecteur de communication essentiel. Plus vous aidez les apprenants à comprendre ce qui est vraiment important, plus ce sera facile pour eux d’assimiler le contenu.

Tous les modules contiennent ces deux types de texte : les titres et le corps de texte. Bien que vous puissiez utiliser le texte de bien d’autres manières, nous allons nous concentrer sur ces deux types, car ce sont les plus utilisés.

Vous pouvez créer du contraste dans vos textes grâce à :

  • la taille : un texte écrit gros indique son importance
  • la graisse : l’utilisation du gras attire l’attention
  • aux styles : certaines polices de caractère ont plus de caractère que d’autres
  • aux couleurs : les couleurs foncées sont plus fortes que les couleurs claires

Un des moyens les plus simples et les plus rapides d’obtenir du contraste sur une diapo consiste à augmenter le contraste de vos titres (grâce à leur taille et à leur graisse). Voici un simple exemple avant/après :

contraste-12. La couleur

Utiliser des couleurs contrastées est un moyen efficace pour guider efficacement vos apprenants dans une diapo et les aider à repérer ce qui est le plus important.

Une erreur classique consiste à utiliser trop de couleurs. Bien qu’il ne soit pas interdit d’utiliser plusieurs couleurs, gardez en tête que l’important est de mettre en valeur les éléments sur lesquels vous voulez attirer l’attention de vos apprenants.

Voici quelques exemples de diapo. Sur la première diapo, il n’y pas de contraste : il est impossible de faire une différence entre les objets de la diapo. Au contraire, la deuxième est très contrastée mais ne permet pas non plus de distinguer l’essentiel du superflu. Une façon simple d’attirer l’attention de l’apprenant consiste à utiliser, comme dans la troisième diapo, une couleur contrastée pour mettre l’accent sur un objet spécifique.

contraste-23. Les visuels

Utilisez l’ombre et la lumière, la transparence et l’opacité pour mettre en valeur un propos ou indiquer ce qui est important.

Vous pouvez, comme dans l’exemple qui suit, contraster des visuels en appliquant de la transparence sur certaines parties qui trancheront visuellement avec celles que vous laisserez opaques.

contraste-3

Astuce n°2 : soyez cohérent dans vos choix

En tant que concepteur pédagogique, vous savez que la répétition est un bon moyen pour renforcer la compréhension d’un contenu. La répétition est la base de l’apprentissage. Mais saviez-vous que le concept est valable aussi en graphisme ?

La plupart des concepteurs construisent leurs modules en se basant sur les contenus divers fournis par leurs clients ou par les spécialistes ainsi que sur des ressources qu’ils ont créées ou trouvées. Si vous êtes comme eux, cela signifie que vous vous retrouvez avec du contenu de toutes sortes : documents PowerPoint, fichiers texte, captures d’écran, pages web, manuels, etc.

L’inconvénient de cela, c’est que toutes ces sources sont différentes visuellement et que si vous les utilisez telles quelles, vos diapos risquent d’être anarchiques et discordantes. Il peut y avoir une différence flagrante entre les couleurs, les polices et le style d’image d’une diapo à l’autre. Mais il peut aussi s’agir de différences plus subtiles, comme l’endroit où se trouvent les boutons de navigation, les instructions, ou comment sont libellés les boutons.

Pour éviter de vous retrouver avec un module qui ressemble à un patchwork soyez très attentifs à vos éléments récurrents et assurez-vous qu’ils soient toujours graphiquement cohérents. Cela signifie que vous allez systématiquement réutiliser ces mêmes éléments aux mêmes endroits tout au long du module.

Prenez surtout garde à ceux-là :

  • Les éléments de navigation : les menus, les boutons et les icônes doivent avoir le même style visuel. De plus, les éléments de navigation doivent être disposés chacun au même endroit des diapos tout au long du module. La dernière chose que vous souhaitez, c’est que vos apprenants quittent le module prématurément parce qu’ils en ont assez de chercher le bouton « suivant » !
  • Les éléments visuels : le style et le genre des visuels doivent être en accord avec le sujet de votre cours. Pour qu’ils apportent de la cohérence visuellement, vos visuels doivent être liés les uns aux autres. C’est-à-dire qu’il faut éviter de mélanger des visuels de styles différents : on ne met pas ensemble des flèches dessinées à la main et des icônes ultra léchées faites avec Photoshop. Les visuels que vous choisissez doivent avoir un look proche et évoquer les mêmes sentiments.
  • Les polices de caractère : faites-vous une feuille de style de base où vous noterez toutes les typos que vous utilisez pour vos titres, vos sous-titres, vos textes et vos légendes. Et surtout, tenez-vous-y pendant tout le module ! La plupart des modules que vous créerez utiliseront les mêmes types de texte, alors pensez toujours à planifier la réalisation de cette feuille de style dès le début d’un nouveau projet.
  • Les couleurs : choisissez une palette de couleurs harmonieuse au début du projet et définissez, par la même occasion, la façon dont chaque couleur sera utilisée dans votre module. Les logiciels comme PowerPoint, Photoshop et Storyline permettent aux concepteurs pédagogiques de créer leur propre palette de couleurs ce qui permet de ne pas se tromper de couleur par inadvertance à l’étape du développement. Voici un lien vers un article pour vous aider à choisir votre palette de couleurs : Choisir la palette de couleurs idéale pour votre module e-learning.

Astuce n°3 : alignez votre contenu

Vos diapos e-learning ne se construisent pas toutes seules. Tous les contenus – les textes, les visuels, les photos, les vidéos et les personnages – sont là parce que vous les avez placés sur la diapo. Si votre contenu est bien organisé, il paraîtra soigné et il sera plus facile pour vos apprenants de s’y repérer et d’assimiler ce qu’ils ont à apprendre. Mais si, au contraire, vos diapos contiennent des éléments qui ont l’air d’avoir été disposés au hasard, votre module paraîtra désorganisé et il sera difficile pour vos apprenants de trouver et de traiter correctement les informations.

La bonne nouvelle, c’est qu’il est facile d’organiser votre contenu en respectant simplement les règles concernant l’alignement. Ainsi, vous créerez du sens, vous mettrez en évidence les liens de cause à effet et mettrez en valeur les points essentiels.

Une des façons les plus efficaces d’aligner correctement le contenu est d’utiliser une grille. Une grille est une structure contenant des lignes horizontales et verticales qui se croisent régulièrement, et qui sert à structurer et organiser les éléments graphiques comme les images et les textes.

Les grilles vous permettent d’organiser facilement et de façon constante votre contenu. Une mise en page utilisant une grille est plus facilement intelligible et a un rendu fini, professionnel et cohérent d’une diapo à l’autre. Cela permet également de faciliter grandement l’étape de la mise en page, car vous avez un nombre limité de possibilités lorsque vous ajoutez un nouvel élément sur votre diapo, ce qui vous évite de vous poser trop de questions et de faire des approximations.

Le fait d’utiliser une grille ne doit pas vous restreindre ou vous limiter dans votre créativité ; elle doit être au contraire un support à votre créativité. Vous pouvez utiliser une grilles très simple composée de quelques lignes équidistantes. L’exemple suivant illustre l’harmonie qui peut résulter de l’utilisation d’une grille : à gauche, les éléments sont bien alignés alors qu’à droite, l’absence d’alignement donne une impression de désordre.

alignement-1

Si vous voulez en savoir plus sur les grilles et leur utilisation, n’hésitez pas à consulter cet article : Utilisez les grilles pour améliorer le design de vos modules e-learning.

Le mot de la fin

Maintenant que vous connaissez ces notions de base que sont le contraste, la cohérence et l’alignement, vous voyez bien que vous n’avez pas besoin d’être graphiste pour créer des modules de qualité professionnelle qui expriment visuellement votre contenu et engagent vos apprenants. Il est temps de vous entraîner pour utiliser vos nouvelles compétences !

Essayez chacun de ces principes dans votre prochain projet e-learning et racontez-moi comment cela a fonctionné pour vous. Si vous avez des questions, des commentaires ou une idées à partager, n’hésitez pas à le faire dans les commentaires ci-dessous. Votre avis m’intéresse !

Suivez-nous sur Twitter et abonnez-vous au blog pour être au courant de notre actualité et pour en apprendre plus sur tout ce qui est lié au e-learning.

Community Manager International chez Articulate et experte e-learning passionnée possédant des années d’expérience dans la création de modules e-learning efficaces.

4 commentaires

  1. À défaut d’avoir pu vous en demander la permission, je me permets de diffuser ce message d’appel à collaboration pour une étude. Je comprendrais tout à fait que vous n’acceptiez pas sa publication. Wo dares wins …

    Partagez votre expérience de la conception e-learning ! Dans le cadre du master AIGEME de la Sorbonne Nouvelle (Paris 3), une enquête qualitative en lien avec les usages en conception multimédia requiert votre participation et celle de vos collègues. Nous souhaitons connaître vos pratiques en matière d’usage de l’image (statique ou animée) dans vos créations. L’objectif final est de tirer de vos expériences un listing de bonnes pratiques de l’usage de l’image pour optimiser les apprentissages en digital. Un entretien d’environ 30 minutes vous amènera à présenter un module de votre choix, d’en décrire les principaux aspects et le design thinking qui a eu lieu durant le processus de création.

    Vous êtes libre de garder l’anonymat ou de faire partie des sources citées.
    Merci de bien vouloir nous contacter à l’adresse suivante: emmanuelle.lecointre@etud.sorbonne-nouvelle.fr

Pingbacks

  1. […] Lisez cet article sur les 3 principes essentiels de conception graphique. […]

  2. […] 3 principes essentiels de conception graphique […]

  3. […] Découvrez ces 3 principes essentiels de conception graphique. […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*