Instructional Graphics

The purpose of most instructional graphics is to help explain something to the viewer in a manner that hopefully increases retention of the subject matter. Instructional graphics have seven possible functions:

  1. Descriptive - To show what an object looks like.
  2. Expressive - To make an impact on the learner.
  3. Constructional - To show how the parts fit together into the whole.
  4. Functional - To show a process or the organization of a system in a simplified manner.
  5. Logico-mathematical - To display a mathematical concept such as a curve graph. Some line graphs and charts with a scaled X and Y axis fall into this category.
  6. Algorithmic - To show a holistic picture of the range of possibilities. Flow charts fall into this category.
  7. Data display - Illustrating textual data visually. Bar charts, pie charts, and histograms fall into this category.

Representational, Analogical, or Arbitrary

Instructional graphics can also be classified as representational, analogical, or arbitrary.

Representational graphics vary in detail from line drawings to photographs, but are alike in that they closely "resemble" the object(s) they depict. For example, a stick figure can represent a person.
stick man figure

Analogical graphics show one thing and by analogy imply something else. For example, a graphic of a sword might be shown to illustrate the concept of medieval warfare.

Arbitrary graphics include tables, charts, and cognitive maps that have no real-life counterpart that they are attempting to portray.

bar chart

"At the Media Center, you can discuss your ideas with consultants who are experienced with audio, video, and graphics tools."
people working at computers
Some graphics are attentional in nature. They serve merely as a stimulus or cue to the learner. The Web is flooded with these types of graphics, especially on commercial sites.

What Graphic Should You Use?

The choice of what type of graphic to use for a specific purpose is often clear, but there are some instances where research particularly indicates what will be most effective.

Browser Considerations

Graphic design can also set the pace at which the user moves through the content. Sparse screens with only one or two elements on the screen may establish a slower pace by placing emphasis on each element. In contrast, other designs can fill the screen with many elements and can imply a faster pace with less emphasis placed on individual elements. Content elements and screen designs can set up a rhythm for moving through material. This rhythm should reflect the purpose and meaning decided upon in the design phase of a project.

Because it is impossible to determine in advance what browser will be used to receive the instruction, designers must either develop graphics that all browsers can adequately display, or specify which browsers must be used. The quality of graphics may be affected by this restraint. Color and density considerations for graphics and images dictate which format, such as GIF, JPEG, and CMYK, is ideal.

The GIF Graphic Format

GIF (graphics interchange format) is the oldest and possibly most often used graphic format for delivery of graphics to the Web. It was invented by the UniSys Corporation. All visual browsers know how to display GIF graphics.

A GIF image can contain up to 256 colors, and the information about these colors is stored in the image itself. A GIF file can be anywhere from a one-bit black and white image to an eight-bit, 256-color image. Thus, for images that display well using only 256 colors or less, the GIF format is the format of choice. Graphics that fall into this category are usually ones with lots of solid colors, and ones with little color variation, such as color cartoons and many technical illustrations.

Here is an example of a graphic ideal for the GIF format:

Notice it uses only a few solid colors. This graphic is only about four kilobytes in size and will display quickly even on a computer using a slow modem to connect to the internet.

Color photographs of people or works of visual art are usually poor candidates for the GIF format; they have more than 256 variations of color in them. Saving these types of images in GIF format may cause a loss of color information; people's skin may appear blotchy, or a fine work of art may not look (color-wise) as it does in the real world.

Here is an example of a graphic saved as a GIF and in JPEG format. Which looks better?

GIF Example
JPEG Example

The JPEG Graphic Format

The second most popular graphics format used to display graphics on Web browsers is the JPEG (Joint Photographic Experts Group) format. JPEGs contain twenty-four-bit color information, as opposed to GIFs' eight-bit scheme. This means JPEGS can contain millions of colors, as compared to GIFs' 256-color maximum.

JPEGs are best used for images where 256 colors are just not enough, or color accuracy is very important. Photographs and color artwork are two examples where the JPEG format is often used.

JPEGs do not yet offer the universal interlacing, transparency, or animation that GIF images do, although these options are being pursued.

Other File Formats

Two other graphic file formats currently exist for displaying graphics on Web browsers: progressive JPEG and PNG. Neither is as popular as GIF or JPG, so only their basics are covered here.

