Pet Theory header image 2

why animate a transition?

June 22nd, 2006 by pet-theory

Most transitions should be handled in Flash without animation, because most transitions are driven by perusals and not commitments, and for perusals, animation is laborious.

Let's say I'm mousing over a menu; why not have text or images come up immediately, on rollover? If your design is logical (where does the material come up?) and your programming suave (you've loaded in the background), this immediacy will free users to look around (focusing here and there, backing out with ease) without having to commit.

But let's suppose the user commits and selects; even then, the question should be asked: why animate? It's useful, because at least if know why you're animating, you'll have an idea how to animate.

Let's say the content that loads is melancholy, perhaps a slow blur tween can calm the user and prepare him to squeeze out copious tears…for comic content, perhaps bounciness, elasticity…for corporate efficiency, exact, efficient motion.

Of course, the meaning of transitions often resides in the logic of the interface itself rather than any content per se. Transitions can orient the user. An event happens, the state of the interface changes, and the user is supplied with a visual correlative of this change.

Let's ignore the fact that 95% of the time, designers use this visual correlative just because they can (animations for the hell of it, dude!), and focus on a few ways that animations can orient users.

1) They can make emerging graphics less (not more) prominent. (As thumbnails load, the user might already be looking at a thumbnail…so the currently loading thumbnail should materialize like a docile child waiting to speak, fading in rather than popping in).

2) Morphing shapes can retain references to consistent layout elements while changing according to state. (The back button used to be on the green square…now it's on the green rectangle…the shape is different, but the same).

3) To anticipate content before the content is loaded. (Preloaders should combine standardized and custom elements, if you ask me.)

There are other reasons–though not so many as "LA Flash" designers assume–to use animated transitions.

Keep in mind that these animations should play quickly if they are intended to be an integral part of the user's interface experience. A plurality of our neurons are devoted to processing visual information, which we do faster than PlayStation to the power of xBox. If you are using an animation to orient the user, the user is probably going to be oriented (or not) in milliseconds.

A rule of thumb: since we see before we verbalize, the visual cueing we give users should be accomplished in less time than it would take them to internally articulate it ("oh…that's still the back button"). Otherwise, the normally slow verbal part of the brain gets to the finish line, has some gatorade and takes a squat before the normally speedy visual component of the brain finishes up. And that's perverse.

Tags: motion · gripes · FlashNo Comments

Leave A Comment

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.