Instructional Technology Research Online

Interface Design for Computer-based Learning Environments

Marshall G. Jones
Northern Illinois University

James R. Okey
The University of Georgia

Research in the area of user interface design for computer-based learning environments (Jones, 1993) found that screen and interface design should be considered at the same time during the design and development process. Additionally, the research produced a list of interface design concepts and a corresponding list of guidelines for implementing those concepts. The concepts presented in this paper are broad issues to be considered during the design and development process. The guidelines that are associaàted with the concepts are intended to be flexible, and allow for the creativity of the individual designer, and the needs of a particular project.

Names for some of the concepts were taken from an analysis of the literature in computer-based instruction (CBI), computer-based learning environments, and human computer interaction (HCI). Names for the other concepts were emic categories generated by the participants in the study. The guidelines were derived through an analysis of the literature, an analysis of six commercially produced computer-based learning environments, and interviews with the designers and developers of the six computer-based learning environments.

Further research is being conducted to determine how designers and developers can implement these guidelines. If you are interested in either the progress of this research or discussing the issue of user interface design further, please contact the primary author of this paper at: MGJONES@NIU.EDU.

Concepts Of User Interface Design

Browsing (Jones, 1989; Laurel, Oren, & Don, 1992).

Browsing allows for the flexible exploration of the content of the program through a variety of controls. For example, browsing can be done topically by providing users with a list of the topics covered in the program through the use of a menu. Once a topic is selected, users can use methods such as clicking on right and left arrows to access related or extended material. While browsing should be flexible and exploratory, it should not be indiscriminate or uncontrolled. Users need to be able explore the pàrogram for new information, know where they found it, and be able to find it again.

Changes in State (Nicol, 1990).

Animation, movement or other visual effects used to provide users with a visual cue that a particular action is taking place is known as the concept changes in state. Screen wipes to the left and right are used to give users the impression that the program is moving to the next screen. Visual effects such as zooms, dissolves, and fades show users that they are going to a new topic within the program. Changes in state are intended to use the computer's ability to simulate motion to provide users with a visàual cue that a particular action is taking place, or that the users are "going someplace" in the program.

Closure (Jones, 1989)

The concept of closure deals with two aspects of information within a computer-based learning environment. The first is the organization of program information into manageable segments so that users are not overwhelmed by the amount of information contained in the program. Organizing information requires that methods be used to allow users the ability to access information in a controllable fashion. The second aspect of closure deals with how users know that a segment of information has been chosen or comàpleted. Implementation of the concept of closure helps users to organize information and feel that they are making progress in an environment that is complex and seemingly infinite.

Information Access (Laurel, Oren, & Don, 1992).

Implementation of the concept of information access provides users with the controls to conduct deliberate searches for information to fill a particular need. These information needs could be to search for an answer to a specific question, or to find and organize information for a report or presentation. Information access is sometimes manifested through user entered search terms, or by providing users with an accessible index to all of the information contained in the program.

Interactive Tools for Interactive Tasks (Reingold, 1990)

This concept suggests that tools for interacting with the information contained in the program need to be appropriate to the task, and capable of supporting the program theme. The form of the control needs to reflect its function, and the function of the control needs to be consistent with the program theme. For example, if the program is intended to simulate the control of an airplane, then the buttons and other manipulatable areas on the screen need to look like controls found in an airplane.

Interface Consistency (Laurel, Oren, & Don, 1992).

The concept of interface consistency deals with the users' ability to "scroll around" within text and audio segments in the same manner as they are able to do within text. While audio and video controls could be scroll bars, that is not the main point of the concept of interface consistency. The implementation of this concept suggests that the way users interact with different media types should not differ from one media type to another.

Media Integration and Media Biases (Laurel, Oren, & Don, 1992).

While these are two distinct concepts, the manifestations of them are more easily explained together. Media integration deals with allowing users to search for and retrieve information across different media types. For example, if a user types a search term into a computer-based learning environment they should get information on that search from as many of the different media types as are contained in the program. Media integration provides for the integration of information on a particular topic across àmedia types.

Media biases means that some types of media are seen as being more credible than others. Text is seen as being the most credible, while video recreations of certain events are seen to be less credible (Laurel, Oren, & Don, 1992). Additionally, video and audio should be presented as original source material, and not as mere supplements to text. The integration of many types of media on a particular topic can smooth the transitions between different media types and lessen the apparent biases between media tàypes.

