5 jours avec Storyline 2 : présentation et retour d’expérience

storyline2-digidago.academyAprès Adobe qui a mis à jour Captivate en version 7 en début d’été, c’est Articulate qui nous propose une mise à jour majeure de son outil auteur. Jusqu’ici numéroté Storyline 1 avec 6 mises à jour mineures, Storyline 2 passe un nouveau cap avec la sortie de Storyline 2.

Après 5 jours passés avec Storyline 2, nous vous proposons de découvrir les nouveautés de cette mise à jour.

Lire la suite

Présentation Lectora Inspire

lectora-inspire

Lectora Inspire est un outil auteur pour produire des contenus e-learning qui est développé par la société Trivantis. Ce logiciel existe depuis 1999 mais la sortie de la version référencée 11.3 en octobre 2013 s’est vue accompagnée d’une traduction en français. L’occasion de présenter Lectora Inspire qui constitue la suite complète de Trivantis. Lire la suite

Adobe Captivate 8 : 5 nouveautés majeures et notre retour utilisateur.

Captivate8

Il y a quelques semaines, Adobe a mis à jour son logiciel auteur pour le e-learning : le logiciel Captivate.
Cette 8ème version du nom est décrite par Adobe comme

une mise à jour qui  réinvente la manière de créer un e-learning interactif afin de s’adapter à tous les types de terminaux utilisés d’aujourd’hui .

Le moins que l’on puisse dire, c’est que les mots sont forts !

Cette nouvelle version de Captivate fait la part belle à ce que nous appelons le « responsive desgin ». C’est effectivement une réelle nouveauté dans un logiciel auteur  e-learning. Mais cette mise à jour intègre également d’autres nouveautés.

 Qu’avons-nous pensé de cette mise à jour après plusieurs semaines d’utilisation ? Quelles sont les autres nouveautés ?

Découvrez notre tour d’horizon et notre impression générale sur Captivate 8.

 

 

Sommaire :

1. Nouveauté #1 : l’intégration du principe de responsive design appelé par Adobe « projet réactif ».
2. Nouveauté #2 : les  possibilités de prévisualisation.
3. Nouveauté #3 : l’interface de Captivate.
4. Nouveauté #4 : la gestion des états.
5. Nouveauté #5 : la géolocalisation.
6. Notre avis et nos impressions après plusieurs semaines sur Captivate 8
7. Conclusion

1. Nouveauté #1 : l’intégration du principe de responsive design appelé par Adobe « projet réactif »

 

A. Le responsive design, c’est quoi ?

Derrière cet anglicisme se cache la manière dont s’adapte un site web ou une application. En français, nous parlons de design adaptatif. Quand à Adobe, le concept a été traduit dans Captivate par « projet réactif ».

Si nous prenons par exemple le site que vous consultez actuellement, essayez de redimensionner la fenêtre de votre navigateur dans sa largeur. Le menu ainsi que les blocs, les textes et les visuels s’adapteront à la largeur de la fenêtre du navigateur. C’est ce que nous appelons le « web responsive design ».

NormalTabletteSmartphone

B. A quoi ça sert en e-learning ?

C’est un fait ! La formation à distance a changé l’espace temps de l’apprentissage. Il existe une multitude de moments et de lieux pour se former. C’est également vrai pour les contenus qui peuvent être consultés à partir d’un poste de travail, d’un Smartphone ou encore d’une tablette entre 2 rendez-vous ou dans les transports.

Avec sa version 8, Adobe fait le pari que le responsive design est devenu incontournable en e-learning. Captivate 8 nous propose donc de réaliser des projets qui s’adaptent parfaitement à nos Smartphones ou à nos tablettes.

 

 

C. Présentation du concept de projet réactif

Dans sa version Française, Captivate nomme cette fonctionnalité « projet réactif ». Comme ce point est la principale nouveauté de Captivate 8,  il y a beaucoup de chose à dire !

Lors de la création de notre nouveau projet, nous devons choisir entre plusieurs types de projet. Nous retrouvons le « projet réactif ». Il est également possible de créer un projet classique en choisissant projet vide.

Adobe captivate 8 création d'un projet

Voici la fenêtre de démarrage qui s’affiche. Nous retrouvons la possibilité de créer le nouveau type de projet intitulé « projet réactif ».

Voici les dimensions classiques d’un projet réactif :

  • La vue principal pour ordinateur est de 1024×627 pixels.
  • La vue pour tablette est de 768×627 pixels.
  • La vue pour mobile est de 360×415 pixels.

 

La compatibilité entre projet classique et projet réactif
Précision importante, le choix de départ du type de projet est fondamental car :

  • Il n’est pas possible par la suite de transformer un projet normal en projet réactif.
  • A l’inverse, il n’est pas possible de transformer un projet réactif en projet normal.

De la même manière, nous ne pouvons pas réutiliser des projets existants d’une précédente version de Captivate pour créer un projet réactif. Il faut obligatoirement repartir d’un projet vide. L’astuce qui consiste à ouvrir un ancien projet et faire « enregistrer-sous » pour Captivate 8,  ne marche pas ! Il ne sera pas possible de convertir l’enregistrement en projet réactif.

Il est néanmoins possible de faire des copier-coller pour ne pas recommencer de zéro. Il sera toutefois nécessaire de retravailler son projet pour qu’il colle aux dimensions des 3 types de fenêtre. Nous y reviendrons.

 

D. Comment ça marche un projet réactif ?

Lorsque nous créons un projet réactif, nous retrouvons des nouvelles fonctionnalités. Une barre apparaît dans la partie haute de la fenêtre. Elle permet de sélectionner le périphérique pour lequel nous allons travailler :

  • ordinateur,
  •  tablette,
  • ou smartphone.
Adobe captivate 8 projet reactif

En mode réactif, la barre au dessus de la diapositive permet de choisir le périphérique pour lequel nous souhaitons travailler notre mise en forme.

 

La vue classique pour ordinateur est de couleur verte. Cette barre verte correspond à la dimension en largeur du périphérique (ici 1024 px). En cliquant sur l’icône de la tablette, nous accédons à la vue tablette qui est symbolisée par une barre bleue. Quand à l’icône du Smartphone, elle donne accès à la vue Smarphone.

NormalTabletteSmartphone
Réglage du positionnement des objets dans un projet réactif.

Dans un projet réactif, le principal changement est l’apparition du bloc position à côté des propriétés. C’est ce bloc qui va permettre de positionner les différents objets (texte, image, vidéo) en fonction de l’écran. L’objectif est de pouvoir paramétrer pour chaque périphérique le positionnement de chaque objet.

De la même manière que ce que nous trouvons pour la mise en page web avec le langage .css, 2 options sont proposées :

  • un positionnement en pourcentage (%)par rapport à la taille de l’écran,
  • ou un réglage en pixel par rapport au bordure de l’écran.

Notons que c’est également dans ce bloc position que nous réglons la taille de l’objet lorsque nous sommes dans un projet réactif.

Adobe Catpviate 8 bloc position

Dans un projet réactif, le bloc position permet de positionner les objets mais également de régler la taille.

 

Souvenez-vous ! Dans les précédentes versions de Captivate, nous réglions la taille et le positionnement dans la section intitulée « transformer »  des propriétés des objets.

