CHI 97 Electronic Publications: Late-Breaking/Short Talks
CHI 97 Prev CHI 97 Electronic Publications: Late-Breaking/Short Talks Next

Responsive Graphs: Understanding Engineering Concepts Through Interactive Experience

Eviatar Shafrir
User Interaction Design Group
Hewlett-Packard Company, Bldg. 101G
1266 Kifer Road, Sunnyvale, CA 94086 USA
shafrir@ptp.hp.com 1-408-746-5237

Lee Smith
Department of Physics
Stanford University
Stanford, CA 94305 USA
leesmith@kaos.stanford.edu 1-415-497-6225

ABSTRACT

Understanding scientific engineering concepts requires learners to correlate between different model representations. Simple engineering models are formulated mathematically, visualized with one or more graphs, and verbally interpreted with engineering terminology. Past [4] and present systems [1] allow learners to modify a limited set of model parameters but not the graph-plot itself. This paper describes a set of interactive learning models consisting of standard interactors together with novel direct-manipulation Responsive Graphs. By setting values with sliders and visually modifying graph-plots, users qualitatively explore and comprehend abstract engineering concepts through interactive experimentation. All model representations are continuously updated in real-time enabling users to compare and move between different model representations. These highly interactive learning experiences are the result of a collaboration between interaction designers seeking direct manipulation of graphics and engineering domain-experts.

KEYWORDS

interactive learning environment, interaction design, mathematical modeling, Java(TM) applet.

© 1997 Copyright on this material is held by the authors.



INTRODUCTION

Most engineering models are formulated mathematically and visualized with multiple graphs. While static snapshots found in printed textbooks are capable of displaying a model's dependence on one changing variable, the display of the dependence on more than one variable is difficult and requires numerous graphs. When multiple visual facets of a model are presented, the problem is exacerbated. Static snapshots of dynamic models do not explain how components inter-relate and change one another.

Most dynamic software models provide sliders that control one parameter of a plotted algebraic expression [1] or the behaviors of an endless number of physical objects [4]. A knob is positioned directly over parameters of a polynomial formula in video [2]. As the knob turns the polynomial plot smoothly updates. Yet none of these formula-based graphic models allow direct manipulation of the plotted line itself!

Existing learning models have overlooked this interaction style not due to a lack of computation power or to irreversible models, but, we believe, due to a failure to appreciate published educators' observations [5]. Learners need to move back and forth from one representation to another and to view the same model in different conceptual representations. Learning happens through the experience of directly manipulating change in a model and observing coupled behaviors in other representations of that same model [3].

Figure 1. An illustration of a Responsive Graph interactor showing the direct manipulation of graph elements.
For the purpose of publishing complex engineering texts online, we constructed generic Responsive Graph interactors that allow direct manipulation of plotted lines as shown in Figure 1. Viewers interacting with Responsive Graphs together with traditional interactors may pose and answer questions such as: ``What does an AM radio signal look like with modulation factor m=0.5? What values does an AM model generate when I shrink the sidebands? What happens when the carrier frequency is stretched?'' 'Shrink' and 'stretch' are not precise engineering terms yet they are used when asking questions about analog signals, questions that Responsive Graphs help answer in a direct and intuitive way.

RESPONSIVE GRAPHS

Three guiding principles were used in the design of Responsive Graphs: continuous interactivity, real-time response, and direct manipulation of graph elements such as lines and curves. Continuous interactivity and real-time response allow the user to smoothly and slowly observe the relationship between correlated representations. Direct manipulation of graph elements gives an immediate sense of what is being effected and allows changes to occur back and forth.

Continuous interactivity mandates the use of an underlying mathematical model that is computed in real-time. The Java(TM) programming language was used to construct custom interactions within an object-oriented framework. Chosen over other WWW-based interactive plug-ins, Java(TM) supports a robust computational environment that delivers interactivity on multiple platforms via the World Wide Web.

Figure 2. An example of using Responsive Graphs to explain the concept of Amplitude Modulation (AM radio). The curve in the left graph, arrows in the middle graph, and sliders in the right panel can all be directly manipulated in a correlated manner. In this example, the user is manipulating one of the sidebands in the frequency domain. A verbal interpretation appears below the graph during the interaction. This & other models are available on the World Wide Web. http://www.hp.com/go/tminteractive

An example of an engineering concept explained using Responsive Graphs is shown in Figure 2. This mathematical model explains Amplitude Modulation, the technique by which AM radio works. This applet is part of a WWW page describing AM techniques along with an in-depth reference.

The applet itself consists of three panels: two Responsive Graphs and one equation panel with conventional sliders. On the left, there is a Responsive Graph of the AM signal as it appears over time. At center, there is a Responsive Graph of that same signal broken down into its frequency components. On the right, there are three sliders that control the parameters of that same signal. The modulated signal can be changed by modifying the slider values, forcing immediate changes in both graphs.

Users can also directly manipulate both Responsive Graphs. For example, dragging the center arrow in the frequency domain graph to the right increases carrier frequency wc , updates the top-right slider and its value, and increases the signal oscillations in the time domain graph. Continuous click-and-drag interactions within Responsive Graphs enable users to qualitatively experience the signal relationships between time and frequency domains that are hidden within the mathematical model.

INTERACTION CHALLENGES

Responsive Graphs require unique, reversible mapping functions in order to determine the parameter values of the mathematical model. While this is the case in the AM applet above, in another applet designed to explain FM radio, the extraction of parameters from mouse movements in the time domain graph is ambiguous. It was necessary to make trade-offs and select the most obvious interaction over others.

Even when graph interactions can be reverse-computed into parameter values, the mapping functions are often non-linear requiring the real-time inversion of a non-linear equation for each mouse event. Non-linear mappings modify slider behavior. While most of a slider's range may result in minuscule graph changes the last few slider-pixels may result in jumpy graph updates. Producing corresponding smooth graph and slider movements requires the design and implementation of appropriate non-linear scaling functions.

CONCLUSIONS AND FUTURE DIRECTIONS

Responsive Graphs help learners grasp the many facets of complex engineering models and better comprehend them. Both direct manipulation and continuous interactivity with graphic plots are applicable to any well formulated model. We continue our research into non-linear World Wide Web interactors as well as the invention of visual affordances that help users grasp and correctly manipulate curves and lines of Responsive Graphs. Collaboration continues between interaction designers and engineering professionals in constructing domain-specific interactive learning environments.

ACKNOWLEDGMENTS

We thank Jeff Gruszynski and Ivan Motsch for their interaction design and engineering advice.

REFERENCES

1. Avitzur R., Robbins G., Graphing Calculator, A New Way to Look at Math, Apple Computer Software, 1994.

2. Blinn J., Project MATHEMATICS! Polynomials, video & workbook, California Institute of Technology, 1991.

3. Jackson S.L., Stratford S.J., Krajcik J., & Soloway E., A Learner-Centered Tool for Students Building Models, ACM Communications, April 1996, Vol. 39, No. 4.

4. Smith R., Experiences with the Alternate Reality Kit, ACM CHI+GI'87 Proceedings, 61-67, 1987, & video.

5. Soloway E., Interactive Learning Environments, ACM SIGCHI'95 Tutorial & workbook, May 1995.


CHI 97 Prev CHI 97 Electronic Publications: Late-Breaking/Short Talks Next

CHI 97 Electronic Publications: Late-Breaking/Short Talks