Animation Isn't Just for Kids

You've probably noticed how user interface animation has become more prevalent over the last 5 years. Application windows animate as they open, minimize and close. File icons animate into position when dropped in file managers. Web pages animate as they change in reaction to users.

When this trend began, many technical types in the industry lamented it and dismissed it as "eye candy". If you do a google search for "disable vista eye candy" you get over 500,000 hits. Many people just didn't see the point and others were hurt by the performance impact. The pundits collectively shook their heads at what they perceived as Microsoft delivering yet another solution in search of a problem to solve.

While Apple has great taste in design, they struggled to justify the animation capabilities they rolled out in Leopard:

"Looking pretty is a very important part of making the user interface more intuitive," Bayer said in describing the benefit of Core Animation. "The user gets more insight into what's actually happening in the software."

That's not a very convincing argument.

Animation on the Move

Based on that reaction and weak justification, you would have expected somewhat of a pull back by Apple and Microsoft. Instead, Apple iOS and Microsoft Metro (the user interface in Windows Phone that was first deployed in the now dead Zune) both took animation to a whole new level. Almost every part of the user interface animates. Buttons fade in and out, apps zoom in when launched and zoom out when backgrounded, windows slide left and right as user interfaces are navigated, etc.

Probably the most memorable and remarkable animation was the smooth scrolling on the iPhone - complete with acceleration and bouncing as the view hit its scrollng boundaries. There is something almost viscerally satisfying about playing with that feature.

It's Not About Bugs Bunny

If you go and look at the background of animation in user interfaces, you tend to find the weak justifications noted above or this in Apple's User Interface guides:

Animation is a great way to communicate effectively, as long as it doesn’t get in the way of users’ tasks or slow them down. Subtle and appropriate animation can:

  • Communicate status
  • Provide useful feedback
  • Enhance the sense of direct manipulation
  • Help people visualize the results of their actions
  • Again, pretty weak overall - but that third bullet I think gets close to the mark.

    The situation is not much better in academia. I hate to single out this one example, but the Special Interest Group on Computer-Human Interaction (SIGCHI) Fall Conference of 2009 had a presentation on a paper titled "The animated GUI: Lessons from Disney":

    Why animate?

  • Provide a natural flow
  • Focus attention on the action
  • Provide a sense of bearing
  • Engage and appeal
  • NOT: disrupt or hold back
  • While their reasoning is not invalid, I think they are describing side-effects of the animation more than anything.

    In other words, none of this describes why you get a visceral pleasure from playing with the smooth scrolling on an iPhone. Nor does it describe why people complain about the lack of it on Android.

    Step Functions Are Alien

    If you look around yourself in the world, you are surround by changes in your environment that happen in a smooth fashion. Doors smoothly transition from open to closed. The wind blows trees back and forth in a smooth fashion. The temperature changes slowly. The sun moves across the sky slowly.

    One way of looking at these changes is to describe them by a function which describes how their characteristics change over time. All of these examples would be described by functions which consist of smooth curves. This whole class of functions can be loosely described as "analog functions".

    On the other hand, a "step function" is one in which the value described jumps between values in an instantaneous fashion. If they existed in the real world, it would be like a door going from open to closed in a split instant with no smooth movement in between. When you visualize such a function it looks like stairs - hence the name.

    I believe that step functions are foreign to us as human beings. They are not common in nature and I believe that biologically we are not tuned for dealing with them. In fact, if things around you started behaving in a step function like way (doors open one instant are closed in the next, the sun is up one instanct and down the next, etc.) you would not only be unsettled, you would begin to question your own sanity.

    Animation Makes User Interfaces Unalien

    Up until about 5 years ago, we were presenting screens to users with many unnatural step function changes. Windows would instantly open and disappear. File icons would instantly jump to their proper locations. Menus would instantly appear and disappear. Viewed in this context, it's no wonder that Technophobia is a real problem.

    The conclusion I've come to is that the real reason good computer animation is effective and appealing is quite simply because it presents analog behavior to us. All of the sudden and jarring step functions have been replaced with analog functions. Items fade, slide, zoom and reshape themselves smoothly. I think this has a lot to do with the success of the iPhone and other animated GUIs in the consumer market.

    So, the next time you hear somebody in the tech community complain about "eye candy" you might want to ask them instead why it's taken us as an industry so long to figure out how to stop alienating our customers.