The Art of Simple Web Animation in jQuery
So, we've got a complete web site design that is ready for coding. On the design, there are a couple areas that indicate that content should be rotated in real-time. It takes no effort at all to hop on Google and reference your favorite "how to do a (insert effect name here) in jQuery" article. So, why on Earth am I writing an article about this?
There are plenty of transitions possible using jQuery, and it's certain that any one of them will be adequate for achieving the goal of rotating content. When trying to craft the perfect web experience, though, "adequate" is just not enough. You have to pick the RIGHT transition for your animations, and you have to do so in a way that is visually pleasing to the user. In fact, most of your transitions should be so clean as to largely blend with the rest of the content on the page.
Which Transition To Use When
For the topic of knowing which transition to use when, I have to largely rely on a gross generalization. This is probably the simplest and most helpful way to think of jQuery transition possibilities when you are somewhat inexperienced in using them effectively. Ready for the grossness?
- Use crossfade effects when transitioning items that are likely to be mostly unrelated.
- Use scrolling/sliding effects when transitioning items that are related or similar in classification.
The key thing to remember about transitions is that they have to largely match what the user is going to expect. If you're introducing completely different content, use fades to "start the slate fresh" in your rotation area. If you're introducing related content, gently transition the new content in so that the user can see the relation between them.
Beyond that, you just want to use transitions that match the theme of your site. Use opacity animations where it makes sense for an item to get incrementally more visible or less visible. Use fitting hover effects to show proper focus on items in a way that the user will understand and be encouraged by. Use position animation only when it makes sense for something to be moving abnormally on the page. Use a "cloud" animation (something moving and animating into view, then disappearing) when displaying rotating information that is either spontaneous or doesn't demand a lot of the user's attention.
Also, keep in mind that you'll likely be combining multiple animations in a single page. Make sure that your animations work well together; if not, you either need to change a transition or remove the transition altogether to prevent creating an unpleasant experience for the user. This leads me into my next point...
Overdoing It
This is the part where I chastise you for something that you've probably already done. While jQuery animations are a wonderful thing to improve the user experience, too much of a good thing (as with most things) will ruin it. Users don't want to wait on bulky transitions to get to the content on your site, and they also don't want numerous transitions to distract from the content. Use transitions where they make sense to be used, and make every effort to speed up the transition to the point where it is elegant and pertinent, but not obnoxious. Also, it's usually best to avoid combining multiple transitions; while they are great alone, they will probably combine to be a confusing and annoying mess.
Keep it simple, keep it clean, and make it improve the overall experience that your web site has to offer.
Conclusion
This should get you started on the way to using animation effects (not just jQuery, though that is what I mainly use now) to improve your web site. A lot of the finesses that really make for rewarding web sites stem from plain old experience. So, get to animating, keep these few things that I've mentioned in mind, and learn from your own testing about what will work well and not work so hot. :-)
Comments
There are currently no comments on this item. Leave a comment now!
Leave a comment!