Let's start with a bad idea.

I'm sure the ideas are already popping into your head. Flash animation on mobile devices...good grief. Believe me, I still feel the sting of early Flash animation on the web. Hell, I'm responsible for some of it. At least now we have a little hindsight. Here are a few things to keep in mind. Often what would be bad Flash animation on the desktop is going to be bad on phones. Furthermore, devices typically have very little memory and run much more slowly than their desktop counterparts. So in general, anything large is going to be bad. However, instead of focusing on the obvious examples of poor mobile Flash animation lets look at some edge cases.

Pick up just about any mobile phone these days and you find yourself navigating through some sort of vertical list. It's just about the most common user interaction phones use these days. One of the first things we ask (or are asked) when designing an interface like this, is how can using Flash make this experience better? Certainly animation is going to come up early in the discussion and one might consider taking such a simple static list and animating it. Below are two examples of the same list. The first one is representative of a common static scrolling list, while the second one is subtly animated. Use the up and down arrows to move the selection.

Note: You will see many Flash movies in our blogs. To interact with them, click on them first to give the individual movie focus. Then you will be able to control them with the keyboard.

Which do you like better? It's easy for me. The static menu is much more responsive. Sure the little animation is nice, but is it a better experience?

Now it certainly could be argued that the animation in the second list reinforces the physical interaction of the user as they move through the items (in fact I'll be arguing that rationale for other uses of animation in part two of this blog entry). However, navigating a vertical list is so commonplace to phone UIs that here it is gratuitous and actually makes the menu feel sluggish. At the same time, it adds little to the usefulness of the UI - the change is purely aesthetic.

Furthermore, recall from Andrew's blog entry that on phones, space is precious. Since everything is so much smaller on the phone screen, animations need to be large to be noticed. On a phone, the animation of the focus area sliding up and down is so subtle that it goes largely unoticed.

If you haven't seen a PSP lately, then you should. Because their UI is gorgeous. And its animated, much like the example here. But keep in mind that there is a huge difference between the powerful PSP processor and its lucious screen and nearly every phone on the market. If space is precious, so is memory and performance. On a phone we average about 5-7 frames per second. Compared to what we're used to on the desktop, that's slow. Animations that take up the whole screen run even slower because so much more must be updated each frame. Which isn't to say that you should never do big animations, just have a very good reason and be efficient. Here again, the sliding list items offer very little to enhance the UI, while coming at major cost to playback performance.

The design moral of this little story is, "just because you can do it, doesn't mean you should". In part two of this blog entry I'll show some examples of more useful mobile UI animation using FlashLite.

Josh Ulm
Principal Designer/Developer, XD Team