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

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 2

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

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

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

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

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

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.

Types of Prototypes Paper prototypes Digital 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.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 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.

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.

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

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

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

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

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

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

Interactivity Instructional interactivity

Presentation versus Interactivity Choose presentations when: Choose Interactivity when:

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!

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

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

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

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.