Metaphors (Jones, 1989)

Metaphors help users define what the interface can do and what information is contained in a program by relating it to a known function or process taken from an area or discipline familiar to the users. Program metaphors such as books, book shelves, space exploration, or buildings with different rooms help users to organize the program's content and the access to the content contained in the program.

Modeling the Process and Coaching the User (Nicol, 1990)

The concept of modeling the process and coaching the user provides users with help in using the program and in finding specific information in the program. By the manifestations of such things as examples, overviews, or guided searches, modeling the process provides appropriate guidance for using the program and searching for information relevant to solve the problem at hand.

Progressive Disclosure (Jones, 1989)

The concept of progressive disclosure involves keeping information within the computer-based learning environment presented to the user in small, manageable segments. This helps reduce the apparent complexity of a system by presenting only the information relevant and available to the users at any point in time.

Searchability and Granularity (Laurel, Oren, & Don, 1992).

This concept refers to how chunks of media are stored, and whether or not users can search for specific pieces of information within different types of media. Computer-based learning environments contain information from a variety of media types, and all of the media types should be accessible via user searches. For example, key words can be searched easily in text, or in video.

Unfamiliar Territory. Nicol (1990)

Manifestations of the concept of unfamiliar territory provide users with visual or verbal cues that help them begin to learn their way around a new learning environment. Overviews, menus, icons, or other interface design elements within the program should serve as advance organizers for information contained in the program. Users new to a program need to have methods built into the program to serve as organizers for the information in the program.

Visual Momentum (Jones, 1989)

Visual momentum refers to how a program maintains a user's interest across successive displays. Visual momentum affects the usersÍ ability to extract and integrate information relevant to the program's learning theme across successive displays. High visual momentum implies that a user expends little mental effort to place new displays in the context of the larger program. Conversely, low visual momentum requires users to spend more mental effort in putting new displays into context than in using the progràam as a learning tool.

Way Finding (Jones, 1989)

Way finding is the use of verbal and symbolic information that tells users what types of information are contained in the program. Way finding is a concept that refers to the global properties of a program. It incorporates many different interface design elements into a cohesive whole to make the program easy to use and understand. The computer-based learning environment can be thought of as a landscape composed of individual displays with pathways linking them. But often times this landscape becomes compàlicated, and users become lost. Way finding is considered a method of letting users know where they are, what they can do when they are there, and where they need to go next. Icons, graphics, backgrounds, borders, and screen titles can help users find their way through a complex learning environment.

Selection Indicators

The concept of selection indicators refers to how the program marks a user's selection of a particular piece of information. Selection here refers to both the highlighting, or the visual and spatial feedback users receive when clicking on a button or menu item, and the marking of information that has been selected.

Control Types

Control types refers to the physical representation of the interaction controls in a computer-based learning environment. Interaction controls are things such as mechanisms for seeing one display at a time, mechanisms for selecting and searching for information, and mechanisms for controlling various types of media.

Tool Availability

Manifestation of the concept of tool availability refers to the method of only presenting users with interaction mechanisms that are available at a particular place and time in a program. Tools that are not needed on a particular display should be hidden or greyed out. Any tool that is visible to users should be active and available.

Meta Concepts and User Interface Design Guidelines

Guidelines for Browsing

Progressive Disclosure
Changes in State
Selection Indicators

1. Provide selectable areas to allow users to access information.

Some possible selectable areas to consider are buttons and hot text within a text field. The location of these elements on the screen will depend on the available screen real estate and the function of the selectable areas. It is recommended that the placement of selectable areas be tested with users to find out what is the optimal location for them. The selectable area will be a control element for users to access information. The control chosen will depend on the task to be done. Be consistent in implemàenting particular controls for particular functions. (Jones, 1989; Laurel, Oren, & Don, 1992)

2. Allow users to access information in a user-determined order.

This may be done through topic indexes of all of the information available in the program, or through the use of different types of menus. Another technique to consider is allowing for user-entered search terms. Exploration should be flexible, and the controls for accessing information should reflect flexibility. (Jones, 1989)

3. Provide maps so that users can find where they are and allow provisions to jump to other information of interest from the map.

