Quick-Learn Design Toolkit

Transcription

Quick-Learn DesignToolkit

Quick-Learn Design ToolkitThis Quick-Learn Design Toolkit wasprepared by the Educational Design,Continuing Education, and LearningServices Branch, Division of ScientificEducation and Professional Development,Center for Surveillance, Epidemiology,and Laboratory Services, Office of PublicHealth Scientific Services, Centers forDisease Control and Prevention, Atlanta,Georgia. Please send questions andcomments to learning@cdc.gov.Thomas R. Frieden, MD, MPHDirector, Centers for Disease Controland PreventionChesley Richards, MD, MPHDeputy Director for Public HealthScientific ServicesMichael F. Iademarco, MD, MPHDirector, Center for Surveillance,Epidemiology, and Laboratory ServicesPatricia Simone, MDActing Director, Division of ScientificEducation and Professional DevelopmentNancy T. Gathany, MEd, PhDActing Chief, Educational Design,Continuing Education, and LearningServices BranchiiThis manual is in the public domain andmay be used without restriction. Citation asto source, however, is appreciated.Links to nonfederal organizations areprovided solely as a service to ourusers. These links do not constitute anendorsement of these organizations northeir programs by the Centers for DiseaseControl and Prevention (CDC) or the federalgovernment, and none should be inferred.CDC is not responsible for the contentcontained at these sites.Use of trade names and commercial sourcesis for identification only and does not implyendorsement by the Division of ScientificEducation and Professional Development,Center for Surveillance, Epidemiology, andLaboratory Services, Centers for DiseaseControl and Prevention, the Public HealthService, or the U.S. Department of Healthand Human Services.The findings and conclusions in thistoolkit are those of the authors and do notnecessarily represent the official positionof the Centers for Disease Controland Prevention.Suggested citation: Centers for DiseaseControl and Prevention (CDC). Quick-LearnDesign Toolkit. Atlanta, GA: US Departmentof Health and Human Services, CDC; 2014.Available at:http://www.cdc.gov/learning.

Quick-Learn Design ToolkitContentsIntroduction. 1Section I: Lesson Design Guide. 2I-1. Needs Analysis.2I-2. Content Organization.2I-3. Learning Assessment.4I-4. Storyboard and Web Development.4I-5. Formative Evaluation.4Section II: Storyboard Template. 5Section III: Web Development Tips. 7III-1. Preparation and Planning.7III-2. Software Resources.7III-3. Browser Support.9III-4. Content.10III-5. Accessibility.10III-6. Common Accessibility Concerns.11III-7. Speech Browser Scans.11III-8. Additional Accessibility Resources.11Next Steps.12iii

Quick-Learn Design Toolkitiv

Quick-Learn Design ToolkitIntroductionThe ToolkitThe Quick-Learn Design Toolkit is a set ofresources to assist instructional designersand web developers with creating QuickLearn lessons (http://www.cdc.gov/learning/quick learns.html). Quick-Learnlessons are a form of e-learning designed toaddress one or two learning objectives andrequire less than 20 minutes to complete.Through responsive web design techniques,the lessons are accessed through desktopcomputers and mobile devices alike,including smartphones and tablets. TheQuick-Learn Design Toolkit comprises thefollowing three sections: Lesson Design Guide for instructionaldesigners. This section describes five keyinstructional aspects to consider whencreating a Quick-Learn lesson. Storyboard dt-storyboard.pptx) for instructionaldesigners. This Microsoft PowerPoint (Microsoft Corp., Redmond, Washington)template is used to lay out and evaluatelesson content. Web Development Tips. The tips includetechnical aspects to consider whendeveloping the Quick-Learn lesson’scontent for online delivery.Quick-Learn lessonsare a form ofe-learning designedto address oneor two learningobjectives andrequire less than 20minutes to complete.1

Quick-Learn Design ToolkitSection I: Lesson Design GuideDuring the process of building a QuickLearn lesson, multiple instructional bestpractices should be considered. Thissection, Lesson Design Guide, focuses onfive key areas for developing an effectiveQuick-Learn lesson: needs analysis,content, learning assessment, storyboardand web development, and formativeevaluation. Because instructional designershave varying degrees of experience increating electronic learning (e-learning)we recommend this guide be used inconjunction with the E-learning Essentialssuite of products available tml. Although this guideis primarily intended for instructionaldesigners, the inclusion of web developersthroughout the lesson design process iscrucial for successful lesson execution.I-1. Needs AnalysisTypically, a Quick-Learn lesson is best suitedfor providing information or just-in-timetraining or for reinforcing learned skills. Itis not ideal for teaching an elaborate skillset, a topic requiring in-depth content, orfrequently changing content. Quick-Learnlessons should have only one or two simplelearning objectives. If the scope of thedesired lesson is complex, consider anotherapproach, such as a training module thatcontains multiple lessons. For content withmore than two objectives, consider creatinga series of Quick-Learn lessons with oneobjective per lesson. Examples of trainingwell-suited for the Quick-Learn formatinclude the following:2 updates to manuals, changes inprocedures, or simple concepts orprocesses with a limited number of stepsor variables (e.g., illustrating the stepsfor handling biohazardous waste whilecollecting a blood sample); refreshers of key concepts learned in acourse (e.g., providing a quick referenceguide for reading laboratory test results); succinct case studies and realisticexamples requiring learners to apply keyconcepts from learned lessons; and just-in-time training that guides learnersthrough a specific task.Ask the following questions during theneeds analysis process: What learning need will be addressedwith this Quick-Learn lesson? What skills and experiences does thelearner already have? How will the learner demonstratemastery of the content?I-2. Content OrganizationIf the Quick-Learn approach seemsreasonable after conducting the needsanalysis, begin thinking about the content.This involves a logical organization of text,graphics, or media such as audio, video,or animation, to help explain concepts.The text should be concise and followplain language guidelines s/PlainLanguage.html). Plain language doesnot mean that content has to be understoodby everyone. It should be relevant andclearly written for the intended learner.

