Optimizing Courses for Online Learning

Transcription

1 Optimizing Courses for Online Learning Best Practices Guide OutStart, Inc. 745 Atlantic Avenue 4 th Floor Boston, MA

2 2006 OutStart, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without prior written permission. OutStart, Inc. Page 2 of 10

3 Designing Online Learning for Optimal Performance Are you constantly frustrated at the poor performance of your online courseware? Are your learners falling asleep while waiting for course pages to load? Poor performance for online courses can at best, try your learners patience, and at worst, totally destroy their learning flow. Online learning can become an online nightmare unless you are prepared to take the steps necessary to optimize your courseware during the development cycle. The following recommendations are based on best practices for online web delivery in general, and online learning in particular. Know Your Audience! It s important to have a basic knowledge of bandwidth, which is the speed at which content is delivered and received via the Internet. Most organizations use a high-speed service to deliver web content/courseware, but this is only half of the equation. The other half is the speed at which the content is delivered to learners dependent on their individual ISPs. See the following graph for a better understanding of bandwidth. Figure: The faster the delivering and receiving services, the faster content is transferred. Many organizations design and deliver courseware for a specific audience, and have a pretty good idea of the bandwidth available for learners. This is particularly true if delivering courses via a company intranet. All too often however, courses are delivered to an audience to which there is no idea of learner bandwidth and/or other resources. In this situation, courses should ideally be developed for the lowest common denominator learners. This means that developers must be extra diligent about the size and types of items contained in the courseware. There are many different types of content, but the following graph will demonstrate how the type of content has a direct relationship with the speed at which it is delivered. OutStart, Inc. Page 3 of 10

4 Figure: Common courseware items and the speed at which they are delivered So given the information in these graphs, if you do not know the bandwidth of your course audience, you would avoid using large and numerous audio and video files, depending more on graphics, animations, and of course text. If you do use high-bandwidth courseware items, you should at the very least provide minimum and recommended bandwidth speeds to learners as a cautionary statement at the beginning of courses. Graphics While graphics are low-bandwidth friendly, this depends very much on the size and type of the graphics. File Sizes for Graphics There are no hard and fast rules for file sizes of graphics, however the phrase the smaller the better would be a good start. Large images delivered via the web can easily cost way more than a thousand words. Obviously there are quality considerations to take into account; however small file sizes need not impact an acceptable quality standard. Reducing graphic dimensions, cropping unneeded areas, optimizing the resolution, and using formats that take advantage of file compression will all help to reduce the file size without necessarily affecting the quality. For example, a 3 x 5 photo that is 35kb in size, will take 7 seconds to load over a 56kbps modem. The same image, reduced to 1.5 x 2.5 is 10kb in size, and will take 2 seconds to load with the same modem. This is a significant difference for the learner. OutStart, Inc. Page 4 of 10

5 File Types for Graphics The following table describes the most common types of graphics used in courseware. Graphic Type Description GIF (.gif) These are the most commonly used graphic type used for web content, due to their small file size, which is the result of a 256 color limitation. It supports animation and transparent backgrounds, but it is not suitable for photos. Ideal for simple graphics and logos. Note: This file format may be subject to patent restrictions. PNG (.png) Similar to the GIF format, but without the patent restrictions. PNG supports transparent backgrounds, and millions of colors. It also has a tighter compression, so even larger PNG graphics will have a relatively smaller file size. Note: Given the ongoing patent restrictions with GIFs, it is expected that PNG will eventually replace them as the more widely used graphic format for web delivery. JPG (.jpg) While these are often used in web delivery, this format is most suitable for photo images. The higher resolution of JPGs makes for a higher quality graphic, but with a higher file size cost. Often, the resolution for JPGs can be reduced and the compression increased without too much difference to the quality, which is why it is a commonly used graphic format for web delivery. Note: Never use the TIF or PSD graphic formats. These are high-quality non-compressive formats, most commonly associated with print products. As well, many web browsers do not support these graphic types. The following tips may help you to keep graphic sizes to a minimum. Ensure physical size (dimension) is kept to a minimum. Unless your course is about photography, this will probably not affect the impact to learners. A 72 dpi resolution is the standard most commonly used for web graphics, even photos. If your image resolution is higher than this, consider reducing it. Use PNG or GIF images instead of JPGs for web graphics. Reserve the JPG format for photos only. Try saving the same graphic at different compression ratios from your photo or graphics editor. Select the result that yields the lowest file size without seriously degrading the appearance of the graphic. Make sure you are not using graphics purely for the sake of it. Unless the graphic has some relationship to the subject matter, it might be better not to use it at all. OutStart, Inc. Page 5 of 10

