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.
Pen & paper
- Drag and drop
- Equations and derivations
- Self-assessment exercises
- Common user-interface controls
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 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.
What is the module/unit about? Why should the user learn this? Where does it fit into
the course/curriculum? (3 sentences maximum).
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,
State in specific terms what the learners will be able to do as a result of
studying the material. The learning outcomes should:
- be stated in terms of the learner. (e.g. "You will be able to
" and not "This is what we'll
- 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,
.", "given that V=IR, obtain an expression
- state the standards of successful attainment, if relevant. (e.g. "calculate g to within 2%".
completing this section, you should be able to:
provide a definition of the Young modulus and give its units,
explain the terms tensile force, tensile stress, tensile
strain, elastic, strong and stiff,
differentiate between the terms strength and stiffness,
determine the Young modulus experimentally by:
describing the apparatus,
measuring the key dimensions of the test wire,
using a vernier scale to measure the extension of the wire,
generating a straight-line graph of extension vs. mass,
evaluating the gradient of the graph,
calculating the Young modulus by substitution into formulae.
(From Young Modulus)
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.
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,
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
- 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
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
|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.
(Storyboard author: Claire McIntyre).
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.
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
- 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.
Use glossary entries for technical terms instead of fitting into main text
Pop-up boxes are used to add additional, non-essential information
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)
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.
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.
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:
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.
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
The number of ways to add interactivity to our software is potentially limitless. Here
are some methods we have adopted in the past.
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.
- 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
Get the user to move things around the screen by dragging and dropping.
Relate equations to the physical world to which they belong. Use colour to separate
different parts of an equation.
- Which statement is correct?
- Which is the best explanation?
- Which graph best describes
- Which image is a
- Match the statements on the left and right hand sides.
- Place the following captions with their corresponding images.
- Part of an image (e.g. apparatus, multi-component structure, etc.)
- Point on a graph (e.g. maximum value, where x=50, etc.)
- Objects, processes, values, etc. in the right order
To initiate an event.
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.
To allow the user to select from a number of items.
To allow various options to be switched on or off.
To control mutually exclusive options.