navigation, storyboards, and prototypes instructional design for elearning instructor: scott nipper...
TRANSCRIPT
Navigation, Storyboards, and Prototypes
Instructional Design for eLearning
Instructor: Scott Nipper
Certificate Program
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
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
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
Activity – 90 minutes
• Work individually• Use your developed storyboard as a guide• Create a prototype
– Use MS PowerPoint
• Share with class• Discuss
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
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
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
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
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
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
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
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
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
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
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
Course Name: Navigation, Storyboards, and PrototypesProgram Name: Instructional Design for eLearning Certificate Program 17
Interactivity
Instructionalinteractivity
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
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!
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
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
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
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.