Hypermedia - A Tool for Better Understanding

Copyright © IFAC Youth Automation. Beijing. PRC. 1995


J. Lindfors

University of Oulu, Department ofProcess Engineering, Control Engineering Laboratory, SF-9057J Oulu, Finland

Abstract: The fast development of personal computers has made it possible to apply new techniques to present and process data. Hypermedia technology, that means integration and presentation of different media elements and a way to unite pieces of information together in a computer, can give a new possibility to gain better understanding of difficult things. In this paper hypermedia technology is described from the educational point of view and an application from the area of training of process automation is presented.

Keywords: Training, Computer aided instruction, Process automation, Multimedia


The development of the computers has brought about progress in the field of applications, too. Hypermedia, or hypertext and multimedia, are popular words nowadays.

The fast development of personal computers, illustrated in Figure 1, and operating systems has made it possible to use the computer for other purposes than the conventional computing or data processing. Through a graphical user interface, computers are now also used for obtaining information, in entertainment, and in education. The computer is more than a conventional computer at the moment; it is a media engine.

There are several application areas for hypermedia, but especially in the field of education hypermedia technology is appreciated. By hypermedia, difficult concepts or even dangerous processes can be clarified. The idea to apply hypermedia to education is supported by the theories of Cognitive learning and Constructivism. These theories are not new. Merely, they have recently got a new meaning. The idea of hypermedia was presented at 1945 (Bush, 1945), but the word of hypertext was the first time used by Ted Nelson in 1965. Hypermedia is therefore a way to offer knowledge, divided in smaller units (nodes), linked in such a way that the user might browse through them, taking the information in the order that is, with certain qualifications, decided by the user (Femandez, et. al., 1993).

Fig. 1. Development of speed in personal computers (Oesch, 1993).

Due to the demand to improve teaching and the expectations of hypermedia to give better results than the conventional methods, the ideas of the Cognitive


learning and hypermedia have been applied into practice in the Control Engineering Laboratory at the University of Oulu in teaching of process automation. The used hypermedia material was made during a three year project, supported financially by COMEIT IT and the project resulted some 40 MB of material that contains domain knowledge of process automation.

nodes serve only as destinations for links but have no outgoing links. In multimedia sound, picture, and text are presented in several forms simultaneously. This is usually done by computer that integrates the forms of media into a meaningful entirety. Usually this kind of presentation proceeds straight from the beginning to the end. The subject and the speed of advance are maybe controlled by the follower.

2. TIIE CONCEPTS OF COGNITIVE LEARNING AND CONSTRUCTIVISM Constructivism means continuing reorganization of relationships between the learner's ego and the rest of the world. This world in itself consists of real and idealistic parts. Constructivism says that learning is a process in which the learner constructs an internal model of knowledge. This model can be changed or it is, actually, changed by the learner through social interaction in learning situations. The main things of Constructivism include the processes of internal model construction and social interaction. Through these, the process of information manipulation is about to change towards new strategies in understanding information.

Hypertext Conventional text Fig. 2. The structure of conventional text and hypertext

According to Cognitive Theory, learning is not only "charging" one's memory but giving the responsibility of the learning to the learner and emphasizing the learner's desire to understand and explore the information.

When data management is added to the multimedia presentation, the term hypermedia can be used. Accordingly, when multimedia elements are integrated into the hypertext, hypermedia is formed. Thus, hypermedia consists of hypertext and multimedia.


Hypertext can be defined (Martin, 1990) as computer aided navigation, CAN. Thus, hypertext employs information under the control of a computer in a way that the user of the information can navigate through it in valuable ways.

3.1 A definition ofhypertext and hypennedia.

The simplest way to define hypertext is to compare it with a traditional text. Traditional text is usually considered as sequential, meaning that there is a single linear sequence defining the order in which the text is read, whereas hypertext can be considered as nonsequential. There is no single order that determines the sequence in which the text can be read. Figure 2 shows the difference of ordinary text and hypertext.

3.2 The difficulty of orientation

Successful navigation is important from the point of view of the usability of a hyperdocument. Usually navigation is made possible by employing . "hotwords", pieces of text that will bring the next information node available. Hotwords are made visible in some form on the screen and activated with the mouse.