Réglage du positionnement dans Captivate 7 à partir des coordonnées en pixel et de la taille avec la largeur et la hauteur/

Réglage du positionnement dans Captivate 7 à partir des coordonnées en pixel et de la taille avec la largeur et la hauteur.

 

Dans un projet réactif, nous utiliserons dorénavant le bloc positionnement tandis que nous continuerons d’utiliser la section « transformer » toujours présente en mode classique.

 

E. Comment fonctionne la mise en forme des objets en mode réactif ?

Captivate 8 se base sur le positionnement de la vue ordinateur pour préparer les vues tablette et smartphone. Les positionnements pré-paramétrés sont facilement réutilisables lorsqu’il s’agit d’élément simple comme du texte.

Néanmoins pour créer des interfaces réellement optimisées pour le smartphone et la tablette, il faudra repenser l’écran pour prendre en compte les particularités des périphériques. Cela est particulièrement vrai pour le cas d’un smartphone où il est vraiment nécessaire de repenser l’affichage pour prendre en compte la largeur très inférieure à un ordinateur.

Dans le travail de production, la méthode de travaille la plus pertinente consiste à :
  • Réaliser complétement sa mise en page pour l’affichage sur ordinateur.
  • Une fois que la mise en forme pour ordinateur est définitive, nous pouvons passer à la tablette, puis au smartphone.

Cela est lié au fait que les objets créés dans l’affichage ordinateur sont reportés  en fonction des proportions de l’écran dans les 2 autres types d’affichages : tablette et smartphone. Si nous commençons par créer des objets pour smartphone, ils apparaissent dans l’affichage ordinateur de manière non cohérente. Il y alors plus de retouche à faire que si nous commençons par travailler avec l’affichage ordinateur.

 

 Un premier exemple de mise en page d’un bloc lorsque nous commençons par travailler sur l’affichage pour ordinateur.

NormalTabletteSmartphone

Un deuxième exemple de mise en page d’un bloc lorsque nous commençons par travailler sur l’affichage pour smartphone. Ici, le bloc est par défaut positionné correctement pour smartphone (première image) et incorrectement pour les tablettes (deuxième image) et les ordinateurs (troisième image). Il y a alors plus de retouche à faire !

 

F. Pouvons-nous tout faire dans un projet réactif ?

Nous avons vu ici la principale nouveauté de Captivate 8 qui porte sur le mode réactif et le positionnement des objets. Mais qu’en est-il des interactions et des activités ?

Remarque
C’est sans doute l’un des  principaux points qui est décevant et qui nous fait relativiser l’annonce de  ce mode réactif. Si vous avez l’habitude de créer des activités dans vos contenus, sachez qu’il n’est pas possible de créer des activités de glisser-déposer dans ce mode réactif.

Cela peut paraitre du détail mais c’est à nos yeux extrêmement limitant surtout lorsque nous nous attachons à développer des contenus captivants pour l’utilisateur 🙂 . Cette limitation est d’autant plus décevante que la fonctionnalité fonctionne lors d’un export en HTML5.

Captivate 8 glisser déposer projet réactif

En mode réactif, il n’est pas possible de créer des activités de glisser déposer. Elle apparaît ici grisé et impossible à sélectionner.

D’autres interactions sur les objets ne sont pas disponibles comme l’apparition d’un objet lors du survol de la souris. Néanmoins sur ce dernier point, nous comprenons aisément la raison. Nous ne manipulons pas les tablettes ou les smarphones comme une souris d’ordinateur. Et faire apparaître des objets au passage de la souris ne présente pas (ou peu) d’intérêt sur tablettes ou smartphones.

catpviate 8 projet réactif intéraction

Inutile sur tablette ou smartphone, les interactions de survol de la souris ne sont pas disponibles en projet réactif.

Ajoutons toutefois au bénéfice d’Adobe que l’export pour tablette ou smartphone est assez réussi. Il reprend la gestuelle des tablettes et des smartphones ce qui rend la consultation des contenus réussies.

Captivate 8 : la palette mobile permet de paramétrer la gestuelle sur smartphone et tablette

Il est possible de paramétrer les gestes et les actions liées à partir de la tablette mobile

 

Encore un peu de travail pour Adobe !

En plus de l’absence d’activité de glisser déposer en projet réactif, il y a un autre point qui donne l’impression qu’Adobe a encore du travail pour tirer pleinement parti de toutes les possibilités du mode réactif. Il s’agit de la création des formes.

Certaines formes ne sont pas disponibles, c’est notamment le cas du trait ou de la création de forme libre. Ce sont pourtant des fonctionnalités bien pratiques pour faire des mises en page soignées. Cette possibilité est disponible en mode normal avec un export en html5, c’est pourquoi nous nous demandons ce qui a empêché Adobe d’intégrer cette fonctionnalité en projet réactif.

Adobe captivate 8 forme

 

 

2. Nouveauté #2 : les  possibilités de prévisualisation

C’est une des autres nouveautés en lien avec la fonctionnalité de projet réactif : la prévisualisation multi périphérique. Il est possible de prévisualiser le rendu pour les différents terminaux (ordinateur, tablette, Smartphone).

Capture 1Capture 2
Il est également possible de tester le rendu dans l’application Adobe Edge Inspect que vous connaissez peut être si vous êtes habitué à l’environnement Adobe. Notons que cette application est gratuite.

 

3. Nouveauté #3 : l’interface de Captivate

Captivate 8 se dote d’une nouvelle interface. Il est plus facile de s’y retrouver et l’organisation permet de gagner du temps.

Les différents blocs ont été repensés à la fois dans la partie supérieure comme dans les blocs d’éditions des objets.

adobe captivate 8 interface

L’aspect visuel, l’organisation des menus et des options ont été repensées dans Captivate 8.

 

La mise en forme des objets a également été améliorée.

  • Pour la mise en forme d’une zone de texte dans un projet classique, il y a 2 onglets distincts.
Capture 1Capture 2
L’onglet « style » permet de mettre en forme la zone de texte tandis que l’onglet « options » d’accéder à la section transformer pour éditer le positionnement de la zone de texte.

 

Remarque
Tandis que lorsque nous sommes en mode réactif, il faut aller dans le bloc « propriété » pour positionner les objets, nous retrouverons ces réglages dans l’onglet « options » en mode classique.
adobe captivate 8 afficahge

Exemple d’une zone de texte en mode réactif : les options pour positionner la zone n’apparaisse pas. Il faut aller dans le bloc « position »

4. Nouveauté #4 : la gestion des états

C’est une nouveauté que nous attendions avec impatience : il s’agit du paramétrage des  états d’un objet (normal, au clic de la souris ou au survol). Il est maintenant possible de régler directement les états dans l’onglet style… mais uniquement pour les formes !

adobe-captivate8-mise-en-page-forme

En utilisant une forme comme bouton, il est possible de paramétrer directement les 3 états avec les couleurs de remplissage de son choix.

C’est avec regret que nous constat que la gestion des états pour les images ou pour les boutons restent identiques aux précédentes versions. Il faut continuer à jongler en :

  • préparant ses 3 visuels en amont avec en fin de nom de fichier : « _up », « _over », « _down »,
  • déposant les fichiers dans un même dossier
  • intégrant le visuel avec l’état « _up ».