Quick-Learn Design ToolkitConsider the following principles whenwriting a Quick-Learn lesson: Keep the content short and focused andinclude only essential information. Eachcontent screen should include three tofive sentences at most. The text shouldnot require scrolling, and it should bevisually aligned to allow learners to skiminformation quickly (see Example 1).Use relevant images and graphics toillustrate important concepts or complexideas. Remember a picture is worth athousand words (see Example 1). Design interactions to promote interest,inquisitiveness, and challenges to engagethe learner (see Example 2).——Use an animation todemonstrate procedures.——Develop a role-based simulation.——Provide explorativelearning opportunities.Consider the challenges of navigating ona mobile device and include only buttonsand links that are critical for functionality(see Example 1).Example 1Concise text, relevant graphic,and easy navigation buttonsExample 2Interactivity consisting of aquestion with feedbackauthentic to the learner’s role3

Quick-Learn Design ToolkitI-3. Learning AssessmentEarly in designing a Quick-Learn lesson,determine your assessment strategy toensure the lesson is effective in achievingthe intended results. Within the context ofe-learning, an assessment is any interactionfrom which data is collected with the intentof making an inference about the learner.Assessment provides practical, objective,and measurable evidence that learninggoals are achieved and ensures a degreeof product integrity. Because e-learningassessment methods provide reliable resultsquickly, training decisions also can be madequickly. Moreover, assessment improveslearning through interaction and feedback,identifies learner knowledge strengths andweaknesses, and helps to evaluate theeffectiveness of the instruction. Considerincluding a posttest with multiple-choicequestions and immediate feedback. Consultthe E-learning Essentials suite of tials.html) for best practices indeveloping high-quality learning assessments.I-4. Storyboard and Web DevelopmentWhen the needs analysis, contentorganization, and assessment strategyare complete, the next step is laying outthe Quick-Learn lesson. The Quick-LearnDesign Toolkit Storyboard Templatediscussed in Section II is available for thispurpose. The Storyboard Template is aMicrosoft PowerPoint file and providesplaceholders for interface and contentelements. Web developers will use thecompleted storyboard and the WebDevelopment Tips section of this guideto create the functioning lesson. Werecommend that web developers be partof the design and storyboard planningprocess so they can convey any technical4considerations that might affect the lesson.As an integral member of the design team,the web developer’s involvement in thestoryboard process can assist his or herunderstanding of the overall goal for theQuick-Learn lesson.I-5. Formative EvaluationFormative evaluation should occurmultiple times during storyboard andweb development. To ensure that anyproblems hindering learning are detectedand corrected before launch, have aninstructional designer and sample groupof learners perform the steps outlined inthe storyboard. To confirm the accuracyof the content, have subject matter expertsreview the content while it is still instoryboard form.After the web developer builds thefunctioning lesson, pilot test the lessonwith a sample group of learners. Thoroughpilot testing will reveal inconsistenciesin the training and ensure the learningobjectives are achieved. Pilot testing alsowill help gauge usability and functionalityand ensure that the content presentationand learning activities function correctlyon multiple devices (computers, tablets,and smartphones).determine yourassessment strategyto ensure the lesson iseffective in achievingthe intended results.