Because the content of computer-based learning environments tends to be complex, using visual or iconographic maps may be too difficult to include and too confusing for users to understand. What we now consider as maps may have to change drastically. Text based indexes, outlines, and tables of content may be considered as alternatives to maps. (Laurel, Oren, & Don, 1992)

4. Provide users with feedback to let them know that they must wait when significant time delays are required for the program to access information.

Many programs use watch cursors, or text messages that ask users to "be patient." Another technique to consider is to offer users some type of visual stimulus to maintain their interest while the computer is preparing to present the requested information. However, visual stimulus should be chosen carefully and kept as simple as possible.

5. Provide users with information that lets them know that they are making progress.

Because the information in computer-based learning environments is not organized sequentially, there is no determined order that users must follow through a program. Consequently users may feel that they are working in a program without making progress. Some techniques that may be considered to give users a sense of accomplishment are path history mechanisms that tell users what information they have seen, or visual cues that indicate progression. Another technique would be to break the program up into chàunks that may give learners a feeling of accomplishment. (Jones, 1989) æ

 6. Arrange information in a non-threatening manner so that users are not overwhelmed by the amount of information contained in a program.

To accomplish this consider setting up information with an overview of a topic that acts as a top layer of information. As users need more information they can move progressively deeper through the layers of information. Moving through the layers of information could be done through the use of pop-up menus, buttons, or hot text. (Jones, 1989)

7. Provide visual effects to give users visual feedback that their choices have been made and registered by the program.

Buttons, icons, and menus can be highlighted or animated to show users that a choice has been made. Keep the highlighting or animation simple. The duration of a highlight or animation should be long enough to be registered visually by the users, but short enough so that users are not waiting for an animation to be over so that they can get to the information they want.

Visual effects, such as wipes, fades, and zooms may be used to indicate access to a particular piece of information. The use of these visual effects should be consistent. Do not use them simply because they are available, but rather use them to indicate a particular action of the program. Additionally, be consistent in the use of a visual effect. If wipes are used when clicking on a right arrow, use them throughout the program. If zoom outs are used when clicking on a menu item, then use zoom ins when retàurning to the menu. Above all, make the visual effect have meaning and be consistent with its use throughout the program.

Guidelines for Media Integration

Interface Consistency
Media Biases
Control types

1. Integrate the program information across different media types.

One method of providing for media integration would be to show all media sources available to a particular user search. For example, a single search may provide different information across information types. Try showing all of the information available for exploration by all media types on the same screen. (Laurel, Oren, & Don, 1992)

2. Provide information from all media types that is relevant, appropriate, and valid so that users know that the information is credible.

To make sure that this is done, research will need to be done to verify the veracity of the included media. For example if comical graphics are used with text, users may be given a message that text is more believable, but graphics are more fun. The message of all media used should reflect the program's purpose. (Laurel, Oren, & Don, 1992)

3. Provide access for all types of media in the same manner.

Use the same type of controls for the access of all media types contained in the program. If icons are to be used to access audio and video, use an icon to access text as well. Icons for accessing different types of information will be used. Video icons will be different from audio icons, but the size and location of the controls could be common. (Laurel, Oren, & Don, 1992)

4. Use similar control icons for all types of media.

Scroll bars may be used on video and audio as well as text. Arrows are often used that represent a VCR control for audio and video. Arrows are also used to move from one display to the next. Making the controls similar can lessen the information overload that users may experience working within a computer-based learning environment. (Laurel, Oren, & Don, 1992)

Guidelines for the use of Metaphors

Interactive Tools for Interactive Tasks
Tool Availability

1. Use a metaphor or theme for the program.

Not every program needs a metaphor. Not all programs can support a metaphor. Study the content carefully and decide what the program is intended to do. Providing users with a theme can be more helpful than a forced or inappropriate metaphor. (Jones, 1989)

2. Make the metaphor obvious to users.

Try prototyping the metaphor and its controls and testing it with potential users. Be careful of trusting your instincts on whether of not the metaphor is obvious, and get the opinions of people who are not familiar with the program. (Jones, 1989)

3. Make the metaphor applicable to the program's content.

If a metaphor can be used, use a metaphor that reflects the program's content. Users should not have to learn the meaning of a metaphor and the content of the program. Some metaphors may be intended to reflect the theme of a program and not necessarily the program's content. For example, a flight simulator would probably use the metaphor of a cockpit to show users how a plane works. However a program on different airline regulations might use a metaphor of a resource manual or book. (Laurel, Oren, & Don, à1992)