Cette logique est très Adobe mais nous aurions fortement apprécié que cette mise à jour soit l’occasion de proposer une gestion des états simples aussi bien pour les images et les boutons comme pour les formes. Nous restons donc sur impression d’inachevée !

 

5. Nouveauté #5 : la géolocalisation.

Captivate peut maintenant détecter la localisation de l’utilisateur. Vous vous demandez peut être à quoi cela sert ?
A partir de la localisation de l’utilisateur, il est possible de proposer des contenus spécifiques: par exemple dans un contenu diffusé à une échelle internationale, nous pourrons proposer un contenu spécifique sur les bureaux du pays où l’utilisateur consulte le contenu … et un autre contenu pour une autre zone géographique. De la même manière, nous pourrons adopter le style de police et sa taille qui varie en fonction des zones géographiques.

adobe captivate 8 géolocalisation

Dans la fenêtre variable, nous pouvons cocher l’option géolocalisation.

Cela nous ouvre la voix pour créer des actions qui permettent par exemple d’afficher un contenu spécifique en fonction du lieu de consultation du contenu de l’utilisateur.

Nous retrouvons ici le principe de spécification des contenus en fonction de l’utilisateur et cela présentera des avantages pour les projets internationaux. Il est même possible avec un peu d’imagination d’utiliser cette fonctionnalité pour créer des contenus originaux.

 

Notre avis et nos impressions après plusieurs semaines sur Captivate 8

C’est indéniable, Adobe signe une mise à  jour réussie avec l’intégration de création de contenus pour la gamme des périphériques rentrés dans nos quotidiens : ordinateur, tablette, smartphone. Néanmoins, un élément qu’il ne faut pas sous-estimé avant de se jeter sur le mode « projet réactif » est lié au temps de travail.

 

Le mode projet réactif.

Si nous faisons le choix d’un projet réactif  avec une déclinaison pour ordinateur, une déclinaison pour Smartphone et une déclinaison pour tablette, cela signifie plus de travail.

Un projet constitué de 20 diapositives se transforme en projet de 20 + 20 + 20 diapositives, soit un total de 60 diapositives. Si nous souhaitons proposer à l’utilisateur un contenu optimisé pour chaque périphérique, il est indispensable de retravailler l’ensemble des écrans.

Le temps de production ne sera pas forcément multiplié par 3. Mais le choix d’un projet réactif qui est la principale nouveauté de cette version ne doit pas être pris à la légère au risque de gonfler les coûts de production !

 

L’interface.

Une seconde réussite de cette mise à jour est l’interface du logiciel. Elle gagne vraiment en utilisabilité et en confort. L’interface de Captivate se bonifie version après version et nous en sommes heureux.

 

Question elearning boxNos regrets et nos doléances !

Derrière les nouveautés mises en avant par Adobe, cette nouvelle version présente toutefois à nos yeux quelques regrets. Si nous devions dresser une liste de nos doléances, nous citerions les points suivants.

  • Il n’y pas la possibilité d’export pour un périphérique unique par exemple seulement le smartphone ou la tablette. Cela serait pratique pour proposer facilement et rapidement un contenu dédié exclusivement aux smartphones par exemple.
  • Nous aurions aimé qu’Adobe améliore la gestion des états pour l’ensemble des objets et non pas uniquement pour les formes.
  • Firefox est toujours déconseillé pour la consultation des contenus au format HTML 5. Mais nous n’avons pas pu évaluer pour l’instant les éléments bloquants par rapport à la version 7. D’après ce que nous avons lu sur ses forums, Adobe explique que Mozilla en est responsable. Nous ne sommes pas très convaincu quand on sait que Firefox est un des premiers navigateurs à respecter les standards du Web.
Message à l'ouverte d'un export HTML5 avec le navigateur Firefox.

Message à l’ouverte d’un export HTML5 avec le navigateur Firefox.

  • Le système de création d’activité de glisser-déposer en mode classique est identique aux précédentes versions. Il ne nous a pas convaincu auparavant et c’est toujours le cas aujourd’hui !
  • Il n’est pas possible d’enregistrer un fichier réalisé dans Captivate 8 pour les versions précédentes. C’était déjà le cas pour la version 7 et 6. En conséquence, si nous travaillons avec des clients qui ont décidé de ne pas mettre à jour Captivate, nous pouvons nous retrouver dans la situation impensable de devoir installer 3 versions de Captivate. La version 6 si le client utilise la version 6, la version 7 ou encore la version 8 s’il a décidé d’effecteur une mise à jour depuis 2012. Ce type de situation est rédhibitoire et complexifie inutilement la conduite de projet e-learning.

Conclusion

Adobe a beaucoup travaillé sur la version 8 de Captivate. L’accent a était mis sur les nouveaux périphériques – tablette et smartphone – afin de proposer un logiciel qui soit performant aussi bien en production que pour l’utilisateur qui consultera les contenus.

 

Le pari est réussi même si nous pensons que le temps supplémentaire nécessaire pour créer des contenus parfaitement fonctionnels à la fois sur ordinateur, tablette et smartphone, a un impact sur l’utilisation de cette nouvelle fonctionnalité. De nombreux projets pourront s’en passer plutôt que de passer plusieurs à effectuer une mise en page de qualité pour chaque périphérique.

Adobe a également donné un coup de jeune à l’interface et l’organisation des menus. Version après version, Captivate a grandement amélioré son interface. Plutôt médiocre dans le passé, nous avons aujourd’hui un logiciel où il est plus facile de se repérer avec un confort d’utilisation en progression. Cette mise à jour comporte de nombreuses améliorations comme par exemple la gestion des états d’un bouton qui sont très appréciables.

Cette nouvelle version améliore par ailleurs certains points qui ne jouaient pas en la faveur de Captivate comme la qualité des exports en HTML5 ou des contenus modulables. Les rendus étaient insatisfaisants à nos yeux et nos premiers tests d’exportation (environnement mac os) nous ont montré que la situation s’était améliorée.

Enfin, il faut avouer que nous avons retrouvé du plaisir à travailler avec Captivate, plaisir que nous avions perdu et qui nous avait incité à délaisser Captivate pour d’autres outils auteurs. A vérifier que les limites de Captivate et sa logique parfois incompréhensible, ne reprennent pas le dessus avec le temps !

Remarque
Néanmoins, Adobe n’a pas résolu certains points qui nous semblent problématiques.
C’est par exemple le cas de l’incompatibilité d’un fichier Captivate entre les différentes versions.
C’est également le cas avec la consultation sur tablette ou smartphone qui ne permet pas d’intégrer des activités fondamentales comme le glisser-déposer. Ce type d’interaction est essentielle dans bien des projets.
Souhaitons que les prochaines mises à jour continuent d’améliorer ce logiciel.

 

feedback-okOn a aimé

  • La nouvelle interface : plus claire et plus ergonomique.
  • La manière dont Adobe à intégrer le concept « responsive desgin ». C’est facile d’utilisation, ce qui n’a pas toujours été le cas avec les logiciels Adobe.
  • Les améliorations dans les exports HTML5 qui comportait des rendus assez aléatoires.

 

