Major Assignment 3: CBI and Design Document (35%)

This assignment has four parts:

  1. Design Document
  2. Flowchart
  3. Storyboards
  4. CBI

1. Design Document

First you will write a design document that will explain and describe your computer-based instruction (CBI). The CBI should be described as having approximately 25 to 30 screens, as a general guideline.

Your design document, not counting the storyboards and flowchart, will be 900 to 1200 words for the body of the paper. In addition to the 900 to 1200 words you may also include charts, figures, graphs, etc. and you must have a references page. All this will be HTML, and will be posted on the web and linked to your launch page.

Here is are two good examples of design documents, and their accompanying flowcharts and storyboards:

When you prepare your design document, you will need to address the following items. Use the numbered items below for headings in your design document:

  1. Type of computer-based instruction (tutorial, simulation, game or combination);
  2. Description of subject matter and content of your particular CBI (for example: calculus environment, genetics simulation or computer programming game);
  3. Description of target audience and their learning characteristics (e.g., 11th grade Biology students) 
  4. Description of learning objectives (what they will learn);
  5. Description of learning principles. What is the theoretical basis for your instructional activities? This should be substantial, and should have at least three references cited.
  6. Description of how your CBI fits into an overall course of study, and strategies to integrate your lesson into an overall course of study
  7. Flowchart (saved as a GIF or JPG)
  8. Storyboards (in the format I provide). 25 to 30, one for each screen or scene in your CBI.

2. Flowchart

A flowchart is a diagram that shows how a user will navigate through your CBI. There are other kinds of flowcharts, but this is the type you will create. If you are unfamiliar with flowcharts, here's a good place to start. View these 12 examples of kinds of flowcharts at smartdraw.com. Note that you can view each of these in full size by clicking on it, such as this example.

It is important that you create your flowchart first, as you plan your CBI. This forces you to decide the main components of your CBI, and what interactions it will contain. You must do this planning and flowcharting before you ever start working on the project itself. This is how an effective instructional project is developed.

To understand the basics of flowcharts, first read this introduction to the basic types of navigation in flowcharts.

Next, read this explanation of flowchart symbols for designing software. Note that you will not need to use all of these symbols, but you will definitely use many of them, and you must follow common flowcharting conventions so the viewer can understand your flowchart.

Now, study this example of a flowchart for a simple interactive program.

You will create one flowchart diagram which shows how the user may navigate through your CBI. To learn about flowcharts see these examples:

Use a dedicated flowchart or drawing program, which will help you incorporate standard flowcharting symbols instead of trying to draw your own symbols. My experience with students indicates the drawing tools in PowerPoint, Excel, and Word are not very effective for creating good flowcharts. It can be done but is quite difficult to create good flowcharts with these Office tools. Again, based on experience, I suggest a dedicated flowchart tool. If you do not have one, I recommend these that have 30-day free trials you can download:

For Windows users:

  1. SmartDraw (an excellent program with an excellent tutorial on how to create a flowchart)
  2. Inspiration

For Mac Users:

  1. Omnigraffle (an outstanding program)
  2. Inspiration

Save your completed flowchart as a GIF or JPG and upload it to the Web, and link it to your Design Document narrative and your launch page. Note: if you use a Microsoft Office program, save your chart as a GIF or JPG. Do not "Save as Web Page". In other words, do not create an HTML document from a Microsoft Office program. Office programs create non-standard HTML.

3. Storyboards

Storyboards are visual representations of what your end user (learner) will see on the computer screen. They are small sketches of your final project screen design. They are tiny versions of what your screens will look like. You create them in the planning stage of your project. You as the designer create these so that you or the client or both can see what the project will look like before it is actually created. Storyboards are meant to be a time-saving device. If the client doesn't like the storyboard, you haven't invested so much time that you cannot start over with another concept.

Storyboards are also useful when working with a team. A picture is worth a thousand words--meaning, you can describe what you are going to do, but it is better to show me.

Designers and creators from many fields use storyboards. Here a storyboard from an animation masterpiece--yes, the Flintstones. Here's a storyboard from a planned video shoot of a talk show. Here's one for a planned instructional software program, similar to what you will do, and another about how to start a car.

Here is a template in Microsoft Word you can use as a guide. Your storyboards should be six per page, as in the template. Each large box represents a screen, just like what you see in this example. Use this template, or something very much like it. That is, you can create your own template but it should look a lot like this first example.

You will create 25 to 30 storyboards--roughly one for each "screen" in your CBI. Use a template like the one above, where you put six storyboards on one page. Do not spend a large amount of time on these storyboards (I suggest no more than four hours total). They are only sketches of the look and feel of the final product. If you have repeating elements, you can sketch them in detail on one storyboard, and that is sufficient.

I suggest you sketch your storyboards on paper, then use a scanner to scan them and save as a JPG to post to the Web. Some people are reluctant to draw anything, which is unfortunate. I will allow you to create your storyboards with a drawing program if you prefer. I recommend sketching by hand because I think it is faster and easier. From a prior student project:

4. CBI

You will then create a web-based instructional product, based on the design document above. It can be a tutorial, simulation, or instructional game, as defined by and using methodologies discussed in Alessi and Trollip’s text. This instructional product should be focused on only one or a few learning goals.

You will use an HTML editor and any other supporting tools, and the final product will be HTML-based. If you are an advanced developer and would like to use another advanced authoring tool, contact me for permission. Otherwise, your CBI must be HTML-based and viewable in a browser.

Your CBI will include:

  1. at least 25 screens, but no more than 30 unless absolutely necessary.
  2. a main menu or "home"
  3. a "directions" or "help" screen
  4. the instructional content or environment and activities
  5. an opportunity for learner practice (or something like it)
  6. a review section or quiz (that is, some kind of assessment)
  7. appropriate text and images
  8. At least five, but no more than ten links to external web resources
  9. a clear, consistent, and understandable navigation scheme

Your product will be at least partially non-linear. A straight"page-turner" is not acceptable. Post your project on the web, and link it to your launch page, including the storyboards and flowchart. Here are some some CBI examples: