Animation Can Decrease Task Errors

Comparing Vector and Raster Animation Techniques in Network Setup

Published by Cisco, Inc, 2007.

By Subbarao Ivaturi and Brenton Elmore.
Copyright is held by the author/owner(s).

Over the years animation techniques have vastly improved. The use of animation in software applications is becoming more prevalent regardless of its effectiveness. To ease the process of initial setup with Cisco products for end users, two animation techniques, vector and raster, were explored. This is case study of these formats and discusses some of the issues faced. Scenarios regarding when each technique might be useful are discussed. Results showed that developing and implementing animation could become costly both in terms of time and money. However, using animation in initial setup programs resulted in a better overall user experience and improved success rate for task completion.



Setting up a network with Cisco devices, specifically for the first time, requires understanding of the technology and knowledge of how to set up several devices. With fewer users possessing these skills, it becomes imperative to look at other techniques beyond the traditional quick start guides.

The term “computer animation” in Human-Computer Interaction (HCI) can be defined as follows: a series of varying images presented dynamically according to user actions in ways that help the user to perceive a continuous change over time and develop a more appropriate mental model of the task [1]. These images can be created in either a two-dimensional or three-dimensional space, and can be applied to web design, software applications, video games, movies, special effects, cartooning, and many others.

The creation of moving pictures in a two-dimensional environment, such as through “traditional” cell animation or in computerized animation software, is done by sequencing consecutive images, or “frames”, that simulate motion by each image shown in a gradual progression of steps. The eye perceives smooth motion when these consecutive images are shown at a rate of 24 frames per second or faster.

The creation of moving pictures in a three-dimensional digital environment is accomplished by sequencing consecutive images, or “frames”, that simulate motion by each image showing the next in a gradual progression of steps, filmed by a virtual “camera” and then output to video by a rendering engine.

In our research, we haven’t found many network management applications that successfully incorporated animation either within the application or in the initial setup programs. There is a reason why few applications with animations exist. Animated interfaces are difficult to implement; they are difficult to design, place great burden on programmers, and demand high performance from the application [3]. However, Shneiderman [2] points that direct manipulation interfaces are attractive because they are easy to demonstrate and often self-explanatory.

In trying to improve the user experience with our products and reduce support costs, we looked at incorporating animation as one of the techniques in initial setup programs. This paper discusses the comparison of two animation techniques that were used in two different initial setup programs.

Animation Techniques Comparison

Two animation techniques were explored to understand which technique works best for our products: Vector: 2D Animation and Raster: Photo Animation (2D or 3D)

The following table compares these two approaches to animation and describes their relative strengths and weaknesses. It is important to note that many of the problems with Cisco devices occur in cabling and connecting devices to each other. Consequently, only these issues are explored. It focuses only on two case studies of animation implementation (vector and raster).



Vector Animation

Drawing of the device and cables are created using vector drawing tools (shapes and fills). Animation is described using transformations to the shapes.Photos of products and cables are taken for each step of the animation. Animations are created using layers, cuts, fades, and other “tweening” effects.

Photo / Raster Animation

Photos of products and cables are taken for each step of the animation. Animations are created using layers, cuts, fades, and other “tweening” effects.


Specificity vs. Generalization

Vector graphics can be generic, i.e.,
cables and opening image of the product can be generic.

Animations can minimize distractions and “idealize” product representation. Issues with serial numbers, fit and finish, or alignment are minimized since they are under the control of the graphic artist.

Video provides a high level of certainty and specificity.

Photos of the products are clear to users, so there is less chance of confusion or misinterpretation.


It can be time-consuming since someone has to develop these images.

Flash animations can be created from existing product photos or design documents for new products.

As a library of product images and animations is developed, the trend for vector animation is for maintenance and updates to become easier. For example, it may be possible to slightly modify an existing animation to achieve the desired result, rather than create a new one. For this reason, over the long run, maintenance costs are
probably going to be lower with vector animation than with photography.

Unlike vector-based animation, photos require a fixed amount of work for each new animation.

Some updates can be handled using existing photography. In other cases a re-shoot may be required.


Flash has a fairly complete localization system built into the system.

