Designing Web-Based Training

Ann E. Barron
University of South Florida
Interactive Media Corporation

ABSTRACT: There are many methods and techniques for delivering instruction through the Web. Academic and industrial courses can be enhanced with Web-based links, or the courses can be delivered completely via the Web. Instructional content can be delivered through e-mail "correspondence-type" courses, via Web pages written in HTML, or with very complex interactions developed with Java, JavaScript, Shockwave, ActiveX, or other tools. In this brief discussion, I will outline a range of Web-based instructional options, provide general guidelines for designing Web-delivered instruction, discuss two case studies, and include links to example Web-based training (WBT) sites.

Online Instruction

In the past, the primary technologies used to deliver instruction to remote students were two-way interactive video and one-way prerecorded video (Lewis, Alexander, & Farris, 1997). Although effective, these technologies have their limitations, including access, distribution, and interactivity. With the emergence of the World Wide Web, we now have a worldwide, efficient, and inexpensive mechanism for delivering instruction.

The delivery of instruction via the Internet and/or Web can include a range of options, such as e-mail correspondence, Web-enhanced instruction, Web-managed instruction, and Web-delivered instruction. It is important to note that these categories are somewhat arbitrary and are not exclusive. For example, a Web-managed course could easily include components of the Web-delivery and Web-enhanced classifications.

E-mail Correspondence Instruction

With e-mail correspondence courses (which have been around for many, many years), instructions and/or assignments are e-mailed back and forth between students and instructors. A course offered in this manner often includes an offline textbook or other instructional materials.

Web-enhanced Instruction

With Web-enhanced instruction, the instructor creates a Web page (or pages) with relevant links for the class. Web-enhanced instruction is generally designed as a supplement to on-campus/on-site instruction. (See for an example used in my instructional design course.)

Web-managed Instruction

With Web-managed instruction, a tool, such as ActiveX, TopClass, Learning Space, or Web Course in a Box is used to provide an architecture for course information and materials. These Web-management tools are not generally designed to create instruction; instead they provide an easy, effective means of managing (with password access and student tracking) course information and materials. Many of the tools also offer features related to student and faculty collaboration such as chat rooms, discussion groups, and e-mail.

Web-delivered Instruction

Web-delivered instruction (commonly referred to as Web-based Training or WBT) includes courseware in which the instruction, interactions, and feedback are delivered via the Web. This type of instruction can be created with many tools, such as HTML, Javascript, Java, Shockwave, or Neuron.