6 Audio Many course developers add audio narration in their courses. This can add interest to content, and give learners the choice of reading or listening. However, audio narration can add many megabytes to your overall course size. Unless learners have fast bandwidth, this can be detrimental to their learning experience. Audio must be downloaded to learners PCs before it can be heard. As can often happen, learners may finish viewing the other content on the page, and be ready to go on to the next one, before the audio even starts! With careful planning however, this type of scenario can be avoided. The following tips will help you to optimize your audio narration for faster downloading to your learners. When recording audio, ensure the least amount of background/computer noise. This noise adds greatly to your final file size, and is difficult to remove cleanly. Preferentially, record narration in small chunks instead of one big recording. The lengthier the audio, the longer it will take to download. Before compressing audio to MP3 format, clean up the file using a good sound editing application. Cleaning tasks may involve: o Cutting out silences (typical at the beginning and end of recordings) o Removing background noise o Converting to optimal format properties. Common format properties for audio narration in courses may be something like PCM khz, 16-bit, mono. o If the recording is in stereo, convert it to mono. Save audio recordings to a compressed audio format, such as MP3. If you record in WAV format, they can easily be converted to MP3s. When saving the audio to MP3, the bit-rate should not normally exceed 56kbps for narration. Similar to the previous tip for graphics, you can try saving the same audio sample at different compression ratios from your audio editor. Play them back and select the result that yields the lowest file size, (smallest bit-rate), without seriously compromising the audio quality. If the audio is an enhancement rather than a requirement, give the learner the option of turning off all audio in the course, providing them with a transcript instead. Video Embedded video in courseware is easily the most bandwidth intensive multi-media you can use. Adding video to your course should be something you think carefully about before making a decision. Consider the following points: Decide whether you really need to add video. A good reason for video is if it provides learners with understanding they could not get easily in any other way. Examples of this might be: o Showing a process or procedure o Showing tone intonation and body language for soft skills Talking heads videos, while mildly entertaining, will add unnecessary bulk to your course and greatly frustrate your learners. If video is essential in your course, consider using streaming video, rather than embedding the files within your pages. This takes the load away from the course, and learners can begin viewing it almost immediately. The download happens at the same time learners are watching. If embedded video is really necessary, do as with audio and use several small video chunks rather than one big video file. OutStart, Inc. Page 6 of 10

