Animation in user interfaces: not just for coolness anymore!

ORIGINALLY POSTED JULY 26, 2009

 

A question that gets raised a fair bit in my line of work is that of animations in UIs.  Nowadays, most UIs have some sort of animation going on in them: windows expanding and contracting, menus fading in and out, comboboxes that slide open, that sort of thing.  As someone who spends a great deal of his work day, and beyond, thinking about and dealing with UI design issues, more than once I’ve had someone suggest such animations are superfluous and ask my thoughts on the matter.

I have to admit, for a very long time, I whole-heatedly agreed that animation was pointless.  That was until I did some research and began to understand the reasoning behind why people were starting to do more and more of it.  Contrary to what you may think (and what I frankly thought), it’s not just about a “coolness” factor (although that undoubtedly plays a role sometimes).  No, there are some very good reasons for doing it.

It all comes down to some interesting facts about cognitive science, that is, understanding of how the human brain processes information.  You see, the human brain, more specifically, how it deals with visual input (although it’s true to some extent of your other senses too), doesn’t react too well to sudden changes in the environment.  You can of course convince yourself of this pretty easily just by thinking about what happens when someone sneaks up behind you and throws a hand in front of your face suddenly.  You get startled, most of the time at least, right?  There is of course some basic survival instinct at play here: it stems from the fact that sudden changes in the environment are interpreted immediately as being potentially life-threatening and steal your attention suddenly, jarringly.

However, the more interesting fact is that your brain has trouble believing itself, in a sense, when things just suddenly appear, once it determines there’s no actual danger (which, unless you’re working on a nuclear submarine is usually true of computer interfaces!).  You see, your intellect knows that things, generally, don’t happen that way.  Things don’t usually appear out of nowhere (unless they appear suddenly on the periphery, which is expected, but here we’re talking about things suddenly appearing in your primary field of focus, i.e., right in front of your face).  So, when your brain receives such a signal from your vision subsystem, it basically goes “WTF?!?”  And, it’s jarring, which is the problem.  Your brain has to do a massive context-switch at that point, and context-switching is bad, m’kay?

Now, imagine sitting at your desk and thinking to yourself, “Self, I gotta write a note, so go pick up the pencil”.  Your hand moves, grabs the pencil, and it gradually moves into your field of view (we’ll assume you grabbed it without having to look at it).  There is a gradual motion here, the pencil moving from the position in space it occupied before you moved it, to the position it ends up occupying when it’s in position to write.

Your brain has no problem with that, you see, because it happened over time and your brain was able to track it.  Or, to put it in a way that fits the context of the post: its position in space was animated!  It moved, gradually over some period of time that was above the minimum threshold at which your brain has that “where the hell did that pencil come from?!?” reaction.

Now, going back to UIs… if a window just suddenly appears, even if you don’t perceive it, your brain will be taken aback a little bit by that.  True enough, working on a UI that works that way long enough will minimize the effect to the point where it’s more or less irrelevant, but it’s always there.

That’s why animation is a helpful thing and not superfluous eye candy: it effectively helps your brain comprehend what’s happening in the UI faster, easier and with less cognitive dissonance, which is a term that refers to the mental gymnastics your mind has to do when confronted with two seemingly contradictory ideas (in this case, the fact that the window wasn’t there one moment and now suddenly is).

The other important factor here is that animation actually helps you use the UI more effectively.  When something happens in an animated way, your brain can track the change far more effectively and your reaction times improve.  It’s pretty easy to understand really: the amount of time it takes your brain to overcome the cognitive dissonance of a non-animated change can often times be greater than the amount of time the animation itself would have taken if implemented, plus the time it takes you to literally react to the change, thus you respond faster.

To boil this all down to something succinct: animations in UIs help the user to experience less cognitive dissonance, comprehend and even notice changes more effectively and ultimately lead to faster, smoother UI interaction responses.  They are by no means superfluous and aren’t just something pretty to impress your friends with!

We have seen over the past few years a lot more animation in UIs.  Partly this is because the necessary hardware power became available to support it, but also because the basic understanding of its benefit were realized.  Apple has probably done more than most others to demonstrate this.  Virtually every UI Apple has done for some time has some form of animation, from the iPod to the Mac to the iPhone, they all have it.  Very often it’s so subtle that you barely notice it, but that’s exactly the point.  And isn’t it true that most people agree Apple produces some “smooth” UIs?  Guess what?  Animation plays a key role in that judgment!

Now, all that being said, it’s also 100% true that you can royally screw up animations and wind up with a large negative impact.  Animations need to be quick, in fact, just quick enough to be perceivable, and also need to be fairly mundane, in a way, or you might even say realistic in some way.  Those windows that explode in a million pieces when minimized may look hella-cool for instance, but they aren’t really helping the user any, certainly not as much as a simple shrink-to-the-taskbar kind of animation, because it’s not something anyone typically expects a window in any context to do!  So, it can do a lot more harm than good in the end.

Also, keep in mind that the term “animation” isn’t limited to motion.  For instance, you can animate the color of an element across some range, say highlighting a message in yellow briefly and then fading gradually back to the standard background color.  This is a very common UI trick referred to as the Yellow Fade Effect, and it is also a form of animation!  Animation just means a gradual change of some property of an object over time (usually a visual property, but not necessarily).

So, the next time you’re working on a UI design, and you want to impress your boss by putting in some cool-looking animations, you can sell her on the fact that it’s not just something cool and isn’t just pointless work to make your little programmer heart be into the project.  No, there are legitimate, scientific principals at work there that, when done right, will have a positive impact on the human-machine interactions you’re building.

But yeah, they can STILL be cool too!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.