Educational television can sometimes educate its
viewers in directions not originally intended or even foreseen.
For me, an educator interested in the design of onscreen mathematics,
the real learning began while reflecting on an animated segment
of some now otherwise forgotten educational program in which the
equation
3x - 2 = 2x + 5 was "solved"
by first performing the following step:
My initial reaction was to groan, wonder how such an obvious blunder
could have made it into the finished segment, and hope fervently that
the animation as presented represented a disconnect between animator and
content expert rather than a direct translation of some teacher's understanding
of the mathematics. The aftermath was the start of my interest in the
idea of appropriate animations for algebraic calculations: just how should
one animate this calculation? Not just for accuracy, mind you, but to
communicate the steps clearly and intuitively as well, and to make the
solution method easy to learn.
This article is a three-step exploration and development of an animated
solution of this simple equation, with the goal to abstract from the process
some basic design principles that could be applied to animations of more
complex algebra.
Mathematical accuracy. The first and most fundamental requirement
for any algebraic animation, of course, is that the animation represent
the mathematics correctly. This can be trickier than it seems; it's quite
easy to miss subtleties. Here, the animation "works" because it
produces the same result as a correct animation: move both the 2x term and
the -2 to the opposite sides of the equation. Hence my first (unthinking)
attempt at revision:
I missed something. There's another, more subtle reason that the original animation
"works": the fortuitous arrangement of the signs. Here
(as in the original animation) the terms merely take over each other's
sign; more correctly, each should change sign as it changes sides.
The next revision:
Though technically correct at this point, this last animation has still
not completely exorcised the error. The two terms still move at the same
time, and gestalt theory tells us that objects that move simultaneously
are perceived to be related. The two terms and their movement are in fact
mathematically independent; to sever the connection between them completely,
they should be animated sequentially:
Note that I've also punctuated the animation with a pause; without it, the
two operations would run together and could still be perceived as
one. The pause here is actually a bit longer than necessary to separate
the segments perceptually; I've tried to allow time for their comprehension
as well. Unfortunately, viewer comprehension times can vary widely,
so appropriate universal pause durations can be difficult to determine.
(We'll see a better way to control these pauses later.)
Visual communication. The animation is now mathematically
and perceptually correct, but still not particularly easy to follow. Experienced
cartoon animators will recognize the problem immediately: no anticipation.
Animated objects or characters which move or change without notice are
disconcerting; to be visually convincing, their motion should be foreshadowed
or anticipated somehow. Cartoon anticipations can be quite subtle; a character
leans back before dashing forward, for example. Mathematical symbols have
less obvious "intentionality" than cartoons, so I've chosen
a more visually explicit notification of imminent motion: colour.
In the first step, the animation needs to focus attention on the
-2 before it begins to move. I've coloured the -2 red and emphasized
the change by repeating it (flashing). The sign change also needs
to be anticipated. This is trickier; a viewer focussed on the movement
of the term could easily overlook a concurrent change in a relatively
small symbol. A colour change doesn't work well here (I tried that),
and the change can't be separated in time from the overall movement,
so I've simply paused that movement briefly to allow the sign change
to be seen.
Moving terms to the opposite side of an equation is a mathematical idiom:
it doesn't represent a "real" mathematical operation directly,
but is instead a commonly understood shorthand for one (remove a term
from one side of an equation by subtracting it from both sides and simplifying).
It's a useful idiom; it's shorter than the original and fits nicely with
the standard strategy for solving equations: move terms with the variable
to one side and the non-variable terms to the other.
As with natural language, use of idioms is an indication of fluency; here,
it presumes that the students have mastered the non-idiomatic form of
the manipulation and have moved on to the shorter, more compact form.
For students still focussed on understanding basic operations, we could
just as easily animate the solution of our equation non-idiomatically.
Here's the first step of that animation.
Here, I've chosen to focus attention first on the +2 term to be added (as a
response to the initial focus on the -2 term to be removed) and
then to move copies of it to each side of the equation. This emphasizes
perceptually that the same term is being added to both
sides, and avoids having +2's appearing from nowhere on each side
and splitting viewer attention between them.
The next step in either version is to simplify - to combine terms. Focus
is still important here: we need to direct students' attention to the terms
to be combined. Rather than use colour again (which by now would create
an expectation of motion), I've chosen to use a software user interface
metaphor: the selection box. This works on several levels: first, surrounding
objects with a selection box is a standard indication that we intend to
do something with them. Second, a box around symbols is perceptually a single
object with a label, an appropriate image for several terms that will become
one. Third, I can visually "squash" the terms into one by squeezing
the sides of the box together.
Here are the complete animations for both solution models.
Unfortunately, the selection box image doesn't work if the terms to be
combined are not adjacent.
Pedagogy. Both forms of the animation now communicate
the solution of this equation reasonably clearly, but we can still make
them more effective pedagogically. First of all, like all animations,
they are essentially passive: once started, the student has little choice
but to watch to the end. This is a major limitation of educational television
as well, but here, we can do better. I've broken the animation into segments
and added appropriate navigation buttons (go to the beginning, to the
previous step, to the next step or to the end).
Extended navigation encourages active involvement by increasing viewer
control; the student can choose how long to pause between steps, repeat
steps indefinitely at will, or view them in non-sequential order.
Animating an equation in place like this models its solution as a sequence
of transformations applied to a single object. A printed solution, on
the other hand, suggests more a sequence of equivalent equations eventually
culminating in the desired solution. It may be difficult for students
to move between these views and decide which parts of the animation to
transfer to paper. To assist the process, I've added a "page"
to the first animation to record the significant steps of the solution.
I've chosen to assume a high level of skill/fluency here, and so have
omitted steps I'd expect good students to do mentally; intermediate steps
could also be recorded.
Thus far, our animation comes without additional explanation. For students
fluent in the basic manipulations, this omission may not cause difficulties;
for students still focussed on understanding, explanations may be essential.
But what form should they take?
A considerable body of research (by John
Sweller and others) indicates that the effect of adding textual explanations
to educational materials can be deleterious, splitting student focus between
content and explanation (since both have to be absorbed visually). A more
focus-friendly approach is to present explanations aurally, in the form
of voiceovers, since the brain processes aural inputs separately from
visual ones.
Here is the second animation with voiceover explanations.
We could of course add voiceovers to the first animation or a page to
the second.
Design Principles. What general rubrics can be abstracted
from these experiments?
Before all else, make the math accurate.
The absolute preliminary for any algebra animation is that it represent
the mathematics accurately, not just in overall structure, but in the
fine details as well. This means that the designer must have, in Liping
Ma's terminology, a "profound understanding" of the underlying
mathematics. It also means that if the designer is not also the animator,
care must be taken to avoid any conceptual disconnects between the two.
In an ideal future world, we'll have animation tools as easy to use as
pencil and paper and profoundly educated teachers to use them; until then,
we'll have to deal with more difficult technologies and professional technologists.
Choose numbers wisely. The original
error was aided and abetted by a bad choice of coefficients, and would
probably not have occurred had the 2's on each side not confounded the
issue - say if the equation had been 3x - 2 = 4x + 5 instead. The principle
holds true for print/written examples as well: in the first learning phases
of any technique, it's better to avoid numerical coincidences - in an
early lesson on solving simultaneous linear equations, for example, the
equation 3x + 7y = 10 could easily seduce students into trying to apply
the relation 3 + 7 = 10. In the later consolidation/practice and assessment
phases of learning, such "distractors" are more appropriate
and even desirable.
Separate unrelated animations in time.
The gestalt principle applies equally well to animations other than motions,
such as colour changes; simultaneously colouring two symbols red, for
example, immediately marks them as somehow related. Simultaneous animations
also force viewers to attend to two things at once, with the risk that
neither will be comprehended. (By contrast, in written/print examples,
unrelated calculations occurring at different places in the same equation
are the norm - simplifications, for example. It's presumed that readers
can disentangle the separate parts and focus on each in turn, a presumption
that may not be valid for novice learners.)
Unrelated animations should be separated by a pause. Causally related
animations should also be sequential (i.e. in cause-effect order) but
the pause between them may not be as necessary. Continuously causally
related animations (e.g. a function value depending on a continuously
changing variable) should of course be animated simultaneously.
Focus viewer attention appropriately.
As much a matter of when as of where, this is basically the old adage
"tell 'em what you're gonna do, do it, then tell 'em what you've
done". Anticipate motions and changes by colours or other effects,
for example symbol jumping (as in Apple's OS X dock) or vibrating. My
animations here haven't explored the "tell 'em what you've done"
aspect - perhaps a faded ghost of a departed symbol could show where it
once was for comparison?
It might also be useful to look at other cartoon animation tricks of the
trade - altering the shape
of symbols in motion, for example. Such tricks tend to anthropomorphize
the symbols; it's not clear whether that would improve mathematical comprehension
or not. Another possible source of ideas for representing motion is the
visual language of print comics (e.g. the work of Scott
McCloud). We could also consider adding sound effects, though they
are difficult to associate with individual symbols.
Allow viewer control of navigation. As
well as supporting individualized sequencing and pacing, student control
means that a click on a navigation button becomes a form of mental involvement,
signifying "OK, I've got that bit, what's next?" Careful attention
is needed here to divide the animation in the appropriate places and insert
additional pauses for "re-pacing".
Provide visual prompting mechanisms for transferring
learning to paper. Mathematical learning is still mainly expressed
and assessed by writing, and will continue to be for the foreseeable future.
In the distant or perhaps not-so-distant future, when homework consists
of an electronic notebook from a computer algebra package such as LiveMath,
paper records of mathematical manipulations may give way to more animated
or mathematically live forms. 'Till then, paper remains the medium of
mathematical expression.
Include additional explanatory material.
As discussed, this is better done aurally than textually. The problem
is the large increase in file size that comes with included sounds. One
alternative is streamed sound. A potential future alternative is voice-production
technology (computers reading text). This TTS technology (text-to-speech)
is actually progressing quite rapidly; the Loquendo
system, for example, produces amazingly natural pronunciation, as
do similar systems from AT&T
and Bell
Labs. A version of the Flash player that reads text would allow the
inclusion of voiceovers without all the hassle of recording and editing
sound files that's currently necessary. (Are you listening, Macromedia?)
Your turn. There's probably much more we could look at
to enhance algebraic animations, but I'll stop here and instead end with
a challenge. Suppose you had to design an animation to explain removing
a common factor from an expression. Your animation must start with the
expression Ax + Ay and end with A(x + y). In between,
you may use all the techniques available in Flash - motion, colour change,
fading symbols in or out and so on. Your animation must capture the essence
of the operation (you decide what that essence is) and provide a generalizable
intuition of what's happening, so for example, your intuition works for
Ax + A(y+3) + Az but not for Ax + (A + 3)y. How would
you proceed?