|  Skip to Content  |  Search  |  Contact us  |  Newsletter  |  Sitemap  |  Article List  |  www.sap.com

Home & Services   Resources   Editions   Community   Goodies

Design Tidbits    Editorials    Stories    Books & People    UI Events    Forums

Design Tidbits

 To Overview of Tidbits

Design Tools

• My Design Tools – Part I
• My Design Tools – Part II
• UI Toolbox: Capturing and Editing Screenshots – Part I
• UI Toolbox: Capturing and Editing Screenshots – Part II

Simplification

• What Does "Simple" Mean?
• Anti-Simplification – How to Make Life Harder for Users
• Reducing Complexity
• Error Prevention Comes First
• Don't Let Your Interface Lie
• Don't Let Users Suffer from System Weaknesses

Interaction Design

• Did You Make Your Selection? – Part I
• Did You Make Your Selection? – Part II
• Did You Make Your Selection? – Part III
• Did You Make Your Selection? – Part IV
• The Software Works The Way I Think: Beyond Point and Click
• A Layman's View on Interaction Styles – Part I
• A Layman's View on Interaction Styles – Part II
• Selecting Objects By Attributes – Part I new
• Selecting Objects By Attributes – Part II new

Screen Design

• The Art of Hiding – Part I
• The Art of Hiding – Part II
• Screen Layout – Part I: General Considerations
• Screen Layout – Part II: Layout Hierarchy
• Screen Layout – Part III: Examples

Hierarchies

• Hierarchies - Categories vs. Vectors
• Fighting (with) Hierarchies –
  Part I: Basics
• Fighting (with) Hierarchies –
  Part II: Presentation
• Appendix: Fighting (with) Hierarchies – Presentation Techniques I
• Appendix: Fighting (with) Hierarchies – Presentation Techniques II

Visual Design

• Some Color Mysteries
• Some Mysteries of Colored Text
• Animation – The Chili Pepper of the Web
• Appendix: Definitions of the Most Common Types of Animation on the Web

Design Process

• The Construction Cycle – Another Way to "Organize" the Design Process
• User Feedback
• What Does User Integration Mean for Software Design?
• Mapping a Conceptual Interface to a Physical Interface

Web, Web Applications, Web Design

• The Web – A Short Introduction
• An Introduction to Designing User Interface Controls at SAP
• From Dropdown Listboxes to Comboboxes
• List Box Tweaks (Part II)
• Concept Statements and Website Messages – Part I
• Concept Statements and Website Messages – Part II

Miscellany

• Adding Value to Your Interface by Using Simple Math and Matching
• How Much Documentation Do Applications Need? – A Simple Example
• Narrative User Interfaces
• Golden Rules for Bad User Interfaces
• Universal Usability
• User Interface Controls and Interaction Techniques of Horror new

 

 

Animation – The Chili Pepper of the Web

By Esther Blankenship, SAP AG, Product Design Center – 05/18/2001, updated 08/26/2004 and 03/30/2005

Almost all powerful things can be useful, but also dangerous – motor vehicles, nuclear energy, and jalapeño peppers spring to mind.

A car, for instance, is an extremely useful tool when used correctly. It gets us where we want to go; we can haul our stuff around in it; sometimes it can even be an expression of our individuality. Used carelessly however – a second too long fumbling with the radio, let's say – and the next thing you know your face to face with the rear end of a Ford Explorer.

Albeit not as potentially lethal as an automobile, animation can be hazardous if abused. When done thoughtfully, it can dramatically help your users understand content and interact with the operating system; it can sometimes even enrich the branding value of a site.

In this article, I first indulge in a glance at the uses and abuses of animation in two concrete examples from the Web. Second, I define animation in the classic and Web senses of the term, then I briefly mention the major kinds of animation on the Web (definitions, examples and other information are offered via links to a separate window). Fourth, I discuss when animation is an asset to a Web site or application. Finally, I make some valuable and clever closing remarks.

Before we get to the proper usage of animation, let's have a look at the effects of animation abuse. One of the most popular television shows right now in Germany is TV Total, hosted by a smart-aleck comedian named Stefan Raab. He and his team have created a fictitious Latin singer called Eddie Rodriguez: "With his Latino temperament Eddie shows what real 'el ritmo' means: exciting Latin-Pop with hot rhythms. He lives in Puerto Rico and Miami, has a preference for cool outfits and beautiful women and has outstripped US popstars like Ricky Martin." Eddie's persona came complete with his own Website in Spanish and English (www.eddie-rodriguez.com and www.eddie-rodriguez.com/english/home.html, no longer available). Obviously a satire of amateur homepages, Eddie's Website bursts with fluttering flags, shimmering stars, twisting text, and dancing dollar signs – in short, a masterpiece of bad design. (Visitor counters, distracting background images, poor-quality graphics, and error-prone writing are also important elements in the overall impact of the site, but alas, discussing this is beyond the scope of this article.)

As long as your goal is to irritate your user, gratuitous use of animation is not a bad thing. If your aim, however, is to present a professional, usable site, it's best to proceed with extreme caution when including animation.

