Want to create interactive content? It’s easy in Genially!
04_Storyboard_elearning_SBADOUX_VF
Sandrine Badoux
Created on December 1, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Akihabara Microsite
View
Essential Microsite
View
Essential CV
View
Practical Microsite
View
Akihabara Resume
View
Tourism Guide Microsite
View
Online Product Catalog
Transcript
03_Storyboard_elearning_SBADOUX
Slide 1: Accueil - durée : 37''
Titre du module: 1. Conduire un entretien de découverte client
Durée de ce e-learning: 28 minutes 1ère partie du module " Conclure une vente en respectant les 7 étapes d'un entretien client structuré ".
Moodboard
Slide 2: Repères de navigation - durée : 31''
11
10
3a
12
3b
Page d'apports règle des 4x20
Slide 17: Rappel - durée : 16''
Rappel
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
Titre 2
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
11
10
Ordonner les réponses
Slide 18: Une question pour commencer - durée : 120''
Une question pour commencer
Page d'apports 2
Slide 30: Rapels sur les techniques de questionnement - durée : 120''
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
Ceci est un paragraphe prêt à contenir...
Ceci est un paragraphe prêt à contenir...
Ceci est un paragraphe prêt à contenir...
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
10
Ceci est un paragraphe prêt à contenir...
Info
Etape 1 - ajouter une forme carrée et la redimensioner en rectangle horizontal. Couleur de la forme: Violet 29016B2 Etape 2 - copier/coller par dessus cette forme le texte suivant: Rappel : le questionnement sert à affiner le profil du client au fur et à mesure de l’entretien de vente. Etape 3 - typo du texte Roboto + gras - taille 22 - couleur Cyber jaune #FFD100
Etape 1: Aller sur questions intéractives et choisir le modèle "Ordonner les réponses" Etape 2: Renseignement du contenu - Enoncé: Classer les éléments clés de la règle des 4x20 en fonction de leur ordre de perception par votre client: - Réponses à inscrire dans l'ordre qui convient: Les 20 premiers gestes Les 20 centimètres Les 20 premiers mots Les 20 premières secondes
Etape 1: ajouter une zone image cadrée tiers de page hauteur sans bordure et justifiée à droite de la zone d'édition, selon disposition proposée sur ce schéma. Etape 2: sélectionner une photo qui contextualise un univers de vente en magasin (vente en face à face). Pas de personnages nécessaire sur cette photo. Juste le contexte magasin. Choisir une photo libre de droit dans la banque d'images Genially "vente en magasin" fond Pixabay Etape 3: positionner cette image au dessus de la zone d'édition
Etape 1 - Elément intéractif
Sélectionner l'élément intéractif et le positionner comme ci-contre. Pictogramme: + Info. Modifier la Couleur: Rouge feu #FD4703
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
Info
Etape 2: Révéler
Ajouter sur cet élément une interactivité Révéler en sélectionnant la forme et le texte ci-contre (à gauche) qui doivent apparaître en même temps.
Etape 1 - Ajouter le texte indiqué ci-dessus et une interactivité fenêtre avec le texte ci-dessous: Sur chacune des pages de ce e-learning, vous trouverez 4 pictogrammes de navigation récurents (en vert): - en haut à gauche retour au début, retour au sommaire; - en bas à droite : page précédente ou page suivante. Grâce à ces pictogrammes vous pouvez naviguer dans les contenus de ce parcours selon vos besoins.En haut à droite, sur le grand carré vert, vous pouvez visualiser l'ensemble des pictogrammes intéractifs de la page sur laquelle vous êtes positionné: d'un seul clic apparaissent les actions que vous pouvez réaliser d'une page à l'autre.Sur le 2e petit carré vert en haut à droite, sont indiqués les pictogrammes ponctuels (en rouge) qui vous signalent une information à lire, un enregistrement audio, une vidéo à regarder, un apport sur une notion à découvrir lorsque l'une de ces actions vous est proposé. Etape 2 - Ajouter au texte "Quelques précisions à lire avant de démarrer" les animations automatiques suivantes: Entrée: Zoom Continue: Notification Et l'animation intéractive Souris dessus: Impulsion Etape 3 - Typo: Roboto - Taille: 20 + gras Couleur de la Typo: Canard bleu #008193
Etape 1 - ajouter une forme carrée et la redimensioner en rectangle horizontal. Couleur de la forme: Canard bleu #008193 Etape 2 - ajouter une forme trianguaire et la positionner sur le bord gauche de la forme rectangulaire, comme présenté ci-contre. Couleur de la forme: Canard bleu #008193 Etape 3 - copier/coller par dessus cette forme le texte suivant: Les questions fermées permettent d'obtenir une information précise car la réponse attendue est un mot (oui ou non), un chiffre, etc. Etape 4 - typo du texte Roboto + gras - taille 20 - couleur Blanc Etape 5 - devant ce pavé forme + texte, ajouter le même élément intéractif qu'en point 2 et le positionner à la place du pictogramme 5, comme ci-contre. Pictogramme: Oeil dans rond.Modifier la Couleur: Rouge feu #FD4703 Etape 6 - ajouter une animation automatique sur ce pictogramme:En entrée avec effet apparaître et en continue avec effet battement. Etape 7 - ajouter une animation intéractive sur ce pictogramme: Cliquer + effet disparaître.
Etape 1 - ajouter une forme carrée et la redimensioner en rectangle horizontal. Couleur de la forme: Canard bleu #008193 Etape 2 - ajouter une forme trianguaire et la positionner sur le bord gauche de la forme rectangulaire, comme présenté ci-contre. Couleur de la forme: Canard bleu #008193 Etape 3 - copier/coller par dessus cette forme le texte suivant: La technique est celle de l'entonnoir Etape 4 - typo du texte Roboto + gras - taille 26 - couleur Blanc Etape 5 - devant ce pavé forme + texte, ajouter le même élément intéractif qu'en point 2 et le positionner à la place du pictogramme 8, comme ci-contre. Pictogramme: Oeil dans rond.Modifier la Couleur: Rouge feu #FD4703 Etape 6 - ajouter une animation automatique sur ce pictogramme:En entrée avec effet apparaître et en continue avec effet battement. Etape 7 - ajouter une animation intéractive sur ce pictogramme: Cliquer + effet disparaître.
Etape 3: paramétrez les actions Réponse correcte Marquer entrée pour afficher les bonnes réponses - Oui Commentaire message de réussite: Bravo vous maîtrisez la règles des 4 x 20 :-) Commentaire message d'erreur: Vous devriez revoir la règle des 4 x 20 ;-) Aller à la page: 19
Etape 1: insérer un enregistrement audio sur cette slide en choisissant le pictogramme définit en slide 2, instructions n°9. Etape 2 : enregistrer le texte ci-dessous: Pour répondre à cette question, passer votre souris sur les 4 éléments de réponse proposés. Lorsqu'une main apparaît, cliquez sur le bouton gauche de votre souris et faites glisser l'élément sélectionné selon l'ordre qui vous semble le bon: en haut ce que le client va percevoir en premier de votre personne, en bas ce qu'il percevra en dernier. Etape 3 : ajouter une animation automatique sur ce pictogramme: - en entrée avec effet zoom- et en continue avec effet battement.
Etape 1 : Reproduire dans la page l'écran de contour ci-dessous selon les mêmes proportions et le même positionnement. Etape 2 : Reproduire dans l'écran le même haut de page tel que défini en instructions 1 et 2 de cette slide et en instructions 5 et 6 de la slide 1. Etape 3 : Ajouter une image postionnée à gauche du cadre et selon la proportion indiquée ci-dessous. Choisir une photo libre de droit dans la banque d'images Genially "personnage avec ordinateur" fond Pixabay
Etape 1 : Insérer en bas à droite de toutes les pages du e-learning les 2 éléments intéractifs selon l'ordre et le choix des pictogrammes ci-contre. Couleur des pictogrammes Vert tilleul #62BD19 Etape 2 : Ajouter sur chacun de ces éléments une interractivité " aller à la page " : - page précedente pour l'élément intéractif avec la flèche revenir en arrière - page suivante pour l'élément intéractif avec la fléche avancer à la page suivante
Etape 1 :Ajouter une zone texte: Navigation Typo: Roboto Taille: 50 + gras Couleur de la Typo: Canard bleu #008193 Etape 2 : Sous le texte rajouter une ligne verte à l'identique du modèle de cette page. Couleur de la ligne: Vert tilleul #62BD19. Etape 3 : Ajouter une animation d'entrée à cette ligne, avec effet " glisser ". Cette présentation du haut de page sera définie comme modèle de toutes les pages suivantes et à l'exclusion des pages d'exercices et des pages de la partie Focus.
Reproduire le haut de page de cette slide selon les instructions récurrentes précédentes: - Voir slide 1: boutons interactifs 5 et 6 - Voir slide 2: boutons interactifs 1 et 2
Etape 1: Insérer en haut à gauche de toutes les pages du e-learning les 2 éléments intéractifs selon l'ordre et le choix des pictogrammes ci-contre. Couleur des pictogrammes Vert tilleul #62BD19 Etape 2: Ajouter sur chacun de ces éléments une interractivité "aller à la page": - première page pour l'élément intéractif représentant une maison - page sommaire pour l'élément intéractif avec les 3 lignes superposées
Etape 1: insérer un enregistrement audio sur cette page d'accueil. Texte à enregistrer: Tout au long de ce e-learning vous allez revoir les méthodes à mettre en œuvre lors des 2 premières étapes de votre entretien de vente, ainsi que les techniques de questionnement à maîtriser pour mener une découverte client satisfaisante. Pour optimiser votre parcours, nous vous recommandons d'activer le son de votre ordinnateur ou de brancher votre casque. Etape 2 : option du reproducteur en Autoplay. Etape 3 : positionner cet enregistrement audio au dessus de la zone d'édition, hors champs. En haut à gauche de la zone d'édition.
Etape 1 : présenter les 4 pictogrammes récurents tels que sur le modèle ci-dessus.Couleur des pictogrammes: Vert tilleul #62BD19 Etape 2 : ajouter au pictogramme "Retour au au début" une animation automatque d'entrée avec effet cadrer + un début différé de 4,5 secondes + vitesse rapide. Etape 3 : ajouter au pictogramme "Retour au sommaire" une animation automatque d'entrée avec effet cadrer + un début différé de 5 secondes + vitesse rapide. Etape 4 : ajouter au pictogramme "Page précédente" une animation automatque d'entrée avec effet cadrer + un début différé de 5,5 secondes + vitesse rapide. Etape 5 : Ajouter au pictogramme "Page suivante" une animation automatque d'entrée avec effet cadrer + un début différé de 6 secondes + vitesse rapide.
Réponses Police: Source Sans Pro Taille : 21 Couleur de la police d'écriture: Canard bleu #008193 Fond oui Couleur de fond:: Cyber jaune #FFD100 Bouton Police: Source Sans Pro Texte: Envoyer Taille : 16 Couleur de la police d'écriture: blanc Couleur du bouton: Vert tilleul #62BD19 Commentaire Police: Source Sans Pro Taille : 22 Interligne: 1,33 Couleur du texte correcte: Vert tilleul #62BD19 Couleur du texte incorrecte: Rouge feu #FD4703
Etape 4: paramétrer le design (paramètrer les consignes en gras) Style personnaliser Options générales Bordure oui Couleur de la bordure: Canard bleu #008193 Fond oui Couleur du fond: gris claire #C6C7CC Questions Police: Source Sans Pro Taille : 24 Interligne: 0,9 Couleur de la police d'écriture: Canard bleu #008193
Etape 1 : Ajouter le pictogramme ci-contre dans le petit carré vert en haut à droite. Couleur du pictogramme: Rouge feu #FD4703 Etape 2 : Ajouter une intéractivité fenêtre avec le texte suivant: Ce pictogramme signale une information à lire lorsque vous serez sur une page qui présentera cet élément intéractif dans le 2e petit carré vert en haut à droite. Il vous suffira de cliquer sur ce pictogramme pour que l'information apparaîsse. Etape 3 : Ajouter une animation automatique sur ce pictogramme: - en entrée avec effet zoom - et en continue avec effet battement. Tous les pictogrammes ponctuels couleur Rouge feu #FD4703 seront ajoutés avec les mêmes animations automatiques lorsqu'ils seront nécéssaire sur une page. Ils seront positionnés sur le petit carré vert en haut à doite.
Etape 1: Ajouter une zone titre 2 typo Roboto taille 85 - Couleur Vert tilleul #62BD19 + gras et copier/coller le texte suivant: 4x20Etape 2: Positionner cette zone texte telle que sur l'exemple ci-contre. Etape 3: Ajouter à ce texte une animation automatque d'entrée avec effet zoom + un début différé de 12.2 secondes + vitesse lent.
Etape 1 - ajouter une forme carrée et la redimensioner en rectangle horizontal. Couleur de la forme: Canard bleu #008193 Etape 2 - ajouter une forme trianguaire et la positionner sur le bord gauche de la forme rectangulaire, comme présenté ci-contre. Couleur de la forme: Canard bleu #008193 Etape 3 - copier/coller par dessus cette forme le texte suivant: Les questions alternatives permettent de proposer un choix au client. Etape 4 - typo du texte Roboto + gras - taille 20 - couleur Blanc Etape 5 - devant ce pavé forme + texte, ajouter le même élément intéractif qu'en point 2 et le positionner à la place du pictogramme 6, comme ci-contre. Pictogramme: Oeil dans rond. Modifier la Couleur: Rouge feu #FD4703 Etape 6 - ajouter une animation automatique sur ce pictogramme: En entrée avec effet apparaître et en continue avec effet battement. Etape 7 - ajouter une animation intéractive sur ce pictogramme: Cliquer + effet disparaître.
Etape 1: Ajouter une zone texte typo Roboto taille 24 et copier/coller le texte suivant en conservant les mots en gras à l'identique: Son objectif est de créer une première impression forte et positive afin d’établir une relation de confiance avec votre interlocuteur pour faciliter la vente. Etape 2: Positionner cette zone texte telle que sur l'exemple ci-contre. Etape 3: Ajouter à ce texte une animation automatque d'entrée + effet glisser et flêche droite + un début différé de 6 secondes + vitesse moyenne.
Etape 1 - ajouter une forme carrée et la redimensioner en rectangle horizontal. Couleur de la forme: Violet 29016B2 Etape 2 - copier/coller par dessus cette forme le texte suivant: Le vendeur débute par des questions ouvertes, puis il fait préciser son client par des questions fermées et alternatives. Etape 3 - typo du texte Roboto + gras - taille 22 - couleur Cyber jaune #FFD100
Reproduire le haut de page de cette slide selon les instructions récurrentes précédentes : - Voir slide 1 : boutons interactifs 5 et 6 - Voir slide 2 : boutons interactifs 1, 2 et 12
Etape 1: Ajouter une zone texte typo Roboto Italique et gras - taille 24 - Couleur blanc, puis copier/coller le texte suivant: "Vous n'aurez pas deux fois l'occasion de faire une première bonne impression" Etape 2: Positionner cette zone texte telle que sur l'exemple ci-contre. Etape 3: Ajouter à ce texte une animation automatque d'entrée avec effet glisser et flêche gauche + un début différé de 12,5 secondes + vitesse lent.
Etape 1 - Elément intéractif
Sélectionner l'élément intéractif et le positionner comme ci-contre. Pictogramme: Oeil dans rond. Modifier la Couleur: Rouge feu #FD4703
Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.
Etape 2: Révéler
Ajouter sur cet élément une interactivité Révéler en sélectionnant la forme et le texte ci-contre (à gauche) qui doivent apparaître en même temps.
Etape 1: Ajouter une image positionnée à gauche de la slide et selon la proportion indiquée sur ce modèle (+ ou - équivalent à 1 quart de page + format carré). Choisir une photo libre de droit dans la banque d'images Genially "vendeur magasin" fond Pixabay. Etape 2: Ajouter à cette image une animation automatque d'entrée + effet zoom + vitesse moyenne.
Etape 1: Ajouter une zone texte typo Roboto taille 24 et copier/coller le texte suivant en conservant les mots en gras à l'identique: La règle des 4×20 est une technique de communication qui permet de faciliter la prise de contact avec un prospect ou un client. Etape 2: Positionner cette zone texte telle que sur l'exemple ci-contre. Etape 3: Ajouter à ce texte une animation automatque d'entrée + effet glisser et flêche droite + un début différé de 1 seconde + vitesse moyenne.
Etape 1 - ajouter une forme carrée et la redimensioner en rectangle horizontal.Couleur de la forme: Canard bleu #008193 Etape 2 - ajouter une forme trianguaire et la positionner sur le bord gauche de la forme rectangulaire, comme présenté ci-contre. Couleur de la forme: Canard bleu #008193 Etape 3 - copier/coller par dessus cette forme le texte suivant: Les questions ouvertes permettent d'obtenir des informations et de laisser le client s’exprimer librement Etape 4 - typo du texte Roboto + gras - taille 20 - couleur Blanc Etape 5 - devant ce pavé forme + texte, ajouter le même élément intéractif qu'en point 2 et le positionner à la place du pictogramme 4, comme ci-contre. Pictogramme: Oeil dans rond. Modifier la Couleur: Rouge feu #FD4703 Etape 6 - ajouter une animation automatique sur ce pictogramme:En entrée avec effet apparaître et en continue avec effet battement. Etape 7 - ajouter une animation intéractive sur ce pictogramme: Cliquer + effet disparaître.
Etape 1 : Présenter les 4 pictogrammes récurents tels que sur le modèle ci-dessus. Couleur des pictogrammes: Vert tilleul #62BD19 Etape 2 : Indiquer leurs fonctions respectives avec les textes indiqués ci-dessus également et justifiés à droite. Typo: Roboto Taille: 19,5 + gras Couleur de la Typo: Canard bleu #008193 Etape 3 : Ajouter à la zone texte "Retour au début" une animation automatque d'entrée avec effet cadrer + un début différé de 4,5 secondes + vitesse rapide. Etape 4 : Ajouter à la zone texte "Retour au sommaire" une animation automatque d'entrée avec effet cadrer + un début différé de 5 secondes + vitesse rapide. Etape 5 : Ajouter à la zone texte "Page précédente" une animation automatque d'entrée avec effet cadrer + un début différé de 5,5 secondes + vitesse rapide. Etape 6 : Ajouter à la zone texte "Page suivante" une animation automatque d'entrée avec effet cadrer + un début différé de 6 secondes + vitesse rapide.
Etape 1 - Ajouter les 4 pictogrammes ci-contre et selon l'ordre et le positionnement ci-contre. Couleur des pictogrammes: Rouge feu #FD4703 Etape 2 - Ajouter une intéractivité fenêtre avec les textes suivants (de haut en bas):
- Picto 1: Ce pictogramme signale un enregistrement audio à écouter lorsque vous serez sur une page qui présentera cet élément intéractif dans le 2e petit carré vert en haut à droite. Il vous suffira de cliquer sur ce pictogramme pour que l'enregistrement audio démarre.
- Picto 2: Ce pictogramme signale une vidéo à regarder lorsque vous serez sur une page qui présentera cet élément intéractif dans le 2e petit carré vert en haut à droite. Il vous suffira de cliquer sur ce pictogramme pour que la vidéo démarre.
- Picto 3: Ce pictogramme signale un apport complémentaire à découvrir lorsque vous serez sur une page qui présentera cet élément intéractif dans le 2e petit carré vert en haut à droite. Il vous suffira de cliquer sur ce pictogramme pour que l'apport apparaîsse.
Etape 3 - Ajouter une animation automatique sur chacun de ces 4 pictogrammes: En entrée avec effet zoom et en continue avec effet battement.