As it can be seen in Figure 2, hypertext consists of interlinked pieces of text. These pieces are illustrated as computer screens, but they can be also scrolling windows, files, or smaller bits of information. Each unit of information is called a node. Each node may have pointers to other units, and these pointers are called links. The number of links is not normally fixed in advance but will depend on the content of each node. Some nodes are related to several others and will therefore have numerous links, while other

Naturally, the hypertext enables several different ways to navigate, and the user determines which of them is followed at the time of reading. This means that the author of the text has created a number of alternatives for readers to explore rather than one single stream of information. 24

Depending on the reader's ability to create his own links, hypertext systems can be classified to open or closed. In the open hypertext system the reader can make links freely. In the closed hypertext system the author has decided the link system, and the reader is not able to change it and, furthermore, cannot make new links.

overview; not being able to find information that is known to exist; determining how much is left and etc. These difficulties can be avoided by the careful design of the hypermedia application, its structure, user interfaces, and the navigation system.

3.3. Design ofhypertext systems The structure of hypertext consists of a network of nodes and links. In the largest model, the pieces of information can be imagined on the surface of a ball, where each piece of information has a link to the others. Generally, the structure can be linear, hierarchical, or starlike. Figure 3 shows principles of these three structure models.

The objective of hypertext and hypermedia projects is to develop usability of knowledge - that is in the electronic form - by structuring it into a meaningful entirety improving at the same time searching and presentation methods. The hyperproject requires c0operation of professionals from various fields. A project can consist of a programmer or system designer, an expert of the subject, and a graphics designer. The structure, links, and relationship between the pieces of information should be analyzed carefully and defined before the implementation.

Linking the information together is extensively examined; almost every researcher has different nominations for links. Furthermore, the amount and types of links vary. In this paper two types of links are presented: referential and organizational. Referential links are "real" hypermedia links in the sense that they provide arbitrary associations between related nodes in different contexts, whereas organizational links provide structural relationships between nodes.

The importance of well-designed navigation function and user interface cannot be exaggerated. They should be designed in a way that the use of the application is as effortless as possible. The information and its founding are essential for the user; the final users should be kept in mind through the project.

True hypertext should make users feel that they can move freely through the information, according to their own needs. This feeling is hard to define precisely but certainly it implies small overhead with respect to using the computer. On one hand, this means short response time so that, e.g., the text is on the screen as soon as it is asked for. On the other hand, also the user interface and its facility play significant role in the use. No matter how excellent the information structure and the linking system behind the interface is if the user interface in itself is difficult to use.

Prototypes should be done during the project to cut down errors from the application. Copyrights, updating, and distribution has to be considered as early as possible in the project.

4. APPLICATIONS OF HYPERMEDIA Hypertext and hypermedia techniques can be applied

in different fields and for various purposes. For example, technical documents, dictionaries, encyclopedias, medical handbooks, and presentations of various institutions can be presented as hyperdocuments. Also library and information services, personal computing, computer aided learning, and entertainment are areas where hypermedia applications can be found.



Computer systems and programs are practical subjects for hypertext applications. For example, electrical handbook of a program can follow on disks. While running the program, the handbook can be get on the screen at any time. Thus, also the browsing of new things through the electrical handbook can be made easy. For example, certain airplanes and cars have their service manuals on hypertext.


Fig. 3. Linear, hierarchical, and starlike structures. Encyclopedias, dictionaries, and handbooks are often presented on CD-ROM. For example, the Academic American Encyclopedia was published on CD-ROM

Large hypermedia systems always have inherent navigation problems that include getting lost in "hyper-space" feeling; having difficulty in gaining 25

(Leivisldi et al., 1991). The project started in 1990 and lasted three years. It was a C(H)perative project with three Finnish firms and three educational institutes from Germany, Portugal, and Finland

as early as 1986. It included the text and tables, but no pictures. The newest version of it, published in 1990, includes over 33000 interlinked articles and color pictures. Medical handbooks are popular examples, e.g., Dynamic Medical Handbook, developed in the Washington University.

5.2 Modules Technical and scientific publications are suitable for hypermedia. Various publications have been made in this field. Usually they are on CD including pictures and animations. And they are characterised by the effective use of colors.

The training material developed was modularly grouped into series of courses that could be used at different levels of education and in different fields of industry. The basic idea behind the system was that it would be possible to pick a tailor-made module with the main "textbook"-part, examples, problems, demonstrations, and audio visual material for some main topics of process automation. The main modules were as follows:

Presentations of firms and their product catalogues are popular subjects for hypermedia A hyperpresentation on a CD-ROM can give more value to the product or the firm. It is an advantage for the presentation that the material needed is available and the amount of it is limited. Due to the limited amount of the material the presentation can ususally be saved on a floppy disk and it is also convenient to distribute. The Glasgow Online developed in University of Strathclyde Scotland, is perhaps one of the best-known presentations. It familiarizes the user to the history, sights, events, hotels, amusements, etc. of Glasgow.

1. 2. 3. 4. 5. 6.

Combining pictures and sound have been familiar with the developers of computer aided learning. Due to new tools the making process of learning programs has become more flexible and versatile than before. Furthermore, the theories of Cognitive learning and Constructivism can be applied. No wonder, that several applications have been developed in various fields of education.


Process measurements and signal conditioning Process dynamics and modelling Controller design and tuning Advanced control methods and optimization. Industrial example: simulation offreeness control (pulp and paper industry) Industrial example: simulation of a PVCprocess (chemical industry) Industrial example: simulation of a plate rolling mill (steel industry)

5.3 Structure The design of navigation principles was started by designing the structure of the material. A structure, that could be easily imagined and helps navigation through the material was selected. The basic element of the material was a hypeIbook that could include all the multimedia elements that were enclosed in the hypermedia, and which consisted of pages (screens) and links to pages of the current book or to different books. Figure 4 shows an example from the structure and navigation in the material.


5.1 The COMErr J/ project Process automation has been one of the fastest developing fields of process industry during the recent years. This makes for quite high demands on automation personnel. They should be able to learn new technology fast and efficiently. This means that the training of automation must be also interesting and stimulating. The use of hypermedia technology is expected to give better results than conventional methods (Leivisldi and Yliniemi. 1991).