4. Provide navigational tools and interaction styles that allow users to interact with the information contained in the program in a manner that is consistent with the metaphor.

If the metaphor of your program is that of a book, then tools such as a table of contents, pages, and chapters could be used. Select tools that are consistent with the metaphor. Design icons that reflect the theme or metaphor of the program. As in the building of a Frank Lloyd Wright home, the form of a control should reflect its function. Additionally, the controls should be integrated harmoniously into the metaphor of the program. (Norman, 1990)

Guidelines for the use of Information Access

Sub-Concept: Searchability and Granularity

1. Allow for guided searches for specific information.

This may be done through the use of indexed lists of all the information contained in the program, or by letting users type in search terms. Additionally, designers may consider using some type of path for users to take through the program when searching for certain types of information. For example, if a program is on baseball, designers may provide predetermined paths such as "the evolution of the designated hitter rule," or "Joe Pepitone's career from 1965 to 1970."

2. Allow users to search for information across different media types.

This guideline may be one that is not employable at the moment. It accounts for idea or concept searching for information within different media types. While interactive video allows for access of designer determined sections, all video needs to be searchable for single words, phrases or ideas. Video needs to be cross referenced with other types of information in a user determined manner.

Searching for video and audio by key words is technically difficult. This type of searching may be accomplished through the use of verbatim transcripts of audio and video segments that are arranged by different ideas and concepts. These ideas and concepts could then be active, as hot text or hypertext links, allowing users to select them to go to the accompanying media. (Laurel, Oren, & Don, 1992)

Guidelines for the use of Unfamiliar Territory

Modeling the Process and Coaching the User
Way Finding
Visual Momentum

1. Provide cues such as maps and menus as advance organizers that help users conceptualize the organization of the information in the program.

Advance organizers can help users know what information is available in the program so that they have some direction about where they need to go in the program. (Nicol, 1990)

2. Use a fixed format of frames to keep the information at the same place on screens.

If more than one format for screens is needed, keep the format constant for individual sections. (Jones, 1989)

3. Provide users with program orientation.

Video overviews, overviews in the program documentation, and overviews in the program can help orient users to the amount and type of information in the program. (Nicol, 1990)

4. Provide users with information to let them know where they are in the program.

Section titles, standard borders for specific types of information, constant backgrounds for a particular section, and even icons help users can let users know where they are and what they can expect. Additionally, using different shapes can let users know where they are in the program. (Jones, 1989)

5. Use location indicators and progress reports to let users know where they are, where they need to go, and how long it will take them to get there.

Location indicators and progress reports let users know where they are and where they need to go. These location indicators may be likened to the signposts or mile markers one would see while driving on a highway that tell you what road you are on and how far it is to the next town. These are particularly useful when users are trying to solve a problem or answer a question provided for by the program. Location indicators and progress reports may be represented through text messages, graphics, or pop-up wiàndows. (Jones, 1989)

6. Choose specific fonts, font sizes and font characteristics to represent certain types of information.

With the proliferation of high resolution display devices, designers no longer need to be as concerned about the technical problems associated with what types of fonts and font characteristics are used on the monitor. Using a particular font in a particular location or for a particular portion of a program can aid users when searching for screens that contain the type of information they are searching for. Font characteristics such as bold, italic, and underlining can be used to designate key words or woràd that are hot or active. (Jones, 1989; Nicol, 1990)

7. Provide users with immediate descriptions of program controls on the same screen as the control.

Users should be able to have the purpose and function of controls explained to them on the same screen the controls appear on. An example of doing this is found through the use of balloon help. Balloon help is a feature in Apple Computer's System 7 software. When balloon help is activated, users can simply put the cursor on an object on the screen and a message will appear that describes the function of that object. While none of the programs analyzed in this study used balloon help, two of the designers ànterviewed stated that a similar practice could be useful in user interface design for computer-based learning environments. Balloon help could be used as a manifestation of the concept of unfamiliar territory to let users know what the function of different icons and buttons are without having to leave a screen to go to a help screen, or look up the function of a control in the documentation. (This guideline was suggested by three designers. It is not mentioned in the literature or manifested in the progràams.)

