navigation, storyboards, and prototypes

23
Navigation, Storyboards, and Prototypes Instructional Design for eLearning Instructor: Scott Nipper Certificate Program

Upload: davis-wiggins

Post on 03-Jan-2016

26 views

Category:

Documents


1 download

DESCRIPTION

Navigation, Storyboards, and Prototypes. Instructional Design for eLearning Instructor: Scott Nipper. Certificate Program. ID for eLearning Certificate Program Structure. Class TitleLengthCEU Instructional Design for eLearning 7 hr..7 Analysis and Planning 14 hr.1.4 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Navigation, Storyboards, and Prototypes

Navigation, Storyboards, and Prototypes

Instructional Design for eLearning

Instructor: Scott Nipper

Certificate Program

Page 2: Navigation, Storyboards, and Prototypes

Class Title Length CEU

Instructional Design for eLearning 7 hr. .7

Analysis and Planning 14 hr. 1.4

eLearning Technologies and Methodologies 14 hr. 1.4

Designing Instructional Content 14 hr. 1.4

Navigation, Storyboards and Prototypes 21 hr. 2.1

Practicum: Learning Object Design and Development 21 hr. 2.1

Total 91 hr. 9.1

ID for eLearning Certificate Program Structure

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program

Page 3: Navigation, Storyboards, and Prototypes

Course Objectives

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 PrototypesProgram Name: Instructional Design for eLearning Certificate Program

Day 3

Page 4: Navigation, Storyboards, and Prototypes

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 PrototypesProgram Name: Instructional Design for eLearning Certificate Program

Page 5: Navigation, Storyboards, and Prototypes

Activity – 90 minutes

• Work individually• Use your developed storyboard as a guide• Create a prototype

– Use MS PowerPoint

• Share with class• Discuss

Page 6: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 7: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 8: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 9: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 9

Types of Prototypes• Paper prototypes

– http://www.alistapart.com/articles/paperprototyping– http://www.paperprototyping.com/

• Digital prototypes– PowerPoint– http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/– http://balsamiq.com/products/mockups– http://pencil.evolus.vn/en-US/Home.aspx– http://www.omnigroup.com/products/OmniGraffle/– http://www.adobe.com/products/flex/

• Industry trends, blogs, and articles on prototyping– http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html– http://www.paperprototyping.com/– http://www.guuui.com/browse.php?cid=129– http://www.boxesandarrows.com/view/defining_feature_sets_through_prototyping– http://www.elearningpost.com/blog/tags/tag/prototyping– www.elearningguild.com/showFile.cfm?id=2551

Page 10: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 11: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 12: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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.– http://publications.europa.eu/vademecum/vademecum/9313fdfe-

c49e-119e-45c6a6441e63e066_en.html

Page 13: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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:

“Interaction that actively stimulates the learner’s mind to do those things that improve ability and readiness to perform effectively.” – Michael Allen

Page 14: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 15: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 16: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 17: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 17

Interactivity

Instructionalinteractivity

Page 18: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 18

Presentation versus InteractivityChoose presentations when: Choose Interactivity when:

Content is readily understood by targeted learners

Content is complex and takes considerable thought to comprehend

Learner differences are minimal Learner are diverse in their abilities to

understand the content

Errors are harmless Errors are injurious, costly, or difficult to

remedy Information is readily available for later

retrieval and reference Information needs to be internalized

Desired change to existing skill is minor and can be achieved without practice

Behavioral changes will require practice

Learners can easily differentiate between good and inadequate

performance

Learners need guidance to differentiate between good and poor performance

Mentorship is inexpensive and will follow

Mentorship is costly, limited, or unavailable

Page 19: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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 contextNovelty, 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 feedbackSeeing 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!

Page 20: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 20

Activity – 30 minutes

• Work in groups• Use a storyboard you previously developed• Write a specification for an interaction• Share with the class• Discuss

Page 21: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 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

Page 22: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 22

Design Package

• Constraints, budgets and timeline• Production deliverables• Specifications• Navigation map• Storyboard• Prototype

Homework: Assemble a Design Package

Page 23: Navigation, Storyboards, and Prototypes

Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 23

References

• http://www.articulate.com/rapid-elearning/3-ways-to-define-interactive-rapid-e-learning/

• http://www.articulate.com/rapid-elearning/powerpoint-for-e-learning/

• http://elearningtemplates.com/elearning-interaction-pack-1/

• 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.