UI Design: Animation
Being fairly busy this week, I am going to skip over the regular Friday Review. Instead, I will offer my thoughts on the use of animation in user interface (UI) design.
Today, OS X Leopard is released for the Mac. It’s a new operating system that offers many upgrades, one of them being Core Animation—a technology that allows for complex animations to be integrated easily into the UI. As technologies like these become more common, as we gain more processing power and as developers realize the importance of visual quality in their interfaces it is important not to jump in and implement eye candy for the sake of it. Animating the user interface is a risky business because it is very easy to get it wrong.
The most obvious risk is the delay that the animation may cause between the user activating a certain function, and then that function fulfilling its task. A good example of this is the “genie” effect when you minimize windows in Mac OS X where the window gets visually ’sucked’ into the Dock. The whole effect takes about a second to complete, and while it is visually impressive, it still produces a delay—a delay that can potentially have negative effects on users’ productivity.
I think the delay in the genie effect may even be intentional, aimed at slowing you down, giving you time to catch your breath if you will—if only for a second. Sometimes it works just fine. Other times you feel that the window does not go away fast enough. During those times you really begin to feel the friction the interface creates between you and your work. Adding a 1 second delay to a function can add up to a lot of time…say you use a function 20 times an hour. If you work for 7 hours a day, this will add up to 140 seconds a day. If you work 5 days a week, it will add up to 700 seconds—over 11 minutes. This will further add up to about 12 hours a year of lost time, all because of one single animation. What if there are 10 animations? A split second of time may not be a lot, but if you use a function not 20 times an hour, but 100 times an hour, the lost time will add up real fast—and the user will feel it as they continue using your application.
Animations should thus be used sparingly and with care. The more frequently the function you apply the animation to is used, the quicker and more subtle the animation should be. Very frequently used functions should not be animated at all—or there should be no delay. The worst thing the interface can do is waste the precious time of its users, especially if that time is being wasted on visuals that serve no function.
Having said this, I think animations can work, and indeed, I recommend using subtle animations throughout a visual UI. Animations can look beautiful, and beautiful interfaces are pleasant to use. If the person enjoys using the UI, they will be less stressed and more focused—they will like using your application, and that is of course very important if you wish to gain happy users and customers. Animations are not only used for eye candy, they can be used for function. Animations can attract the user’s attention to an area of the interface, indicating something has changed or needs changing. Intelligently designed, animations can be used to grab the users hand and lead them through the interface—all by catching their attention from one item to the next. Be careful not to overdo it, as you will risk causing delay and/or confusion.
Another point to note is that if the animation is fairly complex or powerful, it may get repetitive really fast. Things that people notice get boring quick because people keep looking at them all of the time. To create an animation that will pass the test of time you have to make it so simple that the user will hardly notice it. It must be very subtle—enough power in it to attract the users attention if required—but not so potent that it screams for attention every time it plays. As a general guideline, keep the number of animations low, keep them short and keep them subtle.
Comment by Dave Hawkins — Dec 8, 2007 @ 5:51 am
There’s a similar sucking animation to the mac one in windows XP, but it’s pretty subtle. I find it helpful because it gives reassurance that I’ve minimised a window rather than closing it, and it also provides a subconcious clue to where on the taskbar the window is displayed. II think it’s appropriate because if I am minimising a window in windows, I’m probably switching from one task to another. Within applications I expect switching windows to be instantaneous, for all the reasons you describe.
The one UI animation that really bugs me is the scrolling-sideways effect on my iPod Nano as one switches between menus. It’s useful feedback to demonstrate the layered concept of the interface - main menu to a list of categories, list of songs and then to the play screen and back, but unfortunately the designers didn’t see fit to endow the device with enough grunt to display the animation smoothly. As a result, the slow, jerky animation of the menus makes using the iPod faintly irritating, and rather detracts from the high-quality, luxury impression of the rest of the package.
Comment by sandrar — Sep 10, 2009 @ 8:48 am
Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.
Comment by angelina jolie — Sep 10, 2009 @ 10:21 am
I love your site. :) Love design!!! I just came across your blog and wanted to say that I
Comment by megan fox — Sep 11, 2009 @ 9:49 am
Sign: umsun Hello!!! rcuwwymhyw and 3948ssgfhphzye and 7836I love your blog. :) I just came across your blog.
Comment by jenna — Sep 21, 2009 @ 10:53 am
Sign: yyams Hello!!! punht and 843dhursyvpxd and 7004 My Comments: Cool!
Comment by UI Design — Mar 10, 2010 @ 5:53 am
that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.
Comment by toner hp — Dec 16, 2011 @ 2:32 pm
bonjour vous j’aime bien cet article mais le toner hp est mon probleme.
Comment by immobilier — Jan 5, 2012 @ 1:14 am
Coucou les gens que pensez-vous de mon nouveau blog sur l’immobilier?
Comment by Mikel Dolio — Jan 23, 2012 @ 6:52 am
I want to show some thanks to you just for rescuing me from such a dilemma. After surfing throughout the the web and meeting proposals that were not productive, I figured my life was done. Existing devoid of the answers to the difficulties you’ve resolved as a result of your article is a critical case, as well as the kind that could have badly affected my career if I had not noticed your website. Your own expertise and kindness in dealing with all the pieces was valuable. I don’t know what I would’ve done if I hadn’t discovered such a subject like this. I can also at this point look ahead to my future. Thank you so much for the impressive and result oriented guide. I won’t be reluctant to refer your site to anyone who needs and wants support on this situation.
Comment by AbodATeekbise — Jan 30, 2012 @ 10:41 am
adultfriendfinder mobile adultfriendfinder iphone
Comment by ontario retirement homes — Feb 3, 2012 @ 5:34 pm
20. Marathon runners with bad shoes suffer the agony of de feet.
Comment by surfactants inc — Feb 23, 2012 @ 8:00 am
and then pitch nine innings of one-hit shut out ball the first time he faces us.
Comment by Edwin Vehrenkamp — Apr 30, 2012 @ 1:46 am
obviously like your web-site but you have to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to inform the reality nevertheless I’ll certainly come again again.
Comment by ctab surfactant — May 5, 2012 @ 1:32 am
Thanks! Will probably be nice to anyone who usess it, including myself. Sustain the nice work for positive ill take a look at extra posts.. Hey very nice blog!! more please great pleasing.
Comment by Boxing Gloves — May 7, 2012 @ 8:37 pm
2008 Poster
Comment by download dubturbo — Jun 19, 2012 @ 2:27 am
Thanks for sharing your ideas. I’d also like to express that video games have been actually evolving. Technology advances and innovative developments have made it easier to create realistic and interactive games. All these entertainment games were not that sensible when the actual concept was first being tried. Just like other areas of technological know-how, video games as well have had to progress via many many years. This itself is testimony for the fast growth of video games.
Comment by dubturbo — Jun 21, 2012 @ 10:23 am
One other issue issue is that video games usually are serious naturally with the most important focus on understanding rather than amusement. Although, it has an entertainment part to keep your sons or daughters engaged, each one game is normally designed to work with a specific experience or curriculum, such as instructional math or technology. Thanks for your write-up.
Comment by Robetoustitte — Feb 23, 2013 @ 4:36 pm
最安値 信頼感 メイデン いと 非常に ソックス 焦点 吸水性 通販 安全 スパンデックス 新入荷 あさ vivienne 通販 その他なし 紫色 趣味 メッシュ 割引価格 クラシック 使い易さ 海外通販 ショルダーバッグ 爽や 貴族の品質 特性 最も優遇の価格 レギンス ストッキング
ほうこ ちからまかせ じゅわ べつびん クール こげつく ふかひ しけん おくがた いわぬがはな よこ ヴィヴィアン 店舗 りくせい こころいわい ワイン ボトル さまよう とんご なだらか せんとうき クッキー けんこうこつ かんたいじ ひび じゅんか とうろうながし
Comment by Gavin — Feb 26, 2013 @ 5:53 am
Hi there! I simply would like to give an enormous thumbs up for the good data you’ve right here on this post. I shall be coming back to your blog for more soon.