7 Flash Flash is a widely used proprietary authoring format for presenting supplemental multimedia content. It is capable of presenting graphics, video, audio, and even presentation-style multimedia in either an interactive or noninteractive format. The output format from the Flash editor is a (.swf) file or movie that can be embedded in online courses by most modern course authoring applications. From the learner s end, Flash files are supported by virtually all modern internet browsers either natively, or by means of a free plug-in available on-line from the vendor. The biggest advantages to using Flash multimedia to supplement on-line course material are: The Flash authoring application converts bitmap graphics to vector graphics, greatly reducing file size. Flash files can be compressed and auto-optimized during the process of saving/publishing the output file, resulting in a remarkably small file size with high quality. It is easy to create a loading screen in Flash media so that learners know that something is happening. For many on-line course development teams, the advantages of including Flash content outweigh the biggest disadvantages to Flash which are its rather steep learning curve, significant creation time, and a high degree of technical proficiency necessary to achieve effective results. It should be noted that many auxiliary authoring tools and products are coming on the market that output to the increasingly popular Flash (.swf) file format. Many of these take advantage of the popularity of Flash, and combine the good performance and quality characteristics of Flash with a much lower learning curve than the existing Flash editor. If your authoring incorporates the redundant use of a particular combination of multimedia, (scenario creation, virtual mentoring), chances are that someone is marketing a competitive product that does what you need simply and relatively quickly, and outputs to the Flash format. The number and variety of such tools will only increase with time, and some may be right for your e-learning projects. Simulations If your course contains simulations, or if your course is a simulation, there are several things that will make an enormous amount of difference regarding performance. Keep overall simulation size to a minimum. As with audio and video, it is better to have several small simulations than one big one. Possibly the biggest performance factor for simulations, is the window size. The following are important points to note. o The size of your simulation delivery window also dictates the size of the background graphics. If you are using a full-screen window, your background graphics will obviously be enormous and take an unacceptable time to load. o Window size has a direct relationship with the window size of the application during the recording phase of the simulation. The smaller the application window can be resized, the smaller your simulation delivery window need be. Some simulation applications allow you to reduce the recorded graphics after recording, but this often results in deteriorated graphics. The resolution of the background graphics is also of prime importance. Again, some pre-planning before the recording phase will make a great deal of difference. Ideally, you should record simulations at a resolution of 800 x 600. The higher the resolution, the longer each step of the simulation will take to load. OutStart, Inc. Page 7 of 10

8 Most simulation applications allow for audio. The same audio guidelines apply for simulations as those discussed above. If inserting extra graphics into simulation steps, the same graphic guidelines apply as those discussed above. Page Design Since nearly all online learning is browser-based and delivered page-by-page, the amount and type of content on each page, (and the associated download time), will determine whether learners are frustrated or engaged. All of the items previously discussed are of prime importance, but so is the ultimate page design. For example: Limit graphics on a page to one or two at the most (not counting navigational or UI graphics). If you have a large amount of audio narration on a page, record it or split it up after recording, in small bitesize chunks for faster downloading. Have learners click on a Continue button or link to progress to the next audio file. Instead of trying to compress a large amount of text and graphics on a page, consider creating popup windows for learners to view supplemental material. This will mean two smaller pages instead of one large one. Text does matter. Avoid the temptation of using all of your page real estate by filling it up with text. As well, larger font sizes will have a small impact on page size, so avoid the excessive use of large, bold headings. Interactive items that are native to your authoring application, such as questions, hotspots, games, etc, are usually small in kilobyte size. However, ensure that you don t make them any larger (in dimensions) than is necessary. Window Size What size is your course-viewing window? This can make a great deal of difference in loading performance. If your viewing window is larger than 800 x 600, learners will have greater performance issues for two reasons: 1. There is a greater amount of content per page to load. 2. With the extra window space, developers naturally add more content per page. Window size is especially important for Flash items and simulations. Cache Issues, and Reusing Content The more you can reuse items such as graphics and audio, the better the course will perform. This is why navigational and UI graphics do not get much of a cautionary mention in this article. Any items (except for streaming audio and video) that have already been loaded by learners will be stored in their cache, and will not need to be loaded again. Therefore it makes sense to reuse content wherever possible. OutStart, Inc. Page 8 of 10

9 A Last Word - Testing Never make courseware available for learner consumption until it has been thoroughly tested first. Ideally you should test on several different services (from 56Kbps modem through to T1 service) to familiarize yourself where the trouble spots are. Helpful Resources The following websites may help if needing more detailed information of the items discussed above. Bandwidth More information about bandwidth - Graphics More information about the PNG graphic format - More information about the GIF graphic format - More information about the JPG graphic format - Audio Simple audio recording tutorial - Recording/editing tutorial - Recording audio for streaming playback - Video More information about streaming video - Embedded and streaming video tutorials - Flash Optimizing Flash tutorial - Optimizing Flash tips - Rose Jorgensen Senior Instructional Designer / Trainer Practitioner OutStart, Inc. OutStart, Inc. Page 9 of 10

10 OutStart, Inc. Page 10 of 10