MATTER home

Guide for storyboard authors

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.

Contents

Key elements of a storyboard

The key elements explained

Rationale
Learning outcomes
Assumed pre-knowledge
Screen layout
Additional resources

Useful user-interface techniques

Text
Graphics
Video
Pen & paper

Adding user interactivity

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. 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 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. (e.g. "calculate g to within 2%".

Example

After 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)

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

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.

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.

Use glossary entries for technical terms instead of fitting into main text

Pop-up boxes are used to add additional, non-essential information

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

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

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.

Back to top

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.

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

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