Quick-Learn Design ToolkitSection II: Storyboard TemplateThe Storyboard Template is provided asa starting point for designing a QuickLearn lesson. The complete storyboard isa Microsoft PowerPoint file and availablefor download at board.pptx).A PDF version of the Storyboard Templateis available ryboard.pdf).Web developers will use the finalizedstoryboard to create the fully functioninglesson. For more information about usingthis template and developing for onlinedelivery, continue to Section III: WebDevelopment Tips.Examples 3, 4, and 5 are excerpted from theStoryboard Template.Example 3Lesson layout5

Quick-Learn Design ToolkitExample 4Section page withimage placeholderExample 5Section page withknowledge check6

Quick-Learn Design ToolkitSection III: Web Development TipsThe following web development tips assistweb developers with determining the besttechnical solutions for developing theQuick-Learn lesson for online delivery.Before web development begins, theinstructional designers responsible for thecontent of the Quick-Learn lesson shouldhave reviewed Section I: Lesson DesignGuide to determine the lesson content.They also should have laid out the lessonby using the downloaded storyboardtemplate from Section II in collaborationwith the web developer. Web developerswill use the final storyboard to create apilot-test version and then the final versionof the functioning lesson.a log of activities to track the project’sprogress as well as ideas for revisions tomake in future iterations of the lessonalso will be helpful.III-2. Software ResourcesIntermediate experience level withDreamweaver (Adobe Systems, Inc.,San Jose, California) and otherweb-authoring and development toolsis recommended. Table 1 highlights thecapabilities of leading industry standardweb development applications.III-1. Preparation and PlanningThe web development of a Quick-Learnlesson can be a substantial undertaking.Preparation and planning are key toremaining on schedule and delivering aquality education product.PreparationKeep in mind that the amount of spacefor website content on a mobile device isoften considerably smaller than the spaceavailable on a desktop computer screen, andscrolling horizontally might be impossibleor impractical. Be sure to communicatethese space limitations with the instructionaldesigner(s) during the design andstoryboarding stage of the project.PlanningThe length of time for web developmentwill vary on the basis of the lessoncontent. Consider working with theinstructional designer(s) to draft a projectschedule with clear milestones. Keeping7

