Attention: you're visiting an archived version of this post on my old website. Click here to view this same post on my new website.

User interface animation: why’s it any good?

In the Flash development community, many people seem to agree that having interface elements animation – say, a button fading, menu elements sliding, etc – is pretty cool, even if they can’t theorize more about the reasons why. Some people, however, argue it’s not needed – it’s only wasting the user’s and the developer’s time.

I’m myself a defender of having interface elements which don’t simply pop on screen or warp around immediately. I like to believe that making sure elements move, fade or scale on screen when needed in an animated fashion actually help navigation – despite using more of the user time, being able to follow the interface flow on screen could be in itself a positive point for interface animation. This is a theory I’ve had in mind for a few years after working so much with MC Tween. As a result, on all the websites I’ve developed, I never make screen items just pop out of nowhere or teleport around: they always slide, scale, fade, or everything at the same time, behaving as if they have a physical purpose. And believe me, I’m usually the kind of guy who isn’t attracted to animation just because it looks “cute” – for example, when I install Windows, one of the first things I do is turn off all menu and window animation.

But the thing is, I’ve never actually stopped to think on theories about why animation can actually be positive on website interfaces. During research for my upcoming interface design bachelor degree paper, I did look for something of the kind but wasn’t able to find anything conclusive… until today.

Today, almost by mistake (while having a look at the BumpTop interface paper as pointed by Scott Janousek here) I finally found a research paper that’s exactly about this very subject. To quote:

User interfaces are often based on static presentations—a series of displays each showing a new state of the system. Typically, there is much design that goes into the details of these tableaux, but less thought is given to the transitions between them. Visual changes in the user interface are sudden and often unexpected, surprising users and forcing them to mentally step away from their task in order to grapple with understanding what is happening in the interface itself.

When the user cannot visually track the changes occurring in the interface, the causal connection between the old state of the screen and the new state of the screen is not immediately clear. How are the objects now on the screen related to the ones which were there a moment ago? Are they the same objects, or have they been replaced by different objects? What changes are directly related to the user’s actions, and which are incidental? To be able to efficiently and reliably interpret what has happened when the screen changes state, the user must be prepared with an expectation of what the screen will look like after the action. In the case of most interactions in unanimated interfaces, this expectation can only come by experience; little in the interface or the action gives the user a clue about what will happen, what is happening, or what just happened.

The paper is called “Animation: From Cartoons to the User Interface”, has been written by Bay-Wei Chang and David Ungar, and was published at “UIST: User Interface Software and Technology”. More information, including a PDF download and some cross-references and citations, can be found here. Don’t let the paper title fool you: it only uses cartoons as a reference to explain object positioning within the time of animation, but it’s completely related to user interface design and animation.

Here’s the funny thing: the paper has been published in 1993 – when Windows 3.01 dominated the desktops – but is surpringly related to Flash interface discussion. The paper even goes at length to explain why having easing animation is better than just having linear animation. Does that ring a bell? It should, considering Robert Penner’s easing equations are the core of every tweening/easing engine for Flash, including MC Tween.

The paper is short (11 pages in total) and pretty easy to read. There seems to be some issues with it (pages are in reverse order, and images are so whitened you’ll need to copy them to Photoshop and do a Levels change to actually see something), but I’d recommend it for anyone interested in knowing more about interface animation. While it may still be dispensable on interfaces that are more task-oriented like applications (where the interactor is oftenly aware of the usage rules and behaviors), websites and other experience-geared interfaces can definitely benefit from such ideas. To me, well, the paper’s already integral part of the reference list for my upcoming research paper.

Posted on 16/Jun/2006 at 7:19 pm | Comments (0) | Trackbacks (0) | Categories: Easing, Flash, Interface

Comments (8)

that’s about as well put an explanation as you’re going to find on that subject. flash’s ability to animate a change in state has always been what’s set it apart.

Posted by flashape on 17/Jun/2006 at 11:56 am

A good discussion to raise.

Certain programmers have raised their opinions with me saying the animations are completely unneccesary and annoying. They would believe that consistency and conformation to standards are the key to succesful usability within UI design of applications.

My point of view is that i have dedicated my work towards flash because i believe the opposite.

To me the current designs of most applications are boring and the standards are only succesful because of repition of use.

I am a believer in flow.
Most people find it difficult to efficiently concentrate on 2 processes at once. I believe application use, should essentially be guided (similar to the install wizard) and from that concept animations can be utilised very succesful in creating a linear flow process that is intuitive to a first-time user of an application or RIA.

Flash and the RIA movement puts the power back to the developer in creating innovative user experiences.

I dont believe the formula to succesful UI design should ever be set in stone.
It is a constantly developing field and flash developers are frequently creating new concepts and ideas that set new standards.

Posted by Bjorn on 17/Jun/2006 at 10:54 pm

Absolutely my point of view on graphical user interfaces!
It’s great to find this ideas

Posted by Nikita on 18/Jun/2006 at 5:43 am

Thanks for the link,Zeh. Clients like this quality of documented reassurance backing up the ‘felt’ delight of modest and thoughtful guiding animation in an interface.

Bjorn’s reference to ‘flow’ defines the experience well.

Our work at 2GoTo.com tries to give the end user state-flow control of the interface.

Posted by Dave_Matthews on 18/Jun/2006 at 7:38 am

Hi Zeh.

Right on.
I guess in the end it all boils down to feedback.
Our sensorial machine, be it the organs themselves (eyes etc) or our minds reading those inputs have evolved on the physical world, and are used to have continuos feedback on the real world.
When you open a door, that door will slide. I you want to browse a magazine you must grab it, bringing it to your reach…every page you turn will move and fold, revealing where you came from.
The digital world is discrete, you can just jump from one things to another. Animations used in transition make the flow more obvious and really aids in understanding where we are / where we are going to. Adding transitions hits the spot with our expectation to have continuos transitions between states, since the feedback is instantaneous.

very good read.

cheers
arthur
p.s.: on a side note. Thinking about hacking… seems that running a full blow debugger , with breakpoints and such follows the same idea. If you have a few print statements spread in your code, it’s harder to understand transition (in your data and logic) and that’s where a debugger can help.

Posted by arthur debert on 27/Jun/2006 at 7:01 am

Animations express a sense of process and continuity that is difficult to convey through other techniques. Although interfaces can often benefit from animation, User Interface Management Systems (UIMSs) rarely provide the tools necessary to easily support complex, state-dependent application output, such as animations.

Posted by shredders on 14/Oct/2006 at 12:00 am

Speaking of tweening, animation and what not, how can you implement easing into your zminimaltextslider component?

Thanks Zeh!

Zee

Posted by Zee on 28/Dec/2006 at 2:23 am

Many of us have been so bombarded with bad press on client-side Java that advising anything other than an HTML-based front end would be like digging your own grave.

Posted by Frank fernandis on 18/Aug/2007 at 1:01 am