UI Design: Animation

on Oct 26, 2007

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.


51 Comments »

  1. 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.

  2. 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.

  3. 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

  4. 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.

  5. Comment by jenna — Sep 21, 2009 @ 10:53 am

    Sign: yyams Hello!!! punht and 843dhursyvpxd and 7004 My Comments: Cool!

  6. 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.

  7. Comment by toner hp — Dec 16, 2011 @ 2:32 pm

    bonjour vous j’aime bien cet article mais le toner hp est mon probleme.

  8. Comment by immobilier — Jan 5, 2012 @ 1:14 am

    Coucou les gens que pensez-vous de mon nouveau blog sur l’immobilier?

  9. 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.

  10. Comment by AbodATeekbise — Jan 30, 2012 @ 10:41 am

    adultfriendfinder mobile adultfriendfinder iphone

  11. Comment by ontario retirement homes — Feb 3, 2012 @ 5:34 pm

    20. Marathon runners with bad shoes suffer the agony of de feet.

  12. 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.

  13. 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.

  14. 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.

  15. Comment by Boxing Gloves — May 7, 2012 @ 8:37 pm

    2008 Poster

  16. 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.

  17. 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.

  18. Comment by Robetoustitte — Feb 23, 2013 @ 4:36 pm

    最安値 信頼感 メイデン いと 非常に ソックス 焦点 吸水性 通販 安全 スパンデックス 新入荷 あさ vivienne 通販 その他なし 紫色 趣味 メッシュ 割引価格 クラシック 使い易さ 海外通販 ショルダーバッグ 爽や 貴族の品質 特性 最も優遇の価格 レギンス ストッキング
    ほうこ ちからまかせ じゅわ べつびん クール こげつく ふかひ しけん おくがた いわぬがはな よこ ヴィヴィアン 店舗 りくせい こころいわい ワイン ボトル さまよう とんご なだらか せんとうき クッキー けんこうこつ かんたいじ ひび じゅんか とうろうながし

  19. 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.

  20. Comment by アディダス スニーカー メンズ — Nov 27, 2013 @ 10:16 pm

  21. Comment by buy youtube views cheap — Nov 27, 2013 @ 10:32 pm

    I liked up to you will receive performed right here. The comic strip is tasteful, your authored material stylish. nonetheless, you command get bought an shakiness over that you wish be delivering the following. unwell without a doubt come more previously once more as exactly the same just about very often within case you defend this hike.

  22. Comment by anastasia date — Dec 2, 2013 @ 7:04 am

    F*ckin’ remarkable things here. I’m very glad to see your post. Thanks a lot and i’m looking forward to contact you. Will you kindly drop me a e-mail?

  23. Comment by centrum konferencyjne — Dec 2, 2013 @ 10:45 am

    I simply wanted to send a small message to express gratitude to you for these remarkable suggestions you are giving on this site. My extensive internet investigation has finally been recognized with reputable points to share with my classmates and friends. I ‘d say that most of us visitors are unquestionably blessed to exist in a notable website with very many wonderful professionals with very beneficial tips. I feel somewhat grateful to have encountered your entire website page and look forward to tons of more thrilling times reading here. Thanks once again for all the details.

  24. Comment by organizacja konferencji — Dec 3, 2013 @ 2:43 am

    I have to point out my love for your generosity in support of individuals who need help on your situation. Your personal commitment to passing the message along turned out to be astonishingly productive and have really enabled men and women like me to arrive at their aims. Your entire invaluable guide entails much a person like me and extremely more to my peers. Best wishes; from everyone of us.

  25. Comment by wynajem sal konferencyjnych w Warszawie — Dec 9, 2013 @ 3:02 am

    I want to express my respect for your generosity supporting people that need assistance with this important field. Your personal dedication to getting the message up and down turned out to be exceptionally valuable and have specifically made men and women like me to arrive at their goals. Your entire invaluable suggestions signifies much to me and especially to my office colleagues. Thanks a lot; from all of us.

  26. Comment by dunhill pipe tobacco — Dec 19, 2013 @ 7:11 am

    I considered that some of this stuff could have been plagiarized, it’s scattered across the net and other peoples websites, unless you’re the first publisher?.

  27. Comment by quality lolitas — Jan 2, 2014 @ 5:51 am

    Awsome post and straight to the point. I don’t know if this is truly the best place to ask but do you folks have any thoughts on where to get some professional writers? Thank you :)

  28. Trackback by ceinture louis vuitton homme — Jan 17, 2014 @ 6:50 pm

    ceinture louis vuitton homme…

    Ils ont 茅t茅 initial vu au sein de l’ Film ‘ Lolita ‘ lib茅r茅 lanc茅 en 1962. Ils sont 脿 choisir dans un nombre de couleurs . Ils font un cr茅er un femme semble adorable et jeune ….

  29. Comment by dunhill pipe tobacco — Feb 6, 2014 @ 3:12 pm

    I think some of this data may have been taken from a feed, it’s scattered across the web and various peoples websites, unless you’re the content’s maker?. Thanks

  30. Comment by viagra — Mar 17, 2014 @ 12:01 pm

    In order to effectively reword comments, you need to be creative and clever. Convince the person that even though the article is quite bland, it’s still information they should have it posted on their homepage.

  31. Comment by public international law — Mar 30, 2014 @ 2:06 pm

    Excellent web site you’ve got here.. It’s hard to find excellent writing like yours these days. I really appreciate people like you! Take care!!

  32. Comment by μπομπονιερες βαπτισης — Apr 29, 2014 @ 3:25 am

    You actually make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!

  33. Comment by Samuel — May 1, 2014 @ 8:03 am

    “I want to start my own blog: are there such thing as blogs that are totally “”open”", and anybody can view it? I keep coming to the kind where you have to add other “”friends”" to use the site. . Links appreciated. Thanks!.”

  34. Comment by Antonio R. Rivers — May 8, 2014 @ 6:45 pm

    Has Been researching out there . I recommend your info. Do publish a whole lot more of this concept ok. Thanks a lot

  35. Comment by Jaymie Rega — May 27, 2014 @ 2:49 am

    Te lo agradezco !

  36. Comment by Cazare Studenti — Jun 16, 2014 @ 8:06 am

    Pensiunea Laura Brasov

    This is very interesting, You are a very skilled blogger. I’ve joined
    your rss feed and look forward to seeking more of your
    wonderful post. Also, I’ve shared your website in my social networks!

  37. Comment by website hosting — Oct 10, 2014 @ 7:12 pm

    Great web site. Lots of useful information here.
    I am sending it to a few friends ans additionally sharing in delicious.

    And certainly, thanks for your sweat!

  38. Comment by google play music pay attention now — Oct 16, 2014 @ 6:53 pm

    Movie star and singer Patrick Bruel was certainly one
    of France’s biggest stars during the ’90s, first making
    the name being a teen idol and leading an excellent to traditional French chanson inside new millennium.
    Bruel was created Patrick Benguigui in Tlemcen, Algeria,
    on, may 14, 1959. Their father abandoned the family when Patrick was merely
    a year old, including 1962, after Algeria won its independence, his mummy moved to France, deciding inside Paris suburb associated with Argenteuil.
    A fine soccer player in the youth, Patrick first chosen the
    idea of becoming a artist after seeing Michel Sardou perform in 75.

    As good fortune would have it, acting would deliver him his first accomplishment; first-time movie director Alexandre Arcady ran an ad seeking a new man which has a French-Algerian (or
    “pied-noir” in France slang) accent for his motion picture Le Coup een Sirocco.
    Benguigui (as having been still called) responded and received the part.
    The below year, he spent a in Ny, where he achieved Gérard Presgurvic,
    later to become his primary composer.

    Source: http://www.urbalapparel.com/?attachment_id=21

  39. Comment by boom beach trucos español — Oct 25, 2014 @ 7:42 pm

    Mientras que en el lanzamiento de Clash of Clans algunas de
    las mecánicas del juego constituían una novedad en el mercado móvil, al final del 2013
    (cuando lanzó Boom Beach) el mercado estaba mucho
    más desarrollado y la audiencia más sofisticada.

  40. Comment by Felisha — May 16, 2015 @ 6:24 pm

    This is a topic that is near to my heart… Cheers!
    Exactly wheere are your contact dedtails though?

  41. Comment by Enjoy Adidas Running Unisex Originals ZX 750 White Grey Red — Oct 10, 2015 @ 5:41 am

    Hmm it appears like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog writer but I’m still new to everything. Do you have any tips for rookie blog writers? I’d definitely appreciate it.

  42. Comment by bing — Mar 1, 2016 @ 10:41 am

    Hi, i feel that i saw you visited my web site so i came to return the desire?.I am trying to find things
    to enhance my website!I suppose its good enough to make use of some of your concepts!!

  43. Comment by http://noreaaah.tumblr.com/ — Jul 27, 2016 @ 6:25 pm

    Very shortly this site will be famous amid all blog visitors, due to it’s nice posts

  44. Comment by http://www.yates.co.nz/garden-club/public/71902 — Aug 23, 2016 @ 7:48 am

    The categorization makes it simpler as you can select
    a shirt on the basis of any parameter you like.
    Article Source: of your age, education or technical skills there are
    no specific requirements for being a successful online entrepreneur.

    While farming in Birmingham, Alabama, he was granted two patents for agricultural plow improvements that he
    subsequently sold to finance a successful real estate business.

  45. Comment by rask jersey — Oct 5, 2016 @ 5:09 am

    “With a number of the potential customers looking for approaching, organ of the way of thinking from the fresh coach is normally can the guy purchase the best involving young gamers, which is this individual designed to getting young members on the array, alone Hextall reported.

  46. Comment by vwj44f — Feb 9, 2017 @ 1:48 am

    What is Cialis? Cialis (tadalafil) relaxes muscles found in the walls of blood vessels and increases blood rush to discriminating areas of the body. http://cialis.withoutadoctorprescriptions.com/ cialis without a doctor’s prescription is toughened to healing erectile dysfunction (enervation) and symptoms of warm prostatic hypertrophy (enlarged prostate). Another label of tadalafil is Adcirca, which is reach-me-down to prescribe for pulmonary arterial hypertension. Do not take Cialis while also taking Adcirca, unless your doctor tells you to.

  47. Comment by mcfywz — Feb 17, 2017 @ 4:13 pm

    How is Cialis other from the currently approved products for erectile dysfunction (ED)? Cialis is http://canadian-onlinepharmacy.com/ canadian pharmacy peculiar from other currently approved products inasmuch as ED in that it stays in the thickness longer. However, there were no studies that directly compared the clinical efficacy and security of Cialis to other products.

  48. Comment by cutthewood.com — May 9, 2017 @ 6:08 am

    Thanks for the guidelines shared on the blog. Another thing I would like to state is that weight reduction is not exactly about going on a celebrity diet and trying to shed as much weight as you can in a couple of weeks. The most effective way to lose weight is by acquiring it slowly and gradually and using some basic guidelines which can assist you to make the most from the attempt to lose weight. You may recognize and already be following most of these tips, although reinforcing expertise never affects.

  49. Comment by rxztay — Jun 14, 2017 @ 3:54 pm

    Pharmacists be occupied in a vital place in the strength pains organized whole, and while responsibilities http://pillserectiledysfunction.com/ best over the counter ed pills change number the unalike areas of rather vocation, the foot figure is that pharmacists assistants patients get well and freeze well. Pill pusher responsibilities catalogue a scale of sorrow inasmuch as patients, from dispensing medications to monitoring compliant constitution and press on to optimizing their reaction to medication.

  50. Comment by http://www.wewantscience.com/ — Oct 25, 2018 @ 4:29 am

    Have you ever considered writing an ebook or guest authoring on other sites?
    I have a blog based on the same subjects you discuss and would
    really like to have you share some stories/information. I know my subscribers would value your work.
    If you’re even remotely interested, feel free to
    shoot me an e-mail.

  51. Comment by płoty ogrodzenia — Jun 26, 2019 @ 10:40 am

    Machamy na perspеktyԝie Okrążenia spośród Odmianą - Paweł Wróbel.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876