Recently I came across Rob Frankel's homepage about branding. Frankel asserts that he is "the most widely read on (and off) line branding expert on the planet." Featured at the top of the welcome page is his logo – a picture of Mr. Frankel centered within a golden medallion, head nodding up and down as if he were reassuring me about the importance of branding. The first few lines of the page read, "Hi. See that obnoxious head bobbing around up there? That's me." I think, OK, that's funny. He knows that endlessly looping animated GIFs are annoying, but he wants me to remember his face and logo, while making a joke about it at the same time. For me, this qualifies as acceptable use of animation. But as I clicked through his site, which includes a lot of interesting and valuable information about branding, his wagging head at the top of every, single page quickly lost its gimmick appeal. Each time I went to a new page I sped my mouse over to my browser's stop button to paralyze the animation (this works in MS Explorer and Netscape Navigator, but not in Opera) so that I could concentrate on the text. I would have had a much better feeling about this site if Mr. Frankel had limited his pumping pate to just the welcome page and settled for a static version of his logo on subsequent pages.

 

Animation Defined

The word animation is derived from the Latin word anima, meaning "life" or "soul." Thus, animation is the act of bringing something to life. In classic media terms, animation uses frames of images to simulate movement. (Video, in contrast, takes continuous movement and breaks it up into frames.) Usually, one image is slightly different from the last, producing the illusion that whatever is different has "moved" to the new position. A series of these "differences" produces the illusion of motion. If the difference is small, the motion appears fluid. The greater the difference, the jerkier the movement appears.

The following is an animated GIF.

In frame one, the wings are in the down position and the camera is one pixel lower than in the second frame. The second frame shows the camera and wings in the middle position. The third frame shows the wings in the up position and the camera one pixel higher than in the previous frame. The last frame is identical to frame two (so that the middle position is always between the up and down positions when the animation repeats itself).

This gives the illusion that the flapping of the wings moves the camera up and down slightly, as if it were hovering in place.

The above is an example of animation in the classic sense of the word; the flipbooks of yore and your basic Saturday morning cartoon are constructed in the same way. On the other hand, animation in the "Web" sense of the word can also just be a series of images flashing one after another – a slide-show featuring pictures of various vacation destinations, for example.

 

The Most Common Types of Animation on the Web

• Animated GIFs
• JavaScript
• Java Applets
• Flash
• Shockwave
• DHTML or dynamic HTML
• QuickTime / QuickTime VR

 

Be Kind to Users with Disabilities or Slow Internet Connections

