download StoryboardTemplateV9.doc (revised June 2010)
download SampleStoryboard.pdf

Get Ready

  • become familiar with the instructional trajectory of the Cluster
  • digest the Critical Learning for the CLIP
  • if this is a Consolidation activity, think about how the user can demonstrate understanding of the Critical Learning
  • if this is an Action activity, review the Consolidation activities, think about what a student needs to do to prepare for the Consolidation activities
  • if this is a Start activity, review the Action and Consolidation activities, review suggestions for Start (Minds On) activities (see chart on the page What are CLIPS? )


  • ideas for the instructional flow - use paper/pencil, Smart Ideas, stickies, etc.

Create Scenes (Chunks of Learning)

  1. Separate your ideas into chunks of learning that we will call scenes for now.
  2. For each scene, picture what is on the screen when you reach the end of the scene (i.e., the final frame). The Continue button is now showing and the user has an opportunity to spend as much time as he/she desires on this final frame before proceeding to the next scene. Consider whether the last frame contains a digestible amount of information (more scenes are preferable to fewer scenes when the smaller number of scenes are crammed with information and interactivity).

Scene Notes
  • the user can press a Replay Scene button to return to the beginning of the scene (the first frame) - this information might help you decide how much learning and action takes place in one scene
  • ultimately the contents of one scene are determined by the e-developer (e.g., if the value of a variable needs to be carried from one scene to the next scene, the e-developer might choose to merge the two scenes)
  • don't spend too much time thinking about where a scene starts/stop - it is more important to clearly describe the visuals, interactions and feedback
  • some scenes can be thought of as single frames (see Figure 1)


Create a Storyboard for each Scene

Figure 1 was produced from a scene in a completed activity - it is much more polished than it would have looked as it left the hands of the storyboarder to the e-developer but notice how instructions can be given to the e-developer (both on and off the screen/stage).

Multi-framed scenes can be built by layering

1. Draw/write what appears on the first frame when the scene begins. Do this in a rectangle that represents the screen.
2. In the rectangle, add the next screen object(s) that appear and number them <1>. The brackets indicate that its contents are part of the storyboarding and will not actually appear on the screen. Below the diagram note any special instructions. (e.g., <1> This object fades in.)
3. Continue adding and numbering screen objects. Include additional information below the diagram. (e.g., <2> appears when the user presses the Check button; or <2> appears 2 seconds after <1>; or <2> appears in synch with the audio "look at the ...".) If more than one object appears at the same time, put the same number beside each object. If there are differences in the way that these objects appear, state the differences in your notes below the diagram.
4. If you ask the user to do something, specifically state the desired feedback and/or programmed reactions. See the ProgrammedFeedback diagram for more information and suggestions. (Feedback templates are included in the Storyboard template).
5. You may need more than one screen/stage diagram to continue your storyboarding. Start a new page and call this Frame 2. (FYI - the word Frame is also used by Flash progammers but its meaning in that context is different than in the storyboarding context. If you want know what a Flash frame is, visit this link and choose Workspace then Timeline in the left menu options.) A new frame might be needed to show visual changes from the previous frame (e.g., appearance order, size, shape, colour, location, path).

Development Notes

  • hand drawn (and scanned) images are acceptable – do not spend a lot of time creating works of art that will be recreated in Flash; include only as much detail as required for the e-development. A storyboard page can reference an attached picture or file.
  • in most cases the activity must not depend on audio (some users will not have audio capability on their computers)
  • e-developers will determine when the ‘Continue’ button will appear unless specifically noted in the storyboard
  • struggling learners benefit from using a variety of literacy strategies
  • video can be included to explain complex interactions
  • place information so a screen is read from left to right; top to bottom
  • squint when looking at the screen diagram to help you see if there is sufficient white space
  • do not expect users to watch animations while reading text
  • it will be helpful to the e-developers if you add subtitles to the notes area (sample subtitles: Feedback, Interaction, Appearance of Objects)
  • each storyboard includes at least one page for each scene
  • e-learning activities can have many variations so it is difficult to use one standard template for a storyboard - each page is basically a rectangle that represents the screen/stage and a notes area below the rectangle

Identification Information for the Storyboard
  • Cluster number, CLIP number, Activity number (e.g., C003_C04_A01), Activity Title
  • names of storyboarders
  • page number, Scene number, Frame number
  • once the storyboard starts going through a review cycle, version numbers and reviewer names will be added
  • do not use copyrighted images, videos or sounds

Recommendations from Learn Alberta Functional Design Guidelines page 11:

Transitions can be very effective if they are used well. Unfortunately transitions can be extremely distracting if overused or used inappropriately. For example, some writers and designers feel that it is necessary to build every screen by adding one element at a time by means of transitions. A different transition is used to add each new element, with the result that headings slide onto the screen from one direction, buttons bounce into place, the graphics scroll, and the text fades in. This can become overwhelming very quickly. Because screen elements are added one at a time, it can take several seconds for the entire screen to be drawn. While this is going on the learners must try to make sense of the multiple transitions taking place, and wait for the effects to finish and for screen elements to stop moving and shaking before they can even start reading the screen. Using transitions to build every screen, or when moving from screen to screen has little or no value, and merely adds to the development time and cost.
Transitions can be effectively used to gradually reveal a part of a machine or object that is normally not visible, or hiding a screen element that is no longer required. Other examples of effective use of transitions include showing changing states in chemical reactions, effects of heat and pressure, adding pieces to existing structures, illustrating process, showing flow or movement, showing elapsed time, illustrating the effects of aging, creating copies of objects, etc. There are many other examples of appropriate use.
Drawing an entire screen and then displaying all elements at once without transitions should be the default.

Colour Blind Users
Excerpt from Learn Alberta Functional Design Guidelines page 8:

Be aware of the issues related to colour-blindness, as about eight percent of men and one percent of women are colour deficient. When choosing and especially when using text references to colours, appreciate that approximately 1 in 12 learners may have some sort of colour blindness.

Red-green deficiency is by far the most common form of colour-blindness (about 99%). It results in the inability to distinguish certain shades of red and green. There may be issues when using red and green on the same screen where learners are required to distinguish between these colours. For example, if a colour-blind learner is asked to click and drag the green objects to area A, and the red objects to area B, they may not be able to identify these objects by their colour. Similarly, there could be problems when a narration refers to “the red line” on a graph when a green line is also present. Guard against depending on colour cues in feedback, for example using red text to indicate incorrect feedback and green text for correct feedback.