Instructional Design
Interactive Design
Interactivity Defined
Interactive Engagement
Modes of Interaction
Levels of Interactivity (ICW)
Active Learning
Learning Principles
HTML Form Elements
Web-based Interactivity
CourseBuilder Interactions
Testing & Evaluation

  Instruction > Interactive Design

Interactive Design

"The only way to improve performance is to perform."
  Roger Schank

Interactivity Defined

David Fortin (1997) has offered a definition of Interactivity that is appropriate across the differing contexts of information access, instruction, and performance support:

"The degree to which a communication system:
can allow one or more end users to communicate alternatively as senders or receivers
with one or many other users or communication devices,
either in real time or on a store-and-forward basis,
or to seek and gain access to information on an on-demand basis,
where the content, timing, and sequence of the communication is under the control of the end user, as opposed to broader basis."
    Fortin, cited in Dholakia, Zhao, Dholakia & Fortin, 2000, p. 4

From a perspective focused on User Interface design and new media, Ray Kristof and Amy Satran (Interactivity by Design, 1995) offer the following description of interactivity:

"Computers and software are tools, and their purpose is to help people interact with words, numbers, and pictures. What's different today is that computer are being used for activities that never used to be considered interactive — such as reading, watching, or simply being entertained. And this means that the audience, not the designer, now controls the sequence, the pace and most importantly, what to look at, and what to ignore." (p. 1)

As pointed out by Katy Campbell ("The Web: Design for Active Learning", 1998) the importance of interactivity for instruction is more than just interface design; it establishes an environment of active learning:

"Interactivity in instructional design takes on more complex meaning. In good instruction, interactivity refers to active learning, in which the learner acts on the information to transform it into new, personal meaning. In a constructivist sense, the learner co-constructs meaning by exploring the environment, solving a problem, or applying information to a new situation that he/she helps to define." (p.1)

The Campbell article provides an excellent overview of Constructivist frameworks and Cognitive Theory as they relate to interactivity. Tables defining key elements and example links are provided. Schank & Cleary, Engines of Instruction (1995) is cited as a primary source. The following is Campbell's summary Schank & Cleary's "Five Teaching Architectures".

  • Simulation-based Learning by Doing: Humans learn by doing. Learning a new skill ideally includes practice with the actual skill, accompanied by coaching, advice, and correction by an expert. The nature of this architecture is active participation.
  • Incidental Learning: Much information to be learned is not interesting. List and facts are learned naturally, however, by engaging in fun tasks whose outcomes are interesting. In this design these base facts are imported almost covertly. This is the strategy in many learning games.
  • Learning by Reflection: This strategy is appropriate when learners need to ask questions about their learning or need someone to discuss their ideas. The instructor helps the learner analyze the problem and find ways to continue in their progress.
  • Case-based Teaching: Imparting information at the precise moment of need has been recently described as "just-in-time" learning. Learners may consult and expert when experiencing difficulties. Experts have a large repository of stories to tell, or cases, which illustrate key learning elements relevant to the task.
  • Learning by Exploring: When learners become involved in tasks, they naturally generate questions. These questions are optimally answered at the time they are generated. The key to this architecture is conversation, either virtually or in face-to-face interaction


Interactivity Levels
Performance Description

A navigational ability to view, link and access information as fixed media

Navigation involves perceptual aesthetics and utility. Messy screen design generates cognitive overload and distraction. An excellent resource for design of effective interfaces is provided by Bruce Tognazzini (AskTog.com) "First Principles of Interaction Design".

Four "golden rules" of interactive navigation design define the cognitive need of the user:
   Know where are you are
   Know what you can do
   Know where you are going or what will happen
   Know where you've been or what you've done

Respond to test & quizzes, and embedded exercises; a functional ability to access content, choose from multiple paths through subject matter, search databases, locate and manage information
Explore and respond to simulations and immersive environments; an adaptive capability where the user can adapt the information space and the conditions of engagement. Examples include: conversation, storytelling, use of productivity applications, sports, games, and creative arts.


