Designing web-based instruction: A human-computer interaction perspective

Andrew Dillon and E. Zhu

This item is not the definitive copy. Please use the following citation when referencing this material: Dillon, A. and Zhu, E. (1997) Designing Web-Based Instruction: A Human-Computer Interaction (HCI) Perspective. In B. Khan (ed.) Web-Based Instruction, Englewood Cliffs, NJ: Educational Technology Publications, 221-225.


The general interest in the World Wide Web (WWW) as a medium for sharing and distributing textual and graphic information has brought about an increasing number of instruction-oriented web sites and web-based instructional pages. These range from offering supplemental (or even duplicate) instructional materials to students on campus to providing opportunities for off-campus individuals to complete courses via WWW. This chapter briefly discusses the design of web-based instruction from an HCI perspective, raising issues which instructors and designers need to consider in the design of web-based instruction, and suggesting ways in which instructors and designers can build optimal web instructional sites and pages.

WWW and Web-based instruction

The World Wide Web is a hypertext/hypermedia information and communication system on the Internet. The specific features of hypertext/hypermedia such as linked nodes of information, multiple access paths to information, and if well designed, the ability to pursue information at increasing levels of detail for example, are considered to distinguish the new medium from the traditional print medium in several ways. The information in a hypertext/hypermedia system is supposedly non-linear and structured in chunks or nodes rather than in traditional paragraphs and sections (though similarities abound, and most empirical evidence suggests few readers of paper documents ever read in a linear fashion). The method of manipulation is scrolling and clicking with a mouse rather than turning pages with hand. Also, the size of the information space is largely hidden from the user. Because of these differences, the conventional and familiar model people use to interact with print medium may lose its effectiveness while interacting with electronic medium, and give rise to feelings of being lost or overwhelmed in the information space. These differences poses significant challenges as much as opportunities to designers of electronic documents in general and web-based instruction in particular. Indeed, most of the empirical comparisons of hypermedia and paper have demonstrated that there is a long way to go before the apparent advantages of the new medium can be turned to tangible benefits for learners (Dillon 1996).

Instruction can be defined as a way of organizing and sequencing information in order to maximize the transfer of information from teacher to learner. The design of any instruction usually involves the use of instructional theories, design models, and strategies. Campbell, Hurley, Jones, & Stephens (1995) in their design of WWW-based courseware adopted the ASSURE model (Heinich, Molenda, & Russell, 1993) as a general framework for the course and Gagne's sequence of instructional events as guides for evaluating the courseware. Alternatively, nstruction can be designed and delivered using a problem-based instructional and learning model. In the problem-based learning model, learning starts with the presentation of a real world problem. Students, provided with instructors' guidance and resource materials, are encouraged to dive into the problem, construct individual understanding, and finally find the answer to the problem. In a traditional setting, students may expect such things in a course as weekly readings, assignments, instructor's lectures, class notes, tests, and exams. In a non-traditional setting, students may expect of instructor's assistance, guidance, and scaffolding on individual or group work. No matter what theory or model of instruction is used, there are always certain expectations students have of a course. Because of these existing course-taking strategies in students and instructors, instruction usually possesses somewhat standard sequences including elements such as motivating the learner, explaining what is to be learned, helping the learner recall previous knowledge, providing instructional materials, providing guidance and feedback, testing comprehension, and providing enrichment (Dick & Reiser, 1989).

Most WWW pages provide a very informal learning environment, in which people access information provided by various organizations, universities, and even individuals and in which people attend to the selected information and explore subjects that are of interest to them. Generally speaking, the great majority of information on the web belongs to this category. That is, web-sites are not instructional in the strict sense but data sources. To qualify as web-based instruction, the site surely has to possess certain instructional elements intentionally designed to maximize information transfer as mentioned above.

Human-computer interaction and Web-based instruction

The field of HCI comprises the study of the interaction between humans and computers with the general aim of informing the design of more humanly acceptable technology. Since the field is multi-disciplinary in nature, there is no single theory that guides the study of human-computer interaction. However, traditional cognitive psychological views of the user have been dominant in the field and the present chapter will use information processing view of human cognition as a general theoretical framework to discuss issues in the design of web-based instruction.

Within this framework, humans are considered to process information impinging on their sensory modalities on the basis of the bounded parameters of perception and knowledge stored in memory (Card, Moran & Newell, 1983). As a limited processing system, humans actively attempt to automate repetitive cognitive acts through extraction of regularities in information available to them. >Within this framework, learners are seen as active seekers and processors of information. Learners select and attend to environmental aspects, transform and interpret information, relating new information to previously acquired knowledge, and organize material to make it meaningful.

A further charactistic of HCI is its emphasis on empirical methods to determine the most reliable and valid guidelines for interface design. Popular views of the Web as an "information superhighway" or hypermedia as a "liberating technology" are considered unconvincing to most HCI practitioners without supporting evidence that users experience the Web as such. Indeed, recent HCI analyses of the information revolution suggest that user evaluation of most new technologies is very poorly carried out, and in the case of hypermedia in particular, Landauer (1995) claimed to be able to identify only 9 scientifically acceptable evaluation studies ever being published in the literature on this subject, and the majority of these found the new technology to be poorer than paper for most users.

Issues in designing web-based instruction from an HCI perspective

