IEEE(c) 1996 IEEE. Personal use of this material is permitted. However, permission to reprint/republish this material for advertising or promotional purposes or for creating new collective works for resale or redistribution to servers or lists, or to reuse any copyrighted component of this work in other works must be obtained from the IEEE.

By choosing to view this document, you agree to all provisions of the copyright laws protecting it.

Return to Table of Contents

The Need for a Hypertext Instructional Design Methodology

Susan A. Mengel and CPT William J. Adams

Keywords: Hypertext, Multimedia Software Engineering, Computer Aided Instruction, Object-Oriented Design, Network Protocol Analyzers

Disclaimer: The views expressed herein are those of the authors and do not purport to reflect the position of the United States Military Academy, the Department of the Army, or the Department of Defense.

Abstract: Educators are showing an interest in media rich presentation systems as a means of giving additional material to a class or of showing concepts in a graphical fashion during class. Educators have concerns, however, about the length of time it takes to design and implement media rich or multimedia systems, about copyright issues, and whether the system will be used more than once. They also want to be able to design the system using sound instructional principles, but may not have any time for acquiring such specialized knowledge and, indeed, they probably did not take any education classes while working on their advanced degrees. They do not want to spend a great deal of time in learning how to use a multimedia package nor do their students who may only need to do a multimedia system once to fulfill the requirements of a project or degree.

Although educators and students could use expensive instructional design and multimedia packages, they can accomplish the same objectives with the World Wide Web (WWW) using the Hypertext Markup Language (HTML) and SIMPLE designed by Marion Hagler and Bill Marcy at Texas Tech University. Both are easy to learn to use in a short period of time and are free to educators and students. Currently, however, neither HTML or SIMPLE incorporate instructional design, hypertext design, or interface design nor were they implemented to do so. HTML provides a mechanism for allowing media rich presentations to be made on the WWW and SIMPLE lets instructors pull already designed and implemented instructional materials together into a whole.

In order to help educators and students to design effective and instructionally sound systems quickly, a hypertext instructional design engineering process can be used to help them to concentrate on structuring their system and on monitoring design violations. The process includes a requirements stage, a specifications stage, an implementation stage, validation for each stage, and evaluation of the resulting system. The products of these stages are developed with object-oriented techniques which will eventually result in a hypertext system for instructional usage. The process has been utilized to develop a system for teaching machinists how to use a computer numerically controlled machine. It is currently being used for designing and implementing a network protocol analyzer tutorial, and WWW courseware.


Educators and students are finding out that designing multimedia or media rich systems can be a long, new-lessons-learned experience that can take months or even years. Although they have the best of intentions, they start out with the latest multimedia package and find that it may take a few months of squeezed-in time to learn the basic functions so a modest multimedia system can be crafted. They learn that their multimedia system does not run on all hardware configurations and they find out too late that the restful wilderness backgrounds of the presentation cause the students' minds to wander from the material or make text difficult to read.

Although educators and students may design and implement a usable multimedia system, the system may become outdated and not be structured so as to enable them to introduce new information and delete old information later. If the system is developed in hypertext, as when using the WWW, the hypertext nodes may be linked together in a hodge podge network that leaves students frustrated and confused as to whether or not they made it through all of the material they should have and whether or not they learned the material.

Many books and materials on instructional, hypertext, and interface design exist, but educators and students may not have time to read them all nor to decide which ones would be the best in guiding them in the design and implementation of multimedia instructional systems. They further may not have any formal education in design for the purpose of implementing instructional systems. They may be keenly interested in such issues, but simply have not found the time from their other duties to pursue such issues.

A need exists for a simple-to-learn methodology to help educators and students design and implement hypertext instructional systems. The methodology should facilitate the division of the material into hypertext nodes that are structured according to key concepts in the material. The methodology should monitor the design process with metrics to ensure the hypertext linkages are tight within key concept boundaries, but loose between boundaries. It should use a simple instructional design philosophy to enable the hyperweb of instructional material to be augmented with cues to assist the student in knowing what is about to be presented, tests to assess the student's learning of the material, and activity nodes to enable the students to practice the material. It should include mechanisms to help the instructor validate and verify the effectiveness of the instructional material, where the students spend most of their time in the system, and how well the students perform the activity and test nodes.

As a vehicle for showing the hypertext instructional design methodology, a protocol analyzer tutorial is presented which has already been developed without using the methodology and used in class. The consequences of the development are shown and then the hypertext instructional design methodology is shown through the redesign of the tutorial. Finally, conclusions about the methodology are presented and future work is considered.