Progressive JPEG - A regular or "baseline" JPEG file is stored as one top-to-bottom scan of the image. Progressive JPEG divides the file into a series of scans. The first scan shows the image at the equivalent of a very low quality setting, and therefore it takes very little space. Following scans gradually improve the quality (much like how an interlaced GIF works). Each scan adds to the data already provided, so that the total storage requirement is about the same as for a baseline JPEG image of the same quality as the final scan. The advantage of progressive JPEG is that if an image is being viewed on-the-fly as it is transmitted, one can see an approximation to the whole image very quickly, with gradual improvement of quality as one waits longer; this is much nicer than a slow top-to-bottom display of the image. The disadvantage is that each scan takes about the same amount of computation to display as a whole baseline JPEG file would. This file format is only supported by browsers at the version 2.0 level and higher.

PNG Format - PNG (Portable Network Graphics) combines some of best features of GIF and JPEG. Like JPEG, PNG supports 16.7 million colors and compresses photographic images to smaller sizes than GIF does. PNG is a lossless compression method, meaning that no quality loss is incurred when it is applied to images.

Unlike GIF or JPEG, PNG can be stored at many different bit depths using different storage methods. GIF, for example, can be stored only in eight-bit or lower bit depths. JPEGs must be stored in twenty-four-bit and no lower. PNG can be stored in either eight-bit, twenty-four-bit or thirty-two-bit. PNG also has a multitude of different filtering methods. PNG was created to be a cross-platform file format and contains information about the characteristics of the authoring platform so that viewing software can automatically compensate and display the image correctly. What this means is that Macs and PCs, which each utilize different gamma settings, can adjust properly for images created in the PNG file format.

PNG allows for transparent backgrounds and interlacing, and it even improves on those features by allowing for various degrees of transparency and two-dimensional interlacing, which transmits a rough overall view of the image faster than the one-dimensional scheme used by GIF. PNG supports a far more superior interlacing scheme than GIF. GIF interlacing gives a preview of the image after one-eighth of the image data has been recognized, whereas PNG gives a preview after only one-sixty-fourth of the image has loaded.

While PNG has many promising capabilities, this file format is always supported by popular browsers below the version 4.0 level. Use it with extreme caution, and verify that your clients can indeed view graphics in this format!

Bandwidth Considerations for Online Delivery

Decisions must be made about what is most important on the screen and made most prominent. The emphasis could be on content such as text, animation, or video, but more likely it will be on headlines, navigation elements, or controls. One way to test prominence is by squinting at a screen until it is blurred. What catches the eye is the most prominent. The first, second, third, and fourth scan should reflect your decision on the hierarchy of the importance among content and screen elements.

Bandwidth basically refers to how much information can be transmitted at a given time. It is a good idea to utilize as little bandwidth as possible when using the Web, for bandwidth is at a premium.

shows how the server sends information via the internet to a local machine

Nearly all Web-based instruction is delivered as illustrated above. A remote server (it can be anywhere in the world) is connected to the Internet and thus to the World Wide Web. Your local computer is connected to the World Wide Web by either a direct connection or via a modem. Your local computer is running a browser (a piece of software) that translates the electronic signals from the web into text, graphics, sounds, movies, and so on.

Please note that a modem connection to the WWW is much slower than a direct connection. A smaller pipe reflects this in the diagram. Just as more water can travel through a larger pipe in a set amount of time, so can more information pass through a direct connection then through a modem in a set amount of time.

This means you need to ensure your graphics are as small (in terms of storage space) as possible. Most graphics delivered via the Web are measured in kilobytes (K). For example, a graphic may be 79K or 100K. Black and white (one-bit) images are generally the smallest, followed by grayscale images, then color images. Within color images, the range runs from two-bit through eight-bit to twenty-four-bit images.

Bibliography on Graphics and Instruction

Baker, G., & Bixler, B. (1990). Computer-assisted design techniques for low-literate adults. Computers in Adult Education and Training, 2(1), 18-27.

Bower, G.H. (1970). Organizational factors in memory. Cognitive Psychology, 1, 18-46.

Fryer, B. (1997, September). Caught in the Web? Inside Technology Training.

Duchastel, P. C. (1979, November). Pictorial illustration in instructional texts. Educational Technology.

Duchastel, P. C. (1978, November). Illustrating instructional texts. Educational Technology.

Dwyer, F. M. (1978). Strategies for Improving Visual Learning. State College, PA: Learning Services.

Hall, B. (1997). Web-based training cookbook. New York: John Wiley & Sons, Inc.

Rieber, L. (1994). Computer, graphics, and learning. Iowa: Brown and Benchmark.

Return to the "Using Media in Computer-based Training" page.