Video Tutorials and e-Learning

DevelopmentTECM 5180

Dr. Lam

Before we start…

• We’ll watch several video tutorials• Take a sheet of paper and write down:

1. Type of video it is (screencast, animation, or video of speaker)

2. Positive attributes of the video (what made it “good”)

3. Negative attributes of the video (what could make it better)

4. Methods you wish to incorporate in your own video tutorial

Let’s start with some examples

• http://www.youtube.com/watch?v=NSoj86mXfNU• http://www.youtube.com/watch?v=JZdv5lrJs4U• http://www.youtube.com/watch?v=9odXQ3tstrk• http://www.youtube.com/watch?v=ENjiuxG-9-k&f

eature=c4-overview-vl&list=PL83417FBC931B2923

• http://www.youtube.com/watch?v=ok_VQ8I7g6I

Types of Video Tutorials

• Screencasts (typically used for software procedures, but can also be used for other types of tutorials)

• Animation and voice (optional video of speaker)

• Video of speaker (sometimes with additional visual elements)

Choosing a type

• Pick a video tutorial type that matches your content

• Pick a type that matches your abilities• Pick a type that matches your constraints

(technology, time, ability)

Process of Creating a Video Tutorial

1. Outline your content 2. Create a storyboard (visual outline of major events in your

video)3. Write a script4. Rehearse5. Record audio (simultaneously for screencasts; separately

for other types of videos)6. Record video 7. Combine and/or edit your video and audio8. Publish

TechnologyHardware• Microphone to record audio• Video camera to record video (optional)Software• Software to record audio

• Audacity• Windows or Mac freeware (e.g., garage band)

• Screencasting software (Most record audio and video)• Camtasia studio• mashable.com/2008/02/21/screencasting-video-tutorials/

• Post-production software (putting it all together)• Windows movie maker• iMovie

Let’s go back to your notes…

• What types of videos did you prefer? • What is most feasible? • What methods/characteristics were

positive?• What methods/characteristics were

negative?

E-Learning Development

• Your design document needs to be done ASAP

• Mock-ups should be done before the week is over

• Development should begin BEFORE next Monday’s class

Process from Mock-up to Development

1. Site-level map – This should be created (pretty easily) based on your task analysis

• The most important attribute of this is a clear relationship between content and user access (i.e., what will the user be able to see and control?)

2. Page-level mock-up – Create multiple mock-ups or wireframes based on the different types of pages you have in your course.

• Focus on things like primary navigation, secondary navigation, content display, and other user control.

Process from Mock-up to Development

3. Create blank HTML/CSS templates of each page type (based on your mock-ups of course). Don’t worry about content quite yet.

• This can be done by hand, by a WYSIWYG, or an e-Learning authoring tool

4. While someone on your team is developing the templates, someone else needs to be actually writing the content.

• Writing and developing content doesn’t have to be done in HTML/CSS.

• Do it in Word or Powerpoint • All content must be original. Any content that comes from

an external source must be repurposed and cited.

Process from Mock-up to Development

5. Insert content into your page templates. 6. Connect pages of content using navigation. 7. Test – perform a task-based usability test on at least one

user and write up the results. • Focus on one module (or a part of one module)• Focus on macro-level elements (elements that span across

modules like navigation, layout, ease of use, etc.)

8. Revise – Make necessary and feasible revisions9. Finish – Host your site somewhere that accessible via the

web. See first video tutorial for instructions on hosting via google drive.