Comment s’y prendre pour réaliser des modules de digital learning adaptés aux supports mobiles ? Quelles sont les best practices pour concevoir des contenus mobile learning efficaces ?
Notre utilisation des smartphones et tablettes s’intensifient et nous consommons toujours plus de digital. En janvier 2017, l’étude We are social révélait que 50 % du trafic internet mondial se faisait sur mobile !
Les performances techniques des appareils mobiles s’améliorent d’année en année et offrent de plus en plus d’opportunités. En parallèle, une part croissante de la population, particulièrement les plus jeunes, n’utilise plus d’ordinateur « traditionnel » pour accéder à internet, mais une tablette ou un smartphone.
L’évolution de ces pratiques doit se retrouver dans le digital learning.
De plus, nous sommes toujours plus pressés. Il est donc nécessaire de proposer aux apprenants des contenus pédagogiques faciles à « consommer » dans les transports, dans une salle d’attente, dès qu’ils disposent de quelques minutes. Dans ce contexte, un contenu disponible sur mobile est absolument indispensable pour maximiser l’adoption de votre contenu pédagogique.
Lorsque vous proposez une offre digital learning, elle doit donc être disponible sur PC, tablette et smartphone. Mais entre le smartphone et le PC, les contraintes graphiques, pédagogiques et techniques ne sont pas les mêmes.
Le contexte, du digital learning au mobile learning.
Les sites web responsives sont conçus pour proposer une expérience de navigation identique ou presque sur ordinateur ou sur mobile. C’est la même version du site qui est utilisée sur mobile ou sur PC et propose un affichage optimisé au device utilisé.
Cependant, qu’il s’agisse d’un site web ou d’un contenu digital learning, concevoir en responsive design nécessite de prendre un certain nombre de point en considération.
L’outil et la technologie utilisée pour développer le module doivent être adaptés à une diffusion sur mobile.
A bannir, les modules en flash qui ne sont pas supportés par les tablettes et les smartphones. Il est préférable d’opter pour le HTML5, léger, fiable, et lisible sur tous les supports mobiles et bureau.
Attention, le HTML5 est nécessaire mais non suffisant. Au final, les contenus seront lus sur un smartphone et l’utilisateur doit y retrouver les réflexes d’usage. Aujourd’hui quasiment 100 % des outils proposent des publications en HTML5, mais seuls quelques-uns permettent des fonctionnalités « mobile », comme par exemple le swipe.
Autre point de vigilance : l’expérience utilisateur. Elle est différente, par conséquent la conception doit obligatoirement être abordée autrement.
Chez LALAMEDIA, nous cassons les codes. Fini les Powerpoint, nous concevons ces contenus avec des mindmapping.
Nous gardons à l’esprit que vos apprenants ne pourront pas absorber la même quantité de connaissance sur mobile que sur PC. Il est donc essentiel de maîtriser le volume de contenu.
Mobile learning : l’expérience apprenant est essentielle
Par où commencer ? Avant de designer le moindre écran ou de rédiger le contenu, la toute première étape consiste à imaginer la façon dont les apprenants vont « consommer » le contenu pédagogique qui leur sera proposé.
Smartphone, tablette, PC, proposent des expériences radicalement différentes : navigation, lieu, moment, environnement, les paramètres sont nombreux et ont des influences diverses sur l’expérience apprenant.
Par exemple, l’utilisation d’un support mobile est une expérience bien plus personnelle que celle d’un ordinateur fixe puisque l’écran d’une tablette est généralement placé plus proche de l’apprenant qu’un écran d’ordinateur.
La consultation sur mobile est aussi moins maîtrisée. L’apprenant peut être interrompu régulièrement parce qu’il est dans le métro ou qu’il reçoit des notifications.
Par conséquent, votre contenu doit être assimilable en quelques minutes, entre deux interruptions.
L’usage tactile des tablettes ou smartphones rend la navigation particulière ; l’apprenant va pincer, zoomer, swiper pour parcourir votre contenu. C’est là aussi une expérience très éloignée de l’utilisation d’une souris et d’un clavier.
Quelques bonnes pratiques pour réussir vos modules digital learning responsive.
1 – Penser Mobile d’abord, concevoir PC ensuite.
Les tailles d’écrans des tablettes et à fortiori smartphones constituent des contraintes fortes pour le design des écrans. C’est à ces contraintes qu’il faut d’abord penser pour concevoir les contenus pédagogiques.
Par conséquent, créer un contenu pédagogique en rédigeant des slides sur un écran d’ordinateur avec de longs blocs de texte est à proscrire. (Pour en savoir plus : lire l’article « le Digital Learning déteste-t-il la lecture ? » )
Si le contenu est court et formaté pour le mobile, il sera d’autant plus simple de créer un design adapté à un écran d’ordinateur en jouant sur l’espacement et l’alignement des contenus.
2 – Optimiser et affiner
Même si la 4G se généralise rapidement sur tout le territoire, le module doit toutefois être utilisé par des apprenants qui n’auraient qu’une connexion 3G. C’est une contrainte à prendre en compte dans la conception des supports en digital learning sauf si vous êtes sûr que les conditions de connexion seront optimales (wi-fi en entreprise par exemple)
L’habillage graphique des modules influe évidemment beaucoup sur la rapidité de chargement avec des performances réseaux dégradée. Il s’agit donc de trouver le juste milieu entre un design intégrant de nombreux éléments graphiques et des animations, et un affichage performant sur mobile. Si les quelques minutes que l’apprenant consacre à sa formation se résument à regarder la barre de chargement progresser ou attendre le chargement des animations, il est fort à parier qu’il ne renouvellera pas l’expérience.
Il est donc recommandé d’utiliser les éléments graphiques avec parcimonie, et essentiellement pour servir le contenu ou illustrer le propos. L’optimisation du poids et de la taille des visuels utilisés est indispensable pour assurer un temps de chargement minimum. Il est aussi parfois envisageable de ne pas afficher certains visuels sur mobile pour ne conserver que les illustrations absolument essentielles.
Autre source d’optimisation de la bande passante, l’utilisation d’animations HTML5 et CSS à la place des ressources graphiques classiques (gifs, motion design et autres effets). En effet, une animation HTML5 peut s’avérer bien plus légère qu’un gif animé (et bien souvent de meilleure qualité).
3 – Swipe à gauche
Les apprenants sont évidemment des internautes comme les autres, rompus à la navigation web sur mobile. Ils s’attendent donc naturellement à retrouver les mêmes usages et gestes pour naviguer sur un module mobile learning :
- swipe à gauche et à droite pour naviguer au sein du module,
- clics ou taps pour une navigation plus traditionnelle.
Swiper à travers le module peut être plus rapide que chercher et cliquer sur un bouton.
Mais attention, en simplifiant et fluidifiant sa navigation dans le module, l’apprenant passe d’un écran à l’autre facilement, sans vraiment s’en rendre compte, surtout si les écrans se ressemblent. L’utilisation de repères visuels permet à l’apprenant de s’assurer qu’il avance bien dans son contenu. (pictogrammes, couleurs, volume de texte…)
4 – Pointer du doigt
Sur smartphone ou mobile, l’apprenant va logiquement utiliser son doigt pour interagir avec le contenu du module. Un doigt apporte une précision moindre et nécessite un espace plus important qu’un pointeur de souris. Il faut donc tenir compte de cette contrainte pour designer et penser les éléments de navigation et d’interaction.
Disposer deux liens trop proches l’un de l’autre, c’est risquer que l’apprenant tape sur un lien à la place de l’autre. Une activité pédagogique « drag and drop » est-elle adaptée à une utilisation sur mobile ?
Encore une fois, proposer une ergonomie irréprochable aux apprenants, c’est leur garantir un temps d’apprentissage optimisé.
5 – Portrait, un paysage différent.
Si vous avez l’habitude de créer un contenu pédagogique pour PC, vous travaillez sur des écrans en mode paysage. Pourtant beaucoup de gens utilisent leur smartphone ou leur tablette en mode portait. Un bon support mobile learning s’ajustera automatiquement et donc le contenu devra s’afficher correctement en portrait aussi.
Cependant, quelques contenus peuvent s’avérer compliqué à afficher proprement en portrait. Il faudra alors re-designer le contenu ou le penser différemment pour qu’il s’affiche correctement dans des orientations différentes.
Ce n’est pas toujours possible. Il faudra alors peut-être permettre à l’apprenant de scroller pour visionner un algorithme de prise en charge patients, un organigramme, …. Ce n’est pas forcément la solution idéale, mais c’est peut-être la plus efficace.
6 – Les saisies faites par les utilisateurs
Si le contenu pédagogique nécessite que l’apprenant saisisse du texte, l’outil auteur devra proposer l’utilisation du clavier tactile de l’écran. Cela signifie aussi que certaines parties des écrans du mobile learning seront susceptibles d’être masqués par ce clavier virtuel.
L’ensemble des éléments de saisie utilisés sur mobile doivent être soigneusement pensés. Par exemple, une liste déroulante trop longue est vraiment pénible à utiliser. Dans ce cas, la liste déroulante est-elle vraiment la meilleure option ?
7 – Il y a toujours une exception
Cela va sans dire, il est indispensable de tester les supports pédagogiques autant que possible avant de les déployer et de les proposer aux apprenants.
Sauf à maitriser parfaitement la flotte des smartphones disponibles dans l’entreprise, tester les modules e-learning sur mobile est une contrainte supplémentaire qu’il faut anticiper.
Théoriquement, un module mobile learning doit fonctionner sur tous les devices. Dans la pratique, il y a des exceptions et des bizarreries. Nous sommes toujours rattrapés par des nouvelles versions de mobiles, avec des écrans plus grands ou des ratios différents. Il est possible de l’anticiper en appliquant un responsive design au contenu pédagogique. Mais il y aura forcément UNE personne qui possédera un téléphone sur lequel le contenu ne s’affichera pas parfaitement…
Créer une application dédiée plutôt qu’un module digital learning en HTML5 peut s’avérer une solution intéressante. D’ailleurs, de nombreuses entreprises ont opté pour cette solution pour diffuser leurs formations.
Intéressant, oui mais pas dans n’importe quel contexte.
Une application mobile spécifique est une option intéressante si votre entreprise dispose d’une flotte de devices homogène qu’elle maîtrise et avec lesquels les apprenants consulteront les modules.
Si le contenu pédagogique exige le développement de fonctionnalités vraiment spécifiques et/ou complexes, l’application mobile learning peut aussi être un choix judicieux.
Au contraire, si le module e-learning est destiné à un public plus large ou à toutes sortes de devices, il faudra alors fournir de multiples versions de l’application (IOS et Android au minimum) et faire évoluer l’application au rythme des mises à jour des systèmes d’exploitation. C’est un investissement lourd !
Ensuite, la nécessité d’installer l’application pour avoir accès au contenu de formation est un frein à l’adoption et au démarrage du parcours de formation.
Avec des parcours digital learning en responsive, la seule application nécessaire est un navigateur web qui est nativement disponible sur tous les devices.
Cet article est inspiré de : https://elearningindustry.com/7-tips-great-responsive-elearning-design
