Navigation, Storyboards, and Prototypes

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

2. ID for eLearning Certificate Program Structure 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 Course Name: Navigation, Storyboards, and Prototypes Program Name: Instructional Design for eLearning Certificate Program

3. Course Objectives 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 Day 3 Course Name: Navigation, Storyboards, and Prototypes Program Name: Instructional Design for eLearning Certificate Program 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

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

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

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

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

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

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:

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