feedback-fauxOn a moins aimé

  • Captivate n’aime toujours pas Firefox !
  • L’impossibilité d’utiliser des activités de glisser-déposer en mode réactif.
  • L’incompatibilité entre Captivate 8, 7 et 6.
  • La nouvelle gestion des états des boutons qui laisse une impression d’inachevée.
  • Une logique dans l’approche de la réalisation de contenus qui font que Captivate reste Captivate. Un logiciel initialement prévu pour faire du screen-casting et des simulations qui en fait toujours un logiciel avec des choix pas toujours compréhensible.

Articulate Storyline : démonstration et présentation

Articulate storylineSortie en 2012, Articulate Storyline est un logiciel auteur qui a rapidement trouvé son public. De nombreuses organisations ont adopté ce logiciel pour la réalisation de leurs cours / la production de leurs modules e-learning.

Quelles sont les raisons de ce succès ? Qu’est-il possible de réaliser avec Storyline ?

Découvrons l’utilité et les principales fonctionnalités de Storyline pour nos modules e-learning et nos formations à distance.

 

Sommaire :

1. A quoi sert un outil auteur comme Storyline
2. Quels sont les types de formations possibles avec Storyline ?
3. La vision du e-learning selon Storyline
4. Storyline pour les utilisateurs avec des besoins avancés.
5. Conclusion

1. A quoi sert un outil auteur comme Storyline ?

Cette première question est bien évidement primordiale. Avant de se lancer, il est important d’identifier les besoins auxquels Storyline pourra répondre.

Storyline est un outil auteur qui permet de créer des cours interactifs / modules e-learning sans avoir à maitriser des langages de programmation ou être un informaticien chevronné. En effet, ce type de logiciel facilite la production de contenus de formation interactifs par un large public : formateur, équipe pédagogique et RH des entreprises, société spécialisée dans le e-learning.

Integration de medias storyline

Un outil auteur comme Storyline a pour vocation d’intégrer l’ensemble des médias (son, texte, vidéo) et des activités pédagogiques afin de proposer un cours dans un ensemble cohérent.

2. Quels sont les types de formations possibles avec Storyline ?

Storyline permet de produire des contenus interactifs variés pour la formation d’étudiants ou de salariés.

 

Exemple 1 : Des contenus sous la forme d’un module e-learning pour remplacer une session de formation en salle pour des étudiants ou des salariés.
Exemple 1Exemple 2Exemple 3Exemple 4

Source : Articulate E-learning showcase – The Right Time, The Right Style par Kineo

 

Exemple 2 : Des mises en situation ou des simulations : par exemple pour évaluer des comportements.
Exemple 1Exemple 2Exemple 3Exemple 4

Source : elearningexamples.com – Broker Co-Worker

 

Exemple 3 : Des exercices, des examens ou des tests.
Exemple 1Exemple 2Exemple 3Exemple 4

Source : Bananas par Articulate.

3. La vision du e-learning selon Storyline

Stoyline est un logiciel qui se veut simple et vise un public large :

  • les novices qui n’ont jamais réalisé le moindre module e-learning,
  • tout comme les utilisateurs avancés qui souhaitent produire des modules complexes selon un cahier des charges précis.

 

Voici des éléments qui caractérisent Storyline (cliquez sur les titres pour ouvrir les fenêtres).

[learn_more caption= »Une interface intuitive »]

Une interface intuitive qui se rapproche de la logique de powerpoint ou Impress d’open office. Cela permet aux habitués de ces logiciels de rapidement trouver leur marque. L’interface sera un point fort pour certains, un frein pour d’autres : à vous de juger !

Storyline-interface

Capture d’écran de l’interface de Storyline
[/learn_more] [learn_more caption= »Des interactions et des activités qui sont faciles à créer en piochant dans les propositions de Storyline »]

La création des activités nécessaires pour vos contenus se fait avec une relative facilité notamment en utilisant les procédures et les modèles fournis par Storyline.

  • Plusieurs modèles sont proposés pour mettre en place des interactions : glisser / déposer, zone cliquable, texte à compléter, etc.

Storyline-Activites

  • Les modèles de questions de différents types couvrent de nombreux besoins : vrai ou faux, questions à choix multiples, questions ouvertes, classement, etc.

storyline quiz

  • Storyline propose une base d’objets interactifs sur lesquels l’apprenant cliquera ou agira : boutons, marqueurs, actions (ouverture d’une fenêtre, écran suivant, précédent, etc.), champs à compléter, etc.

storyline objet interactif

[/learn_more] [learn_more caption= »Des médias, des thèmes et des modèles intégrés par défaut. »]
  • Il existe des médias, des thèmes et des modèles intégrés par défaut. Ils permettent de débuter rapidement ses premières productions tout en ayant la possibilité d’utiliser ses propres médias ou design plus tard.

storyline-personnage

Capture de la fenêtre des personnages

storyline-transition

Exemples des transitions et des effets proposés.

Storyline-modele

Exemples des modèles pour les écrans.
[/learn_more] [box type= »bio »] Ces éléments qui caractérisent Storyline sont sans nul doute les principales raisons du succès de Storyline.

L’utilisateur évolue dans un environnement structuré où il se sent guidé. L’intuitivité et la simplicité rendent la production de contenus accessible aux personnes dont l’informatique n’est pas le métier premier à la manière de ce qui se fait pour une présentation PowerPoint.[/box]

4. Storyline, c’est aussi pour les utilisateurs avec des besoins avancés.

Vous ne souhaitez pas utiliser les images, les thèmes et les modèles proposés par défaut ? Vous avez besoin de développer un module avec un design qui vous est propre et qui se distinguera des modules e-learning de vos voisins ?

Les utilisateurs plus avancés ne sont pas oubliés pour autant. Ils pourront faire appel à des fonctions plus complexes pour des modules e-learning précis et personnalisés tout en utilisant leurs propres médias. Toutefois, il faudra un peu de temps pour prendre en main toutes les fonctionnalités et les possibilités de l’outil.

Cliquez sur les titres pour découvrir quelques fonctionnalités pour les utilisateurs avancés.

[learn_more caption= »Créer ses modèles et ses thèmes. »]

Storyline vous permet de créer vos thèmes, c’est à dire le squelette de vos écrans : fonds, taille de la police, structure type des écrans. Vous retrouvez cette notion dans Powerpoint avec les masques de diapositives.

En réalisant un thème, vous obtiendrez une interface commune dans l’ensemble d’un module e-learning. Vous gagnerez également beaucoup de temps lors du travail de production des différents écrans.

storyline-theme2

Capture d’écran de la personnalisation d’un masque modifié pour concevoir un design personnalisé

storyline-theme1

Exemple d’un thème avec un design personnalisé.
[/learn_more] [learn_more caption= »Intégrer ses propres médias : vidéo, son, image, animation Flash, etc. »]

Storyline vous permet d’intégrer vos images, vos sons, vos vidéos ou vos animations Flash.

storyline media son video flash

Vous devrez auparavant les produire dans le logiciel de votre choix. Voici quelques exemples :

  • Bimp, Photoshop ou Illustrator ou autres pour les images.
  • Imovie, Premiere, Final Cut Pro pour les vidéos.
  • After Effect pour des effets spéciaux
  • Flash pour la réalisation d’animations Flash.
[/learn_more] [learn_more caption= »Développer les fonctionnalités dont vous avez besoin avec les variables »]