You should not underestimate the importance of labeling animation, and images in general, with alternate text. Users with visual impairments should have access to all content in text form (sometimes it's even a legal requirement). At the very least, such users should be informed about what they are missing out on. Additionally, many users with modem connections to the Internet choose to boost performance by surfing the Web without images.

Animations can grow in file size fast. Users really, really dislike waiting for a site to load. If you do have a compelling reason to include animation in your application, try to keep the file size small.

 

Guidelines for Using Animation

It is a human survival instinct to look at anything that moves. Even when we know that the moving object is not a hungry animal ready to pounce on us, movement still attracts our attention and makes it hard to concentrate on anything else in its vicinity. Reading online is difficult enough without animation on the same page. The following are some guidelines to help you decide whether or not to use animation.

Naturally, it would be impossible to cover every situation where animation might be a good idea. But if you can't say yes to any of these questions, then you should seriously consider abstaining from animation.

Can You Say Yes to One of These? Then Animate!

• Is the animation intended to be the focus of the page?

  
  An introductory Flash film is a good example of animation as the focus of a particular HTML page. Here the user is supposed to sit back, watch and learn. You can use this opportunity to be as creative as you want – no need for subtlety here unless you desire it. This is an acceptable usage of animation, provided you give your users a clearly marked way of getting out of the film and into the contents of the site. However, an HTML page with an introductory film should not have a lot of extraneous text competing for the user's attention.

  For example, the rarecompany Website (www.rarecompany.com/intro_flash_e.html, no longer available) is generally a well designed site. However, the slogan underneath the Flash film distracts from the text in the animation itself. This start page would be more successful either without the slogan or with the slogan appearing only until the Flash film is loaded.

  Note: An introductory animation is not a good idea for every site. It really only makes sense for sites that get a lot of first time or occasional visitors – would you want to be subjected to an introductory film every time you go to buy a book from amazon? Neither would I.

  An interactive game is another example where the animation is the focus of the page. If the game coexists on a page with other information, then the animation should only run while the user is interacting with the game. When presenting users with a choice of animations, they should be static until the user chooses one.

• Does the animation help the user achieve his or her goal?

  
  As I'm composing this text, a blinking vertical bar helps me locate the cursor each time I stop writing. If this bar were static, I would have a more difficult time differentiating it from the rest of the text. This is an example of animation that supports a user goal.

  Another example of this kind of animation would be a Web site for a concert hall that sells tickets over the Web. As the user moves his cursor over a price category from the legend, the corresponding available seats in a diagram of the hall are highlighted.

  

  Of course, you can take this concept too far, as did Microsoft with its famously annoying paperclip, "Clippy," office assistant. This animated assistant is a flop because it pops up too often, isn't really smart enough to figure out what the user is doing ("It looks like you're writing a letter." Sound familiar?), and is over-animated. Even when the assistant isn't required, it wiggles around and makes "helpful" suggestions. Helpful, that is, unless you are trying to get some work done and don't want to be distracted by a bouncing, beady-eyed paperclip. In fact, Microsoft got so much negative feedback about Clippy, that it is "firing" him for the release of Office XP (regrettably, the hilarious Flash film from Microsoft on the subject with Gilbert Gottfried as the voice of Clippy is no longer available – but there is still a Chinese version available, if you don't mind the Chinese subtitles and buttons ...). My point here is that you should make sure that your animation is really helpful, appears only when necessary and does not excessively distract the user.

• Can the animation demonstrate a relationship that is cumbersome to express in words or static images?

  
  Animation can be extremely effective in showing a relationship between time and space and in demonstrating cause and effect. Animation is an ideal accompaniment to tutorials, for example. You can simultaneously show where, when and what the user has to click, as well as the result of the action. Unless the demonstration is very short, the user should be able to pause it in case she is trying to imitate it on a live system, take notes, or has to perform another task and doesn't want to start the demo from the beginning again. If the demo is long, it may be better to break it up into smaller, separate animations. This improves performance and lets the user view only the parts that interest her.

• Does the animation reassure the user that the system is working?

  
  Nobody likes to sit in front of the computer waiting for a page to load. Even worse is the sinking feeling that maybe the page is not going to load no matter how long you wait. You can demonstrate to users that the system is busy loading information by playing a small animation – a bit like seeing a patient move his index finger and knowing he's still alive. If there is other useful content on the page that the user could be reading, the animation should be subtle.

  One example of this principle is the small icon, located at the top-right corner of your browser, that moves when it is trying to communicate with the server to find the page you've requested.

  Another example would be an animation that indicates to the user that the system is busy saving her data. In this case, she probably can't do anything with the system until it is finished. She knows that she can resume working with the system when the animation disappears.

• Does the animation make the user feel in control?

  
  Mouseovers (also known as "image swaps" or "rollovers" when the object is an image; often called "hovers" when the object is text controlled by Cascading Style Sheets) change the appearance of an image or text when the user moves his cursor over it. This effect has widely been shown in end user tests to give users a feeling of satisfaction and control, unlike autoplay animations that assail the user in an unrequested or undesired way. In addition to purely decorative details like text that changes color or images that light up, mouseovers can also provide useful information to the user without the waiting time associated with clicking on a link. A mouseover on a menu item which reveals the submenu items and allows the user to "preview" the categories without committing himself to a click can be very useful. Providing a short definition of a term on mouseover can also be less daunting (and sometimes less irritating) than opening a new window or changing pages. Such solutions, however, must be approached cautiously. Contents presented in such a manner should be brief and clearly recognizable as distinct from the current page. Your goal is to help the user, not confuse him.

  Another note of caution: If implementing mouseovers means detrimentally increasing the file size of your page, you are better off without them.

• Does the animation provide valuable feedback regarding an action the user has performed?

  
  Another appropriate use for animation is to show the user the effect of his actions or the status of a command. In these cases, the animation should not repeat itself endlessly. Your goal is to attract the user's attention and let him know what the status is. Once that's done, the animation should either remain static or disappear. A little sign that the data was saved or a small animation that warns the user of an erroneous action are just a couple examples. Again, restraint should be exercised here – your goal is to notify the user, not scare him away from your page or crash his computer.

• Does the animation truly add to the "fun" factor or enrich the branding value of the site without annoying the user?

  
  Of all the questions, this is definitely the trickiest. Animation can be fun, but it can also be irritating. Keep the following basic rules in mind.

  • Only use "decorative" animation if your site gets mostly first-time and occasional visitors or else change the animation regularly. People tire quickly of seeing the same animation.
  • Don't use more than one "non-mouseover" animation on any give page.
  • Animations should generally occur on mouseover or only play briefly – not loop endlessly.
  • Make sure the graphics are high-quality.

A Note about Banner Ads, Clients and Supervisors

Admittedly, this article has taken into consideration only cases in which you as a designer are in control of what you design. If you are creating a banner ad, for example, your client may insist on an animated GIF. Animation has somehow become synonymous with banner advertising. A wildly jumping image attracts eyeballs, but also may produce a negative reaction. Even a subtle animation attracts the user's attention and is less likely to annoy him.

Another case where you might be required to use animation against your best judgment is if your boss or client explicitly tells you to do so. "We need more brand awareness, Higgens. I want you to animate the corporate logo." Again, a little animation goes a long way. First try sticking with an animation that plays only once and then remains still. If that isn't enough for the head honcho, only animate the logo on one or two strategic pages. The same animation on every page could be irritating, resulting in resentment on the part of the user. Remember Mr. Frankel's bobbing head.

 

A Final Rule of Thumb

Before including animation on your Website or application, you should seriously ask yourself what your motivation is for doing so. If you have a concrete reason for animating something and honestly believe it will help the user in some concrete way, then use it. If, deep down, you know that you just want to show off, it's better to leave it out.

 

top