Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

Appendix: Definitions of the Most Common Types of Animation on the Web

By Esther Blankenship, SAP User Experience, SAP AG

 

Animated GIFs

Animated GIFs are a series of static GIFs placed together side by side in so-called "frames." This sequence of frames plays a certain number of times or repeats endlessly, called "looping." Animated GIFs are loaded onto your PC when you visit a Web page. Most of the ubiquitous banner ads and small animations that you see on the Web are animated GIFs.

Example:
Animated GIF

Links:

 

JavaScript

JavaScript is a client-side scripting language. (Despite the suggestive nature of their names, JavaScript and Java are not the same). Client-side means that it runs from your computer, not off a server. JavaScript is combined with HTML to make dynamic interaction within a Web page possible. Among other things, JavaScript allows designers to manipulate objects (images, text, layers, HTML pages, etc.) within the active HTML page. Typical JavaScript animations include "swapping" images on mouseover (i.e. when you move your cursor over something), moving layers from one position to another, as well as hiding and revealing layers.

Many users, however, disable JavaScript on their computers because they regard downloading programs from the Web a dangerous practice.

Netscape initiated the development of JavaScript as a cross-platform scripting language. Widely and justly bemoaned was Microsoft's move to develop a competing version, called JScript. This has led to Web developers wasting precious time on cross-browser compatibility instead of on creating good Web sites. Even worse, it has also resulted in Web designers who create sites only for their favorite browser.

Example:
National Geographic uses JavaScript extensively in its interactive learning museum called xpedition hall. One of the museum's "halls" is an interactive Mercator projection of the world. Once you choose a category from the top, population growth, for example, a legend appears at the right. You can move your mouse over the legend and the corresponding areas of the map are highlighted.

Links:

 

Java Applets

Java applets are small applications written in the Java programming language, developed by Sun Technology. They are more complicated to write than a JavaScript command, but also more powerful. Applets are usually embedded in HTML pages and then downloaded to your computer. Stock tickers, for example, are common Java applets.

Links:

 

Flash

Flash is an authoring and playback technology (that's why the tool has the same name as the objects it creates) from Macromedia. Like Shockwave, it supports animation, audio, video and user interaction. Flash objects are usually referred to as "films," as the authoring tool uses the film metaphor in the interface - an advantage for people with a background in multimedia and cinematography. Flash is one of the most popular media for creating animation and interaction on the Web, largely because it is a vector-graphic technology, so the files load relatively quickly. Another reason for its popularity is that the tool affords the author a great deal of creative leeway and the effects can be very impressive. Flash objects can run on Windows as well as Macintosh platforms, but require a plug-in to display in your browser.

Example:

Links

 

Shockwave

Shockwave, like Flash, is a playback technology from Macromedia. Unlike Flash, the authoring and playback tools do not have the same name. Shockwave objects are created in an authoring tool called Director. Shockwave supports animation, audio, video and user interaction. A more sophisticated tool than Flash, Director is often used to develop high-powered multimedia movies and CD-ROMs. Shockwave objects can run on Windows as well as Macintosh platforms, but requires a plug-in to display in your browser.

Links:



DHTML or dynamic HTML

DHTML or dynamic HTML was an important step in the development of the Web, as it made animation and interaction without plug-ins possible. The term dynamic HTML refers to a combination of HTML 4.0 or higher, scripting (such as JavaScript or VBScript), and Cascading Style Sheets (most often referred to as just CSS). DHTML allows user interaction without sending a request to a server. This results in a "real-time" feeling; that is to say, the visual feedback from the interaction is so fast that users feel like it's happening immediately.

 

QuickTime / QuickTime VR

QuickTime was developed by Apple Computer. Although it is built into the Macintosh operating system, PCs can also run QuickTime files if they have the appropriate driver (which can be downloaded for free from the Apple Web site). QuickTime allows users to view video and animation; QuickTime VR has a three dimensional component that lets users interact with the image and move it around in a simulated 3D environment.

Links:

  • Download QuickTime from the Apple site
  • The QuickTime site from Apple computers offers product information

 

top top