Leverage UI Animations for Progression

- July 3, 2011

For awhile, I was irritated with applications and web sites using UI animations, because, due to the technological limitations of the time, the execution is laggy. When I was using Windows, I would turn off all system animations. When I was using Firefox, I would disable scroll animation. Sacrificing responsiveness for aesthetics was not an option for me. Responsiveness means productivity. I want to focus on my work and not be stifled by the UI of my tools. If an application did not have the option to turn off the swoosh or the genie effect, I’ll find an alternative.

Then, I finally got a Mac. I expected to hate the UIs being heavily animated. Especially at the fact I can’t disable them. Nope. Love it. Execution was near perfect (it’s still a computer, it can’t ever be perfect). The animations were pretty and not laggy. Holding down shift button, I Ooohed and Aaahed. I finally saw that not all UI animations are lacking in execution.

But I noticed something beyond its eye candy value, something fundamentally important. It showed progression. It showed natural states of action. Let’s look at physical objects: if I throw a chair at you, it doesn’t teleport from my hands to your face in an instant (well, maybe, just because I’m strong as hell, argggh). Even if it occurs in a split second, you see the progression in the air as it leaves my hands and approaches your face (sorry to aim for your face. I’m just that pissed off at you). If I miss your face (lucky you), you can progressively watch where it lands (maybe your crotch, haha!). Where ever the object is going, you can predict its direction, because you can see states of the object in motion, and act accordingly. If the object teleports, where the hell is portal b going to be located? How can you react at the right time if the chair appears right before your eyes in an instant? Our brains can not process information at that rate, and it often gets disoriented, thus mistakes and frustration occur. UI animations mimic this natural occurrence in the virtual world to serve the same purpose.

Natural occurrences found in the physical world should be reflected in our softwares. Following the physical laws taps into the knowledge pool of what we already know of the physical world, and that pool is the size of an ocean. If put to use, reinvention of new thought processes won’t be needed for new tools, thus they can feel more natural or humanized to use. Visible progression of objects in motion is no exception. Translated into the virtual realm, animation should be leveraged to visually display the transition of UI states. When a user can see what is happening, he/she can react (or ignore) to the change of UI states in an appropriate time with minimal frustration and disorientation. For example: If an item is added to a long vertical list, don’t instantly jump to the bottom of the list to show the newly added item. A user might not understand what just happened or what they are looking at. Then he/she has to readjust by reprocessing the instantly displayed new information. Taking the focus of the user from content to UI. A No-No. Rather, use transition animation to pan down the list until the viewer reaches the new item in the list. This way, the user won’t be disoriented by being able to keep track the of UI state at each point of the progression. It follows a pattern in the physical world. A pattern humans have experienced before. Taking advantage of previous experiences makes the action predictable, in turn, more natural.

On the other hand, excessive animations can be counterproductive (ex. the dialog box blowing up to close it). Again, the focus has the potential to go from content to UI, because the animation style is not natural and it becomes your locus of attention. Stick with the simple and natural transitions, like slides and fades. The less complex, the less intrusive your UI will be. The less intrusive, the more productive your user will be.

We have the hardware. We have the software. We have the developers. We have the designers. Let’s start leveraging the advantages of UI animations in our products. In the past, users have been alienated by technology because it missed the human touch. We still have a long way for our everyday tools to feel completely humanized, but we’re closing the gap. Start small, use transition animation.