3D SPACE: Using Depth and Movement for Selection Tasks

This paper is the result of a research made by Dr. Dale Patterson on how users utilize and interact with content in a 3D space. More specifically he presents two new three dimensional interface components (The Flow and Circulatory system) that use the depth provided by 3D computer graphics to present complex information in a natural three dimensional form for user interaction. Last but not least, Dr. Dale Patterson introduces the concept of “active 3D interfaces”, a new style of interface that presents its data to the user rather than statically waiting for the user to interact with it. The paper can be obtained through the ACM website.

Active Components
The concept behind the Active Components is to use the natural human understanding of 3D space and the motion of objects in that space. The key principles used in the conception of the components are the use of depth and of motion through depth. The use of depth is to facilitate the presentation of large sets of complex information in an easier to understand and more natural form. While the use of motion through depth is due to the fact that the world is alive with motion and activity, so makes it a key aspect in the presentation of data in a 3D space. In essence, active interfaces are not simply statically waiting for the user to interact but are actively presenting their information through the motion and animation of items in the 3D space.

Flow Component
The Flow Component represents a new interface (or interaction technique) designed for presenting large sets of unstructured data. An example of this kind of data would be the results obtained from a web search for a particular topic. The common approach used in modern GUI interfaces is to provide the user with a large two dimensional list of results, which then he has to manually scroll through to locate the desired item. The flow component looks at this data in a different way.  Rather than treating the result set as a static two dimensional item (in the form of a large textual page) that the user needs to  move through, the flow component looks at the result data as a  flow of three dimensional items. That is, have the results flow out at the user from the depths of the screen. The use of depth to display the set of items allows a larger set of items to be displayed at any one time than would be possible in any 2D arrangement. At the same time, the use of movement through 3D space over time is used to enable the set of items to flow past the user, allowing him to see all the items in detail as they pass by without having to make any interaction.

Circulatory System
The circulatory system interface/component represents an extension of the principles established by the Flow component. Unlike the Flow (which presents unstructured data sets) it presents a new method for the presentation of large structured sets of data (e.g. selecting or locating a movie from within a large collection or library of movies). Extending from the basic flow concept, the Circulatory System takes the idea of a flow and creates a flowing loop (much like the human circulatory system). The items would loop past the user showing all options over time, without the user needing to navigate through the structure. Of course that more complexity can be introduced by creating more complex forms of loops and sub loops, allowing the user to have some control in their ability to choose which branches to take.

Experimental Results
To establish the effectiveness of the new 3D components, Dr. Dale Patterson made a series of test to a group of 14 trial users. All the experiments consisted in the user completing a task with the relevant 3D component and also completing that same task with a number of other interface versions (i.e. some 2D systems, others simply variants of the primary 3D component). After the trials it was possible to conclude that 3D computer graphics demonstrate potential in a range of common interaction tasks, being in many cases more effective than current systems. The active interfaces proved particularly effective in tasks such as browsing large structured and unstructured sets. In simple terms the addition of motion (active interfaces) and depth (3D space) has demonstrated potential to be an effective method for improving the human computer interface in these common real world tasks.


Skeletal Animation for the Exploration of Graphs

This paper is the result of a research made by Damian Merrick and Tim Dwyer on the use of skeletal animation for the exploration of three-dimensional visualizations of graphs. This paper explores the possibility of a physical metaphor for navigation with a graph visualization. For that, they formulated and implemented three algorithms for performing skeletal animation in graph visualization systems, testing them with a group of users to determine the relative benefits and disadvantages. The paper can be downloaded from the following link.

Skeletal animation is a concept that has been implemented to provide the illusion of natural motion for computer-generated characters in films and computer games. And due to the fact that a skeleton is a structure that we, as humans, observe and manipulate constantly in the real world, this paper suggest that skeletal motion, simulated adequately, would be a natural and realistic physical metaphor. A physical metaphor allows users to relate the interaction mechanism with phenomena that occur in the real world, providing perceptual cues that will increase the intuitiveness of the visualization system.

The three algorithms formulated were: one based on a method called Cyclic Coordinate Descent(CCD), another based on the nonlinear optimization method, and the third a naïve dynamics-based implementation implemented as a natural extension to an existing 3D graph visualization system.

The approach taken by CCD is to solve a localized optimization problem at each bone in the articulated chain. At each step of the algorithm the bone in question is rotated (and with it all bones and joints below it in the chain) such that the distance between the end-effector (the last joint on the chain) and the desired position of the end-effector is minimized. This process starts from the bottom bone in the chain and works towards the top, then repeats over again, until the end-effector is within some threshold distance of its desired position.

After the tests, the CCD method is believed it to be the most intuitive and the most successful in maintaining the users mental maps over successive configurations of the skeleton. One significant flaw is that it is possible for error in positioning of end-effectors to accumulate, allowing bones to stretch a substantial distance from their original length.

The nonlinear programming method takes the approach of formulating the skeletal system as a set of model parameters, constraints and an objective function. These are passed on to a nonlinear optimization module, which attempts to produce a new set of model parameters that minimizes the objective function.

After the tests, the results from this method were rather discouraging, as the motion produced was jumpy and non-intuitive, compared with the smooth transitions of the other two algorithms. However, the nonlinear programming method did have the advantage of being able to keep bone lengths constant. This is due to the fact that these lengths need not be specified in the model parameters (and hence will not be changed).

The third algorithm explored a simple dynamics-based approach to providing a skeletal metaphor. That approach was implemented as an addition to the 3D graph visualization package Wilma, that makes use of a force directed algorithm for the layout of graphs, representing edges as springs connecting nodes.

