{"id":75,"date":"2006-06-16T19:19:23","date_gmt":"2006-06-17T02:19:23","guid":{"rendered":"http:\/\/newsfeed.fatorcaos.com.br\/wp\/?p=75"},"modified":"2006-06-21T09:18:46","modified_gmt":"2006-06-21T16:18:46","slug":"user-interface-animation-whys-it-any-good","status":"publish","type":"post","link":"https:\/\/labs.zeh.com.br\/blog\/?p=75","title":{"rendered":"User interface animation: why’s it any good?"},"content":{"rendered":"

In the Flash development community, many people seem to agree that having interface elements<\/em> 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.<\/p>\n

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<\/em> 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<\/a>. 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.<\/p>\n

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.<\/p>\n

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

User interfaces are often based on static presentations\u2014a 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.<\/em><\/p>\n

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\u2019s 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.<\/em><\/p><\/blockquote>\n

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

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<\/em> animation is better than just having linear animation. Does that ring a bell? It should, considering Robert Penner’s easing equations<\/a> are the core of every tweening\/easing engine for Flash, including MC Tween.<\/p>\n

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<\/em> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,2,6],"tags":[],"_links":{"self":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/75"}],"collection":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=75"}],"version-history":[{"count":0,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/75\/revisions"}],"wp:attachment":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}