The aforementioned guidelines provide designers with a conceptual framework that can help organize the challenges in designing effective user interfaces. These guidelines do not tell designers things such as when to use an icon, and what type of icon to use. The types of icons used will depend on what the icon is intended to do, and what type of control it is intended to represent. While I would feel fairly safe in advising designers to use a printer icon to represent the function of printing in a computer-based learning environment, I could not tell them which printer icon to use without knowing such things as the backgrounds of the users and the type of printer to be bundled with the learning environment. Knowing that there is a need to represent the function of printing is the important thing. Deciding how that should be represented should be particular to an individual program.

Consider the dashboard of your first car. On the dashboard were a variety of controls that would do things such as turn on your lights, start your windshield wipers, tell you how fast you were going, and how much gas you had in your car. The car you are driving today will let you do all of these things, and tell you all of the same information. But chances are the way that you control your headlights and windshield wipers, and the way your speed and fuel level are displayed, is strikingly different from tàhe way it was done in your first car. Even though the representation of those controls were different, both cars got you where you needed to go, and helped you access the tools and find the information you needed to get where you needed to go. If you drive someone else's car, it may take you a moment to find the controls you need, but most of us can figure out how the dashboard of most cars work because we have previous experience with those kinds of controls and what they are intended to do.

Interfaces for computer-based learning environments are analogous to the dashboards of cars. There are controls you need, such as buttons, menus, and icons. There is information you need to know, such as what screen you are on, how long a video clip is, and how many screens are there in a particular section. But where most of us have many years of experience driving a car, we do not have the same experience in designing user interfaces. What these guidelines offer is a framework to begin assimilating the information that is needed in a user interface. Concepts such as way finding and media integration can help serve as frameworks on which to place the types of information needed to control a user interface. Knowing what these concepts are and what types of information they are intended to represent will help designers know what types of information are needed by users, and give the designer the flexibility to provide for the access and control of this information in an effective and appropriate manner. As new ways of providing for the same controls become available, the framework can accommodate them, and as totally new concepts arise, the old framework can provide the experience needed to determine how best to provide for these new concepts within the user interface.

Further Considerations for User Interface Design

While the previous section focused on specific interface design guidelines, this section addresses some considerations for the design of user interfaces for computer-based learning environments that cannot be represented as guidelines. These considerations reflect a synthesis of the suggestions from the designers interviewed for this study and information from the literature and program analysis that is important, but may not be related to a concept of interface design.

Designing an interface is oftentimes a personal experience where designers draw upon past experiences outside of the area of computers to help them conceptualize the user interface. The experiences of the designers interviewed for this study are reflected in these guidelines. Readers should try and relate their own experiences to these guidelines as well.

Build interfaces based on previous work. Many interfaces are not developed anew for a particular program, but are rather extensions of interfaces developed for a previous program. Many of the designers stated that the interface used in their programs was one that evolved from a previous program, or from a prototype of the program. By using previously designed interfaces, designers have a better understanding of where the interface will break down, what worked and did not work the last time, and how to makàe it work better this time. Additionally, using an interface that is similar to a previous interface may mean that users of a program are looking at an interface that is familiar to them.

Do as much as you can, but deliver the product. It is easy for designers to get caught in the trap of "feature-itis." During the design and development process, designers want to make the program as good and as attractive as possible. During the development process, ideas and techniques arise that can make the program more interactive and easy to use. While designers should include as many of these as is feasible and desirable, there comes a time when a designer must let go of the product and deliver it.

Even if you don't know what to call it, you can still develop it. Never be afraid to push the envelope of what you can imagine and what the program can do. The field of interface design is suffering from a lack of descriptive and consistent nomenclature, so it may be difficult to describe exactly what a new or novel interface design element is. Technology is changing rapidly, and what we can do now may be obsolete next year. While designers are encouraged to use designs that are familiar to themselves and

 Start with a sound design and stick to it. When designing a computer-based learning environment, there are a number of parts of the program that must be designed. In the field of instructional technology, we concentrate on the design of instructional materials. We believe in and practice the use of a systematic design process. This same care should be taken when designing an interface for a computer-based learning environment. Start with a sound design, prototype it and subject it to formative evaluations. Work with the prototype and allow users to work with the program. Keep notes of what works and does not work, and make changes as they are needed.