At the University of Arkansas, computer systems engineering students are keenly interested in networking and genuinely have a thirst for the subject. To help to teach the students about networking, a network protocol analyzer tutorial with a small network protocol analyzer, called PROTAN, has been developed and used in class [6] (more information can be found in [2]). The tutorial tells students about protocol analyzers and their functions, protocols, and the structure of PROTAN. The tutorial is written in Ntergaid's Hyperwriter and runs under DOS on the PC. PROTAN recognizes the TCP/IP suite on the Ethernet. PROTAN is written in C and also runs under DOS on the PC.

The students' reactions to the tutorial were favorable from a survey given to a graduate networking class. On a scale of one (disagree) to ten (agree), their average response for agreeing that the tutorial was useful was eight and for agreeing that the tutorial added to their technical expertise was also eight. Seventy-five percent of the students did not know about protocol analyzers. They all agreed that the tutorial should continue to be improved and material added to it.

A decision was made to move the tutorial to Windows 95 since DOS is no longer going to be supported. Since no funds were available to upgrade to a new version of Hyperwriter, SIMPLE was chosen to implement the new tutorial since it runs under Windows 95 and is free to educators. Although it was desired initially to move the tutorial as it was in Ntergaid's Hyperwriter over to SIMPLE, the structure of the tutorial did not lend itself to future enhancement nor to easy conversion to SIMPLE. As with many first efforts of design and implementation, much more was now known about how the tutorial should have been structured.

Briefly, the structure of the tutorial is as follows: The first screen allows the user to take a hypertext link into screens entitled Read Me First, Protocol Analyzer, PROTAN, Discussion of Code, Glossary, and Hypertext. From the first screen, all links are structured hierarchically and may lead the user down a path as long as seven nodes as shown in Fig. 1. Each screen may be from half a page to typically two and a half pages long. One screen is 6 and a half pages long and the Glossary screen is eleven and a half pages long.

Fig. 1. Hierarchical Tutorial Structure.

Adding nodes to a hierarchical structure is not very difficult so that did not present a problem. Adding material to nodes that were more than one page long simply made them longer. Forming new links off the nodes did not seem to offer a very good solution either. What was needed was to restructure the material into the key concepts that students needed to learn and to place supporting material into the hyperweb for this learning to take place.


The methodology chosen for the redesign of the tutorial is Adams' hypertext instructional design process [1] since it is easy to learn and to use. It is also a complete process starting from scratch and going through implementation and evaluation. Both ease of use and completeness are needed to ensure educators and students consider all factors from conception to implementation.

The methodology goes through several stages [5] in helping the designer implement a multimedia system from scratch. First the requirements stage enables the designer to focus upon the key concepts to be presented in the material and produces a graph of the overall structure of the system. The specifications stage then successively refines the graph into the hyperweb structure. The implementation stage takes the graph and implements it in the chosen hypertext system. The entire process is undergirded by validation and verification of the stages to ensure the key concepts have been presented effectively.

III.A. Requirements Stage

The requirements stage focuses on the process of determining the scope of the system entailing extensive analysis of the subject matter to decide what information should be included in the system and how the concepts will be grouped and linked together. To facilitate this process, Object-Oriented Text Decomposition (OOTD) [8] is used and provides a systematic method for decomposing subject material into conceptual components. OOTD uses natural language to communicate the information's structure and relation. It utilizes top-down decomposition methods and concept-mapping applications of Ausbel's learning theories [7] to produce a hierarchy representing the information in a modular form. The steps are as follows:

  1. State the thesis of the tutorial in a single sentence.
  2. Expand the sentence into a high level paragraph.
  3. Identify key concepts.
  4. Identify the relationships between key concepts and the paragraph theme.
  5. Review and revise.
  6. For each new concept, repeat steps 1-5 as needed.
  7. Encapsulate related concepts in a single-object module.
  8. Implement text links in hypertext.

Utilizing these steps, the protocol analyzer tutorial's thesis sentence with key concepts bolded would be:

"Network protocol analysis is the process of capturing network packets in real-time for the purpose of network monitoring, specific condition testing, filtering based on specific criteria, and data collection and analysis."

The expanded paragraph would be:

"Network protocol analysis is the process of capturing network packets in real-time for the purpose of network monitoring, specific condition testing, filtering based on specific criteria, and data collection and analysis. Network monitoring may use a graphical display to show traffic, collisions, and bad frames. Specific condition testing allows certain packets to be sent to check the operation of network hardware. Filtering based on specific criteria enables certain packets to be monitored based upon their addresses or even their lifetime. Data collection and analysis allows network traffic to be captured to a file and 'replayed later'."