From an HCI perspective, several key issues emerge in the design of web-based instruction: the tool, the learner, the tasks, and the environment (Shackel, 1991). In particular, focus must be on the learners and their tasks. HCI professionals seek to ensure that learners (as users) can in fact interact with the technology in a manner that is effective, efficient, and satisfying. While not normally concerned with learning per se, HCI practitioners do seek to devise information technology that can be used approriately by the intended users. In Web terms this would mean ensuring readability of the screen, adequate support for navigation, task-relevant command structures etc.

This brings us to an interesting perspective and one that is slightly out of favour among the current climate of Web-worship in higher education. The web is only another technology through which instructors can reach learners and deliver instruction. There is nothing magical about this new technology that requires us to reinvent instructional design. After all, humans have not changed significantly as a result of the emergence of the Web, and the principles of information flow, feedback, formatting, detail, etc. that have been developed over the last few decades are still relevant and applicable in instructional design. What has changed is our ability to apply these principles over distributed learner populations in higher fidelity than previously.

From an HCI perspective, our first goal must be to understand users (learners) and the nature of their task in as much detail as possible so that we can develop information technology that will prove acceptable to them and efficient to their task. In other words, HCI professionals strive for a sufficient understanding of users, their characteristics and differences, and their knowledge of the subject domain and experience of the system. They need to conduct an adequate analysis of the task, users' relevant information and skill needs in order to design a learnable and efficient instructional system. For example, users with extensive domain knowledge may prefer fairly high density of information on the screen and fewer explanations of terminology, but users with little or no domain knowledge may prefer low information flow and more explanations. Therefore, our design should be based on such analyses, otherwise, it is less likely to meet users' needs and to achieve intended results. In the same manner, HCI ensures that human factors in interacting with computers are appropriately addressed in the design. If we know, for example, that users read better with positive polarity, high resolution screens, and are likely to suffer less navigation problems with information that maintains rather than violates conventional structures, then we can go some way towards ensuring that in terms of basic human factors, the Web-based tool meets minimum usability requirements.

However such knowledge in itself is insufficient to guarantee learning will occur from using the system. It will only ensure that willing users are capable of interacting with the application in an efficient, effective and satisfying manner. Beyond this, HCI turns to instructional design for insights on how to take the well-designed or usable technology and apply instructional theory to its pedagogic use. Given the requirement for information to be perceived and processed before instruction can occur, HCI seeks to ensure the adequate perceptual and processing issues are addressed, while instructional theory can distinguish the pedagogic scenarios in which usable tools are applied in the design. In this manner, HCI seeks to ensure the ultimate usability and utility. This gives us a symbiotic relationship between two heretofore independent disciplines.


If we are to design usable and effective web-based instruction, our interaction design must be compatible with the information processing characteristics of the human mind as well as users' models of the instructional system. From human-computer interaction perspective, issues in the design of web-based instruction are our understanding of the system's special features, the user's model of the instructional system, the learning task, the learner, and web-based message design principles. Even with such knowledge, it is essential that the concept of learning is operationalized in a manner that renders it testable in the given context. An once operationalized, it must be tested on real learners performing real tasks, so that we may advance the state of WBI beyond mere presentation and hot-linking of text and graphics.


Campbell, J. K., Hurley, S., Jones, S. B., & Stephens, N. M. (1995) Constructing educational courseware using NCSA Mosaic and the World-Wide Web. Computer Neworks and ISDN System, 27, 877-896.

Card, S. K., Moran, T. P., & Newell, A. (1983) The Psychology of Human-Computer Interaction, Hillsdale NJ: Lawrence Erlbaum Associates.

Dick, W., & Reiser, R. A. (1989) Planning effective instruction. Englewood Cliffs, NJ: Prentice-Hall.

Dillon, A. (1989) Design the human-computer interface to hypermedia applications. In Jonassen, D. H. & Heinz Mandl. (Eds.), Designing hypermedia for learning. New York: Springer-Verlag.

Dillon, A. (1996) Myths, misconceptions and an alternative perspective on information usage and the electronic medium. In J. Rouet et al (eds.) Hypertext and Cognition. LEA: Mawhaw NJ. 25-42.

Gagne, R. M. (Ed.) (1987) Instructional Technology: Foundations. Hillsdale, NJ:Lawrence Erlbaum.

Heinich, R., Molenda, M., & Russell, J. D. (1993) Instructional Media and the New Technologies of Instruction (4rd ed.) New York: Macmillan.

Landauer, T. (1995) The Trouble with Computers: Usefuleness, Usability and Productivity. Cambridge MA: MIT Press.

McMillan, T. C. & Moran, B. P. (1985) Command line structure and dynamic processing of abbreviations in dialogue management.Interfaces in Computing, 3, 249-257.

Nielsen, J. , (1993) Usability Engineering. Boston: AP Professional.

Shackel, B. (1991) Usability - context, framework, definition, design and evaluation, in Shackel, B. and Richardson, S. (Eds.) Human Factors for Informatics Usability, Cambridge: Cambridge University Press, 21-37.

Wright, P. (1989) Hypertexts as an interface for learners: Some human factors issues. In Jonassen, D. H. & Heinz Mandl. (Eds.), Designing hypermedia for learning. New York: Springer-Verlag.