Blog Post

Articles
4 MIN READ

What to Include in an E-Learning Storyboard

CommunityTeam's avatar
11 years ago

As the blueprint for a course (with all the details about content, multimedia, and assessments), storyboards are an important piece of the e-learning design process. However, they’re tricky to develop because there’s no set template or content required to make one. So, how do you know what to include?

In some cases, a storyboard might be visually rich and closely resemble the final output. Other times, it’s a simple text document that doesn’t provide much indication of what the product will look like. In addition, the tools used to develop storyboards can vary widely, from PowerPoint to Word or even Storyline 360.

The format, look, and content of a storyboard depends on the stakeholders on the project team, how familiar your stakeholders and audience are with e-learning, and what type of content and interactions your e-learning course includes.

For example, if you’re designing and developing a course without the help of a Subject Matter Expert (SME), your storyboard doesn’t need to be very descriptive or include detailed notes for the developer (since you are the developer).  

However, if you’re handing off the storyboard to someone else to develop, you’ll need to include clear and descriptive instructions. 

So, while you’ll rarely see two storyboards that are exactly alike, there are some basic best-practice items that most storyboards include, regardless of how the project is staffed. Let’s have a look.

Screen ID

A fundamental thing to include in your storyboard is an identifier or a screen ID. This should be present on each slide, so you can easily identify content and slides in the course. You might not want the screen ID to appear in the final output, but it’s definitely handy to have it visible during the editing and review stages.

Also, carefully consider how you want to number your slides. You’re going to end up removing and adding slides throughout your project, so your numbering scheme should be able to accommodate that. Speaking from experience, there’s nothing worse than moving or deleting a slide and having to manually renumber everything that follows.

Text

Your on-screen text delivers information to your learners—so it’s a critical component that needs to go in your storyboard. Be clear about how to format and position the text on the screen. And remember to edit for spelling, grammar, and language so the developer can simply copy and paste the text from your storyboard into the e-learning course without having to edit it.

Images

The graphics included in an online course also communicate important information. If you’re developing a more visual storyboard, you might choose to include the actual photo or an image placeholder. If you’ve already selected an image, be sure to include notes to the developer about where to find it. 

Once you choose an image for a course, set up a shared folder for media with clearly labeled files. Then, in the storyboard, tell the developer which files to pull from the shared folder to use on each specific screen.

If you’re relying on your developer to both choose and insert your graphics, you’ll need to include detailed instructions on the tone, feel, and context of the images you want. 

Narration and Audio

Audio can add variety and interest to web-based training. If you plan to include narration, add the narration script to your storyboard, as well as notes for how to sync it with on-screen text. Be sure to also include details about the type of voice talent you want.

If you’re using other types of audio, such as sound effects or background music, consider selecting specific clips in advance. Then, in your storyboard, let the developer know how to access the specific file through a shared folder (like we did with our images).

Navigation

You don’t want your learners getting lost trying to navigate your course. Confusing navigation distracts learners and gets in the way of their experience. When in doubt, simple is best. Have your course developer create a clear click path through the course using Previous and Next buttons. If your topic requires complex branching paths linking to various screens, make sure you include clear, concise instructions for the developer about how navigation should work on each screen.

Once everything is set up, take the time to navigate through your course. Do your Previous and Next buttons link to the right slides? Are the on-screen buttons easily noticeable and clear in their function? When a stakeholder or e-learning developer looks at your storyboard, the navigation should be crystal clear.

Animation and Transitions

Finally, animations and transitions add visual interest that sets your course apart. Just keep in mind that, if you plan on using animations, you’ll need to determine how they look and feel in the course by actually watching them. You can proceed without final animations; just make sure you give the developer clear notes about the timing of the objects and types of animations or transitions to use.

Wrap-Up

No two storyboards are the same, but most include the basic items covered here. It all depends on your specific project and its requirements.

Want more storyboarding advice? Check out these articles: 

Do you have any tips of your own for what should be included in a storyboard? If you do, please leave a comment below. We love to hear your feedback!

And remember to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

Published 11 years ago
Version 1.0
  • MaryLacroix's avatar
    MaryLacroix
    Community Member
    This is great -- thanks!

    I use a decimal numbering system in the storyboard that maps to the course structure. Pages in [Topic/Scene 2] are numbered 2.1, 2.2, 2.3, etc. If a new slide is added, some re-numbering is required for that topic in the storyboard, but it's much more manageable than re-numbering all subsequent pages.

    This is especially useful when building in Storyline because slides within scenes are numbered this way in my editing view. If I turn on the menu for the published output during review (even if it isn't used in the final course) the numbering option there makes it very clear to my SME which slide is which without needing to add any page numbers directly to each slide.
  • Dave - For example, in the past instead of numbering slides 1, 2, 3... etc., I've numbered them 10, 20, 30, 40, etc. This way, if I need to drop in an additional slide or two after slide 20, I can just call them slide 21 and 22, I don't need to renumber all the slides. It's just about giving yourself some flexibility for later down the road. Hope this helps!
  • DaveNeal1's avatar
    DaveNeal1
    Community Member
    Really nice post, Nicole. Great, useful information. I'll be keeping this article handy as a resource for my next projects.

    One question; you mention to be careful about the type of slide numbering used. Can you be more specific? I get the idea, I think, but I'm not clear on how to avoid the problems you allude to.

    Thanks again,

    ~Dave!~
  • Yes, yes, yes! To screen ID - this is overlooked so often, but during the review stage, it makes life INFINITELY better :P