5.4 Navigation tools Several tools for navigation were used in the material, a navigation page, navigation buttons, a navigation menu., an index book, a map book, hotwords, and buttons with page names. A library book is the first book in the material. It is entered when the material is opened. The first page shows the icons of the seven bookshelves. By clicking the icons, more detailed contents appear in the rightside field. Then a section can be selected and a new page, that represents the books of this bookshel( can be accessed. By selecting a book, the

These expectations took shape in a project of COMETI' n program. The target of the project was to develop training material for process automation so that the material can be used in continuing education in different fields of process industry, in universities, and of different technical institutes


book in question can be opened. Figure 5 shows the main screen of the library book.

the page name, the page in question can be reached.

By selecting the item "Index of this book" the navigation page of the current book can be reached. The items "next" , "previous", and "hack" have the corresponding actions likewise the navigation buttons.

• • • Bookshelves


D· ..

In the Map book the current bookshelf is indicated by a flashing rectangle. The name of the book is shown in the "You came from book:" field. The user can click on the rectangles that represent the bookshelves. In order to get back, the name of the book in the "You came from book:" field can be clicked. A click on the button below the bookshelf brings out a dialog box where one of the books in the bookshelf can be chosen. Figure 7 shows the screen of the Map book.




A hotword is a special point in the text. The hotword can have the same actions as buttons. The use of hotWords for navigation in the material is usually restricted only to the navigation inside a book. Thus, clicking a hotword usually brings the user to the lower level of a book.

Fig. 4. A simplified example from the structure of material.

In order to prevent the "lost in hyperspace" feeling, a book includes a cover page, that is wiped out. The names of the section and the topics are included on this page. The idea behind the system is to put some signs on the paths for orientation and guidance.

Exiting from the material and returning to Windows is done by clicking the box in the uppermost corner of the screen or selecting the "Exit" menu.

The second page in each book is an index page or a navigation page. It contains the topics of the book. These topics are presented as navigation buttons. By clicking these buttons, an information page or the next navigation page can be reached. It is good to point out that the topics that contain more knowledge or data are illustrated as buttons. If the buttons are pushed, the color of them changes from white to yellow. The change in colors is to show the topics that were read. The color of the background of the second page is different on separate bookshelves. A single-select listbox filled with the names of the other books in this section is placed to the left corner of the screen. Figure 6 shows an example from the second page in book "step and impulse tests."

Fig. 5. The main screen in the library book.

Each page in the material has at least four navigation buttons. Arrows pointing to the left and to the right are used for going to the previous or to the next page inside the book, and the upwards pointing arrow is used for a jump to the upper level in the material hierarchy. The barbed arrow is used for returning on the path along which the current page was entered. If the sense of location is lost, the "Navigation" menu is the tool for orientation. By selecting the item "Map" the Map book is entered. With "Library" a return to the start can be made. This item is good also for fast-browsing the material. By selecting the item "History" , a dialog box with a list of pages passed through is brought out. By a double-click on

Fig. 6. An example of the second page. 27

can study the process through simulations and animations at a quiet time.


The fast development of personal computer has brought hypermedia technology available. It has a number of application in areas such as visual frontends, interactive kiosks, interactive documentation, and computer based training. Especially, in training hypermedia technology has certain advantages when presenting difficult concepts through animations and simulations and bringing unattainable processes on the computer screen through video.

Fig. 7. The Map book.

Although this paper focuses on a case of training, the idea of hypermedia may be applied also into other fields. For example, control engineering might utilize wider the idea of data management and linking.

5.5 Experiences The material has been now in use about a year and a half. Experience has shown a need of highly interactive examples to support the domain knowledge base (Lindfors, et al., 1995). The work to establish also an example base has begun. These examples can vary from calculation examples to wider simulations.

REFERENCES Bush, V. (1945). As we may think. Atlantic Monthly 176, 1, p. 101-108


Femandez, M. M., M. Femandez, A. de la Villa, M. Adroher and R Martinez (1993). Hypertext and Animation: A Joint Venture for Teaching. In:

According to our experience from the use of the material and benefits that were found, a decision to develop the material further was made. Knowledge from some new fields of the process automation should be added, e.g. fuzzy control, genetic algorithms, and neural networks. At the same time the interaction level of the material should be raised by adding examples, animations, and simulations.

Proceedings of Hypermedia in Vaasa Conference, pp. 88-95. Vaasan Painotuote, Vaasa, Finland. Leiviska K (1995) Hypermedia in Simulation and Control. To be presented in SiElWG Workshop in Brussels June 29-30.

The rapid development in the field of data communications encourages to apply hypermedia technology in new fields. Until recent years, process automation systems have been closed, vendordefined systems. At the present development progresses towards more open systems where data is transferred through different kind of nets. Sincerity and nets make it possible to integrate different types of systems together.

Leiviska K, Yliniemi L. (1991) Training materials for process automation. In: Proceedings of the

Second Seminar on New Approaches to Computer-Aided learning, pp. 73-77. Aalborg, Denmark, Leiviska K, Yliniemi L., Lindfors 1. (1991) Training materials for process automation: Demonstration of teaching process measurements. In: Proceedings of Nordic

According to the results of an other research project conducted in our laboratory (Leiviska., 1995), the level of education of process operators in industry varies significantly. The lack of knowledge can influence the ability of operators to cope with their tasks at the optimum level. By integrating with hypermedia based training material into automation systems the training is brought right to where the operators work. The integration of hypermedia material can give them the possibility to get right information for their acute needs. Furthermore, they

Conference on Computer Aided Higher education, pp. 264-269. Espoo, Finland. (1991). Author's Guide. Lindfors, 1. documentation.


Lindfors, J. (1993) Training Materials for Process





Licentiate thesis, University of Oulu, Oulu, Finland, 70.


Lindfors J., Piirainen I., Leivisldl K. (1993) Combining simulation and animation in a hypertext training system. In: Proceedings of Hypermedia in Vaasa Conference, pp. 213-219. Vaasa, Finland. Lindfors, J., L. Yliniemi and K. Leiviska (1995) Experiences on the use of hypermedia material in training of process automation. To be presented in the IFAC Y AC'95 Conference, Beijing 22-25 August, 1995. Martin, J. (1990) Hyperdocuments and How to Create Them, p. 203. Prentice Hall, Englewood Cliffs, NJ, USA. Nelson, T., H. (1990) Literary Machines 90.1. Mindfull Press. Sausalito, USA. Oesch, K. (1993). Digitaalinen Maailma (Digital World, p. 368. Otava, Helsinki, Finland. (In

Finnish). Piaget, J. (1971) Structuralism, p. 153. Routledge and Kegan Paul, London, UK.