In an example implementation with this technique, all of the text that was displayed in the animation was pulled in from an XML file that made it easy to localize.

For photos, internationalization is simplified if text does not appear in the images; however, text localization can be supported via Photoshop scripts.

Any word stored as graphic data is problematic for localization. Unless a phrase or word is stored in text format, it is difficult to translate.

Design, Development, Production

A graphic artist with animation experience is needed to produce the images.

Not as resource-intensive as photography and video. No need for product lighting setup.

Easier to reuse existing animations, saving cost.

Can use the library of elements from one animation as a resource in another. For example, if there is a well-done graphic of an Ethernet cable in one Flash animation it could be re-used in subsequent animations, since these cables are used with most equipment. In addition this will help standardize the presentation.

Photos require the specific equipment or a mockup.

Unless a product photography setup already exists, onsite photography can be problematic because of the large space requirement, the need to transport equipment, and the need to recreate a product photography setup, which takes time.

If multiple products are needed in the animation, photos of each product in various angles may need to be taken. To support new equipment with new case designs or port layouts, additional photo shoots may be required.


For several of the issues described in the table, Flash animation is the preferred choice. However, it is important to stress that the choice of animation technology is not a mutually exclusive decision.

For example, a support web site or a CD-based tutorial could combine a generic Flash animation showing how cables are connected with specific product photos that highlight the correct ports to use. This animation could be delivered entirely in Flash format, or as a combination of Flash, animated Graphic Interchange Format (GIF) images, and static images. The latter approach can be useful when the user’s browser doesn’t have a Flash player installed.

A key requirement for most of these animations is to minimize uncertainty and confusion. Each type of animation has advantages in this respect, and an ideal solution should take advantage of the strengths of each approach when practical. Each type of animation has different strengths in terms of deployment, turnaround time, available animation effects, and specificity vs. abstraction.

Use Generic Vector Animations for Broad Concepts

For animation used in an application, a vector-based system would be best. Applications by their nature will involve a spectrum of products. Because of this, any detail in a photograph can be considered significant, and therefore can be misleading. A user may not have the background to discern which details are significant and which are irrelevant; this can cause uncertainty and frustration.

For example, if the photographed model has six cable ports and the user has a model with four cable ports, and even though port 1 is the port under discussion, the user may become confused or uneasy and distrust the software when pictures are not accurate.

Use Photographs for Device-specific Images

For animation used on support sites that have separate pages for each product, photographs and photography-based animation may be a better choice, both in terms of production and for conveying device-specific information to the user. This is especially true when a product series contains several similar but distinct models.


Implementing these two animation techniques in two different setup programs took more effort than anticipated, both in terms of time and money. In one setup program that used vector animation, it took five rounds of design and usability testing on the setup wizards containing the animation movies. This setup program currently helps users set up and configure 30 variations of networking devices. This translates into 728 unique movies featuring several products in multiple configurations. The text bubbles in the movies needed to be easy to update and localize. Thus, vector animations seem to be the only economical way to fulfill the requirements.

The second setup program was a pilot program and used photo/bitmap animation to compare the experience against vector animation. It took two rounds of photo shoots for only five devices and three rounds of script changes to get it right. Even though photo animations proved successful, this approach did not scale very well when the setup program needed to introduce more devices. It required more photo shoots in different cabling scenarios that we couldn’t keep up with.

With all the challenges we faced in implementing these two techniques of animation in the setup programs, the end result was favorable. Usability study data on both these techniques showed that the success rate for task completion without errors almost doubled. The animations also helped users set up the network quickly and know exactly how to cable and set it up. This resulted in a better overall user experience for users.


[1]  Gonzalez C. Animation in User Interface Design for Decision Making: a Research Framework and Empirical Analysis. Dissertation 1995, Texas Tech University.
[2]  Shneiderman, B. Designing the User Interface, Strategies for Effective Human-Computer Interaction. Addison-Wesley, Reading, MA, USA, 1998.
[3]  Thomas B.H. and Calder P. Applying Cartoon Animation Techniques to Graphical User Interfaces, ACM Transactions on CHI 2001, Vol. 8, No, 3 (2001), 198-222.

Brenton Elmore