The relationship between the key concepts and the paragraph theme are as follows:

Each key concept then is expanded into its own thesis sentence and paragraph. All key concepts are decomposed as far as desired and are connected into an OOTD graph through their relationships as shown in Fig. 2. The OOTD graph gives an overall linking structure to the hyperweb. Each node in the OOTD can itself be a hyperweb as well.

Fig. 2. OOTD for Tutorial.

III.B. Specifications Stage

The specifications stage takes the OOTD graph and refines it into a structure suitable for implementation in a hypertext system. The first step in the specifications stage is to determine the first and second order links in the OOTD graph to produce a system flowchart as shown in Fig. 3. The first order links represent the links the student should take to learn the material and may even represent the ordering of a textbook's chapters and section headings. The second order links are conceptual in nature and serve to connect related material if desired. Then the system flowchart is refined into the conceptual graph shown in Fig. 4 where key concepts are grouped into sets of nodes supporting a single instructional theme. The groups may be tightly coupled within themselves, but should be loosely coupled to outside groups.

Fig. 3. System Flowchart.

Fig. 4. Conceptual Graph.

The conceptual graph is augmented with additional nodes through using Gagne's Events of Instruction [4] shown in Fig. 5 to enable the designer to consider instructional and administrative issues. As shown in the figure, to gain attention, a title screen may be used. To inform the student of the lesson's objective, an introduction segment may be used to present an overview, lesson materials, lesson objective, and terminology list. In the tutorial, review screens may stimulate recall, information screens present material, and activity screens along with feedback provide learning guidance. Practice screens review the material, test screens elicit performance, and performance reports assess performance.

Fig. 5. Gagne's Events of Instruction.

The content flowchart is the result of using Gagne's Events of Instruction to augment the conceptual graph and is shown in Fig. 6. All links are bi-directional in the flowchart, but those to the test nodes which must be one way to keep the student from exiting before finishing the test. The flowchart should be verified to ensure that all nodes can be reached and concept groupings are tightly coupled through measuring the centrality of key concept nodes [3]. The flowchart may also be given to content experts to check the validity of the material.

Fig. 6. Content Flowchart.

III.C. Implementation Stage

Now the instructional designer can take the content flowchart and implement it in the system of choice. It is also at this point that the interface screens are designed and implemented (they might have imposed a premature structure on the hyperweb if designed and implemented earlier). The screens should be implemented in a consistent manner with no more than three to six colors per screen and to minimize user mouse movement and keyboard effort. For example, instructional material and navigation links should be placed in a common area on the screen.

The completed system should be reviewed by subject matter experts to ensure completeness and that all links can be traversed. Once again, centrality of the key concepts should be verified. The system can be used by a limited number of students to work out minor problems before general usage.


The methodology is designed to be easy to use and represent a complete modular engineering design process. It is a synthesis of research performed in the fields of software engineering, computer science, and education. It enables designers to focus on building systems that will be expandable by adding more key concepts into the hyperweb, maintainable and amenable to modifications as curriculum needs change via key concept node alterations, and reliable through verifying links and instructional effectiveness. It enables the instructional system to be visualized before implementation to allow design faults to be caught before the final system is generated.

Another aspect to the methodology is that since it can be learned quickly, students can use it during a semester for semester projects and also can benefit from designing their own instructional systems for other students. Both educators and students can learn the benefit of concentrating and dividing material into key concepts to help them understand and teach the material better.

The hypertext instructional design process has been used to construct a tutorial for teaching machinists how to use a computer numerically controlled machine, a Novell NetWare 3.12 tutorial, and an Artisoft LANtastic 6.0 tutorial. It is currently being used to implement the protocol analyzer tutorial, two robotics tutorials, a JAVA WWW tutorial, a Novell NetWare 4.0 tutorial, and instructional material on the WWW. In all cases, individuals using the process have produced more effective and modifiable tutorials than if they had not used it. The process causes them systematically to address issues, such as interface design, how much material to put into a node knowing the node should only have as much as one screen of text, keeping the hyperweb shallow and broad, and how best to divide the material into effective lesson presentations. They also do not consider it a difficult process to use.


The first step is to automate the hypertext instructional design process to produce a skeletal or complete multimedia system from the design. In order to make the best use of the time of educators and students, they must be able to design and implement almost at the same time. They consider it tedious to do the design and then have to do the implementation afterwards. The implementation will be done in SIMPLE and/or HTML since they are free to educators and students who enjoy working with either of them since they are easy to learn.