After the tests, it was verified that this method still allowed a very large amount of stretch in bones. However it seemed to appeal to users as a reasonable technique for graph interaction and was reasonably intuitive. Smooth transitions were produced, due to the force-based layout, which aided retention of the mental map.

Animation: From Cartoons to the User Interface

This paper is in the vein of the last one I’ve presented here in the site, talking about principles of cartoon animation but this one show how they can be used in the design of user interfaces. Some of the principles present in the paper written by Lasseter are explained here and then given an example of the application of that principle in a user interface called Self. The paper was written by Bay-Wei Chang and David Ungar and can be obtained trough the Sun website.

Despite the differences between user interfaces and cartoons, interactive tools vs. passive entertainment, cartoons animation has characteristics that are very useful in the design of user interfaces. Using some aspects of cartoons animation allows the user to visualize the changes that are occurring in the interface when he executes an action, making it clear what’s happening. By applying the principles of animation the interface can provide visual clues necessary for the user to understand what is happening before, during and after the action. Those visual clues take off the burden that result from those interfaces that make so that the user has to use his deductive ability to interpret changes, instead of using animation to smoothly change and move the objects present in the interface.

Bringing that kind of animation to the user interface has both cognitive and affective benefits. By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised, thus reducing his uneasiness. So employing animation not only aids the user in understanding the events in the user interface, but also makes the user’s experience of the interface more pleasant and comfortable.

The use of cartoons animation instead of a strictly realistic animation is due to three essential characteristics of cartoons animation, its theatrical basis, the engagement of its illusion and the nature of its artistic medium. Cartoons are theatrical, so actions and reactions are exaggerated, situations are staged, and all of the energy of movement and depiction is calculated to best telegraph the animator’s point. User interfaces have the same need to communicate clearly and concisely, and theatricality can contribute to this goal. Second, cartoons are engaging, because they create an illusory world, but effectively absorb the audience into that world. User interfaces can benefit by becoming more engaging and therefore fully absorbing the user into its world, so that his attention may be devoted entirely to the task. Finally, user interface designers can as well draw upon the wealth of experience in the field of cartoon animation to achieve similar successes of communication, vibrancy, and illusion.

The techniques presented in this paper are widely applicable, and may have additional benefits in certain kinds of interfaces. In particular, collaborative applications stand to benefit greatly from the use of cartoons animation. Anticipation, slow in and slow out, motion blur, and follow through can be used to more fully and more gently inform the user about remotely initiated actions.

The animation doesn’t have to be slow, or distracting, or silly; on the contrary, with careful tuning, cartoon animation can turn the user interface into an understandable, engaging, and pleasurable experience.

Principles of traditional animation applied to 3D computer animation

As the title of this post reveals, I’m going to present a paper about principles of animation that should be applied to 3D computer animation and that are useful in the design of 3D interfaces. The paper was written by John Lasseter, the Chief Creative Officer at Pixar and Walt Disney Animation Studios, and can be downloaded through the ACM website.

John Lasseter gives an historic overview over the the 11 principles of traditional animation defined by the Walt Dísney Studio and then gives an explanation of each one of the principles, relating them to the field of 3D computer animation. Next is a summary on some of the principles presented in the paper:

Squash and StretchDefining the rigidity and mass of an object by distorting its shape during an action
This is the most important principle and says that when an object is moved the movement emphasizes any rigidity in the object. The squash position represents when an object is flattened by an external force or when the object is constricted by its own power. The stretched position will show the same form in a much extended condition.  One important rule about squash and stretch is that the volume of the object has to remain constant during the movement or else the object would look as it had shrink or grown during the process. This principle defines the rigidity of the material that compose the object, i.e. depending on the level of stretch and squash the object would look as is made of different materials.

TimingSpacing actions to define the weight and size of objects and the personality of characters
It represents the speed of an action, giving meaning to the movement and defining how well the idea behind the action will read to an audience. It also reflects the weight and size of the object, as well emotional meaning. It’s important when defining the timing of a scene, to make sure that the audience is capable of reading and understanding the meaning of it as fast as is being shown. Another aspect related to timing is the weight of the objects. A heavy object will have a slower acceleration and deceleration than a light object, and will take a bigger force to change is motion. Timing can also give a feeling of size and scale to an object, by making a huge object with enormous mass to move slowly and a   small object with a small mass to move quickly. Last but not least, timing can show the emotional state of the object by varying the speed of his movements, indicating whether the character is lethargic, excited, nervous or relaxed.

AnticipationThe preparation for an action
Anticipation is used to catch the audience’s eye and to prepare them for what the next movement will be before it happens. The amount of anticipation used considerably affects the speed of the action which follows it. If the audience expects something to happen, then it can be much faster without losing them. This principle is also used to direct the attention of the audience to the right part of the screen and at the right moment, preventing the audience from missing some vital action. Anticipation can also emphasize heavy weight, as for a character picking up an object that is very heavy. An exaggerated anticipation, like bending way down before picking up the object, helps the momentum of the character to lift the heavy weight.

StagingPresenting an idea so that it is unmistakably clear
Staging is the presentation of an idea so it is completely and unmistakably clear, whether it’s an action, a personality, an expression or a mood. To stage an idea clearly, the audience’s eye must be led to exactly where it needs to be at the right moment, so that they will not miss the idea. That is accomplished trough staging, anticipation and timing. One important aspect, when staging an action, is that only one idea should be seen by the audience at a time. Due to that the object of interest should contrast from the rest of the scene, preventing the user of overlooking the idea being transmitted when there is a lot of action happening at once.