Storyline intègre la notion de variable. En informatique les variables sont des paramètres avec une valeur ou un objet. Dans un logiciel auteur, les variables sont utilisées pour concevoir des activités et des scénarios plus personnalisés. Il est par exemple possible :

  • D’intégrer des conditions pour proposer des scénarios différents en fonctions des réponses ou des scores obtenus.
  • De mémoriser des données (par exemple un nom, une réponse à une question) pour réutiliser cette information plus tard dans le module e-learning.
  • De créer ses propres fonctionnalités si elles ne sont pas par défaut dans Storyline. Pensez par exemple à une barre de progression pour indiquer l’état d’avancement que vous souhaiterez ajouter à votre module. Cela n’est pas possible par défaut mais le deviendra dès que vous maitriserez le concept des variables.

storyline-variable1

Création des variables pour l’affichage de la progression.

storyline-variable2

Aperçu du résultat de l’utilisation des variables pour visualiser sa progression.

Source : Progress bar par David Dye

[/learn_more]

5. Conclusion

Ce tour d’horizon est terminé.
Conlusion elearning boxSi Storyline s’est rapidement imposé comme outil auteur, c’est bien car a de nombreuses qualités. Nombreuses sont les personnes qui ont pu se lancer dans la production de modules e-elearning avec Storyline. Ils obtiennent rapidement des contenus de qualité tout à fait satisfaisante et rapidement.

Un reproche parfois formulé vis à vis de Storyline est lié à toutes ses fonctionnalités intégrées. Cela a pour conséquence la réalisation de modules e-learning qui se ressemblent les uns aux autres et qui manquent de caractères selon les goûts !
Néanmoins, pour ceux qui sont en mesure de créer leurs propres médias (photos, visuels vectorisés, vidéos, animations flash) Storyline permet de se démarquer en créant des designs et des modules personnalisés.

Les possibilités du logiciel permettent de créer des modules e-learning avec des scénarios complexes et une ergonomie très professionnelle qui couvrira les besoins de nombreux acteurs. Tous ces points en font un excellent outil auteur qui a la côte aujourd’hui !

Et vous qu’en pensez-vous ? Donnez votre avis dans les commentaires.

Vous souhaitez vous former et devenir un héros sur Storyline ? Retrouvez cette présentation et le cours dédié à Storyline dans la « Cours Box »

Des modules e-learning avec ou sans voix-off ?

son elearning
Durant la phase de conception d’un projet de modules e-learning, nous nous posons de nombreuses questions.

Parmi toutes ces questions, celle de la voix-off revient régulièrement : quel type de son utiliser ? Quelle place leur donner ? Une voix-off est-elle un bon choix ?

Pourquoi se questionner sur l’utilisation d’une voix-off ?

Il est important de se questionner sur l’utilisation d’une voix-off dans un module e-learning notamment au regard du public cible, du budget et des potentielles modifications ultérieures. En effet, l’utilisation d’une voix-off a un impact fort sur les possibilités d’évolution et le coût d’un module e-learning.

voix off elearningPrenons un exemple.

Nous décidons d’utiliser comme voix-off celle d’un collaborateur de notre entreprise car elle convient parfaitement. Cela permet d’avoir des sons professionnels à moindre coût. Il suffit de posséder un micro de qualité et d’être à l’aise avec l’enregistrement de voix sur son ordinateur !

Et si nous n’avons pas de voix-off à disposition, nous pouvons toujours faire appel à un prestataire externe qui livrera directement les sons à intégrer à notre outil auteur e-learning préféré.

Mais imaginons que quelques mois plus tard, vous souhaitez ajouter un complément ou corriger un contenu. Malheureusement notre voix-off n’est plus disponible !  Dans le cas d’un prestataire externe, nous devons demander de nouveaux enregistrements.
Globalement, pour modifier le module e-learning avec une voix-off, les options sont limitées :

  • Soit nous devons trouver une nouvelle voix-off et refaire les enregistrements. Il y aura donc de nouveaux coûts pour l’enregistrement.
  • Soit nous devons faire une croix sur les modifications d’un module e-learning!

Alors avec ou sans voix off ?

Globalement, il nous paraît  important de se questionner sur plusieurs points avant de faire le choix d’une voix-off. Nous en citerons au moins 3.

 

  • Est-ce que les contenus nécessitent absolument une voix-off ?

En fonction du public cible et du sujet des contenus, la voix-off n’est pas un critère absolu !

Six principes e-learning

Six Principles of Effective e-Learning: What Works and Why par Ruth Clark

Nous voyons souvent des projets e-learning qui s’imposent l’utilisation d’une voix-off, plutôt que le texte. Il est vrai que l’association « voix et images » a sous certaines conditions des effets plus performants sur l’apprentissage qu’une association « voix et textes ».
Relire à ce sujet l’article de Ruth Clark  « Six Principles of Effective e-Learning : What Works and Why»  sur les travaux du professeur Richard E. Mayer est fort utile : l’audio se relève particulièrement performant lorsqu’il s’agit d’expliquer des visuels complexes et qui ne sont pas familiers pour l’apprenant. Il améliore l’apprentissage de 80% dans ce cas précis. Mais ces travaux ne portent pas d’autres conclusions sur l’usage de la voix-off dans les modules e-learning.
C’est pourquoi en fonction de vos contenus et  du profil des apprenants – par exemple le niveau de lecture -, la voix-off n’est pas systématiquement nécessaire ou significativement plus efficace pour l’apprentissage. Un module dont le texte et les images sont bien utilisés pourra permettre d’atteindre les mêmes objectifs pédagogiques à moindre coût ! Tout en ayant rien à envier à un module avec une voix-off.

 

  • Quel est le niveau de stabilité des contenus du module e-learning ? Est-ce que les contenus risquent d’évoluer ?

Une évolution des contenus sera plus coûteuse avec des voix-off intégrées au module e-learning. Un module essentiellement basé sur du texte et qui mobilise uniquement des sons d’ambiances ne nécessitent pas d’organiser des nouveaux enregistrements voix qui peuvent prendre du temps et coûter de l’argent.

Si vous souhaitez faire évoluer dans le futur  votre module e-learning, le choix d’une voix-off n’est donc pas toujours le plus judicieux.

 

  • Est-ce que le budget du projet permet de rémunérer des voix-off de qualité ?

cout-elearning-voix-offDes enregistrements voix de mauvaises qualités pourraient avoir un effet négatif sur un module e-learning.

Mieux vaut un module au design réussi avec du texte qu’un module avec un son médiocre qui nuit à la concentration. Pensez-y !

 

 

Vous l’aurez compris, même si les modules e-learning avec des voix-off sont très répandus, ils ne sont pas adaptés à tous les projets. Leur coût et les difficultés liées à l’évolutivité des voix enregistrées peuvent être des freins. Un module e-learning basé sur du texte, des images et des vidéos avec uniquement des sons d’ambiance peut  être une bonne alternative.

Et comme un exemple est toujours efficace, essayez ce module e-learning :

Exemple module e-learning

A la recherche du trésor SMS par masrhrur.com. Ce cours e-learning tratite des systèmes de gestion de la sécurité SMS. Pas de voix, uniquements des visuels, du texte et des sons d’ambiance.

 

Les raccourcis clavier d’Articulate Stoyrline

Raccourcis-clavier-Articulate-Storyline-shortcutkey

Les raccourcis claviers sont des combinaisons qui permettent de gagner énormément de temps.

