Practical Hypermedia Design for the World-Wide Web


Brian M. Tissue, Department of Chemistry, Virginia Polytechnic Institute and State University, Blacksburg, VA 24061-0212; tissue@vt.edu

Introduction

This article describes some practical design considerations in writing hypermedia applications for distribution using the World-Wide Web. It concentrates on overall hypermedia design and specific tips to compensate for network bandwidth limitations. An introductory article describing the Web and its uses in science education is available at http://www.chem.vt.edu/chem-ed/CHP/www-chem-ed.html and information about the hypertext markup language (HTML) is available at http://www.chem.vt.edu/info-utils/html-help.html.

The most important design consideration is to determine the goal of the educational material. Different media and formats are better suited for different educational tasks. For example if the goal is only to distribute printable material then word-processor or Acrobat files are more appropriate because of the greater control over final output. If extensive video is desired then internet delivery is impractical and CD-ROM is needed. WWW-based hypermedia is most appropriate for text and graphic material that take advantage of hyperlinks and interactivity. The hyperlinks are especially suited to provide in-context remedial links that continually reinforces basic concepts and illustrates the connections between advanced topics and basic principles.

Starting with a well-defined goal and plan can help avoid constant revision of filenames, etc. Designing a hypermedia application requires careful planning because the links between documents can become very complicated. Changing filenames or directory structures of HTML documents can require revision in other documents that contain links that point to the old filename and/or subdirectory.

Minimizing file-transfer time

User's hardware requirements for text- and graphics-based hypermedia is very modest, and most new PCs and Macs have sufficient speed to play video clips. However, network usage and application sophistication will continue to outstrip network bandwidth, eventhough the infrastructure is constantly improving. The bandwidth limitation will probably continue for many years and places practical limits on the types of material that can be effectively distributed over the internet. The bandwidth consideration must also include the end users' network connections, which may yield a wide range of file-transfer speeds. These constraints require that WWW hypermedia applications and individual documents be designed to minimize file-transfer times.

To keep students' study time efficient, the time spent waiting to transfer files should be less than the amount of time students spend reading the material. The individual hypermedia documents are therefore kept relatively small and are mostly text with < 10 in-line graphics and no large clickable-map images. The documents are written to be understandable in text-only mode so that they are useful to users with their browsers configured to not display in-line images, which greatly increases the overall transfer speed. The hyperlinks are still active and the descriptive text can be enough to refresh a student's memory about a given topic. Each image in a document is given a separate title so that students with image display turned off will know what they are missing and can selectively retrieve images.

Video clips are used only when needed to convey a sequence of events such as the use of an instrument. Video clips (compressed in both QuickTime and MPEG formats) are produced with captions rather than audio to minimize file sizes and so that instructions remain visible when a digital movie is paused. Movie files are kept to < 2 Mbyte. A 30-second video clip (~1 Mbyte) takes approximately 1 minute to download over a typical ethernet connection and much longer over a serial line.

The content of the documents depends on the goal of the material. The difficulty level at which to write a given document is determined by its dependence on underlying basic principles. This horizontal uniformity is for ease of writing of the individual documents. It does not represent the physical organization of the computer files, and it may or may not be followed in designing specific applications (see below).

The documents are organized in layers, in which the documents in each layer contain material of approximately equal difficulty. A flexible approach is to write short, self-contained documents on specific topics. This provides flexibility for incorporating them into diverse applications, as discussed below.

Application designs

Once the individual hypermedia documents are written, the challenging task is to design access methods that make them useful to students. Tutorials can be designed to follow horizontal, vertical, or tailored "tracks." Tutorials can be envisioned on topics such as environmental chemistry in which relevant documents from general chemistry, organic chemistry, instrumental analysis, environmental engineering, etc. are connected together to tell a story. The following two paragraphs describe analytical chemistry hypermedia at Virginia Tech that illustrate organizational structures.

An Analytical Chemistry (AC) Basics track is written analogous to a course syllabus for sophomore-level Analytical Chemistry, an Encyclopedia of Instrumental Methods track, and a comprehensive index of the individual hypermedia documents. These indices provide familiar hypermedia documents provide stand-alone tutorials, reference material, and multimedia demos on various chemistry topics. while the stand-alone tutorials are envisioned as providing a reference source for Virginia Tech students and outside users.

Course-specific hypermedia uses a more structured format and can include course syllabi, homework problems and/or solutions, and interactive multiple-choice questions. Pre-lab exercises are designed to improve a student's understanding of an experiment before coming to laboratory. The pre-lab assignments complement the experiment handouts with graphics and video clips that illustrate the actual laboratory equipment that students use in their experiments. The tutorials serve as supplemental study aids that students access from an internet server during lab periods and outside of class... also as a refresher of lab experiments when studying for exams. The pre-labs will also contain multiple choice and simple answer questions. Students will submit answers to the computer server and receive feedback with the correct.


This hypermedia page is maintained by Brian Tissue