1. Navigation, Storyboards, and Prototypes
Instructional Design for eLearning
Instructor: Scott Nipper
Certificate Program
Welcome to Navigation, Storyboards, and Prototypes.
Today we will focus on storyboards and graphic design principles, next week we will focus on prototypes

2. ID for eLearning Certificate Program Structure
Class Title Length CEU
Instructional Design for eLearning hr. .7
Analysis and Planning hr. 1.4
eLearning Technologies and Methodologies hr. 1.4
Designing Instructional Content hr. 1.4
Navigation, Storyboards and Prototypes hr. 2.1
Practicum: Learning Object Design and Development 21 hr. 2.1
Total 91 hr. 9.1
Course Name: Navigation, Storyboards, and Prototypes
Program Name: Instructional Design for eLearning Certificate Program 2

3. Course Objectives Day 3 List 10 Principles of Usability
Apply web design principles to present content online
Describe effective uses of visual elements
Create a navigation flowchart
Create a storyboard for a web-based learning object
Describe the characteristics of interaction specifications
Define interactivity
Develop support materials
Compile a design package for development
Course Name: Navigation, Storyboards, and Prototypes
Program Name: Instructional Design for eLearning Certificate Program 3 3

4. Prototype
A first or preliminary model of something from which other forms are developed or copied.
An original type, form, or instance serving as a basis or standard for later stages
“some representation of a design idea”
Dave Cronin, Adobe Systems
Course Name: Navigation, Storyboards, and Prototypes
Program Name: Instructional Design for eLearning Certificate Program

5. Activity – 90 minutes Work individually
Use your developed storyboard as a guide
Create a prototype
Use MS PowerPoint
Share with class
Discuss

6. Why Use Prototypes Helps facilitate development
Can save time
Get your ideas on “paper”
Provides a visual representation of flow, structure, and sequence
Helps plan where elements are placed on screens, where each lesson fits
Helps with consistency and contiguity
Identify navigation requirements
Identify gaps or opportunities in learning
Get a feel for what and how users will see content

7. When to use Prototypes Part of the Design phase After:
Development of initial content ideas
Task and concept analysis
Preliminary program description
Preliminary flowcharts
Preliminary storyboard

8. How to use Prototypes Prototypes are usually in a form that can
Show how interactivity works
Demonstrate the learning that can take place
Illustrate true gaps in learning, interactivities
Identify development area issues
May require additional resources
May require re-design
How it Works All you need is a screen image capture tool, such as SnagIt, an image editing tool, such as Photoshop, and MSWord. Here are the steps for really fast storyboarding:
Use SnagIt to take a screenshot of the approved screen templates for your E-learning project. The screenshot should include the entire E-learning screen, with all standard buttons, banners, footers, and navigational tools.
Import the saved image into the header of an MSWord document. Use the FORMAT PICTURE option to set the image to “FLOAT OVER TEXT.” Also, increase the BRIGHTNESS of the image so it is barely visible in the document.
Close the header and go back to the PAGE LAYOUT document view. You will see the template in the background of your MSWORD document.
Set the margins, header, and footer of the MSWORD document so that the page accommodates only enough text to fit within the template.
Use CUSTOM STYLES to set the text size, font, and other attributes to match your project requirements.
Now the writing can begin. As instructional designers generate the content in MSWORD, they will see the E-learning template in the background. In addition, MSWORD will automatically wrap to the next page/screen when available space on the current page/screen is exhausted.
Some Other Ideas
Paste image comps directly into MSWORD for approval.
Use MSWORD CALLOUTS and COMMENTS to indicate popups, glossary terms and definitions, and other interactions.
Use the REVIEWING TOOLBAR to request and approve of changes.

9. Types of Prototypes Paper prototypes Digital prototypes
Digital prototypes
PowerPoint
Industry trends, blogs, and articles on prototyping
How it Works All you need is a screen image capture tool, such as SnagIt, an image editing tool, such as Photoshop, and MSWord. Here are the steps for really fast storyboarding:
Use SnagIt to take a screenshot of the approved screen templates for your E-learning project. The screenshot should include the entire E-learning screen, with all standard buttons, banners, footers, and navigational tools.
Import the saved image into the header of an MSWord document. Use the FORMAT PICTURE option to set the image to “FLOAT OVER TEXT.” Also, increase the BRIGHTNESS of the image so it is barely visible in the document.
Close the header and go back to the PAGE LAYOUT document view. You will see the template in the background of your MSWORD document.
Set the margins, header, and footer of the MSWORD document so that the page accommodates only enough text to fit within the template.
Use CUSTOM STYLES to set the text size, font, and other attributes to match your project requirements.
Now the writing can begin. As instructional designers generate the content in MSWORD, they will see the E-learning template in the background. In addition, MSWORD will automatically wrap to the next page/screen when available space on the current page/screen is exhausted.
Some Other Ideas
Paste image comps directly into MSWORD for approval.
Use MSWORD CALLOUTS and COMMENTS to indicate popups, glossary terms and definitions, and other interactions.
Use the REVIEWING TOOLBAR to request and approve of changes.

10. Activity – 90 minutes Work individually
Pick a topic from the Prescribed Projects list for which you don’t have a storyboard
Create a prototype
Try paper prototyping if you want
Or use PowerPoint
Share with the class
Discuss
This activity is designed to show that you can do prototyping BEFORE storyboard, i.e., the prototype serves both as the prototype AND the storyboard.

11. Prescribed Project Topics
Choose One
Make a Sandwich
Change a Tire on a Bike
Plant a Tomato Plant
Clip a Dog’s Toenails
Change a Baby’s Diaper
Topic choices are meant to be simple, to learn the process and begin using forms.
Students should think of them as one learning objective, i.e.,
Make a quality (edible) peanut butter sandwich in 5 minutes or less.
The primary target audience might be 5-year olds, but there may be secondary or tertiary audiences. (hence the learner characteristics form)
Students shall pick one Prescribed project and manage their work/forms accordingly. However, there will be opportunities to work in pairs and groups. Students are always encouraged to help/support each other through the learning process. 11

12. Interactivity
Interactive - providing output based on input from the user. This output feeds back into the user's decision process for subsequent interaction. Interactive websites, for instance, allow for more dynamic information browsing and applications such as shopping, banking, etc.
cyber.law.harvard.edu/readinessguide/glossary.html
Interactive Hardware and software systems which can respond to input from users: minimally, by offering a limited range of options and choices; ultimately, by providing a variety of resources which allow users to act spontaneously and react constructively, to explore a body of knowledge and create a dialogue between the user and the system.

13. Instructional Interactivity
The basic concept of interactivity is about how elements are used
E.g., click the mouse, drag an icon
Instructional interactivity makes people think
Instructional interactivity is:
Instructional interactivity is not the same as
Navigation
Buttons
Scrolling
Browsing
Clicking
Paging
Animation
Morphing
Video
These items are used in creating instructional interactivity but they can, and are, frequently used in ways that do not result in the types of interactivities needed to achieve success. They are often promoted as evidence of interactivity but do not, by their presence alone, denote instructional interactivity, or the lack of it.
Instructional interactivity does more than result in an external, observable event. It also results in recall, classification, analysis, and decision making – that is, thinking.
“Interaction that actively stimulates the learner’s mind to do those things that improve ability and readiness to perform effectively.” – Michael Allen

14. Specifications for Interactions
All interaction requires the learner to do something, take some action
This action sets in motion activity
The designer needs to be able to articulate to the developer what that activity is
i.e., how that interaction should work
That description, or specification, needs to be spelled out somewhere
Storyboard, prototype, navigation map, outline, etc
Wherever it makes the most sense for you and the developer

15. Example of Interaction Specification
If designing a simple interactive element like a multiple choice quiz, include such details as:
Question
Possible answers
Whether feedback appears immediately, or if the user needs to click a “score” button
Feedback text/imagery/media for correct answers
Feedback text/imagery/media for incorrect answers
Score storing
Number of tries
Anything else the learner may do

16. Four Elements of Interactivity
Context – the framework and conditions
Challenge – a stimulus to act within the context
Activity – a physical response to the challenge
Feedback – a reflection of the effectiveness of the learner’s action

17. Interactivity
Instructional
interactivity

18. Presentation versus Interactivity
Choose presentations when:
Choose Interactivity when:

19. Ways to Enhance Learner Motivation
Build on anticipated outcomes
Help learners see how their involvement in the elearning will produce outcomes they care about
Put the learner at risk
If learner have something to lose, they pay attention
Select for each learner the right content
If it's meaningless or learners already know it, it's not going to be an enjoyable learning experience
Use an appealing context
Novelty, suspense, fascinating graphics, humor, sound, music, animation - all draw learners in when done well
Have the learner perform Multi-step tasks
Having people attempt real (or "authentic") tasks is much more interesting than having them repeat or mimic one step at a time
Provide intrinsic feedback
Seeing the positive consequences of good performance is better feedback than being tols "Yes, that was good."
Delay judgment
If learners have to wait for confirmation, they will typically reevaluate for themselves while the tension mounts - essentially reviewing and rehearsing!

20. Activity – 30 minutes Work in groups
Use a storyboard you previously developed
Write a specification for an interaction
Share with the class
Discuss

21. Activity – 90 minutes Work individually
Use a portion or segment or lesson from your practicum project
Create a prototype
Use the method of your choice – paper or PowerPoint
Share with the class
Discuss

22. Design Package Constraints, budgets and timeline
Production deliverables
Specifications
Navigation map
Storyboard
Prototype
Homework: Assemble a Design Package

23. References
Allen, Michael W., (2003). Michael Allen’s Guide to e-Learning. Building Interactive, Fun, and Effective Learning Programs for Any Company. Hoboken, NJ: John Wiley and Sons.