UI Animation and UX: A Not-So-Secret Friendship

by Val Head

13 Reader Comments

Back to the Article
  1. Great overview of animations, Val! “Prototyping and iteration are your secret weapons” is great advice. I’d also suggest that testing your animations with actual users during the prototyping stage is worthwhile. If your animation is a delighter, it’s great to see their reaction in real life; if the transition confuses your users, it’s super easy to tell. Thanks for the article!
    Copy & paste the code below to embed this comment.
  2. Love the intro. Yes, I have those memories and am guilty of having implemented several as requested by clients (in spite of many attempts to talk them out of it). The idea of providing animation to show where something came from is a method I’ve investigated before but so far have not had a chance to implement. I will be able to push harder now thanks to this great article. Thanks.
    Copy & paste the code below to embed this comment.
  3. Thank you for this excellent article, there are many valuable points to wonder about and start experimenting. The examples provided are right in line with something I’m working on, and give me a good basis to play with right away.
    Copy & paste the code below to embed this comment.
  4. Great Article! Considerer this one as a further reading https://medium.com/design-ux/926eb80d64e3
    Copy & paste the code below to embed this comment.
  5. Thanks for the great comments, guys! I’m glad you found the article helpful! Please do share what you’re working on if you can. I’d love to see it!
    Copy & paste the code below to embed this comment.
  6. Awesome article!
    Copy & paste the code below to embed this comment.
  7. Thanks for sharing Val.
    One thing I was surprised with this articles was at the lack of catz ;-)
    Meow!
    Copy & paste the code below to embed this comment.
  8. Thanks for the insights. Sometimes the nostalgic part of me misses the day where flash was used extensively. I know we are better off than we were without it, but it would be great to see more animation on the web. Hopefully this article will kickstart its implementation. For my smaller projects, I find it is hard to convince clients to make time for exploring animation. The new tools definitely help get ideas out quick and easy, but they also need to understand the value.
    Copy & paste the code below to embed this comment.
  9. I loved this! Thanks for the great read! I have found that, much like dessert, animations are great in moderation! Too much of anything can make you sick, but the right amount gives you that warm, sugary satisfaction… =)
    Copy & paste the code below to embed this comment.
  10. Working on the presentation layer like this can be some of the most fun.
    Copy & paste the code below to embed this comment.
  11. @Justin Secor, I wholeheartedly agree that testing animations in front of actual users is a vital step of the process.  Userlytics, a place I do some work for, has a platform where you can test all kinds of prototypes.  It would be great to do a rapid iterative study where if one animation doesn’t delight the user panel, a tweaked version could be presented either right away or for the next participant.  I suppose it would depend on how complex the animation was and what the reasons were for the negative reactions to said animation. Great article!
    Copy & paste the code below to embed this comment.
  12. For anyone not already familiar with this, you need to check out this incredible, fine-tuned tool (Greensock) - http://www.greensock.com/ In my opinion, CSS animation has its place in subtle, specific things such as UI state changes. But for anything that falls into the realm of the design concept rather than details, a real production tool such as Greensock should be used. Not to mention that Greensock gives you the power we’ve lost with the death of Flash - a seamless, easy to use, timeline upon which to step your animations and slave them to whatever you wish - be it passage of time, user action, scrolling etc.  And it’s faster than anything else out there.
    Copy & paste the code below to embed this comment.
  13. What a great article!  Animations in UI design are a delicate balance but they do really enhance the user experience.  This does not only apply to the web, but other applications from smartphones to tablets to even your cable and satellite tv box (which companies really have yet to polish).
    Copy & paste the code below to embed this comment.