by Al Lemieux
I think we would all agree that e-Learning courses benefit from graphics, even if the topic you are presenting is dry. Nobody likes to read large amounts of text on-screen. Using graphics to break up text gives the eye something to rest on before continuing to read. Below are some tips for using graphics in e-Learning development, so without any further adieu, let's get started.
Graphic Size
Sure, you may want to make your course more inviting by adding graphics, but don't go overboard! Depending on your audience, you may have users with slow connections or older hardware. You'll want to deliver your course content to them as quickly as possible, and adding hi-resolution graphics will only slow things down.
If you are using a continuous-tone photograph, be sure to save the file as a JPEG (Joint Photography Experts Group). JPEG compression can bring a weighty image down in size. The downside to JPEGs is that the compression scheme that is built into the file format (what makes the file size smaller) is lossy, meaning that the more compression you apply, the more image quality you sacrifice. There's a fine balance between file size and quality, so make image files as small as possible, while still looking crisp.
Any flat graphics, charts, and graphs with solid colors should be saved as GIF (Graphic Interchange Format) files. The algorithm in the GIF file format looks for common occurrences of color, and groups those colors together into a palette. The palette can contain 256 colors or less. GIF compression is also lossless, so GIF conversion doesn't introduce artifacts and aberrations, like the JPEG scheme can. GIF files have two additional tricks up their sleeves: they can have transparency and can be animated. The transparency adapter in the GIF file format is only 1-bit transparency, meaning that only 1 color of the whole palette can be transparent. Usually, that color is white, but you can make any color the transparent color. The GIF 89a format allows multiple frames in a single file for animation. You can get really creative with GIF animations now, with the new animation panel in Photoshop CS3. This, however, doesn't mean you should have spinning logos and flashing graphics everywhere. But an animated series of steps can be very useful, when used in conjunction with explanatory text.
Although a page can benefit from a few graphics, adding too many images of varying sizes, qualities, and colors can really cause problems for readers. The size and complexity of the graphics is also an important factor, when considering the number of images to use per page. A sophisticated wiring diagram, with all of its legends and explanations, will probably tax a reader's eye for quite some time, whereas a picture of an ocean would have a different effect.
Also, your course may have a shell or structure with its own colors and shapes. Choosing images that strongly contrast with those colors and shapes may not be a good idea. You may be thinking that if the image stands out, it will attract more attention. That may be true, but it might not be the kind of attention you really want. If at all possible, homogenize your color scheme across all graphics. There may be acceptable variations of color between screen locations, such as highlights, arrows, gradients, and other effects that can help to draw attention to specific areas of a screen image or product shot.
Visual Hierarchy
A visual hierarchy sets the order of importance on a page. You can achieve maximum visibility and results by using a simple and consistent visual hierarchy. Every item on a page has visual importance, but you can control that importance based on the nature of those items. For example, a newspaper has a clear hierarchy: its headlines draw readers' attention because the headline text is larger than any other text on the page. Somewhat smaller subheads fall under the headlines, and help readers scan for chunks of information that might interest them. Then, even smaller body text follows. But despite this clear formatting hierarchy, just one quarter-page-sized image would completely dominate the entire page, and draw readers' eyes away from the text. Similar design hierarchies are seen in other publications as well, and this is just one example.
The systematic ordering of importance through a hierarchy will guide students through a course, and help them achieve their objectives more quickly.
Text Breaks
Facing large amounts of dense on-screen text is not an optimal situation. In print, designers try to help readers by breaking up text using columns, paragraphs, first-line indents, tabs, and other conventions. Line length is another important tool. Usually, the eye is most comfortable reading from 41 to 50 characters per line. But this also depends on the optical characteristics of the font being used and on its size. It has been shown that sans-serif fonts, like Arial and Verdana, are easier to read on-screen than serif fonts, like Times New Roman and Georgia.
Graphics (either embedded in the text or running alongside) can provide a visual break for the eye as it moves through a story. Of course, size and placement are important; you want to use graphics, but also retain continuity. Diagrams and figures that relate to the story are especially valuable.
Visuals can also add motivation. For example, a course that presents exact steps for completing a software task will benefit greatly from screenshots that support each step. Nothing is more frustrating than to have text-only instructions for a visual task. If something requires a lot of hand-eye coordination, then the course should include screenshots, diagrams, simulations, or even video of the steps being completed. And using screenshots from the latest version of the software is mandatory.
Graphic Size
Sure, you may want to make your course more inviting by adding graphics, but don't go overboard! Depending on your audience, you may have users with slow connections or older hardware. You'll want to deliver your course content to them as quickly as possible, and adding hi-resolution graphics will only slow things down.
If you are using a continuous-tone photograph, be sure to save the file as a JPEG (Joint Photography Experts Group). JPEG compression can bring a weighty image down in size. The downside to JPEGs is that the compression scheme that is built into the file format (what makes the file size smaller) is lossy, meaning that the more compression you apply, the more image quality you sacrifice. There's a fine balance between file size and quality, so make image files as small as possible, while still looking crisp.
Any flat graphics, charts, and graphs with solid colors should be saved as GIF (Graphic Interchange Format) files. The algorithm in the GIF file format looks for common occurrences of color, and groups those colors together into a palette. The palette can contain 256 colors or less. GIF compression is also lossless, so GIF conversion doesn't introduce artifacts and aberrations, like the JPEG scheme can. GIF files have two additional tricks up their sleeves: they can have transparency and can be animated. The transparency adapter in the GIF file format is only 1-bit transparency, meaning that only 1 color of the whole palette can be transparent. Usually, that color is white, but you can make any color the transparent color. The GIF 89a format allows multiple frames in a single file for animation. You can get really creative with GIF animations now, with the new animation panel in Photoshop CS3. This, however, doesn't mean you should have spinning logos and flashing graphics everywhere. But an animated series of steps can be very useful, when used in conjunction with explanatory text.
Although a page can benefit from a few graphics, adding too many images of varying sizes, qualities, and colors can really cause problems for readers. The size and complexity of the graphics is also an important factor, when considering the number of images to use per page. A sophisticated wiring diagram, with all of its legends and explanations, will probably tax a reader's eye for quite some time, whereas a picture of an ocean would have a different effect.
Also, your course may have a shell or structure with its own colors and shapes. Choosing images that strongly contrast with those colors and shapes may not be a good idea. You may be thinking that if the image stands out, it will attract more attention. That may be true, but it might not be the kind of attention you really want. If at all possible, homogenize your color scheme across all graphics. There may be acceptable variations of color between screen locations, such as highlights, arrows, gradients, and other effects that can help to draw attention to specific areas of a screen image or product shot.
Visual Hierarchy
A visual hierarchy sets the order of importance on a page. You can achieve maximum visibility and results by using a simple and consistent visual hierarchy. Every item on a page has visual importance, but you can control that importance based on the nature of those items. For example, a newspaper has a clear hierarchy: its headlines draw readers' attention because the headline text is larger than any other text on the page. Somewhat smaller subheads fall under the headlines, and help readers scan for chunks of information that might interest them. Then, even smaller body text follows. But despite this clear formatting hierarchy, just one quarter-page-sized image would completely dominate the entire page, and draw readers' eyes away from the text. Similar design hierarchies are seen in other publications as well, and this is just one example.
The systematic ordering of importance through a hierarchy will guide students through a course, and help them achieve their objectives more quickly.
Text Breaks
Facing large amounts of dense on-screen text is not an optimal situation. In print, designers try to help readers by breaking up text using columns, paragraphs, first-line indents, tabs, and other conventions. Line length is another important tool. Usually, the eye is most comfortable reading from 41 to 50 characters per line. But this also depends on the optical characteristics of the font being used and on its size. It has been shown that sans-serif fonts, like Arial and Verdana, are easier to read on-screen than serif fonts, like Times New Roman and Georgia.
Graphics (either embedded in the text or running alongside) can provide a visual break for the eye as it moves through a story. Of course, size and placement are important; you want to use graphics, but also retain continuity. Diagrams and figures that relate to the story are especially valuable.
Visuals can also add motivation. For example, a course that presents exact steps for completing a software task will benefit greatly from screenshots that support each step. Nothing is more frustrating than to have text-only instructions for a visual task. If something requires a lot of hand-eye coordination, then the course should include screenshots, diagrams, simulations, or even video of the steps being completed. And using screenshots from the latest version of the software is mandatory.
***
About the author: Al Lemieux is a Senior Designer at SyberWorks, Inc. SyberWorks, Inc. is a leader in the custom e-Learning Solutions and Learning Management System industries for Fortune 1000 corporations, higher education, and other organizations. Located in Waltham, Massachusetts, the company serves the multi-billion-dollar e-Learning market. Since 1995, SyberWorks has developed and delivered unique and economical solutions to create, manage, measure, and improve e-Learning programs at companies and organizations in the United States, Canada, Europe, and other countries.
I notice that you choose GIF files as a preferred format...why not PNG files? Is there a difference in quality?
Posted by: joan dickerson | August 03, 2009 at 03:02 PM