Description, examples and tips on how to produce quality storyboards
Document summary
All MATTER computer-based software is developed from sets of detailed paper-based plans - or storyboards - which are provided by subject matter experts (SME) such as academics, teachers, industry specialists, etc. This document provides a set of guidelines on how to produce good storyboards, by providing the following information:
 | list and explanation of the key elements of a storyboard, |
| illustration of some of the techniques available to our development team, |
| worked examples, |
A 'blank' storyboard template is also provided at the end.
Contents
Rationale
Learning outcomes
Assumed pre-knowledge
Screen layout
Additional resources
Useful user-interface techniques
- Experiments
- Graph-plotting
- Drag and drop
- Equations and derivations
- Self-assessment exercises
- Common user-interface controls
Back to top
Key elements of a storyboard
A good storyboard comprises the following:
| A rationale or brief statement of what the 'package' is; |
| A set of verifiable learning outcomes, stated in terms of the user and specifying any conditions; |
| Any assumed pre-knowledge; |
| A visual representation of the screen layout (i.e. user interface) and how this layout might evolve during interaction. You will sometimes need several "pages" of storyboard for one "screen" of software; |
| Any underlying data, equations or information that a developer would need in order to build the program; |
| Ideally, any resources, such as images or video, to be included. |
Examples of each are provided in the next section.
Back to top
The key elements explained...
Rationale
What is the module/unit about? Why should the user learn this? Where does it fit into the course/curriculum? (3 sentences maximum).
| Example This section introduces the basic concepts of interstitial diffusion in crystalline materials. It includes derivations and solutions for Fick's first and second laws and also shows how diffusivity, D varies with temperature. (From Atomic Diffusion in Metals & Alloys, section 1) |
Back to top
Learning outcomes
State in specific terms what the learners will be able to do as a result of studying the material. These statements:
| are stated in terms of the learner. |
e.g. "You will be able to…" and not "This is what we'll do…"
| contain an active verb which permits external verification. |
e.g. explain, describe, list, state, prove, derive, manipulate, relate, differentiate between, etc.
| specify any conditions to the attainment of the objective, if relevant. |
e.g. "assuming zero air resistance, show that….", "given that V=IR, obtain an expression…", etc.
| state the standards of successful attainment, if relevant. |
| Example After completing this section, you should be able to:
(From Young Modulus, currently under development) |
Back to top
Assumed pre-knowledge
Indicate the "entry level" to the software by stating any knowledge or skills you assume the user to already have. In addition to the chosen subject area, it is useful also to state what level of mathematics will be required, such as simple algebra, polynomial curve fitting, differential equations, etc.
If there are technical terms you think a user might like to check out before starting, provide short definitions that can be accessed through the glossary.
| Example Before starting this section, you should be familiar with the concept of force and its SI unit, the Newton (N). The measurement of the Young modulus only requires very basic mathematics. You will also need to know how to read a vernier scale. (From Young Modulus, currently under development) Before starting, it is important that you are familiar with the following terms: dislocation, solid solution, stress, strain. (From Aluminium Alloys: Strengthening, section 3) |
Back to top
Screen layout
MATTER is currently developing its software for delivery via Internet browsers such as Netscape Navigator and Microsoft Internet Explorer. Typically, any one page would contain the following:
| a title and standard web navigation buttons, |
| an area of text (informational, instructional and/or interrogative), |
| an area of graphics (i.e. in the form of a Java applet). |
The layout and proportions of the text and graphics is very flexible, although you should avoid too much text. In your storyboard include all the text and graphics, if necessary using a number of different storyboard sheets to show how the screen develops with different user interactions. Highlight any glossary links and hyperlinks in the text.
In addition to the on-screen text, you will often need to write instructions to the developer (e.g. show graphic 3 when this button is clicked). Do this in another colour.
If the screen looks too "busy" consider building it up over a number of successive pages. The example storyboard pages which follows shows how this should be done.
| For each and every concept or piece of information presented to the
user, you should include a self-assessment exercise which allows them to test whether or
not they have understood or assimilated it. Remember, wherever possible, follow the motto: "ASK, DON'T TELL!" |
Sample storyboard page showing Young's Double Slit experiment. Note the
instructions to the developer (in red) and the hyperlinks to "back-up" pages -
click on these to view.
(Storyboard author: Claire McIntyre).
Back to top
Additional resources
Don't forget to include any diagrams, photographs, micrographs, video, algorithms and data required to complete the software package.
| If you want to include third party images or video, please ensure that you include the source reference. Where possible, MATTER will try to arrange copyright clearance with the owners of the resource. If unsuccessful, we may need to consider alternative resources. |
| Although the MATTER development team has a very strong scientific background, it is
important that you include any algorithms or data that might be required, say, to drive a
simulation (experiment, process, etc.). This will speed up development time and reduce the
risk of errors in the coding.Back to top |
Useful user-interface techniques
Text
Most people dislike reading large amounts of text off-screen, and so we suggest you keep your text to a minimum.
| Don't elaborate too much on any particular concept, |
| Don't try and cram too many words onto one page. Build up difficult concepts over a succession of pages. Unlike books, white space on screen costs nothing and should be used liberally, |
| Don't forget to include plenty of self-assessment exercises. Remember, wherever possible, ASK, DON'T TELL. |
| Do provide glossary definitions to reduce the amount of initial on-screen text. A highlight from the main screen can be used to bring up the glossary window; |
| Do think about hiding additional explanatory text (phrases, sentences or paragraphs) in a similar way. They can pop up in an extra "window" as and when the user requires. |
| Do include hyperlinks to other pages. These can be pages that were covered earlier in the package, additional pages providing backup information, and pages included elsewhere in the MATTER software. |
|
|
Back to top
Graphics
The advantages of computer-based delivery of teaching and learning materials really starts with its graphics capabilities. For the purposes of storyboarding, we can classify graphics in increasing order of complexity as (i) static, (ii) animation and (iii) simulation.
Static graphics
These can be very useful to embellish the software, but due to their inherent lack of interactivity, should not form the backbone of the package.
Active graphics and image maps
Graphics can be made to respond to user-controlled events, such as mouse movements and clicks. Graphics could therefore be used as a visual menu, navigation, and also multiple-choice activities, etc.
Animations
The next step up from static graphics are animations. By this, we mean a series of graphic images or "frames" that are run in sequence to give the concept of movement, change, progress, etc. Like videos, animation always run in a linear fashion and "play" in an identical manner whenever they are "run". Again, animations can be very useful in software of this type, but really offer little more in the way of real interactivity than a static graphics.
Simulations
Good simulations provide the maximum level of interactivity in that they allow the user to explore a concept, process, relationship, etc. by changing input parameters and watching the outcome in a graphical representation. The potential range for simulations is limitless. However, here are a few "components" which you might like to consider when designing your simulation:
Back to top
Video
To date, MATTER has only made limited use of video clips, due largely to the fact that the specifications and configurations of our end-users' machines are only just beginning to reach a level that can handle this format. If you have a specific need for video within your storyboard, we would discuss this with you on an individual basis.
Back to top
Pen & paper
Finally, let's not overlook these important "tools". Instead of automatically storing and re-using data in the program, why not make the user write down key parameters, data, etc. where it is generated and then input it back in at a later stage (i.e. further processing, plotting, etc.). A data sheet which can be printed out can be included for this. In this way some permanent record of the computer session can be achieved.
This page can be printed or copied and the experimental data, calculations and result recorded. This provides a valuable hard copy record of the session.
Back to top
Adding user interactivity
The number of ways to add interactivity to our software is potentially limitless. Here are some methods we have adopted in the past.
Experiments
Re-create experiments on-screen. Let the user select and operate the apparatus, change specimens and parameters as they would in real life. Build in sensible randomisation so that no two experiments are ever identical. Provide data sheets for the user to print and record measurements, etc. Make sure that there is a clear end-point - for example let the user compare his/her result with suggested values.
Back to top
Graph-plotting
| Plot algebraic relationships, |
| Let users change parameters to see how they affect the shape of a graph, |
| Plot data points on graphs (i.e. from experiments, calculations, etc.), |
| Get users to "pick up" data from graphs. |
Show how changing values affects the shape of a graph |
Click at the right point on a graph |
Back to top
Drag and drop
Get the user to move things around the screen by dragging and dropping.
Back to top
Equations and derivations
Relate equations to the physical world to which they belong. Use colour to separate different parts of an equation.
Back to top
Self-assessment exercises
Multiple-choice questions
| Which statement is correct? |
| Which is the best explanation? |
| Which graph best describes…? |
| Which image is a ……? |
Back to top
Matching
| Match the statements on the left and right hand sides. |
| Place the following captions with their corresponding images. |
Back to top
Identifying
| Part of an image (e.g. apparatus, multi-component structure, etc.) |
| Point on a graph (e.g. maximum value, where x=50, etc.) |
Sorting
| Objects, processes, values, etc. in the right order |
Back to top
Common user-interface controls
Buttons
To initiate an event.
Sliders
To allow the user to select from a range of values. Slider bars can be horizontal or vertical and can be either fully continuous, or "snap" to discrete values.
Temperature 
550°C
Back to top
Choice menus
To allow the user to select from a number of items.
Check boxes
To allow various options to be switched on or off.
Radio buttons
To control mutually exclusive options.
|    Back to top |
