24. User Interface Design For Algorithm Animation

Definition: Consistency of object and motion

In order to provide a system which is both easy to use and quick to learn, the design of the user interface is of fundamental importance. There are two aspects of the user interface requiring standardization: the consistency of object and motion, and the consistency of the control interface. The first aspect means that animation objects should always move the same way (consistency of motion) and that similar algorithm variables should be represented uniformly (consistency of object). To address the second aspect, Animated Algorithms offers a consistent control interface employing the VCR controller metaphor (Fig. II.9).

Figure II.9 VCR Controller for sorting animations

Consistent controller interface

The VCR controller is always the frontmost window on the screen and allows control over the stepping through or playing through of algorithms. Where appropriate we have added controller elements that emphasize the main steps of the algorithm and allow the student to proceed consciously from one logical algorithm step to the next (Fig. II.10).

Figure II.10 Controller emphasizing the main steps of bucket sort

These added controller elements emphasize the main steps of the algorithm and allow the student to step consciously from one logical algorithm step to the next.

Based on our experience with Animated Algorithms, this chapter now discusses the "ten commandments of algorithm animation:

1. Be consistent
2. Be interactive
3. Be clear and concise
4. Be forgiving to the user
5. Adapt to the knowledge level of the user
6. Emphasize the visual component
7. Keep the user interested:
8. Incorporate both symbolic and iconic representations
9. Include analysis and comparisons
10. Include execution history

These points have been identified while making many mistakes and rebuilding many different versions of the Animated Algorithms user interface and animations. Obviously they go from general concepts to very algorithm animation specific requirements. They will now be discussed in detail by the example of Animated Algorithms.

1. Be consistent:

This aspect is true for the user interface of any system, but is especially important for educational algorithm animations. As discussed previously, we request consistency of object and motion, and consistency in the control interface.

2. Be interactive:

A high degree of interactivity is necessary to keep users interested and improve their understanding of the inner workings of an algorithm. Basically users should be forced to interact with the system at least every 45 seconds. Additionally, users also should be able to select their own input. For novice users, on the other hand, a predefined input data set should be offered. In Animated Algorithms, controller elements emphasizing the main steps (fig. II.10) force the user to interact with the animation by starting the next logical step of the algorithm.

3. Be clear and concise:

The essential points of the algorithm have to be presented clearly and to the point. Complexity can, e.g., be hidden by a hierarchical substructure. Access to this substructure is made possible by a "step into" button.

Figure II.11 "step into" button for heap sort

Figure II.11 illustrates the "step into" button for the heap sort algorithm where the user is about to step into the heapify procedure. This technique permits the user to learn fundamental concepts first and then to expand into complexity. By highlighting the currently executed pseudocode line the user is able to always see exactly how the animation relates to the algorithm. It is also important to demonstrate where the algorithm breaks, i.e., to show under which boundary conditions the algorithm is inefficient or won't work.

Important logical algorithm steps can not only be emphasized by means of a separate controller (see figure II.10), but they should also be accentuated in the animation by transitions from one step to the other. The student can get explicit pointers to the logical steps by hypertextual or voice annotations.

4. Be forgiving to the user:

The system has to be generous and forgiving to erroneous user manipulations. This means that it allows only meaningful actions and alerts users if they are in the process of executing a meaningless action. Users are, for example, only allowed to define an input set that makes sense for the current algorithm. Also, the system should make sure that controller elements may only be used in correct order.

5. Adapt to the knowledge level of the user:

The system has to be adaptable to the knowledge level of the user. We have paid attention to this by allowing the user to set the animation speed himself. We also provide extensive built-in on-line help and permit stepping into or out of an algorithm where appropriate.

6. Emphasize the visual component:

Since animation is a graphical process, visualizations should be as self-explanatory as possible. This means that elements should not needed to be interpreted further. For example, elements to be sorted could be differently sized bars or balls instead of letters of the alphabet; one should use slider bars for setting the animation speed, or employ colored arrows in a hash table to indicate its fullness.

Figure II.12 Different visual representation of data elements

The requirement for consistency of motion means that similar actions should always be animated in similar ways. This allows students to recognize repetitive steps more quickly, even when they choose to perform a previously unseen action. Figure II.13 shows the animation of the generic insert operation for the hashing algorithms, which is animated similarly independent of the particular addressing method.

Figure II.13 Generic animation of the insert operation for the hashing animation

7. Keep the user interested:

An animation should not only capture the initial interest, but keep the user's attention during the whole execution. Keeping the user interested also means that an animation can be aborted at any time. This is advantageous if, for example, a large data set would keep the algorithm executing for a long time while the user has already understood all concepts. It means also that frequent stopping points for single stepping have to be foreseen. Voice annotations are another useful means of keeping the user interested.

An animation should definitively not offer humor at any price, but good real world examples for the explanation of theoretical concepts help keep the user interested and improve the learning effect.

Figure II.14 real word example explaining the convex hull

Figure II.14 demonstrates on an real world example how to find the convex hull of a set of points in a plane using an elastic rubber band.

8. Incorporate both symbolic and iconic representations:

The user should have the option of watching the execution of an algorithm in parallel as animation and as pseudocode. Figure II.15 shows the animation window of an animation of the longest common subsequence algorithm.

Figure II.15 Longest common subsequence animation
containing both symbolic and iconic information

The right side of figure II.15 is a symbolic representation of the algorithm in execution and the left side is the iconic representation of the same action.

9. Include algorithms analysis:

Wherever appropriate, analysis of the algorithm's behavior should also be included . Once an algorithm is run several times, it would be useful for the student to be able to see how different options affect the operation of the algorithms. These options can be either parameters to the algorithms itself, or variations in the input to the algorithm. Analysis information can be collected during the execution of the animations. Figure II.16 displays the hashing analysis card allowing the student to view the collected data .

Figure II.16 Hashing analysis card

Visual comparisons between different similar algorithms further deepen the understanding of the student. Figure II.17 displays the sorting comparison animation of Animated Algorithms, allowing to comparing the different sorting algorithms with different input data sets.

Figure II.17 Comparison of sorting algorithms

10. Include execution history:

One of Brown's three dimensions of algorithm animation [29] demands that the animation give a temporal context for the momentary action. Ideally, an animation always keeps some sort of history that shows why the current action is happening based on a snapshot of past actions.

Figure II.18 Radix sort containing history of actions

The snapshot of the radix sort animation in figure II.18 illustrates the history concept. The fourth digit is currently being sorted, but the sorting sequence of all previous digits is still visible in the animation window.

Of course, an algorithm animation should also be implemented in a way such that it does not overstretch the built-in limitations of the hardware and operating system. This means, for example, that it was impossible to have full-color three dimensional animations on the Motorola 68000-based Macintosh-line that Animated Algorithms was designed for. It is more important for the student to have a system that runs at acceptable speed smoothly than a potentially dazzling system that is only capably of jerky motion on not top-of-the-line systems.

The ultimate requirement, of course, is to optimize the learning effect. Applying the above listed "ten commandments", algorithm animation system designers should be capable of designing educational systems hopefully avoiding the perils and pitfalls that our team ran into when developing Animated Algorithms.