Principles of Interactive engagement

Principles of Interactive Engagement describe the ways in which an active learning environment can be created. The goal is to optimize information processing (encoding and retrieval) and as well as motivation (metacognition). The issues of "Motivational Design" are described in another section of this website.

Interactive Engagement ideally requires that the learner be:

 Situated in a mode of active responding;
 Required to practice with guidance & feedback, and
 Offered independent practice with naturalistic cues.

Clark and Mayer (2003) present the principles of Practice, Learner Control and Problem-solving — with research data to substantiate their conclusions. There are nine principles which they found most important:

  • Initial Learner Motivation Principle establishing lesson relevance and building learner confidence engages motivation to stay on task
  • Activating Prior Knowledge Principle encoding of new learning must integrate with existing knowledge; activating long-term memory relevant to new information can improve learning
  • Selective Attention Principle selectively attending to what is most relevant in the learning task by adding cues can improve learning; eliminating distractions which divide attention can improve learning
  • Elaborative Rehearsal Principle — elaborative rehearsals can improve learning (supports the construction of schema to encode and retrieve long-term memory)
  • Demonstrations & Practice Principle — observation strengthens learning; structured opportunities to engage with the content by responding to a question or taking an action to solve a problem can improve learning
  • Mental Models Principle — the use of mental models can improve learning (supports the construction of schema to encode and retrieve long-term memory)
  • Learner Control Principle — learner control works best to improve learning when the learner has prior knowledge of the subject and when he has good metacognitive skills; adaptive control can improve learning
  • Problem-solving Principle — problem-solving skills depend on very specific job knowledge and metacognitive skills; engaging in problem-solving can improve learning
  • Metacognitive Skill Principle — the "executive function" of working memory can be trained to monitor various facets of information processing, and then adjust strategies to improve learning; metacognition can particularly engage motivation for learning

See Clark & Mayer, E-Learning and the Science of Instruction (2003), and Ruth Clark, Building Expertise, (2nd Ed., 2003), p. 29-31.


Modes of Interaction

Modes of Interaction
Use of Media &
Delivery System
Learner Content
Interaction between the learner and the learning material as presented online. May involve learners singly or in groups. Beyond simple HTML, such as Javascript, Flash, Java, Shockwave, streaming audio & video
Learner Teacher
Interaction between teacher or other subject experts. May be initiated by either party. May be synchronous or asynchronous. Text, graphic, audio or video; physical classroom or lab; virtual online classroom; chat; threaded discussion; instant messaging; email
Learner Learners
Interaction between learners. May be synchronous or asynchronous. May be in small or large groups — structured or unstructured. Text, graphic, audio or video; physical classroom or lab; virtual classroom; learning communities; communities of practice; chat; threaded discussion; instant messaging; email

In a learner-centered model of interactivity, the learner's use of communication technology provides experience of meaning, participation and sense of control.

Interactive Environment
Key Experience
The learner engages socially in a conversation which is goal oriented and one-to-one or one-to-many, or engages in responsive action with interactive content. The computer delivers responsive behaviors which enable user options and action. Ideally this interactive content aims at appropriate individualization or personalization which enhance the participation, meaning and sense of control.
The interactive content engages the learner in meaningful activities, with a level of adaptive response and /or immersion in the learning experience. Action must have an authentic connection to the learner's world (Laurillard, 1994)
Sense of
A significant level of agency or influence for the learner through the interactive experience: "The satisfying power to take meaningful action and see the results of our decisions and choices" (Murray, 1997) The "sense of control" is intimately tied to the four intrinsic rewards identified by Kenneth Thomas in his model of Intrinsic Motivation which is discussed in another section of this site.

Levels of Interactivity: DoD — ICW Model

The Department of Defense ICW model has been developed over many years. It presents interactivity as a two-way communication in which stimuli/response is direct and continual. Interactivity describes the degree of learner involvement and interaction in the instructional activity. According to the Interactive Courseware (ICW) model, there are four levels of interactivity:

DoD Interactive Courseware Model (ICW)
Levels of Presentation —Interactive Media Instruction (IMI)

Level 1: passive

The student acts solely as a receiver of information. Interactivity at this level is sometimes characterized as "page turning".

It is the lowest level of ICW development in that Level I lessons are linear (one idea after another) and are used primarily for introducing an idea or concept. There is little interaction other than the student touching the screen or using a keystroke or mouse click to continue. The media used are primarily graphics (not complex) and text.

Level 2: limited participation

The student makes simple responses to instructional cues.

This level allows the student to have increased control
over lesson presentation. There is more interaction, such as using a light pen to rotate a switch. Computer managed instruction (CMI) is implemented to keep track of and analyze student performance. The media used are audio, video, graphics, animation, and text.

Make the student response use lesson objective cues that cause the student to interact with the screen information.  Use remediation extensively to reinforce the learning objectives.  Remediation causes a particular section of the lesson to be repeated (a ‘no go’ situation).  Use remediation by causing a branching action called a ‘loop.’  The loop can, in order of its complexity, provide feedback about that particular section, repeat/replay that particular section, or can provide entirely new instruction about that particular ‘no go’ section.  Use simple branching for other instruction.  Simple branching permits the student to veer from the main instructional path to seek additional information about a subject, however the student ultimately returns to his departure point.  Instruction remains essentially linear, even though remediation loops, simple branching, and menus are used.  Except for slight (i.e. remediation) digressions, the student moves through the instruction using a preplanned path.  The ICW remains linear, but uses simple branching.  Make use of typical input/output peripherals throughout the lesson.

Level 3: complex participation

The student makes a variety of responses using varied techniques in response to instructional cues

This level provides a high degree of interactivity, extensive
branching, maximum remediation opportunity (supports multiple levels of errors), real-time event simulation with minor equipment limitations, capability to interface with other output devices. Very little prompting is provided but rather provides information that the student will later apply to solve a problem. It has a high simulation presentation and involves the recall of more complex information. The learner has increased control over the courseware. Multiple software branches 2-3 levels up support remediation.

Provide the student decision points from which multiple branching will occur; multiple branching provides more reality to this level.  Branching follows a student decision or input; create a multiple branch by allowing a student to enter into a decision point, each decision has a corresponding branch and each of the branches will, in turn, lead to other decision points with corresponding branches.  So a branch can lead to a branch that leads to another branch; typically, use no more than three or four branches in a multiple branching sequence.  Remediation, if any, occurs at the end of an instructional block or at an important learning point (i.e. ‘go/no go’ condition).  Feedback is typically used at the end of an instructional block to apprise the student of his progress.  The ICW is only vaguely linear:  the student moving from a start point to an end point; but because of the multiple branching feature, the student is able to progress through the ICW using any of multiple paths.  Make use of typical input/output peripherals throughout the lesson to simulate the operation or movement of physical items.

Level 4 : real-time participation

The student is directly involved in life-like set of complex cues and responses.

Real-time or full (virtual) simulation. The instructional flow is essentially one-way, from the learner. However the interactive courseware does no prompting whosoever. Errors can be compounded and feedback and remediation are not given in the middle of the lesson, only at the end.


Active Learning  

"Active learning isn't a new idea. It goes back at least as far as Socrates and was a major emphasis among progressive educators like John Dewey. And yet, if you peer into many university classrooms, we seem to have forgotten that learning is naturally an active process. It involves putting our students in situations which compel them to read, speak, listen, think deeply, and write. While well delivered lectures are valuable and are not uncommon, sometimes the thinking required while attending a lecture is low level comprehension that goes from the ear to the
writing hand and leaves the mind untouched.

Active learning puts the responsibility of organizing what is to be learned in the hands of the learners themselves, and ideally lends itself to
a more diverse range of learning styles."

  Bernie Dodge, SDSU