A convenient means for educators to implement multimedia systems and track students' progress is SIMPLE, a multimedia development system designed to pull together various media elements into one whole. SIMPLE, written in Microsoft's Visual Basic and utilizing Microsoft's Access database package, is capable of producing such systems as Broderbund's MYST and is, therefore, powerful enough for most educators' and students' needs. More important, it is free to educators and students through the WWW from Texas Tech University's Computer Science Department link in the College of Engineering. SIMPLE, developed by educators, Marion Hagler and Bill Marcy, for educators, can be learned in less than a week for those familiar with computer systems and includes a log utility showing the progress of students as they use the system. Log utilities are usually only present in expensive multimedia systems and must be hand-crafted on WWW systems.

The automated system can generate a SIMPLE database or HTML files from the design. The system can also monitor the design for the ability to reach all hypertext nodes and the centrality of all key concept nodes. It can enable others to check the system for instructional material validity before the tutorial is implemented. It can allow designers to make changes to the system in the design and then generate a new implementation. It can allow cross-referencing to be performed from stage to stage to ensure all of the requirements and specifications have been met.

The automated system will be written in a modular fashion so as to allow other instructional design methodologies to be used if desired. It may even allow other design methodologies to be plugged in and used as well.


All terms know to be trademarks or registered trademarks are capitalized.

This work was supported in part by the University of Arkansas College of Engineering and the Advanced Manufacturing Technology Laboratory.

Many thanks to Marion Hagler and Bill Marcy for making SIMPLE available and for continuing to support it.


[1] W.J. Adams. Application of Object Oriented Design Principles and Graphical Design Techniques to Computer Aided, Hypertext Based Instruction. Master's Thesis, Computer Systems Engineering, University of Arkansas, Fayetteville, AR, 1994.

[2] S.A. Ali. A DOS-Based Protocol Analyzer for Ethernet Networks with a Hypertext-Based Tutorial. Master's Thesis, Computer Systems Engineering, University of Arkansas, Fayetteville, AR, 1995.

[3] R.A. Botafogo, E. Rivlin, and B. Schneiderman. "Structural Analysis of Hypertexts: Identifying Hierarchies and Useful Metrics." ACM Transactions on Information Systems, vol. 10, no. 2, April 1992, pp. 142-180.

[4] E.K. Cook and E.J. Kazlauskas. "The Cognitive and Behavioral Basis of an Instructional Design: Using CBT to Teach Technical Information and Learning Strategies." The Journal of Educational Technology Systems, vol. 21, no. 4, 1993, pp. 287-302.

[5] J.S. Hahn. "Developing Hypermedia Systems: Avoiding Hyperchaos." Journal of Clinical Engineering, vol. 15, no. 5, September-October 1990, pp. 355-359.

[6] S. Mengel and S. Ali. "A Network Protocol Analyzer With Tutorial." 1996 Symposium on Applied Computing, New York, NY: ACM, 1996, pp. 115-119.

[7] J. Novak and D. Gowin. Learning How to Learn. Cambridge, UK: Cambridge University Press, 1986.

[8] M.L. Talbert and D.A. Umphress. "Object-Oriented Text Decomposition: A Methodology for Creating CAI Using Hypertext," in H. Maurer, ed. Lecture Notes in Computer Science #360, Computer Assisted Learning, Proceedings of the 2nd International Conference, ICCAL '89. New York, NY: Springer-Verlag, 1989, pp. 560-578.


Susan A. Mengel received her Ph.D. in Computer Science from Texas A&M University in 1990. She joined the Computer Science Department at Texas Tech University in 1996 as an Assistant Professor. Previously, she was employed in the Computer Systems Engineering Department at the University of Arkansas in Fayetteville. She is currently developing multimedia tutorials to help students learn networking and robotics concepts. She also has interests in object-oriented software engineering and intelligent systems. She has been chosen as a NASA Summer Faculty Fellow at the Jet Propulsion Laboratory in Pasadena, CA. She is a member of IEEE, ACM, International Neural Network Society, and ASEE. She is active in Engineering Education being the Newsletter Editor of the ASEE Educational Research and Methods Division. She may be reached at

CPT William J. Adams is an Instructor at the United States Military Academy. CPT Adams is an active duty Signal Corps officer with over ten years of service. He has a Bachelor of Science degree in Computer Engineering from Syracuse University and a Master of Science in Computer Systems Engineering from the University of Arkansas. He is a member of Upsilon Pi Epsilon, AFCEA, and the ACM. His research interests are primarily focused on hypermedia development and integrating hypermedia into instructional programs. He may be reached at