Tour d’horizon des raccourcis clavier actifs dans Storyline qui vont permettront d’être encore plus efficace dans la production de contenus intéractifs.

 

 

Raccourcis clavier généraux 

F1 Renvoi vers la page d’aide du site web d’Articulate.
F7 Ouvrir la fenêtre de correction orthographique.
Ctrl+F Démarrer une recherche.
Ctrl+M Ajouter un écran / slide.
Ctrl+N Créer un nouveau projet.
Ctrl+O Ouvrir un projet.
Ctrl+S Enregistrer le projet.
Ctrl+W Fermer l’onglet / la fenêtre.
Ctrl+Y Refaire.
Ctrl+Z Annuler.
Ctrl+Mouse Wheel Zoom en avant ou en arrière sur l’écran.
C Lorsque l’écran est joué, ajouter un « cue point » dans la timeline.
Spacebar Mettre en pause ou sur play la timeline.

 

Raccourcis clavier sur les objets (image, zone de texte, forme, etc.)

F2 Lorsqu’une zone de texte / une forme est sélectionnée,  tout le texte de la zone est sélectionnée.
Shift+selectionner un objet En modifiant la taille d’un objet en appuyant en même temps sur la touche Shift, la modification conservera les proportions.
Ctrl+A Sélectionner tous les objets de l’écran / slide.
Ctrl+C Copier un objet / du texte.
Ctrl+D Dupliquer un objet.
Ctrl+Shift+C Copier la mise en forme de l’objet.
Ctrl+Shift+V Coller la mise en forme en mémoire.
Ctrl+G Grouper les objets sélectionnés.
Ctrl+Shift+G Dégrouper les objets du groupe sélectionné.
Ctrl+J Insérer une image.
Ctrl+T Insérer une zone de texte.
Ctrl+V Copier un objet ou du texte.
Ctrl+Arrow Déplacer l’objet sélectionner de 1 pixel dans la direction de la flèche utilisée
Ctrl+Shift+Arrow Redimensionner l’objet de 1 pixel :

  • Les flèches haut et bas augmentent et réduisent la hauteur de l’objet.
  • Les flèches gauche et droite  augmentent et réduisent la largeur de l’objet.
Alt+drag Déplacer ou modifier la taille d’un objet de 1 pixel en 1 pixel même si le réglage « Grid Settings » indique une valeur supérieure.
Ctrl+Shift+Enter Ouvrir la fenêtre de réglage sur les tailles et les positions

Raccourcis clavier pour le mise en forme du texte

Ctrl+B Appliquer le style gras sur le texte.
Ctrl+E Aligner le texte au centre.
Ctrl+L Aligner le texte à gauche.
Ctrl+R Aligner le texte à droite.
Ctrl+U Appliquer le style souligné sur le texte.
Ctrl+I Appliquer le style italique sur le texte.
Ctrl+K Ajouter un hyperlien.

Raccourcis clavier pour basculer d’un type de vue à une autre

F3 Lorsque nous sommes sur la Storyview, Storyline passe en vue normal en se basant sur l’écran sélectionné dans la Storyview.
F4 Passer en mode « Slide Master », c’est à dire le mode qui permet de modifier la mise en page des écrans / slide.
F5 Passer en mode « Feedback Master », c’est à dire le mode qui permet de modifier la mise en page de Feedback (les écrans de rétroaction pour les questions de type quiz).
Shift+F9 Monter / masquer le quadrillage

 

Raccourcis clavier pour la prévisualisation ou la publication

F10 Démarrer une publication du projet.
F12 Lancer la prévisualisation du projet.
Shift+F12 Lancer la prévisualisation de la scène.
Ctrl+F12 Lancer une prévisualisation de l’écran.

6 principes pour utiliser le son, l’image et le texte en e-learning

elearning ameliorer apprentissage image texte son

L’apport des sciences cognitives a contribué à stabiliser les techniques pour faciliter l’apprentissage dans les modules e-learning.

Les travaux de Richard E. Mayer’s font notamment référence puisqu’ils mettent en évidence comment les différents médias agissent sur notre mémoire.

Rappel de quelques principes à garder en tête pour la réalisation de modules e-learning.

 

Principe 1 : un visuel associé à une image favorise l’apprentissage

 

elearning-association-texte-image

 Illustrer le texte avec une image améliore l’apprentissage.

Les visuels pourront être :

  • des graphiques,
  • des photos,
  • des animations.

Cela s’explique car le  double encodage avec un code visuel et un code verbal donne 2 possibilités d’ancrer l’information dans la mémoire à  long terme.

 

Principe 2 : tout média inutile nuit à l’apprentissage

Un texte, un son ou un visuel inutile qui est intégré dans le module e-learning mais sans lien avec l’objet d’apprentissage, nuit à l’apprentissage.

Autrement dit, il est préférable de supprimer tous les médias inutiles !

Principe 3 : Un visuel associé à un texte doit être à proximité du texte

elearning texte image

Texte et illustration rapprochés > Texte et illustration séparés.

Si le texte est placé à proximité du visuel, il améliore l’apprentissage. Notons par ailleurs qu’il est préférable de positionner l’image à gauche du texte pour augmenter le confort de lecture : cela résulte du principe de « contiguïté ».

Principe 4 : l’association image et son (texte entendu) et plus efficace que l’association image et texte lu.

image et son elearning

Expliquer les illustrations avec un message audio améliore l’apprentissage.

Cela est d’autant plus vrai pour les visuels complexes ou des contenus qui ne sont pas familiers à l’apprenant.
Retenons que notre mémoire de travail a deux aires de « sous stockage »: l’une pour l’information visuelle et l’autre pour l’information phonétique. L’utilisation de l’audio évite la « surcharge cognitive« .

[box type= »warning »]Attention !

Avant de vous lancer dans des réalisations audio, évaluez l’utilisation de l’audio en la mettant en perspective avec votre projet dans sa globalité. En fonction de vos coûts de productions à respectér, de l’évolutivité de vos contenus, du public cible, de la qualité de la voix utilisée, l’intégration de l’audio dans un module e-learning n’est pas toujours un choix judicieux.[/box]

Principe 5 : Rester simple !

elearning image son texte

Image + texte écrit + texte oral < Image + texte oral

L’association « Image + texte écrit + texte oral » a un effet négatif lié à la redondance. Expliquer une illustration avec un audio et un texte peut nuire à l’apprentissage.

En effet, il y a « surcharge » de la mémoire de travail, un effet de distraction sur l’apprenant.
Le texte ne sera utile que lorsque l’information doit rester à disposition de l’apprenant pendant une longue période (pour un exercice par exemple).

 

Principe 6 : La qualité du son

son pour le elearning

Utiliser le ton de la conversation pour une voix off améliore l’apprentissage. Le sentiment d’éloignement et d’isolement est diminué et l’’apprenant est « engagé socialement ». Cela a pour effet de renforcer l’apprentissage.

 

Texte, image, son et vidéo : typologie des médias pour le e-learning

 

Media pour le e-learning

4 types de médias sont régulièrement utilisés dans un module e-learning : le texte, l’image, le son et la vidéo. Combinés ensemble, ils constituent les contenus d’un cours auquel nous pourrons ajouter des interactions. Rappel sur les utilisations possibles de ces médias, sur leurs avantages et sur leurs inconvénients.

 

 

 