The following model has been adapted from Bernie Dodge, Dept of Ed Tech, San Diego State University, as a way of developing learning environments on the web. The complexity of the design challenge is chunked into three domains.

Designing Active Learning With the Web
Possible Inputs:
Cognitive Process

 References, Articles
 Images, Sounds
 News reports,
       press releases
 Dynamic data sources
 Project / Field reports
 Group collaboration
     (social interaction/
     communication as
      learning input)

 Compare / Contrast
 Concept Creation
 Policy Formation
 Group collaboration
     (social interaction as
     learning process)

 Oral Presentations
 Written reports
 Video conferencing
 Audio conferencing
 Web Publishing
 Group collaboration
     (social interaction/
     communication as
     learning output)


Interactions are designed to engage the learner in input, transformation and output tasks. This model provides a simplified way of thinking about Gagne's Nine Events of Instruction, and about choosing Blended Learning activities.


Learning Principles Affecting Interactivity

Learning Theory
Principles, Issues & Techniques

Learning occurs when new behavior or changes in behavior are acquired as a result of an individual's response to antecedent and consequent stimuli. The external environment shapes an individual's behavior by presenting antecedent stimuli that prompts a behavior, and consequent stimuli that reinforces (strengthens) the behavior.

Issues: Increasing rates of active responding; prompting & fading; schedules of reinforcement; demonstration; practice; environmental design


Learning is a change in knowledge stored in memory. Information processing is governed by an internal process — rather than external circumstance as emphasized by behaviorism. The process includes selecting information (attention), translating information (encoding), and recalling that information when appropriate (retrieval).

Issues: Perception; attention; information processing; memory; motivation; forming mental models; transfer of learning & active learning; situated learning; modeling; scaffolding & fading; case-based learning; simulations; problem-based learning


Learning is the process where individuals construct new ideas or concepts (schema) based on prior knowledge and/or experience. Individuals construct knowledge by working to solve realistic problems, usually in collaboration with others. This theory builds upon cognitivism, but emphasizes the importance of social interaction, discovery, and the personal construction of meaning from experience.

Issues: Knowledge construction; schema theory; mental models; connectionism; hypermedia & multimedia; authentic tasks; social negotiation; self-regulation; social development


HTML Form Elements

Interactivity can be created either with DHTML (JavaScript, HTML, CSS, DOM) or with Flash animation. Interactive responses are typically structured by HTML tags called "Forms" in which user input from the following control elements are submitted to a web server by clicking a button:

  • Radio button
    • True/False question only has one correct answer
    • Multiple choice, but only one choice is correct
    • Horizontal scale layout
  • Drop-down list box
    • Single selection
    • Multiple selection
  • Check box
    • Single selection
    • Multiple selection
  • Text-entry box
    • Single word: question stem followed by a text box
    • Numeric: a numeric items allows only digit to be submitted
    • Multi-word: multiple blank text boxes to fill in for one question
    • Paragraph: open-ended question with potentially lengthy response for short answer
    • Essay: free text answer (scrolling text box can provide larger space for text entry)
  • Clickable image (hot spot)

Types of Web-based Interactivity

Learner interactivity can be supported by the following web-based techniques for creating quizzes, tests, practice exercises, or tasks:

  • Multiple choice (single correct with multiple distractors)
  • Multiple, multiple choice (multiple correct with multiple distractors)
  • True / False
  • Drag & drop (graphic manipulation)
  • Fill in the blanks (in-line text entry)
  • Matching
    • Match items to category in which they belong
    • Match labels to graphics
    • Match graphics with graphics
  • Explore Interactions
    • View alternative scenarios & evaluate ("what happens when")
    • Demonstrate observation skills
    • Alter a "what if" variable to change a scenario
    • Find information (retrieve facts; elaborate concepts)
    • Demonstrate computer & internet skills
    • Demonstrate research/inquiry skills
  • Button interactions
    • Show animation
    • Show movie
    • Invoke task or step sequence
  • Graphic choice (select correct graphic from group)
  • Visual identification (select a correct hot spot within a graphic)
  • Sequencing (ordering correct sequence)
  • Short answer (text input)
  • Essay (text input)
  • Timer interactions (response must occur within time limit)
  • Slider interactions
    • Change variable in a numeric calculation or graph
    • Change the graphic display (zoom in/out, pan, scroll)
  • Game interactions
  • Simulations (practice environment with prompting & feedback)
  • Collaboration interactions (peer to peer communication & tasks)
  • Interaction enhancements
    • Audio
    • Video
    • Graphics
    • Dynamic data
    • Learner personalization