Think divergently when you design. It is difficult for designers to elaborate on how they got their ideas and inspirations for a user interface. There are designers who said that they tried to incorporate ideas from the literature, but the literature was different for different designers. One designer said that the literature she looked at was from CBI. For another designer, the literature was visual design, while yet another came at the design problem from an architectural background. Beyond simply what type of literature they were looking at, other things influenced the designers as well. Past experiences, paintings they had seen, plays and television shows they had watched, and novels they had read were but a few of the things that influenced the design of the interface in one way or another. One designer even claims that watching ants move in and out of an anthill inspired his conception of program interaction. The point is that it is not only the literature in CBI, learner control or some other academic field that will influence your conception of the interface. Nearly everything you have done will influence it. Therefore is important to have the time to reflect, and let your mind wander to come up with different ideas and conceptions about the user interface.

Design believable and meaningful interaction. Interaction in computer-based learning environments is often limited to pointing, clicking, and dragging. This is done because these are the things that can be done with available technology. As technology develops, it will become possible to interact with program content in many different ways. Voice recognition and virtual reality were mentioned by different designers as the direction that interface design will take in the future. But at the moment we are co

 The above section details considerations of interface design that were present in the interviews with designers and the analyses of the literature and the programs that are not directly related to the five major categories. The relationship between these considerations and the categories exists, but it is a relationship that must be realized by an individual designer. For example, each designer will bring their past experiences with them to the design process. Experiences such as previous interfaces they may have designed, their individual design philosophies, and the methods they use to create and think creatively will affect how they design a user interface. These are experiences that each designer must be aware of, and integrate into the design of any new interface. One cannot tell a designer which experiences to draw upon, or how to integrate these experiences into the design of a new interface. That is a decision that must be reached by each individual designer. By combining the specific guidelines with the considerations listed above, designers can create interfaces that account for the various decisions that are made when designing the user interface for a computer-based learning environment.

Implementing the Guidelines

The guidelines presented in this study do not offer the reader a set of specific instructions of what to do and when to do it when designing a user interface for computer-based learning environments. What is done will likely depend on a number of factors ranging from the technical limitations of the computer system to the financial constraints of the project. It is safe to assume that during the design phase of a computer-based learning environment there will be a number of different types of people worki

 For example, when considering the implementation of the concept browsing, and the guideline Allow users to access information in a user-determined order, there are a variety of controls or elements that could be used. If you are considering the element "buttons" as they would be used to support browsing, then a number of concerns should be addressed. What will the button do? What should the button look like? When should it be available? How should it be highlighted when selected? There are numerous ways t

 The decisions made about how to best implement a particular guideline should not be made without careful consideration of such issues as who the users will be, what type of system the program will be running on, and the fiscal parameters of the design and development process. Consequently, the implementation of the guidelines will likely be different for the design of different programs.


Jones, M. K. (1989). Human-computer interaction: A design guide. Englewood Cliffs, NJ: Educational Technology Publications.

Jones, M.G. (1993). Guidelines for screen design and user-interface design in computer-based learning environments. (Doctoral Dissertation, The University of Georgia, 1993). Dissertation Abstracts International, 54 (9), 308a - 309a.

Laurel, B. (1991). Computer as theatre. Menlo Park, CA: Addison Wesley.

Laurel, B. (Ed.). (1991). The art of human-computer interface design. Menlo Park, CA: Addison Wesley.

Laurel, B., Oren, T., & Don, A. (1992). Issues in multimedia design: Media integration and interface agents. In M. M. Blattner & R. B. Dannenberg (Eds.), Multimedia interface design. (pp. 53-64). ACM Press.

Nicol, A. (1990). Interfaces for learning: What do good teachers know that don't? In B. Laurel (Ed.), The art of human-computer interface design. (pp. 113-123). Maidenhead Birkshire: Pergammon Infotech Limited.

Reingold, H. (1990). An interview with Don Norman. In B. Laurel (Ed.), The art of human-computer interface design. (pp. 113-123). Maidenhead Birkshire: Pergammon Infotech Limited.

Cite this document as:
Jones, Marshall G., & Okey, James R. Interface Design for Computer-based Learning Environments. [Online] Available, February 21, 1995. 

Research Online | Features | Links | Information
Instructional Technology Research Online