Sommaire :

1. Le texte
2. Les images / les visuels
3. Le son
4. La vidéo

1. Le texte.

texte pour le elearningUtilisation du texte.

L’apprenant lit le texte qui constitue l’apport en contenu. Le texte est utilisé pour transmettre des connaissances par la diffusion d’informations ou la réalisation d’exercices.
Le contenu est statistique, il n’y a généralement pas d’interactivité en temps réel avec l’apprenant.

 

Les avantages :

  • Il est possible de réutiliser des textes existants ou les ressources texte déjà produites sur le sujet du module e-learning.
  • Le rythme d’apprentissage est individualisé. L’apprenant lit les contenus à son rythme. Il peut dans le cas de version papier, annoter les documents et les manipuler à sa convenance.
  • Le texte est le média le plus léger. Il permet de réaliser des modules e-learning peu gourmand en bande passante. Le cours est facile à consulter même si les utilisateurs visés possèdent des connexions internet de mauvaises qualités ou s’ils utilisent un smartphone ou une table avec une connexion variable.
  • C’est sans doute le média le plus économique pour la production et de la diffusion.
  • Il est facile à mettre à jour.

 

Les inconvénients :

  • Le texte est un média qui peut être inapproprié en fonction du profil des apprenants. Rappelons-nous l’enquête réalisée par l’OCDE en 2013 ! Elle met en avant qu’un adulte sur 5 en France affiche des performances égales ou inférieures au niveau le plus élémentaire pour la lecture.
  • Les documents avec uniquement du texte présente un problème de clarté. Il est important d’associer un autre type de média comme par exemple des visuels pour faciliter la compréhension du texte.
  • C’est un support qui n’est pas interactif. Il nécessite une concentration plus importante que les autres médias pour l’apprenant.

 

 

2. Les images / les visuels

image pour le elearningUtilisation des images.
Les images sont des photos, des dessins, des graphismes ou des formes vectorielles. Retouchées ou non, les visuels sont utilisés principalement pour :

  • illustrer un texte,
  • construire le design des écrans,
  • raconter une histoire (par exemple une BD).

Les images sont fixes mais il est possible d’ajouter de l’interactivité pour que l’apprenant les manipulent : effet de zoom, image en 3D qui est  manipulée par l’apprenant, déplacement par glisser-déposer.

 

Les avantages :

  • Les images facilitent la compréhension immédiate et permettent de renforcer la mémorisation.
  • Il est possible de réaliser des photos numériques ou d’acquérir des visuels à des coûts faibles.
  • C’est un média simple d’utilisation.
  • Les images sont réutilisables d’un projet à un autre.
  • Bien optimisées pour le web, les images restent un média peu gourmand en bande passante (mais plus que le texte).

 

Les inconvénients :

  • Les images peuvent amener de la distraction si elles sont mal employées dans le module.

 

 

3. Le son

son pour le elearningUtilisation du son.

Le son est le plus souvent utilisé comme support d’appoint en complément à d’autres médias.
Nous pouvons faire appel au son pour intégrer des témoignages, des interviews ou ajouter une voix off. Le son sert également pour compléter les contenus avec des effets sonores par exemple lors d’une bonne ou d’une mauvaise réponse de l’apprenant ou en ajoutant une musique pour un générique.

 

Les avantages :

  • Il est possible de réutiliser des sons existants ou de faire appel à des bibliothèques de son
  • Il est particulièrement bien adapté à certaine thématique comme par exemple les langues
  • Il permet d’optimiser la présentation des contenus : signature sonore, bruits d’interactivités (par exemple au passage de la souris sur un bouton), ajout d’aides vocales, etc.

 

Les inconvénients :

  • C’est un support difficile à utiliser seul.
  • Les opérations de découpage ou d’édition peuvent être complexes, surtout si les sons originaux ne sont pas de bonne qualité.

 

 

4. La vidéo

video pour le elearningUtilisation de la vidéo.

La vidéo couvre l’ensemble des usages d’un module e-learning : apport de connaissances, simulation, mise en situation, exercices, illustration avec des exemples.
Elle permet également de présenter des situations complètes qui reproduisent des situations réelles.

 

Les avantages :

  • C’est un support vivants qui permet de reproduire des situations réelles.
  • C’est un média très efficace pour l’apprentissage.
  • Il apporte du dynamise au module e-elearning.

 

Les inconvénients :

  • C’est un support difficile à utiliser seul.
  • Les contenus sont rarement préexistants, il faudra donc les produire.
  • Les équipements nécessaires sont lourd et le montage complexe en fonction du résultat attendu et de la qualité avec laquelle sont tournées les vidéos.
  • Les coûts de réalisation sont élevées, notamment lorsque la vidéo nécessite un tournage avec des acteurs.
  • C’est le média qui nécessite le plus de bande passante lors de la diffusion.

 

11 packs d’icones gratuites à télécharger pour vos modules e-learning

 

 

elearning images

Lorsque nous produisons des modules e-learning, une question revient fréquemment : « comment favoriser l’apprentissage ».

Les recherches en sciences cognitives, en neuropsychologie cognitive, les retours d’expériences de projet e-learning s’accordent notamment sur un point fondamental : une bonne utilisation de médias  (texte, image, son) permet de favoriser l’apprentissage. Aujourd’hui, intéressons nous aux visuels.

 

Les images sont un  médias essentiels en formation. Nous devons prendre soin des visuels pour améliorer la compréhension, la mémorisation ou encore la motivation.

Intéressons nous aujourd’hui à une série de pack d’icônes de qualité. Ils pourront enrichir vos écrans : sous la forme de boutons, pour remplacer astucieusement les puces de vos listes  ou tout simplement pour améliorer vos interfaces au grès de vos envies !

 

Et vous, utilisez-vous des icônes dans vos modules e-learning ? Partagez-les en commentaires.

 

350 icônes variés :

brankic

 

Un pack de drapeaux :

drapeau

 

Un pack d’icônes pour des visuels fait à la main :

faitmain

 

Des images de gestes à la main :

geste

 

Des visuels pour illustrer les interface informatiques :

interface

 

Un set d’icônes dans le style Iphone :

iphone

 

Des visuels sous la forme de marqueur :

marqueur

 

Des icônes pour la météo :

meteo

 

Un set d’icônes très design (attention, uniquement le pack png est gratuit, pour les icônes vectorisées ou .psd, il faut acheter le pack) :

minimilasit

 

120 icônes pour la mer :

ocean

 

80 mini icônes :

simple

Storyboard ou scénarimage : trame pour réussir ses modules e-learning.

Mise à jour 25 juillet 2014 : Notre trame a été mis à jour pour optimiser l’espace dédié au prototype et ajouter de modèles pour créer des prototypes pour tablette et smartphone par exemple avec le mode « projet réactif » (responsive design) de Captivate 8.

Articulate storyline

Pour concevoir et développer des modules e-learning, un outil central est utilisé par l’équipe projet : le storyboard.

A quoi sert-il ? Quel outil utiliser pour réaliser un story-board ? Que contient-il ?

 

 

Sommaire :

1. Les objectifs du storyboard
2. Qui participe à la réalisation des storyboard ?
3. Quel logiciel utiliser ?
4. Notre trame de storyboard prête à être utilisée
5. Télécharger et utiliser la trame