The section called Testing and Evaluation describes the content principles which guides the selection and customization of the interactive models:

  • Question types that can be used for quizzes, tests or interactive practice is listed
  • Bloom taxonomy provides a list key words which articulates the level of instructional objective within the cognitive domain

These content and technology structures provide a means of implementing the Active Learning model via the web.

CourseBuilder Interactions & Controls

Dreamweaver MX has an add-on tool called CourseBuilder which automates building of learner interactions:

  • Interactions
    • Multiple Choice
    • Drag & Drop
    • Explore
    • Text Entry
    • Action Manager
  • Controls
    • Button
    • Timer
    • Slider 

Web Resources





  eLearning with Dreamweaver MX: Creating Online Learning Applications --- Betsy Bruce

  CourseBuilder for Dreamweaver f/x & Design -- Donna Baker

  Using Dreamweaver to Create E-Learning: A comprehensive guide to CourseBuilder and Learning Site (2001) -- Garin Hess and Steven Hancock


 Utah State University OpenCourseWare is a free and open educational resource for faculty, students, and self-learners. Dr. David Wiley offers an online course, Understanding Online Interaction.

  Campbell, Katy (1998). "The Web: Design for Active Learning", http://www.atl.ualberta.ca/documents/articles/activeLearning001.htm

 Clark, Ruth and Richard Mayer (2003). E-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning. Jossey-Bass Pfeiffer

Clark, Ruth (2003). Building Expertise: Cognitive methods for Training and Performance Improvement , ISPI (2nd Ed.)

 Dholakia, Roy; Miao Zhao, Nikhilesh Dholakia, & David Fortin (2000). "Interactivity and Revisits to Web sites: A Theoretical Framework", http://ritim.cba.uri.edu/wp/

Dodge, Bernie (1998). "Active Learning on the Web", Dept. of Educational Technology, San Diego State University, http://edweb.sdsu.edu/people/bdodge/Active/ActiveLearning.html

Fortin, David R. (1997). "The Impact of Interactivity on Advertising Effectiveness in the New Media", unpublished dissertation, Kingston, R.I.: College of Business Administration, The University of Rhode Island.

 Kristof, Ray & Amy Satran. Interactivity by Design: Creating & Communicating with New Media, Adobe Press, 1995

 Shedroff, Nathan (1994). "Information Interaction Design: A Unified Field Theory of Design", http://www.nathan.com/thoughts/unified/

 Shedroff, Nathan (2002). "What is Interactivity Anyway?"

  Schank, Roger, & Chip Cleary (1995). Engines for Education. Hillsdale, NJ: Lawrence Eelbaum Associates. Website: http://www.engines4ed.org/ Online hyperbook: http://www.engines4ed.org/hyperbook/index.html

 Journal of Interactive Media in Education (JiME)

 Department of Defense (1991). "Development & Management of Interactive Courseware (ICW) in Military Training"

 Golas, Katharine (1993). "Estimating Time to Develop Interactive Courseware in the 1990s" Proceedings of the 15th Interservice/Industry Training Systems and Education Conference, Orlando, FLA, Nov 29-Dec 2, 1993

 Department of the Army (1996). Multimedia Courseware Development Guide

 Department of the Navy: Human Performance Center — HPC Spider


  ©2003 Cognitive Design Solutions, Inc.