There are several Web sites that provide definitions of WBT and can serve as excellent supplements to this discussion. On the WBT Information Center (, Tim Kirby defines WBT as "an innovative approach to distance learning in which computer-based training (CBT) is transformed by the technologies and methodologies of the World Wide Web, the Internet, and intranets." On the Multimedia and Internet Training site (, Brandon Hall provides a broader definition: "Web-based training is instruction that is delivered via a Web browser, such as Netscape Navigator, through the Internet or an intranet."

Other terms that have been used for this category of instruction include IBT (Internet-based Training), WBL (Web-based Learning), and WBI (Web-based Instruction). In the industrial arena, WBT appears to be emerging as the acronym of choice; the academic arenas seem to prefer WBI or WBL.

For the remainder of this paper, I will focus on WBT (as opposed to e-mail correspondence, Web-enhanced, or Web-managed instruction). I will use the term WBT to refer to interactive instruction that is delivered via the Web (in both academic and industrial environments). This instruction will be assumed to be "stand-alone"--in other words a "traditional" class does not meet, and the course content and feedback are included in the WBT program.

Design Options for WBT

A few years ago, when the Web emerged as a feasible option for the delivery of instruction, the only development option was HTML. At that point, the Web consisted of scrolling pages, and the design of those pages could be based on general Web style guidelines (see, for example, the Sun on the Net: Guide to Web Style at Now, with the availability of new HTML tags (such as framesets), authoring system plug-ins (such as Shockwave) and programming languages (such as Java), there are several options for the design and development of WBT. Web pages are no longer confined to scrolling pages; instead, the design may include page-based, frame-based, and screen-based options.

Page-based WBT

Page-based WBT consists of scrollable HTML pages. In other words, a page-based program does not have frames; a single scroll bar will appear if the document is long or the window is decreased. Advantages of page-based WBT is that it is generally more accessible to a worldwide audience (because it can be created in basic HTML). In addition, it does not generally require any authoring system plug-ins, and most users are comfortable using the browser and embedded links to navigate through the pages. Disadvantages include the need to scroll through the pages (if they are long) and the lack of static menu options.

One of the first examples of page-based instruction was the Interactive Frog site that was developed by the Curry School of Education (http://curry.edschool.Virginia.EDU/go/frog/). This site consists of scrolling Web pages and interactions based on hyperlinks to another Web page. A more current example of a page-based site is the Gartner Learning Demo at Although it includes embedded Shockwave files and Javascript, the basic structure remains page-based.

Frame-based WBT

When the frameset tags were added to HTML, a new design/development option emerged. With frames, one or more parts of the screen can remain static while the other part or parts change and/or scroll. The advantages of frame-based WBT is that a menu or other options can remain on the screen, in the same place at all times. Disadvantages of frame-based programs include the fact that it is more difficult to print the information (only the active frame will print), and the access time increases because multiple pages must be transmitted.

One of my favorite frame-based WBT sites is Anatomy of An Eye ( The image map on the left provides a consistent menu of options. A more comprehensive example of a frame-based site is Digital Think ( In this example, the left frame is used for a menu of button options. The Cyber Travel Specialists site also uses frames--perhaps too many (see

Screen-based WBT

The advent of plug-ins, such as Shockwave for Authorware and Neuron for ToolBook, created another design option for WBT. When courseware is produced using one of these tools, the screen design can appear almost exactly the same as "traditional" CBT. (Note: A screen-based look can also be created by hiding the browser menubars with Javascript.)

Advantages of screen-based programs include the fact that each screen can fill the display window; scroll bars are not included; existing courseware can be converted for Web delivery; and management systems are available (such as Librarian for ToolBook and Pathware for Authorware). A major disadvantage is that the students may be required to download and install a plug-in. In addition, the memory requirements may be high and the transfer time may be long.

Cruising the Information Superhighway is an example of a screen-based program that was created in Authorware, shocked, and placed on the Web ( Note that as soon as the program is accessed, it fills the screen (if you are in 640X480 resolution).

Design Considerations for WBT

Whether you are designing page-based, screen-based, or frame-based WBT, it is important to consider a few "rules of the road." Some of the following guidelines are derived from the wealth of literature on the design of computer-based training and multimedia instruction, and some of the guidelines are based on style recommendations for Web pages. The guidelines should be interpreted broadly, based on specific content, the intended audience, and the format of the data.

Conduct a Thorough Media Analysis

The media selection process should include the feasibility of delivering instruction via videotape, audiotape, lectures, CBT, WBT, and other media. Several factors that might point to using WBT for delivery of educational programs include:

Place Course Objectives First and Foremost

With easy-to-use HTML tools, such as FrontPage and Composer, Web pages can be created relatively quickly. To quote (roughly) David Merrill at a conference several years ago "authoring systems allow us to create bad instruction faster." The same can be said of the Web tools that are now available. If we do not focus on the content, the strategies, and the learning experiences of the student, we will lose the effectiveness of the program, regardless of the medium or the authoring environment. The content must be analyzed by instructional designers; flowcharts should be created to outline the sequence of the course; and storyboards must be developed that detail the content, design, and interactions for each screen (page).

Analyze the Platforms of the Target Audience

Every instructional designer understands the value of defining the characteristics of the target audience. With WBT, the audience analysis is vital because the users may be scattered throughout the world, and they may be using a wide variety of network, hardware, and software options. The speed of the network might range from dialup access via 28.8 modems to intranet access via a 100Mbps network. The hardware could include Macintosh, UNIX, and PC computers at various speeds and performance. Software considerations include the browser type and the plug-ins.

If you are designing WBT for a specific company, you (or the company) may be able to "dictate" a specific platform and browser; in which case, you can design accordingly. If you are designing for a worldwide audience, you must consider the lowest-common denominator of the target audience and provide information on your site to notify users about the recommended platform(s). For example, the Cyber Travel Specialist site at provides information about the recommended browsers and includes information for AOL users.

Make the Interactions Meaningful

With current WBT development tools, there is almost no limit to the level of interactivity that can be included. Whether you add some basic Javascript to HTML pages or create the courseware in Java or Shockwave, the interactions should require cognitive engagement on the part of the students. Simply adding a Next and Previous button on each page may require "physical" interactions, but they may not engage the student's mind.

An example of well-designed interactions is available on the Sticky Situations site ( This site, which was created in Authorware, requires the student to think about alternate solutions and test them out. It also provides supplemental instructional information on the site with well-designed graphics. The Radiologic Anatomy Interactive Quiz (that was developed with Java) is another example of an interactive site (

Consider Visual Guidelines

When multimedia instruction is delivered on CD-ROM or other mass storage devices, the amount and size of graphics is not generally an issue. However, on the Internet, each picture must be transferred separately from the remote computer. The transfer time can vary based on the type of connection and the amount of traffic on the lines. Before incorporating a graphic, assess its pertinence to the overall message. The following guidelines are offered for graphic use:

Differentiate Among the Hyperlinks

Hyperlinks are major components of WBT, but incorporating them effectively can be a challenge. Questions arise, such as: "How will the student know if a hyperlink branches to a local glossary page or a distant resource?" "Is it important for the students to know where they are in cyberspace?" "If the students branch to another site, will they know how to return?" "Can designers, or should designers, insist that the students not wander to other Web sites?" Although there are no definitive answers to some of these questions, a few recommendations include:

Limit the Length of Web pages

If the program is designed with a screen-based approach, the length of each page is not an issue, and the amount of information on each page can be dictated by general CBT design guidelines. If the program is page-based, the question of page length arises. Even if you design each page to be one screen in length, the user may re-size the browser thereby creating a scroll bar.

Most Web designers agree that the initial page of a Web site or program should not exceed one page--all of the pertinent information should be immediately visible so that the user will not have to scroll down the page to find the options. On other sections of the course (past the initial page), a good limit seems to be one-to-three screens in length. A disadvantage of short pages is that if users want a printout, they must print several documents and "piece" them together. To address this issue, it is wise to provide a link to a separate file (with the entire text) that can be printed or saved as one document. For an example of a WBT program that offers alternate versions, based upon whether or not the students are interested in printing, see the SLAC--Environmental Safety, & Health Training at

Minimize the use of Audio, Video, and Plug-Ins

Multimedia elements remain a challenge for WBT at this point. If you use non-streaming media files, they may take a long time to download. If the media files (generally in WAV, AVI, or QT formats) are important for the lessons, try to keep them as small as possible by using only pertinent segments, sampling at minimal rates, and compressing the files as much as possible. Also, be sure to inform the users about the file formats and warn them about the length of time it may take to download the files.

Streaming technologies (such as RealAudio and Shockwave Audio) offer a major advantage in that the files will play as they transfer. However, if you incorporate streaming technologies, the users may need to download and install plug-ins.

Because of the frustrations that plug-ins can cause, you should carefully consider all alternatives prior to using them. Not only are there many versions of plug-ins, but they are constantly updated, and can be tricky to install. The general suggestion is to use media elements only when they are essential to the instruction. (For an example of RealVideo used for training, visit Dterm Series III Online User Guide at and click on "Teach Me.")

Encourage Collaboration

A major advantage of WBT (as opposed to CBT and other training options) is that it is relatively easy to incorporate (and encourage) communication between the instructor and the students. This communication can be asynchronous (e-mail, discussion groups, etc.) or synchronous (chat, videoconferencing, etc.). For an example of a WBT program that incorporates collaboration, visit Digital Think at

Case Study #1:
The Teacher's Guide to the Holocaust

The Teacher's Guide to the Holocaust was produced at the University of South Florida over two years ago ( The target audience of this program is teachers throughout the world. Many teachers are using older versions of browsers because of memory and hardware constraints on older computers. Therefore, the program was designed to operate in Netscape 2.0, without plug-ins, Java, or Javascript.

The focus of the program is placed on the content and the design is quite simplistic. The production included the development of hundreds of HTML pages with over 350 gallery photos. Subsequent to its development on the Web, this site was also distributed to all schools in Florida on CD-ROM. Design elements that were considered in the development of this program include:

Case Study #2:
Sales Training

Interactive Media Corporation was recently involved in the design and development of 50 hours of WBT for a telecommunications company (with less than six month's time from start to finish). The instruction was designed for a company intranet that resides behind a firewall, but many of the learners access the courseware by dialing in through a 28.8 modem. Microsoft Internet Explorer 3.02 or higher was selected as the browser (by the company). Some of the design decisions included:


The World Wide Web offers an effective method for disseminating information, education, and training. The categories include e-mail correspondence courses, Web-enhanced instruction, Web-management instruction, and Web-based Training. If Web documents are properly designed, they will be appealing, interactive, and offer an easy-to-navigate interface. By observing a few guidelines, instructional designers can help make the transition to world-wide training a smoother road.

Discussion Points

As "discussion starters" it might be worthwhile to post comments about the design of the following sites to the ITForum. Discussion points might include:

Example WBT Sites

References and Other Resources

About the Author

Dr. Ann E. Barron
Associate Professor, Instructional Technology
Director, Florida Center for Instructional Technology
College of Education
University of South Florida
4202 E. Fowler Ave.
Tampa, Florida 33620

Phone: 813-974-1631
Fax: 813-974-3731

The buttons that appear below will be found at the top and bottom of each page of the discussion. The first button will take you back to the previous page (in this case, to the beginning of paper #26). The middle button will take you to the ITForum home page. The last button takes you forward into the discussion as it progressed on-line.