1. Les objectifs du storyboard.

storyboard-elearningEn provenance du monde du cinéma, le storyboard s’est exporté au secteur professionnel de la formation. En français, il est également appelé « scénarimage« .

De quoi parlons-nous ?  Imaginez une représentation imagée écran par écran de votre BD ou de votre film préféré ! Vous avez  un storyboard.

 

Le storyboard est une maquette d’un module e-learning, une description de tous les écrans d’un contenu interactif. Il précise les objectifs de l’écran, ce qu’il va se passer pour l’apprenant et les indications nécessaires pour la production du contenu interactif avec le logiciel auteur de votre choix (Storyline, Captivate, Lectora, etc.).

Exemple de storyboard pour le e-learning :

exemple storyboard elearning

Extrait de quelques écran d’un storyboard du module e-elearning sur les fuites d’eau

 

Qu’avez-vous à gagner à réaliser un storyboard avant de passer à la production de votre module e-learning ?

La réalisation du storyboard est un travail qui favorise la réussite de votre projet de module e-learning.

Prenons le cas d’un projet de conception et de réalisation de module e-learning classique où 2 acteurs travaillent ensemble : l’expert du contenu et le concepteur pédagogique multimédia.  Voici ce que le storyboard, va vous apporter :

idee storyboard

  • Maquetter l’interface écran par écran tout en vous posant les bonnes questions : quelle technique pédagogique mobilisé ? Quel contenu doit apparaître à l’écran ? Et dans quel ordre ? Est-ce que les contenus répondent à mes objectifs pédagogiques ?
  • Vous interroger sur les activités et les interactions à intégrer dans le module e-learning.
  • Choisir les médias les plus pertinents : images, vidéos, textes, sons, animations.
  • Intégrer les commentaires et les suggestions du client.
  • Repartir le travail entre plusieurs membres d’une équipe.
  • Gagner du temps par la suite : il est toujours plus facile de modifier une maquette qu’un module e-learning produit !

Le Storyboard est-il obligatoire ?
Vous avez peut-être rencontré des professionnels qui disent se passer de storyboard. De notre point de vue, le storyboard reste indispensable pour les projets où vous devez effectuer un travail d’ingénierie pédagogique et travailler en équipe.

Bien évidement, il ne s’agit pas d’utiliser les storyboard systématiquement. A vous d’évaluer en fonction de vos projets si le storyboard est nécessaire. Nous pouvons citer 2 exemples où le storyboard pourrait ne pas être pertinent :

  • Le cas d’un projet où les contenus sont déjà stabilisés et où le concepteur pédagogique multimédia réalise le module e-learning seul.Le concepteur pourra réaliser directement un prototype fonctionnel dans le logiciel auteur de son choix qui fera office de storyboard.
  • Le cas d’un projet où l’objectif est de produire un contenu interactif dans les meilleurs délais et à un coût le plus faible possible.

 

 

2. Qui participe à la réalisation des storyboard ?

En fonction du projet, les acteurs qui participeront à la réalisation du storyboard sont plus ou moins nombreux.

Typiquement, il y a au moins 2 acteurs même si une même personne peut très bien occuper ces 2 rôles :

  • L’expert de contenu qui est responsable des contenus en lien avec le sujet du module e-learning.
  • Le concepteur pédagogique multimédia qui est responsable de l’ingénierie de formation et éventuellement de la production.

acteurstoryboard

 

Nous rencontrons également d’autres acteurs en fonction des projets. Ils ne participeront pas forcément à la réalisation du storyboard mais pourront le commenter, le valider et devront pouvoir le comprendre.

  • Le client final qui fera ses annotations, ses commentaires ou ses validations.
  • Les personnes qui participent éventuellement à la production : graphiste, développeur, flasheur, équipe vidéo. Même si ce groupe de personnes ne participe pas directement à la conception du storyboard, le document sera leur cahier des charges pour la phase de production.

acteur utilisateur storyboard

Le storyboard est donc un document sur lequel l’équipe projet va pouvoir échanger et  se mettre d’accord sur chacun des écrans. Le document doit donc être accessible et compréhensible par tous afin que les acteurs dans la phase de la conception puissent l’ajuster et le valider avant de passer à la phase de production.

 

3. Quel logiciel utiliser ?

Un logiciel de présentation comme Powerpoint (Microsoft) ou Impress (OpenOffice) fait très bien l’affaire pour réaliser un storyboard. Un traitement de texte pourra également bien fonctionner mais il est plus compliqué de réaliser des maquettes avec des visuels sur Word ou Writer qu’avec Powerpoint. A vous de voir le logiciel avec lequel vous êtes le plus à l’aise !

powerpoint storyboard   word storyboard

Les logiciels utilisés pour réaliser des storyboard sont variés et dépendent des habitudes des uns et des autres comme en témoigne les échanges dans cette discussion du groupe « E-learning Francophone » sur Linkedin :

Scénarimage Je suis à la recherche d’un scénarimage. Avez-vous des exemples, conseil ou site Internet à me partager ?

Gardez en tête que le plus important est d’avoir recours à un logiciel qui est maitrisé par l’ensemble de l’équipe et qui vous permet de vous concentrer sur votre priorité : le travail de conception du module e-learning !

4. Notre trame de storyboard prête à être utilisée.

Vous êtes à la recherche d’une trame pour réaliser vos storyboard ? Alors vous êtes au bon endroit !

Voici une trame que nous utilisons régulièrement pour des projets lors de travail avec un expert de contenu et un client final.

Nous utilisons le logiciel PowerPoint pour concevoir le storyboard. L’expert de contenu peut ainsi visualiser l’avancement et faire ses remarques tout comme le client.

 

Présentation du contenu du storyboard :

// 3 écrans préalables où vous pouvez préciser :

  • Les spécifications techniques du module e-learning.
  • Les objectifs pédagogiques du module : commencer un storyboard avant de les avoir formaliser serait assez dangereux !
  • Le récapitulatif des écrans.
Capture 1Capture 2Capture 3
// Les maquettes des écrans du contenu interactif avec :

  • Un exemple d’écran vierge et des explications sur l’utilisation.
  • Un exemple d’écran maquetté.
Capture 1Capture 2

 

5. Télécharger et utiliser la trame.

Voyons comment vous pouvez utiliser la trame d’digidago.academy pour vos storyboard.

1. Téléchargez la trame.

La trame :

Ouvrez-moi 2. Lorsque les informations préalables sont importantes pour votre projet, complétez-les en fonction de vos besoins (spécifications techniques, objectifs pédagogiques, récapitulatif des écrans).

3. Pour créer la maquette d’un écran, c’est simple :

Cliquez sur nouvelle diapositive et sélectionnez « squelette storyboard ». Un nouvel écran sera créé, vous n’avez plus qu’à maquetter votre écran !

storyboard creer ecran

 

Attention
Vous pourrez être amené à ajuster la trame de ce storyboard ou créer votre propre maquette en fonction du projet. Le plus important, c’est que vous soyez à l’aise avec l’outil et qu’il puisse vous permettre de préciser dans le document toutes les informations importantes dont vous avez besoin avant de passer à la production.

Et vous, est-ce que vous réalisez des storyboard avant de produire vos modules e-learning ?