Quick-Learn Design ToolkitTable 1Web Development Software ComparisonFeaturesDreamweaver*CSS and rver-sidescriptingXXMobile devicesupportXTemplate supportXXXXFTP supportXXXXASP.Net and VisualStudio ** supportXXCSS supportXXJQuery supportXXSEO supportXXHTML5XPreview pagesin differentbrowsersXAccessibilitysupportPrice comparisonXXXX XFree * Adobe Dreamweaver, Adobe Systems, Inc., San Jose, California ��Microsoft Expression, Microsoft Corp., Redmond, Washington t).§KompoZer is open-source software (http://www.kompozer.net/).¶Adobe Captivate, Adobe Systems, Inc., San Jose, California (http://www.adobe.com/products/captivate.html). Captivate is not aweb authoring tool but a tool used to develop interactive e-learning content and integrates with Microsoft PowerPoint .**8Microsoft Corp., Redmond, California.

Quick-Learn Design ToolkitIII-3. Browser SupportThe tips in this section cover methods that help ensure correct display of the lesson ondifferent browsers and devices. The tips apply to the following programming languages:HTMLVerify that the HTML code is free from errors by using an HTML validator. Two validators areas follows:ValidatorLinkW3C *http://validator.w3.org/Mozilla Firefox html-validator/* W3C is open-source software.Mozilla, Mountain View, California.†CSSApply CSS fallback techniques to optimize the lesson content for different browsers. Forexample, when using a CSS3 gradient to fill in a background, a browser that does not supportthe gradient will not render the background. Provide a solid background color or a gradientslice image to eliminate this problem.JavaScript JavaScript’s (Mozilla, Mountain View, California) polyfills, shims, and Modernizr can be usedto emulate more advanced functionalities, such as HTML5 and CSS, in nonsupportive browsers.The following are examples:ExampleDescriptionLinkRespond.jsUsed to ensure media queries work correctly inolder versions of Internet Explorer (MicrosoftCorp., Redmond, ML5 shivUsed to force older versions of Internet Explorerto render HTML5 nizr *Used for feature detection to ensure polyfills andshims are used only when needed.http://modernizr.com/*Mozilla, Mountain View, California.9

Quick-Learn Design ToolkitIII-4. ContentThe tips in this section cover considerationswhen designing components of the layoutfor the Quick-Learn lesson. For moreinformation regarding the lesson’s layout,review Section II: Storyboard Template.LayoutTo achieve more flexible displays of thelayout, use Responsive Web Design toensure effective readability and navigationacross different browsers and devices.Consider having at least three versionsof the lesson to accommodate diversebrowsers or devices that display at differentpixels per inch, such as the following: 320 480 – Mobile 640 960 – Mobile 640 1,136 – Mobile and tablet 768 1,024 – Tablet and desktop 2,048 1,536 – DesktopImagesCreate fluid images by starting with a largerimage that can be scaled down withoutdistortion. The Adaptive Images tool,developed by Matt Wilcox, will assist withcreating this functionality. It can deliverdevice-appropriate, rescaled versions ofimages. The tool is available athttp://adaptive-images.comIII-5. AccessibilityWhen developing the Quick-Learn lesson,be sure the lesson is accessible not only topersons who use different types of browsersbut also for persons with disabilities.Web developers should also be certain todetermine if the lesson assessments andinteractivity meet accessibility requirementsand are supported by a range of browsersand devices. For example, Adobe Flash 10(Adobe Systems, Inc., San Jose, California)is not supported by all devices. Considercollaborating with the accessibilitycontact(s) in your organization early inthe development process. The tips in thissection include resources that will helpensure accessibility compliance accordingto the Section 508 Amendment to theRehabilitation Act of 1973 (additionalinformation is available ilitation-act).

Quick-Learn Design ToolkitIII-6. Common Accessibility ConcernsTo ensure popups and dialog boxes are accessible, add Accessible Rich Internet Application(ARIA) (W3C , open-source software) properties. The following links provide more intro/aria.phpCreate an accessibledialog -an-accessible-dialog-box/III-7. Speech Browser ScansThe following are tools and products for testing and remediating lessons for Section 508accessibility compliancy:ToolLinkScreen-reading softwareJaws for fs/jaws-product-page.aspWeb-based accessibility testing toolsWeb AccessibilityEvaluation Tool (WAVE)http://wave.webaim.org/Web Accessibility * Freedom Scientific , St. Petersburg, Florida.†Freeware developed by Steve Faulkner in a collaboration between Vision Australia, the Paciello Group (Europe),and Jun of the Web Accessibility Tools Consortium.III-8. Additional Accessibility Resources Web Accessibility Initiative (WAI) (http://www.w3.org/WAI/) HHS.gov: Section 508 (http://www.hhs.gov/web/508/index.html) Section508.gov: Opening Doors to IT (http://www.section508.gov/)11

Quick-Learn Design ToolkitNext StepsThank you for using the Quick-LearnDesign Toolkit. Let us know if you have questions orsuggestions regarding how to improvethe Quick-Learn Design Toolkit.E-mail: learning@cdc.gov. Get ideas and inspiration for your QuickLearn lesson by reviewing those alreadyavailable: http://www.cdc.gov/learning/quick learns.html. Also, let us know when you havecreated a Quick-Learn lesson. We mightbe able to promote it on the CDCLearning Connection:http://www.cdc.gov/learning.12When developing theQuick-Learn lesson,be sure the lessonis accessible notonly to persons whouse different typesof browsers but alsofor persons withdisabilities.

For more information, please contactCenters for Disease Control and Prevention1600 Clifton Road, NEAtlanta, GA 30333Telephone: 1-800-CDC-INFO (232-4636)/TTY: 1-888-232-6348E-mail: cdcinfo@cdc.govWeb: http://www.atsdr.cdc.govPublication date: February 2014CS245963

Quick-Learn Design Toolkit 7 Section III: Web Development Tips The following web development tips assist web developers with determining the best technical solutions for developing the Quick-Learn lesson for online delivery. Before web development begins, the instructional designers res