L’art du visuel
J’entends souvent dire que la formation digitale a une dizaine d’années de retard sur le web. Malheureusement c’est vrai… J’ai encore le souvenir frissonnant d’un module elearning qui ressemblait à un vieux PowerPoint avec pour seules interactivités : des transitions de slides des années 80. Je m’étais donnée qu’une seule mission (de survie) : réussir à me concentrer sur le fond et non la forme qui me brûlait les yeux 😵 (et tu trouves que j’exagère ???).
Au final impossible de me souvenir de la thématique de cette formation, c’est malheureusement tout ce que j’ai retenu et c’était l’année dernière…
Ce phénomène perdure aujourd’hui pour deux raisons : Bien souvent les personnes en charge de commander des formations pour leurs collaborateurs n’ont aucune idée de ce qu’on appelle un bon module elearning, ça ne fait pas partie de leurs problématiques quotidiennes, ils prêtent attention à la finalité, la compétence à atteindre et font confiance aux experts du métier.
La deuxième raison est simple, puisque le digital prend de l’ampleur dans la formation, c’est plus visible qu’avant 😳🤐.
Il faudrait que tous les experts de la pédagogie qui sont dans la place depuis plus de 10 ans et qui produisent des modules se forment au graphisme, à la mise en page ou travaillent de concert avec des graphistes pour mettre en scène leurs modules (bien sur ça se fait, mais pas suffisamment).
Attention, on parle de l’aspect visuel aujourd’hui, nous sommes bien d’accord que ça ne fait pas tout pour avoir un bon module et je te le dis en avant-première, ça fera l’objet d’un nouvel article 📢 OUIIIII !!!!
Vivre une expérience visuelle agréable
Aujourd’hui on ne parlera ni pédagogie ni modalité mais « harmonie visuelle » parce que oui c’est bien d’harmonie dont il est question pour que l’utilisateur vive une expérience agréable, mémorable et que se former soit un plaisir, un vrai temps pour soi.
Je ne vais pas te faire l’affront de mettre en comparaison deux écrans avec le même sujet, les mêmes mots : d’un côté un design harmonieux et de l’autre un truc moche et bancal… je sais que tu vois très bien de quoi je veux parler.
Au-delà de faire apprendre, notre mission est bien de faire vivre à l’apprenant une expérience stimulante dans un environnement singulier, adapté au sujet. Il ne se posera aucune question sur la forme puisque l’ensemble sera cohérent et en plus il trouvera ça très fun de comprendre les mécanismes d’une fusée à induction 🚀🍳 (et pourquoi pas ?!).
Et ce n’est pas très compliqué de s’attarder sur quelques détails qui feront toute la différence, voyons ça !
Les couleurs
Une palette de 5 a 6 couleurs avec chacune a son rôle : la couleur de la navigation, celle des titres… Des couleurs qui fonctionnent ensemble. Les internets regorgent de sites où l’on peut trouver des palettes toutes faites, plus qu’à choisir en fonction de ton univers, ta marque ou d’une photo. Je te propose mes préférés, il me font pétiller le cerveau tellement les palettes sont inspirantes : https://coolors.co/ et https://colorhunt.co/
La typographie
Parfois tu trouves une nouvelle police (libre de droits ou achetée evidemment😅) tellement magnifique que tu voudrais l’utiliser partout mais noooooon c’est pas possible ce serait ILLISIBLE et tellement trop chargé, l’information passerait au second plan… mauvaise, très mauvaise idée.
La jolie police est à garder juste pour les titres et quelques mots à mettre en surbrillance !
Les visuels
Des visuels qui fonctionnent ensemble, avec la palette de couleurs dont je t’ai parlé plus haut. Des visuels en lien avec la thématique du module, et en évitant les « clic droit – enregistrer sous », un visuel se fabrique ou s’achète, il y a aussi des banques d’images libres de droits comme https://unsplash.com/ ou des bibliothèques d’icônes comme https://www.flaticon.com/.
La mise en page
La mise en page intervient une fois que tous les éléments précédents sont ok. Il faut que tu trouves l’écran équilibré, tu le ressens tout de suite quand c’est bancal. Quand on est pas expert on a tendance à en mettre trop mais l’œil aime la respiration, les espaces blancs, des textes, du visuel et une idée générale par écran.
Bien sûr qui dit module elearning dit navigation. L’outil auteur ou le LMS prévoit souvent un menu tout fait mais parfois en fonction du besoin, tu choisiras un univers complètement intégré, navigation comprise. Regarde comment est fait un site web, c’est la même construction, interdiction totale de se retrouver sur un chemin qui ne mène nulle part, chaque clic doit t’emmener voir plus loin ou te ramener à la maison.
Le mot d’ordre quand tu penses mise en page : pense à ton œil qui respire !!!
La logique visuelle
Quand l’œil analyse un écran il regarde de haut en bas en passant de gauche à droite. C’est comme un serpent qui démarre en haut à gauche. Oui je sais que je ne t’apprends rien par contre on ne pense pas souvent à réfléchir au serpent quand on compose un écran 🐍.
Il est très important de placer les éléments en fonction de lecture voulue. On met les éléments de titre puis de sous-titre, les informations qui composent la thématique abordée et pour finir, en bas, des éléments secondaires « en savoir plus » ou les boutons pour passer à l’écran suivant.
De façon générale c’est souvent du bon sens et un peu de temps, se poser et se demander si c’est équilibré. Pas trop chargé en visuels, en idées, en couleurs et en polices de caractère (c’est pas un secret si je te dis qu’il faudra toujours en enlever un peu).
Plus tu prendras le temps de te poser ces questions à chaque projet, moins tu auras besoin de temps à y accorder, ça se fera naturellement 🙏
Comment tu t’y prends toi ? Je suis sûre que tu as tes techniques pour choisir ou construire des modules harmonieux !!